@openui5/sap.ui.webc.main 1.96.5 → 1.99.0

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

@@ -29,7 +29,7 @@ sap.ui.define([
 	 *
 	 * The <code>sap.ui.webc.main.List</code> component allows displaying a list of items, advanced keyboard handling support for navigating between items, and predefined modes to improve the development efficiency. <br>
 	 * <br>
-	 * The <code>sap.ui.webc.main.List</code> is а container for the available list items:
+	 * The <code>sap.ui.webc.main.List</code> is a container for the available list items:
 	 * <ul>
 	 *     <li><code>sap.ui.webc.main.StandardListItem</code></li>
 	 *     <li><code>sap.ui.webc.main.CustomListItem</code></li>
@@ -42,7 +42,9 @@ sap.ui.define([
 	 *
 	 * <br>
 	 * <br>
-	 * <h3>Keyboard Handling</h3> The <code>sap.ui.webc.main.List</code> provides advanced keyboard handling. When a list is focused the user can use the following keyboard shortcuts in order to perform a navigation: <br>
+	 * <h3>Keyboard Handling</h3>
+	 *
+	 * <h4>Basic Navigation</h4> The <code>sap.ui.webc.main.List</code> provides advanced keyboard handling. When a list is focused the user can use the following keyboard shortcuts in order to perform a navigation: <br>
 	 *
 	 *
 	 *
@@ -56,11 +58,10 @@ sap.ui.define([
 	 * <ul>
 	 *     <li>[SPACE] - Select an item (if <code>type</code> is 'Active') when <code>mode</code> is selection</li>
 	 *     <li>[DELETE] - Delete an item if <code>mode</code> property is <code>Delete</code></li>
-	 * </ul> <br>
-	 * <br>
+	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -76,29 +77,20 @@ sap.ui.define([
 			properties: {
 
 				/**
-				 * Sets the accessible aria name of the component.
+				 * Defines the accessible name of the component.
 				 */
 				accessibleName: {
 					type: "string",
 					defaultValue: ""
 				},
 
-				/**
-				 * Receives id(or many ids) of the elements that label the input
-				 */
-				accessibleNameRef: {
-					type: "string",
-					defaultValue: ""
-				},
-
 				/**
 				 * Defines the accessible role of the component. <br>
 				 * <br>
-				 * <b>Note:</b> If you use notification list items, it's recommended to set <code>accessible-role="list"</code> for better accessibility.
 				 */
 				accessibleRole: {
 					type: "string",
-					defaultValue: "listbox"
+					defaultValue: "list"
 				},
 
 				/**
@@ -138,7 +130,7 @@ sap.ui.define([
 				 * <br>
 				 *
 				 *
-				 * <b>Limitations:</b> <code>growing="Scroll"</code> is not supported for Internet Explorer, on IE the component will fallback to <code>growing="Button"</code>.
+				 * <b>Restrictions:</b> <code>growing="Scroll"</code> is not supported for Internet Explorer, on IE the component will fallback to <code>growing="Button"</code>.
 				 */
 				growing: {
 					type: "sap.ui.webc.main.ListGrowingMode",
@@ -165,7 +157,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * Determines whether the list items are indented.
+				 * Determines whether the component is indented.
 				 */
 				indent: {
 					type: "boolean",
@@ -238,12 +230,28 @@ 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: {
 
 				/**
 				 * Fired when an item is activated, unless the item's <code>type</code> property is set to <code>Inactive</code>.
 				 */
 				itemClick: {
+					allowPreventDefault: true,
 					parameters: {
 						/**
 						 * The clicked item.
@@ -335,5 +343,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return List;
 });

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

@@ -31,8 +31,10 @@ sap.ui.define([
 	 *
 	 * For the <code>sap.ui.webc.main.MessageStrip</code> component, you can define whether it displays an icon in the beginning and a close button. Moreover, its size and background can be controlled with CSS.
 	 *
+	 * <h3>Keyboard Handling</h3>
+	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -44,7 +46,7 @@ sap.ui.define([
 	var MessageStrip = WebComponent.extend("sap.ui.webc.main.MessageStrip", {
 		metadata: {
 			library: "sap.ui.webc.main",
-			tag: "ui5-messagestrip-ui5",
+			tag: "ui5-message-strip-ui5",
 			properties: {
 
 				/**
@@ -67,7 +69,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * Defines whether the MessageStrip renders close icon.
+				 * Defines whether the MessageStrip renders close button.
 				 */
 				hideCloseButton: {
 					type: "boolean",
@@ -129,5 +131,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return MessageStrip;
 });

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

@@ -26,9 +26,9 @@ sap.ui.define([
 	 *
 	 * <h3>Overview</h3>
 	 *
-	 * The <code>sap.ui.webc.main.MultiComboBox</code> component provides a list box with items and a text field allowing the user to either type a value directly into the control, or choose from the list of existing items.
+	 * The <code>sap.ui.webc.main.MultiComboBox</code> component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.
 	 *
-	 * It is a drop-down list for selecting and filtering values, commonly used to enable users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow of available options. The select options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens. <h3>Structure</h3> The <code>sap.ui.webc.main.MultiComboBox</code> consists of the following elements:
+	 * The drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options. The options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens. <h3>Structure</h3> The <code>sap.ui.webc.main.MultiComboBox</code> consists of the following elements:
 	 * <ul>
 	 *     <li> Tokenizer - a list of tokens with selected options.
 	 *     <li> Input field - displays the selected option/s as token/s. Users can type to filter the list.
@@ -49,13 +49,6 @@ sap.ui.define([
 	 *     <li> Backspace - deletes the token and focus the next token. </li>
 	 * </ul>
 	 *
-	 * In the context of <code>sap.ui.webc.main.MultiComboBox</code>, you can provide a custom stable DOM ref for:
-	 * <ul>
-	 *     <li>Every <code>sap.ui.webc.main.MultiComboBoxItem</code> that you provide. Example: <code>
-	 *             <ui5-mcb-item stable-dom-ref="item1"></ui5-mcb-item>
-	 *         </code></li>
-	 * </ul>
-	 *
 	 * <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>
@@ -65,7 +58,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -174,6 +167,15 @@ sap.ui.define([
 						type: "slot",
 						to: "div"
 					}
+				},
+
+				/**
+				 * Defines the width of the control
+				 */
+				width: {
+					type: "sap.ui.core.CSSSize",
+					defaultValue: null,
+					mapping: "style"
 				}
 			},
 			defaultAggregation: "items",
@@ -244,5 +246,8 @@ sap.ui.define([
 	 * @function
 	 */
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return MultiComboBox;
 });

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

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.MultiComboBoxItem</code> represents the item for a <code>sap.ui.webc.main.MultiComboBox</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -70,5 +70,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return MultiComboBoxItem;
 });

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

@@ -34,7 +34,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -56,14 +56,6 @@ sap.ui.define([
 					type: "string"
 				},
 
-				/**
-				 * Receives id(or many ids) of the elements that label the input
-				 */
-				accessibleNameRef: {
-					type: "string",
-					defaultValue: ""
-				},
-
 				/**
 				 * Defines whether the component is in disabled state. <br>
 				 * <br>
@@ -120,6 +112,14 @@ sap.ui.define([
 					defaultValue: false
 				},
 
+				/**
+				 * Defines whether the clear icon of the input will be shown.
+				 */
+				showClearIcon: {
+					type: "boolean",
+					defaultValue: false
+				},
+
 				/**
 				 * Defines whether the component should show suggestions, if such are present. <br>
 				 * <br>
@@ -131,7 +131,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * Determines whether a value help icon will be should in the end of the input. Pressing the icon will fire <code>value-help-trigger</code> event.
+				 * Determines whether a value help icon will be visualized in the end of the input. Pressing the icon will fire <code>value-help-trigger</code> event.
 				 */
 				showValueHelpIcon: {
 					type: "boolean",
@@ -194,6 +194,15 @@ sap.ui.define([
 						type: "slot",
 						to: "div"
 					}
+				},
+
+				/**
+				 * Defines the width of the control
+				 */
+				width: {
+					type: "sap.ui.core.CSSSize",
+					defaultValue: null,
+					mapping: "style"
 				}
 			},
 			defaultAggregation: "suggestionItems",
@@ -204,7 +213,7 @@ sap.ui.define([
 				 */
 				icon: {
 					type: "sap.ui.webc.main.IIcon",
-					multiple: false,
+					multiple: true,
 					slot: "icon"
 				},
 
@@ -225,6 +234,21 @@ sap.ui.define([
 					slot: "tokens"
 				}
 			},
+			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: {
 
 				/**
@@ -247,7 +271,7 @@ sap.ui.define([
 				suggestionItemPreview: {
 					parameters: {
 						/**
-						 * The previewed suggestion item
+						 * The previewed suggestion item.
 						 */
 						item: {
 							type: "HTMLElement"
@@ -268,7 +292,7 @@ sap.ui.define([
 				suggestionItemSelect: {
 					parameters: {
 						/**
-						 * The selected item
+						 * The selected item.
 						 */
 						item: {
 							type: "HTMLElement"
@@ -276,27 +300,6 @@ sap.ui.define([
 					}
 				},
 
-				/**
-				 * Fired when the user scrolls the suggestion popover.
-				 */
-				suggestionScroll: {
-					parameters: {
-						/**
-						 * The current scroll position
-						 */
-						scrollTop: {
-							type: "int"
-						},
-
-						/**
-						 * The scroll container
-						 */
-						scrollContainer: {
-							type: "HTMLElement"
-						}
-					}
-				},
-
 				/**
 				 * Fired when a token is about to be deleted.
 				 */
@@ -318,7 +321,8 @@ sap.ui.define([
 					parameters: {}
 				}
 			},
-			getters: ["previewItem"]
+			getters: ["previewItem"],
+			designtime: "sap/ui/webc/main/designtime/MultiInput.designtime"
 		}
 	});
 
@@ -329,5 +333,8 @@ sap.ui.define([
 	 * @function
 	 */
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return MultiInput;
 });

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

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.Option</code> component defines the content of an option in the <code>sap.ui.webc.main.Select</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -91,5 +91,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Option;
 });

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

@@ -34,10 +34,11 @@ sap.ui.define([
 	 *     <li>Do not stack too many panels on one page.</li>
 	 * </ul>
 	 *
-	 * <h3>Structure</h3> A panel consists of a title bar with a header text or custom header. <br>
-	 * The content area can contain an arbitrary set of controls. The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state. <br>
+	 * <h3>Structure</h3> The panel's header area consists of a title bar with a header text or custom header. <br>
+	 * The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state. <br>
 	 * The custom header can be set through the <code>header</code> slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements. <br>
-	 * <b>Note:</b> the custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.
+	 * The content area can contain an arbitrary set of controls. <br>
+	 * <b>Note:</b> The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.
 	 *
 	 * <h3>Responsive Behavior</h3>
 	 * <ul>
@@ -56,8 +57,10 @@ sap.ui.define([
 	 *     <li>content - Used to style the wrapper of the content</li>
 	 * </ul>
 	 *
+	 * <h3>Keyboard Handling</h3>
+	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -184,5 +187,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Panel;
 });

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

@@ -41,7 +41,7 @@ sap.ui.define([
 	 * <b>Note:</b> The <code>sap.ui.webc.main.Popover</code> is closed when the user clicks or taps outside the popover or selects an action within the popover. You can prevent this with the <code>modal</code> property.
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -57,7 +57,7 @@ sap.ui.define([
 			properties: {
 
 				/**
-				 * Sets the accessible aria name of the component.
+				 * Defines the accessible name of the component.
 				 */
 				accessibleName: {
 					type: "string",
@@ -217,6 +217,21 @@ sap.ui.define([
 					slot: "header"
 				}
 			},
+			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: {
 
 				/**
@@ -290,5 +305,8 @@ sap.ui.define([
 	 * @function
 	 */
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Popover;
 });

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

@@ -29,7 +29,7 @@ sap.ui.define([
 	 * <h3>Responsive Behavior</h3> You can change the size of the Progress Indicator by changing its <code>width</code> or <code>height</code> CSS properties.
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -52,6 +52,19 @@ sap.ui.define([
 					defaultValue: false
 				},
 
+				/**
+				 * Specifies the text value to be displayed in the bar.
+				 *
+				 * <b>Note:</b>
+				 * <ul>
+				 *     <li>If there is no value provided or the value is empty, the default percentage value is shown.</li>
+				 *     <li>If <code>hideValue</code> property is <code>true</code> both the <code>displayValue</code> and <code>value</code> property values are not shown.</li>
+				 * </ul>
+				 */
+				displayValue: {
+					type: "string"
+				},
+
 				/**
 				 * Defines whether the component value is shown.
 				 */
@@ -85,10 +98,22 @@ sap.ui.define([
 				valueState: {
 					type: "sap.ui.core.ValueState",
 					defaultValue: ValueState.None
+				},
+
+				/**
+				 * Defines the width of the control
+				 */
+				width: {
+					type: "sap.ui.core.CSSSize",
+					defaultValue: null,
+					mapping: "style"
 				}
 			}
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return ProgressIndicator;
 });

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

@@ -37,19 +37,23 @@ sap.ui.define([
 	 * <b>Note:</b> On entering radio button group, the focus goes to the currently selected radio button.
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @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.RadioButton
+	 * @implements sap.ui.core.IFormContent
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var RadioButton = WebComponent.extend("sap.ui.webc.main.RadioButton", {
 		metadata: {
 			library: "sap.ui.webc.main",
 			tag: "ui5-radio-button-ui5",
+			interfaces: [
+				"sap.ui.core.IFormContent"
+			],
 			properties: {
 
 				/**
@@ -134,6 +138,15 @@ sap.ui.define([
 					defaultValue: ValueState.None
 				},
 
+				/**
+				 * Defines the width of the control
+				 */
+				width: {
+					type: "sap.ui.core.CSSSize",
+					defaultValue: null,
+					mapping: "style"
+				},
+
 				/**
 				 * Defines whether the component text wraps when there is not enough space. <br>
 				 * <br>
@@ -148,6 +161,21 @@ sap.ui.define([
 					defaultValue: WrappingType.None
 				}
 			},
+			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: {
 
 				/**
@@ -160,5 +188,17 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+
+	/**
+	 * RadioButton without label must not be stretched in Form.
+	 * @returns {boolean} True if the <code>Form</code> should not adjust the width of the RadioButton component wrapper
+	 */
+	RadioButton.prototype.getFormDoNotAdjustWidth = function() {
+		return this.getText() ? false : true;
+	};
+
+	/* CUSTOM CODE END */
+
 	return RadioButton;
 });