@ui5/webcomponents-fiori 0.0.0-a3eca7ade → 0.0.0-a8a75c830

package/dist/ShellBar.js

@@ -1,1215 +1,922 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ShellBar_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
-import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js";
+import arraysAreEqual from "@ui5/webcomponents-base/dist/util/arraysAreEqual.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
-import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js";
-import List from "@ui5/webcomponents/dist/List.js";
-import Popover from "@ui5/webcomponents/dist/Popover.js";
+import throttle from "@ui5/webcomponents-base/dist/util/throttle.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
-import HasPopup from "@ui5/webcomponents/dist/types/HasPopup.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import "@ui5/webcomponents-icons/dist/search.js";
-import "@ui5/webcomponents-icons/dist/bell.js";
-import "@ui5/webcomponents-icons/dist/overflow.js";
-import "@ui5/webcomponents-icons/dist/grid.js";
-
-import {
-	SHELLBAR_LABEL,
-	SHELLBAR_LOGO,
-	SHELLBAR_COPILOT,
-	SHELLBAR_NOTIFICATIONS,
-	SHELLBAR_CANCEL,
-	SHELLBAR_PROFILE,
-	SHELLBAR_PRODUCTS,
-	SHELLBAR_SEARCH,
-	SHELLBAR_OVERFLOW,
-} from "./generated/i18n/i18n-defaults.js";
-
-// Templates
-import ShellBarTemplate from "./generated/templates/ShellBarTemplate.lit.js";
-import ShellBarPopoverTemplate from "./generated/templates/ShellBarPopoverTemplate.lit.js";
-
-// Styles
-import styles from "./generated/themes/ShellBar.css.js";
-
-const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-shellbar",
-	languageAware: true,
-	fastNavigation: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
-
-		/**
-		 * Defines the <code>primaryTitle</code>.
-		 * <br><br>
-		 * <b>Note:</b> The <code>primaryTitle</code> would be hidden on S screen size (less than approx. 700px).
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		primaryTitle: {
-			type: String,
-		},
-
-		/**
-		 * Defines the <code>secondaryTitle</code>.
-		 * <br><br>
-		 * <b>Note:</b> The <code>secondaryTitle</code> would be hidden on S and M screen sizes (less than approx. 1300px).
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		secondaryTitle: {
-			type: String,
-		},
-
-		/**
-		 * Defines the <code>notificationsCount</code>,
-		 * displayed in the notification icon top-right corner.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		notificationsCount: {
-			type: String,
-		},
-
-		/**
-		 * Defines, if the notification icon would be displayed.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		showNotifications: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines, if the product switch icon would be displayed.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		showProductSwitch: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines, if the product CoPilot icon would be displayed.
-		 * <br><b>Note:</b> By default the co-pilot is displayed as static SVG.
-		 * If you need an animated co-pilot, you can import the <code>"@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js"</code> module as add-on feature.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		showCoPilot: {
-			type: Boolean,
-		},
-
-		/**
-		 * An object of strings that defines several additional accessibility texts
-		 * for even further customization.
-		 *
-		 * It supports the following fields:
-		 * - <code>profileButtonTitle</code>: defines the tooltip for the profile button
-		 * - <code>logoTitle</code>: defines the tooltip for the logo
-		 *
-		 * @type {object}
-		 * @public
-		 * @since 1.1.0
-		 */
-		 accessibilityTexts: {
-			type: Object,
-		},
-
-		/**
-		 * @private
-		 */
-		breakpointSize: {
-			type: String,
-		},
-
-		/**
-		 * @private
-		 */
-		showSearchField: {
-			type: Boolean,
-		},
-
-		/**
-		 * @private
-		 */
-		coPilotActive: {
-			type: Boolean,
-		},
-
-		/**
-		 * @private
-		 */
-		withLogo: {
-			type: Boolean,
-		},
-
-		_itemsInfo: {
-			type: Object,
-		},
-
-		_header: {
-			type: Object,
-		},
-
-		_menuPopoverItems: {
-			type: String,
-			multiple: true,
-		},
-
-		_menuPopoverExpanded: {
-			type: Boolean,
-			noAttribute: true,
-		},
-		_overflowPopoverExpanded: {
-			type: Boolean,
-			noAttribute: true,
-		},
-
-		_fullWidthSearch: {
-			type: Boolean,
-			noAttribute: true,
-		},
-	},
-	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
-		/**
-		 * Defines the <code>ui5-shellbar</code> aditional items.
-		 * <br><br>
-		 * <b>Note:</b>
-		 * You can use the &nbsp;&lt;ui5-shellbar-item>&lt;/ui5-shellbar-item>.
-		 *
-		 * @type {sap.ui.webcomponents.fiori.IShellBarItem[]}
-		 * @slot items
-		 * @public
-		 */
-		"default": {
-			propertyName: "items",
-			type: HTMLElement,
-			invalidateOnChildChange: true,
-		},
-
-		/**
-		 * You can pass <code>ui5-avatar</code> to set the profile image/icon.
-		 * If no profile slot is set - profile will be excluded from actions.
-		 *
-		 * Note: We recommend not using the <code>size</code> attribute of <code>ui5-avatar</code> because
-		 * it should have specific size by design in the context of <code>ui5-shellbar</code> profile.
-		 * @type {sap.ui.webcomponents.main.IAvatar}
-		 * @slot
-		 * @since 1.0.0-rc.6
-		 * @public
-		 */
-		profile: {
-			type: HTMLElement,
-		},
-
-		/**
-		 * Defines the logo of the <code>ui5-shellbar</code>.
-		 * For example, you can use <code>ui5-avatar</code> or <code>img</code> elements as logo.
-		 * @type {sap.ui.webcomponents.main.IAvatar}
-		 * @slot
-		 * @since 1.0.0-rc.8
-		 * @public
-		 */
-		logo: {
-			type: HTMLElement,
-		},
-
-		/**
-		 * Defines the items displayed in menu after a click on the primary title.
-		 * <br><br>
-		 * <b>Note:</b>
-		 * You can use the &nbsp;&lt;ui5-li>&lt;/ui5-li> and its ancestors.
-		 *
-		 * @type {sap.ui.webcomponents.main.IListItem[]}
-		 * @slot
-		 * @since 0.10
-		 * @public
-		 */
-		menuItems: {
-			type: HTMLElement,
-		},
-
-		/**
-		 * Defines the <code>ui5-input</code>, that will be used as a search field.
-		 *
-		 * @type {sap.ui.webcomponents.main.IInput}
-		 * @slot
-		 * @public
-		 */
-		searchField: {
-			type: HTMLElement,
-		},
-
-		/**
-		 * Defines a <code>ui5-button</code> in the bar that will be placed in the beginning.
-		 * We encourage this slot to be used for a back or home button.
-		 * It gets overstyled to match ShellBar's styling.
-		 *
-		 * @type {sap.ui.webcomponents.main.IButton}
-		 * @slot
-		 * @public
-		 */
-		startButton: {
-			type: HTMLElement,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
-		/**
-		 *
-		 * Fired, when the notification icon is activated.
-		 *
-		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#notifications-click
-		 * @allowPreventDefault
-		 * @param {HTMLElement} targetRef dom ref of the activated element
-		 * @public
-		 */
-		"notifications-click": {
-			detail: {
-				targetRef: { type: HTMLElement },
-			},
-		},
-
-		/**
-		 * Fired, when the profile slot is present.
-		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#profile-click
-		 * @param {HTMLElement} targetRef dom ref of the activated element
-		 * @public
-		 */
-		"profile-click": {
-			detail: {
-				targetRef: { type: HTMLElement },
-			},
-		},
-
-		/**
-		 * Fired, when the product switch icon is activated.
-		 * <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
-		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#product-switch-click
-		 * @allowPreventDefault
-		 * @param {HTMLElement} targetRef dom ref of the activated element
-		 * @public
-		 */
-		"product-switch-click": {
-			detail: {
-				targetRef: { type: HTMLElement },
-			},
-		},
-
-		/**
-		 * Fired, when the logo is activated.
-		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#logo-click
-		 * @param {HTMLElement} targetRef dom ref of the activated element
-		 * @since 0.10
-		 * @public
-		 */
-		"logo-click": {
-			detail: {
-				targetRef: { type: HTMLElement },
-			},
-		},
-
-		/**
-		 * Fired, when the co pilot is activated.
-		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#co-pilot-click
-		 * @param {HTMLElement} targetRef dom ref of the activated element
-		 * @since 0.10
-		 * @public
-		 */
-		"co-pilot-click": {
-			detail: {
-				targetRef: { type: HTMLElement },
-			},
-		},
-
-		/**
-		 * Fired, when a menu item is activated
-		 * <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
-		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#menu-item-click
-		 * @param {HTMLElement} item DOM ref of the activated list item
-		 * @since 0.10
-		 * @public
-		 */
-		"menu-item-click": {
-			detail: {
-				item: { type: HTMLElement },
-			},
-		},
-	},
+import ButtonBadge from "@ui5/webcomponents/dist/ButtonBadge.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
+import Menu from "@ui5/webcomponents/dist/Menu.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
+import searchIcon from "@ui5/webcomponents-icons/dist/search.js";
+import bellIcon from "@ui5/webcomponents-icons/dist/bell.js";
+import gridIcon from "@ui5/webcomponents-icons/dist/grid.js";
+import daIcon from "@ui5/webcomponents-icons/dist/da.js";
+import overflowIcon from "@ui5/webcomponents-icons/dist/overflow.js";
+import ShellBarTemplate from "./ShellBarTemplate.js";
+import shellBarStyles from "./generated/themes/ShellBar.css.js";
+import ShellBarPopoverCss from "./generated/themes/ShellBarPopover.css.js";
+import shellBarLegacyStyles from "./generated/themes/ShellBarLegacy.css.js";
+import ShellBarLegacy from "./shellbar/ShellBarLegacy.js";
+import ShellBarSearch from "./shellbar/ShellBarSearch.js";
+import ShellBarSearchLegacy from "./shellbar/ShellBarSearchLegacy.js";
+import ShellBarOverflow from "./shellbar/ShellBarOverflow.js";
+import ShellBarAccessibility from "./shellbar/ShellBarAccessibility.js";
+import ShellBarItemNavigation from "./shellbar/ShellBarItemNavigation.js";
+import ShellBarItem from "./ShellBarItem.js";
+import ShellBarSpacer from "./ShellBarSpacer.js";
+import { SHELLBAR_LABEL, SHELLBAR_NOTIFICATIONS, SHELLBAR_NOTIFICATIONS_NO_COUNT, SHELLBAR_PROFILE, SHELLBAR_PRODUCTS, SHELLBAR_SEARCH, SHELLBAR_ASSISTANT, SHELLBAR_OVERFLOW, SHELLBAR_ADDITIONAL_CONTEXT, } from "./generated/i18n/i18n-defaults.js";
+// actions always visible in lean mode, order is important
+const PREDEFINED_PLACE_ITEMS = ["feedback", "sys-help"];
+const ShellBarActions = {
+    Search: "search",
+    Profile: "profile",
+    Overflow: "overflow",
+    Assistant: "assistant",
+    ProductSwitch: "products",
+    Notifications: "notifications",
+};
+const ShellBarActionsSelectors = {
+    Search: ".ui5-shellbar-search-toggle",
+    Profile: ".ui5-shellbar-image-button",
+    Overflow: ".ui5-shellbar-overflow-button",
+    Assistant: ".ui5-shellbar-assistant-button",
+    ProductSwitch: ".ui5-shellbar-button-product-switch",
+    Notifications: ".ui5-shellbar-bell-button",
 };
-
 /**
  * @class
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-shellbar</code> is meant to serve as an application header
+ * The `ui5-shellbar` is meant to serve as an application header
  * and includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on.
- * <br><br>
  *
- * <h3>Stable DOM Refs</h3>
+ * ### Stable DOM Refs
  *
- * You can use the following stable DOM refs for the <code>ui5-shellbar</code>:
- * <ul>
- * <li>logo</li>
- * <li>copilot</li>
- * <li>notifications</li>
- * <li>overflow</li>
- * <li>profile</li>
- * <li>product-switch</li>
- * </ul>
+ * You can use the following stable DOM refs for the `ui5-shellbar`:
  *
- * <h3>CSS Shadow Parts</h3>
+ * - logo
+ * - notifications
+ * - overflow
+ * - profile
+ * - product-switch
  *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-shellbar</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>root - Used to style the outermost wrapper of the <code>ui5-shellbar</code></li>
- * </ul>
+ * ### Keyboard Handling
  *
- * <h3>Keyboard Handling</h3>
- *
- * <h4>Fast Navigation</h4>
- * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * #### Fast Navigation
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
  * In order to use this functionality, you need to import the following module:
- * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
- * <br><br>
- *
- * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents-fiori/dist/ShellBar";</code>
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/ShellBar.js";`
+ * @csspart root - Used to style the outermost wrapper of the `ui5-shellbar`
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.ShellBar
- * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-shellbar
- * @appenddocs ShellBarItem
+ * @extends UI5Element
  * @public
  * @since 0.8.0
  */
-class ShellBar extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get styles() {
-		return styles;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return ShellBarTemplate;
-	}
-
-	static get staticAreaTemplate() {
-		return ShellBarPopoverTemplate;
-	}
-
-	static get FIORI_3_BREAKPOINTS() {
-		return [
-			599,
-			1023,
-			1439,
-			1919,
-			10000,
-		];
-	}
-
-	static get FIORI_3_BREAKPOINTS_MAP() {
-		return {
-			"599": "S",
-			"1023": "M",
-			"1439": "L",
-			"1919": "XL",
-			"10000": "XXL",
-		};
-	}
-
-	constructor() {
-		super();
-
-		this._itemsInfo = [];
-		this._isInitialRendering = true;
-		this._focusedItem = null;
-
-		// marks if preventDefault() is called in item's press handler
-		this._defaultItemPressPrevented = false;
-
-		this.menuItemsObserver = new MutationObserver(() => {
-			this._updateClonedMenuItems();
-		});
-
-		this._header = {
-			press: async () => {
-				this._updateClonedMenuItems();
-
-				if (this.hasMenuItems) {
-					const menuPopover = await this._getMenuPopover();
-					menuPopover.showAt(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
-				}
-			},
-		};
-
-		this._handleResize = async event => {
-			this._debounce(async () => {
-				await this._getResponsivePopover();
-				this.overflowPopover.close();
-				this._overflowActions();
-			}, HANDLE_RESIZE_DEBOUNCE_RATE);
-		};
-	}
-
-	_debounce(fn, delay) {
-		clearTimeout(this._debounceInterval);
-		this._debounceInterval = setTimeout(() => {
-			this._debounceInterval = null;
-			fn();
-		}, delay);
-	}
-
-	_menuItemPress(event) {
-		this.menuPopover.close();
-		this.fireEvent("menu-item-click", {
-			item: event.detail.selectedItems[0],
-		}, true);
-	}
-
-	_logoPress() {
-		this.fireEvent("logo-click", {
-			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-logo"),
-		});
-	}
-
-	_menuPopoverBeforeOpen() {
-		this._menuPopoverExpanded = true;
-	}
-
-	_menuPopoverAfterClose() {
-		this._menuPopoverExpanded = false;
-	}
-
-	_overflowPopoverBeforeOpen() {
-		this._overflowPopoverExpanded = true;
-	}
-
-	_overflowPopoverAfterClose() {
-		this._overflowPopoverExpanded = false;
-	}
-
-	_logoKeyup(event) {
-		if (isSpace(event)) {
-			this._logoPress();
-		}
-	}
-
-	_logoKeydown(event) {
-		if (isSpace(event)) {
-			event.preventDefault();
-			return;
-		}
-
-		if (isEnter(event)) {
-			this._logoPress();
-		}
-	}
-
-	_fireCoPilotClick() {
-		this.fireEvent("co-pilot-click", {
-			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-coPilot"),
-		});
-	}
-
-	_coPilotClick() {
-		this._fireCoPilotClick();
-	}
-
-	_coPilotKeydown(event) {
-		if (isSpace(event)) {
-			this.coPilotActive = true;
-			event.preventDefault();
-			return;
-		}
-
-		if (isEnter(event)) {
-			this.coPilotActive = true;
-			this._fireCoPilotClick();
-		}
-	}
-
-	_coPilotKeyup(event) {
-		if (isSpace(event)) {
-			this._fireCoPilotClick();
-		}
-		this.coPilotActive = false;
-	}
-
-	onBeforeRendering() {
-		const animationsOn = getAnimationMode() === AnimationMode.Full;
-		const coPilotAnimation = getFeature("CoPilotAnimation");
-		this.coPilot = coPilotAnimation && animationsOn ? coPilotAnimation : { animated: false };
-		this.withLogo = this.hasLogo;
-
-		this._hiddenIcons = this._itemsInfo.filter(info => {
-			const isHidden = (info.classes.indexOf("ui5-shellbar-hidden-button") !== -1);
-			const isSet = info.classes.indexOf("ui5-shellbar-invisible-button") === -1;
-			const isOverflowIcon = info.classes.indexOf("ui5-shellbar-overflow-button") !== -1;
-			const isImageIcon = info.classes.indexOf("ui5-shellbar-image-button") !== -1;
-			const shouldStayOnScreen = isOverflowIcon || (isImageIcon && this.hasProfile);
-
-			return isHidden && isSet && !shouldStayOnScreen;
-		});
-
-		this._observeMenuItems();
-	}
-
-	onAfterRendering() {
-		this._overflowActions();
-
-		this._fullWidthSearch = this._showFullWidthSearch;
-	}
-
-	/**
-	 * Closes the overflow area.
-	 * Useful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event
-	 * @public
-	 */
-	closeOverflow() {
-		if (this.overflowPopover) {
-			this.overflowPopover.close();
-		}
-	}
-
-	_handleBarBreakpoints() {
-		const width = this.getBoundingClientRect().width;
-		const breakpoints = ShellBar.FIORI_3_BREAKPOINTS;
-
-		const size = breakpoints.find(bp1 => width < bp1) || ShellBar.FIORI_3_BREAKPOINTS[ShellBar.FIORI_3_BREAKPOINTS.length - 1];
-		const mappedSize = ShellBar.FIORI_3_BREAKPOINTS_MAP[size];
-
-		if (this.breakpointSize !== mappedSize) {
-			this.breakpointSize = mappedSize;
-		}
-
-		return mappedSize;
-	}
-
-	_handleSizeS() {
-		const hasIcons = this.showNotifications || this.showProductSwitch || this.searchField.length || this.items.length;
-
-		const newItems = this._getAllItems(hasIcons).map(info => {
-			const isOverflowIcon = info.classes.indexOf("ui5-shellbar-overflow-button") !== -1;
-			const isImageIcon = info.classes.indexOf("ui5-shellbar-image-button") !== -1;
-			const shouldStayOnScreen = isOverflowIcon || (isImageIcon && this.hasProfile);
-
-			return {
-				...info,
-				classes: `${info.classes} ${shouldStayOnScreen ? "" : "ui5-shellbar-hidden-button"} ui5-shellbar-button`,
-				styles: {
-					order: shouldStayOnScreen ? 1 : -1,
-				},
-			};
-		});
-
-		this._updateItemsInfo(newItems);
-	}
-
-	_handleActionsOverflow() {
-		const rightContainerRect = this.shadowRoot.querySelector(".ui5-shellbar-overflow-container-right").getBoundingClientRect();
-		let overflowSelector = ".ui5-shellbar-button:not(.ui5-shellbar-overflow-button):not(.ui5-shellbar-invisible-button)";
-
-		if (this.showSearchField) {
-			overflowSelector += ",.ui5-shellbar-search-field";
-		}
-
-		const elementsToOverflow = this.shadowRoot.querySelectorAll(overflowSelector);
-		const isRTL = this.effectiveDir === "rtl";
-
-		let overflowCount = [].filter.call(elementsToOverflow, icon => {
-			const iconRect = icon.getBoundingClientRect();
-
-			if (isRTL) {
-				return (iconRect.left + iconRect.width) > (rightContainerRect.left + rightContainerRect.width);
-			}
-
-			return iconRect.left < rightContainerRect.left;
-		});
-
-		overflowCount = overflowCount.length;
-
-		const items = this._getAllItems(!!overflowCount).filter(item => item.show);
-
-		const itemsByPriority = items.sort((item1, item2) => {
-			if (item1.priority > item2.priority) {
-				return 1;
-			}
-
-			if (item1.priority < item2.priority) {
-				return -1;
-			}
-
-			return 0;
-		});
-
-		for (let i = 0; i < itemsByPriority.length; i++) {
-			if (i < overflowCount) {
-				itemsByPriority[i].classes = `${itemsByPriority[i].classes} ui5-shellbar-hidden-button`;
-				itemsByPriority[i].styles = {
-					order: -1,
-				};
-			}
-		}
-
-		return itemsByPriority;
-	}
-
-	_overflowActions() {
-		const size = this._handleBarBreakpoints();
-
-		if (size === "S") {
-			return this._handleSizeS();
-		}
-
-		const newItems = this._handleActionsOverflow();
-		this._updateItemsInfo(newItems);
-	}
-
-	async _toggleActionPopover() {
-		const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
-		const overflowPopover = await this._getOverflowPopover();
-		overflowPopover.showAt(overflowButton);
-	}
-
-	onEnterDOM() {
-		ResizeHandler.register(this, this._handleResize);
-	}
-
-	onExitDOM() {
-		this.menuItemsObserver.disconnect();
-		ResizeHandler.deregister(this, this._handleResize);
-		clearTimeout(this._debounceInterval);
-		this._debounceInterval = null;
-	}
-
-	_handleSearchIconPress(event) {
-		this.showSearchField = !this.showSearchField;
-
-		if (!this.showSearchField) {
-			return;
-		}
-
-		const input = this.searchField[0];
-
-		// update the state immediately
-		if (input) {
-			input.focused = true;
-		}
-
-		// move the focus later
-		setTimeout(() => {
-			if (input) {
-				input.focus();
-			}
-		}, 100);
-	}
-
-	async _handleActionListClick(event) {
-		if (!this._defaultItemPressPrevented) {
-			this.closeOverflow();
-			// wait for DOM to be updated when ui5-popover is closed, otherwise if Enter key is hold
-			// there will be no visual indication that this has happened
-			await renderFinished();
-		}
-
-		this._defaultItemPressPrevented = false;
-	}
-
-	_handleCustomActionPress(event) {
-		const refItemId = event.target.getAttribute("data-ui5-external-action-item-id");
-
-		if (refItemId) {
-			const shellbarItem = this.items.find(item => {
-				return item._id === refItemId;
-			});
-
-			const prevented = !shellbarItem.fireEvent("click", { targetRef: event.target }, true);
-
-			this._defaultItemPressPrevented = prevented;
-		}
-	}
-
-	_handleOverflowPress(event) {
-		this._toggleActionPopover();
-	}
-
-	_handleNotificationsPress(event) {
-		const notificationIconRef = this.shadowRoot.querySelector(".ui5-shellbar-bell-button");
-
-		this._defaultItemPressPrevented = !this.fireEvent("notifications-click", {
-			targetRef: notificationIconRef.classList.contains("ui5-shellbar-hidden-button") ? event.target : notificationIconRef,
-		}, true);
-	}
-
-	_handleProfilePress(event) {
-		this.fireEvent("profile-click", {
-			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-image-button"),
-		});
-	}
-
-	_handleCancelButtonPress() {
-		this.showSearchField = false;
-	}
-
-	_handleProductSwitchPress(event) {
-		const buttonRef = this.shadowRoot.querySelector(".ui5-shellbar-button-product-switch");
-
-		this._defaultItemPressPrevented = !this.fireEvent("product-switch-click", {
-			targetRef: buttonRef.classList.contains("ui5-shellbar-hidden-button") ? event.target : buttonRef,
-		}, true);
-	}
-
-	/**
-	 * Returns the <code>logo</code> DOM ref.
-	 * @type { HTMLElement }
-	 * @public
-	 * @readonly
-	 * @since 1.0.0-rc.16
-	 */
-	get logoDomRef() {
-		return this.shadowRoot.querySelector(`*[data-ui5-stable="logo"]`);
-	}
-
-	/**
-	 * Returns the <code>copilot</code> DOM ref.
-	 * @type { HTMLElement }
-	 * @public
-	 * @readonly
-	 * @since 1.0.0-rc.16
-	 */
-	get copilotDomRef() {
-		return this.shadowRoot.querySelector(`*[data-ui5-stable="copilot"]`);
-	}
-
-	/**
-	 * Returns the <code>notifications</code> icon DOM ref.
-	 * @type { HTMLElement }
-	 * @public
-	 * @readonly
-	 * @since 1.0.0-rc.16
-	 */
-	get notificationsDomRef() {
-		return this.shadowRoot.querySelector(`*[data-ui5-stable="notifications"]`);
-	}
-
-	/**
-	 * Returns the <code>overflow</code> icon DOM ref.
-	 * @type { HTMLElement }
-	 * @public
-	 * @readonly
-	 * @since 1.0.0-rc.16
-	 */
-	get overflowDomRef() {
-		return this.shadowRoot.querySelector(`*[data-ui5-stable="overflow"]`);
-	}
-
-	/**
-	 * Returns the <code>profile</code> icon DOM ref.
-	 * @type { HTMLElement }
-	 * @public
-	 * @readonly
-	 * @since 1.0.0-rc.16
-	 */
-	get profileDomRef() {
-		return this.shadowRoot.querySelector(`*[data-ui5-stable="profile"]`);
-	}
-
-	/**
-	 * Returns the <code>product-switch</code> icon DOM ref.
-	 * @type { HTMLElement }
-	 * @public
-	 * @readonly
-	 * @since 1.0.0-rc.16
-	 */
-	get productSwitchDomRef() {
-		return this.shadowRoot.querySelector(`*[data-ui5-stable="product-switch"]`);
-	}
-
-	/**
-	 * Returns all items that will be placed in the right of the bar as icons / dom elements.
-	 * @param {boolean} showOverflowButton Determines if overflow button should be visible (not overflowing)
-	 */
-	_getAllItems(showOverflowButton) {
-		let domOrder = -1;
-
-		const items = [
-			{
-				icon: "search",
-				text: "Search",
-				classes: `${this.searchField.length ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-search-button ui5-shellbar-button`,
-				priority: 4,
-				domOrder: this.searchField.length ? (++domOrder) : -1,
-				styles: {
-					order: this.searchField.length ? 1 : -10,
-				},
-				id: `${this._id}-item-${1}`,
-				press: this._handleSearchIconPress.bind(this),
-				show: !!this.searchField.length,
-			},
-			...this.items.map((item, index) => {
-				item._getRealDomRef = () => this.getDomRef().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
-				return {
-					icon: item.icon,
-					id: item._id,
-					count: item.count || undefined,
-					refItemid: item._id,
-					text: item.text,
-					classes: "ui5-shellbar-custom-item ui5-shellbar-button",
-					priority: 1,
-					domOrder: (++domOrder),
-					styles: {
-						order: 2,
-					},
-					show: true,
-					press: this._handleCustomActionPress.bind(this),
-					custom: true,
-					title: item.title,
-					stableDomRef: item.stableDomRef,
-				};
-			}),
-			{
-				icon: "bell",
-				text: "Notifications",
-				classes: `${this.showNotifications ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-bell-button ui5-shellbar-button`,
-				priority: 3,
-				styles: {
-					order: this.showNotifications ? 3 : -10,
-				},
-				id: `${this._id}-item-${2}`,
-				show: this.showNotifications,
-				domOrder: this.showNotifications ? (++domOrder) : -1,
-				press: this._handleNotificationsPress.bind(this),
-			},
-			{
-				icon: "overflow",
-				text: "Overflow",
-				classes: `${showOverflowButton ? "" : "ui5-shellbar-hidden-button"} ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button ui5-shellbar-button`,
-				priority: 5,
-				order: 4,
-				styles: {
-					order: showOverflowButton ? 4 : -1,
-				},
-				domOrder: showOverflowButton ? (++domOrder) : -1,
-				id: `${this.id}-item-${5}`,
-				press: this._handleOverflowPress.bind(this),
-				show: true,
-			},
-			{
-				text: "Person",
-				classes: `${this.hasProfile ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-image-button ui5-shellbar-button`,
-				priority: 4,
-				styles: {
-					order: this.hasProfile ? 5 : -10,
-				},
-				profile: true,
-				id: `${this._id}-item-${3}`,
-				domOrder: this.hasProfile ? (++domOrder) : -1,
-				show: this.hasProfile,
-				press: this._handleProfilePress.bind(this),
-			},
-			{
-				icon: "grid",
-				text: "Product Switch",
-				classes: `${this.showProductSwitch ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-button ui5-shellbar-button-product-switch`,
-				priority: 2,
-				styles: {
-					order: this.showProductSwitch ? 6 : -10,
-				},
-				id: `${this._id}-item-${4}`,
-				show: this.showProductSwitch,
-				domOrder: this.showProductSwitch ? (++domOrder) : -1,
-				press: this._handleProductSwitchPress.bind(this),
-			},
-		];
-		return items;
-	}
-
-	_updateItemsInfo(newItems) {
-		const isDifferent = JSON.stringify(this._itemsInfo) !== JSON.stringify(newItems);
-		if (isDifferent) {
-			this._itemsInfo = newItems;
-		}
-	}
-
-	_updateClonedMenuItems() {
-		this._menuPopoverItems = [];
-
-		this.menuItems.forEach(item => {
-			// clone the menuItem and remove the slot="menuItems",
-			// otherwise would not be slotted in the internal ui5-li
-			const clonedItem = item.cloneNode(true);
-			clonedItem.removeAttribute("slot");
-
-			this._menuPopoverItems.push(clonedItem);
-		});
-	}
-
-	_observeMenuItems() {
-		this.menuItems.forEach(item => {
-			this.menuItemsObserver.observe(item, {
-				characterData: true,
-				childList: true,
-				subtree: true,
-				attributes: true,
-			});
-		});
-	}
-
-	async _getResponsivePopover() {
-		const staticAreaItem = await this.getStaticAreaItemDomRef();
-		this.overflowPopover = staticAreaItem.querySelector(".ui5-shellbar-overflow-popover");
-		this.menuPopover = staticAreaItem.querySelector(".ui5-shellbar-menu-popover");
-	}
-
-	async _getOverflowPopover() {
-		const staticAreaItem = await this.getStaticAreaItemDomRef();
-		return staticAreaItem.querySelector(".ui5-shellbar-overflow-popover");
-	}
-
-	async _getMenuPopover() {
-		const staticAreaItem = await this.getStaticAreaItemDomRef();
-		return staticAreaItem.querySelector(".ui5-shellbar-menu-popover");
-	}
-
-	isIconHidden(name) {
-		const itemInfo = this._itemsInfo.find(item => item.icon === name);
-
-		if (!itemInfo) {
-			return false;
-		}
-
-		return itemInfo.classes.indexOf("ui5-shellbar-hidden-button") !== -1;
-	}
-
-	get classes() {
-		return {
-			wrapper: {
-				"ui5-shellbar-root": true,
-				"ui5-shellbar-with-searchfield": this.searchField.length,
-			},
-			button: {
-				"ui5-shellbar-menu-button--interactive": this.hasMenuItems,
-				"ui5-shellbar-menu-button": true,
-			},
-			items: {
-				notification: {
-					"ui5-shellbar-hidden-button": this.isIconHidden("bell"),
-				},
-				product: {
-					"ui5-shellbar-hidden-button": this.isIconHidden("grid"),
-				},
-				search: {
-					"ui5-shellbar-hidden-button": this.isIconHidden("search"),
-				},
-				overflow: {
-					"ui5-shellbar-hidden-button": this.isIconHidden("overflow"),
-				},
-			},
-		};
-	}
-
-	get styles() {
-		return {
-			items: {
-				notification: {
-					"order": this.isIconHidden("bell") ? "-1" : "3",
-				},
-				overflow: {
-					"order": this.isIconHidden("overflow") ? "-1" : "4",
-				},
-				profile: {
-					"order": this.hasProfile ? "5" : "-1",
-				},
-				product: {
-					"order": this.isIconHidden("grid") ? "-1" : "6",
-				},
-			},
-			searchField: {
-				"display": this.correctSearchFieldStyles,
-			},
-		};
-	}
-
-	get correctSearchFieldStyles() {
-		if (this.showSearchField) {
-			if (this._fullWidthSearch) {
-				return "flex";
-			}
-
-			return "block";
-		}
-
-		return "none";
-	}
-
-	get customItemsInfo() {
-		return this._itemsInfo.filter(itemInfo => !!itemInfo.custom);
-	}
-
-	get nonFocusableLogo() {
-		return this.breakpointSize === "S" && this.hasMenuItems;
-	}
-
-	get hasFocusableLogo() {
-		return this.hasLogo && !this.nonFocusableLogo;
-	}
-
-	get hasNonFocusableLogo() {
-		return this.hasLogo && this.nonFocusableLogo;
-	}
-
-	get hasLogo() {
-		return !!this.logo.length;
-	}
-
-	get showArrowDown() {
-		return this.primaryTitle || this.hasInteractvieLogo;
-	}
-
-	get popoverHorizontalAlign() {
-		return this.effectiveDir === "rtl" ? "Left" : "Right";
-	}
-
-	get hasSearchField() {
-		return !!this.searchField.length;
-	}
-
-	get hasProfile() {
-		return !!this.profile.length;
-	}
-
-	get hasMenuItems() {
-		return this.menuItems.length > 0;
-	}
-
-	get menuBtnHasPopup() {
-		return this.hasMenuItems ? HasPopup.Menu : undefined;
-	}
-
-	get menuBtnTabindex() {
-		return this.hasMenuItems ? "0" : "-1";
-	}
-
-	get menuPopoverExpanded() {
-		return this.hasMenuItems ? this._menuPopoverExpanded : undefined;
-	}
-
-	get _shellbarText() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_LABEL);
-	}
-
-	get _logoText() {
-		return this.accessibilityTexts.logoTitle || ShellBar.i18nBundle.getText(SHELLBAR_LOGO);
-	}
-
-	get _copilotText() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_COPILOT);
-	}
-
-	get _notificationsText() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_NOTIFICATIONS, this.notificationsCount);
-	}
-
-	get _cancelBtnText() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_CANCEL);
-	}
-
-	get _showFullWidthSearch() {
-		const size = this._handleBarBreakpoints();
-		const searchBtnHidden = !!this.shadowRoot.querySelector(".ui5-shellbar-search-button.ui5-shellbar-hidden-button");
-
-		return ((size === "S") || searchBtnHidden);
-	}
-
-	get _profileText() {
-		return this.accessibilityTexts.profileButtonTitle || ShellBar.i18nBundle.getText(SHELLBAR_PROFILE);
-	}
-
-	get _productsText() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_PRODUCTS);
-	}
-
-	get _searchText() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_SEARCH);
-	}
-
-	get _overflowText() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_OVERFLOW);
-	}
-
-	get accInfo() {
-		return {
-			notifications: {
-				"title": this._notificationsText,
-			},
-			profile: {
-				"title": this._profileText,
-			},
-			products: {
-				"title": this._productsText,
-			},
-			search: {
-				"title": this._searchText,
-				"accessibilityAttributes": {
-					expanded: this.showSearchField,
-				},
-			},
-			overflow: {
-				"title": this._overflowText,
-				"accessibilityAttributes": {
-					hasPopup: HasPopup.Menu,
-					expanded: this._overflowPopoverExpanded,
-				},
-			},
-		};
-	}
-
-	static get dependencies() {
-		return [
-			Button,
-			List,
-			Popover,
-			StandardListItem,
-		];
-	}
-
-	static async onDefine() {
-		ShellBar.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
-	}
-}
-
+let ShellBar = ShellBar_1 = class ShellBar extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines, if the notification icon would be displayed.
+         * @default false
+         * @public
+         */
+        this.showNotifications = false;
+        /**
+         * Defines, if the product switch icon would be displayed.
+         * @default false
+         * @public
+         */
+        this.showProductSwitch = false;
+        /**
+         * Defines, if the Search Field would be displayed when there is a valid `searchField` slot.
+         *
+         * **Note:** By default the Search Field is not displayed.
+         * @default false
+         * @public
+         */
+        this.showSearchField = false;
+        /**
+         * Defines additional accessibility attributes on different areas of the component.
+         *
+         * The accessibilityAttributes object has the following fields,
+         * where each field is an object supporting one or more accessibility attributes:
+         *
+         * - **logo** - `logo.role` and `logo.name`.
+         * - **notifications** - `notifications.expanded` and `notifications.hasPopup`.
+         * - **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.
+         * - **product** - `product.expanded` and `product.hasPopup`.
+         * - **search** - `search.hasPopup`.
+         * - **overflow** - `overflow.expanded` and `overflow.hasPopup`.
+         * - **branding** - `branding.name`.
+         *
+         * The accessibility attributes support the following values:
+         *
+         * - **role**: Defines the accessible ARIA role of the logo area.
+         * Accepts the following string values: `button` or `link`.
+         *
+         * - **expanded**: Indicates whether the button, or another grouping element it controls,
+         * is currently expanded or collapsed.
+         * Accepts the following string values: `true` or `false`.
+         *
+         * - **hasPopup**: Indicates the availability and type of interactive popup element,
+         * such as menu or dialog, that can be triggered by the button.
+         *
+         * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
+         * - **name**: Defines the accessible ARIA name of the area.
+         * Accepts any string.
+         *
+         * @default {}
+         * @public
+         * @since 1.10.0
+         */
+        this.accessibilityAttributes = {};
+        /**
+         * @private
+         */
+        this.breakpointSize = "S";
+        /**
+         * Actions computed from controllers.
+         * @private
+         */
+        this.actions = [];
+        /**
+         * Show overflow button when items are hidden.
+         * @private
+         */
+        this.showOverflowButton = false;
+        /**
+         * Open state of the overflow popover.
+         * @private
+         */
+        this.overflowPopoverOpen = false;
+        /**
+         * IDs of items currently hidden due to overflow.
+         * Used to trigger rerender for conditional rendering.
+         * @private
+         */
+        this.hiddenItemsIds = [];
+        /**
+         * Show full-screen search overlay.
+         * @private
+         */
+        this.showFullWidthSearch = false;
+        this.RESIZE_THROTTLE_RATE = 100; // ms
+        this.handleResizeBound = throttle(this.handleResize.bind(this), this.RESIZE_THROTTLE_RATE);
+        this.breakpoints = [599, 1023, 1439, 1919, 10000];
+        this.breakpointMap = {
+            599: "S",
+            1023: "M",
+            1439: "L",
+            1919: "XL",
+            10000: "XXL",
+        };
+        this.itemNavigation = new ShellBarItemNavigation({
+            getDomRef: () => this.getDomRef() || null,
+        });
+        this.overflow = new ShellBarOverflow();
+        this.accessibility = new ShellBarAccessibility();
+        this._searchAdaptor = new ShellBarSearch(this.getSearchDeps());
+        this._searchAdaptorLegacy = new ShellBarSearchLegacy({
+            ...this.getSearchDeps(),
+            getDisableSearchCollapse: () => this.disableSearchCollapse,
+        });
+        /* =================== Legacy Members =================== */
+        /**
+         * Defines the visibility state of the search button.
+         *
+         * **Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.
+         * @default false
+         * @public
+         */
+        this.hideSearchButton = false;
+        /**
+         * Disables the automatic search field expansion/collapse when the available space is not enough.
+         *
+         * **Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.
+         * @default false
+         * @public
+         */
+        this.disableSearchCollapse = false;
+        /**
+         * Open state of the menu popover (legacy).
+         * @private
+         */
+        this.menuPopoverOpen = false;
+    }
+    /* =================== Lifecycle Methods =================== */
+    onEnterDOM() {
+        ResizeHandler.register(this, this.handleResizeBound);
+        this.searchAdaptor?.subscribe();
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this.handleResizeBound);
+        this.searchAdaptor?.unsubscribe();
+    }
+    onBeforeRendering() {
+        if (!this.legacyAdaptor) {
+            this.initLegacyController();
+        }
+        // Sync branding breakpoint state
+        this.branding.forEach(brandingEl => {
+            brandingEl._isSBreakPoint = this.isSBreakPoint;
+        });
+        this.buildActions();
+        this.searchAdaptor?.syncShowSearchFieldState();
+        // subscribe to search adaptor for cases when search is added dynamically
+        this.searchAdaptor?.unsubscribe();
+        this.searchAdaptor?.subscribe();
+    }
+    onAfterRendering() {
+        this.updateBreakpoint();
+        this.updateOverflow();
+    }
+    /* =================== Actions Management =================== */
+    buildActions() {
+        this.actions = [
+            {
+                id: ShellBarActions.Search,
+                icon: searchIcon,
+                enabled: this.enabledFeatures.search,
+                selector: ShellBarActionsSelectors.Search,
+                isProtected: false,
+                stableDomRef: "toggle-search",
+            },
+            {
+                id: ShellBarActions.Assistant,
+                icon: daIcon,
+                enabled: this.enabledFeatures.assistant,
+                selector: ShellBarActionsSelectors.Assistant,
+                isProtected: false,
+            },
+            {
+                id: ShellBarActions.Notifications,
+                icon: bellIcon,
+                count: this.notificationsCount,
+                enabled: this.enabledFeatures.notifications,
+                selector: ShellBarActionsSelectors.Notifications,
+                isProtected: false,
+                stableDomRef: "notifications",
+            },
+            {
+                id: ShellBarActions.Overflow,
+                icon: overflowIcon,
+                enabled: this.enabledFeatures.overflow,
+                selector: ShellBarActionsSelectors.Overflow,
+                isProtected: true,
+                stableDomRef: "overflow",
+            },
+            {
+                id: ShellBarActions.Profile,
+                enabled: this.enabledFeatures.profile,
+                selector: ShellBarActionsSelectors.Profile,
+                isProtected: true,
+                stableDomRef: "profile",
+            },
+            {
+                id: ShellBarActions.ProductSwitch,
+                icon: gridIcon,
+                enabled: this.enabledFeatures.productSwitch,
+                selector: ShellBarActionsSelectors.ProductSwitch,
+                isProtected: true,
+                stableDomRef: "product-switch",
+            },
+        ].filter(action => action.enabled);
+    }
+    getAction(actionId) {
+        return this.actions.find(action => action.id === actionId);
+    }
+    getActionOverflowText(actionId) {
+        const texts = {
+            [ShellBarActions.Search]: this.texts.search,
+            [ShellBarActions.Profile]: this.texts.profile,
+            [ShellBarActions.Overflow]: this.texts.overflow,
+            [ShellBarActions.Assistant]: this.texts.assistant,
+            [ShellBarActions.ProductSwitch]: this.texts.products,
+            [ShellBarActions.Notifications]: this.texts.notificationsNoCount,
+        };
+        return texts[actionId] || actionId;
+    }
+    /* =================== Breakpoint Management =================== */
+    get isSBreakPoint() {
+        return this.breakpointSize === "S";
+    }
+    updateBreakpoint() {
+        const width = this.getBoundingClientRect().width;
+        const bp = this.breakpoints.find(b => width <= b) || 10000;
+        const breakpoint = this.breakpointMap[bp];
+        if (this.breakpointSize !== breakpoint) {
+            this.breakpointSize = breakpoint;
+        }
+    }
+    /* =================== Overflow Management =================== */
+    updateOverflow() {
+        if (!this.overflow) {
+            return;
+        }
+        const result = this.overflow.updateOverflow({
+            actions: this.actions,
+            content: this.sortContent(this.content),
+            customItems: this.sortItems(this.items),
+            hiddenItemsIds: this.hiddenItemsIds,
+            showSearchField: this.enabledFeatures.search && this.showSearchField,
+            overflowOuter: this.overflowOuter,
+            overflowInner: this.overflowInner,
+            setVisible: (selector, visible) => {
+                const element = this.shadowRoot.querySelector(selector);
+                if (element) {
+                    element.classList[visible ? "remove" : "add"]("ui5-shellbar-hidden");
+                }
+            },
+        });
+        this.handleUpdateOverflowResult(result);
+        return result.hiddenItemsIds;
+    }
+    handleUpdateOverflowResult(result) {
+        const { hiddenItemsIds, showOverflowButton } = result;
+        // Update items overflow state
+        this.items.forEach(item => {
+            item.inOverflow = hiddenItemsIds.includes(item._id);
+            if (item.inOverflow) {
+                // clear the hidden class to ensure the item is visible in the overflow popover
+                item.classList.remove("ui5-shellbar-hidden");
+            }
+        });
+        if (!arraysAreEqual(this.hiddenItemsIds, hiddenItemsIds)) {
+            this.handleContentVisibilityChanged(this.hiddenItemsIds, hiddenItemsIds);
+            this.hiddenItemsIds = hiddenItemsIds;
+            this.showOverflowButton = showOverflowButton;
+        }
+        this.showFullWidthSearch = this.searchAdaptor?.shouldShowFullScreen() || false;
+    }
+    handleContentVisibilityChanged(oldHiddenItemsIds, newHiddenItemsIds) {
+        const filterContentIds = (ids) => ids.filter(id => this.content.some(item => item._individualSlot === id));
+        const oldHiddenContentIds = filterContentIds(oldHiddenItemsIds);
+        const newHiddenContentIds = filterContentIds(newHiddenItemsIds);
+        if (!arraysAreEqual(oldHiddenContentIds, newHiddenContentIds)) {
+            this.fireDecoratorEvent("content-item-visibility-change", {
+                items: newHiddenContentIds.map(id => this.content.find(item => item._individualSlot === id)),
+            });
+        }
+    }
+    handleResize() {
+        this.overflowPopoverOpen = false;
+        this.updateBreakpoint();
+        const hiddenItemsIds = this.updateOverflow() ?? [];
+        const spacerWidth = this.spacer?.getBoundingClientRect().width || 0;
+        this.searchAdaptor?.autoManageSearchState(hiddenItemsIds.length, spacerWidth);
+    }
+    isHidden(itemId) {
+        return this.hiddenItemsIds.includes(itemId);
+    }
+    handleOverflowClick() {
+        this.overflowPopoverOpen = !this.overflowPopoverOpen;
+    }
+    onPopoverClose() {
+        this.overflowPopoverOpen = false;
+    }
+    /**
+     * Closes the overflow popover.
+     * @public
+     */
+    closeOverflow() {
+        this.overflowPopoverOpen = false;
+    }
+    handleOverflowItemClick(e) {
+        const target = e.target;
+        const actionId = target.getAttribute("data-action-id");
+        let prevented = e.defaultPrevented; // for custom actions
+        if (actionId === ShellBarActions.Notifications) {
+            prevented = this.handleNotificationsClick();
+        }
+        else if (actionId === ShellBarActions.Search) {
+            prevented = this.handleSearchButtonClick();
+        }
+        if (!prevented) {
+            this.overflowPopoverOpen = false;
+        }
+    }
+    get overflowItems() {
+        return this.overflow.getOverflowItems({
+            actions: this.actions,
+            customItems: this.sortItems(this.items),
+            hiddenItemsIds: this.hiddenItemsIds,
+        });
+    }
+    /**
+     * Returns badge text for overflow button.
+     * Shows count if only one item with count is overflowed, otherwise shows attention dot.
+     */
+    get overflowBadge() {
+        const itemsWithCount = this.overflowItems.filter(item => item.data.count);
+        if (itemsWithCount.length === 1) {
+            return itemsWithCount[0].data.count;
+        }
+        if (itemsWithCount.length > 1) {
+            return " "; // Attention dot
+        }
+        return undefined;
+    }
+    /* =================== Search Management =================== */
+    get search() {
+        return this.searchField.length ? this.searchField[0] : null;
+    }
+    get isSelfCollapsibleSearch() {
+        const searchField = this.search;
+        if (searchField) {
+            return "collapsed" in searchField && "open" in searchField;
+        }
+        return false;
+    }
+    getSearchDeps() {
+        return {
+            getSearchField: () => this.search,
+            getSearchState: () => this.enabledFeatures.search && this.showSearchField,
+            getCSSVariable: (cssVar) => this.getCSSVariable(cssVar),
+            setSearchState: (expanded) => this.setSearchState(expanded),
+            getOverflowed: () => this.overflow.isOverflowing(this.overflowOuter, this.overflowInner),
+        };
+    }
+    get searchAdaptor() {
+        if (this.isSelfCollapsibleSearch) {
+            return this._searchAdaptor;
+        }
+        return this._searchAdaptorLegacy;
+    }
+    handleSearchButtonClick() {
+        const searchButton = this.shadowRoot.querySelector(".ui5-shellbar-search-button");
+        const defaultPrevented = !this.fireDecoratorEvent("search-button-click", {
+            targetRef: searchButton,
+            searchFieldVisible: this.showSearchField,
+        });
+        if (defaultPrevented) {
+            return defaultPrevented;
+        }
+        this.setSearchState(!this.showSearchField);
+        if (!this.showSearchField) {
+            return defaultPrevented;
+        }
+        const input = this.searchField[0];
+        if (input) {
+            input.focused = true;
+            setTimeout(() => {
+                input.focus();
+            }, 100);
+        }
+        return defaultPrevented;
+    }
+    async setSearchState(expanded) {
+        if (expanded === this.showSearchField) {
+            return;
+        }
+        this.showSearchField = expanded;
+        await renderFinished();
+        this.fireDecoratorEvent("search-field-toggle", { expanded });
+    }
+    handleCancelButtonClick() {
+        const cancelBtn = this.shadowRoot.querySelector(".ui5-shellbar-cancel-button");
+        if (!cancelBtn) {
+            return;
+        }
+        const clearDefaultPrevented = !this.fireDecoratorEvent("search-field-clear", {
+            targetRef: cancelBtn,
+        });
+        this.showFullWidthSearch = false;
+        this.setSearchState(false);
+        if (!clearDefaultPrevented && this.search) {
+            this.search.value = "";
+        }
+    }
+    /* =================== Legacy Features Management =================== */
+    initLegacyController() {
+        if (this.hasLegacyFeatures) {
+            this.legacyAdaptor = new ShellBarLegacy({
+                component: this,
+                getShadowRoot: () => this.shadowRoot,
+            });
+        }
+    }
+    get hasLegacyFeatures() {
+        return this.logo.length > 0
+            || !!this.primaryTitle
+            || !!this.secondaryTitle
+            || this.menuItems.length > 0;
+    }
+    /* =================== Keyboard Navigation =================== */
+    _onKeyDown(e) {
+        this.itemNavigation.handleKeyDown(e);
+    }
+    /* =================== Content Management =================== */
+    get startContent() {
+        return this.splitContent(this.content).start;
+    }
+    get endContent() {
+        return this.splitContent(this.content).end;
+    }
+    get separatorConfig() {
+        if (this.isSBreakPoint) {
+            return {
+                showStartSeparator: false,
+                showEndSeparator: false,
+            };
+        }
+        const { start, end } = this.splitContent(this.content);
+        return {
+            showStartSeparator: start.some(item => !this.hiddenItemsIds.includes(item._individualSlot)),
+            showEndSeparator: end.some(item => !this.hiddenItemsIds.includes(item._individualSlot)),
+        };
+    }
+    splitContent(content) {
+        const spacerIndex = content.findIndex(child => child.hasAttribute("ui5-shellbar-spacer"));
+        if (spacerIndex === -1) {
+            return { start: [...content], end: [] };
+        }
+        return {
+            start: content.slice(0, spacerIndex),
+            end: content.slice(spacerIndex + 1),
+        };
+    }
+    sortContent(content) {
+        // reverse so items on the right are hidden first
+        // then sort by hide order to apply custom preferences
+        return content.toReversed().toSorted((a, b) => {
+            const aOrder = parseInt(a.getAttribute("data-hide-order") || "0");
+            const bOrder = parseInt(b.getAttribute("data-hide-order") || "0");
+            return aOrder - bOrder;
+        });
+    }
+    /*
+     * Determines whether a separator should be packed with an item.
+     * Separators are packed with the last item that is hidden to account for
+     * the space they occupy when next overflow calculation occurs.
+     */
+    getPackedSeparatorInfo(item, isStartGroup) {
+        const group = isStartGroup ? this.startContent : this.endContent;
+        const sorted = this.sortContent(group);
+        const isHidden = this.hiddenItemsIds.includes(item._individualSlot);
+        const isLastItem = sorted.at(-1) === item;
+        return { shouldPack: isHidden && isLastItem };
+    }
+    /* =================== Items Management =================== */
+    sortItems(items) {
+        return items.toSorted((a, b) => {
+            const aIndex = PREDEFINED_PLACE_ITEMS.indexOf(a.icon || "");
+            const bIndex = PREDEFINED_PLACE_ITEMS.indexOf(b.icon || "");
+            return aIndex - bIndex;
+        });
+    }
+    /* =================== Accessibility =================== */
+    get actionsAccessibilityInfo() {
+        return this.accessibility.getActionsAccessibilityAttributes(this.texts, {
+            overflowPopoverOpen: this.overflowPopoverOpen,
+            accessibilityAttributes: this.accessibilityAttributes,
+        });
+    }
+    get actionsRole() {
+        const visibleCount = this.actions.filter(a => !this.hiddenItemsIds.includes(a.id)).length;
+        return this.accessibility.getActionsRole(visibleCount);
+    }
+    get contentRole() {
+        const visibleItemsCount = this.content.filter(item => !this.hiddenItemsIds.includes(item._individualSlot)).length;
+        return this.accessibility.getContentRole(visibleItemsCount);
+    }
+    /* =================== Common Members =================== */
+    get enabledFeatures() {
+        return {
+            search: this.searchField.length > 0,
+            profile: this.profile.length > 0,
+            content: this.content.length > 0,
+            branding: this.branding.length > 0,
+            overflow: this.showOverflowButton,
+            assistant: this.assistant.length > 0,
+            startButton: this.startButton.length > 0,
+            notifications: this.showNotifications,
+            productSwitch: this.showProductSwitch,
+        };
+    }
+    get texts() {
+        return {
+            search: ShellBar_1.i18nBundle.getText(SHELLBAR_SEARCH),
+            profile: ShellBar_1.i18nBundle.getText(SHELLBAR_PROFILE),
+            shellbar: ShellBar_1.i18nBundle.getText(SHELLBAR_LABEL),
+            products: ShellBar_1.i18nBundle.getText(SHELLBAR_PRODUCTS),
+            overflow: ShellBar_1.i18nBundle.getText(SHELLBAR_OVERFLOW),
+            assistant: ShellBar_1.i18nBundle.getText(SHELLBAR_ASSISTANT),
+            notifications: ShellBar_1.i18nBundle.getText(SHELLBAR_NOTIFICATIONS, this.notificationsCount || 0),
+            notificationsNoCount: ShellBar_1.i18nBundle.getText(SHELLBAR_NOTIFICATIONS_NO_COUNT),
+            contentItems: this.content.length > 1 ? ShellBar_1.i18nBundle.getText(SHELLBAR_ADDITIONAL_CONTEXT) : undefined,
+        };
+    }
+    get popoverHorizontalAlign() {
+        return this.effectiveDir === "rtl" ? "Start" : "End";
+    }
+    /**
+     * Returns the `logo` DOM ref.
+     * @public
+     * @default null
+     * @since 1.0.0-rc.16
+     */
+    get logoDomRef() {
+        return this.shadowRoot.querySelector(`*[data-ui5-stable="logo"]`);
+    }
+    /**
+     * Returns the `notifications` icon DOM ref.
+     * @public
+     * @default null
+     * @since 1.0.0-rc.16
+     */
+    get notificationsDomRef() {
+        return this.shadowRoot.querySelector(`*[data-ui5-stable="notifications"]`);
+    }
+    /**
+     * Returns the `overflow` icon DOM ref.
+     * @public
+     * @default null
+     * @since 1.0.0-rc.16
+     */
+    get overflowDomRef() {
+        return this.shadowRoot.querySelector(`*[data-ui5-stable="overflow"]`);
+    }
+    /**
+     * Returns the `profile` icon DOM ref.
+     * @public
+     * @default null
+     * @since 1.0.0-rc.16
+     */
+    get profileDomRef() {
+        return this.shadowRoot.querySelector(`*[data-ui5-stable="profile"]`);
+    }
+    /**
+     * Returns the `product-switch` icon DOM ref.
+     * @public
+     * @default null
+     * @since 1.0.0-rc.16
+     */
+    get productSwitchDomRef() {
+        return this.shadowRoot.querySelector(`*[data-ui5-stable="product-switch"]`);
+    }
+    /**
+     * Returns the search button DOM reference.
+     * @public
+     */
+    async getSearchButtonDomRef() {
+        await renderFinished();
+        return this.shadowRoot.querySelector(`*[data-ui5-stable="toggle-search"]`);
+    }
+    _fireClickEvent(eventName, domRef) {
+        return domRef ? !this.fireDecoratorEvent(eventName, { targetRef: domRef }) : false;
+    }
+    handleNotificationsClick() {
+        return this._fireClickEvent("notifications-click", this.notificationsDomRef);
+    }
+    handleProfileClick() {
+        return this._fireClickEvent("profile-click", this.profileDomRef);
+    }
+    handleProductSwitchClick() {
+        return this._fireClickEvent("product-switch-click", this.productSwitchDomRef);
+    }
+    getCSSVariable(cssVar) {
+        const styleSet = getComputedStyle(this.getDomRef());
+        return styleSet.getPropertyValue(getScopedVarName(cssVar));
+    }
+};
+__decorate([
+    slot()
+], ShellBar.prototype, "startButton", void 0);
+__decorate([
+    slot()
+], ShellBar.prototype, "branding", void 0);
+__decorate([
+    slot({ type: HTMLElement, individualSlots: true })
+], ShellBar.prototype, "content", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], ShellBar.prototype, "searchField", void 0);
+__decorate([
+    slot()
+], ShellBar.prototype, "assistant", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true, individualSlots: true })
+], ShellBar.prototype, "items", void 0);
+__decorate([
+    slot()
+], ShellBar.prototype, "profile", void 0);
+__decorate([
+    property()
+], ShellBar.prototype, "notificationsCount", void 0);
+__decorate([
+    property({ type: Boolean })
+], ShellBar.prototype, "showNotifications", void 0);
+__decorate([
+    property({ type: Boolean })
+], ShellBar.prototype, "showProductSwitch", void 0);
+__decorate([
+    property({ type: Boolean })
+], ShellBar.prototype, "showSearchField", void 0);
+__decorate([
+    property({ type: Object })
+], ShellBar.prototype, "accessibilityAttributes", void 0);
+__decorate([
+    property()
+], ShellBar.prototype, "breakpointSize", void 0);
+__decorate([
+    property({ type: Object })
+], ShellBar.prototype, "actions", void 0);
+__decorate([
+    property({ type: Boolean })
+], ShellBar.prototype, "showOverflowButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], ShellBar.prototype, "overflowPopoverOpen", void 0);
+__decorate([
+    property({ type: Object })
+], ShellBar.prototype, "hiddenItemsIds", void 0);
+__decorate([
+    property({ type: Boolean })
+], ShellBar.prototype, "showFullWidthSearch", void 0);
+__decorate([
+    query(".ui5-shellbar-spacer")
+], ShellBar.prototype, "spacer", void 0);
+__decorate([
+    query(".ui5-shellbar-overflow-container")
+], ShellBar.prototype, "overflowOuter", void 0);
+__decorate([
+    query(".ui5-shellbar-overflow-container-inner")
+], ShellBar.prototype, "overflowInner", void 0);
+__decorate([
+    property({ type: Boolean })
+], ShellBar.prototype, "hideSearchButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], ShellBar.prototype, "disableSearchCollapse", void 0);
+__decorate([
+    property()
+], ShellBar.prototype, "primaryTitle", void 0);
+__decorate([
+    property()
+], ShellBar.prototype, "secondaryTitle", void 0);
+__decorate([
+    slot()
+], ShellBar.prototype, "logo", void 0);
+__decorate([
+    slot()
+], ShellBar.prototype, "menuItems", void 0);
+__decorate([
+    property({ type: Boolean })
+], ShellBar.prototype, "menuPopoverOpen", void 0);
+__decorate([
+    slot()
+], ShellBar.prototype, "midContent", void 0);
+__decorate([
+    i18n("@ui5/webcomponents-fiori")
+], ShellBar, "i18nBundle", void 0);
+ShellBar = ShellBar_1 = __decorate([
+    customElement({
+        tag: "ui5-shellbar",
+        styles: [shellBarStyles, shellBarLegacyStyles, ShellBarPopoverCss],
+        renderer: jsxRenderer,
+        template: ShellBarTemplate,
+        fastNavigation: true,
+        languageAware: true,
+        dependencies: [
+            Icon,
+            List,
+            Button,
+            ButtonBadge,
+            Popover,
+            ShellBarSpacer,
+            ShellBarItem,
+            ListItemStandard,
+            // legacy dependencies
+            Menu,
+        ],
+    })
+    /**
+     *
+     * Fired, when the notification icon is activated.
+     * @param {HTMLElement} targetRef dom ref of the activated element
+     * @public
+     */
+    ,
+    event("notifications-click", {
+        cancelable: true,
+        bubbles: true,
+    })
+    /**
+     * Fired, when the profile slot is present.
+     * @param {HTMLElement} targetRef dom ref of the activated element
+     * @public
+     */
+    ,
+    event("profile-click", {
+        bubbles: true,
+    })
+    /**
+     * Fired, when the product switch icon is activated.
+     *
+     * **Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.
+     * @param {HTMLElement} targetRef dom ref of the activated element
+     * @public
+     */
+    ,
+    event("product-switch-click", {
+        cancelable: true,
+        bubbles: true,
+    })
+    /**
+     * Fired, when the logo is activated.
+     * @param {HTMLElement} targetRef dom ref of the activated element
+     * @since 0.10
+     * @public
+     */
+    ,
+    event("logo-click", {
+        bubbles: true,
+    })
+    /**
+     * Fired, when a menu item is activated
+     *
+     * **Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.
+     * @param {HTMLElement} item DOM ref of the activated list item
+     * @since 0.10
+     * @public
+     */
+    ,
+    event("menu-item-click", {
+        bubbles: true,
+        cancelable: true,
+    })
+    /**
+     * Fired, when the search button is activated.
+     *
+     * **Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`.
+     * @param {HTMLElement} targetRef dom ref of the activated element
+     * @param {Boolean} searchFieldVisible whether the search field is visible
+     * @public
+     */
+    ,
+    event("search-button-click", {
+        cancelable: true,
+        bubbles: true,
+    })
+    /**
+     * Fired, when the search field is expanded or collapsed.
+     * @since 2.10.0
+     * @param {Boolean} expanded whether the search field is expanded
+     * @public
+     */
+    ,
+    event("search-field-toggle", {
+        bubbles: true,
+    })
+    /**
+     * Fired, when the search cancel button is activated.
+     *
+     * **Note:** You can prevent the default behavior (clearing the search field value) by calling `event.preventDefault()`. The search will still be closed.
+     * **Note:** The `search-field-clear` event is in an experimental state and is a subject to change.
+     * @param {HTMLElement} targetRef dom ref of the cancel button element
+     * @since 2.14.0
+     * @public
+     */
+    ,
+    event("search-field-clear", {
+        cancelable: true,
+        bubbles: true,
+    })
+    /**
+     * Fired, when an item from the content slot is hidden or shown.
+     * **Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change.
+     *
+     * @param {Array<HTMLElement>} array of all the items that are hidden
+     * @public
+     * @since 2.7.0
+     */
+    ,
+    event("content-item-visibility-change", {
+        bubbles: true,
+    })
+], ShellBar);
 ShellBar.define();
-
 export default ShellBar;
+export { ShellBarActions, ShellBarActionsSelectors, };
+//# sourceMappingURL=ShellBar.js.map