@openui5/sap.ui.integration 1.96.5 → 1.99.0

package/src/sap/ui/integration/designtime/cardEditor/propertyEditor/complexMapEditor/ComplexMapEditor.js

@@ -7,12 +7,14 @@ sap.ui.define([
 	"sap/ui/integration/designtime/baseEditor/propertyEditor/BasePropertyEditor",
 	"sap/base/util/restricted/_omit",
 	"sap/base/util/restricted/_merge",
-	"sap/base/util/deepClone"
+	"sap/base/util/deepClone",
+	"sap/ui/integration/cards/filters/DateRangeFilter"
 ], function (
 	BasePropertyEditor,
 	_omit,
 	_merge,
-	deepClone
+	deepClone,
+	DateRangeFilter
 ) {
 	"use strict";
 
@@ -53,7 +55,7 @@ sap.ui.define([
 	 * @alias sap.ui.integration.designtime.cardEditor.propertyEditor.complexMapEditor.ComplexMapEditor
 	 * @author SAP SE
 	 * @since 1.76
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @private
 	 * @experimental 1.76
@@ -155,6 +157,43 @@ sap.ui.define([
 
 			return oFormattedValue;
 		}.bind(this));
+
+		//handle card filters input data
+		if (this.getConfig().type === "filters") {
+			for (var i = 0; i < aFormattedValues.length; i++) {
+				if (!aFormattedValues[i].options) {
+					var oDefaultOptions = this._getDefaultFilterOptions();
+					aFormattedValues[i].options = oDefaultOptions;
+				}
+				if (aFormattedValues[i].type === undefined) {
+					aFormattedValues[i].selectedOptions = [];
+				}
+				if (aFormattedValues[i].type === "Select") {
+					aFormattedValues[i].sValue = aFormattedValues[i].value;
+					delete aFormattedValues[i].value;
+					aFormattedValues[i].selectedOptions = [];
+				} else if (aFormattedValues[i].type === "DateRange") {
+					// aFormattedValues[i].dValue = aFormattedValues[i].value;
+					// delete aFormattedValues[i].value;
+					//add required properties for new filter
+					if (!aFormattedValues[i].value) {
+						aFormattedValues[i].value = {option: 'today', values: []};
+					}
+					aFormattedValues[i].dValue = aFormattedValues[i].value;
+					delete aFormattedValues[i].value;
+					//construct values for selected date range option
+					var oSelectedOptions = [];
+					for (var j = 0; j < aFormattedValues[i].options.length; j++) {
+						oSelectedOptions.push({
+							key: aFormattedValues[i].options[j],
+							title: aFormattedValues[i].options[j]
+						});
+					}
+					aFormattedValues[i].selectedOptions = oSelectedOptions;
+				}
+			}
+		}
+
 		return aFormattedValues;
 	};
 
@@ -225,6 +264,19 @@ sap.ui.define([
 	};
 
 	ComplexMapEditor.prototype._processOutputValue = function(aValue) {
+		//handle filters value path conflict issue
+		if (this.getConfig().type === "filters") {
+			for (var i = 0; i < aValue.length; i++) {
+				if (aValue[i].type === "Select") {
+					aValue[i].value = aValue[i].sValue;
+					delete aValue[i].sValue;
+				} else if (aValue[i].type === "DateRange" && aValue[i].selectedOptions) {
+					aValue[i].value = aValue[i].dValue;
+					delete aValue[i].dValue;
+					delete aValue[i].selectedOptions;
+				}
+			}
+		}
 		var oFormattedValue = {};
 		aValue.forEach(function (oValue) {
 			oFormattedValue[oValue.key] = _omit(oValue, "key");
@@ -232,5 +284,11 @@ sap.ui.define([
 		return oFormattedValue;
 	};
 
+	ComplexMapEditor.prototype._getDefaultFilterOptions = function() {
+		var dateRangeFilter = new DateRangeFilter();
+		var oDefaultFilterOptions = dateRangeFilter._getDefaultOptions();
+		return oDefaultFilterOptions;
+	};
+
 	return ComplexMapEditor;
 });

package/src/sap/ui/integration/designtime/cardEditor/propertyEditor/destinationsEditor/DestinationsEditor.js

@@ -41,7 +41,7 @@ sap.ui.define([
 	 * @alias sap.ui.integration.designtime.cardEditor.propertyEditor.destinationsEditor.DestinationsEditor
 	 * @author SAP SE
 	 * @since 1.77
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @private
 	 * @experimental 1.77

package/src/sap/ui/integration/designtime/cardEditor/propertyEditor/filtersEditor/FiltersEditor.js

@@ -0,0 +1,218 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+sap.ui.define([
+	"sap/ui/integration/designtime/baseEditor/propertyEditor/BasePropertyEditor",
+	"sap/ui/integration/designtime/cardEditor/propertyEditor/complexMapEditor/ComplexMapEditor",
+	"sap/base/util/restricted/_merge",
+	"sap/ui/integration/cards/filters/DateRangeFilter"
+], function (
+	BasePropertyEditor,
+	ComplexMapEditor,
+	_merge,
+	DateRangeFilter
+) {
+	"use strict";
+
+	/**
+	 * @class
+	 * Constructor for a new <code>FiltersEditor</code>.
+	 *
+	 * <h3>Configuration</h3>
+	 *
+	 * Configuration is inherited from {@link sap.ui.integration.designtime.cardEditor.propertyEditor.complexMapEditor.ComplexMapEditor}
+	 *
+	 * <table style="width:100%;">
+	 * <tr style="text-align:left">
+	 * 	<th>Option</th>
+	 * 	<th>Type</th>
+	 * 	<th>Default</th>
+	 * 	<th>Description</th>
+	 * </tr>
+	 * <tr>
+	 * 	<td><code>allowedTypes</code></td>
+	 *  <td><code>string[]</code></td>
+	 * 	<td><code>[]</code></td>
+	 * 	<td>Allowed filter types</td>
+	 * </tr>
+	 * </table>
+	 *
+	 * @extends sap.ui.integration.designtime.cardEditor.propertyEditor.complexMapEditor.ComplexMapEditor
+	 * @alias sap.ui.integration.designtime.cardEditor.propertyEditor.filtersEditor.FiltersEditor
+	 * @author SAP SE
+	 * @since 1.98
+	 * @version 1.99.0
+	 *
+	 * @private
+	 * @experimental 1.97
+	 * @ui5-restricted
+	 */
+	var FiltersEditor = ComplexMapEditor.extend("sap.ui.integration.designtime.cardEditor.propertyEditor.filtersEditor.FiltersEditor", {
+		metadata: {
+			library: "sap.ui.integration"
+		},
+		renderer: BasePropertyEditor.getMetadata().getRenderer().render
+	});
+
+	FiltersEditor.configMetadata = Object.assign({}, ComplexMapEditor.configMetadata, {
+		allowedValues: {
+			defaultValue: [],
+			mergeStrategy: "intersection"
+		}
+	});
+
+	FiltersEditor.prototype.onBeforeConfigChange = function (oConfig) {
+		var oCustomConfig = {};
+
+		if (oConfig["allowKeyChange"]) {
+			// Filter-specific developer scenario
+			oCustomConfig = {
+				template: {
+					key: {
+						label: this.getI18nProperty("CARD_EDITOR.FILTER.KEY"),
+						path: "key",
+						type: "string",
+						enabled: oConfig.allowKeyChange,
+						allowBindings: false,
+						validators: [
+							{
+								type: "isUniqueKey",
+								config: {
+									keys: function () {
+										return Object.keys(this.getValue());
+									}.bind(this),
+									currentKey: function (oPropertyEditor) {
+										return oPropertyEditor.getValue();
+									}
+								}
+							}
+						]
+					},
+					type: {
+						label: this.getI18nProperty("CARD_EDITOR.FILTER.TYPE"),
+						path: "type",
+						type: "select",
+						items: (oConfig["allowedTypes"] || []).map(function(sKey){ return { key: sKey }; }),
+						allowCustomValues: true,
+						allowBindings: false
+					},
+					label: {
+						label: this.getI18nProperty("CARD_EDITOR.FILTER.LABEL"),
+						path: "label",
+						type: "string"
+					},
+					description: {
+						label: this.getI18nProperty("CARD_EDITOR.FILTER.DESCRIPTION"),
+						type: "string",
+						path: "description",
+						allowCustomValues: true,
+						allowBindings: false
+					},
+					value: {
+						label: this.getI18nProperty("CARD_EDITOR.FILTER.VALUE"),
+						path: "sValue",
+						type: "string",
+						visible: "{= ${type} === 'Select'}"
+					},
+					itemPath: {
+						label: this.getI18nProperty("CARD_EDITOR.FILTER.ITEM.PATH"),
+						path: "item/path",
+						type: "string",
+						visible: "{= ${type} === 'Select'}",
+						enabled: "{= ${items} === undefined || ${items} === null}"
+					},
+					itemTemplateKey: {
+						label: this.getI18nProperty("CARD_EDITOR.FILTER.ITEM.TEMPLATE.KEY"),
+						path: "item/template/key",
+						type: "string",
+						visible: "{= ${type} === 'Select'}",
+						enabled: "{= ${items} === undefined || ${items} === null}"
+					},
+					itemTemplateTitle: {
+						label: this.getI18nProperty("CARD_EDITOR.FILTER.ITEM.TEMPLATE.TITLE"),
+						path: "item/template/title",
+						type: "string",
+						visible: "{= ${type} === 'Select'}",
+						enabled: "{= ${items} === undefined || ${items} === null}"
+					},
+					itemData: {
+						label: this.getI18nProperty("CARD_EDITOR.FILTER.ITEM.DATA"),
+						path: "data",
+						type: "json",
+						visible: "{= ${type} === 'Select'}",
+						enabled: "{= ${items} === undefined || ${items} === null}"
+					},
+					items: {
+						label: this.getI18nProperty("CARD_EDITOR.FILTER.ITEMS"),
+						path: "items",
+						type: "json",
+						visible: "{= ${type} === 'Select'}",
+						enabled: "{= ${item/template/key} === undefined || ${item/template/key} === ''}"
+					},
+					dateRangeOptions: {
+						label: this.getI18nProperty("CARD_EDITOR.FILTER.OPTIONS"),
+						path: "options",
+						type: "multiSelect",
+						items: this.getAllDateRangeOptions(),
+						visible: "{= ${type} === 'DateRange'}"
+					},
+					dateRangeValueOption: {
+						label: this.getI18nProperty("CARD_EDITOR.FILTER.VALUE.OPTION"),
+						path: "dValue/option",
+						type: "select",
+						items: "{selectedOptions}",
+						visible: "{= ${type} === 'DateRange'}"
+					},
+					dateRangeValues: {
+						label: this.getI18nProperty("CARD_EDITOR.FILTER.VALUE.VALUES"),
+						path: "dValue/values",
+						type: "textArea",
+						visible: "{= ${type} === 'DateRange'}"
+					}
+				}
+			};
+		} else {
+			// Config scenario
+			oCustomConfig = {
+				collapsibleItems: false,
+				showItemLabel: false,
+				template: {
+					type: {
+						label: this.getI18nProperty("CARD_EDITOR.FILTER.TYPE"),
+						type: "select",
+						path: "type",
+						items: (oConfig["allowedTypes"] || []).map(function(sKey){ return { key: sKey }; }),
+						allowCustomValues: false,
+						allowBindings: false
+					}
+				}
+			};
+		}
+
+		var oComplexMapConfig = _merge(
+			{},
+			oCustomConfig,
+			oConfig
+		);
+		return ComplexMapEditor.prototype.onBeforeConfigChange.call(this, oComplexMapConfig);
+	};
+
+	FiltersEditor.prototype.getAllDateRangeOptions = function() {
+		var dateRangeFilter = new DateRangeFilter();
+		var oOptions = dateRangeFilter.getOptions();
+		var optionsArray = [];
+		for (var key in oOptions) {
+			if (oOptions.hasOwnProperty(key)) {
+				optionsArray.push({
+					key: oOptions[key],
+					title: oOptions[key]
+				});
+			}
+		}
+		return optionsArray;
+	};
+
+	return FiltersEditor;
+});

package/src/sap/ui/integration/designtime/cardEditor/propertyEditor/iconEditor/IconEditor.js

@@ -40,7 +40,7 @@ sap.ui.define([
 	 * @alias sap.ui.integration.designtime.cardEditor.propertyEditor.iconEditor.IconEditor
 	 * @author SAP SE
 	 * @since 1.81
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @private
 	 * @experimental 1.81

package/src/sap/ui/integration/designtime/cardEditor/propertyEditor/parametersEditor/ParametersEditor.js

@@ -45,7 +45,7 @@ sap.ui.define([
 	 * @alias sap.ui.integration.designtime.cardEditor.propertyEditor.parametersEditor.ParametersEditor
 	 * @author SAP SE
 	 * @since 1.70
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @private
 	 * @experimental 1.70
@@ -86,6 +86,7 @@ sap.ui.define([
 		var bEditableToUser = this.getBoolenValue(oConfigValue.value.editableToUser, vItemMetadata.editableToUser, true);
 		var bRequired = this.getBoolenValue(oConfigValue.value.required, vItemMetadata.required, false);
 		var bExpanded = this.getBoolenValue(oConfigValue.value.expanded, vItemMetadata.expanded, true);
+		var sLevel = oConfigValue.value.level || vItemMetadata.level || "0";
 		var sManifestpath = oConfigValue.value.manifestpath || vItemMetadata.manifestpath || "";
 		var sDescription = oConfigValue.value.description || vItemMetadata.description || "";
 		var bTranslatable = this.getBoolenValue(oConfigValue.value.translatable, vItemMetadata.translatable, false);
@@ -132,6 +133,25 @@ sap.ui.define([
 				enabled: this.getConfig().allowLabelChange,
 				itemKey: sKey
 			},
+			{
+				label: this.getI18nProperty("CARD_EDITOR.PARAMETERS.LEVEL"),
+				path: "level",
+				value: sLevel,
+				type: "select",
+				items: [
+					{
+						key: "0",
+						title: "0"
+					},
+					{
+						key: "1",
+						title: "1"
+					}
+				],
+				visible: sType === "group",
+				itemKey: sKey,
+				allowBindings: true
+			},
 			{
 				label: this.getI18nProperty("CARD_EDITOR.PARAMETERS.DESCRIPTION"),
 				path: "description",

package/src/sap/ui/integration/designtime/editor/CardEditor.js

@@ -7,11 +7,19 @@
 sap.ui.define([
 	"sap/ui/integration/editor/Editor",
 	"sap/ui/core/Core",
-	"sap/ui/integration/widgets/Card"
+	"sap/ui/integration/widgets/Card",
+	"sap/ui/integration/editor/Merger",
+	"sap/ui/model/json/JSONModel",
+	"sap/base/util/merge",
+	"sap/ui/model/resource/ResourceModel"
 ], function (
 	Editor,
 	Core,
-	Card
+	Card,
+	Merger,
+	JSONModel,
+	merge,
+	ResourceModel
 ) {
 	"use strict";
 
@@ -28,7 +36,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 * @constructor
 	 * @see {@link topic:5b46b03f024542ba802d99d67bc1a3f4 Cards}
 	 * @since 1.83
@@ -123,6 +131,47 @@ sap.ui.define([
 		}
 	};
 
+	CardEditor.prototype.createManifest = function (vIdOrSettings, bSuppress) {
+		this._isManifestReady = false;
+		if (this._oEditorManifest) {
+			this._oEditorManifest.destroy();
+		}
+		this.destroyAggregation("_extension");
+		var iCurrentModeIndex = Merger.layers[this.getMode()];
+
+		this._oEditorManifest = this._oEditorCard._oCardManifest;
+		this._registerManifestModulePath();
+		this._oInitialManifestModel = new JSONModel(this._oEditorManifest._oInitialJson);
+		this.setProperty("json", this._oEditorManifest._oInitialJson, bSuppress);
+		var oManifestJson = this._oEditorManifest._oManifest.getRawJson();
+		var _beforeCurrentLayer = merge({}, oManifestJson);
+		this._beforeManifestModel = new JSONModel(_beforeCurrentLayer);
+		if (iCurrentModeIndex < Merger.layers["translation"] && this._currentLayerManifestChanges) {
+			//merge if not translation
+			oManifestJson = Merger.mergeDelta(oManifestJson, [this._currentLayerManifestChanges]);
+		}
+		//create a manifest model after the changes are merged
+		this._manifestModel = new JSONModel(oManifestJson);
+		this._isManifestReady = true;
+		this.fireManifestReady();
+		//add a context model
+		this._createContextModel();
+		if (this._oEditorManifest.getResourceBundle()) {
+			var oResourceBundle = this._oEditorManifest.getResourceBundle();
+			var oResourceModel = new ResourceModel({
+				bundle: oResourceBundle
+			});
+			this.setModel(oResourceModel, "i18n");
+			this._oResourceBundle = oResourceBundle;
+		} else {
+			this._loadDefaultTranslations();
+		}
+
+		return this._loadExtension().then(function() {
+			this._initInternal();
+		}.bind(this));
+	};
+
 	/**
 	 * Initializes the additional content
 	 */

package/src/sap/ui/integration/designtime/editor/CardPreview.js

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * @alias sap.ui.integration.designtime.editor.CardPreview
 	 * @author SAP SE
 	 * @since 1.83.0
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 * @private
 	 * @experimental since 1.83.0
 	 * @ui5-restricted
@@ -62,21 +62,25 @@ sap.ui.define([
 				oRm.addClass("sapUiIntegrationDTPreviewDark");
 			}
 			if (oControl.getSettings().preview.position && (oControl.getSettings().preview.position === "top" || oControl.getSettings().preview.position === "bottom")) {
-				oRm.addClass("sapUiIntegrationDTPreviewMarginForAlignTopAndBottom");
+				var sLanguge = Core.getConfiguration().getLanguage().replaceAll('_', '-');
+				// for the languages "ar-SA"(Arabic) and "he-IL"(Hebrew) which write from right to left, use spec style
+				if (sLanguge.startsWith("ar") || sLanguge.startsWith("he")) {
+					oRm.addClass("sapUiIntegrationDTPreviewMarginForAlignTopAndBottomSpec");
+				} else {
+					oRm.addClass("sapUiIntegrationDTPreviewMarginForAlignTopAndBottom");
+				}
 			}
-			oRm.writeClasses();
 			oRm.openEnd();
 			oRm.openStart("div");
 			oRm.addClass("before");
-			oRm.writeAttribute("tabindex", "0");
+			oRm.writeAttribute("tabindex", "-1");
 			oRm.writeAttributeEscaped("id", oControl.getId() + "-before");
 			oRm.addStyle("z-index", oControl.getParent()._iZIndex + 1);
-			oRm.writeStyles();
 			oRm.openEnd();
 			oRm.close("div");
 			oRm.renderControl(oControl._getCardPreview());
 			oRm.openStart("div");
-			oRm.writeAttribute("tabindex", "0");
+			oRm.writeAttribute("tabindex", "-1");
 			oRm.writeAttributeEscaped("id", oControl.getId() + "-after");
 			oRm.openEnd();
 			oRm.close("div");
@@ -126,9 +130,9 @@ sap.ui.define([
 	};
 
 	CardPreview.prototype.onAfterRendering = function () {
-		var oPreview = this._getCardPreview(),
+		var oPreview = this.getAggregation("cardPreview"),
 		    sModes = this._getModes();
-		if (sModes.indexOf("Live") > -1 && oPreview.getDomRef().getElementsByClassName("sapVizFrame")) {
+		if (sModes.indexOf("Live") > -1 && oPreview && oPreview.getDomRef() && oPreview.getDomRef().getElementsByClassName("sapVizFrame")) {
 			window.setTimeout(function() {
 				try {
 					var vizFrameId = oPreview.getDomRef().getElementsByClassName("sapVizFrame")[0].id;
@@ -160,7 +164,15 @@ sap.ui.define([
 		if (oPreview) {
 			this.setAggregation("cardPreview", oPreview);
 			if (!this.getSettings().preview || this.getSettings().preview.scaled !== false) {
-				oPreview.addStyleClass("sapUiIntegrationDTPreviewScale");
+				oPreview.removeStyleClass("sapUiIntegrationDTPreviewScale");
+				oPreview.removeStyleClass("sapUiIntegrationDTPreviewScaleSpec");
+				var sLanguge = Core.getConfiguration().getLanguage().replaceAll('_', '-');
+				// for the languages "ar-SA"(Arabic) and "he-IL"(Hebrew) which write from right to left, use spec style
+				if (sLanguge.startsWith("ar") || sLanguge.startsWith("he")) {
+					oPreview.addStyleClass("sapUiIntegrationDTPreviewScaleSpec");
+				} else {
+					oPreview.addStyleClass("sapUiIntegrationDTPreviewScale");
+				}
 			} else {
 				oPreview.addStyleClass("sapUiIntegrationDTPreviewNoScale");
 			}
@@ -364,12 +376,20 @@ sap.ui.define([
 		if (!this._oModeToggleButton) {
 			this._oModeToggleButton = new ToggleButton();
 			this._oModeToggleButton.setTooltip();
-			this._oModeToggleButton.addStyleClass("sapUiIntegrationDTPreviewButton");
 			this._oModeToggleButton.attachPress(function () {
 				this._toggleCurrentMode();
 				this.update();
 			}.bind(this));
 		}
+		this._oModeToggleButton.removeStyleClass("sapUiIntegrationDTPreviewButton");
+		this._oModeToggleButton.removeStyleClass("sapUiIntegrationDTPreviewButtonSpec");
+		var sLanguge = Core.getConfiguration().getLanguage().replaceAll('_', '-');
+		// for the languages "ar-SA"(Arabic) and "he-IL"(Hebrew) which write from right to left, use spec style
+		if (sLanguge.startsWith("ar") || sLanguge.startsWith("he")) {
+			this._oModeToggleButton.addStyleClass("sapUiIntegrationDTPreviewButtonSpec");
+		} else {
+			this._oModeToggleButton.addStyleClass("sapUiIntegrationDTPreviewButton");
+		}
 		var tb = this._oModeToggleButton,
 			currentMode = this._getCurrentMode();
 		if (currentMode === "None") {

package/src/sap/ui/integration/designtime/editor/css/CardPreview.css

@@ -15,6 +15,10 @@
 	margin-left: calc(50% - 135px);
 }
 
+.sapUiIntegrationDTPreviewMarginForAlignTopAndBottomSpec {
+	margin-right: calc(50% - 135px);
+}
+
 .sapUiIntegrationDTPreview>.before {
 	position: absolute;
 	min-width: calc(190px + 5rem);
@@ -45,7 +49,20 @@
 	position: absolute
 }
 
+.sapUiIntegrationDTPreview .sapFCard.sapUiIntegrationDTPreviewScaleSpec {
+	transform: scale3d(0.4, 0.4, 1);
+	transform-origin: 100% 0;
+	width: 500px !important;
+	height: 600px !important;
+	position: absolute
+}
+
 .sapUiIntegrationDTPreview .sapUiIntegrationDTPreviewButton {
 	position: absolute !important;
-	margin: calc(260px + 0.3rem) 0 0 calc(95px - 1rem) !important;
+	margin: calc(260px + 0.3rem) 0 0 calc(95px - 0.5rem) !important;
+}
+
+.sapUiIntegrationDTPreview .sapUiIntegrationDTPreviewButtonSpec {
+	position: absolute !important;
+	margin: calc(260px + 0.3rem) calc(95px - 0.5rem) 0 0 !important
 }