@openui5/sap.m 1.96.2 → 1.97.0

package/src/sap/m/ComboBoxBase.js

@@ -22,7 +22,9 @@ sap.ui.define([
 	"sap/base/strings/escapeRegExp",
 	"sap/m/inputUtils/forwardItemProperties",
 	"sap/m/inputUtils/highlightDOMElements",
-	"sap/m/inputUtils/ListHelpers"
+	"sap/m/inputUtils/ListHelpers",
+	"sap/ui/core/IconPool",
+	"sap/ui/core/Core"
 ],
 	function(
 		ComboBoxTextField,
@@ -42,7 +44,9 @@ sap.ui.define([
 		escapeRegExp,
 		forwardItemProperties,
 		highlightDOMElements,
-		ListHelpers
+		ListHelpers,
+		IconPool,
+		Core
 	) {
 		"use strict";
 
@@ -64,7 +68,7 @@ sap.ui.define([
 		 * @abstract
 		 *
 		 * @author SAP SE
-		 * @version 1.96.2
+		 * @version 1.97.0
 		 *
 		 * @constructor
 		 * @public
@@ -98,7 +102,20 @@ sap.ui.define([
 						type: "boolean",
 						defaultValue: false,
 						hidden: true
-					}
+					},
+
+					/**
+					 * Specifies whether clear icon is shown.
+					 * Pressing the icon will clear input's value and fire the change and liveChange events.
+					 * @since 1.96
+					 */
+					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" }
 				},
 				aggregations: {
 
@@ -146,6 +163,8 @@ sap.ui.define([
 			renderer: ComboBoxBaseRenderer
 		});
 
+		ComboBoxBase.ARROW_PRESSED_CSS_CLASS = "sapMComboBoxBaseArrowPressed";
+
 		/**
 		 * Called when the composition of a passage of text has been completed or cancelled.
 		 *
@@ -166,6 +185,17 @@ sap.ui.define([
 		/* Private methods                                             */
 		/* =========================================================== */
 
+		/**
+		 * Determines if the clear icon should be visible or hidden based on the control's state
+		 *
+		 * @returns {boolean} True if the clear icon should be shown.
+		 * @private
+		 * @ui5-restricted sap.m.ComboBox,sap.m.MultiComboBox
+		 */
+		ComboBoxBase.prototype.shouldShowClearIcon = function () {
+			return this.getProperty("effectiveShowClearIcon") && !!this.getValue() && this.getEditable() && this.getEnabled();
+		};
+
 		/**
 		 * Called whenever the binding of the aggregation items is changed.
 		 * @param {string} sReason The reason for the update
@@ -234,16 +264,17 @@ sap.ui.define([
 		};
 
 		/**
-		 * Decorates the Input
+		 * Decorates the Input.
 		 *
-		 * @param oInput {sap.m.InputBase}
-		 * @returns {*}
+		 * @param {sap.m.InputBase} oInput The input which should be decorated
+		 * @returns {*} The decorated input or undefined
 		 * @private
 		 * @ui5-restricted
 		 */
 		ComboBoxBase.prototype._decoratePopupInput = function (oInput) {
 			if (oInput) {
 				this.setTextFieldHandler(oInput);
+				oInput.setShowClearIcon(this.getShowClearIcon());
 			}
 			return oInput;
 		};
@@ -261,7 +292,7 @@ sap.ui.define([
 			oTextField._handleEvent = function(oEvent) {
 				oTextFieldHandleEvent.apply(this, arguments);
 
-				if (/keydown|sapdown|sapup|saphome|sapend|sappagedown|sappageup|input/.test(oEvent.type)) {
+				if (/keydown|keyup|sapdown|sapup|saphome|sapend|sappagedown|sappageup|input/.test(oEvent.type)) {
 					that._handleEvent(oEvent);
 				}
 			};
@@ -448,6 +479,66 @@ sap.ui.define([
 			return this._bItemsShownWithFilter;
 		};
 
+		/**
+		 * Gets the clear icon.
+		 *
+		 * @returns {object} The clear icon
+		 * @private
+		 */
+		ComboBoxBase.prototype._getClearIcon = function () {
+			if (this._oClearIcon) {
+				return this._oClearIcon;
+			}
+
+			this._oClearIcon = this.addEndIcon({
+				src: IconPool.getIconURI("decline"),
+				noTabStop: true,
+				visible: false,
+				alt: this._oRb.getText("INPUT_CLEAR_ICON_ALT"),
+				useIconTooltip: false,
+				decorative: false,
+				press: this.handleClearIconPress.bind(this)
+			}, 0);
+
+			return this._oClearIcon;
+		};
+
+		/**
+		 * Function is called when the clear icon is pressed.
+		 * Should be overwritten by subclasses.
+		 *
+		 * @param {jQuery.Event} oEvent The event object
+		 * @protected
+		 * @ui5-restricted sap.m.ComboBox, sap.m.MultiComboBox
+		 */
+		ComboBoxBase.prototype.handleClearIconPress = function (oEvent) {};
+
+		/**
+		 * Function is called on key up keyboard input.
+		 *
+		 * @param {jQuery.Event} oEvent The event object
+		 * @private
+		 */
+		ComboBoxBase.prototype.onkeyup = function (oEvent) {
+			if (!this.getEnabled() || !this.getEditable()) {
+				return;
+			}
+
+			this.getShowClearIcon() && this.setProperty("effectiveShowClearIcon", !!this.getValue());
+		};
+
+		/**
+		 * Sets the value property of the control.
+		 *
+		 * @param {string} sValue The new value
+		 * @returns {this} this instance for method chaining
+		 * @public
+		 */
+		ComboBoxBase.prototype.setValue = function (sValue) {
+			ComboBoxTextField.prototype.setValue.apply(this, arguments);
+			this.setProperty("effectiveShowClearIcon", !!sValue);
+			return this;
+		};
 
 		/* =========================================================== */
 		/* Lifecycle methods                                           */
@@ -455,6 +546,7 @@ sap.ui.define([
 
 		ComboBoxBase.prototype.init = function() {
 			ComboBoxTextField.prototype.init.apply(this, arguments);
+			this._oRb = Core.getLibraryResourceBundle("sap.m");
 
 			// sets the picker popup type
 			this.setPickerType(Device.system.phone ? "Dialog" : "Dropdown");
@@ -479,13 +571,13 @@ sap.ui.define([
 			this._bOnItemsLoadedScheduled = false;
 			this._bDoTypeAhead = true;
 
-			this.getIcon().addEventDelegate({
+			this.getArrowIcon().addEventDelegate({
 				onmousedown: function (oEvent) {
 						this._bShouldClosePicker = this.isOpen();
 				}
 			}, this);
 
-			this.getIcon().attachPress(this._handlePopupOpenAndItemsLoad.bind(this, true, this));
+			this.getArrowIcon().attachPress(this._handlePopupOpenAndItemsLoad.bind(this, true, this));
 
 			// a method to define whether an item should be filtered in the picker
 			this.fnFilter = null;
@@ -520,21 +612,25 @@ sap.ui.define([
 		};
 
 		/**
-		 * Fires when an object gets removed from the items aggregation
+		 * Fires when an object gets removed from the items aggregation.
 		 *
+		 * @param {sap.ui.core.Item} oItem The item that should be removed
 		 * @protected
 		 */
 		ComboBoxBase.prototype.handleItemRemoval = function (oItem) {};
 
 		/**
-		 * Fires when an object gets inserted in the items aggregation
+		 * Fires when an object gets inserted in the items aggregation.
 		 *
+		 * @param {sap.ui.core.Item} oItem The item that should be inserted
 		 * @protected
 		 */
 		ComboBoxBase.prototype.handleItemInsertion = function (oItem) {};
 
 		/**
-		 * Sets whether the list items should be recreated
+		 * Sets whether the list items should be recreated.
+		 *
+		 * @param {boolean} bRecreate True if the list items should be recreated
 		 * @protected
 		 */
 		ComboBoxBase.prototype.setRecreateItems = function (bRecreate) {
@@ -543,6 +639,8 @@ sap.ui.define([
 
 		/**
 		 * Gets the flag indicating whether the list items should be recreated
+		 *
+		 * @returns {boolean} True if the list items should be recreated
 		 * @protected
 		 */
 		ComboBoxBase.prototype.getRecreateItems = function () {
@@ -564,6 +662,12 @@ sap.ui.define([
 				it's new, because the old is already switched to have the value state header as parent */
 				this._updateSuggestionsPopoverValueState();
 			}
+
+			if (this.getShowClearIcon()) {
+				this._getClearIcon().setVisible(this.shouldShowClearIcon());
+			} else if (this._oClearIcon) {
+				this._getClearIcon().setVisible(false);
+			}
 		};
 
 		ComboBoxBase.prototype._handlePopupOpenAndItemsLoad = function (bOpenOnInteraction, oObjectToFocus) {
@@ -580,7 +684,7 @@ sap.ui.define([
 				// instead of closing and reopening the SuggestionsPopover we set the default filter
 				// and use it to show all items in the picker, while adding the correct style class to the
 				// ComboBoxes icon.
-				this.toggleIconPressedStyle(true);
+				this.toggleStyleClass(ComboBoxBase.ARROW_PRESSED_CSS_CLASS, true);
 				this.bOpenedByKeyboardOrButton = false;
 				this.clearFilter();
 				this._setItemsShownWithFilter(false);
@@ -614,6 +718,8 @@ sap.ui.define([
 		ComboBoxBase.prototype.exit = function() {
 			ComboBoxTextField.prototype.exit.apply(this, arguments);
 
+			this._oRb = null;
+
 			if (this._getGroupHeaderInvisibleText()) {
 				this._getGroupHeaderInvisibleText().destroy();
 				this._oGroupHeaderInvisibleText = null;
@@ -1026,7 +1132,7 @@ sap.ui.define([
 		ComboBoxBase.prototype.onBeforeOpen = function () {
 			this._updateSuggestionsPopoverValueState();
 			if (!this._getItemsShownWithFilter()) {
-				this.toggleIconPressedStyle(true);
+				this.toggleStyleClass(ComboBoxBase.ARROW_PRESSED_CSS_CLASS, true);
 			}
 		};
 

package/src/sap/m/ComboBoxTextField.js

@@ -35,7 +35,7 @@ sap.ui.define([
 		 * @extends sap.m.InputBase
 		 *
 		 * @author SAP SE
-		 * @version 1.96.2
+		 * @version 1.97.0
 		 *
 		 * @constructor
 		 * @public
@@ -75,7 +75,7 @@ sap.ui.define([
 		ComboBoxTextField.prototype.init = function () {
 			InputBase.prototype.init.apply(this, arguments);
 
-			this.addEndIcon({
+			this._oArrowIcon = this.addEndIcon({
 				id: this.getId() + "-arrow",
 				src: "sap-icon://slim-arrow-down",
 				noTabStop: true,
@@ -86,13 +86,25 @@ sap.ui.define([
 
 		/**
 		 * Returns the arrow icon
+		 *
 		 * @returns {sap.ui.core.Icon} Icon
-		 * @protected
+		 * @private
+		 * @ui5-restricted sap.m.ComboBoxBase,sap.m.ComboBox,sap.m.MultiComboBox
 		 */
-		ComboBoxTextField.prototype.getIcon = function () {
-			return this.getAggregation("_endIcon")[0];
+		ComboBoxTextField.prototype.getArrowIcon = function () {
+			return this._oArrowIcon;
 		};
 
+		/**
+		 * Returns the arrow icon
+		 *
+		 * Left for backward compatibility.
+		 *
+		 * @returns {sap.ui.core.Icon} Icon
+		 * @protected
+		 */
+		ComboBoxTextField.prototype.getIcon = ComboBoxTextField.prototype.getArrowIcon;
+
 		/**
 		 * Toggles the icon pressed style on or off.
 		 *
@@ -107,7 +119,7 @@ sap.ui.define([
 			InputBase.prototype.onBeforeRendering.apply(this, arguments);
 
 			var aReferencingLabels = LabelEnablement.getReferencingLabels(this) || [],
-				oIcon = this.getIcon();
+				oIcon = this.getArrowIcon();
 
 			oIcon.setVisible(this.getShowButton());
 
@@ -125,7 +137,7 @@ sap.ui.define([
 		 */
 		ComboBoxTextField.prototype.getOpenArea = function() {
 			// returns the div wrapping the icon
-			var oDomRef = this.getIcon().getDomRef();
+			var oDomRef = this.getArrowIcon().getDomRef();
 
 			return oDomRef ? oDomRef.parentNode : oDomRef;
 		};
@@ -199,6 +211,8 @@ sap.ui.define([
 
 		ComboBoxTextField.prototype.exit = function() {
 			InputBase.prototype.exit.apply(this, arguments);
+
+			this._oArrowIcon = null;
 		};
 
 		return ComboBoxTextField;

package/src/sap/m/CustomDynamicDateOption.js

@@ -20,7 +20,7 @@ sap.ui.define(['sap/m/DynamicDateOption'],
 		 * @extends sap.m.DynamicDateOption
 		 *
 		 * @author SAP SE
-		 * @version 1.96.2
+		 * @version 1.97.0
 		 *
 		 * @public
 		 * @since 1.92

package/src/sap/m/CustomListItem.js

@@ -24,7 +24,7 @@ sap.ui.define(['./ListItemBase', './library', './CustomListItemRenderer'],
 	 * @extends sap.m.ListItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/CustomTile.js

@@ -21,7 +21,7 @@ sap.ui.define(['./Tile', './library', './CustomTileRenderer'],
 	 * Use the CustomTile control to display application specific content in the Tile control.
 	 * The tile width is 8.5em and height is 10em.
 	 * @extends sap.m.Tile
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/CustomTreeItem.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 *        <code>Table, Form</code> etc, should not be aggregated as content.
 	 * @extends sap.m.TreeItemBase
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 * @constructor
 	 * @public
 	 * @since 1.48.0

package/src/sap/m/DatePicker.js

@@ -148,7 +148,7 @@ sap.ui.define([
 	 * the close event), or select Cancel.
 	 *
 	 * @extends sap.m.DateTimeField
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public
@@ -211,7 +211,22 @@ sap.ui.define([
 			 *
 			 * @since 1.95
 			 */
-			showCurrentDateButton : {type : "boolean", group : "Behavior", defaultValue : false}
+			showCurrentDateButton : {type : "boolean", group : "Behavior", defaultValue : false},
+
+			/**
+			 * Determines whether the input field of the picker is hidden or visible.
+			 * When set to <code>true</code>, the input field becomes invisible and there is no way to open the picker popover.
+			 * In that case it can be opened by another control through calling of picker's <code>openBy</code> method, and
+			 * the opening control's DOM reference must be provided as parameter.
+			 *
+			 * Note: Since the picker is not responsible for accessibility attributes of the control which opens its popover,
+			 * those attributes should be added by the application developer. The following is recommended to be added to the
+			 * opening control: a text or tooltip that describes the action (example: "Open Date Picker"), and also aria-haspopup
+			 * attribute with value of <code>sap.ui.core.aria.HasPopup.Dialog</code>.
+			 *
+			 * @since 1.97
+			 */
+			 hideInput: { type: "boolean", group: "Misc", defaultValue: false }
 
 		},
 
@@ -1065,7 +1080,7 @@ sap.ui.define([
 		return this;
 	};
 
-	function _open(){
+	function _open(oDomRef){
 		this._createPopup();
 
 		this._createPopupContent();
@@ -1096,7 +1111,7 @@ sap.ui.define([
 
 		this._fillDateRange();
 
-		this._openPopup();
+		this._openPopup(oDomRef);
 
 		// Fire navigate event when the calendar popup opens
 		this.fireNavigate({
@@ -1162,13 +1177,33 @@ sap.ui.define([
 	};
 
 	// to be overwritten by DateTimePicker
-	DatePicker.prototype._openPopup = function(){
+	DatePicker.prototype._openPopup = function(oDomRef){
 		if (!this._oPopup) {
 			return;
 		}
-		this._oPopup._getPopup().setAutoCloseAreas([this.getDomRef()]);
-		this._oPopup.openBy(this);
+		if (!oDomRef) {
+			oDomRef = this.getDomRef();
+		}
+		this._oPopup._getPopup().setAutoCloseAreas([oDomRef]);
+		this._oPopup.openBy(oDomRef || this);
+	};
 
+	/**
+	 * Opens the picker popover. The popover is positioned relatively to the control given as <code>oDomRef</code> parameter on tablet or desktop
+	 * and is full screen on phone. Therefore the control parameter is only used on tablet or desktop and is ignored on phone.
+	 *
+	 * Note: use this method to open the picker popover only when the <code>hideInput</code> property is set to <code>true</code>. Please consider
+	 * opening of the picker popover by another control only in scenarios that comply with Fiori guidelines. For example, opening the picker popover
+	 * by another popover is not recommended.
+	 * The application developer should implement the following accessibility attributes to the opening control: a text or tooltip that describes
+	 * the action (example: "Open Date Picker"), and aria-haspopup attribute with value of <code>sap.ui.core.aria.HasPopup.Dialog</code>.
+	 *
+	 * @since 1.97
+	 * @param {HTMLElement} oDomRef DOM reference of the opening control. On tablet or desktop, the popover is positioned relatively to this control.
+	 * @public
+	 */
+	DatePicker.prototype.openBy = function(oDomRef) {
+		_open.call(this, oDomRef);
 	};
 
 	/**
@@ -1563,8 +1598,6 @@ sap.ui.define([
 
 	}
 
-
-
 	function _checkSpecialDate(oSpecialDate) {
 
 		var DateTypeRange = sap.ui.require("sap/ui/unified/DateTypeRange");

package/src/sap/m/DatePickerRenderer.js

@@ -65,6 +65,19 @@ sap.ui.define(['sap/ui/core/Renderer', './InputBaseRenderer', 'sap/ui/core/libra
 		return mAccessibilityState;
 	};
 
+	/**
+	 * Adds specific class to hide the <code>DatePicker</code> input field when the <code>hideInput</code> property is set to <code>true</code>.
+	 * @protected
+	 * @param {sap.ui.core.RenderManager} oRm The RenderManager that can be used for writing to the render output buffer.
+	 * @param {sap.ui.core.Control} oControl An object representation of the control that should be rendered.
+	 */
+	 DatePickerRenderer.addOuterClasses = function(oRm, oControl) {
+		if (oControl.getHideInput()) {
+			oRm.class("sapMDatePickerHiddenInput");
+		}
+		InputBaseRenderer.addOuterClasses.apply(this, arguments);
+	};
+
 	return DatePickerRenderer;
 
 }, /* bExport= */ true);

package/src/sap/m/DateRangeSelection.js

@@ -126,8 +126,8 @@ sap.ui.define([
 	 * compact mode and provides a touch-friendly size in cozy mode.
 	 *
 	 * @extends sap.m.DatePicker
-	 * @version 1.96.2
-	 * @version 1.96.2
+	 * @version 1.97.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/DateTimeField.js

@@ -59,7 +59,7 @@ sap.ui.define([
 	 * @extends sap.m.InputBase
 	 *
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/DateTimeInput.js

@@ -62,7 +62,7 @@ function(
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public