@ui5/webcomponents 1.7.1 → 1.9.0

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

@@ -43,7 +43,6 @@ import {
 	INPUT_SUGGESTIONS_TITLE,
 	SELECT_OPTIONS,
 	LIST_ITEM_POSITION,
-	LIST_ITEM_SELECTED,
 	LIST_ITEM_GROUP_HEADER,
 } from "./generated/i18n/i18n-defaults.js";
 
@@ -81,6 +80,8 @@ const metadata = {
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		value: {
@@ -142,7 +143,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -376,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
@@ -984,15 +985,15 @@ 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 itemSelectionText = ComboBox.i18nBundle.getText(LIST_ITEM_SELECTED);
 		const groupHeaderText = ComboBox.i18nBundle.getText(LIST_ITEM_GROUP_HEADER);
 
 		if (isGroupItem) {
 			announce(`${groupHeaderText} ${currentItem.text} ${itemPositionText}`, "Polite");
 		} else {
-			announce(`${itemPositionText} ${itemSelectionText}`, "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

@@ -98,6 +98,10 @@ const metadata = {
 		 * If this property is set to true, the Dialog will be draggable by its header.
 		 * <br><br>
 		 * <b>Note:</b> The component can be draggable only in desktop mode.
+		 * <br><br>
+		 * <b>Note:</b> This property overrides the default HTML "draggable" attribute native behavior.
+		 * When "draggable" is set to true, the native browser "draggable"
+		 * behavior is prevented and only the Dialog custom logic ("draggable by its header") works.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @since 1.0.0-rc.9
@@ -142,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
@@ -202,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
  */
@@ -217,6 +221,8 @@ class Dialog extends Popup {
 
 		this._resizeMouseMoveHandler = this._onResizeMouseMove.bind(this);
 		this._resizeMouseUpHandler = this._onResizeMouseUp.bind(this);
+
+		this._dragStartHandler = this._handleDragStart.bind(this);
 	}
 
 	static get metadata() {
@@ -348,11 +354,15 @@ class Dialog extends Popup {
 	onEnterDOM() {
 		super.onEnterDOM();
 		this._attachScreenResizeHandler();
+
+		this.addEventListener("dragstart", this._dragStartHandler);
 	}
 
 	onExitDOM() {
 		super.onExitDOM();
 		this._detachScreenResizeHandler();
+
+		this.removeEventListener("dragstart", this._dragStartHandler);
 	}
 
 	/**
@@ -648,6 +658,12 @@ class Dialog extends Popup {
 		this._detachMouseResizeHandlers();
 	}
 
+	_handleDragStart(event) {
+		if (this.draggable) {
+			event.preventDefault();
+		}
+	}
+
 	_attachMouseResizeHandlers() {
 		this._detachScreenResizeHandler();
 

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/Icon.hbs

@@ -2,7 +2,7 @@
 	class="ui5-icon-root"
 	tabindex="{{tabIndex}}"
 	dir="{{_dir}}"
-	viewBox="0 0 512 512"
+	viewBox="{{viewBox}}"
 	role="{{effectiveAccessibleRole}}"
 	focusable="false"
 	preserveAspectRatio="xMidYMid meet"
@@ -20,6 +20,10 @@
 	{{/if}}
 
 	<g role="presentation">
+		{{#if customSvg}}
+			{{customSvg}}
+		{{/if}}
+
 		{{#each pathData}}
 			<path d="{{this}}"></path>
 		{{/each}}

package/src/Icon.js

@@ -3,8 +3,8 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getIconData, getIconDataSync } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import IconTemplate from "./generated/templates/IconTemplate.lit.js";
-
 // Styles
 import iconCss from "./generated/themes/Icon.css.js";
 
@@ -354,11 +354,18 @@ class Icon extends UI5Element {
 			/* eslint-disable-next-line */
 			return console.warn("Icon name property is required", this);
 		}
+
 		let iconData = getIconDataSync(name);
 		if (!iconData) {
 			iconData = await getIconData(name);
 		}
 
+		this.viewBox = iconData.viewBox || "0 0 512 512";
+		if (iconData.customTemplate) {
+			iconData.pathData = [];
+			this.customSvg = executeTemplate(iconData.customTemplate, this);
+		}
+
 		if (iconData === ICON_NOT_FOUND) {
 			this.invalid = true;
 			/* eslint-disable-next-line */

package/src/Input.hbs

@@ -14,7 +14,7 @@
 			?inner-input-with-icon="{{icon.length}}"
 			?disabled="{{disabled}}"
 			?readonly="{{_readonly}}"
-			.value="{{value}}"
+			.value="{{_innerValue}}"
 			placeholder="{{_placeholder}}"
 			maxlength="{{maxlength}}"
 			role="{{accInfo.input.role}}"