@sap/open.fe 1.94.0

package/packages/sap.fe.core/src/sap/fe/core/controls/FieldWrapper-dbg.js

@@ -0,0 +1,150 @@
+/*!
+ * SAP UI development toolkit for HTML5 (SAPUI5)
+        (c) Copyright 2009-2021 SAP SE. All rights reserved
+    
+ */
+sap.ui.define(["sap/ui/core/Control", "sap/ui/base/ManagedObjectObserver"], function(Control, ManagedObjectObserver) {
+	"use strict";
+
+	return Control.extend("sap.fe.core.controls.FieldWrapper", {
+		metadata: {
+			interfaces: ["sap.ui.core.IFormContent"],
+			properties: {
+				width: {
+					type: "sap.ui.core.CSSSize",
+					defaultValue: null
+				},
+				formDoNotAdjustWidth: {
+					type: "boolean",
+					defaultValue: false
+				},
+				editMode: {
+					type: "string",
+					defaultValue: "Display"
+				},
+				/**
+				 * Property that if it equals to "" will show a an hyphen as a placeholder for the field.
+				 */
+				emptyIndicatorTrigger: {
+					type: "string",
+					defaultValue: ""
+				},
+				required: {
+					type: "boolean",
+					defaultValue: false
+				}
+			},
+			associations: {
+				/**
+				 * Association to controls / IDs that label this control (see WAI-ARIA attribute aria-labelledby).
+				 */
+				ariaLabelledBy: { type: "sap.ui.core.Control", multiple: true, singularName: "ariaLabelledBy" }
+			},
+			defaultAggregation: "contentDisplay",
+			aggregations: {
+				contentDisplay: { type: "sap.ui.core.Control", multiple: false },
+				contentEdit: { type: "sap.ui.core.Control", multiple: true }
+			}
+		},
+		enhanceAccessibilityState: function(oElement, mAriaProps) {
+			var oParent = this.getParent();
+
+			if (oParent && oParent.enhanceAccessibilityState) {
+				// use FieldWrapper as control, but aria properties of rendered inner control.
+				oParent.enhanceAccessibilityState(this, mAriaProps);
+			}
+
+			return mAriaProps;
+		},
+		getAccessibilityInfo: function() {
+			var oContent;
+			if (this.getEditMode() === "Display") {
+				oContent = this.getContentDisplay();
+			} else {
+				oContent = this.getContentEdit().length ? this.getContentEdit()[0] : null;
+			}
+			return oContent && oContent.getAccessibilityInfo ? oContent.getAccessibilityInfo() : {};
+		},
+
+		_setAriaLabelledBy: function(oContent) {
+			if (oContent && oContent.addAriaLabelledBy) {
+				var aAriaLabelledBy = this.getAriaLabelledBy();
+
+				for (var i = 0; i < aAriaLabelledBy.length; i++) {
+					var sId = aAriaLabelledBy[i];
+					var aAriaLabelledBys = oContent.getAriaLabelledBy() || [];
+					if (aAriaLabelledBys.indexOf(sId) === -1) {
+						oContent.addAriaLabelledBy(sId);
+					}
+				}
+			}
+		},
+		onBeforeRendering: function() {
+			// before calling the renderer of the FieldWrapper parent control may have set ariaLabelledBy
+			// we ensure it is passed to its inner controls
+			this._setAriaLabelledBy(this.getContentDisplay());
+			var aContentEdit = this.getContentEdit();
+			for (var i = 0; i < aContentEdit.length; i++) {
+				this._setAriaLabelledBy(aContentEdit[i]);
+			}
+		},
+		renderer: {
+			apiVersion: 2,
+			render: function(oRm, oControl) {
+				oRm.openStart("div", oControl);
+				if (oControl.getEditMode() === "Display") {
+					oRm.style("width", oControl.getWidth());
+					oRm.style("display", "inline-block");
+					oRm.openEnd();
+					var oContentDisplayControl = oControl.getContentDisplay();
+					// we only check empty trigger if the control doesnt display anything when there is no value
+					var aHyphenBlockList = [
+						"sap.m.ObjectStatus",
+						"sap.m.RatingIndicator",
+						"sap.m.ProgressIndicator",
+						"sap.fe.core.controls.FormElementWrapper"
+					];
+					var bCheckEmptyTrigger = aHyphenBlockList.every(function(sBlockControlType) {
+						return !oContentDisplayControl.isA(sBlockControlType);
+					});
+					if (bCheckEmptyTrigger && oContentDisplayControl && !oControl.getEmptyIndicatorTrigger()) {
+						var oResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.fe.core");
+						// invisible text for screenreader
+						oRm.openStart("span");
+						oRm.class("sapUiPseudoInvisibleText");
+						oRm.openEnd();
+						oRm.text(oResourceBundle.getText("T_FIELDWRAPPER_NO_VALUE"));
+						oRm.close("span");
+
+						// element for empty indicator
+						oRm.openStart("span");
+						oRm.attr("aria-hidden", "true");
+						oRm.attr("emptyindicator", oResourceBundle.getText("T_FIELDWRAPPER_EMPTY_INDICATOR"));
+						oRm.class("sapMText");
+						oRm.class("sapUiSelectable");
+						oRm.class("sapMTextMaxWidth");
+						oRm.class("sapUiMdcFieldBaseEmpty");
+						oRm.openEnd();
+						oRm.close("span");
+					} else {
+						oRm.renderControl(oControl.getContentDisplay()); // render the child Control for display
+					}
+				} else {
+					var aContentEdit = oControl.getContentEdit();
+
+					// if (aContentEdit.length > 1) {
+					// 	oRm.class("sapUiMdcFieldBaseMoreFields");
+					// }
+					oRm.style("width", oControl.getWidth());
+					oRm.style("display", "inline-block");
+					oRm.openEnd();
+					for (var i = 0; i < aContentEdit.length; i++) {
+						var oContent = aContentEdit[i]; // render the child Control  for edit
+						oRm.renderControl(oContent);
+					}
+				}
+				oRm.close("div"); // end of the complete Control
+			}
+		}
+	});
+});

package/packages/sap.fe.core/src/sap/fe/core/controls/FieldWrapper.js

@@ -0,0 +1,6 @@
+/*!
+ * SAP UI development toolkit for HTML5 (SAPUI5)
+        (c) Copyright 2009-2021 SAP SE. All rights reserved
+    
+ */
+sap.ui.define(["sap/ui/core/Control","sap/ui/base/ManagedObjectObserver"],function(C,M){"use strict";return C.extend("sap.fe.core.controls.FieldWrapper",{metadata:{interfaces:["sap.ui.core.IFormContent"],properties:{width:{type:"sap.ui.core.CSSSize",defaultValue:null},formDoNotAdjustWidth:{type:"boolean",defaultValue:false},editMode:{type:"string",defaultValue:"Display"},emptyIndicatorTrigger:{type:"string",defaultValue:""},required:{type:"boolean",defaultValue:false}},associations:{ariaLabelledBy:{type:"sap.ui.core.Control",multiple:true,singularName:"ariaLabelledBy"}},defaultAggregation:"contentDisplay",aggregations:{contentDisplay:{type:"sap.ui.core.Control",multiple:false},contentEdit:{type:"sap.ui.core.Control",multiple:true}}},enhanceAccessibilityState:function(e,a){var p=this.getParent();if(p&&p.enhanceAccessibilityState){p.enhanceAccessibilityState(this,a);}return a;},getAccessibilityInfo:function(){var c;if(this.getEditMode()==="Display"){c=this.getContentDisplay();}else{c=this.getContentEdit().length?this.getContentEdit()[0]:null;}return c&&c.getAccessibilityInfo?c.getAccessibilityInfo():{};},_setAriaLabelledBy:function(c){if(c&&c.addAriaLabelledBy){var a=this.getAriaLabelledBy();for(var i=0;i<a.length;i++){var I=a[i];var A=c.getAriaLabelledBy()||[];if(A.indexOf(I)===-1){c.addAriaLabelledBy(I);}}}},onBeforeRendering:function(){this._setAriaLabelledBy(this.getContentDisplay());var c=this.getContentEdit();for(var i=0;i<c.length;i++){this._setAriaLabelledBy(c[i]);}},renderer:{apiVersion:2,render:function(r,c){r.openStart("div",c);if(c.getEditMode()==="Display"){r.style("width",c.getWidth());r.style("display","inline-block");r.openEnd();var o=c.getContentDisplay();var h=["sap.m.ObjectStatus","sap.m.RatingIndicator","sap.m.ProgressIndicator","sap.fe.core.controls.FormElementWrapper"];var b=h.every(function(B){return!o.isA(B);});if(b&&o&&!c.getEmptyIndicatorTrigger()){var R=sap.ui.getCore().getLibraryResourceBundle("sap.fe.core");r.openStart("span");r.class("sapUiPseudoInvisibleText");r.openEnd();r.text(R.getText("T_FIELDWRAPPER_NO_VALUE"));r.close("span");r.openStart("span");r.attr("aria-hidden","true");r.attr("emptyindicator",R.getText("T_FIELDWRAPPER_EMPTY_INDICATOR"));r.class("sapMText");r.class("sapUiSelectable");r.class("sapMTextMaxWidth");r.class("sapUiMdcFieldBaseEmpty");r.openEnd();r.close("span");}else{r.renderControl(c.getContentDisplay());}}else{var a=c.getContentEdit();r.style("width",c.getWidth());r.style("display","inline-block");r.openEnd();for(var i=0;i<a.length;i++){var d=a[i];r.renderControl(d);}}r.close("div");}}});});

package/packages/sap.fe.core/src/sap/fe/core/controls/FilterBar-dbg.js

@@ -0,0 +1,162 @@
+/*!
+ * SAP UI development toolkit for HTML5 (SAPUI5)
+        (c) Copyright 2009-2021 SAP SE. All rights reserved
+    
+ */
+sap.ui.define(
+	[
+		"sap/ui/mdc/FilterBar",
+		"sap/ui/mdc/filterbar/FilterBarBaseRenderer",
+		"sap/ui/mdc/filterbar/aligned/FilterItemLayout",
+		"sap/fe/core/controls/filterbar/VisualFilterContainer",
+		"sap/fe/core/controls/filterbar/FilterContainer"
+	],
+	function(MdcFilterBar, FilterBarBaseRenderer, FilterItemLayout, VisualFilterContainer, FilterContainer) {
+		"use strict";
+		var FilterBar = MdcFilterBar.extend("sap.fe.core.controls.FilterBar", {
+			metadata: {
+				properties: {
+					initialLayout: {
+						type: "string",
+						defaultValue: "compact"
+					}
+				},
+				associations: {
+					/**
+					 * Control which allows for switching between visual and normal filter layouts
+					 */
+					toggleControl: {
+						type: "sap.m.SegmentedButton",
+						multiple: false
+					}
+				}
+			},
+			renderer: FilterBarBaseRenderer
+		});
+
+		FilterBar.prototype.setToggleControl = function(vToggle) {
+			if (typeof vToggle === "string") {
+				this._oSegmentedButton = sap.ui.getCore().byId(vToggle);
+			} else {
+				this._oSegmentedButton = vToggle;
+			}
+
+			if (this.getToggleControl() && this._oSegmentedButton) {
+				this._oSegmentedButton.detachEvent("select", this._toggleLayout.bind(this));
+			}
+			if (this._oSegmentedButton) {
+				this._oSegmentedButton.attachEvent("select", this._toggleLayout.bind(this));
+			}
+			this.setAssociation("toggleControl", vToggle, true);
+		};
+
+		FilterBar.prototype._toggleLayout = function() {
+			// Since primary layout is always compact
+			// hence set the secondary layout as visual filter only for the first time only
+			if (!this._oSecondaryFilterBarLayout) {
+				this._oSecondaryFilterBarLayout = new VisualFilterContainer();
+			}
+
+			// do not show Adapt Filters Button for visual layout
+			if (this._oSecondaryFilterBarLayout.isA("sap.fe.core.controls.filterbar.VisualFilterContainer")) {
+				this.setShowAdaptFiltersButton(false);
+			} else {
+				this.setShowAdaptFiltersButton(true);
+			}
+
+			// get all filter fields and button of the current layout
+			var oCurrentFilterBarLayout = this._oFilterBarLayout;
+			var oFilterItems = this.getFilterItems();
+			var aFilterFields = oCurrentFilterBarLayout.getAllFilterFields();
+			var aSortedFilterFields = this.getSortedFilterFields(oFilterItems, aFilterFields);
+			var aButtons = oCurrentFilterBarLayout.getAllButtons();
+			var aVisualFilterFields =
+				oCurrentFilterBarLayout.getAllVisualFilterFields && oCurrentFilterBarLayout.getAllVisualFilterFields();
+			if (this._oSecondaryFilterBarLayout.isA("sap.fe.core.controls.filterbar.VisualFilterContainer")) {
+				this._oSecondaryFilterBarLayout.setAllFilterFields(aSortedFilterFields, aVisualFilterFields);
+			}
+			// use secondary filter bar layout as new layout
+			this._oFilterBarLayout = this._oSecondaryFilterBarLayout;
+
+			// insert all filter fields from current layout to new layout
+			var that = this;
+			aFilterFields.forEach(function(oFilterField, iIndex) {
+				oCurrentFilterBarLayout.removeFilterField(oFilterField);
+				that._oFilterBarLayout.insertFilterField(oFilterField, iIndex);
+			});
+			// insert all buttons from the current layout to the new layout
+			aButtons.forEach(function(oButton) {
+				oCurrentFilterBarLayout.removeButton(oButton);
+				that._oFilterBarLayout.addButton(oButton);
+			});
+
+			// set the current filter bar layout to the secondary one
+			this._oSecondaryFilterBarLayout = oCurrentFilterBarLayout;
+
+			// update the layout aggregation of the filter bar and rerender the same.
+			this.setAggregation("layout", that._oFilterBarLayout, true);
+			this._oFilterBarLayout.rerender();
+		};
+
+		FilterBar.prototype.getSortedFilterFields = function(aFilterItems, aFilterFields) {
+			var aFilterIds = [];
+			aFilterItems.forEach(function(oFilterItem) {
+				aFilterIds.push(oFilterItem.getId());
+			});
+			aFilterFields.sort(function(aFirstItem, aSecondItem) {
+				var sFirstItemVFId, sSecondItemVFId;
+				aFirstItem.getContent().forEach(function(oInnerControl) {
+					if (oInnerControl.isA("sap.ui.mdc.FilterField")) {
+						sFirstItemVFId = oInnerControl.getId();
+					}
+				});
+				aSecondItem.getContent().forEach(function(oInnerControl) {
+					if (oInnerControl.isA("sap.ui.mdc.FilterField")) {
+						sSecondItemVFId = oInnerControl.getId();
+					}
+				});
+				return aFilterIds.indexOf(sFirstItemVFId) - aFilterIds.indexOf(sSecondItemVFId);
+			});
+			return aFilterFields;
+		};
+
+		FilterBar.prototype._createInnerLayout = function() {
+			this._oFilterBarLayout = new FilterContainer();
+			this._cLayoutItem = FilterItemLayout;
+			this._oFilterBarLayout.getInner().addStyleClass("sapUiMdcFilterBarBaseAFLayout");
+			this._addButtons();
+
+			// TODO: Check with MDC if there is a better way to load visual filter on the basis of control property
+			// _createInnerLayout is called on Init by the filter bar base.
+			// This mean that we do not have access to the control properties yet
+			// and hence we cannot decide on the basis of control properties whether initial layout should be compact or visual
+			// As a result we have to do this workaround to always load the compact layout by default
+			// And toogle the same in case the initialLayout was supposed to be visual filters.
+			var oInnerLayout = this._oFilterBarLayout.getInner(),
+				that = this;
+			var oFilterContainerInnerLayoutEventDelegate = {
+				onBeforeRendering: function() {
+					if (that.getInitialLayout() === "visual") {
+						that._toggleLayout();
+					}
+					oInnerLayout.removeEventDelegate(oFilterContainerInnerLayoutEventDelegate);
+				}
+			};
+			oInnerLayout.addEventDelegate(oFilterContainerInnerLayoutEventDelegate);
+
+			this.setAggregation("layout", this._oFilterBarLayout, true);
+		};
+
+		FilterBar.prototype.exit = function() {
+			MdcFilterBar.prototype.exit.apply(this, arguments);
+			// Sometimes upon external navigation this._SegmentedButton is already destroyed
+			// so check if it exists and then only remove stuff
+			if (this._oSegmentedButton) {
+				this._oSegmentedButton.detachEvent("select", this._toggleLayout);
+				delete this._oSegmentedButton;
+			}
+		};
+
+		return FilterBar;
+	}
+);

package/packages/sap.fe.core/src/sap/fe/core/controls/FilterBar.js

@@ -0,0 +1,6 @@
+/*!
+ * SAP UI development toolkit for HTML5 (SAPUI5)
+        (c) Copyright 2009-2021 SAP SE. All rights reserved
+    
+ */
+sap.ui.define(["sap/ui/mdc/FilterBar","sap/ui/mdc/filterbar/FilterBarBaseRenderer","sap/ui/mdc/filterbar/aligned/FilterItemLayout","sap/fe/core/controls/filterbar/VisualFilterContainer","sap/fe/core/controls/filterbar/FilterContainer"],function(M,F,a,V,b){"use strict";var c=M.extend("sap.fe.core.controls.FilterBar",{metadata:{properties:{initialLayout:{type:"string",defaultValue:"compact"}},associations:{toggleControl:{type:"sap.m.SegmentedButton",multiple:false}}},renderer:F});c.prototype.setToggleControl=function(t){if(typeof t==="string"){this._oSegmentedButton=sap.ui.getCore().byId(t);}else{this._oSegmentedButton=t;}if(this.getToggleControl()&&this._oSegmentedButton){this._oSegmentedButton.detachEvent("select",this._toggleLayout.bind(this));}if(this._oSegmentedButton){this._oSegmentedButton.attachEvent("select",this._toggleLayout.bind(this));}this.setAssociation("toggleControl",t,true);};c.prototype._toggleLayout=function(){if(!this._oSecondaryFilterBarLayout){this._oSecondaryFilterBarLayout=new V();}if(this._oSecondaryFilterBarLayout.isA("sap.fe.core.controls.filterbar.VisualFilterContainer")){this.setShowAdaptFiltersButton(false);}else{this.setShowAdaptFiltersButton(true);}var C=this._oFilterBarLayout;var f=this.getFilterItems();var d=C.getAllFilterFields();var s=this.getSortedFilterFields(f,d);var B=C.getAllButtons();var v=C.getAllVisualFilterFields&&C.getAllVisualFilterFields();if(this._oSecondaryFilterBarLayout.isA("sap.fe.core.controls.filterbar.VisualFilterContainer")){this._oSecondaryFilterBarLayout.setAllFilterFields(s,v);}this._oFilterBarLayout=this._oSecondaryFilterBarLayout;var t=this;d.forEach(function(o,i){C.removeFilterField(o);t._oFilterBarLayout.insertFilterField(o,i);});B.forEach(function(o){C.removeButton(o);t._oFilterBarLayout.addButton(o);});this._oSecondaryFilterBarLayout=C;this.setAggregation("layout",t._oFilterBarLayout,true);this._oFilterBarLayout.rerender();};c.prototype.getSortedFilterFields=function(f,d){var e=[];f.forEach(function(o){e.push(o.getId());});d.sort(function(g,s){var h,S;g.getContent().forEach(function(i){if(i.isA("sap.ui.mdc.FilterField")){h=i.getId();}});s.getContent().forEach(function(i){if(i.isA("sap.ui.mdc.FilterField")){S=i.getId();}});return e.indexOf(h)-e.indexOf(S);});return d;};c.prototype._createInnerLayout=function(){this._oFilterBarLayout=new b();this._cLayoutItem=a;this._oFilterBarLayout.getInner().addStyleClass("sapUiMdcFilterBarBaseAFLayout");this._addButtons();var i=this._oFilterBarLayout.getInner(),t=this;var f={onBeforeRendering:function(){if(t.getInitialLayout()==="visual"){t._toggleLayout();}i.removeEventDelegate(f);}};i.addEventDelegate(f);this.setAggregation("layout",this._oFilterBarLayout,true);};c.prototype.exit=function(){M.prototype.exit.apply(this,arguments);if(this._oSegmentedButton){this._oSegmentedButton.detachEvent("select",this._toggleLayout);delete this._oSegmentedButton;}};return c;});

package/packages/sap.fe.core/src/sap/fe/core/controls/FormElementWrapper-dbg.js

@@ -0,0 +1,47 @@
+/*!
+ * SAP UI development toolkit for HTML5 (SAPUI5)
+        (c) Copyright 2009-2021 SAP SE. All rights reserved
+    
+ */
+sap.ui.define(["sap/ui/core/Control", "sap/ui/Device"], function(Control, Device) {
+	"use strict";
+	return Control.extend("sap.fe.core.controls.FormElementWrapper", {
+		metadata: {
+			interfaces: ["sap.ui.core.IFormContent"],
+			properties: {
+				width: {
+					type: "sap.ui.core.CSSSize",
+					defaultValue: null
+				},
+				formDoNotAdjustWidth: {
+					type: "boolean",
+					defaultValue: false
+				}
+			},
+			defaultAggregation: "content",
+			aggregations: {
+				content: { type: "sap.ui.core.Control", multiple: false }
+			}
+		},
+		getAccessibilityInfo: function() {
+			var oContent = this.getContent();
+			return oContent && oContent.getAccessibilityInfo ? oContent.getAccessibilityInfo() : {};
+		},
+		renderer: {
+			apiVersion: 2,
+			render: function(oRm, oControl) {
+				oRm.openStart("div", oControl);
+				oRm.style("min-height", "1rem");
+				oRm.style("width", oControl.getWidth());
+				if (Device.browser.msie) {
+					oRm.style("display", "block");
+				} else {
+					oRm.style("display", "inline-block");
+				}
+				oRm.openEnd();
+				oRm.renderControl(oControl.getContent()); // render the child Control
+				oRm.close("div"); // end of the complete Control
+			}
+		}
+	});
+});

package/packages/sap.fe.core/src/sap/fe/core/controls/FormElementWrapper.js

@@ -0,0 +1,6 @@
+/*!
+ * SAP UI development toolkit for HTML5 (SAPUI5)
+        (c) Copyright 2009-2021 SAP SE. All rights reserved
+    
+ */
+sap.ui.define(["sap/ui/core/Control","sap/ui/Device"],function(C,D){"use strict";return C.extend("sap.fe.core.controls.FormElementWrapper",{metadata:{interfaces:["sap.ui.core.IFormContent"],properties:{width:{type:"sap.ui.core.CSSSize",defaultValue:null},formDoNotAdjustWidth:{type:"boolean",defaultValue:false}},defaultAggregation:"content",aggregations:{content:{type:"sap.ui.core.Control",multiple:false}}},getAccessibilityInfo:function(){var c=this.getContent();return c&&c.getAccessibilityInfo?c.getAccessibilityInfo():{};},renderer:{apiVersion:2,render:function(r,c){r.openStart("div",c);r.style("min-height","1rem");r.style("width",c.getWidth());if(D.browser.msie){r.style("display","block");}else{r.style("display","inline-block");}r.openEnd();r.renderControl(c.getContent());r.close("div");}}});});

package/packages/sap.fe.core/src/sap/fe/core/controls/NonComputedVisibleKeyFieldsDialog.fragment.xml

@@ -0,0 +1,61 @@
+<core:FragmentDefinition
+	xmlns:template="http://schemas.sap.com/sapui5/extension/sap.ui.core.template/1"
+	xmlns="sap.m"
+	xmlns:core="sap.ui.core"
+	xmlns:mdc="sap.ui.mdc"
+	xmlns:mdcField="sap.ui.mdc.field"
+	xmlns:form="sap.ui.layout.form"
+	xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
+	template:require="{
+		MODEL: 'sap/ui/model/odata/v4/AnnotationHelper',
+		COMMON: 'sap/fe/macros/CommonHelper',
+		ID: 'sap/fe/core/helpers/StableIdHelper',
+		ValueHelpTemplating: 'sap/fe/macros/internal/valuehelp/ValueHelpTemplating',
+		Property: 'sap/fe/core/templating/PropertyFormatters',
+		FIELD: 'sap/fe/macros/field/FieldHelper'
+	}"
+>
+	<template:with path="fields>" var="allFields">
+		<form:SimpleForm>
+			<template:repeat list="{allFields>}" var="key">
+				<template:with path="key>" helper="COMMON.getPathToKey" var="immutableKey">
+					<Label text="{= ${immutableKey>@com.sap.vocabularies.Common.v1.Label}}" />
+					<mdc:Field
+						delegate="{name: 'sap/ui/mdc/odata/v4/FieldBaseDelegate'}"
+						id="{= ID.generate(['CreateDialog', ${entitySet>@sapui.name}, ${immutableKey>@sapui.name}]) }"
+						value="{immutableKey>@@MODEL.format}"
+						width="100%"
+						required="{= ${immutableKey>@com.sap.vocabularies.Common.v1.FieldControl} &amp;&amp; ${immutableKey>@com.sap.vocabularies.Common.v1.FieldControl/$EnumMember} &amp;&amp; ${immutableKey>@com.sap.vocabularies.Common.v1.FieldControl/$EnumMember} === 'com.sap.vocabularies.Common.v1.FieldControlType/Mandatory'}"
+						display="{immutableKey>@@FIELD.getAPDialogDisplayFormat}"
+						change="{= '.handleChange($event, \'' + ${immutableKey>@sapui.name} + '\')' }"
+						liveChange=".handleLiveChange"
+						fieldHelp="{= ${immutableKey>@@Property.hasValueHelp} ? ID.generate([${immutableKey>@sapui.name},'VH']) : undefined }"
+						customData:fieldName="{immutableKey>@sapui.name}"
+					>
+
+						<template:if test="{immutableKey>@@Property.hasValueHelp}">
+							<template:then>
+								<mdc:dependents>
+									<mdcField:FieldValueHelp
+										id="{= ID.generate([${immutableKey>@sapui.name},'VH']) }"
+										delegate="{= '{name:\'sap/fe/macros/FieldValueHelpDelegate\', payload: {propertyPath: \''+${immutableKey>@@Property.getPropertyPath}+'\' } }' }"
+										validateInput="{= ValueHelpTemplating.requiresValidation(${immutableKey>@@Property.getProperty})}"
+										noDialog="{= ${immutableKey>@@Property.hasValueHelpWithFixedValues}}"
+										caseSensitive="{= ValueHelpTemplating.useCaseSensitiveFilterRequests(${immutableKey>@@Property.getPropertyObjectPath}, ${immutableKey>/@Org.OData.Capabilities.V1.FilterFunctions})}"
+									>
+										<mdcField:dialogContent>
+											<mdcField:FieldValueHelpMdcTableWrapper />
+										</mdcField:dialogContent>
+										<mdcField:suggestContent>
+											<mdcField:FieldValueHelpMTableWrapper />
+										</mdcField:suggestContent>
+									</mdcField:FieldValueHelp>
+								</mdc:dependents>
+							</template:then>
+						</template:if>
+					</mdc:Field>
+				</template:with>
+			</template:repeat>
+		</form:SimpleForm>
+	</template:with>
+</core:FragmentDefinition>

package/packages/sap.fe.core/src/sap/fe/core/controls/filterbar/FilterContainer-dbg.js

@@ -0,0 +1,122 @@
+/*!
+ * SAP UI development toolkit for HTML5 (SAPUI5)
+        (c) Copyright 2009-2021 SAP SE. All rights reserved
+    
+ */
+
+// Provides control sap.fe.core.filterbar.FilterContainer.
+sap.ui.define(["sap/ui/mdc/filterbar/aligned/FilterContainer"], function(MdcFilterContainer) {
+	"use strict";
+	/**
+	 * Constructor for a new FE filter container
+	 * @param {string} [sId] ID for the new control, generated automatically if no ID is given
+	 * @extends sap.ui.mdc.filterbar.aligned.FilterContainer
+	 * @class
+	 * @private
+	 * @alias sap.fe.core.controls.filterbar.FilterContainer
+	 */
+	var FilterContainer = MdcFilterContainer.extend("sap.fe.core.controls.filterbar.FilterContainer");
+
+	FilterContainer.prototype.init = function() {
+		this.aAllFilterFields = [];
+		this.aAllVisualFilters = {};
+		MdcFilterContainer.prototype.init.apply(this, arguments);
+	};
+
+	FilterContainer.prototype.exit = function() {
+		// destroy layout
+		var that = this;
+		MdcFilterContainer.prototype.exit.apply(this, arguments);
+		// destroy all filter fields which are not in the layout
+		this.aAllFilterFields.forEach(function(oFilterField) {
+			oFilterField.destroy();
+		});
+		Object.keys(this.aAllVisualFilters).forEach(function(sKey) {
+			that.aAllVisualFilters[sKey].destroy();
+		});
+	};
+
+	FilterContainer.prototype.insertFilterField = function(oControl) {
+		var oFilterItemLayoutEventDelegate = {
+			onBeforeRendering: function() {
+				// For compact filters the item layout needs to render both label and filter field.
+				// hence use the original getContent of the FilterItemLayout
+				if (oControl._fnGetContentCopy) {
+					oControl.getContent = oControl._fnGetContentCopy;
+				}
+				oControl.removeEventDelegate(oFilterItemLayoutEventDelegate);
+			}
+		};
+		oControl.addEventDelegate(oFilterItemLayoutEventDelegate);
+
+		// In this layout there is no need to render visual filter
+		// hence find the filter field from the layout and remove it's content aggregation
+		var that = this;
+		oControl.getContent().forEach(function(oInnerControl) {
+			if (oInnerControl.isA("sap.ui.mdc.FilterField") && oInnerControl.data("hasVisualFilter") === "true") {
+				// store the visual filter for later use.
+				var oVFId = oInnerControl.getId();
+				that.aAllVisualFilters[oVFId] = oInnerControl.getContent();
+				// remove the content aggregation to render internal content of the field
+				oInnerControl.setContent(null);
+			}
+		});
+
+		// store filter fields to refer to when switching between layout
+		this.aAllFilterFields.push(oControl);
+
+		MdcFilterContainer.prototype.insertFilterField.apply(this, arguments);
+	};
+
+	FilterContainer.prototype.removeFilterField = function(oControl) {
+		var oFilterFieldIndex = this.aAllFilterFields.findIndex(function(oFilterField) {
+			return oFilterField.getId() === oControl.getId();
+		});
+
+		var that = this;
+		// Setting VF content for Fillterfield before removing
+		oControl.getContent().forEach(function(oInnerControl) {
+			if (
+				oInnerControl.isA("sap.ui.mdc.FilterField") &&
+				oInnerControl.data("hasVisualFilter") === "true" &&
+				!oInnerControl.getContent()
+			) {
+				var oVFId = oInnerControl.getId();
+				if (that.aAllVisualFilters[oVFId]) {
+					oInnerControl.setContent(that.aAllVisualFilters[oVFId]);
+				}
+			}
+		});
+
+		this.aAllFilterFields.splice(oFilterFieldIndex, 1);
+
+		MdcFilterContainer.prototype.removeFilterField.apply(this, arguments);
+	};
+
+	FilterContainer.prototype.removeAllFilterFields = function() {
+		this.aAllFilterFields = [];
+		this.aAllVisualFilters = {};
+		this.oLayout.removeAllContent();
+	};
+	FilterContainer.prototype.getAllButtons = function() {
+		return this.oLayout.getEndContent();
+	};
+
+	FilterContainer.prototype.removeButton = function(oControl) {
+		this.oLayout.removeEndContent(oControl);
+	};
+
+	FilterContainer.prototype.getAllFilterFields = function() {
+		return this.aAllFilterFields.slice();
+	};
+
+	FilterContainer.prototype.getAllVisualFilterFields = function() {
+		return this.aAllVisualFilters;
+	};
+
+	FilterContainer.prototype.setAllFilterFields = function(aFilterFields) {
+		this.aAllFilterFields = aFilterFields;
+	};
+
+	return FilterContainer;
+});

package/packages/sap.fe.core/src/sap/fe/core/controls/filterbar/FilterContainer.js

@@ -0,0 +1,6 @@
+/*!
+ * SAP UI development toolkit for HTML5 (SAPUI5)
+        (c) Copyright 2009-2021 SAP SE. All rights reserved
+    
+ */
+sap.ui.define(["sap/ui/mdc/filterbar/aligned/FilterContainer"],function(M){"use strict";var F=M.extend("sap.fe.core.controls.filterbar.FilterContainer");F.prototype.init=function(){this.aAllFilterFields=[];this.aAllVisualFilters={};M.prototype.init.apply(this,arguments);};F.prototype.exit=function(){var t=this;M.prototype.exit.apply(this,arguments);this.aAllFilterFields.forEach(function(f){f.destroy();});Object.keys(this.aAllVisualFilters).forEach(function(k){t.aAllVisualFilters[k].destroy();});};F.prototype.insertFilterField=function(c){var f={onBeforeRendering:function(){if(c._fnGetContentCopy){c.getContent=c._fnGetContentCopy;}c.removeEventDelegate(f);}};c.addEventDelegate(f);var t=this;c.getContent().forEach(function(i){if(i.isA("sap.ui.mdc.FilterField")&&i.data("hasVisualFilter")==="true"){var v=i.getId();t.aAllVisualFilters[v]=i.getContent();i.setContent(null);}});this.aAllFilterFields.push(c);M.prototype.insertFilterField.apply(this,arguments);};F.prototype.removeFilterField=function(c){var f=this.aAllFilterFields.findIndex(function(o){return o.getId()===c.getId();});var t=this;c.getContent().forEach(function(i){if(i.isA("sap.ui.mdc.FilterField")&&i.data("hasVisualFilter")==="true"&&!i.getContent()){var v=i.getId();if(t.aAllVisualFilters[v]){i.setContent(t.aAllVisualFilters[v]);}}});this.aAllFilterFields.splice(f,1);M.prototype.removeFilterField.apply(this,arguments);};F.prototype.removeAllFilterFields=function(){this.aAllFilterFields=[];this.aAllVisualFilters={};this.oLayout.removeAllContent();};F.prototype.getAllButtons=function(){return this.oLayout.getEndContent();};F.prototype.removeButton=function(c){this.oLayout.removeEndContent(c);};F.prototype.getAllFilterFields=function(){return this.aAllFilterFields.slice();};F.prototype.getAllVisualFilterFields=function(){return this.aAllVisualFilters;};F.prototype.setAllFilterFields=function(f){this.aAllFilterFields=f;};return F;});