@openui5/sap.ui.integration 1.113.0 → 1.115.0

package/src/sap/ui/integration/cards/CalendarContent.js

@@ -10,6 +10,7 @@ sap.ui.define([
 		"sap/ui/integration/cards/BaseContent",
 		"sap/ui/integration/util/BindingHelper",
 		"sap/ui/integration/util/BindingResolver",
+		"sap/f/cards/loading/CalendarPlaceholder",
 		"sap/f/CalendarAppointmentInCard",
 		"sap/f/CalendarInCard",
 		"sap/f/PlanningCalendarInCardLegend",
@@ -27,14 +28,17 @@ sap.ui.define([
 		"sap/ui/core/date/UniversalDate",
 		"sap/ui/unified/CalendarLegendItem",
 		"sap/ui/core/Configuration",
-		"sap/ui/core/date/UI5Date"
-	],
+		"sap/ui/core/date/UI5Date",
+		"sap/ui/unified/DateRange",
+		"sap/ui/core/Core"
+],
 	function (CalendarContentRenderer,
 		ResizeHandler,
 		library,
 		BaseContent,
 		BindingHelper,
 		BindingResolver,
+		CalendarPlaceholder,
 		CalendarAppointmentInCard,
 		CalendarInCard,
 		PlanningCalendarInCardLegend,
@@ -52,7 +56,9 @@ sap.ui.define([
 		UniversalDate,
 		CalendarLegendItem,
 		Configuration,
-		UI5Date
+		UI5Date,
+		DateRange,
+		Core
 		) {
 		"use strict";
 
@@ -73,7 +79,7 @@ sap.ui.define([
 		 * @extends sap.ui.integration.cards.BaseContent
 		 *
 		 * @author SAP SE
-		 * @version 1.113.0
+		 * @version 1.115.0
 		 *
 		 * @constructor
 		 * @private
@@ -104,6 +110,49 @@ sap.ui.define([
 			}
 		});
 
+		/**
+		 * Changes the calendar view to the specified month.
+		 *
+		 * @ui5-restricted
+		 * @private
+		 * @param {int} iMonth The selected month, which month the calendar should display.
+		 */
+		CalendarContent.prototype.changeMonth = function (iMonth) {
+			this._oCalendar._getMonthPicker().setMonth(iMonth);
+			this._oCalendar._selectMonth();
+			this.invalidate();
+			this.getCardInstance().fireStateChanged();
+		};
+
+		/**
+		 * Changes the calendar date to the passed date.
+		 *
+		 * @ui5-restricted
+		 * @private
+		 * @param {Date} oDate The selected date, the month and year of which the calendar should display.
+		 */
+		CalendarContent.prototype.changeDate = function (oDate) {
+			var oCardActions = this.getActions(),
+				oDateRange = new DateRange(),
+				oCal = this._oCalendar;
+
+			oDateRange.setStartDate(oDate);
+			oCal.destroySelectedDates();
+			oCal.addAggregation('selectedDates', oDateRange);
+			this._oFocusedDate = oCal.getSelectedDates()[0] ? oCal.getSelectedDates()[0] : null;
+			oCal.addSelectedDate(oDateRange);
+
+			oCal._getYearPicker().setYear(oDate.getFullYear());
+			oCal._getYearPicker().fireSelect();
+			oCal._selectYear();
+
+			this.changeMonth(oDate.getMonth());
+
+			oCardActions.fireAction(this, "DateChange", {
+				"selectedDate": oDate
+			});
+		};
+
 		/**
 		 * Creates the internal structure of the card.
 		 * @private
@@ -225,6 +274,21 @@ sap.ui.define([
 			oEvent.control.toggleStyleClass("sapMPCInCardTwoColumns", oEvent.target.getBoundingClientRect().width > 576);
 		};
 
+		/**
+		 * @override
+		 */
+		CalendarContent.prototype.createLoadingPlaceholder = function (oConfiguration) {
+			var oCard = this.getCardInstance(),
+				iContentMinItems = oCard.getContentMinItems(oConfiguration);
+
+			return new CalendarPlaceholder({
+				minItems: iContentMinItems !== null ? iContentMinItems : 2,
+				maxLegendItems: oConfiguration.maxLegendItems ? parseInt(oConfiguration.maxLegendItems) : 2,
+				item: oConfiguration.item ? oConfiguration.item.template : {},
+				legendItem: oConfiguration.legendItem ? oConfiguration.legendItem.template : {}
+			});
+		};
+
 		/**
 		 * @override
 		 */
@@ -275,6 +339,141 @@ sap.ui.define([
 			}
 		};
 
+		/**
+		 * @override
+		 */
+		 CalendarContent.prototype.getStaticConfiguration = function () {
+			var oConfiguration = this.getParsedConfiguration(),
+				aAppointments = this.getAppointments(),
+				aSpecialDates = this._oCalendar.getSpecialDates(),
+				sLegendId = this._oCalendar.getLegend(),
+				oLegend = Core.byId(sLegendId),
+				aLegendItems = oLegend.getItems(),
+				aLegendAppointmentItems = oLegend.getAppointmentItems(),
+				oFocusedDate = this._oCalendar.getSelectedDates()[0] ?
+					this._oCalendar.getSelectedDates()[0].getStartDate() :
+					null,
+				oSelectededDate = this._oCalendar.getSelectedDates()[0] ? this._oCalendar.getSelectedDates()[0] : null,
+				oSelectedDateEnd = oSelectededDate.getStartDate ? oSelectededDate.getStartDate().getTime() + 86400000 : null,
+				oSelectedJsStartDate = oSelectededDate.getStartDate(),
+				iMaxItems = oConfiguration.maxItems,
+				iMaxLegendItems = oConfiguration.maxLegendItems,
+				sNoItemsText = oConfiguration.noItemsText,
+				aResolvedItems = [],
+				aResolvedSpecialDates = [],
+				aResolvedLegendItems = [],
+				bMoreItems = false,
+				sFocusedDateISO;
+
+			sFocusedDateISO = oFocusedDate ? oFocusedDate.toISOString() : null;
+			sFocusedDateISO = sFocusedDateISO ? sFocusedDateISO : oConfiguration.date;
+
+			aAppointments.forEach(function (oItem, i) {
+				var oStartDate = oItem.getStartDate(),
+					oEndDate = oItem.getEndDate(),
+					aTemplateKeys,
+					singleAssembledItem,
+					bAppInDaY = oStartDate >= oSelectedJsStartDate && oStartDate <= oSelectedDateEnd,
+					bAppEndsInDay = oEndDate >= oSelectedJsStartDate && oEndDate <= oSelectedDateEnd,
+					bDayInApp = oStartDate <= oSelectedJsStartDate &&  oEndDate > oSelectedDateEnd,
+					bIncludeAppointment = bAppInDaY || bAppEndsInDay || bDayInApp;
+
+				if (bIncludeAppointment) {
+					aTemplateKeys = Object.keys(oConfiguration.item.template);
+					singleAssembledItem = {};
+
+					aTemplateKeys.forEach(function(sKey) {
+						var oBindingInfo = BindingHelper.prependRelativePaths(oConfiguration.item.template[sKey], this.getBindingPath("appointments") + "/" + i);
+
+						singleAssembledItem[sKey] = BindingResolver.resolveValue(oBindingInfo, this);
+					}.bind(this));
+					singleAssembledItem.startDate = new Date(singleAssembledItem.startDate).toISOString();
+					if (singleAssembledItem.endDate) {
+						singleAssembledItem.endDate = new Date(singleAssembledItem.endDate).toISOString();
+					}
+					aResolvedItems.push(singleAssembledItem);
+					if (aResolvedItems.length > oConfiguration.maxItems) {
+						bMoreItems = true;
+					}
+				}
+			}.bind(this));
+
+			aSpecialDates.forEach(function (oItem, i) {
+				var oCal = this._oCalendar,
+					oStartDate = oItem.getStartDate(),
+					oEndDate = oItem.getEndDate(),
+					oViewedMonth = oCal._getMonthPicker().getMonth() ?
+						oCal._getMonthPicker().getMonth() :
+						oCal._getFocusedDate().getMonth(),
+					oViewedYear = Number(oCal._getYearString()),
+					bStartsWithinMonth = oStartDate.getMonth() === oViewedMonth,
+					bEndsWithinMonth = oEndDate ? oEndDate.getMonth() === oViewedMonth : false,
+					bStartsWithinYear = oStartDate.getFullYear() === oViewedYear,
+					bEndsWithinYear = oItem.getEndDate() ?
+						oItem.getEndDate().getFullYear() === oViewedYear :
+						bStartsWithinYear,
+					bIncludeSpecialDate = (bStartsWithinMonth || bEndsWithinMonth) && (bStartsWithinYear || bEndsWithinYear),
+					aTemplateKeys,
+					oResolvedDate;
+
+				if (bIncludeSpecialDate) {
+					aTemplateKeys = Object.keys(oConfiguration.specialDate.template);
+					var oBindingInfo = {};
+
+					aTemplateKeys.forEach(function(sKey) {
+						oBindingInfo[sKey] = BindingHelper.prependRelativePaths(oConfiguration.specialDate.template[sKey], this._oCalendar.getBindingPath("specialDates") + "/" + i);
+					}.bind(this));
+
+					oResolvedDate = BindingResolver.resolveValue(oBindingInfo, this);
+					oResolvedDate.startDate = new Date(oResolvedDate.startDate).toISOString();
+					if (oResolvedDate.endDate) {
+						oResolvedDate.endDate = new Date(oResolvedDate.endDate).toISOString();
+					}
+
+					aResolvedSpecialDates.push(oResolvedDate);
+				}
+			}.bind(this));
+
+			aLegendItems.forEach(function (oItem, i) {
+				var aTemplateKeys = Object.keys(oConfiguration.legendItem.template),
+					singleAssembledItem = {};
+
+				aTemplateKeys.forEach(function(sKey) {
+					var oBindingInfo = BindingHelper.prependRelativePaths(oConfiguration.legendItem.template[sKey], oLegend.getBindingPath("items") + "/" + i);
+
+					singleAssembledItem[sKey] = BindingResolver.resolveValue(oBindingInfo, this);
+				}.bind(this));
+				aResolvedLegendItems.push(singleAssembledItem);
+			}.bind(this));
+
+			aLegendAppointmentItems.forEach(function (oItem, i) {
+				var aTemplateKeys  = Object.keys(oConfiguration.legendItem.template),
+					singleAssembledItem = {};
+
+				aTemplateKeys.forEach(function(sKey) {
+					var oBindingInfo = BindingHelper.prependRelativePaths(oConfiguration.legendItem.template[sKey], oLegend.getBindingPath("items") + "/" + i);
+
+					singleAssembledItem[sKey] = BindingResolver.resolveValue(oBindingInfo, this);
+				}.bind(this));
+				aResolvedLegendItems.push(singleAssembledItem);
+			}.bind(this));
+
+			var oStaticConfiguration = {};
+
+			oStaticConfiguration.items = aResolvedItems;
+			oStaticConfiguration.specialDates = aResolvedSpecialDates;
+			oStaticConfiguration.legendItems = aResolvedLegendItems;
+			oStaticConfiguration.date = sFocusedDateISO;
+			oStaticConfiguration.maxItems = iMaxItems;
+			oStaticConfiguration.maxLegendItems = iMaxLegendItems;
+			oStaticConfiguration.noItemsText = sNoItemsText;
+			if (bMoreItems) {
+				oStaticConfiguration.moreItems = BindingResolver.resolveValue(oConfiguration.moreItems, this);
+			}
+
+			return oStaticConfiguration;
+		};
+
 		/**
 		 * Sets values in the parameters' model to be used as a counter in the header part ot the card.
 		 *
@@ -556,7 +755,7 @@ sap.ui.define([
 		 * @param {Object} sTime The date template of the configuration object.
 		 */
 		CalendarContent.prototype._addDate = function (sTime) {
-			if (BindingResolver.isBindingInfo(sTime)) {
+			if (BindingHelper.isBindingInfo(sTime)) {
 				if (!sTime) {
 					return;
 				}
@@ -581,7 +780,7 @@ sap.ui.define([
 		 * @param {Object} mMaxItems The mMaxItems template of the configuration object.
 		 */
 		CalendarContent.prototype._addMaxItems = function (mMaxItems) {
-			if (BindingResolver.isBindingInfo(mMaxItems)) {
+			if (BindingHelper.isBindingInfo(mMaxItems)) {
 				mMaxItems && this.bindProperty("visibleAppointmentsCount", mMaxItems);
 			} else {
 				this.setVisibleAppointmentsCount(mMaxItems);
@@ -595,7 +794,7 @@ sap.ui.define([
 		 * @param {Object} mMaxLegendItems The maxLegendItems template of the configuration object.
 		 */
 		CalendarContent.prototype._addMaxLegendItems = function (mMaxLegendItems) {
-			if (BindingResolver.isBindingInfo(mMaxLegendItems)) {
+			if (BindingHelper.isBindingInfo(mMaxLegendItems)) {
 				mMaxLegendItems && this._oLegend.bindProperty("visibleLegendItemsCount", mMaxLegendItems);
 			} else {
 				this._oLegend.setVisibleLegendItemsCount(mMaxLegendItems);
@@ -609,7 +808,7 @@ sap.ui.define([
 		 * @param {Object} mNoItemsText The noItemsText template of the configuration object.
 		 */
 		CalendarContent.prototype._addNoItemsText = function (mNoItemsText) {
-			if (BindingResolver.isBindingInfo(mNoItemsText)) {
+			if (BindingHelper.isBindingInfo(mNoItemsText)) {
 				mNoItemsText && this.bindProperty("noAppointmentsText", mNoItemsText);
 			} else {
 				this.setNoAppointmentsText(mNoItemsText);

package/src/sap/ui/integration/cards/ComponentContent.js

@@ -35,7 +35,7 @@ sap.ui.define([
 	 * @extends sap.ui.integration.cards.BaseContent
 	 *
 	 * @author SAP SE
-	 * @version 1.113.0
+	 * @version 1.115.0
 	 *
 	 * @experimental
 	 * @constructor
@@ -87,11 +87,11 @@ sap.ui.define([
 				this.fireEvent("_updated");
 			}.bind(this),
 			componentFailed: function () {
-				var oCard = oCard = this.getCardInstance();
+				var oCard = this.getCardInstance();
 
 				this.fireEvent("_actionContentReady");
 				this.handleError({
-					type: IllustratedMessageType.ErrorScreen,
+					illustrationType: IllustratedMessageType.ErrorScreen,
 					title: oCard.getTranslatedText("CARD_DATA_LOAD_ERROR"),
 					description: "Card content failed to create component"
 				});

package/src/sap/ui/integration/cards/Footer.js

@@ -9,16 +9,14 @@ sap.ui.define([
 	"sap/base/util/merge",
 	"sap/ui/integration/controls/ActionsStrip",
 	"sap/ui/integration/controls/Paginator",
-	"sap/ui/integration/util/BindingHelper",
-	"sap/ui/integration/util/BindingResolver"
+	"sap/ui/integration/util/BindingHelper"
 ], function (
 	Control,
 	Core,
 	merge,
 	ActionsStrip,
 	Paginator,
-	BindingHelper,
-	BindingResolver
+	BindingHelper
 ) {
 	"use strict";
 
@@ -33,7 +31,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.113.0
+	 * @version 1.115.0
 	 *
 	 * @constructor
 	 * @ui5-restricted
@@ -114,7 +112,7 @@ sap.ui.define([
 		// to do: if more precise check is needed search recursively
 		return (oConfiguration.actionsStrip || []).some(function (oButtonConfig) {
 			for (var sKey in oButtonConfig) {
-				if (BindingResolver.isBindingInfo(oButtonConfig[sKey])) {
+				if (BindingHelper.isBindingInfo(oButtonConfig[sKey])) {
 					return true;
 				}
 			}

package/src/sap/ui/integration/cards/Header.js

@@ -42,7 +42,7 @@ sap.ui.define([
 	 * @extends sap.f.cards.Header
 	 *
 	 * @author SAP SE
-	 * @version 1.113.0
+	 * @version 1.115.0
 	 *
 	 * @constructor
 	 * @private
@@ -153,7 +153,7 @@ sap.ui.define([
 	/**
 	 * @override
 	 */
-	Header.prototype._isInteractive = function () {
+	Header.prototype.isInteractive = function () {
 		return this.getInteractive();
 	};
 

package/src/sap/ui/integration/cards/ListContent.js

@@ -9,6 +9,7 @@ sap.ui.define([
 	"sap/ui/util/openWindow",
 	"sap/m/library",
 	"sap/m/List",
+	"sap/f/cards/loading/ListPlaceholder",
 	"sap/ui/integration/controls/ObjectStatus",
 	"sap/ui/integration/library",
 	"sap/ui/integration/util/BindingHelper",
@@ -24,6 +25,7 @@ sap.ui.define([
 	openWindow,
 	mLibrary,
 	List,
+	ListPlaceholder,
 	ObjectStatus,
 	library,
 	BindingHelper,
@@ -68,7 +70,7 @@ sap.ui.define([
 	 * @extends sap.ui.integration.cards.BaseListContent
 	 *
 	 * @author SAP SE
-	 * @version 1.113.0
+	 * @version 1.115.0
 	 *
 	 * @constructor
 	 * @private
@@ -119,6 +121,20 @@ sap.ui.define([
 		}
 	};
 
+	/**
+	 * @override
+	 */
+	ListContent.prototype.createLoadingPlaceholder = function (oConfiguration) {
+		var oCard = this.getCardInstance(),
+			iContentMinItems = oCard.getContentMinItems(oConfiguration);
+
+		return new ListPlaceholder({
+			minItems: iContentMinItems !== null ? iContentMinItems : 2,
+			item: oConfiguration.item,
+			itemHeight: ListContentRenderer.getItemMinHeight(oConfiguration, this) + "rem"
+		});
+	};
+
 	/**
 	 * @override
 	 */
@@ -234,6 +250,12 @@ sap.ui.define([
 				}.bind(this)
 			});
 
+			// remove the custom accessibility announcement from the sap.m.ListBase
+			// so the additional elements (like attributes) are also read
+			this._oList.onItemFocusIn = function (oItem, oFocusedControl) {
+				this._oList._handleStickyItemFocus(oItem.getDomRef());
+			}.bind(this);
+
 			this._oList.addEventDelegate({
 				onfocusin: function (oEvent) {
 					if (!(oEvent.srcControl instanceof ListContentItem)) {
@@ -276,6 +298,7 @@ sap.ui.define([
 				highlightText: mItem.highlightText,
 				info: mItem.info && mItem.info.value,
 				infoState: mItem.info && mItem.info.state,
+				infoVisible: mItem.info && mItem.info.visible,
 				showInfoStateIcon: mItem.info && mItem.info.showStateIcon,
 				customInfoStatusIcon: mItem.info && mItem.info.customStateIcon,
 				attributes: []

package/src/sap/ui/integration/cards/NumericHeader.js

@@ -35,7 +35,7 @@ sap.ui.define([
 	 * @extends sap.f.cards.NumericHeader
 	 *
 	 * @author SAP SE
-	 * @version 1.113.0
+	 * @version 1.115.0
 	 *
 	 * @constructor
 	 * @private
@@ -150,7 +150,7 @@ sap.ui.define([
 	/**
 	 * @override
 	 */
-	NumericHeader.prototype._isInteractive = function () {
+	NumericHeader.prototype.isInteractive = function () {
 		return this.getInteractive();
 	};
 

package/src/sap/ui/integration/cards/ObjectContent.js

@@ -22,6 +22,7 @@ sap.ui.define([
 	"sap/m/ComboBox",
 	"sap/m/TextArea",
 	"sap/m/Input",
+	"sap/m/TimePicker",
 	"sap/base/Log",
 	"sap/base/util/isEmptyObject",
 	"sap/base/util/isPlainObject",
@@ -33,10 +34,12 @@ sap.ui.define([
 	"sap/ui/integration/util/BindingResolver",
 	"sap/ui/integration/util/Utils",
 	"sap/ui/integration/util/Form",
+	"sap/ui/integration/util/DateRangeHelper",
 	"sap/f/AvatarGroup",
 	"sap/f/AvatarGroupItem",
 	"sap/f/cards/NumericIndicators",
 	"sap/f/cards/NumericSideIndicator",
+	"sap/f/cards/loading/ObjectPlaceholder",
 	"sap/f/library",
 	"sap/m/OverflowToolbar",
 	"sap/m/OverflowToolbarButton",
@@ -60,6 +63,7 @@ sap.ui.define([
 	ComboBox,
 	TextArea,
 	Input,
+	TimePicker,
 	Log,
 	isEmptyObject,
 	isPlainObject,
@@ -71,10 +75,12 @@ sap.ui.define([
 	BindingResolver,
 	Utils,
 	Form,
+	DateRangeHelper,
 	AvatarGroup,
 	AvatarGroupItem,
 	NumericIndicators,
 	NumericSideIndicator,
+	ObjectPlaceholder,
 	fLibrary,
 	OverflowToolbar,
 	OverflowToolbarButton,
@@ -112,7 +118,7 @@ sap.ui.define([
 	 *
 	 * @extends sap.ui.integration.cards.BaseContent
 	 * @author SAP SE
-	 * @version 1.113.0
+	 * @version 1.115.0
 	 *
 	 * @constructor
 	 * @since 1.64
@@ -137,6 +143,13 @@ sap.ui.define([
 		}
 	};
 
+	/**
+	 * @override
+	 */
+	ObjectContent.prototype.createLoadingPlaceholder = function (oConfiguration) {
+		return new ObjectPlaceholder();
+	};
+
 	/**
 	 * Handler for when data is changed.
 	 */
@@ -144,10 +157,10 @@ sap.ui.define([
 		var oCard = this.getCardInstance();
 
 		if (this._hasData()) {
-			this.destroyAggregation("_noDataMessage");
+			this.hideNoDataMessage();
 		} else {
 			this.showNoDataMessage({
-				type: IllustratedMessageType.NoData,
+				illustrationType: IllustratedMessageType.NoData,
 				title: this.getCardInstance().getTranslatedText("CARD_NO_ITEMS_ERROR_CHART")
 			});
 		}
@@ -243,10 +256,10 @@ sap.ui.define([
 		var oResolvedGroupItem = merge({}, oItem),
 			aResolvedItems = [],
 			sFullPath = sObjectContentPath + sItemPath,
-			bHasValidations = ["TextArea", "Input", "ComboBox"].includes(oItem.type),
+			bIsFormInput = ["TextArea", "Input", "ComboBox", "Duration", "DateRange"].includes(oItem.type),
 			bHasItemsToResolve = ["ButtonGroup", "IconGroup"].includes(oItem.type);
 
-		if (bHasValidations) {
+		if (bIsFormInput) {
 			oResolvedGroupItem = merge(oResolvedGroupItem, this._getForm().resolveControl(oItem));
 		}
 
@@ -365,10 +378,13 @@ sap.ui.define([
 
 	ObjectContent.prototype._createGroupItems = function (oItem, sPath) {
 		var vLabel = oItem.label,
+			bShowColon = oItem.showColon,
 			oLabel,
 			vVisible,
 			oControl;
 
+		oItem.showColon = (bShowColon === undefined) ? true : bShowColon;
+
 		if (typeof oItem.visible == "string") {
 			vVisible = !Utils.hasFalsyValueAsString(oItem.visible);
 		} else {
@@ -376,15 +392,12 @@ sap.ui.define([
 		}
 
 		if (vLabel) {
-			// Checks if the label ends with ":" and if not we just add the ":"
-			vLabel = BindingHelper.formattedProperty(vLabel, function (sValue) {
-				return sValue && (sValue[sValue.length - 1] === ":" ? sValue : sValue + ":");
-			});
 
 			oLabel = new Label({
 				text: vLabel,
 				visible: vVisible,
-				wrapping: oItem.labelWrapping
+				wrapping: oItem.labelWrapping,
+				showColon: oItem.showColon
 			}).addStyleClass("sapFCardObjectItemLabel");
 
 			oLabel.addEventDelegate({
@@ -471,11 +484,17 @@ sap.ui.define([
 				oControl = this._createRatingIndicatorItem(oItem, vVisible);
 				break;
 			case "Image":
-				oControl = this._createImage(oItem, vVisible);
+				oControl = this._createImageItem(oItem, vVisible);
 				break;
 			case "Input":
 				oControl = this._createInputItem(oItem, vVisible, oLabel, sPath);
 				break;
+			case "Duration":
+				oControl = this._createDurationItem(oItem, vVisible, oLabel, sPath);
+				break;
+			case "DateRange":
+				oControl = this._createDateRangeItem(oItem, vVisible, oLabel, sPath);
+				break;
 
 			// deprecated types
 			case "link":
@@ -812,6 +831,27 @@ sap.ui.define([
 		return oControl;
 	};
 
+	ObjectContent.prototype._createDurationItem = function (oItem, vVisible, oLabel, sPath) {
+		var oForm = this._getForm(),
+			oControl = new TimePicker({
+				valueFormat: "HH:mm",
+				displayFormat: "HH:mm",
+				support2400: true,
+				required: oForm.getRequiredValidationValue(oItem),
+				value: oItem.value,
+				visible: BindingHelper.reuse(vVisible),
+				placeholder: oItem.placeholder
+			});
+
+		if (oLabel) {
+			oLabel.setLabelFor(oControl);
+		}
+
+		oForm.addControl("change", oControl, oItem, sPath);
+
+		return oControl;
+	};
+
 	ObjectContent.prototype._createRatingIndicatorItem = function (oItem, vVisible) {
 		var oControl = new RatingIndicator({
 			editable: false,
@@ -819,13 +859,14 @@ sap.ui.define([
 			maxValue: oItem.maxValue,
 			value: oItem.value,
 			visualMode: oItem.visualMode,
-			visible: BindingHelper.reuse(vVisible)
+			visible: BindingHelper.reuse(vVisible),
+			iconSize: "1rem"
 		});
 
 		return oControl;
 	};
 
-	ObjectContent.prototype._createImage = function (oItem, vVisible) {
+	ObjectContent.prototype._createImageItem = function (oItem, vVisible) {
 		var vSrc = BindingHelper.formattedProperty(oItem.src, function (sValue) {
 			return this._oIconFormatter.formatSrc(sValue);
 		}.bind(this));
@@ -844,6 +885,31 @@ sap.ui.define([
 		return oControl;
 	};
 
+	ObjectContent.prototype._createDateRangeItem = function (oItem, vVisible, oLabel, sPath) {
+		var oSettings = {
+			options: ["date"],
+			value: oItem.value
+		};
+		var oForm = this._getForm();
+		var oControl = DateRangeHelper.createInput(oSettings, this.getCardInstance(), true);
+
+		if (BindingHelper.isBindingInfo(vVisible)) {
+			oControl.bindProperty("visible", BindingHelper.reuse(vVisible));
+		} else {
+			oControl.setVisible(vVisible);
+		}
+
+		oControl.setRequired(oForm.getRequiredValidationValue(oItem));
+
+		if (oLabel) {
+			oLabel.setLabelFor(oControl);
+		}
+
+		oForm.addControl("change", oControl, oItem, sPath);
+
+		return oControl;
+	};
+
 	ObjectContent.prototype._createAFLayout = function () {
 		var oAlignedFlowLayout = new AlignedFlowLayout();