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

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

@@ -44,7 +44,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -66,14 +66,6 @@ sap.ui.define([
 					type: "string"
 				},
 
-				/**
-				 * Receives id(or many ids) of the elements that label the component.
-				 */
-				accessibleNameRef: {
-					type: "string",
-					defaultValue: ""
-				},
-
 				/**
 				 * Determines the symbol which separates the dates. If not supplied, the default time interval delimiter for the current locale will be used.
 				 */
@@ -102,7 +94,7 @@ sap.ui.define([
 				 * <br>
 				 *
 				 *
-				 * <b>Note:<b> For calendars other than Gregorian, the week numbers are not displayed regardless of what is set.
+				 * <b>Note:</b> For calendars other than Gregorian, the week numbers are not displayed regardless of what is set.
 				 */
 				hideWeekNumbers: {
 					type: "boolean",
@@ -118,7 +110,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * Determines the мinimum date available for selection.
+				 * Determines the minimum date available for selection.
 				 */
 				minDate: {
 					type: "string",
@@ -232,6 +224,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: {
 
 				/**
@@ -279,7 +286,7 @@ sap.ui.define([
 				}
 			},
 			methods: ["closePicker", "formatValue", "isInValidRange", "isOpen", "isValid", "openPicker"],
-			getters: ["dateValue", "endDateValue", "startDateValue"]
+			getters: ["dateValue", "dateValueUTC", "endDateValue", "startDateValue"]
 		}
 	});
 
@@ -329,12 +336,19 @@ sap.ui.define([
 	 */
 
 	/**
-	 * Returns the currently selected date represented as a Local JavaScript Date instance.
+	 * Returns the <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
 	 * @public
 	 * @name sap.ui.webc.main.DateRangePicker#getDateValue
 	 * @function
 	 */
 
+	/**
+	 * Returns the <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
+	 * @public
+	 * @name sap.ui.webc.main.DateRangePicker#getDateValueUTC
+	 * @function
+	 */
+
 	/**
 	 * Returns the end date of the currently selected range as JavaScript Date instance.
 	 * @public
@@ -349,5 +363,8 @@ sap.ui.define([
 	 * @function
 	 */
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return DateRangePicker;
 });

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

@@ -37,9 +37,7 @@ sap.ui.define([
 	 *     <li>typing in the input field</li>
 	 * </ul>
 	 *
-	 * Programatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property <br>
-	 * <br>
-	 * As most of the input based components, the <code>DateTimePicker</code> supports properties, such as: <code>disabled</code>, <code>readonly</code>, <code>valueState</code> and <code>placeholder</code>.
+	 * Programatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property
 	 *
 	 * <h3>Formatting</h3>
 	 *
@@ -72,7 +70,7 @@ sap.ui.define([
 	 * The <code>DateTimePicker</code> is responsive and fully adapts to all devices. For larger screens, such as tablet or desktop, it is displayed as a popover, while on phone devices, it is displayed full screen.
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -94,14 +92,6 @@ sap.ui.define([
 					type: "string"
 				},
 
-				/**
-				 * Receives id(or many ids) of the elements that label the component.
-				 */
-				accessibleNameRef: {
-					type: "string",
-					defaultValue: ""
-				},
-
 				/**
 				 * Determines whether the component is displayed as disabled.
 				 */
@@ -123,7 +113,7 @@ sap.ui.define([
 				 * <br>
 				 *
 				 *
-				 * <b>Note:<b> For calendars other than Gregorian, the week numbers are not displayed regardless of what is set.
+				 * <b>Note:</b> For calendars other than Gregorian, the week numbers are not displayed regardless of what is set.
 				 */
 				hideWeekNumbers: {
 					type: "boolean",
@@ -139,7 +129,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * Determines the мinimum date available for selection.
+				 * Determines the minimum date available for selection.
 				 */
 				minDate: {
 					type: "string",
@@ -253,6 +243,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: {
 
 				/**
@@ -356,5 +361,8 @@ sap.ui.define([
 	 * @function
 	 */
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return DateTimePicker;
 });

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

@@ -36,7 +36,7 @@ sap.ui.define([
 	 * <b>Note:</b> We don't recommend nesting popup-like components (<code>sap.ui.webc.main.Dialog</code>, <code>sap.ui.webc.main.Popover</code>) inside other components containing z-index. This might break z-index management.
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -52,7 +52,7 @@ sap.ui.define([
 			properties: {
 
 				/**
-				 * Sets the accessible aria name of the component.
+				 * Defines the accessible name of the component.
 				 */
 				accessibleName: {
 					type: "string",
@@ -165,6 +165,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: {
 
 				/**
@@ -237,5 +252,8 @@ sap.ui.define([
 	 * @function
 	 */
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Dialog;
 });

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

@@ -31,7 +31,7 @@ sap.ui.define([
 	 * And, similar to all input based components, the FileUploader supports "valueState", "placeholder", "name", and "disabled" properties.
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -59,7 +59,7 @@ sap.ui.define([
 				/**
 				 * Defines whether the component is in disabled state. <br>
 				 * <br>
-				 * <b>Note:</b> A disabledcomponent is completely noninteractive.
+				 * <b>Note:</b> A disabled component is completely noninteractive.
 				 */
 				disabled: {
 					type: "boolean",
@@ -192,5 +192,8 @@ sap.ui.define([
 	 * @function
 	 */
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return FileUploader;
 });

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

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.GroupHeaderListItem</code> is a special list item, used only to separate other list items into logical groups.
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -71,5 +71,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return GroupHeaderListItem;
 });

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

@@ -42,14 +42,14 @@ sap.ui.define([
 	 * <br>
 	 *
 	 * @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.Icon
-	 * @implements sap.ui.webc.main.IIcon
+	 * @implements sap.ui.webc.main.IIcon, sap.ui.core.IFormContent
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var Icon = WebComponent.extend("sap.ui.webc.main.Icon", {
@@ -57,7 +57,8 @@ sap.ui.define([
 			library: "sap.ui.webc.main",
 			tag: "ui5-icon-ui5",
 			interfaces: [
-				"sap.ui.webc.main.IIcon"
+				"sap.ui.webc.main.IIcon",
+				"sap.ui.core.IFormContent"
 			],
 			properties: {
 
@@ -71,6 +72,14 @@ sap.ui.define([
 					defaultValue: ""
 				},
 
+				/**
+				 * Defines the accessibility role of the component.
+				 */
+				accessibleRole: {
+					type: "string",
+					defaultValue: ""
+				},
+
 				/**
 				 * Defines the background color of the control
 				 */
@@ -158,5 +167,13 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+
+	Icon.prototype.getFormDoNotAdjustWidth = function() {
+		return true;
+	};
+
+	/* CUSTOM CODE END */
+
 	return Icon;
 });

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

@@ -30,12 +30,28 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.Input</code> component allows the user to enter and edit text or numeric values in one line. <br>
 	 * Additionally, you can provide <code>suggestionItems</code>, that are displayed in a popover right under the input. <br>
 	 * <br>
-	 * The text field can be editable or read-only (<code>readonly</code> property), and it can be enabled or disabled (<code>enabled</code> property). To visualize semantic states, such as "error" or "warning", the <code>valueState</code> property is provided. When the user makes changes to the text, the change event is fired, which enables you to react on any text change. <br>
+	 * The text field can be editable or read-only (<code>readonly</code> property), and it can be enabled or disabled (<code>disabled</code> property). To visualize semantic states, such as "error" or "warning", the <code>valueState</code> property is provided. When the user makes changes to the text, the change event is fired, which enables you to react on any text change. <br>
 	 * <br>
 	 * <b>Note:</b> If you are using the <code>sap.ui.webc.main.Input</code> as a single npm module, don't forget to import the <code>InputSuggestions</code> module from "@ui5/webcomponents/dist/features/InputSuggestions.js" to enable the suggestions functionality.
 	 *
+	 * <h3>Keyboard Handling</h3> The <code>sap.ui.webc.main.Input</code> provides the following keyboard shortcuts: <br>
+	 *
+	 *
+	 *
+	 * <ul>
+	 *     <li>[F4], [ALT]+[UP], or [ALT]+[DOWN] - Opens value help if available, same as clicking the value help icon. (Does not open suggestion list.)</li>
+	 *     <li>[ESC] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.</li>
+	 *     <li>[ENTER] or [RETURN] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.</li>
+	 *     <li>[DOWN] - Focuses the next matching item in the suggestion list.</li>
+	 *     <li>[UP] - Focuses the previous matching item in the suggestion list.</li>
+	 *     <li>[HOME] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.</li>
+	 *     <li>[END] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.</li>
+	 *     <li>[PAGEUP] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.</li>
+	 *     <li>[PAGEDOWN] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.</li>
+	 * </ul>
+	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -61,14 +77,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>
@@ -125,6 +133,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>
@@ -191,6 +207,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",
@@ -201,7 +226,7 @@ sap.ui.define([
 				 */
 				icon: {
 					type: "sap.ui.webc.main.IIcon",
-					multiple: false,
+					multiple: true,
 					slot: "icon"
 				},
 
@@ -213,6 +238,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: {
 
 				/**
@@ -235,7 +275,7 @@ sap.ui.define([
 				suggestionItemPreview: {
 					parameters: {
 						/**
-						 * The previewed suggestion item
+						 * The previewed suggestion item.
 						 */
 						item: {
 							type: "HTMLElement"
@@ -256,36 +296,16 @@ sap.ui.define([
 				suggestionItemSelect: {
 					parameters: {
 						/**
-						 * The selected item
+						 * The selected item.
 						 */
 						item: {
 							type: "HTMLElement"
 						}
 					}
-				},
-
-				/**
-				 * Fired when the user scrolls the suggestion popover.
-				 */
-				suggestionScroll: {
-					parameters: {
-						/**
-						 * The current scroll position
-						 */
-						scrollTop: {
-							type: "int"
-						},
-
-						/**
-						 * The scroll container
-						 */
-						scrollContainer: {
-							type: "HTMLElement"
-						}
-					}
 				}
 			},
-			getters: ["previewItem"]
+			getters: ["previewItem"],
+			designtime: "sap/ui/webc/main/designtime/Input.designtime"
 		}
 	});
 
@@ -296,5 +316,8 @@ sap.ui.define([
 	 * @function
 	 */
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Input;
 });

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

@@ -8,8 +8,9 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/LabelEnablement",
 	"./thirdparty/Label"
-], function(WebComponent, library) {
+], function(WebComponent, library, LabelEnablement) {
 	"use strict";
 
 	var WrappingType = library.WrappingType;
@@ -30,31 +31,25 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.Label</code> appearance can be influenced by properties, such as <code>required</code> and <code>wrappingType</code>. The appearance of the Label can be configured in a limited way by using the design property. For a broader choice of designs, you can use custom styles.
 	 *
 	 * @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.Label
+	 * @implements sap.ui.core.Label
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var Label = WebComponent.extend("sap.ui.webc.main.Label", {
 		metadata: {
 			library: "sap.ui.webc.main",
 			tag: "ui5-label-ui5",
+			interfaces: [
+				"sap.ui.core.Label"
+			],
 			properties: {
 
-				/**
-				 * Defines the labeled input by providing its ID. <br>
-				 * <br>
-				 * <b>Note:</b> Can be used with both <code>sap.ui.webc.main.Input</code> and native input.
-				 */
-				"for": {
-					type: "string",
-					defaultValue: ""
-				},
-
 				/**
 				 * Defines whether an asterisk character is added to the component text. <br>
 				 * <br>
@@ -66,7 +61,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * Defines whether semi-colon is added to the component text. <br>
+				 * Defines whether colon is added to the component text. <br>
 				 * <br>
 				 * <b>Note:</b> Usually used in forms.
 				 */
@@ -104,9 +99,31 @@ sap.ui.define([
 					type: "sap.ui.webc.main.WrappingType",
 					defaultValue: WrappingType.None
 				}
+			},
+			associations: {
+
+				/**
+				 * Association to the labelled control.
+				 * <br>
+				 *
+				 * By default, the label sets the for attribute to the ID of the labelled control. This can be changed by implementing the function getIdForLabel on the labelled control.
+				 */
+				labelFor: {
+					type: "sap.ui.core.Control",
+					multiple: false,
+					mapping: {
+						type: "property",
+						to: "for"
+					}
+				}
 			}
 		}
 	});
 
+	LabelEnablement.enrich(Label.prototype);
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Label;
 });

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

@@ -39,7 +39,7 @@ sap.ui.define([
 	 * If there is not enough space, the text of the <code>sap.ui.webc.main.Link</code> becomes truncated. If the <code>wrappingType</code> property is set to <code>"Normal"</code>, the text is displayed on several lines instead of being truncated.
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -55,11 +55,32 @@ sap.ui.define([
 			properties: {
 
 				/**
-				 * Receives id(or many ids) of the elements that label the input
+				 * 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>expanded</code>: Indicates whether the anchor element, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:
+				 *         <ul>
+				 *             <li><code>true</code></li>
+				 *             <li><code>false</code></li>
+				 *             <ul>
+				 *     </li>
+				 *     <li><code>hasPopup</code>: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the anchor element. Accepts the following string values:
+				 *         <ul>
+				 *             <li><code>Dialog</code></li>
+				 *             <li><code>Grid</code></li>
+				 *             <li><code>ListBox</code></li>
+				 *             <li><code>Menu</code></li>
+				 *             <li><code>Tree</code></li>
+				 *         </ul>
+				 *     </li>
+				 * </ul>
 				 */
-				accessibleNameRef: {
-					type: "string",
-					defaultValue: ""
+				accessibilityAttributes: {
+					type: "object",
+					defaultValue: {}
 				},
 
 				/**
@@ -75,7 +96,7 @@ sap.ui.define([
 				/**
 				 * Defines whether the component is disabled. <br>
 				 * <br>
-				 * <b>Note:</b> When disabled, the component cannot be triggered by the user.
+				 * <b>Note:</b> When disabled, the click event cannot be triggered by the user.
 				 */
 				disabled: {
 					type: "boolean",
@@ -134,6 +155,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: {
 
 				/**
@@ -146,5 +182,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Link;
 });