@openui5/sap.m 1.101.0 → 1.103.0

package/src/sap/m/GenericTile.js

@@ -64,7 +64,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.103.0
 	 * @since 1.34.0
 	 *
 	 * @public
@@ -208,10 +208,16 @@ sap.ui.define([
 				backgroundColor: {type: "sap.ui.core.CSSColor", group: "Appearance"},
 				/**
 				 * The semantic color of the value.
-				 * @experimental
+				 * @experimental Since 1.95
 				 * @since 1.95
 				 */
-				valueColor: {type: "sap.m.ValueColor", group: "Appearance", defaultValue: "None"}
+				valueColor: {type: "sap.m.ValueColor", group: "Appearance", defaultValue: "None"},
+				/**
+				 * The load state of the tileIcon.
+				 * @experimental Since 1.103
+				 * @since 1.103
+				 */
+				iconLoaded: {type: "boolean", group: "Misc", defaultValue: true}
 			},
 			defaultAggregation: "tileContent",
 			aggregations: {
@@ -424,13 +430,29 @@ sap.ui.define([
 	 */
 	GenericTile.prototype._initScopeContent = function (sTileClass) {
 		if (!this.getState || this.getState() !== LoadState.Disabled) {
-			this._oMoreIcon = this._oMoreIcon || IconPool.createControlByURI({
-				id: this.getId() + "-action-more",
-				size: "1rem",
-				useIconTooltip: false,
-				src: "sap-icon://overflow"
-			}).addStyleClass("sapMPointer").addStyleClass(sTileClass + "MoreIcon");
-
+			if (this._oMoreIcon) {
+				//It destroys the existing button when the Tile is getting rendered more than once
+				this._oMoreIcon.destroy();
+				this._oMoreIcon = null;
+			}
+			if (this.isA("sap.m.GenericTile") && this._isIconMode() && this.getFrameType() === FrameType.TwoByHalf){
+				// Acts Like an actual Button in Icon mode for TwoByHalf Tile
+				this._oMoreIcon = this._oMoreIcon || new Button({
+					id: this.getId() + "-action-more",
+					icon: "sap-icon://overflow",
+					type: "Transparent"
+				}).addStyleClass("sapMPointer").addStyleClass(sTileClass + "MoreIcon");
+				this._oMoreIcon.ontouchstart = function() {
+					this.removeFocus();
+				}.bind(this);
+			} else {
+				this._oMoreIcon = this._oMoreIcon || new Button({
+					id: this.getId() + "-action-more",
+					icon: "sap-icon://overflow",
+					type: "Unstyled"
+				}).addStyleClass("sapMPointer").addStyleClass(sTileClass + "MoreIcon");
+				this._oMoreIcon._bExcludeFromTabChain = true;
+			}
 			this._oRemoveButton = this._oRemoveButton || new Button({
 				id: this.getId() + "-action-remove",
 				icon: "sap-icon://decline",
@@ -458,6 +480,25 @@ sap.ui.define([
 		}
 	};
 
+	/**
+	Adding the  Classes for Action More Button in IconMode
+	@private
+	*/
+	GenericTile.prototype._addClassesForButton = function() {
+		this._oMoreIcon.getDomRef().classList.add("sapMBtn");
+		this._oMoreIcon.getDomRef("inner").classList.add("sapMBtnInner");
+		this._oMoreIcon.getDomRef("inner").classList.add("sapMBtnTransparent");
+	};
+
+	/**
+	Focus would not be visible while clicking on the tile
+	@private
+	*/
+	GenericTile.prototype.removeFocus = function() {
+		this.getDomRef().classList.add("sapMGTActionButtonPress");
+		this._oMoreIcon._activeButton();
+	};
+
 	GenericTile.prototype._isSmall = function() {
 		return this.getSizeBehavior() === TileSizeBehavior.Small || window.matchMedia("(max-width: 374px)").matches;
 	};
@@ -584,8 +625,39 @@ sap.ui.define([
 			this._oNavigateAction.attachPress(this._navigateEventHandler, this);
 		}
 
+		//Removes hovering and focusable properties from the action more button in non icon mode tiles
+		if (this._oMoreIcon && this._oMoreIcon.getDomRef() && !this._isIconMode()){
+			this._oMoreIcon.getDomRef().firstChild.classList.remove("sapMBtnHoverable");
+			this._oMoreIcon.getDomRef().firstChild.classList.remove("sapMFocusable");
+		}
+
+		//Adds the classes for the action-more buton in IconMode for TwoByHalf Tile
+		if (this._isIconMode() && this.getFrameType() === FrameType.TwoByHalf && this._oMoreIcon.getDomRef()){
+			this._addClassesForButton();
+		}
+
+		//Adds Extra height to the TileContent when GenericTile is in ActionMode
+		if (this.getFrameType()  === FrameType.TwoByOne && this.getMode() === GenericTileMode.ActionMode && this.getState() === LoadState.Loaded) {
+			this._applyExtraHeight();
+		}
+
 		this.onDragComplete();
 	};
+	/**
+	 * Increases the height of the TileContent when the header-text has one line
+	 * @private
+	 */
+	GenericTile.prototype._applyExtraHeight = function(){
+		var iHeight = this.getDomRef("hdr-text").offsetHeight,
+			iLineHeight = parseInt(getComputedStyle(this.getDomRef("title")).lineHeight.slice(0,2)),
+			iHeaderLines = Math.ceil(iHeight / iLineHeight);
+		if (iHeaderLines === 1 && !this.getHeaderImage()) {
+			this.getDomRef("content").classList.add("sapMGTFtrMarginTop");
+		} else {
+			this.getDomRef("content").classList.remove("sapMGTFtrMarginTop");
+		}
+	};
+
 	GenericTile.prototype._setMaxLines = function() {
 		var sFrameType = this.getFrameType(),
 			iLines = sFrameType === FrameType.OneByOne || sFrameType === FrameType.TwoByHalf ? 1 : 2;
@@ -935,7 +1007,10 @@ sap.ui.define([
 	};
 
 	/* --- Event Handling --- */
-	GenericTile.prototype.ontouchstart = function () {
+	GenericTile.prototype.ontouchstart = function (event) {
+		if (event && event.target.id.indexOf("-action-more") === -1 && this.getDomRef()) {
+			this.getDomRef().classList.remove("sapMGTActionButtonPress"); // Sets focus on the tile when clicked other than the action-More Button in Icon mode
+		}
 		this.addStyleClass("sapMGTPressActive");
 		if (this.$("hover-overlay").length > 0) {
 			this.$("hover-overlay").addClass("sapMGTPressActive");
@@ -1232,7 +1307,7 @@ sap.ui.define([
 		var aContent = this.getTileContent();
 		var sAdditionalTooltip = this.getAdditionalTooltip();
 
-		if (!this._isInActionScope() && (this.getMode() === GenericTileMode.ContentMode || this.getMode() === GenericTileMode.ArticleMode)) {
+		if (!this._isInActionScope() && (this.getMode() === GenericTileMode.ContentMode || this.getMode() === GenericTileMode.ArticleMode || this.getMode() === GenericTileMode.ActionMode)) {
 			for (var i = 0; i < aContent.length; i++) {
 				if (typeof aContent[i]._getAriaAndTooltipText === "function") {
 					sText += (bIsFirst ? "" : "\n") + aContent[i]._getAriaAndTooltipText();
@@ -1305,7 +1380,7 @@ sap.ui.define([
 	 * If the application provides a specific tooltip, the returned string is equal to the tooltip text.
 	 * If the tooltip provided by the application is a string of only white spaces, the function returns null.
 	 *
-	 * @returns {string} Text for tooltip or null.
+	 * @returns {string|null} Text for tooltip or null.
 	 * @private
 	 */
 	GenericTile.prototype._getTooltipText = function () {
@@ -1608,9 +1683,16 @@ sap.ui.define([
 	 */
 	GenericTile.prototype._isIconMode = function () {
 		if (this.getMode() === GenericTileMode.IconMode
-			&& (this.getFrameType() === FrameType.OneByOne || this.getFrameType() === FrameType.TwoByHalf)
-			&& this.getBackgroundColor() && this.getTileIcon()){
-			return true;
+			&& (this.getFrameType() === FrameType.OneByOne || this.getFrameType() === FrameType.TwoByHalf)){
+				if (this.getTileIcon() && this.getBackgroundColor()) {
+					return true;
+				} else {
+					if (!this.getIconLoaded()) {
+						return true;
+					} else {
+						return false;
+					}
+				}
 		} else {
 			return false;
 		}

package/src/sap/m/GenericTileLineModeRenderer.js

@@ -68,7 +68,6 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS", "sap/ui/thirdpart
 			oRm.openStart("a", oControl);
 			oRm.attr("href", oControl.getUrl());
 			oRm.attr("rel", "noopener noreferrer");
-			oRm.attr("draggable", "false"); // <a> elements are draggable per default, use UI5 DnD instead
 		} else {
 			oRm.openStart("span", oControl);
 		}
@@ -90,6 +89,9 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS", "sap/ui/thirdpart
 		if (sScope ===  GenericTileScope.ActionMore) {
 				oRm.style("padding-right", "2.25rem");
 		}
+		if (sState !== LoadState.Disabled && sScope === GenericTileScope.ActionRemove) {
+			oRm.class("sapMGTAcionRemove");
+		}
 		oRm.class("sapMGTLineMode");
 		if (oControl.getSystemInfo() || oControl.getAppShortcut()) {
 			oRm.class("sapMGTInfoRendered");

package/src/sap/m/GenericTileRenderer.js

@@ -50,7 +50,7 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS"],
 		var isHalfFrame = frameType === frameTypes.OneByHalf || frameType === frameTypes.TwoByHalf;
 
 		// Render a link when URL is provided, not in action scope and the state is enabled
-		var bRenderLink = oControl.getUrl() && !oControl._isInActionScope() && sState !== LoadState.Disabled && !oControl._isNavigateActionEnabled() && !oControl._isActionMode();
+		var bRenderLink = oControl.getUrl() && (!oControl._isInActionScope() || oControl.getMode() === GenericTileMode.IconMode) && sState !== LoadState.Disabled && !oControl._isNavigateActionEnabled() && !oControl._isActionMode();
 
 		if (oControl._isInActionScope()) {
 			sScopeClass = encodeCSS("sapMGTScopeActions");
@@ -99,6 +99,9 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS"],
 		}
 		if (oControl._isIconMode()) {
 			oRm.class("sapMGTIconMode");
+			if (this._isThemeHighContrast()) {
+				oRm.class("HighContrastTile");
+			}
 		}
 		if (!bIsArticleMode && !bIsActionMode && frameType !== frameTypes.OneByHalf && (oControl.getSystemInfo() || oControl.getAppShortcut())) {
 			oRm.class("tileWithAppInfo");
@@ -107,8 +110,13 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS"],
 		if (oControl._isIconMode()) {
 			if (frameType === frameTypes.TwoByHalf) {
 				oRm.class("sapMGTTwoByHalf");
-			} else {
-				oRm.style("background-color", oControl.getBackgroundColor());
+			} else if (frameType === frameTypes.OneByOne) {
+				if (!this._isThemeHighContrast()) {
+					oRm.style("background-color", oControl.getBackgroundColor());
+				} else {
+					oRm.style("border-color", oControl.getBackgroundColor());
+					oRm.style("box-shadow", "0 0 0 1px" + oControl.getBackgroundColor());
+				}
 			}
 		}
 
@@ -151,46 +159,56 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS"],
 		var iLength = aTileContent.length;
 		var isFooterPresent = false;
 		var isContentPresent = false;
-		if (sState === LoadState.Loading) {
-			//Setplaceholders for IconMode.
-			if ( oControl._isIconMode() ) {
-				if (frameType === frameTypes.OneByOne) {
-					oRm.openStart("div").class("sapMGTContentShimmerPlaceholderItemOneByOne");
-					oRm.class("sapMGTContentShimmerPlaceholderWithDescriptionOneByOne");
-					oRm.openEnd();
-					oRm.openStart("div")
-						.class("sapMGTContentShimmerPlaceholderRowsOneByOne")
-						.openEnd();
-					oRm.openStart("div")
-						.class("sapMGTContentShimmerPlaceholderIconOneByOne")
-						.class("sapMGTLoadingShimmer")
-						.openEnd()
-						.close("div");
-					oRm.openStart("div")
-						.class("sapMGTContentShimmerPlaceholderItemTextOneByOne")
-						.class("sapMGTLoadingShimmer")
-						.openEnd()
-						.close("div");
-				} else {
-					oRm.openStart("div").class("sapMGTContentShimmerPlaceholderItemTwoByHalf");
-					oRm.class("sapMGTContentShimmerPlaceholderWithDescriptionTwoByHalf");
-					oRm.openEnd();
-					oRm.openStart("div")
-						.class("sapMGTContentShimmerPlaceholderRowsTwoByHalf")
-						.openEnd();
+		function renderLoadingShimmerIconMode(oRm, bIsLoading) {
+			if (frameType === frameTypes.OneByOne) {
+				oRm.openStart("div").class("sapMGTContentShimmerPlaceholderItemOneByOne");
+				oRm.class("sapMGTContentShimmerPlaceholderWithDescriptionOneByOne");
+				oRm.openEnd();
+				oRm.openStart("div")
+					.class("sapMGTContentShimmerPlaceholderRowsOneByOne")
+					.openEnd();
+				oRm.openStart("div")
+					.class("sapMGTContentShimmerPlaceholderIconOneByOne")
+					.class("sapMGTLoadingShimmer")
+					.openEnd()
+					.close("div");
+				if (bIsLoading){
 					oRm.openStart("div")
-						.class("sapMGTContentShimmerPlaceholderIconTwoByHalf")
-						.class("sapMGTLoadingShimmer")
-						.openEnd()
-						.close("div");
+					.class("sapMGTContentShimmerPlaceholderItemTextOneByOne")
+					.class("sapMGTLoadingShimmer")
+					.openEnd()
+					.close("div");
+				}
+			} else {
+				oRm.openStart("div").class("sapMGTContentShimmerPlaceholderItemTwoByHalf");
+				oRm.class("sapMGTContentShimmerPlaceholderWithDescriptionTwoByHalf");
+				if (!oControl.getIconLoaded() && !bIsLoading) {
+					oRm.class("sapMGTContentShimmerPlaceholderWithDescriptionTwoByHalfIconLoaded");
+				}
+				oRm.openEnd();
+				oRm.openStart("div")
+					.class("sapMGTContentShimmerPlaceholderRowsTwoByHalf")
+					.openEnd();
+				oRm.openStart("div")
+					.class("sapMGTContentShimmerPlaceholderIconTwoByHalf")
+					.class("sapMGTLoadingShimmer")
+					.openEnd()
+					.close("div");
+				if (bIsLoading){
 					oRm.openStart("div")
-						.class("sapMGTContentShimmerPlaceholderItemTextTwoByHalf")
-						.class("sapMGTLoadingShimmer")
-						.openEnd()
-						.close("div");
+					.class("sapMGTContentShimmerPlaceholderItemTextTwoByHalf")
+					.class("sapMGTLoadingShimmer")
+					.openEnd()
+					.close("div");
 				}
-				oRm.close("div");
-				oRm.close("div");
+			}
+			oRm.close("div");
+			oRm.close("div");
+		}
+		if (sState === LoadState.Loading) {
+			//Setplaceholders for IconMode.
+			if (oControl._isIconMode()) {
+				renderLoadingShimmerIconMode(oRm, true);
 			} else {
 				oRm.openStart("div").class("sapMGTContentShimmerPlaceholderItem");
 				oRm.class("sapMGTContentShimmerPlaceholderWithDescription");
@@ -217,7 +235,7 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS"],
 				oRm.close("div");
 			}
 		} else {
-			if (this._isValueColorValid(oControl.getValueColor())) {
+			if (!bIsActionMode && this._isValueColorValid(oControl.getValueColor())) {
 				oRm.openStart("div");
 				oRm.class("sapMGTCriticalBorder");
 				oRm.class(oControl.getValueColor());
@@ -226,21 +244,31 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS"],
 			}
 			//Set respective Class/ BackgroundColor for IconMode
 			if (oControl._isIconMode()) {
-				oRm.openStart("div");
-				if (frameType === frameTypes.OneByOne) {
-					oRm.class("sapMGTOneByOneIcon");
+				if (!oControl.getIconLoaded()) {
+					renderLoadingShimmerIconMode(oRm, false);
 				} else {
-					oRm.class("sapMGTTwoByHalfIcon");
-					oRm.style("background-color", oControl.getBackgroundColor());
-				}
-				oRm.openEnd();
-				if (oControl.getTileIcon()) {
-					var sAggregation = oControl._generateIconAggregation(oControl.getTileIcon());
-					if (sAggregation) {
-						oRm.renderControl(oControl.getAggregation(sAggregation));
+					oRm.openStart("div");
+					if (frameType === frameTypes.OneByOne) {
+						oRm.class("sapMGTOneByOneIcon");
+					} else {
+						oRm.class("sapMGTTwoByHalfIcon");
+						if (!this._isThemeHighContrast()) {
+							oRm.style("background-color", oControl.getBackgroundColor());
+						} else {
+							oRm.class("HighContrastTile");
+							oRm.style("border-color", oControl.getBackgroundColor());
+							oRm.style("box-shadow", "0 0 0 1px" + oControl.getBackgroundColor());
+						}
+					}
+					oRm.openEnd();
+					if (oControl.getTileIcon()) {
+						var sAggregation = oControl._generateIconAggregation(oControl.getTileIcon());
+						if (sAggregation) {
+							oRm.renderControl(oControl.getAggregation(sAggregation));
+						}
 					}
+					oRm.close("div");
 				}
-				oRm.close("div");
 			}
 
 			//Wrapper div for adjusting to Info Container
@@ -254,6 +282,9 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS"],
 			if (oControl._isIconMode() ){
 				if (frameType === frameTypes.OneByOne) {
 					var sClass = "sapMGTOneByOne";
+					if (!oControl.getIconLoaded()) {
+						sClass = sClass.concat(" sapMGTOneByOneIconLoaded");
+					}
 				} else if (frameType === frameTypes.TwoByHalf) {
 					var sClass = "TwoByHalf";
 				}
@@ -262,6 +293,9 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS"],
 			if (sTooltipText) {
 				oRm.attr("title", sTooltipText);
 			}
+			if (bIsActionMode && oControl.getFrameType() === frameTypes.TwoByOne && sHeaderImage) {
+				oRm.class("sapMGTHdrImage");
+			}
 			oRm.openEnd();
 
 			//Render Header Image
@@ -385,13 +419,13 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS"],
 		oRm.class("sapMGTTInfo");
 		oRm.openEnd();
 		if (oControl.getAppShortcut()) {
-			oRm.openStart("div", oControl.getId() + "-appShortcut");
+			oRm.openStart("div", oControl.getId() + "-appShortcutWrapper");
 			oRm.class("sapMGTAppShortcutText").openEnd();
 			oRm.renderControl(oControl._oAppShortcut);
 			oRm.close("div");
 		}
 		if (oControl.getSystemInfo()) {
-			oRm.openStart("div", oControl.getId() + "-sytemInfo");
+			oRm.openStart("div", oControl.getId() + "-sytemInfoWrapper");
 			if (oControl.getAppShortcut() && oControl.getSystemInfo()){
 				oRm.class("sapMGTMarginTop4px");
 			}
@@ -406,13 +440,6 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS"],
 	GenericTileRenderer._renderFocusDiv = function(oRm, oControl) {
 		oRm.openStart("div", oControl.getId() + "-focus");
 		oRm.class("sapMGTFocusDiv");
-		if (oControl._isIconMode()) { //Set respective BorderRadius for IconMode
-			if (oControl.getFrameType() === frameTypes.OneByOne) {
-				oRm.style("border-radius", "1rem");
-			} else {
-				oRm.style("border-radius", "0.75rem");
-			}
-		}
 		oRm.openEnd();
 		oRm.close("div");
 	};
@@ -526,6 +553,15 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS"],
 		return false;
 	};
 
+	/**
+	 * Checks whether the current theme is a high contrast theme like sap_belize_hcb or sap_belize_hcw.
+	 * @returns {boolean} True if the theme name contains hcb or hcw, false otherwise
+	 * @private
+	 */
+	GenericTileRenderer._isThemeHighContrast = function() {
+		return /(hcw|hcb)/g.test(sap.ui.getCore().getConfiguration().getTheme());
+	};
+
 	return GenericTileRenderer;
 
 }, /* bExport= */true);

package/src/sap/m/GroupHeaderListItem.js

@@ -30,7 +30,7 @@ sap.ui.define(["sap/ui/core/library", "./library", "./ListItemBase", "./GroupHea
 	 * @extends sap.m.ListItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.101.0
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public