@ui5/webcomponents 0.0.0-e818f286e → 0.0.0-ee3bbe46b

package/dist/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";
@@ -63,8 +62,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
  */
@@ -72,12 +69,12 @@ const metadata = {
 	tag: "ui5-input",
 	languageAware: true,
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Input.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Input.prototype */ {
 
 		/**
 		 * Defines the icon to be displayed in the component.
 		 *
-		 * @type {sap.ui.webcomponents.main.IIcon[]}
+		 * @type {sap.ui.webc.main.IIcon[]}
 		 * @slot
 		 * @public
 		 */
@@ -115,7 +112,7 @@ const metadata = {
 		 * <br>
 		 * automatically imports the <code>&lt;ui5-suggestion-item></code> and <code>&lt;ui5-suggestion-group-item></code> for your convenience.
 		 *
-		 * @type {sap.ui.webcomponents.main.IInputSuggestionItem[]}
+		 * @type {sap.ui.webc.main.IInputSuggestionItem[]}
 		 * @slot suggestionItems
 		 * @public
 		 */
@@ -154,7 +151,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.main.Input.prototype */  {
+	properties: /** @lends sap.ui.webc.main.Input.prototype */  {
 
 		/**
 		 * Defines whether the component is in disabled state.
@@ -246,7 +243,7 @@ const metadata = {
 		 * that use different soft keyboard layouts depending on the given input type.</li>
 		 * </ul>
 		 *
-		 * @type {InputType}
+		 * @type {sap.ui.webc.main.types.InputType}
 		 * @defaultvalue "Text"
 		 * @public
 		 */
@@ -262,12 +259,28 @@ const metadata = {
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		value: {
 			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>
@@ -280,7 +293,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -326,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.webc.base.types.Integer}
 		 * @since 1.0.0-rc.5
 		 * @public
 		 */
@@ -443,7 +456,7 @@ const metadata = {
 			noAttribute: true,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.Input.prototype */ {
+	events: /** @lends sap.ui.webc.main.Input.prototype */ {
 		/**
 		 * Fired when the input operation has finished by pressing Enter or on focusout.
 		 *
@@ -464,7 +477,7 @@ const metadata = {
 		/**
 		 * Fired when a suggestion item, that is displayed in the suggestion popup, is selected.
 		 *
-		 * @event sap.ui.webcomponents.main.Input#suggestion-item-select
+		 * @event sap.ui.webc.main.Input#suggestion-item-select
 		 * @param {HTMLElement} item The selected item.
 		 * @public
 		 */
@@ -478,7 +491,7 @@ const metadata = {
 		 * Fired when the user navigates to a suggestion item via the ARROW keys,
 		 * as a preview, before the final selection.
 		 *
-		 * @event sap.ui.webcomponents.main.Input#suggestion-item-preview
+		 * @event sap.ui.webc.main.Input#suggestion-item-preview
 		 * @param {HTMLElement} item The previewed suggestion item.
 		 * @param {HTMLElement} targetRef The DOM ref of the suggestion item.
 		 * @public
@@ -494,7 +507,7 @@ const metadata = {
 		/**
 		 * Fired when the user scrolls the suggestion popover.
 		 *
-		 * @event sap.ui.webcomponents.main.Input#suggestion-scroll
+		 * @event sap.ui.webc.main.Input#suggestion-scroll
 		 * @param {Integer} scrollTop The current scroll position.
 		 * @param {HTMLElement} scrollContainer The scroll container.
 		 * @protected
@@ -552,11 +565,11 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Input
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.Input
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-input
  * @appenddocs SuggestionItem SuggestionGroupItem
- * @implements sap.ui.webcomponents.main.IInput
+ * @implements sap.ui.webc.main.IInput
  * @public
  */
 class Input extends UI5Element {
@@ -603,9 +616,6 @@ class Input extends UI5Element {
 		// Indicates if the user selection has been canceled with [ESC].
 		this.suggestionSelectionCanceled = false;
 
-		// Indicates if the change event has already been fired
-		this._changeFiredValue = null;
-
 		// tracks the value between focus in and focus out to detect that change event should be fired.
 		this.previousValue = undefined;
 
@@ -621,9 +631,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;
 
@@ -640,6 +647,8 @@ class Input extends UI5Element {
 		this.suggestionsTexts = [];
 
 		this._handleResizeBound = this._handleResize.bind(this);
+
+		this._keepInnerValue = false;
 	}
 
 	onEnterDOM() {
@@ -651,6 +660,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);
@@ -758,7 +771,6 @@ class Input extends UI5Element {
 		}
 
 		if (isBackSpace(event)) {
-			this._backspaceKeyDown = true;
 			this._selectedText = window.getSelection().toString();
 		}
 
@@ -771,8 +783,13 @@ class Input extends UI5Element {
 	}
 
 	_onkeyup(event) {
+		// The native Delete event does not update the value property "on time".
+		// So, the (native) change event is always fired with the old value
+		if (isDelete(event)) {
+			this.value = event.target.value;
+		}
+
 		this._keyDown = false;
-		this._backspaceKeyDown = false;
 	}
 
 	/* Event handling */
@@ -823,7 +840,6 @@ class Input extends UI5Element {
 		}
 
 		if (!itemPressed) {
-			this.fireEventByAction(this.ACTION_ENTER, event);
 			this.lastConfirmedValue = this.value;
 
 			if (this.FormSupport) {
@@ -914,6 +930,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();
@@ -967,8 +985,8 @@ class Input extends UI5Element {
 			return;
 		}
 
-		if (this._changeFiredValue !== this.getInputDOMRefSync().value) {
-			this._changeFiredValue = this.getInputDOMRefSync().value;
+		if (this.previousValue !== this.getInputDOMRefSync().value) {
+			this.previousValue = this.getInputDOMRefSync().value;
 			this.fireEvent(this.EVENT_CHANGE);
 		}
 	}
@@ -996,48 +1014,60 @@ class Input extends UI5Element {
 	_handleInput(event) {
 		const inputDomRef = this.getInputDOMRefSync();
 		const emptyValueFiredOnNumberInput = this.value && this.isTypeNumber && !inputDomRef.value;
-		const eventType = event.inputType || event.detail.inputType;
-
-		this._shouldAutocomplete = eventType !== "deleteContentBackward" && !this.noTypeahead;
+		const eventType = event.inputType || (event.detail && event.detail.inputType);
+		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;
-		}
+		// ---- Special cases of numeric Input ----
+		// ---------------- Start -----------------
 
-		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".
+		// 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 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(",", ".");
-			}
+		// 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(".");
 
-			if (rgxFloat.test(this.value) && this._selectedText !== this.value) {
-				const newValue = this.removeFractionalPart(this.value);
+		// Handle special numeric notation with "e", example "12.5e12"
+		const eNotationCase = emptyValueFiredOnNumberInput && event.data === "e";
 
-				// update state
-				this.value = newValue;
-				this.highlightValue = newValue;
-				this.valueBeforeItemPreview = newValue;
+		// 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");
 
-				// fire events
-				this.fireEvent(this.EVENT_INPUT, { inputType: event.inputType });
-				this.fireEvent("value-changed");
-				return;
-			}
+		if (delimiterCase || eNotationCase || minusRemovalCase) {
+			this.value = event.target.value;
+			this._keepInnerValue = true;
 		}
+		// ----------------- End ------------------
 
 		if (event.target === inputDomRef) {
 			this.focused = true;
@@ -1084,6 +1114,7 @@ class Input extends UI5Element {
 		const innerInput = this.getInputDOMRefSync();
 
 		filterValue = filterValue || "";
+		this._innerValue = value;
 		this.value = value;
 
 		innerInput.value = value;
@@ -1183,9 +1214,11 @@ class Input extends UI5Element {
 			return;
 		}
 
+		const innerInput = this.getInputDOMRefSync();
+		const value = this.valueBeforeAutoComplete || this.value;
 		const itemText = item.text || item.textContent; // keep textContent for compatibility
 		const fireInput = keyboardUsed
-			? this.valueBeforeItemSelection !== itemText : this.valueBeforeAutoComplete !== itemText;
+			? this.valueBeforeItemSelection !== itemText : value !== itemText;
 
 		this.hasSuggestionItemSelected = true;
 
@@ -1196,6 +1229,7 @@ class Input extends UI5Element {
 			this.getInputDOMRefSync().value = itemText;
 			this.fireEvent(this.EVENT_INPUT);
 			this._handleChange();
+			innerInput.setSelectionRange(this.value.length, this.value.length);
 		}
 
 		this.valueBeforeItemPreview = "";
@@ -1231,7 +1265,7 @@ class Input extends UI5Element {
 
 	/**
 	 * The suggestion item on preview.
-	 * @type { sap.ui.webcomponents.main.IInputSuggestionItem }
+	 * @type {sap.ui.webc.main.IInputSuggestionItem}
 	 * @readonly
 	 * @public
 	 */
@@ -1244,8 +1278,6 @@ class Input extends UI5Element {
 	}
 
 	async fireEventByAction(action, event) {
-		await this.getInputDOMRef();
-
 		if (this.disabled || this.readonly) {
 			return;
 		}
@@ -1253,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
@@ -1449,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/dist/Interfaces.d.ts

@@ -0,0 +1,161 @@
+/**
+ * Interface for components that represent an avatar and may be slotted in numerous higher-order components such as <code>ui5-avatar-group</code>
+ *
+ * @name sap.ui.webc.main.IAvatar
+ * @interface
+ * @public
+ */
+declare const IAvatar = "sap.ui.webc.main.IAvatar";
+/**
+ * Interface for components that may be slotted inside <code>ui5-breadcrumbs</code> as options
+ *
+ * @name sap.ui.webc.main.IBreadcrumbsItem
+ * @interface
+ * @public
+ */
+declare const IBreadcrumbsItem = "sap.ui.webc.main.IBreadcrumbsItem";
+/**
+ * Interface for components that may be used as a button inside numerous higher-order components
+ *
+ * @name sap.ui.webc.main.IButton
+ * @interface
+ * @public
+ */
+declare const IButton = "sap.ui.webc.main.IButton";
+/**
+ * Interface for components that may be used as dates inside <code>ui5-calendar</code>
+ *
+ * @name sap.ui.webc.main.ICalendarDate
+ * @interface
+ * @public
+ */
+declare const ICalendarDate = "sap.ui.webc.main.ICalendarDate";
+/**
+ * Interface for components that may be slotted inside a <code>ui5-combobox</code>
+ *
+ * @name sap.ui.webc.main.IComboBoxItem
+ * @interface
+ * @public
+ */
+declare const IComboBoxItem = "sap.ui.webc.main.IComboBoxItem";
+/**
+ * Interface for components that may be used inside a <code>ui5-color-palette</code> or <code>ui5-color-palette-popover</code>
+ *
+ * @name sap.ui.webc.main.IColorPaletteItem
+ * @interface
+ * @public
+ */
+declare const IColorPaletteItem = "sap.ui.webc.main.IColorPaletteItem";
+/**
+ * Interface for components that represent an icon, usable in numerous higher-order components
+ *
+ * @name sap.ui.webc.main.IIcon
+ * @interface
+ * @public
+ */
+declare const IIcon = "sap.ui.webc.main.IIcon";
+/**
+ * Interface for components that represent an input, usable in numerous higher-order components
+ *
+ * @name sap.ui.webc.main.IInput
+ * @interface
+ * @public
+ */
+declare const IInput = "sap.ui.webc.main.IInput";
+/**
+ * Interface for components that represent a suggestion item, usable in <code>ui5-input</code>
+ *
+ * @name sap.ui.webc.main.IInputSuggestionItem
+ * @interface
+ * @public
+ */
+declare const IInputSuggestionItem = "sap.ui.webc.main.IInputSuggestionItem";
+/**
+ * Interface for components that may be slotted inside a <code>ui5-list</code> as items
+ *
+ * @name sap.ui.webc.main.IListItem
+ * @interface
+ * @public
+ */
+declare const IListItem = "sap.ui.webc.main.IListItem";
+/**
+ * Interface for components that may be slotted inside <code>ui5-menu</code> as items
+ *
+ * @name sap.ui.webc.main.IMenuItem
+ * @interface
+ * @public
+ */
+declare const IMenuItem = "sap.ui.webc.main.IMenuItem";
+/**
+ * Interface for components that may be slotted inside a <code>ui5-multi-combobox</code> as items
+ *
+ * @name sap.ui.webc.main.IMultiComboBoxItem
+ * @interface
+ * @public
+ */
+declare const IMultiComboBoxItem = "sap.ui.webc.main.IMultiComboBoxItem";
+/**
+ * Interface for components that may be slotted inside <code>ui5-segmented-button</code> as items
+ *
+ * @name sap.ui.webc.main.ISegmentedButtonItem
+ * @interface
+ * @public
+ */
+declare const ISegmentedButtonItem = "sap.ui.webc.main.ISegmentedButtonItem";
+/**
+ * Interface for components that may be slotted inside <code>ui5-select</code> as options
+ *
+ * @name sap.ui.webc.main.ISelectOption
+ * @interface
+ * @public
+ */
+declare const ISelectOption = "sap.ui.webc.main.ISelectOption";
+/**
+ * Interface for components that may be slotted inside <code>ui5-tabcontainer</code>
+ *
+ * @name sap.ui.webc.main.ITab
+ * @interface
+ * @public
+ */
+declare const ITab = "sap.ui.webc.main.ITab";
+/**
+ * Interface for components that may be slotted inside a <code>ui5-table</code> as rows
+ *
+ * @name sap.ui.webc.main.ITableRow
+ * @interface
+ * @public
+ */
+declare const ITableRow = "sap.ui.webc.main.ITableRow";
+/**
+ * Interface for components that may be slotted inside a <code>ui5-table</code> as columns
+ *
+ * @name sap.ui.webc.main.ITableColumn
+ * @interface
+ * @public
+ */
+declare const ITableColumn = "sap.ui.webc.main.ITableColumn";
+/**
+ * Interface for components that may be slotted inside a <code>ui5-table-row</code> as cells
+ *
+ * @name sap.ui.webc.main.ITableCell
+ * @interface
+ * @public
+ */
+declare const ITableCell = "sap.ui.webc.main.ITableCell";
+/**
+ * Interface for components that represent a token and are usable in components such as <code>ui5-multi-input</code>
+ *
+ * @name sap.ui.webc.main.IToken
+ * @interface
+ * @public
+ */
+declare const IToken = "sap.ui.webc.main.IToken";
+/**
+ * Interface for tree items for the purpose of <code>ui5-tree</code>
+ *
+ * @name sap.ui.webc.main.ITreeItem
+ * @interface
+ * @public
+ */
+declare const ITreeItem = "sap.ui.webc.main.ITreeItem";
+export { IAvatar, IBreadcrumbsItem, IButton, ICalendarDate, IColorPaletteItem, IComboBoxItem, IIcon, IInput, IInputSuggestionItem, IListItem, IMenuItem, IMultiComboBoxItem, ISegmentedButtonItem, ISelectOption, ITab, ITableCell, ITableColumn, ITableRow, IToken, ITreeItem, };