diff --git a/packages/main/src/Breadcrumbs.hbs b/packages/main/src/Breadcrumbs.hbs
index b0aeb121457f..d2d975e5b1e0 100644
--- a/packages/main/src/Breadcrumbs.hbs
+++ b/packages/main/src/Breadcrumbs.hbs
@@ -22,28 +22,16 @@
href="{{this.href}}"
target="{{this.target}}"
id="{{this._id}}-link"
+ design="{{this._linkDesign}}"
accessible-name="{{this._accessibleNameText}}"
data-ui5-stable="{{this.stableDomRef}}">
{{this.innerText}}
-
+ {{#unless this._isCurrentPageItem}}
+
+ {{/unless}}
{{/each}}
-
- {{#if _endsWithCurrentLocationLabel}}
-
-
-
-
-
- {{_currentLocationText}}
-
-
-
- {{/if}}
\ No newline at end of file
diff --git a/packages/main/src/Breadcrumbs.ts b/packages/main/src/Breadcrumbs.ts
index 27e39b9089e9..d3e4ffa6ec32 100644
--- a/packages/main/src/Breadcrumbs.ts
+++ b/packages/main/src/Breadcrumbs.ts
@@ -8,7 +8,6 @@ import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation
import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
import {
- isEnter,
isSpace,
isShow,
} from "@ui5/webcomponents-base/dist/Keys.js";
@@ -29,7 +28,6 @@ import {
} from "./generated/i18n/i18n-defaults.js";
import Link from "./Link.js";
import type { LinkClickEventDetail } from "./Link.js";
-import Label from "./Label.js";
import ResponsivePopover from "./ResponsivePopover.js";
import List from "./List.js";
import type { ListSelectionChangeEventDetail } from "./List.js";
@@ -54,10 +52,6 @@ type BreadcrumbsItemClickEventDetail = {
shiftKey: boolean;
}
-type FocusAdaptor = ITabbable & {
- getlabelWrapper: () => Element | null;
-}
-
/**
* @class
*
@@ -101,7 +95,6 @@ type FocusAdaptor = ITabbable & {
dependencies: [
BreadcrumbsItem,
Link,
- Label,
ResponsivePopover,
List,
StandardListItem,
@@ -194,7 +187,6 @@ class Breadcrumbs extends UI5Element {
// the width of the interactive element that opens the overflow
_dropdownArrowLinkWidth = 0;
responsivePopover?: ResponsivePopover;
- _labelFocusAdaptor: FocusAdaptor;
static i18nBundle: I18nBundle;
constructor() {
@@ -206,19 +198,6 @@ class Breadcrumbs extends UI5Element {
});
this._onResizeHandler = this._updateOverflow.bind(this);
-
- this._labelFocusAdaptor = {
- id: `${this._id}-labelWrapper`,
- getlabelWrapper: this.getCurrentLocationLabelWrapper.bind(this),
- set _tabIndex(value: string) {
- const wrapper = this.getlabelWrapper();
- wrapper && wrapper.setAttribute("tabindex", value);
- },
- get _tabIndex() {
- const wrapper = this.getlabelWrapper();
- return wrapper?.getAttribute("tabindex") || "";
- },
- };
}
onInvalidation(changeInfo: ChangeInfo) {
@@ -275,16 +254,11 @@ class Breadcrumbs extends UI5Element {
items.unshift(this._dropdownArrowLink);
}
- if (this._endsWithCurrentLocationLabel) {
- items.push(this._labelFocusAdaptor);
- }
return items;
}
_onfocusin(e: FocusEvent) {
- const target = e.target,
- labelWrapper = this.getCurrentLocationLabelWrapper(),
- currentItem = (target === labelWrapper) ? this._labelFocusAdaptor : target as Link;
+ const currentItem = e.target as Link;
this._itemNavigation.setCurrentItem(currentItem);
}
@@ -299,10 +273,6 @@ class Breadcrumbs extends UI5Element {
}
if (isSpace(e) && isDropdownArrowFocused && !this._isOverflowEmpty && !this._isPickerOpen) {
e.preventDefault();
- return;
- }
- if ((isEnter(e) || isSpace(e)) && this._isCurrentLocationLabelFocused) {
- this._onLabelPress(e);
}
}
@@ -318,8 +288,7 @@ class Breadcrumbs extends UI5Element {
*/
_cacheWidths() {
const map = this._breadcrumbItemWidths,
- items = this._getItems(),
- label = this._currentLocationLabel;
+ items = this._getItems();
for (let i = this._overflowSize; i < items.length; i++) {
const item = items[i],
@@ -327,12 +296,6 @@ class Breadcrumbs extends UI5Element {
map.set(item, this._getElementWidth(link));
}
- if (items.length && this._endsWithCurrentLocationLabel && label) {
- const item = items[items.length - 1];
-
- map.set(item, this._getElementWidth(label));
- }
-
if (!this._isOverflowEmpty) {
const arrow = this.shadowRoot!.querySelector(".ui5-breadcrumbs-dropdown-arrow-link-wrapper")!;
this._dropdownArrowLinkWidth = this._getElementWidth(arrow);
@@ -413,26 +376,12 @@ class Breadcrumbs extends UI5Element {
shiftKey,
}, true)) {
e.preventDefault();
+ return;
}
- }
- _onLabelPress(e: MouseEvent | KeyboardEvent) {
- const items = this._getItems(),
- item = items[items.length - 1],
- {
- altKey,
- ctrlKey,
- metaKey,
- shiftKey,
- } = e;
-
- this.fireEvent("item-click", {
- item,
- altKey,
- ctrlKey,
- metaKey,
- shiftKey,
- });
+ if (item._isCurrentPageItem) {
+ window.location.reload();
+ }
}
_onOverflowListItemSelect(e: CustomEvent) {
@@ -505,44 +454,20 @@ class Breadcrumbs extends UI5Element {
return text;
}
- getCurrentLocationLabelWrapper() {
- return this.shadowRoot!.querySelector(".ui5-breadcrumbs-current-location > span");
- }
-
get _visibleItems() {
return this._getItems()
.slice(this._overflowSize)
.filter(i => this._isItemVisible(i));
}
- get _endsWithCurrentLocationLabel() {
+ get _endsWithCurrentPageItem() {
return this.design === BreadcrumbsDesign.Standard;
}
- get _currentLocationText() {
- const items = this._getItems();
- if (this._endsWithCurrentLocationLabel && items.length) {
- const item = items[items.length - 1];
- if (this._isItemVisible(item)) {
- return item.innerText;
- }
- }
- return "";
- }
-
- get _currentLocationLabel() {
- return this.shadowRoot!.querySelector