+
-
+
{{#unless mobileNavigationActions}}
diff --git a/packages/fiori/src/DynamicPageTitle.ts b/packages/fiori/src/DynamicPageTitle.ts
index 85a8cbd8be19..eed660398a2a 100644
--- a/packages/fiori/src/DynamicPageTitle.ts
+++ b/packages/fiori/src/DynamicPageTitle.ts
@@ -8,6 +8,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
import type Toolbar from "@ui5/webcomponents/dist/Toolbar.js";
+import type { MinWidthChangeEventDetail } from "@ui5/webcomponents/dist/Toolbar.js";
// Template
import DynamicPageTitleTemplate from "./generated/templates/DynamicPageTitleTemplate.lit.js";
@@ -75,6 +76,8 @@ class DynamicPageTitle extends UI5Element {
mobileNavigationActions!: boolean;
_handleResize: ResizeObserverCallback;
+ minContentWidth?: number;
+ minActionsWidth?: number;
constructor() {
super();
@@ -129,6 +132,17 @@ class DynamicPageTitle extends UI5Element {
};
}
+ get styles() {
+ return {
+ content: {
+ "min-width": `${this.minContentWidth || 0}px`,
+ },
+ actions: {
+ "min-width": `${this.minActionsWidth || 0}px`,
+ },
+ };
+ }
+
onEnterDOM() {
ResizeHandler.register(this, this._handleResize);
}
@@ -155,6 +169,15 @@ class DynamicPageTitle extends UI5Element {
handleResize() {
this.mobileNavigationActions = this.offsetWidth < 1280;
}
+
+ onContentMinWidthChange(event: CustomEvent
) {
+ const container = (event.target)?.assignedSlot?.parentElement;
+ if (container === this.getDomRef()?.querySelector(".ui5-dynamic-page-title--content")) {
+ this.minContentWidth = event.detail.minWidth;
+ } else if (container === this.getDomRef()?.querySelector(".ui5-dynamic-page-title--actions")) {
+ this.minActionsWidth = event.detail.minWidth;
+ }
+ }
}
DynamicPageTitle.define();
diff --git a/packages/fiori/test/pages/DynamicPage.html b/packages/fiori/test/pages/DynamicPage.html
index 26e6eb8883f4..1e61e692e950 100644
--- a/packages/fiori/test/pages/DynamicPage.html
+++ b/packages/fiori/test/pages/DynamicPage.html
@@ -56,15 +56,15 @@
-
-
-
-
+
+
+
diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts
index 17eca059464c..c59d95c76aa4 100644
--- a/packages/main/src/Toolbar.ts
+++ b/packages/main/src/Toolbar.ts
@@ -41,6 +41,10 @@ import {
import Button from "./Button.js";
import Popover from "./Popover.js";
+type MinWidthChangeEventDetail = {
+ minWidth: number,
+};
+
function calculateCSSREMValue(styleSet: CSSStyleDeclaration, propertyName: string): number {
return Number(styleSet.getPropertyValue(propertyName).replace("rem", "")) * parseInt(getComputedStyle(document.body).getPropertyValue("font-size"));
}
@@ -167,6 +171,7 @@ class Toolbar extends UI5Element {
_onInteract!: EventListener;
itemsToOverflow: Array
= [];
itemsWidth = 0;
+ minRequiredWidth = 0;
popoverOpen = false;
itemsWidthMeasured = false;
@@ -410,15 +415,30 @@ class Toolbar extends UI5Element {
}
storeItemsWidth() {
- let totalWidth = 0;
+ let totalWidth = 0,
+ minWidth = 0;
this.items.forEach((item: ToolbarItem) => {
const itemWidth = this.getItemWidth(item);
totalWidth += itemWidth;
+ if (item.overflowPriority === ToolbarItemOverflowBehavior.NeverOverflow) {
+ minWidth += itemWidth;
+ }
this.ITEMS_WIDTH_MAP.set(item._id, itemWidth);
});
+ if (minWidth && totalWidth > minWidth) {
+ minWidth += this.overflowButtonSize;
+ }
+
+ if (minWidth !== this.minRequiredWidth) {
+ this.fireEvent("_minWidthChange", {
+ minWidth,
+ });
+ }
+
this.itemsWidth = totalWidth;
+ this.minRequiredWidth = minWidth;
}
distributeItems(overflowSpace = 0) {
@@ -621,3 +641,6 @@ class Toolbar extends UI5Element {
Toolbar.define();
export default Toolbar;
+export type {
+ MinWidthChangeEventDetail,
+};