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

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

@@ -38,12 +38,12 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @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.
+	 * @since 1.95.0
+	 * @experimental Since 1.95.0 This control is experimental and its API might change significantly.
 	 * @alias sap.ui.webc.main.CardHeader
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
@@ -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.96.5
+	 * @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.96.5
+	 * @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

@@ -21,14 +21,14 @@ sap.ui.define([
 	 * @extends sap.ui.webc.common.WebComponent
 	 * @class
 	 *
-	 * <h3>Overview</h3> The ColorPalette provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.
+	 * <h3>Overview</h3> The <code>sap.ui.webc.main.ColorPalette</code> provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.
 	 *
 	 * <h3>Usage</h3>
 	 *
-	 * The Colorpalette is meant for users that needs 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>.
+	 * 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.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -45,7 +45,7 @@ sap.ui.define([
 			aggregations: {
 
 				/**
-				 * Defines the <code>sap.ui.webc.main.ColorPaletteItem</code> items.
+				 * Defines the <code>sap.ui.webc.main.ColorPaletteItem</code> elements.
 				 */
 				colors: {
 					type: "sap.ui.webc.main.IColorPaletteItem",
@@ -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.96.5
+	 * @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

@@ -0,0 +1,132 @@
+/*!
+ * 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.ColorPalettePopover.
+sap.ui.define([
+	"sap/ui/webc/common/WebComponent",
+	"./library",
+	"./thirdparty/ColorPalettePopover"
+], function(WebComponent, library) {
+	"use strict";
+
+	/**
+	 * Constructor for a new <code>ColorPalettePopover</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> Represents a predefined range of colors for easier selection.
+	 *
+	 * Overview The ColorPalettePopover provides the users with a slot to predefine colors.
+	 *
+	 * You can customize them with the use of the colors property. You can specify a defaultColor and display a "Default color" button for the user to choose directly. You can display a "More colors..." button that opens an additional color picker for the user to choose specific colors that are not present in the predefined range.
+	 *
+	 * <h3>Usage</h3>
+	 *
+	 * 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.99.0
+	 *
+	 * @constructor
+	 * @public
+	 * @since 1.97.0
+	 * @experimental Since 1.97.0 This control is experimental and its API might change significantly.
+	 * @alias sap.ui.webc.main.ColorPalettePopover
+	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
+	 */
+	var ColorPalettePopover = WebComponent.extend("sap.ui.webc.main.ColorPalettePopover", {
+		metadata: {
+			library: "sap.ui.webc.main",
+			tag: "ui5-color-palette-popover-ui5",
+			properties: {
+
+				/**
+				 * Defines the default color of the component. <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
+				 */
+				defaultColor: {
+					type: "sap.ui.core.CSSColor"
+				},
+
+				/**
+				 * Defines whether the user can choose the default color from a button.
+				 */
+				showDefaultColor: {
+					type: "boolean",
+					defaultValue: false
+				},
+
+				/**
+				 * Defines whether the user can choose a custom color from a component. <b>Note:</b> In order to use this property you need to import the following module: <code>"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"</code>
+				 */
+				showMoreColors: {
+					type: "boolean",
+					defaultValue: false
+				},
+
+				/**
+				 * Defines whether the user can see the last used colors in the bottom of the component
+				 */
+				showRecentColors: {
+					type: "boolean",
+					defaultValue: false
+				}
+			},
+			defaultAggregation: "content",
+			aggregations: {
+
+				/**
+				 * Defines the content of the component.
+				 */
+				content: {
+					type: "sap.ui.core.Control",
+					multiple: true
+				}
+			},
+			events: {
+
+				/**
+				 * Fired when the user selects a color.
+				 */
+				itemClick: {
+					parameters: {
+						/**
+						 * the selected color
+						 */
+						color: {
+							type: "string"
+						}
+					}
+				}
+			},
+			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

@@ -21,7 +21,7 @@ sap.ui.define([
 	 * @extends sap.ui.webc.common.WebComponent
 	 * @class
 	 *
-	 * <h3>Overview</h3> The ColorPicker allows users to choose any color and provides different input options for selecting colors.
+	 * <h3>Overview</h3> The <code>sap.ui.webc.main.ColorPicker</code> allows users to choose any color and provides different input options for selecting colors.
 	 *
 	 * <h3>Usage</h3>
 	 *
@@ -35,7 +35,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -56,7 +56,7 @@ sap.ui.define([
 				 * <b>Note</b>: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.
 				 */
 				color: {
-					type: "string"
+					type: "sap.ui.core.CSSColor"
 				}
 			},
 			events: {
@@ -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 one or more options 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.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -63,18 +78,10 @@ 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>
-				 * <b>Note:</b> A disabled component is completely uninteractive.
+				 * <b>Note:</b> A disabled component is completely noninteractive.
 				 */
 				disabled: {
 					type: "boolean",
@@ -106,7 +113,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * Defines whether the component is readonly. <br>
+				 * Defines whether the component is read-only. <br>
 				 * <br>
 				 * <b>Note:</b> A read-only component is not editable, but still provides visual feedback upon user interaction.
 				 */
@@ -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,12 +24,12 @@ 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.96.5
+	 * @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.
+	 * @since 1.95.0
+	 * @experimental Since 1.95.0 This control is experimental and its API might change significantly.
 	 * @alias sap.ui.webc.main.ComboBoxGroupItem
 	 * @implements sap.ui.webc.main.IComboBoxItem
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
@@ -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.96.5
+	 * @version 1.99.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.96.5
+	 * @version 1.99.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

@@ -37,7 +37,7 @@ sap.ui.define([
 	 *     <li>Typing it in directly in the input field</li>
 	 * </ul> <br>
 	 * <br>
-	 * When the user makes an entry and chooses the enter key, the calendar shows the corresponding date. When the user directly triggers the calendar display, the actual date is displayed.
+	 * When the user makes an entry and presses the enter key, the calendar shows the corresponding date. When the user directly triggers the calendar display, the actual date is displayed.
 	 *
 	 * <h3>Formatting</h3>
 	 *
@@ -50,7 +50,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>
@@ -71,10 +71,10 @@ sap.ui.define([
 	 * {
 	 * 	"calendarType": "Japanese"
 	 * }
-	 * &lt;/script&gt;
+	 * &lt;/script&gt;</code></pre>
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -96,14 +96,6 @@ sap.ui.define([
 					type: "string"
 				},
 
-				/**
-				 * Receives id(or many ids) of the elements that label the component.
-				 */
-				accessibleNameRef: {
-					type: "string",
-					defaultValue: ""
-				},
-
 				/**
 				 * Determines whether the component is displayed as disabled.
 				 */
@@ -125,7 +117,7 @@ sap.ui.define([
 				 * <br>
 				 *
 				 *
-				 * <b>Note:<b> For calendars other than Gregorian, the week numbers are not displayed regardless of what is set.
+				 * <b>Note:</b> For calendars other than Gregorian, the week numbers are not displayed regardless of what is set.
 				 */
 				hideWeekNumbers: {
 					type: "boolean",
@@ -141,7 +133,7 @@ sap.ui.define([
 				},
 
 				/**
-				 * Determines the мinimum date available for selection.
+				 * Determines the minimum date available for selection.
 				 */
 				minDate: {
 					type: "string",
@@ -255,6 +247,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 +365,8 @@ sap.ui.define([
 	 * @function
 	 */
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return DatePicker;
 });