@openui5/sap.ui.unified 1.149.1 → 1.151.0

package/REUSE.toml

@@ -225,6 +225,16 @@ SPDX-FileCopyrightText = "jQuery Foundation and other contributors"
 SPDX-License-Identifier = "MIT"
 SPDX-FileComment = "these files belong to: QUnit 2.18"
 
+[[annotations]]
+path = [
+    "src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/qunit-2.26.0.css",
+    "src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/qunit-2.26.0.js"
+]
+precedence = "aggregate"
+SPDX-FileCopyrightText = "OpenJS Foundation and other contributors"
+SPDX-License-Identifier = "MIT"
+SPDX-FileComment = "these files belong to: QUnit 2.26.0"
+
 [[annotations]]
 path = "src/sap.ui.core/src/sap/ui/thirdparty/jquery-compat.js"
 precedence = "aggregate"
@@ -349,6 +359,20 @@ SPDX-FileCopyrightText = "2010-2022, Christian Johansen, christian@cjohansen.no"
 SPDX-License-Identifier = "BSD-3-Clause"
 SPDX-FileComment = "these files belong to: SinonJS 14"
 
+[[annotations]]
+path = "src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/sinon-22.0.0.js"
+precedence = "aggregate"
+SPDX-FileCopyrightText = "2010-2024, Christian Johansen, christian@cjohansen.no"
+SPDX-License-Identifier = "BSD-3-Clause"
+SPDX-FileComment = "these files belong to: SinonJS 22"
+
+[[annotations]]
+path = "src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/nise-6.1.5.js"
+precedence = "aggregate"
+SPDX-FileCopyrightText = "2010-2017, Christian Johansen, christian@cjohansen.no"
+SPDX-License-Identifier = "BSD-3-Clause"
+SPDX-FileComment = "these files belong to: nise"
+
 [[annotations]]
 path = "src/sap.ui.core/src/sap/ui/thirdparty/sinon-qunit.js"
 precedence = "aggregate"

package/THIRDPARTY.txt

@@ -6,31 +6,31 @@ The full text of all referenced licenses is appended at the end of this file.
 
 Library: sap.f:
 
-Component: UI5 Web Components, version: 2.19.2
+Component: UI5 Web Components, version: 2.24.0
 Copyright: SAP
 License: Apache-2.0
 License Text: https://github.com/UI5/openui5/blob/master/LICENSES/Apache-2.0.txt
 Contained in: src/sap.f/src/sap/f/thirdparty/**
 
-Component: UI5 Web Components Fiori, version: 2.19.2
+Component: UI5 Web Components Fiori, version: 2.24.0
 Copyright: SAP
 License: Apache-2.0
 License Text: https://github.com/UI5/openui5/blob/master/LICENSES/Apache-2.0.txt
 Contained in: src/sap.f/src/sap/f/thirdparty/**
 
-Component: UI5 Web Components Icons, version: 2.19.2
+Component: UI5 Web Components Icons, version: 2.24.0
 Copyright: SAP
 License: Apache-2.0
 License Text: https://github.com/UI5/openui5/blob/master/LICENSES/Apache-2.0.txt
 Contained in: src/sap.f/src/sap/f/thirdparty/**
 
-Component: UI5 Web Components Icons Business Suite, version: 2.19.2
+Component: UI5 Web Components Icons Business Suite, version: 2.24.0
 Copyright: SAP
 License: Apache-2.0
 License Text: https://github.com/UI5/openui5/blob/master/LICENSES/Apache-2.0.txt
 Contained in: src/sap.f/src/sap/f/thirdparty/**
 
-Component: UI5 Web Components Icons TNT, version: 2.19.2
+Component: UI5 Web Components Icons TNT, version: 2.24.0
 Copyright: SAP
 License: Apache-2.0
 License Text: https://github.com/UI5/openui5/blob/master/LICENSES/Apache-2.0.txt
@@ -134,6 +134,13 @@ License Text: https://github.com/UI5/openui5/blob/master/LICENSES/MIT.txt
 Contained in: src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/qunit-2.18.css
 	src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/qunit-2.18.js
 
+Component: QUnit 2.26.0, version: 2.26.0
+Copyright: OpenJS Foundation and other contributors
+License: MIT
+License Text: https://github.com/UI5/openui5/blob/master/LICENSES/MIT.txt
+Contained in: src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/qunit-2.26.0.css
+	src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/qunit-2.26.0.js
+
 Component: jQuery-Migrate, version: 3.3.1
 Copyright: OpenJS Foundation and other contributors
 License: MIT
@@ -227,6 +234,18 @@ License: BSD-3-Clause
 License Text: https://github.com/UI5/openui5/blob/master/LICENSES/BSD-3-Clause.txt
 Contained in: src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/sinon-14.0.js
 
+Component: SinonJS 22, version: 22.0.0
+Copyright: 2010-2024, Christian Johansen, christian@cjohansen.no
+License: BSD-3-Clause
+License Text: https://github.com/UI5/openui5/blob/master/LICENSES/BSD-3-Clause.txt
+Contained in: src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/sinon-22.0.0.js
+
+Component: nise, version: 6.1.5
+Copyright: 2010-2017, Christian Johansen, christian@cjohansen.no
+License: BSD-3-Clause
+License Text: https://github.com/UI5/openui5/blob/master/LICENSES/BSD-3-Clause.txt
+Contained in: src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/nise-6.1.5.js
+
 Component: Sinon-qunit, version: 2.0.0
 Copyright: 2010-2011, Christian Johansen
 License: BSD-3-Clause
@@ -248,7 +267,7 @@ License: MIT
 License Text: https://github.com/UI5/openui5/blob/master/LICENSES/MIT.txt
 Contained in: src/sap.ui.core/src/sap/ui/thirdparty/punycode.js
 
-Component: handlebars, version: 4.7.7
+Component: handlebars, version: 4.7.9
 Copyright: 2011-2019 by Yehuda Katz
 License: MIT
 License Text: https://github.com/UI5/openui5/blob/master/LICENSES/MIT.txt

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/sap.ui.unified",
-  "version": "1.149.1",
+  "version": "1.151.0",
   "description": "OpenUI5 UI Library sap.ui.unified",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -14,6 +14,6 @@
     "url": "https://github.com/UI5/openui5.git"
   },
   "dependencies": {
-    "@openui5/sap.ui.core": "1.149.1"
+    "@openui5/sap.ui.core": "1.151.0"
   }
 }

package/src/sap/ui/unified/.library

@@ -6,7 +6,7 @@
   <copyright>OpenUI5
  * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
-  <version>1.149.1</version>
+  <version>1.151.0</version>
 
   <documentation>Unified controls intended for both, mobile and desktop scenarios</documentation>
 

package/src/sap/ui/unified/Calendar.js

@@ -80,7 +80,7 @@ sap.ui.define([
 	 * Basic Calendar.
 	 * This calendar is used for DatePickers
 	 * @extends sap.ui.core.Control
-	 * @version 1.149.1
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public
@@ -201,6 +201,15 @@ sap.ui.define([
 			 */
 			showWeekNumbers : {type : "boolean", group : "Appearance", defaultValue : true},
 
+			/**
+			 * Determines whether the header of the week numbers column is displayed.
+			 * The column header text is translated according to the active language.
+			 *
+			 * <b>Note:</b> Takes effect only when <code>showWeekNumbers</code> is set to <code>true</code>.
+			 * @since 1.151
+			 */
+			showWeekNumbersHeader : {type : "boolean", group : "Appearance", defaultValue : false},
+
 			/**
 			 * Determines whether there is a shortcut navigation to Today. When used in Month, Year or
 			 * Year-range picker view, the calendar navigates to Day picker view.
@@ -620,6 +629,7 @@ sap.ui.define([
 			}
 			aMonths[i].displayDate(oDisplayDate.toLocalJSDate());
 			aMonths[i].setShowWeekNumbers(this.getShowWeekNumbers());
+			aMonths[i].setShowWeekNumbersHeader(this.getShowWeekNumbersHeader());
 		}
 
 		if (this._getMonthPicker()) {

package/src/sap/ui/unified/CalendarAppointment.js

@@ -15,7 +15,8 @@ sap.ui.define([
 	'./calendar/CalendarUtils',
 	'./library',
 	"sap/base/Log",
-	"sap/ui/core/date/UI5Date"
+	"sap/ui/core/date/UI5Date",
+	"sap/ui/core/library"
 ],
 	function(
 		DateTypeRange,
@@ -27,10 +28,14 @@ sap.ui.define([
 		CalendarUtils,
 		library,
 		Log,
-		UI5Date
+		UI5Date,
+		coreLibrary
 	) {
 	"use strict";
 
+	// shortcut for sap.ui.core.aria.HasPopup
+	const AriaHasPopup = coreLibrary.aria.HasPopup;
+
 	/**
 	 * Constructor for a new <code>CalendarAppointment</code>.
 	 *
@@ -43,7 +48,7 @@ sap.ui.define([
 	 *
 	 * Applications could inherit from this element to add own fields.
 	 * @extends sap.ui.unified.DateTypeRange
-	 * @version 1.149.1
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public
@@ -98,7 +103,21 @@ sap.ui.define([
 			 * This property will work only with full hex color with pound symbol, e.g.: #FF0000.
 			 * @since 1.46.0
 			 */
-			color: {type : "sap.ui.core.CSSColor", group : "Appearance", defaultValue : null}
+			color: {type : "sap.ui.core.CSSColor", group : "Appearance", defaultValue : null},
+
+			/**
+			 * Specifies the value of the <code>aria-haspopup</code> attribute
+			 *
+			 * If the value is <code>None</code>, the attribute will not be rendered. Otherwise it will be rendered with the selected value.
+			 *
+			 * NOTE: Use this property only when an <code>sap.ui.unified.CalendarAppointment</code> instance is active and related to a popover/popup.
+			 * The value needs to be equal to the main/root role of the popup - e.g. dialog,
+			 * menu or list (examples: if you have dialog -> dialog, if you have menu -> menu; if you have list -> list; if you have dialog containing a list -> dialog).
+			 * Do not use it, if you open a standard sap.m.Dialog, MessageBox or other type of modal dialogs.
+			 *
+			 * @since 1.150.0
+			 */
+			ariaHasPopup: { type: "sap.ui.core.aria.HasPopup", group: "Accessibility", defaultValue: AriaHasPopup.None }
 		},
 		aggregations: {
 			/**

package/src/sap/ui/unified/CalendarDateInterval.js

@@ -64,7 +64,7 @@ sap.ui.define([
 	 * @class
 	 * <code>CalendarDateInterval</code> only visualizes the dates in a one-line interval and allows the selection of a single day.
 	 * @extends sap.ui.unified.Calendar
-	 * @version 1.149.1
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/CalendarLegend.js

@@ -57,7 +57,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.149.1
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/CalendarLegendItem.js

@@ -21,7 +21,7 @@ sap.ui.define(['sap/ui/core/Element', './library'],
 	 * @class
 	 * Item to be displayed in a CalendarLegend.
 	 * @extends sap.ui.core.Element
-	 * @version 1.149.1
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/CalendarMonthInterval.js

@@ -65,7 +65,7 @@ sap.ui.define([
 	 * <b>Note:</b> UI5Date or JavaScript Date objects are used to set and return the months, mark them as selected or as a special type.
 	 * But the date part of the Date object is not used. If a Date object is returned the date will be set to the 1st of the corresponding month.
 	 * @extends sap.ui.core.Control
-	 * @version 1.149.1
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public
@@ -1218,6 +1218,10 @@ sap.ui.define([
 		var oDate = CalendarDate.fromLocalJSDate(oEvent.getParameter("date"));
 		var bNotVisible = oEvent.getParameter("notVisible");
 
+		if (this.getIntervalSelection()) {
+			this.getAggregation("monthsRow").setProperty("_focusedDate", oDate.toLocalJSDate());
+		}
+
 		_focusDate.call(this, oDate, bNotVisible);
 
 	}

package/src/sap/ui/unified/CalendarOneMonthInterval.js

@@ -57,7 +57,7 @@ sap.ui.define([
 		 * Navigation via year picker switches to the corresponding year and the same month as before the navigation.
 		 *
 		 * @extends sap.ui.unified.CalendarDateInterval
-		 * @version 1.149.1
+		 * @version 1.151.0
 		 *
 		 * @constructor
 		 * @private

package/src/sap/ui/unified/CalendarRow.js

@@ -84,7 +84,7 @@ sap.ui.define([
 	 * @class
 	 * A calendar row with a header and appointments. The Appointments will be placed in the defined interval.
 	 * @extends sap.ui.core.Control
-	 * @version 1.149.1
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/CalendarRowRenderer.js

@@ -17,7 +17,8 @@ sap.ui.define([
 	'sap/ui/unified/calendar/RecurrenceUtils',
 	'sap/base/Log',
 	// side effect: required by RenderManager#icon
-	'sap/ui/core/IconPool'
+	'sap/ui/core/IconPool',
+	'sap/ui/core/library'
 ],
 	function(
 		Element,
@@ -30,30 +31,35 @@ sap.ui.define([
 		InvisibleText,
 		UI5Date,
 		RecurrenceUtils,
-		Log
+		Log,
+		IconPool,
+		coreLibrary
 	) {
 		"use strict";
 
 
 	// shortcut for sap.ui.unified.CalendarDayType
-	var CalendarDayType = library.CalendarDayType;
+	const CalendarDayType = library.CalendarDayType;
 
 	// shortcut for sap.ui.unified.CalendarIntervalType
-	var CalendarIntervalType = library.CalendarIntervalType;
+	const CalendarIntervalType = library.CalendarIntervalType;
 
 	// shortcut for sap.ui.unified.CalendarAppointmentVisualization
-	var CalendarAppointmentVisualization = library.CalendarAppointmentVisualization;
+	const CalendarAppointmentVisualization = library.CalendarAppointmentVisualization;
 
 	// shortcut for sap.ui.unified.CalendarAppointmentHeight
-	var CalendarAppointmentHeight = library.CalendarAppointmentHeight;
+	const CalendarAppointmentHeight = library.CalendarAppointmentHeight;
 	/**
 	 * CalendarRow renderer.
 	 * @namespace
 	 */
-	var CalendarRowRenderer = {
+	const CalendarRowRenderer = {
 		apiVersion: 2
 	};
 
+	// shortcut for sap.ui.core.aria.HasPopup
+	const AriaHasPopup = coreLibrary.aria.HasPopup;
+
 	/**
 	 * Renders the HTML for the given control, using the provided {@link sap.ui.core.RenderManager}.
 	 *
@@ -105,6 +111,7 @@ sap.ui.define([
 		oRm.openStart("div", sId + "-Apps");
 		oRm.class("sapUiCalendarRowApps");
 		oRm.attr("role", "list");
+		oRm.attr("tabindex", "-1");
 		oRm.openEnd();
 
 		this.renderBeforeAppointments(oRm, oRow);
@@ -283,8 +290,7 @@ sap.ui.define([
 				if (!oPeriod.isRecurring()) {
 					return oPeriod.hasNonWorkingAtDate(oStartDateInterval);
 				}
-				const hasOccurrenceOnDate = RecurrenceUtils.hasOccurrenceOnDate.bind(oPeriod);
-				return hasOccurrenceOnDate(oStartDateInterval);
+				return RecurrenceUtils.hasOccurrenceOnDateCached.call(oPeriod, oStartDateInterval);
 			});
 
 		const aFilteredItemsForCurrentHours = aFilteredNonWorkingRange.filter((oPeriod) => {
@@ -467,6 +473,11 @@ sap.ui.define([
 
 		oRm.accessibilityState(oIntervalHeader.appointment, mAccProps);
 
+		var sAriaHasPopup = oIntervalHeader.appointment.getAriaHasPopup();
+		if (sAriaHasPopup !== AriaHasPopup.None) {
+			oRm.attr("aria-haspopup", sAriaHasPopup.toLowerCase());
+		}
+
 		oRm.openEnd(); //div element
 		oRm.openStart("div");
 
@@ -536,21 +547,21 @@ sap.ui.define([
 
 	CalendarRowRenderer.renderAppointment = function(oRm, oRow, oAppointmentInfo, aTypes, bRelativePos){
 
-		var oAppointment = oAppointmentInfo.appointment;
-		var sTooltip = oAppointment.getTooltip_AsString();
-		var sType = oAppointment.getType();
-		var sColor = oAppointment.getColor();
-		var sTitle = oAppointment.getTitle();
-		var sText = oAppointment.getText();
-		var sDescription = oAppointment.getDescription();
-		var sIcon = oAppointment.getIcon();
-		var sId = oAppointment.getId();
-		var bReducedHeight = oRow._getAppointmentReducedHeight(oAppointmentInfo);
-		var bAppointmentSelected = oAppointment.getSelected();
-		var bHasCustomContent = !!oAppointment.getCustomContent().length;
-
-		var aLabelledByIds = [InvisibleText.getStaticId("sap.m", "ACC_CTR_TYPE_LISTITEM"), InvisibleText.getStaticId("sap.ui.unified", "APPOINTMENT")];
-
+		const oAppointment = oAppointmentInfo.appointment;
+		const sTooltip = oAppointment.getTooltip_AsString();
+		const sType = oAppointment.getType();
+		const sColor = oAppointment.getColor();
+		const sTitle = oAppointment.getTitle();
+		const sText = oAppointment.getText();
+		const sDescription = oAppointment.getDescription();
+		const sIcon = oAppointment.getIcon();
+		const sId = oAppointment.getId();
+		const bReducedHeight = oRow._getAppointmentReducedHeight(oAppointmentInfo);
+		const bAppointmentSelected = oAppointment.getSelected();
+		const bHasCustomContent = !!oAppointment.getCustomContent().length;
+		const sAriaHasPopup = oAppointment.getAriaHasPopup();
+
+		let aLabelledByIds = [InvisibleText.getStaticId("sap.m", "ACC_CTR_TYPE_LISTITEM"), InvisibleText.getStaticId("sap.ui.unified", "APPOINTMENT")];
 		if (sTitle && !bHasCustomContent) {
 			aLabelledByIds.push(`${sId}-Title`);
 		}
@@ -634,6 +645,10 @@ sap.ui.define([
 			}
 		}
 
+		if (sAriaHasPopup !== AriaHasPopup.None) {
+			oRm.attr("aria-haspopup", sAriaHasPopup.toLowerCase());
+		}
+
 		oRm.accessibilityState(oAppointment, mAccProps);
 		oRm.openEnd(); //div element
 

package/src/sap/ui/unified/CalendarTimeInterval.js

@@ -78,7 +78,7 @@ sap.ui.define([
 	 * @class
 	 * Calendar with granularity of time items displayed in one line.
 	 * @extends sap.ui.core.Control
-	 * @version 1.149.1
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/CalendarWeekInterval.js

@@ -39,7 +39,7 @@ sap.ui.define(['sap/ui/unified/calendar/CalendarUtils', 'sap/ui/unified/calendar
 		 * its start date to the first date of the same week as the date the user chose.
 		 *
 		 * @extends sap.ui.unified.CalendarDateInterval
-		 * @version 1.149.1
+		 * @version 1.151.0
 		 *
 		 * @constructor
 		 * @private

package/src/sap/ui/unified/ColorPicker.js

@@ -72,7 +72,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.149.1
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public
@@ -1212,10 +1212,12 @@ sap.ui.define([
 	};
 
 	ColorPicker.prototype.exit = function() {
+		this._stopZoomWatch();
 		this._cleanup();
 	};
 
 	ColorPicker.prototype.onBeforeRendering = function() {
+		this._stopZoomWatch();
 		this._cleanup();
 		// Create the layout controls
 		this._createLayout();
@@ -2438,6 +2440,9 @@ sap.ui.define([
 			// toggle fields - HEX field will be visible initially on mobile
 			this._toggleFields();
 		}
+
+		this._bLastHighZoom = this._isHighZoom();
+		this._startZoomWatch();
 	};
 
 	/**
@@ -2652,6 +2657,46 @@ sap.ui.define([
 		}
 	};
 
+	ColorPicker.prototype._getViewportWidth = function() {
+		return (window.visualViewport && window.visualViewport.width) || window.innerWidth;
+	};
+
+	ColorPicker.prototype._isHighZoom = function() {
+		return this._getViewportWidth() <= 320;
+	};
+
+	ColorPicker.prototype._startZoomWatch = function() {
+		this._fnWindowResizeListener = function() {
+			if (!this.getDomRef()) { return; }
+			var bHighZoom = this._isHighZoom();
+			if (bHighZoom !== this._bLastHighZoom) {
+				this._bLastHighZoom = bHighZoom;
+				this.invalidate();
+			}
+		}.bind(this);
+		if (window.visualViewport) {
+			window.visualViewport.addEventListener("resize", this._fnWindowResizeListener);
+		}
+		window.addEventListener("resize", this._fnWindowResizeListener);
+	};
+
+	ColorPicker.prototype._stopZoomWatch = function() {
+		if (this._fnWindowResizeListener) {
+			window.removeEventListener("resize", this._fnWindowResizeListener);
+			if (window.visualViewport) {
+				window.visualViewport.removeEventListener("resize", this._fnWindowResizeListener);
+			}
+			this._fnWindowResizeListener = null;
+		}
+	};
+
+	ColorPicker.prototype._getEffectiveDisplayMode = function() {
+		if (this._isHighZoom()) {
+			return ColorPickerDisplayMode.Simplified;
+		}
+		return this.getDisplayMode();
+	};
+
 	return ColorPicker;
 
 });

package/src/sap/ui/unified/ColorPickerPopover.js

@@ -49,7 +49,7 @@ sap.ui.define([
 		 * A thin wrapper over {@link sap.ui.unified.ColorPicker} allowing the latter to be used in a popover.
 		 *
 		 * @extends sap.ui.core.Control
-		 * @version 1.149.1
+		 * @version 1.151.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/ui/unified/ColorPickerRenderer.js

@@ -28,8 +28,9 @@ sap.ui.define(['./ColorPickerDisplayMode', "sap/ui/Device", "sap/ui/core/Lib"],
 	 * @param {sap.ui.unified.ColorPicker} oControl an object representation of the control that should be rendered
 	 */
 	ColorPickerRenderer.render = function(oRm, oControl){
-		var sDisplayMode = oControl.getDisplayMode(),
-			bResponsive = oControl.bResponsive;
+		var sDisplayMode = oControl._getEffectiveDisplayMode(),
+			bResponsive = oControl.bResponsive,
+			bHighZoom = oControl._isHighZoom();
 
 		oRm.openStart("div", oControl);
 
@@ -49,6 +50,9 @@ sap.ui.define(['./ColorPickerDisplayMode', "sap/ui/Device", "sap/ui/core/Lib"],
 		if (Device.system.phone) {
 			oRm.class("sapUiCPPhone");
 		}
+		if (bHighZoom) {
+			oRm.class("sapUiCPHighZoom");
+		}
 		oRm.openEnd();
 
 		if (!bResponsive) {
@@ -85,8 +89,9 @@ sap.ui.define(['./ColorPickerDisplayMode', "sap/ui/Device", "sap/ui/core/Lib"],
 	};
 
 	ColorPickerRenderer.renderDefaultColorPicker = function(oRm, oControl) {
+		var bHighZoom = oControl._isHighZoom();
 		oRm.renderControl(oControl.getAggregation("_oCPBox"));
-		if (Device.system.phone) { //mobile
+		if (Device.system.phone && !bHighZoom) { //mobile
 			oRm.openStart("div");
 			oRm.class("sapUiCPPhoneContent");
 			oRm.openEnd();
@@ -97,6 +102,9 @@ sap.ui.define(['./ColorPickerDisplayMode', "sap/ui/Device", "sap/ui/core/Lib"],
 			oRm.close("div");
 			this.renderMobileSwatches(oRm, oControl);
 			oRm.close("div");
+		} else if (bHighZoom) { //mobile 200% zoom
+			this.renderSliders(oRm, oControl);
+			this.renderDesktopSwatchesAndHexFields(oRm, oControl);
 		} else { //desktop or tablet
 			this.renderSliders(oRm, oControl);
 			this.renderDesktopSwatchesAndHexFields(oRm, oControl);
@@ -105,7 +113,7 @@ sap.ui.define(['./ColorPickerDisplayMode', "sap/ui/Device", "sap/ui/core/Lib"],
 		oRm.openStart("div");
 		oRm.class("sapUiCPDefaultWrapper");
 		oRm.openEnd();
-		if (Device.system.phone) {
+		if (Device.system.phone && !bHighZoom) {
 			oRm.renderControl(oControl.getAggregation("_oHexField"));
 			oRm.openStart("div");
 			oRm.class("sapUiCPHexText");
@@ -210,8 +218,9 @@ sap.ui.define(['./ColorPickerDisplayMode', "sap/ui/Device", "sap/ui/core/Lib"],
 	};
 
 	ColorPickerRenderer.renderSimplifiedColorPicker = function(oRm, oControl) {
+		var bHighZoom = oControl._isHighZoom();
 		oRm.renderControl(oControl.getAggregation("_oCPBox"));
-		if (Device.system.phone) {
+		if (Device.system.phone && !bHighZoom) {
 			oRm.openStart("div");
 			oRm.class("sapUiCPPhoneContent");
 			oRm.openEnd();
@@ -232,6 +241,9 @@ sap.ui.define(['./ColorPickerDisplayMode', "sap/ui/Device", "sap/ui/core/Lib"],
 			oRm.close("div");
 			oRm.close("div");
 			oRm.close("div");
+		} else if (bHighZoom) { //mobile 200% zoom
+			oRm.renderControl(oControl.getAggregation("_oSlider"));
+			this.renderDesktopSwatchesAndHexFields(oRm, oControl);
 		} else {
 			oRm.renderControl(oControl.getAggregation("_oSlider"));
 			this.renderDesktopSwatchesAndHexFields(oRm, oControl);
@@ -245,6 +257,14 @@ sap.ui.define(['./ColorPickerDisplayMode', "sap/ui/Device", "sap/ui/core/Lib"],
 	 * @param {sap.ui.unified.ColorPicker} oControl an object representation of the control that should be rendered
 	 */
 	ColorPickerRenderer.renderDesktopSwatchesAndHexFields = function(oRm, oControl) {
+		var bHighZoom = oControl._isHighZoom();
+
+		if (bHighZoom) {
+			oRm.openStart("div");
+			oRm.class("sapUiCPHexRow");
+			oRm.openEnd();
+		}
+
 		oRm.openStart("div");
 		oRm.class("sapUiCPComparisonWrapper");
 		oRm.openEnd();
@@ -259,17 +279,31 @@ sap.ui.define(['./ColorPickerDisplayMode', "sap/ui/Device", "sap/ui/core/Lib"],
 		oRm.openEnd();
 		oRm.close("div");
 		oRm.close("div");
-		oRm.openStart("div");
-		oRm.class("sapUiCPHexWrapper");
-		oRm.openEnd();
-		oRm.openStart("span");
-		oRm.class("sapUiCPHexText");
-		oRm.openEnd();
-		oRm.text("Hex");
-		oRm.close("span");
-		oRm.close("div");
-		oRm.renderControl(oControl.getAggregation("_oHexField"));
 
+		if (bHighZoom) {
+			oRm.openStart("div");
+			oRm.class("sapUiCPHexWrapper");
+			oRm.openEnd();
+			oRm.renderControl(oControl.getAggregation("_oHexField"));
+			oRm.openStart("span");
+			oRm.class("sapUiCPHexText");
+			oRm.openEnd();
+			oRm.text("Hex");
+			oRm.close("span");
+			oRm.close("div");
+			oRm.close("div"); // close sapUiCPHexRow
+		} else {
+			oRm.openStart("div");
+			oRm.class("sapUiCPHexWrapper");
+			oRm.openEnd();
+			oRm.openStart("span");
+			oRm.class("sapUiCPHexText");
+			oRm.openEnd();
+			oRm.text("Hex");
+			oRm.close("span");
+			oRm.close("div");
+			oRm.renderControl(oControl.getAggregation("_oHexField"));
+		}
 	};
 
 	/**