@openui5/sap.ui.webc.fiori 1.115.1 → 1.116.0

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

@@ -1,4 +1,4 @@
-sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/FeaturesRegistry", "sap/ui/webc/common/thirdparty/base/types/AnimationMode", "sap/ui/webc/common/thirdparty/base/config/AnimationMode", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/webc/main/thirdparty/StandardListItem", "sap/ui/webc/main/thirdparty/List", "sap/ui/webc/main/thirdparty/Popover", "sap/ui/webc/main/thirdparty/Button", "sap/ui/webc/main/thirdparty/types/HasPopup", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/icons/search", "sap/ui/webc/common/thirdparty/icons/bell", "sap/ui/webc/common/thirdparty/icons/overflow", "sap/ui/webc/common/thirdparty/icons/grid", "./generated/i18n/i18n-defaults", "./generated/templates/ShellBarTemplate.lit", "./generated/templates/ShellBarPopoverTemplate.lit", "./generated/themes/ShellBar.css", "./generated/themes/ShellBarPopover.css"], function (_exports, _UI5Element, _LitRenderer, _ResizeHandler, _FeaturesRegistry, _AnimationMode, _AnimationMode2, _Keys, _Render, _StandardListItem, _List, _Popover, _Button, _HasPopup, _i18nBundle, _search, _bell, _overflow, _grid, _i18nDefaults, _ShellBarTemplate, _ShellBarPopoverTemplate, _ShellBar, _ShellBarPopover) {
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/FeaturesRegistry", "sap/ui/webc/common/thirdparty/base/types/AnimationMode", "sap/ui/webc/common/thirdparty/base/config/AnimationMode", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/webc/main/thirdparty/StandardListItem", "sap/ui/webc/main/thirdparty/List", "sap/ui/webc/main/thirdparty/Popover", "sap/ui/webc/main/thirdparty/Button", "sap/ui/webc/main/thirdparty/types/HasPopup", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/icons/search", "sap/ui/webc/common/thirdparty/icons/bell", "sap/ui/webc/common/thirdparty/icons/overflow", "sap/ui/webc/common/thirdparty/icons/grid", "./generated/templates/ShellBarTemplate.lit", "./generated/templates/ShellBarPopoverTemplate.lit", "./generated/themes/ShellBar.css", "./generated/themes/ShellBarPopover.css", "./generated/i18n/i18n-defaults"], function (_exports, _UI5Element, _property, _slot, _customElement, _event, _LitRenderer, _ResizeHandler, _FeaturesRegistry, _AnimationMode, _AnimationMode2, _Keys, _Render, _StandardListItem, _List, _Popover, _Button, _HasPopup, _i18nBundle, _search, _bell, _overflow, _grid, _ShellBarTemplate, _ShellBarPopoverTemplate, _ShellBar, _ShellBarPopover, _i18nDefaults) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -6,6 +6,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   });
   _exports.default = void 0;
   _UI5Element = _interopRequireDefault(_UI5Element);
+  _property = _interopRequireDefault(_property);
+  _slot = _interopRequireDefault(_slot);
+  _customElement = _interopRequireDefault(_customElement);
+  _event = _interopRequireDefault(_event);
   _LitRenderer = _interopRequireDefault(_LitRenderer);
   _ResizeHandler = _interopRequireDefault(_ResizeHandler);
   _AnimationMode = _interopRequireDefault(_AnimationMode);
@@ -19,319 +23,15 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   _ShellBar = _interopRequireDefault(_ShellBar);
   _ShellBarPopover = _interopRequireDefault(_ShellBarPopover);
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-  // Templates
-
-  // Styles
-
-  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
-          }
-        }
-      }
-    }
+  var __decorate = void 0 && (void 0).__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;
+  const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
   /**
    * @class
    * <h3 class="comment-api-title">Overview</h3>
@@ -374,32 +74,14 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
    *
    * @constructor
    * @author SAP SE
-   * @alias sap.ui.webcomponents.fiori.ShellBar
-   * @extends sap.ui.webcomponents.base.UI5Element
+   * @alias sap.ui.webc.fiori.ShellBar
+   * @extends sap.ui.webc.base.UI5Element
    * @tagname ui5-shellbar
-   * @appenddocs ShellBarItem
+   * @appenddocs sap.ui.webc.fiori.ShellBarItem
    * @public
    * @since 0.8.0
    */
-  class ShellBar extends _UI5Element.default {
-    static get metadata() {
-      return metadata;
-    }
-    static get render() {
-      return _LitRenderer.default;
-    }
-    static get template() {
-      return _ShellBarTemplate.default;
-    }
-    static get staticAreaTemplate() {
-      return _ShellBarPopoverTemplate.default;
-    }
-    static get styles() {
-      return _ShellBar.default;
-    }
-    static get staticAreaStyles() {
-      return [_ShellBarPopover.default];
-    }
+  let ShellBar = ShellBar_1 = class ShellBar extends _UI5Element.default {
     static get FIORI_3_BREAKPOINTS() {
       return [599, 1023, 1439, 1919, 10000];
     }
@@ -416,23 +98,19 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       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._headerPress = async () => {
+        this._updateClonedMenuItems();
+        if (this.hasMenuItems) {
+          const menuPopover = await this._getMenuPopover();
+          menuPopover.showAt(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"), true);
         }
       };
-      this._handleResize = async event => {
+      this._handleResize = () => {
         this._debounce(async () => {
           await this._getResponsivePopover();
           this.overflowPopover.close();
@@ -447,10 +125,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         fn();
       }, delay);
     }
-    _menuItemPress(event) {
+    _menuItemPress(e) {
       this.menuPopover.close();
       this.fireEvent("menu-item-click", {
-        item: event.detail.selectedItems[0]
+        item: e.detail.selectedItems[0]
       }, true);
     }
     _logoPress() {
@@ -460,27 +138,33 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     }
     _menuPopoverBeforeOpen() {
       this._menuPopoverExpanded = true;
+      if (this.menuPopover.content && this.menuPopover.content.length) {
+        this.menuPopover.content[0].focusFirstItem();
+      }
     }
     _menuPopoverAfterClose() {
       this._menuPopoverExpanded = false;
     }
     _overflowPopoverBeforeOpen() {
       this._overflowPopoverExpanded = true;
+      if (this.overflowPopover.content && this.overflowPopover.content.length) {
+        this.overflowPopover.content[0].focusFirstItem();
+      }
     }
     _overflowPopoverAfterClose() {
       this._overflowPopoverExpanded = false;
     }
-    _logoKeyup(event) {
-      if ((0, _Keys.isSpace)(event)) {
+    _logoKeyup(e) {
+      if ((0, _Keys.isSpace)(e)) {
         this._logoPress();
       }
     }
-    _logoKeydown(event) {
-      if ((0, _Keys.isSpace)(event)) {
-        event.preventDefault();
+    _logoKeydown(e) {
+      if ((0, _Keys.isSpace)(e)) {
+        e.preventDefault();
         return;
       }
-      if ((0, _Keys.isEnter)(event)) {
+      if ((0, _Keys.isEnter)(e)) {
         this._logoPress();
       }
     }
@@ -492,19 +176,19 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     _coPilotClick() {
       this._fireCoPilotClick();
     }
-    _coPilotKeydown(event) {
-      if ((0, _Keys.isSpace)(event)) {
+    _coPilotKeydown(e) {
+      if ((0, _Keys.isSpace)(e)) {
         this.coPilotActive = true;
-        event.preventDefault();
+        e.preventDefault();
         return;
       }
-      if ((0, _Keys.isEnter)(event)) {
+      if ((0, _Keys.isEnter)(e)) {
         this.coPilotActive = true;
         this._fireCoPilotClick();
       }
     }
-    _coPilotKeyup(event) {
-      if ((0, _Keys.isSpace)(event)) {
+    _coPilotKeyup(e) {
+      if ((0, _Keys.isSpace)(e)) {
         this._fireCoPilotClick();
       }
       this.coPilotActive = false;
@@ -530,11 +214,12 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       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
+     * @method
+     * @name sap.ui.webc.fiori.ShellBar#closeOverflow
      */
     closeOverflow() {
       if (this.overflowPopover) {
@@ -543,16 +228,16 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     }
     _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];
+      const breakpoints = ShellBar_1.FIORI_3_BREAKPOINTS;
+      const size = breakpoints.find(bp1 => width < bp1) || ShellBar_1.FIORI_3_BREAKPOINTS[ShellBar_1.FIORI_3_BREAKPOINTS.length - 1];
+      const mappedSize = ShellBar_1.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 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;
@@ -575,15 +260,15 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       }
       const elementsToOverflow = this.shadowRoot.querySelectorAll(overflowSelector);
       const isRTL = this.effectiveDir === "rtl";
-      let overflowCount = [].filter.call(elementsToOverflow, icon => {
+      const overflowButtons = [...elementsToOverflow].filter(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 showOverflowButton = !!overflowButtons.length;
+      const items = this._getAllItems(showOverflowButton).filter(item => item.show);
       const itemsByPriority = items.sort((item1, item2) => {
         if (item1.priority > item2.priority) {
           return 1;
@@ -594,7 +279,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         return 0;
       });
       for (let i = 0; i < itemsByPriority.length; i++) {
-        if (i < overflowCount) {
+        if (i < overflowButtons.length) {
           itemsByPriority[i].classes = `${itemsByPriority[i].classes} ui5-shellbar-hidden-button`;
           itemsByPriority[i].styles = {
             order: -1
@@ -614,7 +299,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     async _toggleActionPopover() {
       const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
       const overflowPopover = await this._getOverflowPopover();
-      overflowPopover.showAt(overflowButton);
+      overflowPopover.showAt(overflowButton, true);
     }
     onEnterDOM() {
       _ResizeHandler.default.register(this, this._handleResize);
@@ -625,18 +310,16 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       clearTimeout(this._debounceInterval);
       this._debounceInterval = null;
     }
-    _handleSearchIconPress(event) {
+    _handleSearchIconPress() {
       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) {
@@ -644,7 +327,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         }
       }, 100);
     }
-    async _handleActionListClick(event) {
+    async _handleActionListClick() {
       if (!this._defaultItemPressPrevented) {
         this.closeOverflow();
         // wait for DOM to be updated when ui5-popover is closed, otherwise if Enter key is hold
@@ -653,28 +336,28 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       }
       this._defaultItemPressPrevented = false;
     }
-    _handleCustomActionPress(event) {
-      const refItemId = event.target.getAttribute("data-ui5-external-action-item-id");
+    _handleCustomActionPress(e) {
+      const target = e.target;
+      const refItemId = 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);
+        const prevented = shellbarItem.fireClickEvent(e);
         this._defaultItemPressPrevented = prevented;
       }
     }
-    _handleOverflowPress(event) {
+    _handleOverflowPress() {
       this._toggleActionPopover();
     }
-    _handleNotificationsPress(event) {
-      const notificationIconRef = this.shadowRoot.querySelector(".ui5-shellbar-bell-button");
+    _handleNotificationsPress(e) {
+      const notificationIconRef = this.shadowRoot.querySelector(".ui5-shellbar-bell-button"),
+        target = e.target;
       this._defaultItemPressPrevented = !this.fireEvent("notifications-click", {
-        targetRef: notificationIconRef.classList.contains("ui5-shellbar-hidden-button") ? event.target : notificationIconRef
+        targetRef: notificationIconRef.classList.contains("ui5-shellbar-hidden-button") ? target : notificationIconRef
       }, true);
     }
-    _handleProfilePress(event) {
+    _handleProfilePress() {
       this.fireEvent("profile-click", {
         targetRef: this.shadowRoot.querySelector(".ui5-shellbar-image-button")
       });
@@ -682,16 +365,17 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     _handleCancelButtonPress() {
       this.showSearchField = false;
     }
-    _handleProductSwitchPress(event) {
-      const buttonRef = this.shadowRoot.querySelector(".ui5-shellbar-button-product-switch");
+    _handleProductSwitchPress(e) {
+      const buttonRef = this.shadowRoot.querySelector(".ui5-shellbar-button-product-switch"),
+        target = e.target;
       this._defaultItemPressPrevented = !this.fireEvent("product-switch-click", {
-        targetRef: buttonRef.classList.contains("ui5-shellbar-hidden-button") ? event.target : buttonRef
+        targetRef: buttonRef.classList.contains("ui5-shellbar-hidden-button") ? target : buttonRef
       }, true);
     }
-
     /**
      * Returns the <code>logo</code> DOM ref.
-     * @type { HTMLElement }
+     * @type {HTMLElement}
+     * @name sap.ui.webc.fiori.ShellBar.prototype.logoDomRef
      * @public
      * @readonly
      * @since 1.0.0-rc.16
@@ -699,10 +383,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     get logoDomRef() {
       return this.shadowRoot.querySelector(`*[data-ui5-stable="logo"]`);
     }
-
     /**
      * Returns the <code>copilot</code> DOM ref.
-     * @type { HTMLElement }
+     * @type {HTMLElement}
+     * @name sap.ui.webc.fiori.ShellBar.prototype.copilotDomRef
      * @public
      * @readonly
      * @since 1.0.0-rc.16
@@ -710,10 +394,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     get copilotDomRef() {
       return this.shadowRoot.querySelector(`*[data-ui5-stable="copilot"]`);
     }
-
     /**
      * Returns the <code>notifications</code> icon DOM ref.
-     * @type { HTMLElement }
+     * @type {HTMLElement}
+     * @name sap.ui.webc.fiori.ShellBar.prototype.notificationsDomRef
      * @public
      * @readonly
      * @since 1.0.0-rc.16
@@ -721,10 +405,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     get notificationsDomRef() {
       return this.shadowRoot.querySelector(`*[data-ui5-stable="notifications"]`);
     }
-
     /**
      * Returns the <code>overflow</code> icon DOM ref.
-     * @type { HTMLElement }
+     * @type {HTMLElement}
+     * @name sap.ui.webc.fiori.ShellBar.prototype.overflowDomRef
      * @public
      * @readonly
      * @since 1.0.0-rc.16
@@ -732,10 +416,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     get overflowDomRef() {
       return this.shadowRoot.querySelector(`*[data-ui5-stable="overflow"]`);
     }
-
     /**
      * Returns the <code>profile</code> icon DOM ref.
-     * @type { HTMLElement }
+     * @type {HTMLElement}
+     * @name sap.ui.webc.fiori.ShellBar.prototype.profileDomRef
      * @public
      * @readonly
      * @since 1.0.0-rc.16
@@ -743,10 +427,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     get profileDomRef() {
       return this.shadowRoot.querySelector(`*[data-ui5-stable="profile"]`);
     }
-
     /**
      * Returns the <code>product-switch</code> icon DOM ref.
-     * @type { HTMLElement }
+     * @type {HTMLElement}
+     * @name sap.ui.webc.fiori.ShellBar.prototype.productSwitchDomRef
      * @public
      * @readonly
      * @since 1.0.0-rc.16
@@ -754,7 +438,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     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)
@@ -773,7 +456,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         id: `${this._id}-item-${1}`,
         press: this._handleSearchIconPress.bind(this),
         show: !!this.searchField.length
-      }, ...this.items.map((item, index) => {
+      }, ...this.items.map(item => {
         item._getRealDomRef = () => this.getDomRef().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
         return {
           icon: item.icon,
@@ -895,7 +578,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       return {
         wrapper: {
           "ui5-shellbar-root": true,
-          "ui5-shellbar-with-searchfield": this.searchField.length
+          "ui5-shellbar-with-searchfield": this.hasSearchField
         },
         button: {
           "ui5-shellbar-menu-button--interactive": this.hasMenuItems,
@@ -972,19 +655,19 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       return this.menuItems.length > 0;
     }
     get _shellbarText() {
-      return ShellBar.i18nBundle.getText(_i18nDefaults.SHELLBAR_LABEL);
+      return ShellBar_1.i18nBundle.getText(_i18nDefaults.SHELLBAR_LABEL);
     }
     get _logoText() {
-      return this.accessibilityTexts.logoTitle || ShellBar.i18nBundle.getText(_i18nDefaults.SHELLBAR_LOGO);
+      return this.accessibilityTexts.logoTitle || ShellBar_1.i18nBundle.getText(_i18nDefaults.SHELLBAR_LOGO);
     }
     get _copilotText() {
-      return ShellBar.i18nBundle.getText(_i18nDefaults.SHELLBAR_COPILOT);
+      return ShellBar_1.i18nBundle.getText(_i18nDefaults.SHELLBAR_COPILOT);
     }
     get _notificationsText() {
-      return ShellBar.i18nBundle.getText(_i18nDefaults.SHELLBAR_NOTIFICATIONS, this.notificationsCount);
+      return ShellBar_1.i18nBundle.getText(_i18nDefaults.SHELLBAR_NOTIFICATIONS, this.notificationsCount);
     }
     get _cancelBtnText() {
-      return ShellBar.i18nBundle.getText(_i18nDefaults.SHELLBAR_CANCEL);
+      return ShellBar_1.i18nBundle.getText(_i18nDefaults.SHELLBAR_CANCEL);
     }
     get _showFullWidthSearch() {
       const size = this._handleBarBreakpoints();
@@ -992,50 +675,237 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       return size === "S" || searchBtnHidden;
     }
     get _profileText() {
-      return this.accessibilityTexts.profileButtonTitle || ShellBar.i18nBundle.getText(_i18nDefaults.SHELLBAR_PROFILE);
+      return this.accessibilityTexts.profileButtonTitle || ShellBar_1.i18nBundle.getText(_i18nDefaults.SHELLBAR_PROFILE);
     }
     get _productsText() {
-      return ShellBar.i18nBundle.getText(_i18nDefaults.SHELLBAR_PRODUCTS);
+      return ShellBar_1.i18nBundle.getText(_i18nDefaults.SHELLBAR_PRODUCTS);
     }
     get _searchText() {
-      return ShellBar.i18nBundle.getText(_i18nDefaults.SHELLBAR_SEARCH);
+      return ShellBar_1.i18nBundle.getText(_i18nDefaults.SHELLBAR_SEARCH);
     }
     get _overflowText() {
-      return ShellBar.i18nBundle.getText(_i18nDefaults.SHELLBAR_OVERFLOW);
+      return ShellBar_1.i18nBundle.getText(_i18nDefaults.SHELLBAR_OVERFLOW);
     }
     get accInfo() {
       return {
         notifications: {
-          "title": this._notificationsText
+          "title": this._notificationsText,
+          "accessibilityAttributes": {
+            hasPopup: this._notificationsHasPopup
+          }
         },
         profile: {
-          "title": this._profileText
+          "title": this._profileText,
+          "accessibilityAttributes": {
+            hasPopup: this._profileHasPopup
+          }
         },
         products: {
-          "title": this._productsText
+          "title": this._productsText,
+          "accessibilityAttributes": {
+            hasPopup: this._productsHasPopup
+          }
         },
         search: {
           "title": this._searchText,
           "accessibilityAttributes": {
+            hasPopup: this._searchHasPopup,
             expanded: this.showSearchField
           }
         },
         overflow: {
           "title": this._overflowText,
           "accessibilityAttributes": {
-            hasPopup: _HasPopup.default.Menu,
+            hasPopup: this._overflowHasPopup,
             expanded: this._overflowPopoverExpanded
           }
         }
       };
     }
-    static get dependencies() {
-      return [_Button.default, _List.default, _Popover.default, _StandardListItem.default];
+    get _notificationsHasPopup() {
+      const notificationsAccAttributes = this.accessibilityAttributes.notifications;
+      return notificationsAccAttributes ? notificationsAccAttributes.ariaHasPopup : null;
+    }
+    get _profileHasPopup() {
+      const profileAccAttributes = this.accessibilityAttributes.profile;
+      return profileAccAttributes ? profileAccAttributes.ariaHasPopup : null;
+    }
+    get _productsHasPopup() {
+      const productsAccAttributes = this.accessibilityAttributes.product;
+      return productsAccAttributes ? productsAccAttributes.ariaHasPopup : null;
+    }
+    get _searchHasPopup() {
+      const searcAccAttributes = this.accessibilityAttributes.search;
+      return searcAccAttributes ? searcAccAttributes.ariaHasPopup : null;
+    }
+    get _overflowHasPopup() {
+      const overflowAccAttributes = this.accessibilityAttributes.overflow;
+      return overflowAccAttributes ? overflowAccAttributes.ariaHasPopup : _HasPopup.default.Menu;
+    }
+    get accLogoRole() {
+      return this.accessibilityRoles.logoRole || "button";
     }
     static async onDefine() {
-      ShellBar.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents-fiori");
+      ShellBar_1.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents-fiori");
+    }
+  };
+  __decorate([(0, _property.default)()], ShellBar.prototype, "primaryTitle", void 0);
+  __decorate([(0, _property.default)()], ShellBar.prototype, "secondaryTitle", void 0);
+  __decorate([(0, _property.default)()], ShellBar.prototype, "notificationsCount", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ShellBar.prototype, "showNotifications", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ShellBar.prototype, "showProductSwitch", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ShellBar.prototype, "showCoPilot", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ShellBar.prototype, "showSearchField", void 0);
+  __decorate([(0, _property.default)({
+    type: Object
+  })], ShellBar.prototype, "accessibilityRoles", void 0);
+  __decorate([(0, _property.default)({
+    type: Object
+  })], ShellBar.prototype, "accessibilityTexts", void 0);
+  __decorate([(0, _property.default)({
+    type: Object
+  })], ShellBar.prototype, "accessibilityAttributes", void 0);
+  __decorate([(0, _property.default)()], ShellBar.prototype, "breakpointSize", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ShellBar.prototype, "coPilotActive", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ShellBar.prototype, "withLogo", void 0);
+  __decorate([(0, _property.default)({
+    type: Object
+  })], ShellBar.prototype, "_itemsInfo", void 0);
+  __decorate([(0, _property.default)({
+    type: Object,
+    multiple: true
+  })], ShellBar.prototype, "_menuPopoverItems", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean,
+    noAttribute: true
+  })], ShellBar.prototype, "_menuPopoverExpanded", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean,
+    noAttribute: true
+  })], ShellBar.prototype, "_overflowPopoverExpanded", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean,
+    noAttribute: true
+  })], ShellBar.prototype, "_fullWidthSearch", void 0);
+  __decorate([(0, _slot.default)({
+    type: HTMLElement,
+    "default": true,
+    invalidateOnChildChange: true
+  })], ShellBar.prototype, "items", void 0);
+  __decorate([(0, _slot.default)()], ShellBar.prototype, "profile", void 0);
+  __decorate([(0, _slot.default)()], ShellBar.prototype, "logo", void 0);
+  __decorate([(0, _slot.default)()], ShellBar.prototype, "menuItems", void 0);
+  __decorate([(0, _slot.default)()], ShellBar.prototype, "searchField", void 0);
+  __decorate([(0, _slot.default)()], ShellBar.prototype, "startButton", void 0);
+  ShellBar = ShellBar_1 = __decorate([(0, _customElement.default)({
+    tag: "ui5-shellbar",
+    fastNavigation: true,
+    languageAware: true,
+    renderer: _LitRenderer.default,
+    template: _ShellBarTemplate.default,
+    staticAreaTemplate: _ShellBarPopoverTemplate.default,
+    styles: _ShellBar.default,
+    staticAreaStyles: [_ShellBarPopover.default],
+    dependencies: [_Button.default, _List.default, _Popover.default, _StandardListItem.default]
+  })
+  /**
+   *
+   * Fired, when the notification icon is activated.
+   *
+   * @event sap.ui.webc.fiori.ShellBar#notifications-click
+   * @allowPreventDefault
+   * @param {HTMLElement} targetRef dom ref of the activated element
+   * @public
+   */, (0, _event.default)("notifications-click", {
+    detail: {
+      targetRef: {
+        type: HTMLElement
+      }
+    }
+  })
+  /**
+   * Fired, when the profile slot is present.
+   *
+   * @event sap.ui.webc.fiori.ShellBar#profile-click
+   * @param {HTMLElement} targetRef dom ref of the activated element
+   * @public
+   */, (0, _event.default)("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.webc.fiori.ShellBar#product-switch-click
+   * @allowPreventDefault
+   * @param {HTMLElement} targetRef dom ref of the activated element
+   * @public
+   */, (0, _event.default)("product-switch-click", {
+    detail: {
+      targetRef: {
+        type: HTMLElement
+      }
+    }
+  })
+  /**
+   * Fired, when the logo is activated.
+   *
+   * @event sap.ui.webc.fiori.ShellBar#logo-click
+   * @param {HTMLElement} targetRef dom ref of the activated element
+   * @since 0.10
+   * @public
+   */, (0, _event.default)("logo-click", {
+    detail: {
+      targetRef: {
+        type: HTMLElement
+      }
+    }
+  })
+  /**
+   * Fired, when the co pilot is activated.
+   *
+   * @event sap.ui.webc.fiori.ShellBar#co-pilot-click
+   * @param {HTMLElement} targetRef dom ref of the activated element
+   * @since 0.10
+   * @public
+   */, (0, _event.default)("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.webc.fiori.ShellBar#menu-item-click
+   * @param {HTMLElement} item DOM ref of the activated list item
+   * @since 0.10
+   * @public
+   */, (0, _event.default)("menu-item-click", {
+    detail: {
+      item: {
+        type: HTMLElement
+      }
     }
-  }
+  })], ShellBar);
   ShellBar.define();
   var _default = ShellBar;
   _exports.default = _default;