@ui5/webcomponents 1.7.0 → 1.8.0

package/dist/i18n/messagebundle_sl.properties

@@ -169,7 +169,7 @@ SLIDER_ARIA_DESCRIPTION=Ročica drsnika
 
 LOAD_MORE_TEXT=Več
 
-TABLE_HEADER_ROW_TEXT=Vrstica glave
+TABLE_HEADER_ROW_INFORMATION=Vrstica glave 1 od {0}
 
 TABLE_ROW_POSITION={0} od {1}
 
@@ -199,8 +199,6 @@ TIMEPICKER_MINUTES_LABEL=Minute
 
 TIMEPICKER_SECONDS_LABEL=Sekunde
 
-TIMEPICKER_PERIODS_LABEL=AM/PM
-
 TIMEPICKER_SUBMIT_BUTTON=V redu
 
 TIMEPICKER_CANCEL_BUTTON=Prekliči

package/dist/i18n/messagebundle_sv.properties

@@ -169,7 +169,7 @@ SLIDER_ARIA_DESCRIPTION=Skjutreglagehandtag
 
 LOAD_MORE_TEXT=Mer
 
-TABLE_HEADER_ROW_TEXT=Huvud
+TABLE_HEADER_ROW_INFORMATION=Huvudrad 1 av {0}
 
 TABLE_ROW_POSITION={0} av {1}
 
@@ -199,8 +199,6 @@ TIMEPICKER_MINUTES_LABEL=Minuter
 
 TIMEPICKER_SECONDS_LABEL=Sekunder
 
-TIMEPICKER_PERIODS_LABEL=FM/EM
-
 TIMEPICKER_SUBMIT_BUTTON=OK
 
 TIMEPICKER_CANCEL_BUTTON=Avbryt

package/dist/i18n/messagebundle_th.properties

@@ -169,7 +169,7 @@ SLIDER_ARIA_DESCRIPTION=ตัวจัดการแถบเลื่อน
 
 LOAD_MORE_TEXT=เพิ่มเติม
 
-TABLE_HEADER_ROW_TEXT=แถวส่วนหัว
+TABLE_HEADER_ROW_INFORMATION=แถวส่วนหัว 1 จาก {0}
 
 TABLE_ROW_POSITION={0} จาก {1}
 
@@ -199,8 +199,6 @@ TIMEPICKER_MINUTES_LABEL=นาที
 
 TIMEPICKER_SECONDS_LABEL=วินาที
 
-TIMEPICKER_PERIODS_LABEL=AM/PM
-
 TIMEPICKER_SUBMIT_BUTTON=ตกลง
 
 TIMEPICKER_CANCEL_BUTTON=ยกเลิก

package/dist/i18n/messagebundle_tr.properties

@@ -169,7 +169,7 @@ SLIDER_ARIA_DESCRIPTION=Kaydırıcı tutamacı
 
 LOAD_MORE_TEXT=Daha fazla
 
-TABLE_HEADER_ROW_TEXT=Başlık
+TABLE_HEADER_ROW_INFORMATION={0} başlık satırı 1
 
 TABLE_ROW_POSITION={0}/{1}
 
@@ -199,8 +199,6 @@ TIMEPICKER_MINUTES_LABEL=Dakika
 
 TIMEPICKER_SECONDS_LABEL=Saniye
 
-TIMEPICKER_PERIODS_LABEL=AM/PM
-
 TIMEPICKER_SUBMIT_BUTTON=Tamam
 
 TIMEPICKER_CANCEL_BUTTON=İptal et

package/dist/i18n/messagebundle_uk.properties

@@ -169,7 +169,7 @@ SLIDER_ARIA_DESCRIPTION=Маркер повзунка
 
 LOAD_MORE_TEXT=Більше
 
-TABLE_HEADER_ROW_TEXT=Рядок заголовка
+TABLE_HEADER_ROW_INFORMATION=Рядок заголовка 1 з {0}
 
 TABLE_ROW_POSITION={0} з {1}
 
@@ -199,8 +199,6 @@ TIMEPICKER_MINUTES_LABEL=Хвилини
 
 TIMEPICKER_SECONDS_LABEL=Секунди
 
-TIMEPICKER_PERIODS_LABEL=AM/PM
-
 TIMEPICKER_SUBMIT_BUTTON=OK
 
 TIMEPICKER_CANCEL_BUTTON=Скасувати

package/dist/i18n/messagebundle_vi.properties

@@ -169,7 +169,7 @@ SLIDER_ARIA_DESCRIPTION=Điều khiển thanh trượt
 
 LOAD_MORE_TEXT=Thêm
 
-TABLE_HEADER_ROW_TEXT=Hàng tiêu đề
+TABLE_HEADER_ROW_INFORMATION=Hàng tiêu đề 1 trong {0}
 
 TABLE_ROW_POSITION={0} của {1}
 
@@ -199,8 +199,6 @@ TIMEPICKER_MINUTES_LABEL=Phút
 
 TIMEPICKER_SECONDS_LABEL=Giây
 
-TIMEPICKER_PERIODS_LABEL=AM/PM
-
 TIMEPICKER_SUBMIT_BUTTON=OK
 
 TIMEPICKER_CANCEL_BUTTON=Hủy

package/dist/i18n/messagebundle_zh_CN.properties

@@ -169,7 +169,7 @@ SLIDER_ARIA_DESCRIPTION=滑块手柄
 
 LOAD_MORE_TEXT=更多
 
-TABLE_HEADER_ROW_TEXT=抬头行
+TABLE_HEADER_ROW_INFORMATION=抬头行 1 / {0}
 
 TABLE_ROW_POSITION={0} / {1}
 
@@ -199,8 +199,6 @@ TIMEPICKER_MINUTES_LABEL=分钟
 
 TIMEPICKER_SECONDS_LABEL=秒
 
-TIMEPICKER_PERIODS_LABEL=AM/PM
-
 TIMEPICKER_SUBMIT_BUTTON=确定
 
 TIMEPICKER_CANCEL_BUTTON=取消

package/dist/i18n/messagebundle_zh_TW.properties

@@ -169,7 +169,7 @@ SLIDER_ARIA_DESCRIPTION=滑桿控點
 
 LOAD_MORE_TEXT=較多
 
-TABLE_HEADER_ROW_TEXT=表頭列
+TABLE_HEADER_ROW_INFORMATION=表頭列 1/{0}
 
 TABLE_ROW_POSITION={0}/{1}
 
@@ -199,8 +199,6 @@ TIMEPICKER_MINUTES_LABEL=分
 
 TIMEPICKER_SECONDS_LABEL=秒
 
-TIMEPICKER_PERIODS_LABEL=早上/下午
-
 TIMEPICKER_SUBMIT_BUTTON=成功
 
 TIMEPICKER_CANCEL_BUTTON=取消

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -41,13 +41,13 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.7.0",
-    "@ui5/webcomponents-icons": "1.7.0",
-    "@ui5/webcomponents-localization": "1.7.0",
-    "@ui5/webcomponents-theming": "1.7.0"
+    "@ui5/webcomponents-base": "1.8.0",
+    "@ui5/webcomponents-icons": "1.8.0",
+    "@ui5/webcomponents-localization": "1.8.0",
+    "@ui5/webcomponents-theming": "1.8.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.7.0",
-    "chromedriver": "104.0.0"
+    "@ui5/webcomponents-tools": "1.8.0",
+    "chromedriver": "105.0.1"
   }
 }

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";
 
@@ -986,13 +985,12 @@ class ComboBox extends UI5Element {
 		const currentItem = this._filteredItems[indexOfItem];
 		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(`${itemPositionText}`, "Polite");
 		}
 	}
 

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
@@ -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/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}}"

package/src/Input.js

@@ -63,8 +63,6 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 
-const rgxFloat = new RegExp(/(\+|-)?\d+(\.|,)\d+/);
-
 /**
  * @public
  */
@@ -268,6 +266,20 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the inner stored value of the component.
+		 * <br><br>
+		 * <b>Note:</b> The property is updated upon typing. In some special cases the old value is kept (e.g. deleting the value after the dot in a float)
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 */
+		_innerValue: {
+			type: String,
+			noAttribute: true,
+		},
+
 		/**
 		 * Defines the value state of the component.
 		 * <br><br>
@@ -618,9 +630,6 @@ class Input extends UI5Element {
 		// The value that the user is typed in the input
 		this.valueBeforeAutoComplete = "";
 
-		// Indicates, if the user pressed the BACKSPACE key.
-		this._backspaceKeyDown = false;
-
 		// Indicates, if the user is typing. Gets reset once popup is closed
 		this.isTyping = false;
 
@@ -637,6 +646,8 @@ class Input extends UI5Element {
 		this.suggestionsTexts = [];
 
 		this._handleResizeBound = this._handleResize.bind(this);
+
+		this._keepInnerValue = false;
 	}
 
 	onEnterDOM() {
@@ -648,6 +659,10 @@ class Input extends UI5Element {
 	}
 
 	onBeforeRendering() {
+		if (!this._keepInnerValue) {
+			this._innerValue = this.value;
+		}
+
 		if (this.showSuggestions) {
 			this.enableSuggestions();
 			this.suggestionsTexts = this.Suggestions.defaultSlotProperties(this.highlightValue);
@@ -755,7 +770,6 @@ class Input extends UI5Element {
 		}
 
 		if (isBackSpace(event)) {
-			this._backspaceKeyDown = true;
 			this._selectedText = window.getSelection().toString();
 		}
 
@@ -775,7 +789,6 @@ class Input extends UI5Element {
 		}
 
 		this._keyDown = false;
-		this._backspaceKeyDown = false;
 	}
 
 	/* Event handling */
@@ -916,6 +929,8 @@ class Input extends UI5Element {
 		const focusedOutToSuggestions = this.Suggestions && event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.contains(this.Suggestions.responsivePopover);
 		const focusedOutToValueStateMessage = event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.querySelector(".ui5-valuestatemessage-root");
 
+		this._keepInnerValue = false;
+
 		if (this.showClearIcon && !this.effectiveShowClearIcon) {
 			this._clearIconClicked = false;
 			this._handleChange();
@@ -999,47 +1014,59 @@ class Input extends UI5Element {
 		const inputDomRef = this.getInputDOMRefSync();
 		const emptyValueFiredOnNumberInput = this.value && this.isTypeNumber && !inputDomRef.value;
 		const eventType = event.inputType || (event.detail && event.detail.inputType);
-
-		this._shouldAutocomplete = eventType !== "deleteContentBackward" && !this.noTypeahead;
+		this._keepInnerValue = false;
+
+		const allowedEventTypes = [
+			"deleteWordBackward",
+			"deleteWordForward",
+			"deleteSoftLineBackward",
+			"deleteSoftLineForward",
+			"deleteEntireSoftLine",
+			"deleteHardLineBackward",
+			"deleteHardLineForward",
+			"deleteByDrag",
+			"deleteByCut",
+			"deleteContent",
+			"deleteContentBackward",
+			"deleteContentForward",
+			"historyUndo",
+		];
+
+		this._shouldAutocomplete = !allowedEventTypes.includes(eventType) && !this.noTypeahead;
 		this.suggestionSelectionCanceled = false;
 
-		if (emptyValueFiredOnNumberInput && !this._backspaceKeyDown) {
-			// For input with type="Number", if the delimiter is entered second time,
-			// the inner input is firing event with empty value
-			return;
-		}
-
-		if (emptyValueFiredOnNumberInput && this._backspaceKeyDown) {
-			// Issue: when the user removes the character(s) after the delimeter of numeric Input,
-			// the native input is firing event with an empty value and we have to manually handle this case,
-			// otherwise the entire input will be cleared as we sync the "value".
-
-			// There are tree scenarios:
-			// Example: type "123.4" and press BACKSPACE - the native input is firing event with empty value.
-			// Example: type "123.456", select/mark "456" and press BACKSPACE - the native input is firing event with empty value.
-			// Example: type "123.456", select/mark "123.456" and press BACKSPACE - the native input is firing event with empty value,
-			// but this time that's really the case.
-
-			// Perform manual handling in case of floating number
-			// and if the user did not select the entire input value
-			if (this._selectedText.indexOf(",") > -1) {
-				this._selectedText = this._selectedText.replace(",", ".");
-			}
-
-			if (rgxFloat.test(this.value) && this._selectedText !== this.value) {
-				const newValue = this.removeFractionalPart(this.value);
-
-				// update state
-				this.value = newValue;
-				this.highlightValue = newValue;
-				this.valueBeforeItemPreview = newValue;
-
-				// fire events
-				this.fireEvent(this.EVENT_INPUT, { inputType: event.inputType });
-				this.fireEvent("value-changed");
-				return;
-			}
+		// ---- Special cases of numeric Input ----
+		// ---------------- Start -----------------
+
+		// When the last character after the delimiter is removed.
+		// In such cases, we want to skip the re-rendering of the
+		// component as this leads to cursor repositioning and causes user experience issues.
+
+		// There are few scenarios:
+		// Example: type "123.4" and press BACKSPACE - the native input is firing event with the whole part as value (123).
+		// Pressing BACKSPACE again will remove the delimiter and the native input will fire event with the whole part as value again (123).
+		// Example: type "123.456", select/mark "456" and press BACKSPACE - the native input is firing event with the whole part as value (123).
+		// Example: type "123.456", select/mark "123.456" and press BACKSPACE - the native input is firing event with empty value.
+		const delimiterCase = this.isTypeNumber
+			&& (event.inputType === "deleteContentForward" || event.inputType === "deleteContentBackward")
+			&& !event.target.value.includes(".")
+			&& this.value.includes(".");
+
+		// Handle special numeric notation with "e", example "12.5e12"
+		const eNotationCase = emptyValueFiredOnNumberInput && event.data === "e";
+
+		// Handle special numeric notation with "-", example "-3"
+		// When pressing BACKSPACE, the native input fires event with empty value
+		const minusRemovalCase = emptyValueFiredOnNumberInput
+			&& this.value.startsWith("-")
+			&& this.value.length === 2
+			&& (event.inputType === "deleteContentForward" || event.inputType === "deleteContentBackward");
+
+		if (delimiterCase || eNotationCase || minusRemovalCase) {
+			this.value = event.target.value;
+			this._keepInnerValue = true;
 		}
+		// ----------------- End ------------------
 
 		if (event.target === inputDomRef) {
 			this.focused = true;
@@ -1086,6 +1113,7 @@ class Input extends UI5Element {
 		const innerInput = this.getInputDOMRefSync();
 
 		filterValue = filterValue || "";
+		this._innerValue = value;
 		this.value = value;
 
 		innerInput.value = value;
@@ -1249,8 +1277,6 @@ class Input extends UI5Element {
 	}
 
 	async fireEventByAction(action, event) {
-		await this.getInputDOMRef();
-
 		if (this.disabled || this.readonly) {
 			return;
 		}

package/src/Menu.hbs

@@ -56,9 +56,10 @@
 				.associatedItem="{{this.item}}"
 				class="ui5-menu-item"
 				id="{{../_id}}-menu-item-{{@index}}"
-				icon="{{this.item.icon}}"
+				.icon="{{this.item.icon}}"
 				accessible-name={{this.item.ariaLabelledByText}}
 				accessible-role="menuitem"
+				.additionalText="{{this.item._additionalText}}"
 				._ariaHasPopup={{this.ariaHasPopup}}
 				?disabled={{this.item.disabled}}
 				?starts-section={{this.item.startsSection}}

package/src/MenuItem.js

@@ -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.
@@ -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/src/MultiComboBox.hbs

@@ -53,6 +53,7 @@
 		aria-describedby="{{ariaDescribedByText}}"
 		aria-required="{{required}}"
 		aria-label="{{ariaLabelText}}"
+		data-sap-focus-ref
 	/>
 
 	{{#if icon}}

package/src/MultiComboBox.js

@@ -1082,7 +1082,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/src/MultiInput.js

@@ -146,6 +146,11 @@ class MultiInput extends Input {
 			return;
 		}
 
+		if (focusedToken) {
+			this.fireEvent("token-delete", { token: focusedToken });
+			return;
+		}
+
 		if (selectedTokens.indexOf(focusedToken) === -1) {
 			selectedTokens.push(focusedToken);
 		}

package/src/RadioButton.js

@@ -323,12 +323,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

package/src/Tab.js

@@ -337,6 +337,10 @@ class Tab extends UI5Element {
 			labels.push(`${this._id}-icon`);
 		}
 
+		if (this._designDescription) {
+			labels.push(`${this._id}-designDescription`);
+		}
+
 		return labels.join(" ");
 	}
 
@@ -395,6 +399,14 @@ class Tab extends UI5Element {
 		}
 	}
 
+	get _designDescription() {
+		if (this.design === SemanticColor.Default) {
+			return null;
+		}
+
+		return this.design;
+	}
+
 	get semanticIconClasses() {
 		const classes = ["ui5-tab-semantic-icon"];