@ui5/webcomponents 1.7.1 → 1.9.0

package/dist/ListItem.js

@@ -33,7 +33,7 @@ const metadata = {
 		 * <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press and hover,
 		 * while with type <code>Inactive</code> and <code>Detail</code> - will not.
 		 *
-		 * @type {ListItemType}
+		 * @type {sap.ui.webcomponents.main.types.ListItemType}
 		 * @defaultvalue "Active"
 		 * @public
 		*/
@@ -123,6 +123,23 @@ const metadata = {
 		_focused: {},
 		"_selection-requested": {},
 	},
+	managedSlots: true,
+	slots: /** @lends sap.ui.webcomponents.main.ListItem.prototype */ {
+
+		/**
+		 * Defines the delete button, displayed in "Delete" mode.
+		 * <b>Note:</b> While the slot allows custom buttons, to match
+		 * design guidelines, please use the <code>ui5-button</code> component.
+		 * <b>Note:</b> When the slot is not present, a built-in delete button will be displayed.
+		 * @type {sap.ui.webcomponents.main.IButton}
+		 * @since 1.9.0
+		 * @slot
+		 * @public
+		 */
+		deleteButton: {
+			type: HTMLElement,
+		},
+	},
 };
 
 /**
@@ -133,7 +150,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ListItem
- * @extends ListItemBase
+ * @extends sap.ui.webcomponents.main.ListItemBase
  * @public
  */
 class ListItem extends ListItemBase {
@@ -295,6 +312,7 @@ class ListItem extends ListItemBase {
 			return;
 		}
 
+		event.preventDefault();
 		this.fireEvent("_press", { item: this, selected: this.selected, key: event.key });
 	}
 
@@ -376,6 +394,10 @@ class ListItem extends ListItemBase {
 		return ListItem.i18nBundle.getText(DELETE);
 	}
 
+	get hasDeleteButtonSlot() {
+		return !!this.deleteButton.length;
+	}
+
 	get _accessibleNameRef() {
 		if (this.accessibleName) {
 			// accessibleName is set - return labels excluding content

package/dist/ListItemBase.js

@@ -72,7 +72,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ListItemBase
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @public
  */
 class ListItemBase extends UI5Element {

package/dist/Menu.js

@@ -185,7 +185,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Menu
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-menu
  * @appenddocs MenuItem
  * @since 1.3.0

package/dist/MenuItem.js

@@ -9,7 +9,7 @@ const metadata = {
 		/**
 		 * Defines the text of the tree item.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultValue ""
 		 * @public
 		 */
@@ -17,6 +17,18 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the <code>additionalText</code>, displayed in the end of the menu item.
+		 * <b>Note:</b> The additional text would not be displayed if the item has a submenu.
+		 *
+		 * @type {string}
+		 * @public
+		 * @since 1.8.0
+		 */
+		additionalText: {
+			type: String,
+		},
+
 		/**
 		 * Defines the icon to be displayed as graphical element within the component.
 		 * The SAP-icons font provides numerous options.
@@ -144,7 +156,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.MenuItem
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-menu-item
  * @implements sap.ui.webcomponents.main.IMenuItem
  * @since 1.3.0
@@ -167,6 +179,10 @@ class MenuItem extends UI5Element {
 		return !!Object.keys(this._subMenu).length;
 	}
 
+	get _additionalText() {
+		return this.hasChildren ? "" : this.additionalText;
+	}
+
 	get ariaLabelledByText() {
 		return `${this.text} ${this.accessibleName}`.trim();
 	}

package/dist/MessageStrip.js

@@ -38,7 +38,7 @@ const metadata = {
 		 * <b>Note:</b> Available options are <code>"Information"</code>, <code>"Positive"</code>, <code>"Negative"</code>,
 		 * and <code>"Warning"</code>.
 		 *
-		 * @type {MessageStripDesign}
+		 * @type {sap.ui.webcomponents.main.types.MessageStripDesign}
 		 * @defaultvalue "Information"
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -147,7 +147,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.MessageStrip
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-message-strip
  * @public
  * @since 0.9.0

package/dist/MonthPicker.js

@@ -30,7 +30,7 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.MonthPicker.prototype */ {
 		/**
 		 * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component.
-		 * @type {Array}
+		 * @type {array}
 		 * @public
 		 */
 		selectedDates: {
@@ -79,7 +79,7 @@ const ROW_SIZE = 3; // Months per row (4 rows of 3 months each)
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.MonthPicker
- * @extends CalendarPart
+ * @extends sap.ui.webcomponents.main.CalendarPart
  * @tagname ui5-monthpicker
  * @public
  */

package/dist/MultiComboBox.js

@@ -145,6 +145,8 @@ const metadata = {
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		value: {
@@ -212,7 +214,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -429,7 +431,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.MultiComboBox
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-multi-combobox
  * @public
  * @appenddocs MultiComboBoxItem MultiComboBoxGroupItem
@@ -1082,7 +1084,7 @@ class MultiComboBox extends UI5Element {
 			if (isCut) {
 				const cutResult = this._tokenizer._fillClipboard("cut", selectedTokens);
 				selectedTokens.forEach(token => {
-					this._tokenizer._tokenDelete(event, token);
+					this._tokenizer._tokenKeyboardDelete(event, token);
 				});
 
 				this.focus();

package/dist/MultiComboBoxGroupItem.js

@@ -32,7 +32,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.MultiComboBoxGroupItem
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-mcb-group-item
  * @public
  * @implements sap.ui.webcomponents.main.IMultiComboBoxItem

package/dist/MultiComboBoxItem.js

@@ -23,7 +23,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.MultiComboBoxItem
- * @extends ComboBoxItem
+ * @extends sap.ui.webcomponents.main.ComboBoxItem
  * @tagname ui5-mcb-item
  * @implements sap.ui.webcomponents.main.IMultiComboBoxItem
  * @public

package/dist/MultiInput.js

@@ -15,6 +15,7 @@ import styles from "./generated/themes/MultiInput.css.js";
 import Token from "./Token.js";
 import Tokenizer from "./Tokenizer.js";
 import Icon from "./Icon.js";
+import "@ui5/webcomponents-icons/dist/value-help.js";
 
 /**
  * @public
@@ -98,7 +99,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.MultiInput
- * @extends Input
+ * @extends sap.ui.webcomponents.main.Input
  * @tagname ui5-multi-input
  * @appenddocs Token
  * @since 1.0.0-rc.9
@@ -146,6 +147,11 @@ class MultiInput extends Input {
 			return;
 		}
 
+		if (focusedToken) {
+			this.fireEvent("token-delete", { token: focusedToken });
+			return;
+		}
+
 		if (selectedTokens.indexOf(focusedToken) === -1) {
 			selectedTokens.push(focusedToken);
 		}

package/dist/Panel.js

@@ -109,7 +109,7 @@ const metadata = {
 		 * Depending on the usage, you can change the role from the default <code>Form</code>
 		 * to <code>Region</code> or <code>Complementary</code>.
 		 *
-		 * @type {PanelAccessibleRole}
+		 * @type {sap.ui.webcomponents.main.types.PanelAccessibleRole}
 		 * @defaultvalue "Form"
 		 * @public
 		 */
@@ -123,7 +123,7 @@ const metadata = {
 		 * set by the <code>headerText</code>.
 		 * <br><br>
 		 * Available options are: <code>"H6"</code> to <code>"H1"</code>.
-		 * @type {TitleLevel}
+		 * @type {sap.ui.webcomponents.main.types.TitleLevel}
 		 * @defaultvalue "H2"
 		 * @public
 		*/

package/dist/Popover.js

@@ -48,7 +48,7 @@ const metadata = {
 		 * <li><code>Bottom</code></li>
 		 * </ul>
 		 *
-		 * @type {PopoverPlacementType}
+		 * @type {sap.ui.webcomponents.main.types.PopoverPlacementType}
 		 * @defaultvalue "Right"
 		 * @public
 		 */
@@ -68,7 +68,7 @@ const metadata = {
 		 * <li><code>Stretch</code></li>
 		 * </ul>
 		 *
-		 * @type {PopoverHorizontalAlign}
+		 * @type {sap.ui.webcomponents.main.types.PopoverHorizontalAlign}
 		 * @defaultvalue "Center"
 		 * @public
 		 */
@@ -88,7 +88,7 @@ const metadata = {
 		 * <li><code>Stretch</code></li>
 		 * </ul>
 		 *
-		 * @type {PopoverVerticalAlign}
+		 * @type {sap.ui.webcomponents.main.types.PopoverVerticalAlign}
 		 * @defaultvalue "Center"
 		 * @public
 		 */
@@ -148,7 +148,7 @@ const metadata = {
 		/**
 		 * Defines the ID or DOM Reference of the element that the popover is shown at
 		 * @public
-		 * @type {DOMReference}
+		 * @type {sap.ui.webcomponents.base.types.DOMReference}
 		 * @defaultvalue ""
 		 * @since 1.2.0
 		 */
@@ -278,7 +278,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Popover
- * @extends Popup
+ * @extends sap.ui.webcomponents.main.Popup
  * @tagname ui5-popover
  * @since 1.0.0-rc.6
  * @public

package/dist/ProgressIndicator.js

@@ -48,7 +48,7 @@ const metadata = {
 		 *
 		 * <b>Note:</b>
 		 * If a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -83,7 +83,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -117,7 +117,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ProgressIndicator
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-progress-indicator
  * @public
  * @since 1.0.0-rc.8

package/dist/RadioButton.js

@@ -70,6 +70,18 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines whether the component is required.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.9.0
+		 */
+		required: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines whether the component is checked or not.
 		 * <br><br>
@@ -79,6 +91,8 @@ const metadata = {
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
+		 * @formEvents change
+		 * @formProperty
 		 * @public
 		 * @since 1.0.0-rc.15
 		 */
@@ -109,7 +123,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -172,7 +186,7 @@ const metadata = {
 		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
 		 * </ul>
 		 *
-		 * @type {WrappingType}
+		 * @type {sap.ui.webcomponents.main.types.WrappingType}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -323,12 +337,20 @@ class RadioButton extends UI5Element {
 		this._enableFormSupport();
 	}
 
-	syncGroup() {
+	onExitDOM() {
+		this.syncGroup(true);
+	}
+
+	syncGroup(forceRemove) {
 		const oldGroup = this._name;
 		const currentGroup = this.name;
 		const oldChecked = this._checked;
 		const currentChecked = this.checked;
 
+		if (forceRemove) {
+			RadioButtonGroup.removeFromGroup(this, oldGroup);
+		}
+
 		if (currentGroup !== oldGroup) {
 			if (oldGroup) {
 				// remove the control from the previous group
@@ -355,8 +377,9 @@ class RadioButton extends UI5Element {
 		const FormSupport = getFeature("FormSupport");
 		if (FormSupport) {
 			FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
-				nativeInput.disabled = element.disabled || !element.checked;
-				nativeInput.value = element.checked ? element.value : "";
+				nativeInput.value = element.value;
+				nativeInput.type = "radio";
+				nativeInput.checked = element.checked;
 			});
 		} else if (this.value) {
 			console.warn(`In order for the "value" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
@@ -469,10 +492,6 @@ class RadioButton extends UI5Element {
 		};
 	}
 
-	get ariaReadonly() {
-		return this.readonly ? "true" : undefined;
-	}
-
 	get ariaDisabled() {
 		return this.disabled ? "true" : undefined;
 	}

package/dist/RangeSlider.js

@@ -31,8 +31,10 @@ const metadata = {
 		 * Defines start point of a selection - position of a first handle on the slider.
 		 * <br><br>
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 0
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		startValue: {
@@ -43,8 +45,10 @@ const metadata = {
 		 * Defines end point of a selection - position of a second handle on the slider.
 		 * <br><br>
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 100
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		endValue: {
@@ -111,7 +115,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.RangeSlider
- * @extends SliderBase
+ * @extends sap.ui.webcomponents.main.SliderBase
  * @tagname ui5-range-slider
  * @since 1.0.0-rc.11
  * @public

package/dist/RatingIndicator.js

@@ -42,7 +42,7 @@ const metadata = {
 		 * <li>1.3 - 1.7 -> 1.5</li>
 		 * <li>1.8 - 1.9 -> 2</li>
 		 * <ul>
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -53,7 +53,7 @@ const metadata = {
 
 		/**
 		 * The number of displayed rating symbols.
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 5
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -169,7 +169,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.RatingIndicator
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-rating-indicator
  * @public
  * @since 1.0.0-rc.8

package/dist/ResponsivePopover.js

@@ -74,7 +74,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ResponsivePopover
- * @extends Popover
+ * @extends sap.ui.webcomponents.main.Popover
  * @tagname ui5-responsive-popover
  * @since 1.0.0-rc.6
  * @public

package/dist/SegmentedButton.js

@@ -273,7 +273,7 @@ class SegmentedButton extends UI5Element {
 	 * Currently selected item.
 	 *
 	 * @readonly
-	 * @type { sap.ui.webcomponents.main.ISegmentedButtonItem }
+	 * @type {sap.ui.webcomponents.main.ISegmentedButtonItem}
 	 * @public
 	 */
 	get selectedItem() {

package/dist/SegmentedButtonItem.js

@@ -14,7 +14,7 @@ const metadata = {
 		/**
 		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
 		 *
-		 * @type {ButtonDesign}
+		 * @type {sap.ui.webcomponents.main.types.ButtonDesign}
 		 * @defaultvalue "Default"
 		 * @public
 		 */
@@ -86,7 +86,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.SegmentedButtonItem
- * @extends ToggleButton
+ * @extends sap.ui.webcomponents.main.ToggleButton
  * @tagname ui5-segmented-button-item
  * @implements sap.ui.webcomponents.main.ISegmentedButtonItem
  * @public

package/dist/Select.js

@@ -161,7 +161,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -358,9 +358,9 @@ class Select extends UI5Element {
 	}
 
 	/**
-	 * Currently selected option.
+	 * Currently selected <code>ui5-option</code> element.
 	 * @readonly
-	 * @type { sap.ui.webcomponents.main.ISelectOption }
+	 * @type {sap.ui.webcomponents.main.ISelectOption}
 	 * @public
 	 */
 	get selectedOption() {

package/dist/Slider.js

@@ -23,8 +23,10 @@ const metadata = {
 		/**
 		 * Current value of the slider
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 0
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		value: {
@@ -99,7 +101,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Slider
- * @extends SliderBase
+ * @extends sap.ui.webcomponents.main.SliderBase
  * @tagname ui5-slider
  * @since 1.0.0-rc.11
  * @public

package/dist/SliderBase.js

@@ -20,7 +20,7 @@ const metadata = {
 		/**
 		 * Defines the minimum value of the slider.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -31,7 +31,7 @@ const metadata = {
 		/**
 		 * Defines the maximum value of the slider.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 100
 		 * @public
 		 */
@@ -44,7 +44,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -59,7 +59,7 @@ const metadata = {
 		 * Example - if the step value is set to 2 and the label interval is also specified to 2 - then every second
 		 * tickmark will be labelled, which means every 4th value number.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */

package/dist/SplitButton.js

@@ -73,7 +73,7 @@ const metadata = {
 		 * <li><code>Attention</code></li>
 		 * </ul>
 		 *
-		 * @type {ButtonDesign}
+		 * @type {sap.ui.webcomponents.main.types.ButtonDesign}
 		 * @defaultvalue "Default"
 		 * @public
 		 */
@@ -120,7 +120,7 @@ const metadata = {
 		/**
 		 * Accessibility-related properties for inner elements of the Split Button
 		 *
-		 * @type {Object}
+		 * @type {object}
 		 * @private
 		 */
 		_splitButtonAccInfo: {
@@ -272,7 +272,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.SplitButton
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-split-button
  * @public
  * @since 1.1.0

package/dist/StandardListItem.js

@@ -76,7 +76,7 @@ const metadata = {
 		 * Defines the state of the <code>additionalText</code>.
 		 * <br>
 		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -104,7 +104,7 @@ const metadata = {
 		 *
 		 * <br><br>
 		 * <b>Note:</b> this property takes affect only if text node is provided to default slot of the component
-		 * @type {WrappingType}
+		 * @type {sap.ui.webcomponents.main.types.WrappingType}
 		 * @defaultvalue "None"
 		 * @private
 		 * @since 1.5.0
@@ -162,7 +162,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.StandardListItem
- * @extends ListItem
+ * @extends sap.ui.webcomponents.main.ListItem
  * @tagname ui5-li
  * @implements sap.ui.webcomponents.main.IListItem
  * @public