@openui5/sap.ui.webc.fiori 1.94.0 → 1.97.0

package/src/sap/ui/webc/fiori/thirdparty/Bar.js

@@ -1,9 +1,10 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', './generated/templates/BarTemplate.lit', './types/BarDesign', './generated/themes/Bar.css'], function (UI5Element, litRender, BarTemplate_lit, BarDesign, Bar_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', './generated/templates/BarTemplate.lit', './types/BarDesign', './generated/themes/Bar.css'], function (UI5Element, litRender, ResizeHandler, BarTemplate_lit, BarDesign, Bar_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
 	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
+	var ResizeHandler__default = /*#__PURE__*/_interopDefaultLegacy(ResizeHandler);
 
 	const metadata = {
 		tag: "ui5-bar",
@@ -13,13 +14,17 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				type: BarDesign,
 				defaultValue: BarDesign.Header,
 			},
+			_shrinked: {
+				type: Boolean,
+			},
 		},
 		slots:  {
 			startContent: {
 				type: HTMLElement,
 			},
-			middleContent: {
+			"default": {
 				type: HTMLElement,
+				propertyName: "middleContent",
 			},
 			endContent: {
 				type: HTMLElement,
@@ -46,6 +51,31 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				"label": this.design,
 			};
 		}
+		constructor() {
+			super();
+			this._handleResizeBound = this.handleResize.bind(this);
+		}
+		handleResize() {
+			const bar = this.getDomRef();
+			const barWidth = bar.offsetWidth;
+			this._shrinked = Array.from(bar.children).some(element => {
+				return barWidth / 3 < element.offsetWidth;
+			});
+		}
+		get classes() {
+			return {
+				root: {
+					"ui5-bar-root": true,
+					"ui5-bar-root-shrinked": this._shrinked,
+				},
+			};
+		}
+		onEnterDOM() {
+			ResizeHandler__default.register(this, this._handleResizeBound);
+		}
+		onExitDOM() {
+			ResizeHandler__default.deregister(this, this._handleResizeBound);
+		}
 	}
 	Bar.define();