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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/sap.ui.webc.main",
-  "version": "1.98.0",
+  "version": "1.99.0",
   "description": "OpenUI5 UI Library sap.ui.webc.main",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -16,7 +16,7 @@
     "url": "https://github.com/SAP/openui5.git"
   },
   "dependencies": {
-    "@openui5/sap.ui.core": "1.98.0",
-    "@openui5/sap.ui.webc.common": "1.98.0"
+    "@openui5/sap.ui.core": "1.99.0",
+    "@openui5/sap.ui.webc.common": "1.99.0"
   }
 }

package/src/sap/ui/webc/main/.library

@@ -3,7 +3,7 @@
 
 	<name>sap.ui.webc.main</name>
 	<vendor>SAP SE</vendor>
-	<version>1.98.0</version>
+	<version>1.99.0</version>
 	<copyright>OpenUI5
  * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>

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

@@ -43,7 +43,7 @@ sap.ui.define([
 	 * <br>
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -172,5 +172,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Avatar;
 });

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

@@ -73,7 +73,7 @@ sap.ui.define([
 	 * </ul> <br>
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -174,5 +174,8 @@ sap.ui.define([
 	 * @function
 	 */
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return AvatarGroup;
 });

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

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

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

@@ -45,7 +45,7 @@ sap.ui.define([
 	 * </ul> <br>
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -108,9 +108,10 @@ sap.ui.define([
 			events: {
 
 				/**
-				 * Fires when a <code>BreadcrumbsItem</code> is clicked.
+				 * Fires when a <code>BreadcrumbsItem</code> is clicked. <b>Note:</b> You can prevent browser location change by calling <code>event.preventDefault()</code>.
 				 */
 				itemClick: {
+					allowPreventDefault: true,
 					parameters: {
 						/**
 						 * The clicked item.
@@ -124,5 +125,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Breadcrumbs;
 });

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

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.BreadcrumbsItem</code> component defines the content of an item in <code>ui5-breadcumbs</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -94,5 +94,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return BreadcrumbsItem;
 });

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

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

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

@@ -46,7 +46,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -65,6 +65,36 @@ sap.ui.define([
 			],
 			properties: {
 
+				/**
+				 * 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: {}
+				},
+
 				/**
 				 * Sets the accessible aria name of the component.
 				 */
@@ -161,6 +191,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: {
 
 				/**
@@ -175,5 +220,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Button;
 });

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

@@ -84,6 +84,7 @@ sap.ui.define([
 	 * </ul> <br>
 	 *
 	 *
+	 *
 	 * <h3>Calendar types</h3> The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian. By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar, you need to set the <code>primaryCalendarType</code> property and import one or more of the following modules: <br>
 	 * <br>
 	 *
@@ -93,7 +94,7 @@ sap.ui.define([
 	 * <code> &lt;script data-id="sap-ui-config" type="application/json"&gt; { "calendarType": "Japanese" } &lt;/script&gt; </code>
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -211,5 +212,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Calendar;
 });

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

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.CalendarDate</code> component defines a calendar date to be used inside <code>sap.ui.webc.main.Calendar</code>
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -55,5 +55,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return CalendarDate;
 });

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.98.0
+	 * @version 1.99.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.98.0
+	 * @version 1.99.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.98.0
+	 * @version 1.99.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

@@ -50,21 +50,33 @@ 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.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: {
 
+				/**
+				 * Sets the accessible aria name of the component.
+				 */
+				accessibleName: {
+					type: "string",
+					defaultValue: ""
+				},
+
 				/**
 				 * Defines if the component is checked. <br>
 				 * <br>
@@ -152,6 +164,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 +187,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 +214,17 @@ sap.ui.define([
 		}
 	});
 
+	/* 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

@@ -28,7 +28,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.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -71,5 +71,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.98.0
+	 * @version 1.99.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

@@ -32,7 +32,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.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -104,9 +104,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.98.0
+	 * @version 1.99.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

@@ -28,20 +28,35 @@ 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.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -63,14 +78,6 @@ sap.ui.define([
 					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>
@@ -194,6 +201,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 +251,8 @@ sap.ui.define([
 		}
 	});
 
+	/* 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.98.0
+	 * @version 1.99.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.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -62,5 +62,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return ComboBoxItem;
 });