feat(ui5-bar): implement resize handlers for each slot (#5482)

fixes: #4901

Author: tsanislavgatev

packages/fiori/src/Bar.js

@@ -181,6 +181,16 @@ class Bar extends UI5Element {
 	onBeforeRendering() {
 		// Next row is specific for IE11. Please remove after stop support and edit css file
 		[...this.startContent, ...this.middleContent, ...this.endContent].forEach(element => element.classList.add("ui5-bar-content"));
+
+		this.startContent.forEach(slotItem => { ResizeHandler.deregister(slotItem, this._handleResizeBound); }, this);
+		this.middleContent.forEach(slotItem => { ResizeHandler.deregister(slotItem, this._handleResizeBound); }, this);
+		this.endContent.forEach(slotItem => { ResizeHandler.deregister(slotItem, this._handleResizeBound); }, this);
+	}
+
+	onAfterRendering() {
+		this.startContent.forEach(slotItem => { ResizeHandler.register(slotItem, this._handleResizeBound); }, this);
+		this.middleContent.forEach(slotItem => { ResizeHandler.register(slotItem, this._handleResizeBound); }, this);
+		this.endContent.forEach(slotItem => { ResizeHandler.register(slotItem, this._handleResizeBound); }, this);
 	}
 
 	onEnterDOM() {

packages/fiori/test/pages/Bar.html

@@ -20,7 +20,7 @@
 	<section>
 		<ui5-title level="3">Header design</ui5-title>
 		<ui5-bar design="Header">
-			<ui5-button icon="home" tooltip="Go home" slot="startContent"></ui5-button>
+			<ui5-title id="titleElement" slot="startContent">Title</ui5-title>
 			<ui5-label>Title</ui5-label>
 			<ui5-button icon="action-settings" tooltip="Go to settings" slot="endContent"></ui5-button>
 		</ui5-bar>