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

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.99.0
+	 * @version 1.100.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,6 +95,8 @@ sap.ui.define([
 		}
 	});
 
+	EnabledPropagator.call(Option.prototype);
+
 	/* CUSTOM CODE START */
 	/* CUSTOM CODE END */
 

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

@@ -60,7 +60,7 @@ sap.ui.define([
 	 * <h3>Keyboard Handling</h3>
 	 *
 	 * @author SAP SE
-	 * @version 1.99.0
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -76,7 +76,7 @@ sap.ui.define([
 			properties: {
 
 				/**
-				 * Sets the accessible aria name of the component.
+				 * Defines the accessible aria name of the component.
 				 */
 				accessibleName: {
 					type: "string",
@@ -183,7 +183,8 @@ sap.ui.define([
 				toggle: {
 					parameters: {}
 				}
-			}
+			},
+			designtime: "sap/ui/webc/main/designtime/Panel.designtime"
 		}
 	});
 

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

@@ -40,8 +40,18 @@ 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.
 	 *
+	 * <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>
+	 * The <code>sap.ui.webc.main.Popover</code> exposes the following CSS Shadow Parts:
+	 * <ul>
+	 *     <li>header - Used to style the header of the component</li>
+	 *     <li>content - Used to style the content of the component</li>
+	 *     <li>footer - Used to style the footer of the component</li>
+	 * </ul>
+	 *
 	 * @author SAP SE
-	 * @version 1.99.0
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -124,17 +134,17 @@ sap.ui.define([
 				},
 
 				/**
-				 * Defines the ID of the HTML Element, which will get the initial focus.
+				 * Defines whether the component should close when clicking/tapping outside of the popover. If enabled, it blocks any interaction with the background.
 				 */
-				initialFocus: {
-					type: "string",
-					defaultValue: ""
+				modal: {
+					type: "boolean",
+					defaultValue: false
 				},
 
 				/**
-				 * Defines whether the component should close when clicking/tapping outside of the popover. If enabled, it blocks any interaction with the background.
+				 * Indicates if the element is open
 				 */
-				modal: {
+				open: {
 					type: "boolean",
 					defaultValue: false
 				},
@@ -219,6 +229,18 @@ sap.ui.define([
 			},
 			associations: {
 
+				/**
+				 * Defines the opener id of the element that the popover is shown at
+				 */
+				opener: {
+					type: "sap.ui.core.Control",
+					multiple: false,
+					mapping: {
+						type: "property",
+						to: "opener"
+					}
+				},
+
 				/**
 				 * Receives id(or many ids) of the controls that label this control.
 				 */
@@ -230,6 +252,18 @@ sap.ui.define([
 						to: "accessibleNameRef",
 						formatter: "_getAriaLabelledByForRendering"
 					}
+				},
+
+				/**
+				 * Defines the ID of the HTML Element, which will get the initial focus.
+				 */
+				initialFocus: {
+					type: "sap.ui.core.Control",
+					multiple: false,
+					mapping: {
+						type: "property",
+						to: "initialFocus"
+					}
 				}
 			},
 			events: {

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

@@ -8,9 +8,10 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"sap/ui/core/library",
 	"./thirdparty/ProgressIndicator"
-], function(WebComponent, library, coreLibrary) {
+], function(WebComponent, library, EnabledPropagator, coreLibrary) {
 	"use strict";
 
 	var ValueState = coreLibrary.ValueState;
@@ -29,29 +30,25 @@ 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.99.0
+	 * @version 1.100.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.ProgressIndicator
+	 * @implements sap.ui.core.IFormContent
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var ProgressIndicator = WebComponent.extend("sap.ui.webc.main.ProgressIndicator", {
 		metadata: {
 			library: "sap.ui.webc.main",
 			tag: "ui5-progress-indicator-ui5",
+			interfaces: [
+				"sap.ui.core.IFormContent"
+			],
 			properties: {
 
-				/**
-				 * Defines whether component is in disabled state.
-				 */
-				disabled: {
-					type: "boolean",
-					defaultValue: false
-				},
-
 				/**
 				 * Specifies the text value to be displayed in the bar.
 				 *
@@ -65,6 +62,19 @@ sap.ui.define([
 					type: "string"
 				},
 
+				/**
+				 * 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 whether the component value is shown.
 				 */
@@ -112,6 +122,8 @@ sap.ui.define([
 		}
 	});
 
+	EnabledPropagator.call(ProgressIndicator.prototype);
+
 	/* CUSTOM CODE START */
 	/* CUSTOM CODE END */
 

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

@@ -8,9 +8,11 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"sap/ui/core/library",
-	"./thirdparty/RadioButton"
-], function(WebComponent, library, coreLibrary) {
+	"./thirdparty/RadioButton",
+	"./thirdparty/features/InputElementsFormSupport"
+], function(WebComponent, library, EnabledPropagator, coreLibrary) {
 	"use strict";
 
 	var ValueState = coreLibrary.ValueState;
@@ -37,7 +39,7 @@ 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.99.0
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -67,13 +69,16 @@ sap.ui.define([
 				},
 
 				/**
-				 * Defines whether the component is disabled. <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"
+					}
 				},
 
 				/**
@@ -188,6 +193,8 @@ sap.ui.define([
 		}
 	});
 
+	EnabledPropagator.call(RadioButton.prototype);
+
 	/* CUSTOM CODE START */
 
 	/**

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

@@ -8,8 +8,9 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"./thirdparty/RangeSlider"
-], function(WebComponent, library) {
+], function(WebComponent, library, EnabledPropagator) {
 	"use strict";
 
 	/**
@@ -60,7 +61,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.99.0
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -76,11 +77,16 @@ sap.ui.define([
 			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"
+					}
 				},
 
 				/**
@@ -184,6 +190,8 @@ sap.ui.define([
 		}
 	});
 
+	EnabledPropagator.call(RangeSlider.prototype);
+
 	/* CUSTOM CODE START */
 	/* CUSTOM CODE END */
 

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

@@ -8,8 +8,9 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"./thirdparty/RatingIndicator"
-], function(WebComponent, library) {
+], function(WebComponent, library, EnabledPropagator) {
 	"use strict";
 
 	/**
@@ -42,38 +43,43 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.99.0
+	 * @version 1.100.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.RatingIndicator
+	 * @implements sap.ui.core.IFormContent
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var RatingIndicator = WebComponent.extend("sap.ui.webc.main.RatingIndicator", {
 		metadata: {
 			library: "sap.ui.webc.main",
 			tag: "ui5-rating-indicator-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"
 				},
 
 				/**
-				 * Defines whether the component is disabled.
-				 *
-				 * <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"
+					}
 				},
 
 				/**
@@ -107,6 +113,15 @@ sap.ui.define([
 				value: {
 					type: "float",
 					defaultValue: 0
+				},
+
+				/**
+				 * Defines the width of the control
+				 */
+				width: {
+					type: "sap.ui.core.CSSSize",
+					defaultValue: null,
+					mapping: "style"
 				}
 			},
 			events: {
@@ -122,6 +137,8 @@ sap.ui.define([
 		}
 	});
 
+	EnabledPropagator.call(RatingIndicator.prototype);
+
 	/* CUSTOM CODE START */
 	/* CUSTOM CODE END */
 

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

@@ -29,8 +29,18 @@ sap.ui.define([
 	 *
 	 * <h3>Usage</h3> Use it when you want to make sure that all the content is visible on any device.
 	 *
+	 * <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>
+	 * The <code>sap.ui.webc.main.ResponsivePopover</code> exposes the following CSS Shadow Parts:
+	 * <ul>
+	 *     <li>header - Used to style the header of the component</li>
+	 *     <li>content - Used to style the content of the component</li>
+	 *     <li>footer - Used to style the footer of the component</li>
+	 * </ul>
+	 *
 	 * @author SAP SE
-	 * @version 1.99.0
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -104,17 +114,17 @@ sap.ui.define([
 				},
 
 				/**
-				 * Defines the ID of the HTML Element, which will get the initial focus.
+				 * Defines whether the component should close when clicking/tapping outside of the popover. If enabled, it blocks any interaction with the background.
 				 */
-				initialFocus: {
-					type: "string",
-					defaultValue: ""
+				modal: {
+					type: "boolean",
+					defaultValue: false
 				},
 
 				/**
-				 * Defines whether the component should close when clicking/tapping outside of the popover. If enabled, it blocks any interaction with the background.
+				 * Indicates if the element is open
 				 */
-				modal: {
+				open: {
 					type: "boolean",
 					defaultValue: false
 				},
@@ -190,6 +200,18 @@ sap.ui.define([
 			},
 			associations: {
 
+				/**
+				 * Defines the opener id of the element that the popover is shown at
+				 */
+				opener: {
+					type: "sap.ui.core.Control",
+					multiple: false,
+					mapping: {
+						type: "property",
+						to: "opener"
+					}
+				},
+
 				/**
 				 * Receives id(or many ids) of the controls that label this control.
 				 */
@@ -201,6 +223,18 @@ sap.ui.define([
 						to: "accessibleNameRef",
 						formatter: "_getAriaLabelledByForRendering"
 					}
+				},
+
+				/**
+				 * Defines the ID of the HTML Element, which will get the initial focus.
+				 */
+				initialFocus: {
+					type: "sap.ui.core.Control",
+					multiple: false,
+					mapping: {
+						type: "property",
+						to: "initialFocus"
+					}
 				}
 			},
 			events: {

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

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * <b>Note:</b> There can be just one selected <code>item</code> at a time.
 	 *
 	 * @author SAP SE
-	 * @version 1.99.0
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -48,10 +48,19 @@ sap.ui.define([
 			properties: {
 
 				/**
-				 * Sets the accessible aria name of the component.
+				 * Defines the accessible aria name of the component.
 				 */
 				accessibleName: {
 					type: "string"
+				},
+
+				/**
+				 * Defines the width of the control
+				 */
+				width: {
+					type: "sap.ui.core.CSSSize",
+					defaultValue: null,
+					mapping: "style"
 				}
 			},
 			defaultAggregation: "items",
@@ -104,12 +113,12 @@ sap.ui.define([
 	// 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 () {
+	 * <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;
 	};
 

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.99.0
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -60,7 +61,7 @@ sap.ui.define([
 				 *         <ul>
 				 *             <li><code>true</code></li>
 				 *             <li><code>false</code></li>
-				 *             <ul>
+				 *         </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>
@@ -80,7 +81,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * Sets the accessible aria name of the component.
+				 * Defines the accessible aria name of the component.
 				 */
 				accessibleName: {
 					type: "string"
@@ -95,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"
+					}
 				},
 
 				/**
@@ -176,6 +182,8 @@ sap.ui.define([
 		}
 	});
 
+	EnabledPropagator.call(SegmentedButtonItem.prototype);
+
 	/* CUSTOM CODE START */
 	/* CUSTOM CODE END */
 

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,36 +40,43 @@ sap.ui.define([
 	 * </ul> <br>
 	 *
 	 * @author SAP SE
-	 * @version 1.99.0
+	 * @version 1.100.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"
 				},
 
 				/**
-				 * 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"
+					}
 				},
 
 				/**
@@ -195,6 +204,8 @@ sap.ui.define([
 	 * @function
 	 */
 
+	EnabledPropagator.call(Select.prototype);
+
 	/* CUSTOM CODE START */
 	/* CUSTOM CODE END */