@openui5/sap.m 1.93.1 → 1.96.0

package/src/sap/m/Input.js

@@ -159,7 +159,7 @@ function(
 	 *
 	 * @extends sap.m.InputBase
 	 * @author SAP SE
-	 * @version 1.93.1
+	 * @version 1.96.0
 	 *
 	 * @constructor
 	 * @public
@@ -315,7 +315,20 @@ function(
 			 * <b>Note:</b> The autocomplete feature is disabled on Android devices due to a OS specific issue.
 			 * @since 1.61
 			 */
-			autocomplete: {type: "boolean", group: "Behavior", defaultValue: true}
+			autocomplete: {type: "boolean", group: "Behavior", defaultValue: true},
+
+			/**
+			 * Specifies whether clear icon is shown.
+			 * Pressing the icon will clear input's value and fire the change and liveChange events.
+			 * @since 1.94
+			 */
+			showClearIcon: { type: "boolean", defaultValue: false },
+
+			/**
+			 * Specifies whether the clear icon should be shown/hidden on user interaction.
+			 * @private
+			 */
+			effectiveShowClearIcon: { type: "boolean", defaultValue: false, visibility: "hidden" }
 		},
 		defaultAggregation : "suggestionItems",
 		aggregations : {
@@ -568,6 +581,15 @@ function(
 		// phase of the life cycle. Without this line, initially the condition fails and fires liveChange event
 		// even though there is no user input (check Input.prototype.onsapright).
 		this._setTypedInValue("");
+
+
+		// indicates whether input is clicked (on mobile) or the clear button
+		// used for identifying whether dialog should be open.
+		this._bClearButtonPressed = false;
+
+		// indicates whether input's popover has finished opening
+		// we asume that after open its content has been rendered => we don't have the power user scenario
+		this._bAfterOpenFinisihed = false;
 	};
 
 	/**
@@ -608,10 +630,9 @@ function(
 	 */
 	Input.prototype.onBeforeRendering = function() {
 		var sSelectedKey = this.getSelectedKey(),
-			bShowIcon = this.getShowValueHelp() && this.getEnabled() && this.getEditable(),
-			aEndIcons = this.getAggregation("_endIcon") || [],
-
-			oIcon = aEndIcons[0],
+			bShowValueHelpIcon = this.getShowValueHelp() && this.getEnabled() && this.getEditable(),
+			bShowClearIcon = this.getProperty("effectiveShowClearIcon") && this.getEnabled() && this.getEditable(),
+			oIcon = this._oValueHelpIcon,
 			oSuggestionsPopover = this._getSuggestionsPopover(),
 			bSuggestionsPopoverIsOpen = oSuggestionsPopover && this._isSuggestionsPopoverOpen(),
 			oPopupInput = oSuggestionsPopover && oSuggestionsPopover.getInput(),
@@ -620,9 +641,15 @@ function(
 
 		InputBase.prototype.onBeforeRendering.call(this);
 
+		if (this.getShowClearIcon()) {
+			this._getClearIcon().setProperty("visible", bShowClearIcon);
+		} else if (this._oClearButton) {
+			this._getClearIcon().setProperty("visible", false);
+		}
+
 		this._deregisterEvents();
 
-		if (sSelectedKey) {
+		if (sSelectedKey && !this.getSelectedItem() && this.getSuggestionItemByKey(sSelectedKey)) {
 			this.setSelectedKey(sSelectedKey);
 		}
 
@@ -639,7 +666,7 @@ function(
 			}
 		}
 
-		if (bShowIcon) {
+		if (bShowValueHelpIcon) {
 			// ensure the creation of an icon
 			oIcon = this._getValueHelpIcon();
 			oIcon.setProperty("visible", true, true);
@@ -1044,13 +1071,11 @@ function(
 	 */
 	Input.prototype._getValueHelpIcon = function () {
 		var that = this,
-			aEndIcons = this.getAggregation("_endIcon") || [],
-			sIconSrc = this.getValueHelpIconSrc(),
-			oValueStateIcon = aEndIcons[0];
+			sIconSrc = this.getValueHelpIconSrc();
 
 		// for backward compatibility - leave this method to return the instance
-		if (!oValueStateIcon) {
-			oValueStateIcon = this.addEndIcon({
+		if (!this._oValueHelpIcon) {
+			this._oValueHelpIcon = this.addEndIcon({
 				id: this.getId() + "-vhi",
 				src: sIconSrc,
 				useIconTooltip: false,
@@ -1079,13 +1104,53 @@ function(
 					}
 				}
 			});
-		} else if (oValueStateIcon.getSrc() !== sIconSrc) {
-			oValueStateIcon.setSrc(sIconSrc);
+		} else if (this._oValueHelpIcon.getSrc() !== sIconSrc) {
+			this._oValueHelpIcon.setSrc(sIconSrc);
 		}
 
-		return oValueStateIcon;
+		return this._oValueHelpIcon;
 	};
 
+	Input.prototype._getClearIcon = function () {
+		var that = this;
+
+		if (this._oClearButton) {
+			return this._oClearButton;
+		}
+
+		this._oClearButton = this.addEndIcon({
+			src: IconPool.getIconURI("decline"),
+			noTabStop: true,
+			visible: false,
+			alt: this._oRb.getText("INPUT_CLEAR_ICON_ALT"),
+			useIconTooltip: false,
+			decorative: false,
+			press: function () {
+				if (that.getValue() !== "") {
+					that.fireChange({
+						value: ""
+					});
+
+					that.fireLiveChange({
+						value: ""
+					});
+
+					that.setValue("");
+
+					that._bClearButtonPressed = true;
+
+					setTimeout(function() {
+						if (Device.system.desktop) {
+							that.focus();
+							that._closeSuggestionPopup();
+						}
+					}, 0);
+				}
+			}
+		}, 0);
+
+		return this._oClearButton;
+	};
 	/**
 	 * Fire valueHelpRequest event.
 	 *
@@ -1140,9 +1205,12 @@ function(
 			 && this.getEditable()
 			 && this.getEnabled()
 			 && this.getShowSuggestion()
+			 && (!this._bClearButtonPressed)
 			 && oEvent.target.id !== this.getId() + "-vhi") {
 				this._openSuggestionsPopover();
 		}
+
+		this._bClearButtonPressed = false;
 	};
 
 	/**
@@ -1399,7 +1467,7 @@ function(
 		// There's no typeahead for mobile devices.
 		// If the popup has been focused, then the list would take care of that functionality.
 		// There should be a matching item (proposed text in order to continue)
-		if (!this.isMobileDevice() && this._sProposedItemText) {
+		if (!this.isMobileDevice() && this._sProposedItemText && !this._bAfterOpenFinisihed) {
 			// Update selections for poweruser
 			var oSelectedItem = this.getSuggestionItems()
 				.filter(function (oItem) {
@@ -1588,7 +1656,7 @@ function(
 			// when compose a non ASCII character, in Chrome the value is updated in the next browser tick cycle
 			setTimeout(function () {
 				var sNewValue = this.getDOMValue() || '';
-				if (sNewValue < this.getStartSuggestion()) {
+				if (sNewValue.length < this.getStartSuggestion()) {
 					this._closeSuggestionPopup();
 				}
 			}.bind(this), 0);
@@ -1636,7 +1704,7 @@ function(
 	 * @param {jQuery.Event} oEvent The event.
 	 */
 	Input.prototype.onchange = function (oEvent) {
-		if (this.getShowValueHelp() || this.getShowSuggestion()) {
+		if (this.getShowValueHelp() || this.getShowSuggestion() || this.getProperty("effectiveShowClearIcon")) {
 			// can not handle browser change if value help or suggestions is enabled
 			// because change is fired before the value help is opened or when a link in suggestions is clicked
 			return;
@@ -1701,6 +1769,18 @@ function(
 		this._bDoTypeAhead = !Device.os.android && this.getAutocomplete() && (oEvent.which !== KeyCodes.BACKSPACE) && (oEvent.which !== KeyCodes.DELETE);
 	};
 
+	Input.prototype.onkeyup = function (oEvent) {
+		var sValue = this.getValue();
+		var sLastValue = this.getLastValue();
+
+		if ([KeyCodes.BACKSPACE, KeyCodes.DELETE].indexOf(oEvent.which) !== -1 && !sValue) {
+			this.setSelectedKey(null);
+			(sLastValue !== sValue) && this.setLastValue(sLastValue);
+		}
+
+		this.getShowClearIcon() && this.setProperty("effectiveShowClearIcon", !!sValue);
+	};
+
 	/**
 	 * Gets the input value.
 	 *
@@ -2325,6 +2405,9 @@ function(
 		InputBase.prototype.setValue.call(this, sValue);
 		this._onValueUpdated(sValue);
 		this._setTypedInValue("");
+
+		this.setProperty("effectiveShowClearIcon", !!sValue);
+
 		return this;
 	};
 
@@ -2716,10 +2799,8 @@ function(
 				bPreviosFocusOnGroup = oPreviousItem && oPreviousItem.isA("sap.m.GroupHeaderListItem"),
 				iSelectionStart = calculateSelectionStart(selectionRange(oFocusDomRef, bPreviosFocusOnGroup), sNewValue, sTypedValue, bPreviosFocusOnGroup);
 
-			if (!oItem) { // When out of the list, reset to user's input
+			if (!oItem || bIsGroupItem) { // When out of the list or a GroupHeader item, reset to user's input
 				this.setDOMValue(sTypedValue);
-			} else if (bIsGroupItem) { // If it's a GroupHeader item, reset the input
-				this.setDOMValue("");
 			} else { // Replace the value and highlight it
 				this.setDOMValue(sNewValue);
 
@@ -2809,15 +2890,21 @@ function(
 				.attachBeforeOpen(function() {
 					var oSuggestionsInput = oSuggPopover.getInput();
 					// set the same placeholder and maxLength as the original input
-					oSuggestionsInput.setPlaceholder(this.getPlaceholder());
-					oSuggestionsInput.setMaxLength(this.getMaxLength());
-					oSuggestionsInput.setValue(this.getValue());
+					["placeholder",
+						"maxLength",
+						"value",
+						"showClearIcon",
+						"effectiveShowClearIcon"
+					].forEach(function(sPropName) {
+							oSuggestionsInput.setProperty(sPropName, this.getProperty(sPropName));
+						}, this);
 				}, this);
 		} else {
 			oPopover
 				.attachAfterClose(function() {
-					var oList = this._getSuggestionsPopover().getItemsContainer(),
-						oSelectedItem = oList && oList.getSelectedItem();
+					var oList = this._getSuggestionsPopover().getItemsContainer();
+					var oSelectedItem = oList && oList.getSelectedItem();
+					var oDomRef = this.getDomRef();
 
 					if (this.getSelectionUpdatedFromList()) {
 						this.updateSelectionFromList(oSelectedItem);
@@ -2827,6 +2914,8 @@ function(
 						return;
 					}
 
+					this._bAfterOpenFinisihed = false;
+
 					// only destroy items in simple suggestion mode
 					if (oList instanceof Table) {
 						oSelectedItem && oSelectedItem.removeStyleClass("sapMLIBFocused");
@@ -2836,13 +2925,20 @@ function(
 					}
 
 					this._deregisterPopupResize();
-					this.addStyleClass("sapMFocus");
+
+					if (oDomRef && oDomRef.contains(document.activeElement)) {
+						this.addStyleClass("sapMFocus");
+					}
 				}, this)
 				.attachBeforeOpen(function () {
 					oSuggPopover._sPopoverContentWidth = this.getMaxSuggestionWidth();
 
 					oSuggPopover.resizePopup(this);
 					this._registerPopupResize();
+					this._bAfterOpenFinisihed = false;
+				}, this)
+				.attachAfterOpen(function () {
+					this._bAfterOpenFinisihed = true;
 				}, this);
 		}
 

package/src/sap/m/InputBase.js

@@ -62,7 +62,7 @@ function(
 	 * @implements sap.ui.core.IFormContent
 	 *
 	 * @author SAP SE
-	 * @version 1.93.1
+	 * @version 1.96.0
 	 *
 	 * @constructor
 	 * @public
@@ -514,7 +514,7 @@ function(
 		mParameters = mParameters || this.getChangeEventParams();
 
 		// check the control is editable or not
-		if (!this.getEditable() || !this.getEnabled()) {
+		if (this.getDomRef() && (!this.getEditable() || !this.getEnabled())) {
 			return;
 		}
 
@@ -1016,12 +1016,14 @@ function(
 		var oEndIcon = this.getAggregation("_endIcon") || [],
 			oBeginIcon = this.getAggregation("_beginIcon") || [],
 			aIcons = oEndIcon.concat(oBeginIcon),
+			iIconMargin,
 			iIconWidth;
 
 		return aIcons.reduce(function(iAcc, oIcon){
+			iIconMargin = oIcon && oIcon.getDomRef() ? parseFloat(window.getComputedStyle(oIcon.getDomRef()).marginRight) : 0;
 			iIconWidth = oIcon && oIcon.getDomRef() ? oIcon.getDomRef().offsetWidth : 0;
 
-			return iAcc + iIconWidth;
+			return iAcc + iIconWidth + iIconMargin;
 		}, 0);
 	};
 
@@ -1091,17 +1093,23 @@ function(
 	 * Adds an icon to be rendered
 	 * @param {string} sIconPosition a position for the icon to be rendered - begin or end
 	 * @param {object} oIconSettings settings for creating an icon
+	 * @param {int} iPosition position to be inserted in the aggregation
 	 * @see sap.ui.core.IconPool.createControlByURI
 	 * @private
 	 * @returns {null|sap.ui.core.Icon}
 	 */
-	InputBase.prototype._addIcon = function (sIconPosition, oIconSettings) {
+	InputBase.prototype._addIcon = function (sIconPosition, oIconSettings, iPosition) {
 		if (["begin", "end"].indexOf(sIconPosition) === -1) {
 			log.error('icon position is not "begin", neither "end", please check again the passed setting');
 			return null;
 		}
 		var oIcon = IconPool.createControlByURI(oIconSettings).addStyleClass(InputBase.ICON_CSS_CLASS);
-		this.addAggregation("_" + sIconPosition + "Icon", oIcon);
+
+		if (iPosition !== undefined) {
+			this.insertAggregation("_" + sIconPosition + "Icon", oIcon, iPosition);
+		} else {
+			this.addAggregation("_" + sIconPosition + "Icon", oIcon);
+		}
 
 		return oIcon;
 	};
@@ -1120,12 +1128,13 @@ function(
 	/**
 	 * Adds an icon to the end of the input
 	 * @param {object} oIconSettings settings for creating an icon
+	 * @param {int} iPosition position to be inserted in the aggregation. If not provided, the icon gets inserted on last position.
 	 * @see sap.ui.core.IconPool.createControlByURI
 	 * @protected
 	 * @returns {null|sap.ui.core.Icon}
 	 */
-	InputBase.prototype.addEndIcon = function (oIconSettings) {
-		return this._addIcon("end", oIconSettings);
+	InputBase.prototype.addEndIcon = function (oIconSettings, iPosition) {
+		return this._addIcon("end", oIconSettings, iPosition);
 	};
 
 	// do not cache jQuery object and define _$input for compatibility reasons

package/src/sap/m/InputListItem.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @extends sap.m.ListItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.93.1
+	 * @version 1.96.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/Label.js

@@ -76,7 +76,7 @@ function(
 	 * @implements sap.ui.core.Label, sap.ui.core.IShrinkable
 	 *
 	 * @author SAP SE
-	 * @version 1.93.1
+	 * @version 1.96.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/LightBox.js

@@ -99,7 +99,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.93.1
+	 * @version 1.96.0
 	 *
 	 * @constructor
 	 * @public
@@ -253,7 +253,7 @@ sap.ui.define([
 	 * Invalidates the LightBox.
 	 *
 	 * @public
-	 * @param {object} oOrigin Origin of the invalidation.
+	 * @param {sap.ui.base.ManagedObject} oOrigin Origin of the invalidation.
 	 * @returns {this} this LightBox reference for chaining.
 	 */
 	LightBox.prototype.invalidate = function (oOrigin) {

package/src/sap/m/LightBoxItem.js

@@ -43,7 +43,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.93.1
+	 * @version 1.96.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/Link.js

@@ -81,7 +81,7 @@ function(
 	 * @implements sap.ui.core.IShrinkable, sap.ui.core.IFormContent, sap.ui.core.ITitleContent
 	 *
 	 * @author SAP SE
-	 * @version 1.93.1
+	 * @version 1.96.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/List.js

@@ -30,7 +30,7 @@ sap.ui.define(["./library", "./ListBase", "./ListRenderer"],
 	 * @extends sap.m.ListBase
 	 *
 	 * @author SAP SE
-	 * @version 1.93.1
+	 * @version 1.96.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/ListBase.js

@@ -90,7 +90,7 @@ function(
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.93.1
+	 * @version 1.96.0
 	 *
 	 * @constructor
 	 * @public
@@ -1206,6 +1206,13 @@ function(
 		return this.getDomRef("listUl");
 	};
 
+	/*
+	 *  This hook method is called if a sticky header is activated and additional height needs to be added in the  calculation of the scrolling position.
+	 * @protected
+	 */
+	ListBase.prototype.getStickyFocusOffset = function() {
+		return 0;
+	};
 
 	ListBase.prototype.checkGrowingFromScratch = function() {};
 
@@ -1581,7 +1588,7 @@ function(
 
 		if (!this._mRangeSelection) {
 			this._mRangeSelection = {
-				index: aVisibleItems.indexOf(oItem),
+				index: this.indexOfItem(oItem),
 				selected: oItem.getSelected()
 			};
 		}
@@ -2587,7 +2594,8 @@ function(
 			iInfoTBarContainerRectHeight = 0,
 			iInfoTBarContainerRectBottom = 0,
 			iHeaderToolbarRectHeight = 0,
-			iHeaderToolbarRectBottom = 0;
+			iHeaderToolbarRectBottom = 0,
+			iStickyFocusOffset = this.getStickyFocusOffset();
 
 		if (this._iStickyValue & 4 /* ColumnHeaders */) {
 			var oTblHeaderDomRef = this.getDomRef("tblHeader").firstChild;
@@ -2616,10 +2624,9 @@ function(
 		}
 
 		var iItemTop = Math.round(oItemDomRef.getBoundingClientRect().top);
-
 		if (iTHRectBottom > iItemTop || iInfoTBarContainerRectBottom > iItemTop || iHeaderToolbarRectBottom > iItemTop) {
 			window.requestAnimationFrame(function () {
-				oScrollDelegate.scrollToElement(oItemDomRef, 0, [0, -iTHRectHeight - iInfoTBarContainerRectHeight - iHeaderToolbarRectHeight]);
+				oScrollDelegate.scrollToElement(oItemDomRef, 0, [0, -iTHRectHeight - iInfoTBarContainerRectHeight - iHeaderToolbarRectHeight - iStickyFocusOffset]);
 			});
 		}
 	};

package/src/sap/m/ListItemBase.js

@@ -76,7 +76,7 @@ function(
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.93.1
+	 * @version 1.96.0
 	 *
 	 * @constructor
 	 * @public
@@ -505,7 +505,9 @@ function(
 		}
 
 		if (!this.DeleteIconURI) {
-			ListItemBase.prototype.DeleteIconURI = IconPool.getIconURI(ThemeParameters.get("_sap_m_ListItemBase_DeleteIcon"));
+			ListItemBase.prototype.DeleteIconURI = IconPool.getIconURI(
+				ThemeParameters.get({name: "_sap_m_ListItemBase_DeleteIcon"}) || "decline"
+			);
 		}
 
 		this._oDeleteControl = new Button({
@@ -520,15 +522,15 @@ function(
 		this._oDeleteControl._bExcludeFromTabChain = true;
 
 		// prevent disabling of internal controls by the sap.ui.core.EnabledPropagator
-		this._oDeleteControl.getEnabled = function() {
-			return true;
-		};
+		this._oDeleteControl.useEnabledPropagator(false);
 
 		return this._oDeleteControl;
 	};
 
 	ListItemBase.prototype.onThemeChanged = function() {
-		ListItemBase.prototype.DeleteIconURI = IconPool.getIconURI(ThemeParameters.get("_sap_m_ListItemBase_DeleteIcon"));
+		ListItemBase.prototype.DeleteIconURI = IconPool.getIconURI(
+			ThemeParameters.get({name: "_sap_m_ListItemBase_DeleteIcon"})
+		);
 		if (this._oDeleteControl) {
 			this._oDeleteControl.setIcon(this.DeleteIconURI);
 		}
@@ -558,9 +560,7 @@ function(
 		this._oDetailControl._bExcludeFromTabChain = true;
 
 		// prevent disabling of internal controls by the sap.ui.core.EnabledPropagator
-		this._oDetailControl.getEnabled = function() {
-			return true;
-		};
+		this._oDetailControl.useEnabledPropagator(false);
 
 		return this._oDetailControl;
 	};
@@ -611,9 +611,7 @@ function(
 		}, this);
 
 		// prevent disabling of internal controls by the sap.ui.core.EnabledPropagator
-		this._oSingleSelectControl.getEnabled = function() {
-			return true;
-		};
+		this._oSingleSelectControl.useEnabledPropagator(false);
 
 		return this._oSingleSelectControl;
 	};
@@ -649,9 +647,7 @@ function(
 		}, this);
 
 		// prevent disabling of internal controls by the sap.ui.core.EnabledPropagator
-		this._oMultiSelectControl.getEnabled = function() {
-			return true;
-		};
+		this._oMultiSelectControl.useEnabledPropagator(false);
 
 		return this._oMultiSelectControl;
 	};
@@ -1000,6 +996,10 @@ function(
 		if (this._eventHandledByControl ||
 			oEvent.touches.length != 1 ||
 			!this.hasActiveType()) {
+			if (this.getListProperty("includeItemInSelection") && this.getList()._mRangeSelection) {
+				// prevet text selection when rangeSelection is detected
+				oEvent.preventDefault();
+			}
 			return;
 		}
 
@@ -1275,6 +1275,7 @@ function(
 		}
 
 		this.informList("FocusIn", oEvent.srcControl);
+		oEvent.setMarked();
 
 		if (oEvent.srcControl === this) {
 			return;
@@ -1287,7 +1288,6 @@ function(
 
 		// inform the list async that this item should be focusable
 		setTimeout(oList["setItemFocusable"].bind(oList, this), 0);
-		oEvent.setMarked();
 	};
 
 	// inform the list for the vertical navigation