@ui5/webcomponents 1.8.0 → 1.9.0

package/src/ColorPalette.js

@@ -69,7 +69,7 @@ const metadata = {
 		/**
 		 * Defines the default color of the color palette
 		 * <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
-		 * @type {CSSColor}
+		 * @type {sap.ui.webcomponents.base.types.CSSColor}
 		 * @private
 		 * @since 1.0.0-rc.16
 		 */
@@ -79,7 +79,7 @@ const metadata = {
 
 		/**
 		 * Defines the selected color.
-		 * @type {CSSColor}
+		 * @type {sap.ui.webcomponents.base.types.CSSColor}
 		 * @private
 		 */
 		_selectedColor: {
@@ -88,7 +88,7 @@ const metadata = {
 
 		/**
 		 * Defines if the palette is in Popup or Embeded mode.
-		 * @type {CSSColor}
+		 * @type {sap.ui.webcomponents.base.types.CSSColor}
 		 * @private
 		 */
 		popupMode: {
@@ -146,7 +146,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ColorPalette
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-color-palette
  * @since 1.0.0-rc.12
  * @appenddocs ColorPaletteItem

package/src/ColorPaletteItem.js

@@ -23,7 +23,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> The value should be a valid CSS color.
 		 *
-		 * @type {CSSColor}
+		 * @type {sap.ui.webcomponents.base.types.CSSColor}
 		 * @public
 		 */
 		value: {

package/src/ColorPalettePopover.js

@@ -58,7 +58,7 @@ const metadata = {
 		/**
 		 * Defines the default color of the component.
 		 * <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
-		 * @type {CSSColor}
+		 * @type {sap.ui.webcomponents.base.types.CSSColor}
 		 * @public
 		 */
 		defaultColor: {
@@ -120,7 +120,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ColorPalettePopover
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-color-palette-popover
  * @public
  * @since 1.0.0-rc.16

package/src/ColorPicker.js

@@ -40,7 +40,7 @@ const metadata = {
 		 * Defines the currently selected color of the component.
 		 * <br><br>
 		 * <b>Note</b>: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.
-		 * @type {CSSColor}
+		 * @type {sap.ui.webcomponents.base.types.CSSColor}
 		 * @public
 		 */
 		color: {
@@ -159,7 +159,7 @@ const metadata = {
  * @author SAP SE
  * @since 1.0.0-rc.12
  * @alias sap.ui.webcomponents.main.ColorPicker
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-color-picker
  * @public
  */

package/src/ComboBox.js

@@ -80,6 +80,8 @@ const metadata = {
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		value: {
@@ -141,7 +143,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -375,7 +377,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ComboBox
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-combobox
  * @appenddocs ComboBoxItem ComboBoxGroupItem
  * @public
@@ -983,6 +985,7 @@ class ComboBox extends UI5Element {
 
 	_announceSelectedItem(indexOfItem) {
 		const currentItem = this._filteredItems[indexOfItem];
+		const currentItemAdditionalText = currentItem.additionalText;
 		const isGroupItem = currentItem && currentItem.isGroupItem;
 		const itemPositionText = ComboBox.i18nBundle.getText(LIST_ITEM_POSITION, indexOfItem + 1, this._filteredItems.length);
 		const groupHeaderText = ComboBox.i18nBundle.getText(LIST_ITEM_GROUP_HEADER);
@@ -990,7 +993,7 @@ class ComboBox extends UI5Element {
 		if (isGroupItem) {
 			announce(`${groupHeaderText} ${currentItem.text} ${itemPositionText}`, "Polite");
 		} else {
-			announce(`${itemPositionText}`, "Polite");
+			announce(`${currentItemAdditionalText} ${itemPositionText}`.trim(), "Polite");
 		}
 	}
 

package/src/ComboBoxGroupItem.js

@@ -39,7 +39,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ComboBoxGroupItem
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-cb-group-item
  * @public
  * @implements sap.ui.webcomponents.main.IComboBoxItem

package/src/ComboBoxItem.js

@@ -33,7 +33,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ComboBoxItem
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-cb-item
  * @implements sap.ui.webcomponents.main.IComboBoxItem
  * @public

package/src/CustomListItem.js

@@ -49,7 +49,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.CustomListItem
- * @extends ListItem
+ * @extends sap.ui.webcomponents.main.ListItem
  * @tagname ui5-li-custom
  * @implements sap.ui.webcomponents.main.IListItem
  * @public

package/src/DateComponentBase.js

@@ -19,7 +19,7 @@ const metadata = {
 		/**
 		 * Sets a calendar type used for display.
 		 * If not set, the calendar type of the global configuration is used.
-		 * @type {CalendarType}
+		 * @type {sap.ui.webcomponents.base.types.CalendarType}
 		 * @public
 		 */
 		primaryCalendarType: {
@@ -29,7 +29,7 @@ const metadata = {
 		/**
 		 * Defines the secondary calendar type.
 		 * If not set, the calendar will only show the primary calendar type.
-		 * @type {CalendarType}
+		 * @type {sap.ui.webcomponents.base.types.CalendarType}
 		 * @since 1.0.0-rc.16
 		 * @defaultvalue undefined
 		 * @public

package/src/DatePicker.js

@@ -57,6 +57,8 @@ const metadata = {
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		value: {
@@ -75,7 +77,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -368,7 +370,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.DatePicker
- * @extends DateComponentBase
+ * @extends sap.ui.webcomponents.main.DateComponentBase
  * @tagname ui5-date-picker
  * @public
  */
@@ -811,7 +813,7 @@ class DatePicker extends DateComponentBase {
 	 * Currently selected date represented as a Local JavaScript Date instance.
 	 *
 	 * @readonly
-	 * @type { Date }
+	 * @type {Date}
 	 * @public
 	 */
 	get dateValue() {

package/src/DateRangePicker.js

@@ -70,7 +70,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.DateRangePicker
- * @extends DatePicker
+ * @extends sap.ui.webcomponents.main.DatePicker
  * @tagname ui5-daterange-picker
  * @since 1.0.0-rc.8
  * @public
@@ -93,7 +93,7 @@ class DateRangePicker extends DatePicker {
 	 * <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
 	 *
 	 * @readonly
-	 * @type { Date }
+	 * @type {Date}
 	 * @public
 	 */
 	get dateValue() {
@@ -104,7 +104,7 @@ class DateRangePicker extends DatePicker {
 	 * <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
 	 *
 	 * @readonly
-	 * @type { Date }
+	 * @type {Date}
 	 * @public
 	 */
 	get dateValueUTC() {
@@ -157,7 +157,7 @@ class DateRangePicker extends DatePicker {
 	 * Returns the start date of the currently selected range as JavaScript Date instance.
 	 *
 	 * @readonly
-	 * @type { Date }
+	 * @type {Date}
 	 * @public
 	 */
 	get startDateValue() {
@@ -168,7 +168,7 @@ class DateRangePicker extends DatePicker {
 	 * Returns the end date of the currently selected range as JavaScript Date instance.
 	 *
 	 * @readonly
-	 * @type { Date }
+	 * @type {Date}
 	 * @public
 	 */
 	get endDateValue() {

package/src/DateTimePicker.js

@@ -148,7 +148,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.DateTimePicker
- * @extends DatePicker
+ * @extends sap.ui.webcomponents.main.DatePicker
  * @tagname ui5-datetime-picker
  * @since 1.0.0-rc.7
  * @public

package/src/DayPicker.js

@@ -47,7 +47,7 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.DayPicker.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: {
@@ -64,7 +64,7 @@ const metadata = {
 		 * <li><code>CalendarSelectionMode.Range</code> - enables selection of a date range.</li>
 		 * <li><code>CalendarSelectionMode.Multiple</code> - enables selection of multiple dates.</li>
 		 * </ul>
-		 * @type {CalendarSelectionMode}
+		 * @type {sap.ui.webcomponents.main.types.CalendarSelectionMode}
 		 * @defaultvalue "Single"
 		 * @public
 		 */
@@ -90,7 +90,7 @@ const metadata = {
 		},
 
 		/**
-		 * @type {Object}
+		 * @type {object}
 		 * @private
 		 */
 		_weeks: {
@@ -149,7 +149,7 @@ const DAYS_IN_WEEK = 7;
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.DayPicker
- * @extends CalendarPart
+ * @extends sap.ui.webcomponents.main.CalendarPart
  * @tagname ui5-daypicker
  * @public
  */

package/src/Dialog.js

@@ -146,7 +146,7 @@ const metadata = {
 		 * Defines the state of the <code>Dialog</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
@@ -206,7 +206,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Dialog
- * @extends Popup
+ * @extends sap.ui.webcomponents.main.Popup
  * @tagname ui5-dialog
  * @public
  */

package/src/DurationPicker.js

@@ -26,7 +26,7 @@ const metadata = {
 
 		/**
 		 * Defines the selection step for the minutes
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @public
 		 * @defaultValue 1
 		 * @since 1.0.0-rc.8
@@ -38,7 +38,7 @@ const metadata = {
 
 		/**
 		 * Defines the selection step for the seconds
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @public
 		 * @defaultValue 1
 		 * @since 1.0.0-rc.8
@@ -162,7 +162,7 @@ const pad = number => {
  * @since 1.0.0-rc.7
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.DurationPicker
- * @extends TimePickerBase
+ * @extends sap.ui.webcomponents.main.TimePickerBase
  * @tagname ui5-duration-picker
  * @private
  */

package/src/FileUploader.js

@@ -112,6 +112,8 @@ const metadata = {
 		 * Defines the name/names of the file/files to upload.
 		 * @type {string}
 		 * @defaultvalue ""
+		 * @formEvents change
+		 * @formProperty
 		 * @public
 		 */
 		value: {
@@ -130,7 +132,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -229,7 +231,7 @@ const metadata = {
  * @since 1.0.0-rc.6
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.FileUploader
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-file-uploader
  * @public
  */
@@ -310,7 +312,7 @@ class FileUploader extends UI5Element {
 	/**
 	 * FileList of all selected files.
 	 * @readonly
-	 * @type { FileList }
+	 * @type {FileList}
 	 * @public
 	 */
 	get files() {

package/src/GroupHeaderListItem.js

@@ -54,7 +54,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.GroupHeaderListItem
- * @extends ListItemBase
+ * @extends sap.ui.webcomponents.main.ListItemBase
  * @tagname ui5-li-groupheader
  * @implements sap.ui.webcomponents.main.IListItem
  * @public

package/src/Input.js

@@ -3,7 +3,6 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import {
 	isPhone,
-	isSafari,
 	isAndroid,
 } from "@ui5/webcomponents-base/dist/Device.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
@@ -24,7 +23,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getCaretPosition, setCaretPosition } from "@ui5/webcomponents-base/dist/util/Caret.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
@@ -244,7 +243,7 @@ const metadata = {
 		 * that use different soft keyboard layouts depending on the given input type.</li>
 		 * </ul>
 		 *
-		 * @type {InputType}
+		 * @type {sap.ui.webcomponents.main.types.InputType}
 		 * @defaultvalue "Text"
 		 * @public
 		 */
@@ -260,6 +259,8 @@ const metadata = {
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		value: {
@@ -292,7 +293,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -338,7 +339,7 @@ const metadata = {
 		 * Sets the maximum number of characters available in the input field.
 		 * <br><br>
 		 * <b>Note:</b> This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @since 1.0.0-rc.5
 		 * @public
 		 */
@@ -1264,7 +1265,7 @@ class Input extends UI5Element {
 
 	/**
 	 * The suggestion item on preview.
-	 * @type { sap.ui.webcomponents.main.IInputSuggestionItem }
+	 * @type {sap.ui.webcomponents.main.IInputSuggestionItem}
 	 * @readonly
 	 * @public
 	 */
@@ -1284,21 +1285,10 @@ class Input extends UI5Element {
 		const inputValue = await this.getInputValue();
 		const isUserInput = action === this.ACTION_USER_INPUT;
 
-		const input = await this.getInputDOMRef();
-		const cursorPosition = input.selectionStart;
-
 		this.value = inputValue;
 		this.highlightValue = inputValue;
 		this.valueBeforeItemPreview = inputValue;
 
-		if (isSafari()) {
-			// When setting the value by hand, Safari moves the cursor when typing in the middle of the text (See #1761)
-			setTimeout(() => {
-				input.selectionStart = cursorPosition;
-				input.selectionEnd = cursorPosition;
-			}, 0);
-		}
-
 		if (isUserInput) { // input
 			this.fireEvent(this.EVENT_INPUT, { inputType: event.inputType });
 			// Angular two way data binding
@@ -1480,7 +1470,7 @@ class Input extends UI5Element {
 				"ariaControls": this._inputAccInfo && this._inputAccInfo.ariaControls,
 				"ariaExpanded": this._inputAccInfo && this._inputAccInfo.ariaExpanded,
 				"ariaDescription": this._inputAccInfo && this._inputAccInfo.ariaDescription,
-				"ariaLabel": (this._inputAccInfo && this._inputAccInfo.ariaLabel) || getEffectiveAriaLabelText(this),
+				"ariaLabel": (this._inputAccInfo && this._inputAccInfo.ariaLabel) || getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this),
 			},
 		};
 	}

package/src/Label.hbs

@@ -1,7 +1,6 @@
 <label
 		class="ui5-label-root"
 		@click={{_onclick}}
-		for="{{for}}"
 	>
 	<span class="{{classes.textWrapper}}">
 		<bdi id="{{_id}}-bdi">

package/src/Label.js

@@ -19,7 +19,9 @@ const metadata = {
 		/**
 		 * Defines whether an asterisk character is added to the component text.
 		 * <br><br>
-		 * <b>Note:</b> Usually indicates that user input is required.
+		 * <b>Note:</b> Usually indicates that user input (bound with the <code>for</code> property) is required.
+		 * In that case the <code>required</> property of
+		 * the corresponding input should also be set.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -37,7 +39,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
 		 */

package/src/Link.js

@@ -76,7 +76,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> Avaialble options are <code>Default</code>, <code>Subtle</code>, and <code>Emphasized</code>.
 		 *
-		 * @type {LinkDesign}
+		 * @type {sap.ui.webcomponents.main.types.LinkDesign}
 		 * @defaultvalue "Default"
 		 * @public
 		 */
@@ -93,7 +93,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
 		 */
@@ -128,12 +128,17 @@ const metadata = {
 
 		/**
 		 * Defines the ARIA role of the component.
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.15
+		 *
+		 * <b>Note:</b> Use the "button" role in cases when navigation is not expected to occur and the href property is not defined.
+		 *
+		 * @type {string}
+		 * @defaultvalue "link"
+		 * @public
+		 * @since 1.9.0
 		 */
-		 accessibleRole: {
+		accessibleRole: {
 			type: String,
+			defaultValue: "link",
 		},
 
 		/**
@@ -334,7 +339,7 @@ class Link extends UI5Element {
 	}
 
 	get effectiveAccRole() {
-		return this.accessibleRole || "link";
+		return this.accessibleRole.toLowerCase();
 	}
 
 	static async onDefine() {

package/src/List.js

@@ -120,7 +120,7 @@ const metadata = {
 		 * <b>Note:</b> Available options are <code>None</code>, <code>SingleSelect</code>, <code>SingleSelectBegin</code>,
 		 * <code>SingleSelectEnd</code>, <code>MultiSelect</code>, and <code>Delete</code>.
 		 *
-		 * @type {ListMode}
+		 * @type {sap.ui.webcomponents.main.types.ListMode}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -151,7 +151,7 @@ const metadata = {
 		 * item doesn't have a bottom separator.</li>
 		 * </ul>
 		 *
-		 * @type {ListSeparators}
+		 * @type {sap.ui.webcomponents.main.types.ListSeparators}
 		 * @defaultvalue "All"
 		 * @public
 		 */
@@ -177,7 +177,7 @@ const metadata = {
 		 *
 		 * <b>Restrictions:</b> <code>growing="Scroll"</code> is not supported for Internet Explorer,
 		 * on IE the component will fallback to <code>growing="Button"</code>.
-		 * @type {ListGrowingMode}
+		 * @type {sap.ui.webcomponents.main.types.ListGrowingMode}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.13
 		 * @public
@@ -202,7 +202,7 @@ const metadata = {
 		/**
 		 * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultValue 1000
 		 * @public
 		 */
@@ -424,7 +424,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.List
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-list
  * @appenddocs StandardListItem CustomListItem GroupHeaderListItem
  * @public

package/src/ListItem.hbs

@@ -87,6 +87,9 @@
 
 	{{#if renderDeleteButton}}
 		<div class="ui5-li-deletebtn">
+			{{#if hasDeleteButtonSlot}}
+				<slot name="deleteButton"></slot>
+			{{else}}
 			<ui5-button
 				tabindex="-1"
 				data-sap-no-tab-ref
@@ -97,6 +100,7 @@
 				@click="{{onDelete}}"
 				tooltip="{{deleteText}}"
 			></ui5-button>
+			{{/if}}
 		</div>
 	{{/if}}