fix(ui5-bar): fix rtl support (#4496)

Author: Todor-ads

packages/fiori/src/Bar.hbs

@@ -3,6 +3,7 @@
 	aria-label="{{accInfo.label}}"
 	role="toolbar"
 	part="bar"
+	dir={{effectiveDir}}
 >
 	<div class="ui5-bar-content-container ui5-bar-startcontent-container">
 		<slot name="startContent"></slot>

packages/fiori/src/Bar.js

@@ -54,6 +54,7 @@ const metadata = {
 		 */
 		startContent: {
 			type: HTMLElement,
+			propertyName: "startContent",
 		},
 
 		/**
@@ -75,6 +76,7 @@ const metadata = {
 		 */
 		endContent: {
 			type: HTMLElement,
+			propertyName: "endContent",
 		},
 	},
 	events: /** @lends sap.ui.webcomponents.fiori.Bar.prototype */ {
@@ -168,6 +170,12 @@ class Bar extends UI5Element {
 		};
 	}
 
+	onBeforeRendering() {
+		// Next two row is specific for IE11. Please remove after stop support and edit css file
+		const content = this.startContent.concat(this.middleContent).concat(this.endContent);
+		content.forEach(e => e.classList.add("ui5-bar-content"));
+	}
+
 	onEnterDOM() {
 		ResizeHandler.register(this, this._handleResizeBound);
 	}

packages/fiori/src/themes/Bar.css

@@ -66,7 +66,23 @@
 	box-shadow: var(--sapContent_Shadow1);
 	border: none;
 }
+  /* This selector works well for all browsers except IE11.
+  After support for IE11 is stopped, the specific selectors added for it can be removed and this selector can be uncommented*/
+/* ::slotted(*) {
+	margin: 0 0.25rem;
+} */
 
-::slotted(*){
+/*Specific selector added for support in IE11*/
+::slotted(.ui5-bar-content) {
 	margin: 0 0.25rem;
+}
+
+[dir="rtl"] .ui5-bar-startcontent-container {
+	padding-right: 0.5rem;
+	padding-left: 0;
+}
+
+[dir="rtl"] .ui5-bar-endcontent-container {
+	padding-left: 0.5rem;
+	padding-right: 0;
 }