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

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.101.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>
@@ -89,7 +84,6 @@ sap.ui.define([
 				 */
 				width: {
 					type: "sap.ui.core.CSSSize",
-					defaultValue: null,
 					mapping: "style"
 				},
 
@@ -104,9 +98,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

@@ -8,8 +8,9 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"./thirdparty/Link"
-], function(WebComponent, library) {
+], function(WebComponent, library, EnabledPropagator) {
 	"use strict";
 
 	var LinkDesign = library.LinkDesign;
@@ -39,7 +40,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.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -55,9 +56,38 @@ 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>
+				 */
+				accessibilityAttributes: {
+					type: "object",
+					defaultValue: {}
+				},
+
+				/**
+				 * Defines the accessible aria name of the component.
 				 */
-				accessibleNameRef: {
+				accessibleName: {
 					type: "string",
 					defaultValue: ""
 				},
@@ -73,13 +103,16 @@ sap.ui.define([
 				},
 
 				/**
-				 * Defines whether the component is disabled. <br>
-				 * <br>
-				 * <b>Note:</b> When disabled, the click event cannot be triggered by the user.
+				 * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in the tab chain.
 				 */
-				disabled: {
+				enabled: {
 					type: "boolean",
-					defaultValue: false
+					defaultValue: true,
+					mapping: {
+						type: "attribute",
+						to: "disabled",
+						formatter: "_mapEnabled"
+					}
 				},
 
 				/**
@@ -134,6 +167,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: {
 
 				/**
@@ -142,9 +190,15 @@ sap.ui.define([
 				click: {
 					parameters: {}
 				}
-			}
+			},
+			designtime: "sap/ui/webc/main/designtime/Link.designtime"
 		}
 	});
 
+	EnabledPropagator.call(Link.prototype);
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Link;
 });

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

@@ -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.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -83,14 +84,6 @@ sap.ui.define([
 					defaultValue: ""
 				},
 
-				/**
-				 * Defines the IDs of the elements that label the input.
-				 */
-				accessibleNameRef: {
-					type: "string",
-					defaultValue: ""
-				},
-
 				/**
 				 * Defines the accessible role of the component. <br>
 				 * <br>
@@ -159,7 +152,6 @@ sap.ui.define([
 				 */
 				height: {
 					type: "sap.ui.core.CSSSize",
-					defaultValue: null,
 					mapping: "style"
 				},
 
@@ -209,7 +201,6 @@ sap.ui.define([
 				 */
 				width: {
 					type: "sap.ui.core.CSSSize",
-					defaultValue: null,
 					mapping: "style"
 				}
 			},
@@ -237,12 +228,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.
@@ -334,5 +341,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.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -62,7 +64,6 @@ sap.ui.define([
 				 */
 				height: {
 					type: "sap.ui.core.CSSSize",
-					defaultValue: null,
 					mapping: "style"
 				},
 
@@ -96,7 +97,6 @@ sap.ui.define([
 				 */
 				width: {
 					type: "sap.ui.core.CSSSize",
-					defaultValue: null,
 					mapping: "style"
 				}
 			},
@@ -129,5 +129,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return MessageStrip;
 });

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

@@ -8,9 +8,10 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"sap/ui/core/library",
 	"./thirdparty/MultiComboBox"
-], function(WebComponent, library, coreLibrary) {
+], function(WebComponent, library, EnabledPropagator, coreLibrary) {
 	"use strict";
 
 	var ValueState = coreLibrary.ValueState;
@@ -58,19 +59,23 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.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.MultiComboBox
+	 * @implements sap.ui.core.IFormContent
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var MultiComboBox = WebComponent.extend("sap.ui.webc.main.MultiComboBox", {
 		metadata: {
 			library: "sap.ui.webc.main",
 			tag: "ui5-multi-combobox-ui5",
+			interfaces: [
+				"sap.ui.core.IFormContent"
+			],
 			properties: {
 
 				/**
@@ -82,13 +87,16 @@ sap.ui.define([
 				},
 
 				/**
-				 * Defines whether the component is in disabled state. <br>
-				 * <br>
-				 * <b>Note:</b> A disabled component is completely noninteractive.
+				 * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in the tab chain.
 				 */
-				disabled: {
+				enabled: {
 					type: "boolean",
-					defaultValue: false
+					defaultValue: true,
+					mapping: {
+						type: "attribute",
+						to: "disabled",
+						formatter: "_mapEnabled"
+					}
 				},
 
 				/**
@@ -167,6 +175,14 @@ sap.ui.define([
 						type: "slot",
 						to: "div"
 					}
+				},
+
+				/**
+				 * Defines the width of the control
+				 */
+				width: {
+					type: "sap.ui.core.CSSSize",
+					mapping: "style"
 				}
 			},
 			defaultAggregation: "items",
@@ -237,5 +253,10 @@ sap.ui.define([
 	 * @function
 	 */
 
+	EnabledPropagator.call(MultiComboBox.prototype);
+
+	/* 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.98.0
+	 * @version 1.101.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

@@ -8,9 +8,13 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
+	"sap/ui/base/ManagedObjectObserver",
 	"sap/ui/core/library",
-	"./thirdparty/MultiInput"
-], function(WebComponent, library, coreLibrary) {
+	"./thirdparty/MultiInput",
+	"./thirdparty/features/InputElementsFormSupport",
+	"./thirdparty/features/InputSuggestions"
+], function(WebComponent, library, EnabledPropagator, ManagedObjectObserver, coreLibrary) {
 	"use strict";
 
 	var ValueState = coreLibrary.ValueState;
@@ -34,44 +38,44 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.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.MultiInput
+	 * @implements sap.ui.core.IFormContent, sap.ui.core.ISemanticFormContent
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var MultiInput = WebComponent.extend("sap.ui.webc.main.MultiInput", {
 		metadata: {
 			library: "sap.ui.webc.main",
 			tag: "ui5-multi-input-ui5",
+			interfaces: [
+				"sap.ui.core.IFormContent",
+				"sap.ui.core.ISemanticFormContent"
+			],
 			properties: {
 
 				/**
-				 * Sets the accessible aria name of the component.
+				 * Defines the accessible aria name of the component.
 				 */
 				accessibleName: {
 					type: "string"
 				},
 
 				/**
-				 * Receives id(or many ids) of the elements that label the input.
+				 * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in the tab chain.
 				 */
-				accessibleNameRef: {
-					type: "string",
-					defaultValue: ""
-				},
-
-				/**
-				 * Defines whether the component is in disabled state. <br>
-				 * <br>
-				 * <b>Note:</b> A disabled component is completely noninteractive.
-				 */
-				disabled: {
+				enabled: {
 					type: "boolean",
-					defaultValue: false
+					defaultValue: true,
+					mapping: {
+						type: "attribute",
+						to: "disabled",
+						formatter: "_mapEnabled"
+					}
 				},
 
 				/**
@@ -120,6 +124,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>
@@ -194,6 +206,24 @@ sap.ui.define([
 						type: "slot",
 						to: "div"
 					}
+				},
+
+				/**
+				 * Defines the width of the control
+				 */
+				width: {
+					type: "sap.ui.core.CSSSize",
+					mapping: "style"
+				},
+
+				/**
+				 * The value for sap.ui.core.ISemanticFormContent interface.
+				 * @private
+				 */
+				_semanticFormValue: {
+					type: "string",
+					defaultValue: "",
+					visibility: "hidden"
 				}
 			},
 			defaultAggregation: "suggestionItems",
@@ -225,6 +255,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: {
 
 				/**
@@ -297,7 +342,8 @@ sap.ui.define([
 					parameters: {}
 				}
 			},
-			getters: ["previewItem"]
+			getters: ["previewItem"],
+			designtime: "sap/ui/webc/main/designtime/MultiInput.designtime"
 		}
 	});
 
@@ -308,5 +354,59 @@ sap.ui.define([
 	 * @function
 	 */
 
+	EnabledPropagator.call(MultiInput.prototype);
+
+	/* CUSTOM CODE START */
+
+	MultiInput.prototype.init = function() {
+		/* Aggregation forwarding does not invalidate outer control, but we need to have that invalidation */
+		this._oTokenizerObserver = new ManagedObjectObserver(function(oChange) {
+			this.updateFormValueProperty();
+		}.bind(this));
+
+		this._oTokenizerObserver.observe(this, {
+			aggregations: ["tokens"]
+		});
+	};
+
+	/**
+	 * Gets formatted form value.
+	 *
+	 * In the context of the MultiInput, this is the merged value of all the Tokens in the control.
+	 * @returns {string} The semantic form value
+	 * @since 1.100
+	 * @experimental
+	 */
+	MultiInput.prototype.getFormFormattedValue = function() {
+		return this.getTokens()
+			.map(function(oToken) {
+				return oToken.getText();
+			})
+			.join(", ");
+	};
+
+	/**
+	 * The property which triggers form display invalidation when changed
+	 *
+	 * @returns {string} The property, containing the semantic form value
+	 * @since 1.100
+	 * @experimental
+	 */
+	MultiInput.prototype.getFormValueProperty = function() {
+		return "_semanticFormValue";
+	};
+
+	/**
+	 * ISemanticFormContent interface works only with properties. The state of MultiInput is kept as Tokens.
+	 * Update _semanticFormValue property so it'd match MultiInput's state, but as a string which could be reused.
+	 *
+	 * @private
+	 */
+	MultiInput.prototype.updateFormValueProperty = function() {
+		this.setProperty("_semanticFormValue", this.getFormFormattedValue(), true);
+	};
+
+	/* CUSTOM CODE END */
+
 	return MultiInput;
 });

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

@@ -8,8 +8,9 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"./thirdparty/Option"
-], function(WebComponent, library) {
+], function(WebComponent, library, EnabledPropagator) {
 	"use strict";
 
 	/**
@@ -26,7 +27,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.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -46,13 +47,16 @@ sap.ui.define([
 			properties: {
 
 				/**
-				 * Defines whether the component is in disabled state. <br>
-				 * <br>
-				 * <b>Note:</b> A disabled component is noninteractive.
+				 * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in the tab chain.
 				 */
-				disabled: {
+				enabled: {
 					type: "boolean",
-					defaultValue: false
+					defaultValue: true,
+					mapping: {
+						type: "attribute",
+						to: "disabled",
+						formatter: "_mapEnabled"
+					}
 				},
 
 				/**
@@ -91,5 +95,10 @@ sap.ui.define([
 		}
 	});
 
+	EnabledPropagator.call(Option.prototype);
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Option;
 });