@sapui5/sap.me 1.91.0 → 1.93.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapui5/sap.me",
-  "version": "1.91.0",
+  "version": "1.93.2",
   "description": "SAPUI5 Library sap.me",
   "homepage": "https://sap.github.io/ui5-tooling/pages/SAPUI5/",
   "author": "SAP SE (https://www.sap.com)",

package/src/sap/me/.library

@@ -7,7 +7,7 @@
 
         (c) Copyright 2009-2021 SAP SE. All rights reserved
     </copyright>
-    <version>1.91.0</version>
+    <version>1.93.2</version>
 
     <documentation>SAPUI5 library with controls specialized for mobile devices (extension).</documentation>
 

package/src/sap/me/Calendar.js

@@ -640,13 +640,13 @@ sap.ui.define([
 		if (typeof oDateStart == "string") {
 			// this will change the type of oDateStart from String to Date.
 			oUniversalDateStart = CalendarDate.parseFromToDateString(oDateStart);
-		}else if ( oDateStart instanceof Date){
+		} else if ( oDateStart instanceof Date){
 			oUniversalDateStart = new UniversalDate( oDateStart.getTime() );
 		}
 		if (typeof oDateEnd == "string") {
 			// this will change the type of oDateEnd from String to Date.
 			oUniversalDateEnd = CalendarDate.parseFromToDateString(oDateEnd);
-		}else if ( oDateEnd instanceof Date){
+		} else if ( oDateEnd instanceof Date){
 			oUniversalDateEnd = new UniversalDate( oDateEnd.getTime() );
 		}
 
@@ -660,6 +660,7 @@ sap.ui.define([
 			var aDates = [];
 			var oDateStartCopy = new UniversalDate(oUniversalDateStart.getTime());
 			var oDate;
+			// eslint-disable-next-line no-unmodified-loop-condition
 			while (oUniversalDateEnd - oDateStartCopy >= 0) {
 				oDate = new Date(oDateStartCopy.getTime());
 				aDates.push(oDate.toDateString());
@@ -676,7 +677,7 @@ sap.ui.define([
 			if (typeof oDate == "string") {
 				// Type change String to Date
 				oDate = CalendarDate.parseFromToDateString(oDate);
-			}else if ( oDate instanceof Date){
+			} else if ( oDate instanceof Date){
 				oDate = new UniversalDate( oDate.getTime() );
 			}
 			oDate = new Date(oDate.getTime());
@@ -791,7 +792,7 @@ sap.ui.define([
 
 	/**
 	 * Sets the current date of the calendar.
-	 * @param {String} strDate The Date to set, the format being identical to a date string produced by "toDateString".
+	 * @param {string} strDate The Date to set, the format being identical to a date string produced by "toDateString".
 	 *
 	 * @return {this} <code>this</code> to allow method chaining.
 	 * @public
@@ -803,7 +804,7 @@ sap.ui.define([
 
 	/**
 	 * Sets the current date of the calendar.
-	 * @param {String} strDate The Date to set, the format being identical to a date string produced by "toDateString".
+	 * @param {string} strDate The Date to set, the format being identical to a date string produced by "toDateString".
 	 * @param {boolean} bSuppressInvalidate Set to true to prevent invalidation of the control
 	 * @private
 	 */
@@ -818,7 +819,7 @@ sap.ui.define([
 	 * <B>IMPORTANT:</B> The only valid values for the created Date are: year, month, day.
 	 * Disregard any other value: hours, minutes, seconds, milliseconds...
 	 *
-	 * @param {String} strDate The date, produced by a former call to Date.toDateString.
+	 * @param {string} strDate The date, produced by a former call to Date.toDateString.
 	 * @throws {Error} If the string provided does not match a toDateString produced string.
 	 * @public
 	 * @static

package/src/sap/me/CalendarDate.js

@@ -88,7 +88,7 @@ sap.ui.define(['sap/ui/base/Object', 'sap/ui/core/date/UniversalDate', "sap/base
 		/**
 		 * Returns the 0 based month index of the month contained in the given string.
 		 * @private
-		 * @param {String} strMonth The 3 first letters of the month, in American English.
+		 * @param {string} strMonth The 3 first letters of the month, in American English.
 		 * This string should not contain unicode characters. It must also match the months 'created' by a call to Date.toDateString.
 		 * @return {number} A value between 0 and 11, matching the given month or -1 in case of error.
 		 */
@@ -103,7 +103,7 @@ sap.ui.define(['sap/ui/base/Object', 'sap/ui/core/date/UniversalDate', "sap/base
 		 * If the function detects that something is not right, then it will just call the Date constructor
 		 * and provide the string to it, as is. In that case, there will also be a warning log in the console.
 		 *
-		 * @param {String} fromToDateString The String to parse to create a Date.
+		 * @param {string} fromToDateString The String to parse to create a Date.
 		 * @param {boolean} bThrowOnParseError (Optional) Throws an error if the parsing. Default value is false.
 		 * @return {UniversalDate} The Date created from the string.
 		 * @throws {Error} If the string provided does not match a toDateString produced string.

package/src/sap/me/CalendarRenderer.js

@@ -50,7 +50,7 @@ sap.ui.define(['./CalendarDate', 'sap/ui/core/LocaleData', 'sap/ui/core/format/D
 		var i;
 		if (iMonths === 1) {
 			this._renderMonth(oRm, oControl, oControl._oInternalDate.getDateObject(), sNow);
-		}else {
+		} else {
 			var currentDate = oControl._oInternalDate.getCopyDateObject();
 			var iMonthToGoBack = Math.floor(iMonths / 2);
 			for (i = 0; i < iMonthToGoBack; i++) { // we go first back in time

package/src/sap/me/library.js

@@ -23,7 +23,7 @@ sap.ui.define(['sap/ui/core/Core', 'sap/ui/core/library'],
 	// delegate further initialization of this library to the Core
 	sap.ui.getCore().initLibrary({
 		name : "sap.me",
-		version: "1.91.0",
+		version: "1.93.2",
 		dependencies : ["sap.ui.core"],
 		types: [
 			"sap.me.CalendarDesign",

package/src/sap/me/themes/sap_horizon/Calendar.less

@@ -0,0 +1,291 @@
+/* ================================ */
+/* CSS for control sap.me/Calendar  */
+/* Horizon theme                    */
+/* ================================ */
+
+.sapMeCalendar {
+	background-color: @sapUiBaseBG;
+}
+
+.sapMeCalendar > .sapMeCalendarMonth > div.sapMeCalendarMonthName {
+	height: 3rem;
+	line-height: 3rem;
+	padding: 0;
+	font-family: @sapUiFontFamily;
+	font-size: 1rem;
+	color: @sapUiLink;
+}
+
+.sapMeCalendar > .sapMBtn > .sapMBtnContent {
+	font-size: 0;
+}
+
+.sapMeCalendar > .sapMeCalendarMonthNotSingle > div.sapMeCalendarMonthDayNames,
+.sapMeCalendar > .sapMeCalendarMonthNotSingle > div.sapMeCalendarMonthDays {
+	margin-left: 0.5rem;
+	margin-right: 0.5rem;
+}
+
+.sapMeCalendar > .sapMeCalendarPrevious {
+	font-size: 1.375rem;
+	color: @sapUiContentIconColor;
+	width: 3rem;
+	height: 3rem;
+	line-height: 3rem;
+}
+
+.sapMeCalendar > .sapMeCalendarNext {
+	font-size: 1.375rem;
+	color: @sapUiContentIconColor;
+	width: 3rem;
+	height: 3rem;
+	line-height: 3rem;
+}
+
+.sapMeCalendar > .sapMeCalendarPrevious:active {
+	background: @sapUiHighlight;
+	color: @sapUiContentContrastTextColor;
+}
+
+.sapMeCalendar > .sapMeCalendarNext:active {
+	background: @sapUiHighlight;
+	color: @sapUiContentContrastTextColor;
+}
+
+.sapMeCalendar > .sapMeCalendarMonth > div > .sapMeCalendarMonthDay {
+	font-family: @sapUiFontFamily;
+	font-size: 0.625rem;
+	color: @sapUiBaseText;
+	text-transform: uppercase;
+}
+
+.sapMeCalendar > .sapMeCalendarMonth > div.sapMeCalendarMonthDayNames {
+	font-size: 0;
+	height: 15px;
+}
+
+.sapMeCalendar > .sapMeCalendarMonth > div.sapMeCalendarMonthDayNames {
+	margin-top: 1rem;
+}
+
+.sapMeCalendar > .sapMeCalendarMonth > div.sapMeCalendarMonthDays {
+	margin-bottom: 1rem;
+}
+
+.sapMeCalendar > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarSelected:not(.sapMeCalendarDayNotInCurrentMonth).sapMeCalendarDayNow:before {
+	content: "";
+	position: absolute;
+	top: -0.063rem;
+	right: 0;
+	bottom: 0;
+	left: -0.063rem;
+}
+
+.sapMeCalendar > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay {
+	border: none;
+	font-family: @sapUiFontFamily;
+	font-size: 1.125rem;
+	padding: 0.688rem 0;
+	position: relative;
+}
+
+.sapMeCalendar > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarDayNow:before {
+	content: "";
+	position: absolute;
+	top: -0.063rem;
+	right: 0;
+	bottom: 0;
+	left: -0.063rem;
+}
+
+/*
+Design specific
+
+*/
+/*
+Approval colors
+*/
+/* Normal day */
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay {
+	border-bottom: 0.063rem solid @sapUiGroupContentBackground;
+	border-left: 0.063rem solid @sapUiGroupContentBackground;
+	color: @sapUiBaseText;
+	background: lighten(@sapUiContentForegroundColor,5);
+	vertical-align: top;
+}
+
+
+
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay:hover {
+	background: darken(@sapUiContentForegroundColor,5);
+}
+
+/* Not In Month */
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarDayNotInCurrentMonth {
+	background: none;
+}
+/* Today */
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarDayNow:not(.sapMeCalendarDayNotInCurrentMonth) {
+	color: @sapUiBaseText;
+}
+
+/* Today */
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarDayNow:before {
+	border: 0.125rem solid @sapUiAccent4;
+}
+
+/* Today not in month*/
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarDayNow:before.sapMeCalendarDayNotInCurrentMonth {
+	border: none;
+}
+
+/* Weekend (00) */
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarWeekendDay {
+	background: @sapUiContentForegroundColor;
+}
+
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarWeekendDay:hover {
+	background: darken(@sapUiContentForegroundColor,10);
+}
+
+/* Weekend (00) not in current month */
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarDayNotInCurrentMonth,
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarWeekendDay.sapMeCalendarDayNotInCurrentMonth {
+	color: @sapUiGroupContentBorderColor;
+	background: none;
+}
+
+
+/* Selected */
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarSelected:not(.sapMeCalendarDayNotInCurrentMonth) {
+	background: @sapUiSelected;
+	color: @sapUiContentContrastTextColor;
+}
+
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarSelected:not(.sapMeCalendarDayNotInCurrentMonth):hover {
+	background: darken(@sapUiSelected,10);
+}
+
+/* 00 Selected */
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarWeekDay6.sapMeCalendarSelected:not(.sapMeCalendarDayNotInCurrentMonth,.sapMeCalendarType10),
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarWeekDay0.sapMeCalendarSelected:not(.sapMeCalendarDayNotInCurrentMonth,.sapMeCalendarType10) {
+	background: @sapUiSelected;
+}
+
+/* Types */
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarType00 {
+	background: @sapUiListTableGroupHeaderBorderColor;
+}
+
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarSelected:not(.sapMeCalendarDayNotInCurrentMonth).sapMeCalendarType00 {
+	background: @sapUiGroupTitleBorderColor;
+}
+
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarType01 {
+	background-color: mix(@sapUiHighlight, #fff, 15);
+}
+
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarType04 {
+	background-color: mix(@sapUiHighlight, #fff, 15);
+	background-image: url(img/bg_white_transparent.png);
+}
+
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarType06 {
+	background-color: mix(@sapUiAccent1, #fff, 35);
+}
+
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarType07 {
+	background-color: mix(@sapUiAccent3, #fff, 10);
+	background-image: url(img/bg_white_transparent.png);
+}
+
+/* Type 10 to force to be displayed as working day */
+.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarType10 {
+	background: lighten(@sapUiContentForegroundColor,5);
+}
+
+/*
+Action colors
+*/
+/* Normal day */
+.sapMeCalendarAction > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay {
+	border-bottom: 0.063rem solid @sapUiGroupContentBackground;
+	border-left: 0.063rem solid @sapUiGroupContentBackground;
+	color: @sapUiBaseText;
+	background: lighten(@sapUiContentForegroundColor,5);
+	vertical-align: top;
+}
+
+.sapMeCalendarAction > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay:hover {
+	background: darken(@sapUiContentForegroundColor,5);
+}
+
+/* Not In Month */
+.sapMeCalendarAction > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarDayNotInCurrentMonth {
+	background: none;
+}
+
+/* Today */
+.sapMeCalendarAction > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarDayNow:not(.sapMeCalendarDayNotInCurrentMonth) {
+	font-weight: bolder;
+	font-size: 1.25rem;
+	color: @sapUiHighlight;
+}
+
+/* Today not in month*/
+.sapMeCalendarAction > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarDayNow:before.sapMeCalendarDayNotInCurrentMonth {
+	border: none;
+}
+
+/* Weekend (00) */
+.sapMeCalendarAction > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarWeekendDay {
+	background: @sapUiContentForegroundColor;
+}
+
+.sapMeCalendarAction > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarWeekendDay {
+	background: darken(@sapUiContentForegroundColor,10);
+}
+
+/* Weekend (00) not in current month */
+.sapMeCalendarAction > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarDayNotInCurrentMonth,
+.sapMeCalendarAction > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarWeekendDay.sapMeCalendarDayNotInCurrentMonth {
+	color: @sapUiGroupContentBorderColor;
+	background: none;
+}
+
+/* Selected */
+.sapMeCalendarAction > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarSelected:not(.sapMeCalendarDayNotInCurrentMonth) {
+	border: .125rem solid @sapUiHighlight;
+}
+
+/* Types */
+.sapMeCalendarAction > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarType00 {
+	background: @sapUiListTableGroupHeaderBorderColor;
+}
+
+.sapMeCalendarAction > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarSelected:not(.sapMeCalendarDayNotInCurrentMonth).sapMeCalendarType00 {
+	background: @sapUiSelected;
+}
+
+.sapMeCalendarAction > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarType01 {
+	background-color: mix(@sapUiAccent6, #fff, 20);
+}
+
+.sapMeCalendarAction > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarType04 {
+	background-color: mix(@sapUiAccent6, #fff, 20);
+	background-image: url(img/bg_white_transparent.png);
+}
+
+.sapMeCalendarAction > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarType06 {
+	background-color: mix(@sapUiAccent1, #fff, 35);
+}
+
+.sapMeCalendarAction > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarType07 {
+	background-color: mix(@sapUiAccent3, #fff, 20);
+	background-image: url(img/bg_white_transparent.png);
+}
+
+/* Type 10 to force to be displayed as working day */
+.sapMeCalendarAction > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarType10 {
+	background: lighten(@sapUiContentForegroundColor,5);
+}

package/src/sap/me/themes/sap_horizon/CalendarLegend.less

@@ -0,0 +1,98 @@
+/* ====================================== */
+/* CSS for control sap.me/CalendarLegend  */
+/* Horizon theme                          */
+/* ====================================== */
+
+.sapUIMeLegendOuterContainer {
+	background-color: @sapUiGlobalBackgroundColor;
+}
+
+/* Approval Design*/
+.sapMeCalendarLegendApproval .sapUIMeLegendColorForType00 {
+	background-color: @sapUiListTableGroupHeaderBorderColor;
+}
+
+.sapMeCalendarLegendApproval .sapUIMeLegendColorForType01 {
+	background-color: mix(@sapUiAccent6, #fff, 20);
+}
+
+.sapMeCalendarLegendApproval .sapUIMeLegendColorForType04 {
+	background-color: mix(@sapUiHighlight, #fff, 15);
+	background-image: url(img/bg_white_transparent.png);
+}
+
+.sapMeCalendarLegendApproval .sapUIMeLegendColorForType06 {
+	background-color: mix(@sapUiAccent1, #fff, 35);
+}
+
+.sapMeCalendarLegendApproval .sapUIMeLegendColorForType07 {
+	background-color: mix(@sapUiAccent3, #fff, 10);
+	background-image: url(img/bg_white_transparent.png);
+}
+
+.sapMeCalendarLegendApproval .sapUIMeLegendColorForToday {
+	border: .125rem solid @sapUiAccent4;
+	width: 0.875rem;
+	height: 0.875rem;
+}
+
+.sapMeCalendarLegendApproval .sapUIMeLegendColorForSelected {
+	background-color: @sapUiHighlight;
+}
+
+.sapMeCalendarLegendApproval .sapUIMeLegendColorForSelected00 {
+	background-color: @sapUiGroupTitleBorderColor;
+}
+
+.sapMeCalendarLegendApproval .sapUIMeLegendColorForNormal {
+	background-color: @sapUiListTableGroupHeaderBackground;
+}
+
+/* Action Design*/
+.sapMeCalendarLegendAction .sapUIMeLegendColorForType00 {
+	background-color: @sapUiListTableGroupHeaderBorderColor;
+}
+
+.sapMeCalendarLegendAction .sapUIMeLegendColorForType01 {
+	background-color: mix(@sapUiAccent6, #fff, 20);
+}
+
+.sapMeCalendarLegendAction .sapUIMeLegendColorForType04 {
+	background-color: mix(@sapUiAccent6, #fff, 20);
+	background-image: url(img/bg_white_transparent.png);
+}
+
+.sapMeCalendarLegendAction .sapUIMeLegendColorForType06 {
+	background-color: mix(@sapUiAccent1, #fff, 35);
+}
+
+.sapMeCalendarLegendAction .sapUIMeLegendColorForType07 {
+	background-color: mix(@sapUiAccent3, #fff, 20);
+	background-image: url(img/bg_white_transparent.png);
+}
+
+.sapMeCalendarLegendAction .sapUIMeLegendColorForToday {
+	border: .125rem solid @sapUiAccent4;
+	width: 0.875rem;
+	height: 0.875rem;
+}
+
+.sapMeCalendarLegendAction .sapUIMeLegendColorForSelected {
+	background-color: @sapUiHighlight;
+}
+
+.sapMeCalendarLegendAction .sapUIMeLegendColorForSelected00 {
+	background-color: @sapUiGroupTitleBorderColor;
+}
+
+.sapMeCalendarLegendAction .sapUIMeLegendColorForNormal {
+	background-color: @sapUiListTableGroupHeaderBackground;
+}
+
+.sapUIMeLegendIcon {
+	background-color: none;
+}
+
+.sapUIMeLegendArrow {
+	font-color: @sapUiBaseText;
+}

package/src/sap/me/themes/sap_horizon/OverlapCalendar.less

@@ -0,0 +1,171 @@
+/* ======================================= */
+/* CSS for control sap.me/OverlapCalendar  */
+/* Horizon theme                           */
+/* ======================================= */
+
+.sapMeOverlapCalendar {
+	background: @sapUiBaseBG;
+}
+/*
+.sapMeOverlapCalendarCalendar > .sapMeCalendar > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarWeekendDay.sapMeCalendarDayNotInCurrentMonth,
+.sapMeOverlapCalendarCalendar > .sapMeCalendar > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay {
+	background: @sapUiListTableGroupHeaderBackground;
+	color: @sapUiBaseText;
+}
+*/
+/* Overlap Calendar Grid */
+.sapMeOverlapCalendarGrid {
+	border-bottom-color: @sapUiContentForegroundBorderColor;
+}
+
+.sapMeOverlapCalendarOverlapIndicator {
+	border-top-color: @sapUiContentForegroundBorderColor;
+	border-bottom-color: @sapUiContentForegroundBorderColor;
+}
+
+.sapMeOverlapCalendarDay {
+	border-bottom: 0.063rem solid @sapUiGroupContentBackground;
+	border-left: 0.063rem solid @sapUiGroupContentBackground;
+	color: @sapUiBaseText;
+	background: lighten(@sapUiContentForegroundColor, 5);
+}
+
+.sapMeOverlapCalendarHalfDay {
+	border-bottom-color: @sapUiGroupContentBackground;
+	border-left-color: @sapUiGroupContentBackground;
+}
+
+.sapMeOverlapCalendarTypeHalfDayEnd {
+	z-index: 2;
+	background: -webkit-gradient(linear, left top, right bottom, color-stop(53%, rgba(255, 255, 255, 0)), color-stop(50%, lighten(@sapUiContentForegroundColor,5)));
+	background: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 53%, lighten(@sapUiContentForegroundColor,5) 50%);
+	background: -moz-linear-gradient(top left, rgba(255, 255, 255, 0) 53%, lighten(@sapUiContentForegroundColor,5) 50%);
+	background: -o-linear-gradient(top left, rgba(255, 255, 255, 0) 53%, lighten(@sapUiContentForegroundColor,5)50%);
+	background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 53%, lighten(@sapUiContentForegroundColor,5) 50%);
+}
+
+.sapMeOverlapCalendarType00 {
+	background-color: @sapUiContentForegroundColor;
+	z-index: -2;
+}
+
+.sapMeOverlapCalendarType00HalfDayStart {
+	z-index: 2;
+	background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, @sapUiContentForegroundColor), color-stop(50%, rgba(255, 255, 255, 0)));
+	background: -webkit-linear-gradient(top left, @sapUiContentForegroundColor 50%, rgba(255, 255, 255, 0) 50%);
+	background: -moz-linear-gradient(top left, @sapUiContentForegroundColor 50%, rgba(255, 255, 255, 0) 50%);
+	background: -o-linear-gradient(top left, @sapUiContentForegroundColor 50%, rgba(255, 255, 255, 0) 50%);
+	background: linear-gradient(to bottom right, @sapUiContentForegroundColor 50%, rgba(255, 255, 255, 0) 50%);
+}
+
+.sapMeOverlapCalendarType00HalfDayEnd {
+	z-index: 2;
+	background: -webkit-gradient(linear, left top, right bottom, color-stop(53%, rgba(255, 255, 255, 0)), color-stop(50%, @sapUiContentForegroundColor));
+	background: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 53%, @sapUiContentForegroundColor 50%);
+	background: -moz-linear-gradient(top left, rgba(255, 255, 255, 0) 53%, @sapUiContentForegroundColor 50%);
+	background: -o-linear-gradient(top left, rgba(255, 255, 255, 0) 53%, @sapUiContentForegroundColor 50%);
+	background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 53%, @sapUiContentForegroundColor 50%);
+}
+
+.sapMeOverlapCalendarType01 {
+	background-color: mix(@sapUiHighlight, #fff, 15);
+}
+
+.sapMeOverlapCalendarType01HalfDayStart {
+	z-index: 2;
+	background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, mix(@sapUiHighlight, #fff, 15)), color-stop(50%, rgba(255, 255, 255, 0)));
+	background: -webkit-linear-gradient(top left, mix(@sapUiHighlight, #fff, 15)50%, rgba(255, 255, 255, 0) 50%);
+	background: -moz-linear-gradient(top left, mix(@sapUiHighlight, #fff, 15)50%, rgba(255, 255, 255, 0) 50%);
+	background: -o-linear-gradient(top left, mix(@sapUiHighlight, #fff, 15)50%, rgba(255, 255, 255, 0) 50%);
+	background: linear-gradient(to bottom right, mix(@sapUiHighlight, #fff, 15)50%, rgba(255, 255, 255, 0) 50%);
+}
+
+.sapMeOverlapCalendarType01HalfDayEnd {
+	z-index: 2;
+	background: -webkit-gradient(linear, left top, right bottom, color-stop(53%, rgba(255, 255, 255, 0)), color-stop(50%, mix(@sapUiHighlight,@sapUiWhite,15)));
+	background: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 53%, mix(@sapUiHighlight, #fff, 15) 50%);
+	background: -moz-linear-gradient(top left, rgba(255, 255, 255, 0) 53%, mix(@sapUiHighlight, #fff, 15) 50%);
+	background: -o-linear-gradient(top left, rgba(255, 255, 255, 0) 53%, mix(@sapUiHighlight, #fff, 15) 50%);
+	background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 53%, mix(@sapUiHighlight, #fff, 15) 50%);
+}
+
+.sapMeOverlapCalendarType04 {
+	background-color: mix(@sapUiHighlight, #fff, 15);
+	background-image: url(img/bg_white_transparent.png);
+}
+
+.sapMeOverlapCalendarType04HalfDayStart {
+	z-index: 1;
+	background-image: url(img/bg_white_transparent.png);
+	background: url(img/bg_white_transparent.png), -webkit-gradient(linear, left top, right bottom, color-stop(50%, mix(@sapUiHighlight, #fff, 15)), color-stop(50%, rgba(255, 255, 255, 0)));
+	background: url(img/bg_white_transparent.png), -webkit-linear-gradient(top left, mix(@sapUiHighlight, #fff,15) 50%, rgba(255, 255, 255, 0) 50%);
+	background: url(img/bg_white_transparent.png), -moz-linear-gradient(top left, mix(@sapUiHighlight, #fff, 15) 50%, rgba(255, 255, 255, 0) 50%);
+	background: url(img/bg_white_transparent.png), -o-linear-gradient(top left, mix(@sapUiHighlight, #fff, 15) 50%, rgba(255, 255, 255, 0) 50%);
+	background: url(img/bg_white_transparent.png), linear-gradient(to bottom right, mix(@sapUiHighlight, #fff, 15) 50%, rgba(255, 255, 255, 0) 50%);
+}
+
+.sapMeOverlapCalendarType04HalfDayEnd {
+	z-index: 1;
+	background-image: url(img/bg_white_transparent.png);
+	background: url(img/bg_white_transparent.png), -webkit-gradient(linear, left top, right bottom, color-stop(53%, rgba(255, 255, 255, 0)), color-stop(50%, mix(@sapUiHighlight, #fff, 15)));
+	background: url(img/bg_white_transparent.png), -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 53%, mix(@sapUiHighlight, #fff, 15) 50%);
+	background: url(img/bg_white_transparent.png), -moz-linear-gradient(top left, rgba(255, 255, 255, 0) 53%, mix(@sapUiHighlight, #fff, 15) 50%);
+	background: url(img/bg_white_transparent.png), -o-linear-gradient(top left, rgba(255, 255, 255, 0) 53%, mix(@sapUiHighlight, #fff, 15) 50%);
+	background: url(img/bg_white_transparent.png), linear-gradient(to bottom right, rgba(255, 255, 255, 0) 53%, mix(@sapUiHighlight, #fff, 15) 50%);
+}
+
+.sapMeOverlapCalendarType06 {
+	background-color: mix(@sapUiAccent1, #fff, 35);
+	z-index: -1;
+}
+
+.sapMeOverlapCalendarType06HalfDayStart {
+	z-index: 2;
+	background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, mix(@sapUiAccent1,  #fff, 35)), color-stop(50%, rgba(255, 255, 255, 0)));
+	background: -webkit-linear-gradient(top left, mix(@sapUiAccent1, #fff, 35) 50%, rgba(255, 255, 255, 0) 50%);
+	background: -moz-linear-gradient(top left, mix(@sapUiAccent1, #fff, 35) 50%, rgba(255, 255, 255, 0) 50%);
+	background: -o-linear-gradient(top left, mix(@sapUiAccent1, #fff, 35) 50%, rgba(255, 255, 255, 0) 50%);
+	background: linear-gradient(to bottom right, mix(@sapUiAccent1, #fff, 35) 50%, rgba(255, 255, 255, 0) 50%);
+}
+
+.sapMeOverlapCalendarType06HalfDayEnd {
+	z-index: 2;
+	background: -webkit-gradient(linear, left top, right bottom, color-stop(53%, rgba(255, 255, 255, 0)), color-stop(50%, mix(@sapUiAccent1, #fff, 35)));
+	background: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 53%, mix(@sapUiAccent1, #fff, 35) 50%);
+	background: -moz-linear-gradient(top left, rgba(255, 255, 255, 0) 53%, mix(@sapUiAccent1, #fff, 35) 50%);
+	background: -o-linear-gradient(top left, rgba(255, 255, 255, 0) 53%, mix(@sapUiAccent1, #fff, 35) 50%);
+	background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 53%, mix(@sapUiAccent1, #fff, 35) 50%);
+}
+
+.sapMeOverlapCalendarType07 {
+	background-color: mix(@sapUiAccent3, #fff, 10);
+	background-image: url(img/bg_white_transparent.png);
+}
+
+.sapMeOverlapCalendarType07HalfDayStart {
+	z-index: 1;
+	background-image: url(img/bg_white_transparent.png);
+	background: url(img/bg_white_transparent.png), -webkit-gradient(linear, left top, right bottom, color-stop(50%, mix(@sapUiAccent3, #fff, 10)), color-stop(50%, rgba(255, 255, 255, 0)));
+	background: url(img/bg_white_transparent.png), -webkit-linear-gradient(top left, mix(@sapUiAccent3, #fff, 10) 50%, rgba(255, 255, 255, 0) 50%);
+	background: url(img/bg_white_transparent.png), -moz-linear-gradient(top left, mix(@sapUiAccent3, #fff, 10) 50%, rgba(255, 255, 255, 0) 50%);
+	background: url(img/bg_white_transparent.png), -o-linear-gradient(top left, mix(@sapUiAccent3, #fff, 10) 50%, rgba(255, 255, 255, 0) 50%);
+	background: url(img/bg_white_transparent.png), linear-gradient(to bottom right, mix(@sapUiAccent3, #fff, 10) 50%, rgba(255, 255, 255, 0) 50%);
+}
+
+.sapMeOverlapCalendarType07HalfDayEnd {
+	z-index: 1;
+	background-image: url(img/bg_white_transparent.png);
+	background: url(img/bg_white_transparent.png), -webkit-gradient(linear, left top, right bottom, color-stop(53%, rgba(255, 255, 255, 0)), color-stop(50%, mix(@sapUiAccent3, #fff, 10)));
+	background: url(img/bg_white_transparent.png), -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 53%, mix(@sapUiAccent3, #fff, 10) 50%);
+	background: url(img/bg_white_transparent.png), -moz-linear-gradient(top left, rgba(255, 255, 255, 0) 53%, mix(@sapUiAccent3, #fff, 10) 50%);
+	background: url(img/bg_white_transparent.png), -o-linear-gradient(top left, rgba(255, 255, 255, 0) 53%, mix(@sapUiAccent3, #fff, 10) 50%);
+	background: url(img/bg_white_transparent.png), linear-gradient(to bottom right, rgba(255, 255, 255, 0) 53%, mix(@sapUiAccent3, #fff, 10) 50%);
+}
+
+.sapMeOverlapCalendarNameLbl {
+	color: @sapUiBaseText;
+}
+
+.sapMeOverlapCalendarTypeLbl {
+	color: @sapUiGroupTitleTextColor;
+}

package/src/sap/me/themes/sap_horizon/ProgressIndicator.less

@@ -0,0 +1,83 @@
+/* ========================================= */
+/* CSS for control sap.me/ProgressIndicator  */
+/* Horizon theme                             */
+/* ========================================= */
+
+.sapUIMeProgInd {
+	display: inline-block;
+	background: -moz-linear-gradient(top, #cecece 0%, #e3e3e3 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cecece), color-stop(100%, #e3e3e3)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top, #cecece 0%, #e3e3e3 100%); /* Chrome10+,Safari5.1+ */
+	background: -ms-linear-gradient(top, #cecece 0%, #e3e3e3 100%); /* IE10+ */
+	background: linear-gradient(to bottom, #cecece 0%, #e3e3e3 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cecece, endColorstr=#e3e3e3, GradientType=0); /* IE6-9 */
+	height: 1rem;
+	padding-bottom: 2px;
+}
+
+.sapUIMeProgIndBorder {
+	display: inline-block;
+}
+
+.sapUIMeProgIndBar {
+	position: relative;
+	background: -moz-linear-gradient(top, #779ECB 0%, #77C8CB 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #779ECB), color-stop(100%, #77C8CB)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top, #779ECB 0%, #77C8CB 100%); /* Chrome10+,Safari5.1+ */
+	background: -ms-linear-gradient(top, #779ECB 0%, #77C8CB 100%); /* IE10+ */
+	background: linear-gradient(to bottom, #779ECB 0%, #77C8CB 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#779ECB, endColorstr=#77C8CB, GradientType=0); /* IE6-9 */
+	height: 1rem;
+}
+
+.sapUIMeProgIndBarPOSITIVE {
+	background: -moz-linear-gradient(top, #8fc24d 0%, #406d05 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8fc24d), color-stop(100%, #406d05)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top, #8fc24d 0%, #406d05 100%); /* Chrome10+,Safari5.1+ */
+	background: -ms-linear-gradient(top, #8fc24d 0%, #406d05 100%); /* IE10+ */
+	background: linear-gradient(to bottom, #8fc24d 0%, #406d05 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#8fc24d, endColorstr=#406d05, GradientType=0); /* IE6-9 */
+}
+
+.sapUIMeProgIndBarNEGATIVE {
+	background: -moz-linear-gradient(top, #f7801f 0%, #be6007 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7801f), color-stop(100%, #be6007)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top, #f7801f 0%, #be6007 100%); /* Chrome10+,Safari5.1+ */
+	background: -ms-linear-gradient(top, #f7801f 0%, #be6007 100%); /* IE10+ */
+	background: linear-gradient(to bottom, #f7801f 0%, #be6007 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f7801f, endColorstr=#be6007, GradientType=0); /* IE6-9 */
+}
+
+.sapUIMeProgIndBarCRITICAL {
+	background: -moz-linear-gradient(top, #FF4F00 0%, #FF9E73 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FF4F00), color-stop(100%, #FF9E73)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top, #FF4F00 0%, #FF9E73 100%); /* Chrome10+,Safari5.1+ */
+	background: -ms-linear-gradient(top, #FF4F00 0%, #FF9E73 100%); /* IE10+ */
+	background: linear-gradient(to bottom, #FF4F00 0%, #FF9E73 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF4F00, endColorstr=#FF9E73, GradientType=0); /* IE6-9 */
+}
+
+.sapUIMeProgIndFont {
+	display: inline-block;
+	position: absolute;
+	left: 0;
+	top: 0;
+	padding-left: 5px;
+	vertical-align: top;
+	font-size: 11px;
+	white-space: nowrap;
+}
+
+.sapUIMeProgIndEndHidden {
+	display: inline-block;
+	width: 1px;
+	visibility: hidden;
+}
+
+.sapUIMeProgIndEnd {
+	display: inline-block;
+	width: 1px;
+	visibility: visible;
+	height: 1rem;
+	background-image: -webkit-linear-gradient(top, #cecece 0%, #e3e3e3 100%);
+}

package/src/sap/me/themes/sap_horizon/TabContainer.less

@@ -0,0 +1,162 @@
+/* ==================================== */
+/* CSS for control sap.me/TabContainer  */
+/* Horizon theme                        */
+/* ==================================== */
+
+.sapUIMeTabContainerButtons {
+	margin-left: 1rem;
+}
+
+.sapUIMeTabContainerTab {
+	width: 3.5rem;
+	height: 3.5rem;
+	margin-left: 1rem;
+	display: inline-block;
+}
+
+.sapUIMeTabContainerBtn {
+	font-size: 1.5rem;
+	color: @sapUiGroupContentBackground;
+	-moz-border-radius: 2rem;
+	border-radius: 2rem;
+	width: 3rem;
+	height: 3rem;
+	border: 0.250rem solid @sapUiGroupContentBackground;
+	box-shadow: 0 0.063rem 0.125rem 0 rgba(128, 128, 128, 0.6);
+	padding: 0;
+	line-height: 3rem;
+	position: absolute;
+	z-index: 0;
+}
+
+.sapUIMeTabContainerBtnInfo.sapUiIconActive {
+	border: 0.250rem solid #f27020;
+}
+
+.sapUIMeTabContainerBtnAttachments.sapUiIconActive {
+	border: 0.250rem solid #007cc0;
+}
+
+.sapUIMeTabContainerBtnNotes.sapUiIconActive {
+	border: 0.250rem solid #ab218e;
+}
+
+.sapUIMeTabContainerBtnPeople.sapUiIconActive {
+	border: 0.250rem solid #004990;
+}
+
+.sapUIMeTabContainerBtnInfo {
+	background-color: #f27020;
+}
+
+.sapUIMeTabContainerBtnAttachments {
+	background-color: #007cc0;
+}
+
+.sapUIMeTabContainerBtnNotes {
+	background-color: #ab218e;
+}
+
+.sapUIMeTabContainerBtnPeople {
+	background-color: #004990;
+}
+
+.sapUIMeTabContainerHiddenBadges {
+	visibility: hidden;
+}
+
+.sapUIMeTabContainerBadge {
+	font-size: 0.75rem;
+	color: @sapUiGroupContentBackground;
+	-moz-border-radius: 1rem;
+	border-radius: 1rem;
+	min-width: 0.75rem;
+	height: 1rem;
+	position: relative;
+	padding-left: .125rem;
+	padding-right: .125rem;
+	line-height: 1rem;
+	float: right;
+	z-index: 1;
+}
+
+.sapUIMeTabContainerBadgeInfo {
+	background-color: #f27020;
+}
+
+.sapUIMeTabContainerBadgeAttachments {
+	background-color: #007cc0;
+
+}
+
+.sapUIMeTabContainerBadgeNotes {
+	background-color: #ab218e;
+
+}
+
+.sapUIMeTabContainerBadgePeople {
+	background-color: #004990;
+}
+
+.sapUIMeTabContainerContent {
+	position: relative;
+	padding: 0.125rem 0;
+	margin-top: 0.750rem;
+	border-top: 1px solid @sapUiContentForegroundBorderColor;
+	border-bottom: 1px solid @sapUiContentForegroundBorderColor;
+	background-color: @sapUiGroupContentBackground;
+}
+
+.sapUIMeTabContainerTabContentScrollable {
+	background-color: @sapUiGroupContentBackground;
+	padding: 0;
+	overflow-x: auto;
+	overflow-x: hidden;
+}
+
+.sapUIMeTabContainerTabContent {
+	background-color: @sapUiGroupContentBackground	;
+	padding: 0;
+	overflow: hidden;
+	position: relative;
+	z-index: 1;
+}
+
+.sapUIMeTabContainerContentArrow {
+	position: absolute;
+	top: -0.45rem;
+	left: 4.16rem;
+	width: 0.750rem;
+	height: 0.750rem;
+	-webkit-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	-moz-transform: rotate(45deg);
+	-o-transform: rotate(45deg);
+	transform: rotate(45deg);
+	background-color: @sapUiGroupContentBackground;
+	z-index: 0;
+	border-top: 1px solid @sapUiContentForegroundBorderColor;
+	border-left: 1px solid @sapUiContentForegroundBorderColor;
+}
+
+/* Specific phone */
+.sap-phone {
+
+	.sapUIMeTabContainerButtons {
+		margin-top: 1rem;
+		margin-left: 0rem;
+	}
+
+	.sapUIMeTabContainerContentArrow {
+		left: 3.16rem;
+	}
+
+}
+
+.sapUIMeTabContainerContentClosed {
+	position: relative;
+	padding: 0.125rem 0 0 0;
+	margin-top: 0.750rem;
+	background-color: transparent;
+	border-bottom: none;
+}

package/src/sap/me/themes/sap_horizon/library.source.less

@@ -0,0 +1,13 @@
+/*!
+ * SAPUI5
+ * (c) Copyright 2009-2021 SAP SE. All rights reserved.
+ */
+@import "../base/library.source.less";
+@import "../../../../sap/ui/core/themes/sap_horizon/base.less";
+@import "../../../../sap/ui/core/themes/sap_horizon/global.less";
+
+@import "Calendar.less";
+@import "CalendarLegend.less";
+@import "OverlapCalendar.less";
+@import "ProgressIndicator.less";
+@import "TabContainer.less";

package/ui5.yaml

@@ -10,6 +10,8 @@ framework:
   name: SAPUI5
   libraries:
     - name: sap.ui.core
+    - name: themelib_sap_horizon
+      optional: true
     - name: themelib_sap_fiori_3
       optional: true
     - name: themelib_sap_belize