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

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

@@ -32,7 +32,7 @@ sap.ui.define([
 	 * <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.
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -48,21 +48,13 @@ sap.ui.define([
 			properties: {
 
 				/**
-				 * Defines the accessible name of the component, which is used as the name of the card region and should be unique per card. <b>Note:</b> <code>accessibleName</code> should be always set, unless <code>accessibleNameRef</code> is set.
+				 * Defines the accessible name of the component, which is used as the name of the card region and should be unique per card. <b>Note:</b> <code>accessibleName</code> should be always set, unless <code>ariaLabelledBy</code> is set.
 				 */
 				accessibleName: {
 					type: "string",
 					defaultValue: ""
 				},
 
-				/**
-				 * Defines the IDs of the elements that label the component.
-				 */
-				accessibleNameRef: {
-					type: "string",
-					defaultValue: ""
-				},
-
 				/**
 				 * Defines the height of the control
 				 */
@@ -102,9 +94,27 @@ sap.ui.define([
 					multiple: true,
 					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"
+					}
+				}
 			}
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Card;
 });

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

@@ -38,7 +38,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -123,5 +123,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return CardHeader;
-});
+});

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

@@ -48,7 +48,10 @@ sap.ui.define([
 	 *     <li>The items you want to display are uniform and very similar.</li>
 	 * </ul>
 	 *
-	 * <h3>Keyboard Handling</h3> When the <code>sap.ui.webc.main.Carousel</code> is focused the user can navigate between the items with the following keyboard shortcuts: <br>
+	 * <h3>Keyboard Handling</h3>
+	 *
+	 * <h4>Basic Navigation</h4> When the <code>sap.ui.webc.main.Carousel</code> is focused the user can navigate between the items with the following keyboard shortcuts: <br>
+	 *
 	 *
 	 *
 	 *
@@ -58,7 +61,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -178,5 +181,8 @@ sap.ui.define([
 	 * @function
 	 */
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Carousel;
 });

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

@@ -8,9 +8,11 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"sap/ui/core/library",
-	"./thirdparty/CheckBox"
-], function(WebComponent, library, coreLibrary) {
+	"./thirdparty/CheckBox",
+	"./thirdparty/features/InputElementsFormSupport"
+], function(WebComponent, library, EnabledPropagator, coreLibrary) {
 	"use strict";
 
 	var ValueState = coreLibrary.ValueState;
@@ -50,21 +52,33 @@ sap.ui.define([
 	 * <br>
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @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.CheckBox
+	 * @implements sap.ui.core.IFormContent
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var CheckBox = WebComponent.extend("sap.ui.webc.main.CheckBox", {
 		metadata: {
 			library: "sap.ui.webc.main",
 			tag: "ui5-checkbox-ui5",
+			interfaces: [
+				"sap.ui.core.IFormContent"
+			],
 			properties: {
 
+				/**
+				 * Defines the accessible aria name of the component.
+				 */
+				accessibleName: {
+					type: "string",
+					defaultValue: ""
+				},
+
 				/**
 				 * Defines if the component is checked. <br>
 				 * <br>
@@ -76,13 +90,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"
+					}
 				},
 
 				/**
@@ -152,6 +169,15 @@ sap.ui.define([
 					defaultValue: ValueState.None
 				},
 
+				/**
+				 * Defines the width of the control
+				 */
+				width: {
+					type: "sap.ui.core.CSSSize",
+					defaultValue: null,
+					mapping: "style"
+				},
+
 				/**
 				 * Defines whether the component text wraps when there is not enough space. <br>
 				 * <br>
@@ -166,6 +192,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: {
 
 				/**
@@ -178,5 +219,19 @@ sap.ui.define([
 		}
 	});
 
+	EnabledPropagator.call(CheckBox.prototype);
+
+	/* CUSTOM CODE START */
+
+	/**
+	 * Checkbox without label must not be stretched in Form.
+	 * @returns {boolean} True if the <code>Form</code> should not adjust the width of the CheckBox component wrapper
+	 */
+	CheckBox.prototype.getFormDoNotAdjustWidth = function() {
+		return this.getText() ? false : true;
+	};
+
+	/* CUSTOM CODE END */
+
 	return CheckBox;
 });

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

@@ -8,7 +8,8 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
-	"./thirdparty/ColorPalette"
+	"./thirdparty/ColorPalette",
+	"./thirdparty/features/ColorPaletteMoreColors"
 ], function(WebComponent, library) {
 	"use strict";
 
@@ -28,7 +29,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.ColorPalette</code> is meant for users that need to select a color from a predefined set. To define the colors, use the <code>sap.ui.webc.main.ColorPaletteItem</code> component inside the default slot of the <code>sap.ui.webc.main.ColorPalette</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -71,5 +72,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return ColorPalette;
 });

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

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.ColorPaletteItem</code> component represents a color in the the <code>sap.ui.webc.main.ColorPalette</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -57,5 +57,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return ColorPaletteItem;
 });

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

@@ -8,7 +8,8 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
-	"./thirdparty/ColorPalettePopover"
+	"./thirdparty/ColorPalettePopover",
+	"./thirdparty/features/ColorPaletteMoreColors"
 ], function(WebComponent, library) {
 	"use strict";
 
@@ -32,7 +33,7 @@ sap.ui.define([
 	 * The palette is intended for users, who don't want to check and remember the different values of the colors and spend large amount of time to configure the right color through the color picker.
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -78,14 +79,14 @@ sap.ui.define([
 					defaultValue: false
 				}
 			},
-			defaultAggregation: "content",
+			defaultAggregation: "colors",
 			aggregations: {
 
 				/**
 				 * Defines the content of the component.
 				 */
-				content: {
-					type: "sap.ui.core.Control",
+				colors: {
+					type: "sap.ui.webc.main.IColorPaletteItem",
 					multiple: true
 				}
 			},
@@ -104,9 +105,29 @@ sap.ui.define([
 						}
 					}
 				}
-			}
+			},
+			methods: ["openPopover", "showAt"]
 		}
 	});
 
+	/**
+	 * Shows the ColorPalettePopover. <b>Note:</b> The method is deprecated and will be removed in future, use <code>showAt</code> instead.
+	 * @param {HTMLElement} opener the element that the popover is shown at
+	 * @public
+	 * @name sap.ui.webc.main.ColorPalettePopover#openPopover
+	 * @function
+	 */
+
+	/**
+	 * Shows the ColorPalettePopover.
+	 * @param {HTMLElement} opener the element that the popover is shown at
+	 * @public
+	 * @name sap.ui.webc.main.ColorPalettePopover#showAt
+	 * @function
+	 */
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return ColorPalettePopover;
-});
+});

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

@@ -35,7 +35,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -71,5 +71,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return ColorPicker;
 });

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

@@ -8,9 +8,10 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"sap/ui/core/library",
 	"./thirdparty/ComboBox"
-], function(WebComponent, library, coreLibrary) {
+], function(WebComponent, library, EnabledPropagator, coreLibrary) {
 	"use strict";
 
 	var ValueState = coreLibrary.ValueState;
@@ -28,57 +29,71 @@ sap.ui.define([
 	 *
 	 * The <code>sap.ui.webc.main.ComboBox</code> component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.
 	 *
-	 * It is commonly used to enable users to select an option from a predefined list. <h3>Structure</h3> The <code>sap.ui.webc.main.ComboBox</code> consists of the following elements:
+	 * It is commonly used to enable users to select an option from a predefined list.
+	 *
+	 * <h3>Structure</h3> The <code>sap.ui.webc.main.ComboBox</code> consists of the following elements:
 	 * <ul>
 	 *     <li> Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.
 	 *     <li> Drop-down arrow - expands\collapses the option list.</li>
 	 *     <li> Option list - the list of available options.</li>
 	 * </ul>
+	 *
 	 * <h3>Keyboard Handling</h3>
 	 *
-	 * The <code>sap.ui.webc.main.ComboBox</code> provides advanced keyboard handling.
+	 * The <code>sap.ui.webc.main.ComboBox</code> provides advanced keyboard handling. <br>
 	 *
-	 * <h4>Picker</h4> If the <code>sap.ui.webc.main.ComboBox</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. <br>
+	 *
+	 *
+	 * <ul>
+	 *     <li>[F4], [ALT]+[UP], or [ALT]+[DOWN] - Toggles the picker.</li>
+	 *     <li>[ESC] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.</li>
+	 *     <li>[ENTER] or [RETURN] - If picker is open, takes over the currently selected item and closes it.</li>
+	 *     <li>[DOWN] - Selects the next matching item in the picker.</li>
+	 *     <li>[UP] - Selects the previous matching item in the picker.</li>
+	 *     <li>[PAGEDOWN] - Moves selection down by page size (10 items by default).</li>
+	 *     <li>[PAGEUP] - Moves selection up by page size (10 items by default). </li>
+	 *     <li>[HOME] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.</li>
+	 *     <li>[END] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.</li>
+	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @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.ComboBox
+	 * @implements sap.ui.core.IFormContent
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var ComboBox = WebComponent.extend("sap.ui.webc.main.ComboBox", {
 		metadata: {
 			library: "sap.ui.webc.main",
 			tag: "ui5-combobox-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 combo box
-				 */
-				accessibleNameRef: {
-					type: "string",
-					defaultValue: ""
-				},
-
-				/**
-				 * 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"
+					}
 				},
 
 				/**
@@ -194,6 +209,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: {
 
 				/**
@@ -229,5 +259,10 @@ sap.ui.define([
 		}
 	});
 
+	EnabledPropagator.call(ComboBox.prototype);
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return ComboBox;
 });

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

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

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

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.ComboBoxItem</code> represents the item for a <code>sap.ui.webc.main.ComboBox</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -62,5 +62,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return ComboBoxItem;
 });

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.97.1
+	 * @version 1.100.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

@@ -8,9 +8,11 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"sap/ui/core/library",
-	"./thirdparty/DatePicker"
-], function(WebComponent, library, coreLibrary) {
+	"./thirdparty/DatePicker",
+	"./thirdparty/features/InputElementsFormSupport"
+], function(WebComponent, library, EnabledPropagator, coreLibrary) {
 	"use strict";
 
 	var CalendarType = coreLibrary.CalendarType;
@@ -50,7 +52,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,19 +76,23 @@ sap.ui.define([
 	 * &lt;/script&gt;</code></pre>
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @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.DatePicker
+	 * @implements sap.ui.core.IFormContent
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var DatePicker = WebComponent.extend("sap.ui.webc.main.DatePicker", {
 		metadata: {
 			library: "sap.ui.webc.main",
 			tag: "ui5-date-picker-ui5",
+			interfaces: [
+				"sap.ui.core.IFormContent"
+			],
 			properties: {
 
 				/**
@@ -97,19 +103,16 @@ sap.ui.define([
 				},
 
 				/**
-				 * 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"
+					}
 				},
 
 				/**
@@ -255,6 +258,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 +376,10 @@ sap.ui.define([
 	 * @function
 	 */
 
+	EnabledPropagator.call(DatePicker.prototype);
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return DatePicker;
 });