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

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

@@ -28,19 +28,40 @@ sap.ui.define([
 	 * <b>Note:</b> There can be just one selected <code>item</code> at a time.
 	 *
 	 * @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.SegmentedButton
+	 * @implements sap.ui.core.IFormContent
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var SegmentedButton = WebComponent.extend("sap.ui.webc.main.SegmentedButton", {
 		metadata: {
 			library: "sap.ui.webc.main",
 			tag: "ui5-segmented-button-ui5",
+			interfaces: [
+				"sap.ui.core.IFormContent"
+			],
+			properties: {
+
+				/**
+				 * Defines the accessible aria name of the component.
+				 */
+				accessibleName: {
+					type: "string"
+				},
+
+				/**
+				 * Defines the width of the control
+				 */
+				width: {
+					type: "sap.ui.core.CSSSize",
+					mapping: "style"
+				}
+			},
 			defaultAggregation: "items",
 			aggregations: {
 
@@ -83,5 +104,24 @@ sap.ui.define([
 	 * @function
 	 */
 
+	/* CUSTOM CODE START */
+
+	// eslint-disable-next-line no-warning-comments
+	// TODO: Currently the width of the SegmentedButton component is handled internally by the SegmentedButton web component.
+	// There is difference on how that is done in the sap.m library thus this needs to be aligned.
+	// However, once aligned the code below may be needed as the width should not be changed by the form.
+
+	/**
+	 * <code>SegmentedButton</code> must not be stretched in Form because ResizeHandler is used internally
+	 * in order to manage the width of the SegmentedButton depending on the container size
+	 * @protected
+	 * @returns {boolean} True this method always returns <code>true</code>
+	 */
+	SegmentedButton.prototype.getFormDoNotAdjustWidth = function() {
+		return true;
+	};
+
+	/* CUSTOM CODE END */
+
 	return SegmentedButton;
 });

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

@@ -8,8 +8,9 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"./thirdparty/SegmentedButtonItem"
-], function(WebComponent, library) {
+], function(WebComponent, library, EnabledPropagator) {
 	"use strict";
 
 	var ButtonDesign = library.ButtonDesign;
@@ -30,7 +31,7 @@ sap.ui.define([
 	 * Clicking or tapping on a <code>sap.ui.webc.main.SegmentedButtonItem</code> changes its state to <code>pressed</code>. The item 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.SegmentedButtonItem</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -50,7 +51,37 @@ sap.ui.define([
 			properties: {
 
 				/**
-				 * Sets the accessible aria name of the component.
+				 * 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 button, 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 button. 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>
+				 *     <li><code>controls</code>: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.</li>
+				 * </ul>
+				 */
+				accessibilityAttributes: {
+					type: "object",
+					defaultValue: {}
+				},
+
+				/**
+				 * Defines the accessible aria name of the component.
 				 */
 				accessibleName: {
 					type: "string"
@@ -65,11 +96,16 @@ sap.ui.define([
 				},
 
 				/**
-				 * Defines whether the component is disabled. A disabled component can't be pressed or focused, and it is not in the tab chain.
+				 * 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"
+					}
 				},
 
 				/**
@@ -117,6 +153,21 @@ sap.ui.define([
 					mapping: "textContent"
 				}
 			},
+			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: {
 
 				/**
@@ -131,5 +182,10 @@ sap.ui.define([
 		}
 	});
 
+	EnabledPropagator.call(SegmentedButtonItem.prototype);
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return SegmentedButtonItem;
 });

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

@@ -8,9 +8,11 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"sap/ui/core/library",
-	"./thirdparty/Select"
-], function(WebComponent, library, coreLibrary) {
+	"./thirdparty/Select",
+	"./thirdparty/features/InputElementsFormSupport"
+], function(WebComponent, library, EnabledPropagator, coreLibrary) {
 	"use strict";
 
 	var ValueState = coreLibrary.ValueState;
@@ -38,44 +40,43 @@ sap.ui.define([
 	 * </ul> <br>
 	 *
 	 * @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.Select
+	 * @implements sap.ui.core.IFormContent
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var Select = WebComponent.extend("sap.ui.webc.main.Select", {
 		metadata: {
 			library: "sap.ui.webc.main",
 			tag: "ui5-select-ui5",
+			interfaces: [
+				"sap.ui.core.IFormContent"
+			],
 			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 select.
+				 * 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 noninteractive.
-				 */
-				disabled: {
+				enabled: {
 					type: "boolean",
-					defaultValue: false
+					defaultValue: true,
+					mapping: {
+						type: "attribute",
+						to: "disabled",
+						formatter: "_mapEnabled"
+					}
 				},
 
 				/**
@@ -131,6 +132,14 @@ sap.ui.define([
 						type: "slot",
 						to: "div"
 					}
+				},
+
+				/**
+				 * Defines the width of the control
+				 */
+				width: {
+					type: "sap.ui.core.CSSSize",
+					mapping: "style"
 				}
 			},
 			defaultAggregation: "options",
@@ -152,6 +161,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: {
 
 				/**
@@ -179,5 +203,10 @@ sap.ui.define([
 	 * @function
 	 */
 
+	EnabledPropagator.call(Select.prototype);
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Select;
 });

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

@@ -8,8 +8,9 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"./thirdparty/Slider"
-], function(WebComponent, library) {
+], function(WebComponent, library, EnabledPropagator) {
 	"use strict";
 
 	/**
@@ -70,27 +71,36 @@ 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.Slider
+	 * @implements sap.ui.core.IFormContent
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var Slider = WebComponent.extend("sap.ui.webc.main.Slider", {
 		metadata: {
 			library: "sap.ui.webc.main",
 			tag: "ui5-slider-ui5",
+			interfaces: [
+				"sap.ui.core.IFormContent"
+			],
 			properties: {
 
 				/**
-				 * Defines whether the slider is in disabled state.
+				 * 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"
+					}
 				},
 
 				/**
@@ -153,6 +163,14 @@ sap.ui.define([
 				value: {
 					type: "float",
 					defaultValue: 0
+				},
+
+				/**
+				 * Defines the width of the control
+				 */
+				width: {
+					type: "sap.ui.core.CSSSize",
+					mapping: "style"
 				}
 			},
 			events: {
@@ -170,9 +188,15 @@ sap.ui.define([
 				input: {
 					parameters: {}
 				}
-			}
+			},
+			designtime: "sap/ui/webc/main/designtime/Slider.designtime"
 		}
 	});
 
+	EnabledPropagator.call(Slider.prototype);
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Slider;
 });

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

@@ -0,0 +1,164 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+// Provides control sap.ui.webc.main.SplitButton.
+sap.ui.define([
+	"sap/ui/webc/common/WebComponent",
+	"./library",
+	"sap/ui/core/EnabledPropagator",
+	"./thirdparty/SplitButton"
+], function(WebComponent, library, EnabledPropagator) {
+	"use strict";
+
+	var ButtonDesign = library.ButtonDesign;
+
+	/**
+	 * Constructor for a new <code>SplitButton</code>.
+	 *
+	 * @param {string} [sId] ID for the new control, generated automatically if no ID is given
+	 * @param {object} [mSettings] Initial settings for the new control
+	 *
+	 * @extends sap.ui.webc.common.WebComponent
+	 * @class
+	 *
+	 * <h3>Overview</h3>
+	 *
+	 * <code>sap.ui.webc.main.SplitButton</code> enables users to trigger actions. It is constructed of two separate actions - default action and arrow action that can be activated by clicking or tapping, or by pressing certain keyboard keys - <code>Space</code> or <code>Enter</code> for default action, and <code>Arrow Down</code> or <code>Arrow Up</code> for arrow action.
+	 *
+	 * <h3>Usage</h3>
+	 *
+	 * <code>sap.ui.webc.main.SplitButton</code> consists two separate buttons:
+	 * <ul>
+	 *     <li>for the first one (default action) you can define some <code>text</code> or an <code>icon</code>, or both. Also, it is possible to define different icon for active state of this button - <code>activeIcon</code>.</li>
+	 *     <li>the second one (arrow action) contains only <code>slim-arrow-down</code> icon.</li>
+	 * </ul> You can choose a <code>design</code> from a set of predefined types (the same as for ui5-button) that offer different styling to correspond to the triggered action. Both text and arrow actions have the same design. <br>
+	 * <br>
+	 * You can set the <code>sap.ui.webc.main.SplitButton</code> as enabled or disabled. Both parts of an enabled <code>sap.ui.webc.main.SplitButton</code> can be pressed by clicking or tapping it, or by certain keys, which changes the style to provide visual feedback to the user that it is pressed or hovered over with the mouse cursor. A disabled <code>sap.ui.webc.main.SplitButton</code> appears inactive and any of the two buttons cannot be pressed.
+	 *
+	 * <h3>Keyboard Handling</h3>
+	 * <ul>
+	 *     <li><code>Space</code> or <code>Enter</code> - triggers the default action</li>
+	 *     <li><code>Shift</code> or <code>Escape</code> - if <code>Space</code> is pressed, releases the default action button without triggering the click event.</li>
+	 *     <li><code>Arrow Down</code>, <code>Arrow Up</code>, <code>Alt</code>+<code>Arrow Down</code>, <code>Alt</code>+<code>Arrow Up</code>, or <code>F4</code> - triggers the arrow action There are separate events that are fired on activating of <code>sap.ui.webc.main.SplitButton</code> parts:
+	 *         <ul>
+	 *             <li><code>click</code> for the first button (default action)</li>
+	 *             <li><code>arrow-click</code> for the second button (arrow action)</li>
+	 *         </ul>
+	 * </ul>
+	 *
+	 * @author SAP SE
+	 * @version 1.101.0
+	 *
+	 * @constructor
+	 * @public
+	 * @since 1.99.0
+	 * @experimental Since 1.99.0 This control is experimental and its API might change significantly.
+	 * @alias sap.ui.webc.main.SplitButton
+	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
+	 */
+	var SplitButton = WebComponent.extend("sap.ui.webc.main.SplitButton", {
+		metadata: {
+			library: "sap.ui.webc.main",
+			tag: "ui5-split-button-ui5",
+			properties: {
+
+				/**
+				 * Defines the accessible aria name of the component.
+				 */
+				accessibleName: {
+					type: "string"
+				},
+
+				/**
+				 * Defines the icon to be displayed in active state as graphical element within the component.
+				 */
+				activeIcon: {
+					type: "string",
+					defaultValue: ""
+				},
+
+				/**
+				 * Defines the component design.
+				 *
+				 * <br>
+				 * <br>
+				 * <b>The available values are:</b>
+				 *
+				 *
+				 * <ul>
+				 *     <li><code>Default</code></li>
+				 *     <li><code>Emphasized</code></li>
+				 *     <li><code>Positive</code></li>
+				 *     <li><code>Negative</code></li>
+				 *     <li><code>Transparent</code></li>
+				 *     <li><code>Attention</code></li>
+				 * </ul>
+				 */
+				design: {
+					type: "sap.ui.webc.main.ButtonDesign",
+					defaultValue: ButtonDesign.Default
+				},
+
+				/**
+				 * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in the tab chain.
+				 */
+				enabled: {
+					type: "boolean",
+					defaultValue: true,
+					mapping: {
+						type: "attribute",
+						to: "disabled",
+						formatter: "_mapEnabled"
+					}
+				},
+
+				/**
+				 * Defines the icon to be displayed as graphical element within the component. The SAP-icons font provides numerous options. <br>
+				 * <br>
+				 * Example:
+				 *
+				 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+				 */
+				icon: {
+					type: "string",
+					defaultValue: ""
+				},
+
+				/**
+				 * Defines the content of the control
+				 */
+				text: {
+					type: "string",
+					defaultValue: "",
+					mapping: "textContent"
+				}
+			},
+			events: {
+
+				/**
+				 * Fired when the user clicks on the arrow action.
+				 */
+				arrowClick: {
+					parameters: {}
+				},
+
+				/**
+				 * Fired when the user clicks on the default action.
+				 */
+				click: {
+					parameters: {}
+				}
+			}
+		}
+	});
+
+	EnabledPropagator.call(SplitButton.prototype);
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
+	return SplitButton;
+});

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

@@ -41,7 +41,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -158,5 +158,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return StandardListItem;
 });

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

@@ -8,9 +8,11 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"sap/ui/core/library",
-	"./thirdparty/StepInput"
-], function(WebComponent, library, coreLibrary) {
+	"./thirdparty/StepInput",
+	"./thirdparty/features/InputElementsFormSupport"
+], function(WebComponent, library, EnabledPropagator, coreLibrary) {
 	"use strict";
 
 	var ValueState = coreLibrary.ValueState;
@@ -50,42 +52,43 @@ 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.StepInput
+	 * @implements sap.ui.core.IFormContent
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var StepInput = WebComponent.extend("sap.ui.webc.main.StepInput", {
 		metadata: {
 			library: "sap.ui.webc.main",
 			tag: "ui5-step-input-ui5",
+			interfaces: [
+				"sap.ui.core.IFormContent"
+			],
 			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 component.
+				 * 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: ""
-				},
-
-				/**
-				 * Determines whether the component is displayed as disabled.
-				 */
-				disabled: {
+				enabled: {
 					type: "boolean",
-					defaultValue: false
+					defaultValue: true,
+					mapping: {
+						type: "attribute",
+						to: "disabled",
+						formatter: "_mapEnabled"
+					}
 				},
 
 				/**
@@ -199,6 +202,29 @@ sap.ui.define([
 						type: "slot",
 						to: "div"
 					}
+				},
+
+				/**
+				 * Defines the width of the control
+				 */
+				width: {
+					type: "sap.ui.core.CSSSize",
+					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: {
@@ -213,5 +239,10 @@ sap.ui.define([
 		}
 	});
 
+	EnabledPropagator.call(StepInput.prototype);
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return StepInput;
 });

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

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.SuggestionGroupItem</code> is type of suggestion item, that can be used to split the <code>sap.ui.webc.main.Input</code> suggestions into groups.
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public
@@ -54,5 +54,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return SuggestionGroupItem;
 });