@openui5/sap.m 1.102.2 → 1.104.0

package/src/sap/m/GrowingEnablement.js

@@ -13,7 +13,9 @@ sap.ui.define([
 	'sap/ui/base/ManagedObjectMetadata',
 	'sap/ui/core/HTML',
 	'sap/m/CustomListItem',
-	'sap/base/security/encodeXML'
+	'sap/base/security/encodeXML',
+	'sap/ui/core/Core',
+	"sap/ui/thirdparty/jquery"
 ],
 	function(
 		BaseObject,
@@ -23,7 +25,9 @@ sap.ui.define([
 		ManagedObjectMetadata,
 		HTML,
 		CustomListItem,
-		encodeXML
+		encodeXML,
+		Core,
+		jQuery
 	) {
 	"use strict";
 
@@ -128,14 +132,43 @@ sap.ui.define([
 			}
 		},
 
+		onsapdown: function(oEvent) {
+			// Navigate from last item to growing trigger and vice versa via arrow keys
+			var oControl = this._oControl;
+			if (oControl._oItemNavigation && !oEvent.isMarked()) {
+				var aItemDomRefs = oControl._oItemNavigation.getItemDomRefs();
+				var sDir = oControl.getGrowingDirection();
+				if ((sDir != ListGrowingDirection.Upwards && oEvent.type == "sapdown" && oEvent.target === aItemDomRefs[aItemDomRefs.length - 1])
+						|| (sDir == ListGrowingDirection.Upwards && oEvent.type == "sapup" && oEvent.target === aItemDomRefs[0])) {
+					var $Trigger = oControl.$("trigger");
+					$Trigger.trigger("focus");
+					oEvent.setMarked();
+					oEvent.stopImmediatePropagation(); // to prevent ItemNavigation
+				} else if ((sDir == ListGrowingDirection.Upwards && oEvent.type == "sapdown")
+						|| (sDir != ListGrowingDirection.Upwards && oEvent.type == "sapup")
+						&& oEvent.target === oControl.getDomRef("trigger")) {
+					jQuery(aItemDomRefs[oEvent.type == "sapdown" ? 0 : aItemDomRefs.length - 1]).trigger("focus");
+					oEvent.setMarked();
+				}
+			}
+		},
+
+		onsapup: function(oEvent) {
+			return this.onsapdown(oEvent);
+		},
+
 		setTriggerText : function(sText) {
 			this._oControl.$("triggerText").text(sText);
 		},
 
 		// reset paging on rebind
-		reset : function() {
+		reset : function(bPageSizeOnly) {
 			this._iLimit = 0;
 
+			if (bPageSizeOnly) {
+				return;
+			}
+
 			// if factory function is used we do not activate the replace option of the extended change detection
 			var oBindingInfo = this._oControl.getBindingInfo("items");
 			this._oControl.oExtendedChangeDetectionConfig = (!oBindingInfo || !oBindingInfo.template) ? null : {replace: true};
@@ -225,7 +258,7 @@ sap.ui.define([
 			var sTriggerID = this._oControl.getId() + "-trigger",
 				sTriggerText = this._oControl.getGrowingTriggerText();
 
-			sTriggerText = sTriggerText || sap.ui.getCore().getLibraryResourceBundle("sap.m").getText("LOAD_MORE_DATA");
+			sTriggerText = sTriggerText || Core.getLibraryResourceBundle("sap.m").getText("LOAD_MORE_DATA");
 			this._oControl.addNavSection(sTriggerID);
 
 			if (this._oTrigger) {
@@ -244,6 +277,7 @@ sap.ui.define([
 										'<span class="sapMSLITitle" id="' + sTriggerID + 'Text">' + encodeXML(sTriggerText) + '</span>' +
 									'</div>' +
 									'<div class="sapMGrowingListDescription sapMSLIDescription" id="' + sTriggerID + 'Info"></div>' +
+									'<div class="sapUiInvisibleText" id="' + sTriggerID + 'Message"></div>' +
 								'</div>'
 				})
 			}).setParent(this._oControl, null, true).attachPress(this.requestNewPage, this).addDelegate({
@@ -263,7 +297,8 @@ sap.ui.define([
 					$oTrigger.attr({
 						"tabindex": 0,
 						"role": "button",
-						"aria-labelledby": sTriggerID + "Text" + " " + sTriggerID + "Info"
+						"aria-labelledby": sTriggerID + "Text",
+						"aria-describedby": sTriggerID + "Message"
 					});
 				}
 			}, this);
@@ -278,7 +313,14 @@ sap.ui.define([
 
 		// returns the growing information to be shown at the growing button
 		_getListItemInfo : function() {
-			return ("[ " + this._iRenderedDataItems + " / " + NumberFormat.getFloatInstance().format(this._oControl.getMaxItemsCount()) + " ]");
+			var aCounts = this._getItemCounts();
+			var oFormat = NumberFormat.getFloatInstance();
+			return "[ " + oFormat.format(aCounts[0]) + " / " + oFormat.format(aCounts[1]) + " ]";
+		},
+
+		// returns the item counts for the growing information (current vs. total)
+		_getItemCounts : function() {
+			return [this._iRenderedDataItems, this._oControl.getMaxItemsCount()];
 		},
 
 		// returns the first sorters grouping path when available
@@ -452,7 +494,7 @@ sap.ui.define([
 				}
 			}
 
-			this._oRM = this._oRM || sap.ui.getCore().createRenderManager();
+			this._oRM = this._oRM || Core.createRenderManager();
 			for (var i = 0; i < iLength; i++) {
 				this._oRM.renderControl(this._aChunk[i]);
 			}
@@ -499,8 +541,11 @@ sap.ui.define([
 
 		// destroy a single list item
 		deleteListItem : function(iIndex) {
-			this._oControl.getItems(true)[iIndex].destroy(true);
-			this._iRenderedDataItems--;
+			var oItem = this._oControl.getItems(true)[iIndex];
+			if (oItem) {
+				this._oControl.getItems(true)[iIndex].destroy(true);
+				this._iRenderedDataItems--;
+			}
 		},
 
 		/**
@@ -592,7 +637,7 @@ sap.ui.define([
 			if (!aContexts.length) {
 				// no context, destroy list items
 				this.destroyListItems();
-			} else if (!oControl.getItemsContainerDomRef()) {
+			} else if (!aItems.length && !oControl.getItemsContainerDomRef()) {
 				// no dom ref for compatibility reason start from scratch
 				this.rebuildListItems(aContexts, oBindingInfo);
 			} else if (!aDiff || !aItems.length && aDiff.length) {
@@ -742,6 +787,10 @@ sap.ui.define([
 				} else {
 					if (bLengthFinal) {
 						oControl.$("triggerInfo").css("display", "block").text(this._getListItemInfo());
+						var aCounts = this._getItemCounts();
+						oControl.$("triggerMessage").text(Core.getLibraryResourceBundle("sap.m").getText("LOAD_MORE_DATA_ACC_WITH_COUNT", aCounts));
+					} else {
+						oControl.$("triggerMessage").text(Core.getLibraryResourceBundle("sap.m").getText("LOAD_MORE_DATA_ACC"));
 					}
 
 					oControl.$("triggerList").css("display", "");

package/src/sap/m/GrowingList.js

@@ -22,7 +22,7 @@ sap.ui.define(['./List', './library', './GrowingListRenderer'],
 	 * @extends sap.m.List
 	 *
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/HBox.js

@@ -25,7 +25,7 @@ sap.ui.define(['./FlexBox', './library', './HBoxRenderer'],
 	 * @extends sap.m.FlexBox
 	 *
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/HeaderContainer.js

@@ -125,7 +125,7 @@ sap.ui.define([
 		 * @since 1.44.0
 		 *
 		 * @author SAP SE
-		 * @version 1.102.2
+		 * @version 1.104.0
 		 *
 		 * @public
 		 * @alias sap.m.HeaderContainer
@@ -315,11 +315,11 @@ sap.ui.define([
 				if (!this._isMobileView()) {
 					this._oArrowPrev = new Icon({
 						id: this.getId() + "-scrl-prev-button"
-					}).addStyleClass("sapMHdrCntrBtn").addStyleClass("sapMHdrCntrLeft");
+					}).addStyleClass("sapMHdrCntrBtn").addStyleClass("sapMHdrCntrLeft").addStyleClass("sapMHdrCntrBtnIcon");
 					this.setAggregation("_prevButton", this._oArrowPrev, true);
 					this._oArrowNext = new Icon({
 						id: this.getId() + "-scrl-next-button"
-					}).addStyleClass("sapMHdrCntrBtn").addStyleClass("sapMHdrCntrRight");
+					}).addStyleClass("sapMHdrCntrBtn").addStyleClass("sapMHdrCntrRight").addStyleClass("sapMHdrCntrBtnIcon");
 					this.setAggregation("_nextButton", this._oArrowNext, true);
 				}
 			}
@@ -338,9 +338,6 @@ sap.ui.define([
 							this._oItemNavigation.attachEvent(ItemNavigation.Events.BorderReached, this._handleBorderReached, this);
 							this._oItemNavigation.attachEvent(ItemNavigation.Events.AfterFocus, this._handleAfterFocus, this);
 							this._oItemNavigation.attachEvent(ItemNavigation.Events.BeforeFocus, this._handleBeforeFocus, this);
-							if (Device.browser.msie || Device.browser.edge) {
-								this._oItemNavigation.attachEvent(ItemNavigation.Events.FocusAgain, this._handleFocusAgain, this);
-							}
 						}
 						this._oItemNavigation.setRootDomRef(oFocusRef);
 						this._oItemNavigation.setItemDomRefs(aDomRefs);
@@ -646,7 +643,7 @@ sap.ui.define([
 			if (!this._bRtl) {
 				iScrollLeft = oDomRef.scrollLeft;
 				iScrollWidth = oDomRef.scrollWidth;
-				iClientWidth = oDomRef.clientWidth + (Device.browser.msie ? 1 : 0);
+				iClientWidth = oDomRef.clientWidth;
 				iScrollTarget = iScrollLeft + delta;
 				iPaddingWidth = parseFloat(this.$("scroll-area").css("padding-left"));
 
@@ -927,7 +924,7 @@ sap.ui.define([
 				}
 				if (this._bRtl) {
 					var iScrollLeftRTL = jQuery(oBarHead).scrollLeftRTL();
-					if (iScrollLeftRTL > ((Device.browser.msie || Device.browser.edge) ? 1 : 0)) {
+					if (iScrollLeftRTL > 0) {
 						bScrollForward = true;
 					}
 				} else if (iScrollLeft > iFirst) {
@@ -1027,9 +1024,6 @@ sap.ui.define([
 		};
 
 		HeaderContainer.prototype._handleBorderReached = function (oEvt) {
-			if (Device.browser.msie && this.bScrollInProcess) {
-				return;
-			}
 			var iIndex = oEvt.getParameter("index");
 			if (iIndex === 0) {
 				this._scroll(this._getScrollValue(false), this.getScrollTime());
@@ -1039,14 +1033,6 @@ sap.ui.define([
 		};
 
 		HeaderContainer.prototype._handleAfterFocus = function (oEvt) {
-			//For Edge and IE on mousedown input element not getting focused.Hence setting focus manually.
-			var oSrcEvent = oEvt.getParameter("event");
-			if ((Device.browser.msie || Device.browser.edge) && oSrcEvent.type === "mousedown" && oSrcEvent.srcControl instanceof sap.m.Input) {
-				oSrcEvent.srcControl.focus();
-			}
-			if (Device.browser.msie && this.bScrollInProcess) {
-				return;
-			}
 			var iIndex = oEvt.getParameter("index");
 			if (iIndex === 0) {
 				this._scroll(this._getScrollValue(false), this.getScrollTime());
@@ -1057,11 +1043,6 @@ sap.ui.define([
 		};
 
 		HeaderContainer.prototype._handleFocusAgain = function (oEvt) {
-			//For Edge and IE on mousedown input element not getting focused.Hence setting focus manually.
-			var oSrcEvent = oEvt.getParameter("event");
-			if ((Device.browser.msie || Device.browser.edge) && oSrcEvent.type === "mousedown" && oSrcEvent.srcControl instanceof sap.m.Input) {
-				oSrcEvent.srcControl.focus();
-			}
 			oEvt.getParameter("event").preventDefault();
 		};
 

package/src/sap/m/HeaderContainerItemNavigator.js

@@ -19,7 +19,7 @@ sap.ui.define([
 	 * @since 1.67.0
 	 *
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 *
 	 * @constructor
 	 * @alias sap.m.HeaderContainerItemNavigator

package/src/sap/m/IconTabBar.js

@@ -94,7 +94,7 @@ sap.ui.define([
 	 * @implements sap.m.ObjectHeaderContainer, sap.f.IDynamicPageStickyContent
 	 *
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 *
 	 * @public
 	 * @alias sap.m.IconTabBar
@@ -201,6 +201,7 @@ sap.ui.define([
 			 * Specifies whether tab reordering is enabled. Relevant only for desktop devices.
 			 * The {@link sap.m.IconTabSeparator sap.m.IconTabSeparator} cannot be dragged and dropped
 			 * Items can be moved around {@link sap.m.IconTabSeparator sap.m.IconTabSeparator}
+			 * Reordering is enabled via keyboard using <code>Ctrl</code> + arrow keys (Windows) and <code>Control</code> + arrow keys (Mac OS)
 			 * @since 1.46
 			 */
 			enableTabReordering : {type : "boolean", group : "Behavior", defaultValue : false},

package/src/sap/m/IconTabBarSelectList.js

@@ -38,7 +38,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/m/IconTabFilter.js

@@ -94,7 +94,7 @@ sap.ui.define([
 	 * @implements sap.m.IconTab
 	 *
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 *
 	 * @constructor
 	 * @public
@@ -305,14 +305,14 @@ sap.ui.define([
 
 		oIconTabBar = oIconTabHeader.getParent();
 
-		if (!(oIconTabBar instanceof sap.m.IconTabBar)) {
+		if (!(oIconTabBar && oIconTabBar.isA("sap.m.IconTabBar"))) {
 			oIconTabHeader.invalidate();
 			return;
 		}
 
 		oObjectHeader = oIconTabBar.getParent();
 
-		if (oObjectHeader instanceof sap.m.ObjectHeader) {
+		if (oObjectHeader && oObjectHeader.isA("sap.m.ObjectHeader")) {
 			// invalidate the object header to re-render IconTabBar content and header
 			oObjectHeader.invalidate();
 		} else {
@@ -338,7 +338,7 @@ sap.ui.define([
 				Item.prototype.setProperty.call(this, sPropertyName, oValue, true);
 				if (!bSuppressInvalidate) {
 					var oIconTabHeader = this.getParent();
-					if (oIconTabHeader instanceof sap.m.IconTabHeader) {
+					if (oIconTabHeader && oIconTabHeader.isA("sap.m.IconTabHeader")) {
 						oIconTabHeader.invalidate();
 					}
 				}

package/src/sap/m/IconTabFilterExpandButtonBadge.js

@@ -31,7 +31,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/m/IconTabHeader.js

@@ -77,7 +77,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 *
 	 * @constructor
 	 * @public
@@ -141,6 +141,7 @@ sap.ui.define([
 			 * Specifies whether tab reordering is enabled. Relevant only for desktop devices.
 			 * The {@link sap.m.IconTabSeparator sap.m.IconTabSeparator} cannot be dragged  and dropped
 			 * Items can be moved around {@link sap.m.IconTabSeparator sap.m.IconTabSeparator}
+			 * Reordering is enabled via keyboard using <code>Ctrl</code> + arrow keys (Windows) and <code>Control</code> + arrow keys (Mac OS)
 			 * @since 1.46
 			 */
 			enableTabReordering : {type : "boolean", group : "Behavior", defaultValue : false},
@@ -426,7 +427,7 @@ sap.ui.define([
 		for (var i = 0; i < aItems.length; i++) {
 			oItem = aItems[i];
 
-			if (oItem instanceof IconTabFilter == false) {
+			if (!oItem.isA("sap.m.IconTabFilter") || !oItem.getVisible()) {
 				continue;
 			}
 
@@ -436,6 +437,7 @@ sap.ui.define([
 				break;
 			}
 		}
+
 		this._oItemNavigation.setFocusedIndex(iIndex);
 	};
 
@@ -481,6 +483,10 @@ sap.ui.define([
 	 * @return {this} this pointer for chaining
 	 */
 	IconTabHeader.prototype.setSelectedKey = function (sKey) {
+		if (sKey === this.getSelectedKey()) {
+			return this;
+		}
+
 		var aItems = this.getTabFilters(),
 			bIsParentIconTabBar = this._isInsideIconTabBar(),
 			bApiChange = true,
@@ -1481,7 +1487,12 @@ sap.ui.define([
 			return;
 		}
 
-		this.setProperty("selectedKey", this.oSelectedItem._getNonEmptyKey(), true);
+		sSelectedKey = this.oSelectedItem._getNonEmptyKey();
+		this.setProperty("selectedKey", sSelectedKey, true);
+		if (bIsParentIconTabBar) {
+			this.getParent().setProperty("selectedKey", sSelectedKey, true);
+		}
+
 	};
 
 	/**

package/src/sap/m/IconTabSeparator.js

@@ -36,7 +36,7 @@ sap.ui.define([
 	 * @implements sap.m.IconTab
 	 *
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/IllustratedMessage.js

@@ -82,7 +82,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 *
 	 * @constructor
 	 * @public
@@ -115,6 +115,14 @@ sap.ui.define([
 				 */
 				enableFormattedText: { type: "boolean", group: "Appearance", defaultValue: false },
 
+				/**
+				 * Defines whether the <code>IllustratedMessage</code> would resize itself according to it's height
+				 * if <code>illustrationSize</code> property is set to <code>IllustratedMessageSize.Auto</code>.
+				 *
+				 * @since 1.104
+				 */
+				enableVerticalResponsiveness: { type: "boolean", group: "Appearance", defaultValue: false },
+
 				/**
 				 * Determines which illustration breakpoint variant is used.
 				 *
@@ -258,6 +266,12 @@ sap.ui.define([
 		BASE: 259
 	};
 
+	IllustratedMessage.BREAK_POINTS_HEIGHT = {
+		DIALOG: 451,
+		SPOT: 296,
+		BASE: 154
+	};
+
 	IllustratedMessage.MEDIA = {
 		BASE: "sapMIllustratedMessage-Base",
 		SPOT: "sapMIllustratedMessage-Spot",
@@ -274,6 +288,7 @@ sap.ui.define([
 	 */
 
 	IllustratedMessage.prototype.init = function () {
+		this._sLastKnownMedia = null;
 		this._updateInternalIllustrationSetAndType(this.getIllustrationType());
 	};
 
@@ -477,14 +492,16 @@ sap.ui.define([
 	 */
 	IllustratedMessage.prototype._updateDomSize = function () {
 		var oDomRef = this.getDomRef(),
-			sSize;
+			sSize, sCustomSize;
 
 		if (oDomRef) {
 			sSize = this.getIllustrationSize();
 			if (sSize === IllustratedMessageSize.Auto) {
-				this._updateMedia(oDomRef.getBoundingClientRect().width);
+				this._updateMedia(oDomRef.getBoundingClientRect().width, oDomRef.getBoundingClientRect().height);
 			} else {
-				this._updateMediaStyle(IllustratedMessage.MEDIA[sSize.toUpperCase()]);
+				sCustomSize = IllustratedMessage.MEDIA[sSize.toUpperCase()];
+				this._updateMediaStyle(sCustomSize);
+				this._updateSymbol(sCustomSize);
 			}
 		}
 
@@ -507,50 +524,72 @@ sap.ui.define([
 	 * @private
 	 */
 	IllustratedMessage.prototype._onResize = function (oEvent) {
-		var iCurrentWidth = oEvent.size.width;
+		var iCurrentWidth = oEvent.size.width,
+			iCurrentHeight = oEvent.size.height;
 
-		this._updateMedia(iCurrentWidth);
+		this._updateMedia(iCurrentWidth, iCurrentHeight);
 	};
 
 	/**
-	 * Updates the media size of the control based on its own width, not on the entire screen size (which media query does).
+	 * Updates the media size of the control based on its own width and height, not on the entire screen size (which media query does).
 	 * @param {number} iWidth - the actual width of the control
+	 * @param {number} iHeight - the actual height of the control
 	 * @private
 	 */
-	IllustratedMessage.prototype._updateMedia = function (iWidth) {
-		if (!iWidth) {
+	IllustratedMessage.prototype._updateMedia = function (iWidth, iHeight) {
+		var bVertical = this.getEnableVerticalResponsiveness(),
+			sNewMedia;
+
+		if (!iWidth && !iHeight) {
 			return;
 		}
 
-		if (iWidth <= IllustratedMessage.BREAK_POINTS.BASE) {
-			this._updateMediaStyle(IllustratedMessage.MEDIA.BASE);
-		} else if (iWidth <= IllustratedMessage.BREAK_POINTS.SPOT) {
-			this._updateMediaStyle(IllustratedMessage.MEDIA.SPOT);
-		} else if (iWidth <= IllustratedMessage.BREAK_POINTS.DIALOG) {
-			this._updateMediaStyle(IllustratedMessage.MEDIA.DIALOG);
+		if (iWidth <= IllustratedMessage.BREAK_POINTS.BASE || (iHeight <= IllustratedMessage.BREAK_POINTS_HEIGHT.BASE && bVertical)) {
+			sNewMedia = IllustratedMessage.MEDIA.BASE;
+		} else if (iWidth <= IllustratedMessage.BREAK_POINTS.SPOT || (iHeight <= IllustratedMessage.BREAK_POINTS_HEIGHT.SPOT && bVertical)) {
+			sNewMedia = IllustratedMessage.MEDIA.SPOT;
+		} else if (iWidth <= IllustratedMessage.BREAK_POINTS.DIALOG || (iHeight <= IllustratedMessage.BREAK_POINTS_HEIGHT.DIALOG && bVertical)) {
+			sNewMedia = IllustratedMessage.MEDIA.DIALOG;
 		} else {
-			this._updateMediaStyle(IllustratedMessage.MEDIA.SCENE);
+			sNewMedia = IllustratedMessage.MEDIA.SCENE;
 		}
+
+		this._updateMediaStyle(sNewMedia);
+		this._updateSymbol(sNewMedia);
 	};
 
 	/**
-	 * It puts the appropriate classes on the control and updates illustration's symbol based on the current media size.
+	 * It puts the appropriate classes on the control based on the current media size.
 	 * @param {string} sCurrentMedia
 	 * @private
 	 */
 	IllustratedMessage.prototype._updateMediaStyle = function (sCurrentMedia) {
+		if (this._sLastKnownMedia !== sCurrentMedia) {
+			this._sLastKnownMedia = sCurrentMedia;
+		} else {
+			return; // No need to iterate over the media classes if the media is the same as the one previously used
+		}
 		Object.keys(IllustratedMessage.MEDIA).forEach(function (sMedia) {
-			var bEnable = sCurrentMedia === IllustratedMessage.MEDIA[sMedia],
-				sIdMedia = sMedia.charAt(0) + sMedia.slice(1).toLowerCase();
+			var bEnable = sCurrentMedia === IllustratedMessage.MEDIA[sMedia];
 			this.toggleStyleClass(IllustratedMessage.MEDIA[sMedia], bEnable);
-			if (bEnable && sCurrentMedia !== IllustratedMessage.MEDIA.BASE) { // No need to require a resource for BASE illustrationSize, since there is none
-				this._getIllustration().setSet(this._sIllustrationSet, true)
-					.setMedia(sIdMedia, true)
-					.setType(this._sIllustrationType);
-			}
 		}, this);
 	};
 
+	/**
+	 * Updates illustration's symbol based on the current media size.
+	 * @param {string} sCurrentMedia
+	 * @private
+	 */
+	IllustratedMessage.prototype._updateSymbol = function (sCurrentMedia) {
+		var sIdMedia = sCurrentMedia.substring(sCurrentMedia.indexOf('-') + 1);
+
+		if (sCurrentMedia !== IllustratedMessage.MEDIA.BASE) { // No need to require a resource for BASE illustrationSize, since there is none
+			this._getIllustration().setSet(this._sIllustrationSet, true)
+				.setMedia(sIdMedia, true)
+				.setType(this._sIllustrationType);
+		}
+	};
+
 	/**
 	 * ATTACH/DETACH HANDLERS
 	 */

package/src/sap/m/IllustratedMessageRenderer.js

@@ -23,26 +23,30 @@ sap.ui.define([], function () {
 	 */
 	IllustratedMessageRenderer.render = function (oRm, oIllustratedMessage) {
 		var oIllustratedMessageIllustration = oIllustratedMessage._getIllustration(),
-			oIllustratedMessageTitle = oIllustratedMessage._getTitle(),
-			oIllustratedMessageDescription = oIllustratedMessage._getDescription(),
-			oIllustratedMessageAdditionalContent = oIllustratedMessage.getAdditionalContent();
+			sIllustratedMessageTitle = oIllustratedMessage._getTitle(),
+			sIllustratedMessageDescription = oIllustratedMessage._getDescription(),
+			aIllustratedMessageAdditionalContent = oIllustratedMessage.getAdditionalContent(),
+			bIllustratedMessageEnableVerticalResponsiveness = oIllustratedMessage.getEnableVerticalResponsiveness();
 
 		// IllustratedMessage's Root DOM Element.
 		oRm.openStart("figure", oIllustratedMessage);
 		oRm.class("sapMIllustratedMessage");
+		if (bIllustratedMessageEnableVerticalResponsiveness) {
+			oRm.class("sapMIllustratedMessageScalable");
+		}
 		oRm.openEnd();
 
 			oRm.renderControl(oIllustratedMessageIllustration);
 
 			oRm.openStart("figcaption").openEnd();
-				oRm.renderControl(oIllustratedMessageTitle);
-				oRm.renderControl(oIllustratedMessageDescription.addStyleClass("sapMIllustratedMessageDescription"));
+				oRm.renderControl(sIllustratedMessageTitle);
+				oRm.renderControl(sIllustratedMessageDescription.addStyleClass("sapMIllustratedMessageDescription"));
 			oRm.close("figcaption");
 
 			oRm.openStart("div");
 			oRm.class("sapMIllustratedMessageAdditionalContent"); // helper class in order to hide the additional content when on Base breakpoint
 			oRm.openEnd();
-				oIllustratedMessageAdditionalContent.forEach(function (oControl) {
+				aIllustratedMessageAdditionalContent.forEach(function (oControl) {
 					oRm.renderControl(oControl);
 				});
 			oRm.close("div");

package/src/sap/m/Illustration.js

@@ -32,7 +32,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/IllustrationPool.js

@@ -211,6 +211,7 @@ sap.ui.define([
 			if (oDOMPool === null) {
 				oDOMPool = document.createElement("div");
 				oDOMPool.id = SAP_ILLUSTRATION_POOL_ID;
+				oDOMPool.ariaHidden = true;
 
 				Core.getStaticAreaRef().appendChild(oDOMPool);
 

package/src/sap/m/Image.js

@@ -57,7 +57,7 @@ sap.ui.define([
 	 * @implements sap.ui.core.IFormContent
 	 *
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 *
 	 * @public
 	 * @alias sap.m.Image

package/src/sap/m/ImageContent.js

@@ -33,7 +33,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 * @since 1.38
 	 *
 	 * @public