@openui5/sap.m 1.94.0 → 1.97.0

package/src/sap/m/Input.js

@@ -159,7 +159,7 @@ function(
 	 *
 	 * @extends sap.m.InputBase
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public
@@ -328,7 +328,13 @@ function(
 			 * Specifies whether the clear icon should be shown/hidden on user interaction.
 			 * @private
 			 */
-			effectiveShowClearIcon: { type: "boolean", defaultValue: false, visibility: "hidden" }
+			effectiveShowClearIcon: { type: "boolean", defaultValue: false, visibility: "hidden" },
+
+			/**
+			 * Specifies whether to display separators in tabular suggestions.
+			 * @private
+			 */
+			separateSuggestions: { type: "boolean", defaultValue: false, visibility: "hidden" }
 		},
 		defaultAggregation : "suggestionItems",
 		aggregations : {
@@ -586,6 +592,10 @@ function(
 		// 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;
 	};
 
 	/**
@@ -627,7 +637,7 @@ function(
 	Input.prototype.onBeforeRendering = function() {
 		var sSelectedKey = this.getSelectedKey(),
 			bShowValueHelpIcon = this.getShowValueHelp() && this.getEnabled() && this.getEditable(),
-			bShowClearIcon = this.getShowClearIcon(),
+			bShowClearIcon = this.getProperty("effectiveShowClearIcon") && this.getEnabled() && this.getEditable(),
 			oIcon = this._oValueHelpIcon,
 			oSuggestionsPopover = this._getSuggestionsPopover(),
 			bSuggestionsPopoverIsOpen = oSuggestionsPopover && this._isSuggestionsPopoverOpen(),
@@ -637,13 +647,15 @@ function(
 
 		InputBase.prototype.onBeforeRendering.call(this);
 
-		if (bShowClearIcon) {
-			this._getClearIcon().setProperty("visible", this.getProperty("effectiveShowClearIcon"));
+		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);
 		}
 
@@ -1461,7 +1473,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) {
@@ -1738,8 +1750,6 @@ function(
 		// always focus input field when typing in it
 		this.addStyleClass("sapMFocus");
 
-		this.setProperty("effectiveShowClearIcon", !!sValue);
-
 		// No need to fire suggest event when suggestion feature isn't enabled or runs on the phone.
 		// Because suggest event should only be fired by the input in dialog when runs on the phone.
 		if (this.getShowSuggestion() && !this.isMobileDevice()) {
@@ -1765,6 +1775,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.getShowSuggestion() && this.setSelectedKey(null);
+			(sLastValue !== sValue) && this.setLastValue(sLastValue);
+		}
+
+		this.getShowClearIcon() && this.setProperty("effectiveShowClearIcon", !!sValue);
+	};
+
 	/**
 	 * Gets the input value.
 	 *
@@ -2284,7 +2306,7 @@ function(
 		var oSuggestionsTable = new Table(this.getId() + "-popup-table", {
 			mode: ListMode.SingleSelectMaster,
 			showNoData: false,
-			showSeparators: ListSeparators.None,
+			showSeparators: this.getProperty("separateSuggestions") ? ListSeparators.Inner : ListSeparators.None,
 			width: "100%",
 			enableBusyIndicator: false,
 			rememberSelections : false,
@@ -2460,6 +2482,7 @@ function(
 	 */
 	Input.prototype.getAccessibilityInfo = function() {
 		var oInfo = InputBase.prototype.getAccessibilityInfo.apply(this, arguments);
+
 		oInfo.description = ((oInfo.description || "") + " " + this.getDescription()).trim();
 		return oInfo;
 	};
@@ -2783,10 +2806,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);
 
@@ -2888,8 +2909,9 @@ function(
 		} 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);
@@ -2899,6 +2921,8 @@ function(
 						return;
 					}
 
+					this._bAfterOpenFinisihed = false;
+
 					// only destroy items in simple suggestion mode
 					if (oList instanceof Table) {
 						oSelectedItem && oSelectedItem.removeStyleClass("sapMLIBFocused");
@@ -2908,13 +2932,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);
 		}
 
@@ -3236,6 +3267,26 @@ function(
 		return this._sTypedInValue;
 	};
 
+	/**
+	 * Setter for the separateSuggestions property representing whether to display separators in tabular suggestions.
+	 *
+	 * @private
+	 * @ui5-restricted sap.ui.comp.smartfield.SmartField
+	 * @param {boolean} bValue The new value for the property.
+	 * @returns {this} <code>this</code> to allow method chaining.
+	 */
+	Input.prototype._setSeparateSuggestions = function (bValue) {
+		var oSuggestionsTable = this._getSuggestionsTable();
+
+		this.setProperty("separateSuggestions", bValue);
+
+		if (oSuggestionsTable) {
+			oSuggestionsTable.setShowSeparators(bValue ? ListSeparators.Inner : ListSeparators.None);
+		}
+
+		return this;
+	};
+
 	return Input;
 
 });

package/src/sap/m/InputBase.js

@@ -11,6 +11,7 @@ sap.ui.define([
 	'sap/ui/core/IconPool',
 	'./delegate/ValueStateMessage',
 	'sap/ui/core/message/MessageMixin',
+	'sap/ui/core/InvisibleMessage',
 	'sap/ui/core/library',
 	'sap/ui/Device',
 	'./InputBaseRenderer',
@@ -31,6 +32,7 @@ function(
 	IconPool,
 	ValueStateMessage,
 	MessageMixin,
+	InvisibleMessage,
 	coreLibrary,
 	Device,
 	InputBaseRenderer,
@@ -62,7 +64,7 @@ function(
 	 * @implements sap.ui.core.IFormContent
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public
@@ -300,6 +302,9 @@ function(
 		// handle composition events & validation of composition symbols
 		this._bIsComposingCharacter = false;
 
+		this.setLastValueStateText("");
+		this.setErrorMessageAnnouncementState(false);
+
 		this.fnCloseValueStateOnClick = function() {
 			this.closeValueStateMessage();
 		};
@@ -343,23 +348,39 @@ function(
 	};
 
 	InputBase.prototype.onBeforeRendering = function() {
+		var oFocusDomRef = this.getFocusDomRef();
 		var oFormattedVSText = this.getFormattedValueStateText();
-		var oFormattedVSTextContent = oFormattedVSText && oFormattedVSText.getHtmlText();
-		var oFormattedVSTextAcc = this.getAggregation("_invisibleFormattedValueStateText");
-		var oFormattedVSTextAccContent = oFormattedVSTextAcc && oFormattedVSTextAcc.getHtmlText();
+		var bFormattedValueStateUpdated;
 
-		if (this._bCheckDomValue && !this.bRenderingPhase) {
+		if (!this._oInvisibleMessage) {
+			this._oInvisibleMessage = InvisibleMessage.getInstance();
+		}
 
+		if (this._bCheckDomValue && !this.bRenderingPhase) {
 			// remember dom value in case of invalidation during keystrokes
 			// so the following should only be used onAfterRendering
 			if (this.isActive()) {
-                this._sDomValue = this._getInputValue();
-            } else {
-                this._bCheckDomValue = false;
-            }
+				this._sDomValue = this._getInputValue();
+			} else {
+				this._bCheckDomValue = false;
+			}
 		}
 
-		if (oFormattedVSText && oFormattedVSTextContent !== oFormattedVSTextAccContent) {
+		if (!oFormattedVSText) {
+			bFormattedValueStateUpdated = false;
+		} else {
+			var oFormattedVSTextAcc = this.getAggregation("_invisibleFormattedValueStateText");
+			bFormattedValueStateUpdated = oFormattedVSText.getHtmlText() !== (oFormattedVSTextAcc && oFormattedVSTextAcc.getHtmlText());
+		}
+
+		// The value state error should be announced, when there are dynamic changes
+		// to value state error or value state error message, due to user interaction
+		if (this.getValueState() === ValueState.Error && oFocusDomRef) {
+			var bValueStateUpdated = bFormattedValueStateUpdated || this.getValueStateText() !== this.getLastValueStateText();
+			this.setErrorMessageAnnouncementState(!oFocusDomRef.hasAttribute('aria-invalid') || bValueStateUpdated);
+		}
+
+		if (bFormattedValueStateUpdated) {
 			oFormattedVSTextAcc && oFormattedVSTextAcc.destroy();
 			this.setAggregation("_invisibleFormattedValueStateText", oFormattedVSText.clone());
 		}
@@ -372,6 +393,7 @@ function(
 		var sValueState = this.getValueState();
 		var bIsFocused = this.getFocusDomRef() === document.activeElement;
 		var bClosedValueState = sValueState === ValueState.None;
+		var sValueStateMessageHiddenText = document.getElementById(this.getValueStateMessageId() + '-sr');
 
 		// maybe control is invalidated on keystrokes and
 		// even the value property did not change
@@ -383,6 +405,12 @@ function(
 			this.$("inner").val(this._sDomValue);
 		}
 
+		// Announce error value state update, only when the visual focus is in the input field
+		if (this.getErrorMessageAnnouncementState() && this.hasStyleClass("sapMFocus")) {
+			sValueStateMessageHiddenText && this._oInvisibleMessage.announce(sValueStateMessageHiddenText.textContent);
+			this.setErrorMessageAnnouncementState(false);
+		}
+
 		this.$("message").text(this.getValueStateText());
 
 		// now dom value is up-to-date
@@ -400,6 +428,8 @@ function(
 				oControl.getDomRef() && oControl.getDomRef().setAttribute("tabindex", -1);
 			});
 		}
+
+		this.setLastValueStateText(this.getValueStateText());
 	};
 
 	InputBase.prototype.exit = function() {
@@ -408,8 +438,12 @@ function(
 			this._oValueStateMessage.destroy();
 		}
 
+		if (this.oInvisibleMessage) {
+			this.oInvisibleMessage.destroy();
+			this.oInvisibleMessage = null;
+		}
+
 		this._oValueStateMessage = null;
-		this._oDomRefBeforeRendering = null;
 	};
 
 	/* =========================================================== */
@@ -514,7 +548,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;
 		}
 
@@ -952,6 +986,42 @@ function(
 		return this.getId() + "-message";
 	};
 
+	/**
+	 * Gets the state of the value state message announcemnt.
+	 *
+	 * @returns {boolean} True, if the error value state should be announced.
+	 */
+	InputBase.prototype.getErrorMessageAnnouncementState = function() {
+		return this._bErrorStateShouldBeAnnounced;
+	};
+
+	/**
+	 * Sets the state of the value state message announcemnt.
+	 *
+	 * @param {boolean} bAnnounce Determines, if the error value state message should be announced.
+	 */
+	InputBase.prototype.setErrorMessageAnnouncementState = function(bAnnounce) {
+		this._bErrorStateShouldBeAnnounced = bAnnounce;
+	};
+
+	/**
+	 * Sets the last value state text.
+	 *
+	 * @param {string} sValueStateText The Last Value State Text to be set
+	 */
+	InputBase.prototype.setLastValueStateText = function(sValueStateText) {
+		this._sLastValueStateText = sValueStateText;
+	};
+
+	/**
+	 * Gets the last stored value state text.
+	 *
+	 * @returns {string} The value state text
+	 */
+	InputBase.prototype.getLastValueStateText = function() {
+		return this._sLastValueStateText;
+	};
+
 	/**
 	 * Gets the labels referencing this control.
 	 *
@@ -1016,12 +1086,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(getComputedStyle(oIcon.getDomRef()).marginRight) : 0;
 			iIconWidth = oIcon && oIcon.getDomRef() ? oIcon.getDomRef().offsetWidth : 0;
 
-			return iAcc + iIconWidth;
+			return iAcc + iIconWidth + iIconMargin;
 		}, 0);
 	};
 
@@ -1080,13 +1152,23 @@ function(
 		return {
 			role: oRenderer.getAriaRole(this),
 			type: sap.ui.getCore().getLibraryResourceBundle("sap.m").getText("ACC_CTR_TYPE_INPUT"),
-			description: [this.getValue() || "", oRenderer.getLabelledByAnnouncement(this), oRenderer.getDescribedByAnnouncement(this), sRequired].join(" ").trim(),
+			description: [this.getValueDescriptionInfo(), oRenderer.getLabelledByAnnouncement(this), oRenderer.getDescribedByAnnouncement(this), sRequired].join(" ").trim(),
 			focusable: this.getEnabled(),
 			enabled: this.getEnabled(),
 			editable: this.getEnabled() && this.getEditable()
 		};
 	};
 
+	/**
+	 * Gets the value of the accessibility description info field.
+	 *
+	 * @protected
+	 * @returns {string} The value of the accessibility description info
+	 */
+	InputBase.prototype.getValueDescriptionInfo = function () {
+		return this.getValue() || sap.ui.getCore().getLibraryResourceBundle("sap.m").getText("INPUTBASE_VALUE_EMPTY");
+	};
+
 	/**
 	 * Adds an icon to be rendered
 	 * @param {string} sIconPosition a position for the icon to be rendered - begin or end

package/src/sap/m/InputBaseRenderer.js

@@ -316,32 +316,20 @@ sap.ui.define(['sap/ui/core/Renderer', 'sap/ui/core/Core', 'sap/ui/core/library'
 	 */
 	InputBaseRenderer.renderValueStateAccDom = function(oRm, oControl) {
 		var sValueState = oControl.getValueState();
-
 		if (sValueState === ValueState.None || !oControl.getEditable() || !oControl.getEnabled()) {
 			return;
 		}
 
-		var bShouldBeLiveRegion = document.activeElement !== oControl.getFocusDomRef() || sValueState === ValueState.Error;
-		var sAccDomNodeId = oControl.getValueStateMessageId() + "-sr";
 		var oFormattedValueStateText = oControl.getAggregation("_invisibleFormattedValueStateText");
-		var sValueStateTypeText = Core.getLibraryResourceBundle("sap.m").getText("INPUTBASE_VALUE_STATE_" + sValueState.toUpperCase());
-
-		oRm.openStart("div", sAccDomNodeId).class("sapUiPseudoInvisibleText");
-		// Prevent double announcements for value state messages other than errors (referenced by aria-describedby),
-		// when value state is changed via user interaction
-		// Only make the acc DOM element an "assertive" "live region"when aria-errormessage is used, otherwise
-		// when the element is referenced by "aria-describedby" it is treated as "live region" by default
-		if (bShouldBeLiveRegion) {
-			oRm.attr("aria-live", "assertive");
-		}
+		var sValueStateTypeText;
+
+
+		sValueStateTypeText = Core.getLibraryResourceBundle("sap.m").getText("INPUTBASE_VALUE_STATE_" + sValueState.toUpperCase());
+
+		oRm.openStart("div", oControl.getValueStateMessageId() + "-sr")
+			.class("sapUiPseudoInvisibleText");
 
-		// Tells screen readers to announce the live region as a whole even if only part of it is changed.
-		// This is needed because of the way semantic renderer works - it won't replace text content if it is the same -
-		// the so called in-place DOM patching - and the control will get rerendered when value state is not changed.
-		// For example if only the value state type is changed and not the text, if aria-atomic is not set to 'true'
-		// the value state text won't be announced.
-		oRm.attr("aria-atomic", "true")
-			.openEnd()
+		oRm.openEnd()
 			.text(sValueStateTypeText).text(" ");
 
 		if (oFormattedValueStateText) {

package/src/sap/m/InputListItem.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @extends sap.m.ListItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.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.94.0
+	 * @version 1.97.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.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/LightBoxItem.js

@@ -43,7 +43,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.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.94.0
+	 * @version 1.97.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.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/ListBase.js

@@ -90,7 +90,7 @@ function(
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public
@@ -1588,7 +1588,7 @@ function(
 
 		if (!this._mRangeSelection) {
 			this._mRangeSelection = {
-				index: aVisibleItems.indexOf(oItem),
+				index: this.indexOfItem(oItem),
 				selected: oItem.getSelected()
 			};
 		}

package/src/sap/m/ListItemBase.js

@@ -76,7 +76,7 @@ function(
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.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({
@@ -526,7 +528,9 @@ function(
 	};
 
 	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);
 		}
@@ -992,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;
 		}
 
@@ -1267,6 +1275,7 @@ function(
 		}
 
 		this.informList("FocusIn", oEvent.srcControl);
+		oEvent.setMarked();
 
 		if (oEvent.srcControl === this) {
 			return;
@@ -1279,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