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

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.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -96,5 +96,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return CustomListItem;
 });

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

@@ -50,7 +50,7 @@ sap.ui.define([
 	 * <h3>Keyboard Handling</h3> The <code>sap.ui.webc.main.DatePicker</code> provides advanced keyboard handling. If the <code>sap.ui.webc.main.DatePicker</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. Once the drop-down is opened, you can use the <code>UP</code>, <code>DOWN</code>, <code>LEFT</code>, <code>RIGHT</code> arrow keys to navigate through the dates and select one by pressing the <code>Space</code> or <code>Enter</code> keys. Moreover you can use TAB to reach the buttons for changing month and year. <br>
 	 *
 	 *
-	 * If the <code>sap.ui.webc.main.DatePicker</code> is focused and the picker dialog is not opened the user can increment or decrement the corresponding field of the JS date object referenced by <code>dateValue</code> propery by using the following shortcuts: <br>
+	 * If the <code>sap.ui.webc.main.DatePicker</code> input field is focused and its corresponding picker dialog is not opened, then users can increment or decrement the date referenced by <code>dateValue</code> property by using the following shortcuts: <br>
 	 *
 	 * <ul>
 	 *     <li>[PAGEDOWN] - Decrements the corresponding day of the month by one</li>
@@ -74,7 +74,7 @@ sap.ui.define([
 	 * &lt;/script&gt;</code></pre>
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -96,14 +96,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.
 				 */
@@ -255,6 +247,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: {
 
 				/**
@@ -358,5 +365,8 @@ sap.ui.define([
 	 * @function
 	 */
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return DatePicker;
 });

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

@@ -44,7 +44,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @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.
 				 */
@@ -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

@@ -70,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.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -92,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.
 				 */
@@ -251,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: {
 
 				/**
@@ -354,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.98.0
+	 * @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.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -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.98.0
+	 * @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.98.0
+	 * @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

@@ -34,8 +34,24 @@ sap.ui.define([
 	 * <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.98.0
+	 * @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",
@@ -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: {
 
 				/**
@@ -264,7 +304,8 @@ sap.ui.define([
 					}
 				}
 			},
-			getters: ["previewItem"]
+			getters: ["previewItem"],
+			designtime: "sap/ui/webc/main/designtime/Input.designtime"
 		}
 	});
 
@@ -275,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.98.0
+	 * @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>
@@ -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.98.0
+	 * @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: {}
 				},
 
 				/**
@@ -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;
 });