@sapudex/web-components 0.127.6 → 0.143.0

package/src/ListItem.hbs

@@ -4,7 +4,6 @@
         role="{{roleItem}}"
         tabindex="{{_effectiveTabIndex}}"
         aria-disabled="{{_ariaDisabled}}"
-        aria-labelledby="{{_accessibleNameRef}}"
         class="{{className}}"
         @click="{{handleItemClick}}"
         @mousedown="{{handleMouseDown}}"
@@ -52,7 +51,7 @@
     </li>
 {{/if}}
 {{#*inline "contentList"}}
-    <div id="{{_id}}-content" class="udex-list__content-wrap">
+    <div class="udex-list__content-wrap" _id="{{this._id}}" aria-labelledby="{{this._id}}-invisibleText">
         {{#if flag}}
             <div class="udex-list__flag-wrap">
                  <span class="udex-list__flag" style="background-position: {{flagPosition}}"></span>
@@ -102,6 +101,7 @@
                         design="Tertiary"
                         icon="{{editIcon}}"
                         accessible-name="{{editButtonAccessibleName}}"
+                        toolTip="{{editButtonAccessibleName}}"
                         size="Small">
                     </udex-button>
                 {{/if}}
@@ -114,10 +114,12 @@
                         design="Tertiary"
                         size="Small"
                         accessible-name="{{deleteButtonAccessibleName}}"
+                        toolTip="{{deleteButtonAccessibleName}}"
                         icon="{{deleteIcon}}">
                     </udex-button>
                 {{/if}}
             {{/if}}
         </div>
+      <div class="hidden" id="{{this._id}}-invisibleText">{{accessibleName}}</div>
     </div>
 {{/inline}}

package/src/ListItem.ts

@@ -36,7 +36,7 @@ import ListItemCss from "./generated/themes/ListItem.css.js";
  * For the <code>udex-list-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/ListItem.js";</code>
+ * <code>import "@udex/web-components/dist/ListItem.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -109,7 +109,7 @@ class UDExListItem extends UDExListItemBase {
   /**
    * Defines the accessible name of the item.
    *
-   * @defaultvalue ""
+   * @default ""
    * @public
    */
   @property()
@@ -251,7 +251,7 @@ class UDExListItem extends UDExListItemBase {
   }
 
   static async onDefine(): Promise<void> {
-    UDExListItem.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExListItem.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onEnterDOM() {
@@ -261,6 +261,12 @@ class UDExListItem extends UDExListItemBase {
     }
   }
 
+  onAfterRendering() {
+    if (!this.accessibleRole || this.accessibleRole === "listitem") {
+      this.shadowRoot?.querySelector("li")?.removeAttribute("aria-selected");
+    }
+  }
+
   onExitDOM() {
     document.removeEventListener("mouseup", this.deactivate);
   }
@@ -387,14 +393,6 @@ class UDExListItem extends UDExListItemBase {
     return this.size === ListItemSize.Large;
   }
 
-  get _accessibleNameRef(): string {
-    if (this.accessibleName) {
-      return `${this._id}-invisibleText`;
-    }
-
-    return `${this._id}-content`;
-  }
-
   get stateAccessibleName(): string {
     if (this.indeterminate) { return UDExListItem.i18nBundle.getText(INDETERMINATE); }
     return `${this.selected ? UDExListItem.i18nBundle.getText(SELECTED) : UDExListItem.i18nBundle.getText(UNSELECTED)} `;

package/src/ListItemBase.ts

@@ -112,7 +112,7 @@ class UDExListItemBase extends UI5Element {
     _icon?: string;
 
   @property({ type: String })
-    _tabIndex!: number | string;
+    _tabIndex!: string;
 
   get _effectiveTabIndex() {
     if (this.disabled) {

package/src/ListSelectAll.hbs

@@ -11,7 +11,7 @@
               _additional-class-name="{{additionalClassName}}"
               class="{{className}}"
               ?selected="{{selected}}"
-              aria-selected="{{selected}}"
+              aria-current="{{selected}}"
               ?indeterminate="{{indeterminate}}"
               mode="{{multiselectMode}}"
               part="group-item"

package/src/ListSelectAll.ts

@@ -20,7 +20,7 @@ import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css";
  *
  * <h3>Usage</h3>
  *
- * For the <code>udex--list-select-all</code>
+ * For the <code>udex-list-select-all</code>
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@udex/web-components/dist/ListSelectAll.js";</code>
@@ -46,7 +46,7 @@ class UDExListSelectAll extends UDExListGroupHeaderBase {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExListSelectAll.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExListSelectAll.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   handleSelectAllPress() {

package/src/MastheadItem.hbs

@@ -7,19 +7,21 @@
         target="{{target}}"
         href="{{href}}"
         aria-labelledby="{{ariaLabelledBy}}"
-        aria-label="{{accessibleLabel}}">
+        aria-label="{{accessibleLabel}}"
+        @click="{{handleNavigationItemClick}}">
         {{> content}}
     </a>
 {{else if isProfileBtn}}
     <span
         id="{{this._id}}"
+        role="combobox"
         class="udex-masthead-item__btn {{additionalClass}}"
         aria-expanded="{{selected}}"
         aria-labelledby="{{ariaLabelledBy}}"
         aria-haspopup="{{hasDropdownSlot}}"
         aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
-        @click="{{onClick}}">
+        @click="{{handleNavigationItemClick}}">
         {{> content}}
     </span>
     {{#if showDropdown}}
@@ -35,7 +37,7 @@
         aria-haspopup="{{hasDropdownSlot}}"
         aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
-        @click="{{onClick}}">
+        @click="{{handleNavigationItemClick}}">
         {{> content}}
     </button>
     {{#if showDropdown}}

package/src/MastheadItem.ts

@@ -1,6 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
@@ -8,6 +10,7 @@ import "@ui5/webcomponents-icons/dist/search.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import { PROFILE } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExAvatar from "./Avatar.js";
 import MastheadShell from "./MastheadShell.js";
@@ -38,12 +41,18 @@ export type SubMenuLinkItem = {
   category: string;
   url?: string;
   items: CategoryItem[];
+  index: number;
 };
 
 export type MenuItem = {
   subMenuLinkItems: SubMenuLinkItem[];
 };
 
+export type ItemClickEventDetail = {
+  originalEvent: Event,
+  item: UDExMastheadItem,
+}
+
 /**
  * @class
  *
@@ -78,7 +87,17 @@ export type MenuItem = {
  * @allowPreventDefault
  * @public
  */
-@event("click")
+@event("item-click", {
+  detail: {
+    item: {
+      type: HTMLElement,
+    },
+    originalEvent: {
+      type: PointerEvent,
+    },
+  },
+})
+
 class UDExMastheadItem extends UI5Element implements IMastheadItem {
   /**
    * Defines sub items for item
@@ -204,6 +223,11 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     content?: Array<HTMLElement>;
 
   _profileAvatar!: UDExAvatar;
+  static i18nBundle: I18nBundle;
+
+  static async onDefine(): Promise<void> {
+    UDExMastheadItem.i18nBundle = await getI18nBundle("@udex/web-components");
+  }
 
   onEnterDOM() {
     if (isDesktop()) {
@@ -219,12 +243,6 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
   }
 
-  onClick(e: Event): void {
-    e.stopPropagation();
-    this.fireEvent("click", { item: this });
-    this.selected = this.isMobile ? true : !this.selected;
-  }
-
   handleKeyDown(e: KeyboardEvent): void {
     if (isEscape(e) && this.hasDropdownSlot) {
       if (this.isMobile) {
@@ -244,16 +262,20 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
   }
 
-  handleKeyEscapeMobile() {
-    const mastheadShell: MastheadShell | null = document.querySelector("udex-masthead-shell");
-    const mobileMenu = mastheadShell?.mastheadMobileMenu;
-    mastheadShell?.removeActiveMobileClass();
-    mastheadShell?.mobileBtn?.focus();
-    this.selected = false;
+  handleKeyEscapeMobile(): void {
+    const mastheadShell: MastheadShell = document.querySelector<MastheadShell>("udex-masthead-shell")!;
 
-    if (mobileMenu) {
-      mobileMenu.showFirstLevelMenu();
-    }
+    mastheadShell.closeMobileMenu();
+    mastheadShell.mobileBtn?.focus();
+  }
+
+  handleNavigationItemClick(e: Event): void {
+    this.selected = this.isMobile ? true : !this.selected;
+
+    this.fireEvent<ItemClickEventDetail>("item-click", {
+      item: this,
+      originalEvent: e,
+    });
   }
 
   setDropdownInsetStart(): void {
@@ -380,7 +402,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get accessibleLabel(): string {
-    return this.accessibleName || this.innerText;
+    return this.accessibleName || this.innerText || (this.isProfileBtn ? UDExMastheadItem.i18nBundle.getText(PROFILE) : "");
   }
 
   get isMenuItem(): boolean {

package/src/MastheadMenu.hbs

@@ -22,6 +22,7 @@
 {{#*inline "header"}}
     <div class="udex-masthead-menu__header">
         <udex-masthead-menu-item
+            @click="{{../../handleMenuItemClick}}"
             url="{{this.url}}"
             label="{{this.category}}"
             ?icon-end="{{this.url}}"
@@ -36,11 +37,12 @@
         {{#each this.items}}
             <li role="none">
                 <udex-masthead-menu-item
-                    role="menuitem"
+                    @click="{{../../../handleMenuItemClick}}"
                     badge="{{this.badge}}"
                     ?external-link="{{this.externalLink}}"
                     url="{{this.url}}"
-                    label="{{this.title}}">
+                    label="{{this.title}}"
+                    role="menuitem" >
                 </udex-masthead-menu-item>
             </li>
         {{/each}}

package/src/MastheadMenu.ts

@@ -3,6 +3,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import "@ui5/webcomponents-icons/dist/action.js";
 import { isUp, isDown } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -29,6 +30,11 @@ export type MenuItem = {
   subMenuLinkItems: SubMenuLinkItem[];
 };
 
+export type MenuItemClickEventDetail = {
+  originalEvent: Event,
+  item: UDExMastheadMenuItem,
+}
+
 /**
  * @class
  *
@@ -54,6 +60,23 @@ export type MenuItem = {
   dependencies: [Icon, UDExBadge, UDExMastheadMenuItem],
 })
 
+/**
+ * Fires when menu item is clicked
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event("menu-item-click", {
+  detail: {
+    item: {
+      type: HTMLElement,
+    },
+    originalEvent: {
+      type: PointerEvent,
+    },
+  },
+})
+
 class UDExMastheadMenu extends UI5Element {
   /**
    * Defines a menu heading
@@ -94,6 +117,13 @@ class UDExMastheadMenu extends UI5Element {
     }
   }
 
+  handleMenuItemClick(e: Event) {
+    this.fireEvent<MenuItemClickEventDetail>("menu-item-click", {
+      item: e.target as UDExMastheadMenuItem,
+      originalEvent: e,
+    });
+  }
+
   focusPreviousItem(item: UDExMastheadMenuItem): void {
     const currentSelectedIndex = this.getCurrentIndex(item);
     const lastItemIndex = this.links.length - 1;

package/src/MastheadMenuItem.hbs

@@ -27,7 +27,6 @@
 {{else}}
     {{#if isButtonType}}
         <button
-            @click="{{handleClick}}"
             _id="{{id}}"
             class="udex-masthead-menu-item {{rootClass}}"
             part="menu-item-button"
@@ -85,4 +84,3 @@
         part="right">
     </ui5-icon>
 {{/inline}}
-

package/src/MastheadMenuItem.ts

@@ -1,6 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
@@ -26,14 +25,14 @@ export enum ItemType {
  *
  * <h3>Usage</h3>
  *
- * For the <code>masthead-menu-item</code>
+ * For the <code>udex-masthead-menu-item</code>
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@udex/web-components/dist/MastheadMenuItem.js";</code>
  *
  * @constructor
  * @extends UI5Element
- * @public
+ * @private
  */
 @customElement({
   tag: "udex-masthead-menu-item",
@@ -43,16 +42,6 @@ export enum ItemType {
   dependencies: [Icon],
 })
 
-/**
- * Fires when item button is clicked
- *
- * @public
- */
-@event("click", {
-  detail: {
-    item: { type: HTMLElement },
-  },
-})
 class UDExMastheadMenuItem extends UI5Element {
   /**
    * Defines the type of the item.
@@ -144,9 +133,6 @@ class UDExMastheadMenuItem extends UI5Element {
       this.setAttribute("desktop", "");
     }
   }
-  handleClick() {
-    this.fireEvent("click", { item: this });
-  }
 
   get rootClass(): string {
     const badgeClass = this.badge ? "udex-masthead-menu-item_badge" : "";

package/src/MastheadMobileMenu.hbs

@@ -11,15 +11,36 @@
             {{/if}}
             {{#if _showCategories}}
                 <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
-                    <udex-masthead-menu-item
-                        class="udex-masthead-mobile-menu__back-item"
-                        @click="{{handleBackToMenuItems}}"
-                        label="{{_clickedItem.innerText}}"
-                        type="Button"
-                        has-border
-                        icon-start
-                        back-to-nav>
-                    </udex-masthead-menu-item>
+                    {{#if _hideExploreSapBtn}}
+                        <udex-masthead-menu-item
+                            class="udex-masthead-mobile-menu__back-item"
+                            @click="{{handleExploreBackToMenuItems}}"
+                            label="{{_clickedItem.innerText}}"
+                            type="Button"
+                            has-border
+                            icon-start
+                            is-explore-back>
+                        </udex-masthead-menu-item>
+                    {{else}}
+                        {{#if isNotMultipleMode}}
+                            <udex-masthead-menu-item
+                                class="udex-masthead-mobile-menu__heading"
+                                label="{{_clickedItem.innerText}}"
+                                type="Heading"
+                                has-border>
+                            </udex-masthead-menu-item>
+                        {{else}}
+                            <udex-masthead-menu-item
+                                class="udex-masthead-mobile-menu__back-item"
+                                @click="{{handleBackToMenuItems}}"
+                                label="{{_clickedItem.innerText}}"
+                                type="Button"
+                                has-border
+                                icon-start
+                                is-back-to-nav>
+                            </udex-masthead-menu-item>
+                        {{/if}}
+                    {{/if}}
                 </li>
                 {{>categories}}
             {{/if}}
@@ -32,7 +53,7 @@
                         type="Button"
                         has-border
                         icon-start
-                        back-to-categories>
+                        is-back-to-categories>
                     </udex-masthead-menu-item>
                 </li>
                 {{>category-items}}
@@ -69,6 +90,7 @@
                 </udex-masthead-menu-item>
             {{else}}
                 <udex-masthead-menu-item
+                    @click="{{../handleMobileItemEvent}}"
                     url="{{this.href}}"
                     label="{{this.innerText}}"
                     has-border>
@@ -84,6 +106,7 @@
             <udex-masthead-menu-item
                 url="{{_clickedItem.href}}"
                 label="{{overviewLinkText}}"
+                @click="{{handleMobileItemEvent}}"
                 has-border>
             </udex-masthead-menu-item>
         </li>
@@ -106,6 +129,7 @@
             {{#each this.items}}
                 <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
                     <udex-masthead-menu-item
+                        @click="{{../handleMobileItemEvent}}"
                         url="{{this.url}}"
                         label="{{this.title}}"
                         has-border>
@@ -120,6 +144,7 @@
     {{#if _category.url}}
         <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
             <udex-masthead-menu-item
+                @click="{{../handleMobileItemEvent}}"
                 url="{{this._category.url}}"
                 label="{{overviewLinkText}}"
                 has-border>
@@ -129,6 +154,7 @@
     {{#each _category.items}}
         <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
             <udex-masthead-menu-item
+                @click="{{../handleMobileItemEvent}}"
                 label="{{this.title}}"
                 url="{{this.url}}"
                 has-border>