@sapudex/web-components 0.117.1 → 0.138.0

package/src/List.ts

@@ -40,7 +40,7 @@ export type UDExListItemBase = UDExListItem & UDExListGroupHeader;
  * For the <code>udex-list</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/List.js";</code>
+ * <code>import "@udex/web-components/dist/List.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -150,16 +150,16 @@ class UDExList extends UI5Element {
     UDExList.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
   }
 
-  onBeforeRendering() {
+  onBeforeRendering(): void {
     this.prepareListItemsMode();
   }
 
-  handleItemPress(e: CustomEvent) {
+  handleItemPress(e: CustomEvent): void {
     const clickedItem: UDExListItemBase = e.detail.item;
     this.onItemPress(clickedItem);
   }
 
-  handleKeyDown(e: KeyboardEvent) {
+  handleKeyDown(e: KeyboardEvent): void {
     this.handleUpArrow(e);
     this.handleDownArrow(e);
     this.handleHomeKey(e);
@@ -167,7 +167,7 @@ class UDExList extends UI5Element {
     this.handleEnterOrSpace(e);
   }
 
-  handleEnterOrSpace(e: KeyboardEvent) {
+  handleEnterOrSpace(e: KeyboardEvent): void {
     if (isEnter(e) || isSpace(e)) {
       e.preventDefault();
       const clickedItem = e.target as UDExListItemBase;
@@ -175,7 +175,7 @@ class UDExList extends UI5Element {
     }
   }
 
-  handleUpArrow(e: KeyboardEvent) {
+  handleUpArrow(e: KeyboardEvent): void {
     if (isUp(e)) {
       e.preventDefault();
       const items = this.getKeyboardNavigationItems();
@@ -206,13 +206,18 @@ class UDExList extends UI5Element {
         return;
       }
 
+      if (this.modeRadioGroup) {
+        items[currentSelectedIndex].selected = false;
+        items[previousSelectIndex].selected = true;
+      }
+
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
       this.setTabIndexByIndex(items, previousSelectIndex);
       items[previousSelectIndex].focus();
     }
   }
 
-  handleDownArrow(e: KeyboardEvent) {
+  handleDownArrow(e: KeyboardEvent): void {
     if (isDown(e)) {
       e.preventDefault();
       const items = this.getKeyboardNavigationItems();
@@ -235,13 +240,18 @@ class UDExList extends UI5Element {
         return;
       }
 
+      if (this.modeRadioGroup) {
+        items[currentSelectedIndex].selected = false;
+        items[nextSelectIndex].selected = true;
+      }
+
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
       this.setTabIndexByIndex(items, nextSelectIndex);
       items[nextSelectIndex].focus();
     }
   }
 
-  handleHomeKey(e: KeyboardEvent) {
+  handleHomeKey(e: KeyboardEvent): void {
     if (isHome(e)) {
       e.preventDefault();
       const items = this.getKeyboardNavigationItems();
@@ -264,25 +274,35 @@ class UDExList extends UI5Element {
         return;
       }
 
+      if (this.modeRadioGroup) {
+        items[currentSelectedIndex].selected = false;
+        items[0].selected = true;
+      }
+
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
       this.setTabIndexByIndex(items, 0);
       items[0].focus();
     }
   }
 
-  handleEndKey(e: KeyboardEvent) {
+  handleEndKey(e: KeyboardEvent): void {
     if (isEnd(e)) {
       e.preventDefault();
       const items = this.getKeyboardNavigationItems();
       const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);
 
+      if (this.modeRadioGroup) {
+        items[currentSelectedIndex].selected = false;
+        items[items.length - 1].selected = true;
+      }
+
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
       this.setTabIndexByIndex(items, items.length - 1);
       items[items.length - 1].focus();
     }
   }
 
-  onItemPress(clickedItem :UDExListItemBase) {
+  onItemPress(clickedItem :UDExListItemBase): void {
     if (this.modeSingleSelect && !this.controlled) {
       this.revertSelectedItems(this.getSelectedItems());
       clickedItem.selected = true;
@@ -305,7 +325,7 @@ class UDExList extends UI5Element {
     });
   }
 
-  revertSelectedItems(items: Array<UDExListItemBase>) {
+  revertSelectedItems(items: Array<UDExListItemBase>): void {
     items.forEach((item: UDExListItemBase) => {
       if (!item.disabled) {
         item.selected = false;
@@ -313,16 +333,16 @@ class UDExList extends UI5Element {
     });
   }
 
-  focusHeader(item: UDExListItemBase) {
+  focusHeader(item: UDExListItemBase): void {
     const header = item.shadowRoot?.querySelector(".udex-list__group-header") as HTMLElement;
     header.focus();
   }
 
-  unsetTabIndexByIndex(items: UDExListItemBase[], index: number) {
+  unsetTabIndexByIndex(items: UDExListItemBase[], index: number): void {
     items[index]._tabIndex = "-1";
   }
 
-  setTabIndexByIndex(items: UDExListItemBase[], index: number) {
+  setTabIndexByIndex(items: UDExListItemBase[], index: number): void {
     items[index]._tabIndex = "0";
   }
 
@@ -359,7 +379,7 @@ class UDExList extends UI5Element {
     return items;
   }
 
-  prepareListItemsMode() {
+  prepareListItemsMode(): void {
     this.getItemsFromList().forEach((item, index) => {
       item.mode = this.mode;
       item.controlled = this.controlled;
@@ -381,7 +401,7 @@ class UDExList extends UI5Element {
     return "-1";
   }
 
-  resetTabIndexes() {
+  resetTabIndexes(): void {
     this.getItemsFromList().forEach(item => {
       item._tabIndex = "-1";
     });
@@ -398,31 +418,31 @@ class UDExList extends UI5Element {
     return UDExList.i18nBundle.getText(ARIA_LABEL_LIST_MULTISELECTABLE);
   }
 
-  get ariaLabelledBy() {
+  get ariaLabelledBy(): string {
     return `${this._id}-mode-label`;
   }
 
-  get modeRadioGroup() {
+  get modeRadioGroup(): boolean {
     return this.mode === ListMode.RadioGroup;
   }
 
-  get modeMultiSelect() {
+  get modeMultiSelect(): boolean {
     return this.mode === ListMode.MultiSelect;
   }
 
-  get modeSingleSelect() {
+  get modeSingleSelect(): boolean {
     return this.mode === ListMode.SingleSelect;
   }
 
-  get modeSingleContent() {
+  get modeSingleContent(): boolean {
     return this.mode === ListMode.SingleContent;
   }
 
-  get modeSelected() {
+  get modeSelected(): boolean {
     return [ListMode.SingleSelect, ListMode.MultiSelect, ListMode.RadioGroup].includes(this.mode as ListMode);
   }
 
-  get holderHeight() {
+  get holderHeight(): string {
     return this.height ? this.height : "auto";
   }
 }

package/src/ListGroupHeader.ts

@@ -17,10 +17,10 @@ import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css.js";
  *
  * <h3>Usage</h3>
  *
- * For the <code>udex--list-group-header</code>
+ * For the <code>udex-list-group-header</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/ListGroupHeader.js";</code>
+ * <code>import "@udex/web-components/dist/ListGroupHeader.js";</code>
  *
  * @constructor
  * @author SAP SE

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()
@@ -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/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>

package/src/MastheadItem.hbs

@@ -7,19 +7,21 @@
         target="{{target}}"
         href="{{href}}"
         aria-labelledby="{{ariaLabelledBy}}"
-        aria-label="{{accessibleName}}">
+        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="{{accessibleName}}"
+        aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
-        @click="{{onClick}}">
+        @click="{{handleNavigationItemClick}}">
         {{> content}}
     </span>
     {{#if showDropdown}}
@@ -33,9 +35,9 @@
         aria-expanded="{{selected}}"
         aria-labelledby="{{ariaLabelledBy}}"
         aria-haspopup="{{hasDropdownSlot}}"
-        aria-label="{{accessibleName}}"
+        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";
@@ -18,6 +21,8 @@ import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
 
+const breakpointSizeM: number = 1279;
+
 export interface IMastheadItem {
   text?: string;
   selected?: boolean;
@@ -36,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
  *
@@ -76,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
@@ -164,7 +185,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @public
    */
   @property({ type: String, defaultValue: "" })
-    iconAlt?: string = "";
+    iconAlt?: string;
 
   /**
    * Hide active border for item
@@ -202,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("sap-ui-webcomponents-bundle");
+  }
 
   onEnterDOM() {
     if (isDesktop()) {
@@ -217,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) {
@@ -254,6 +274,15 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
   }
 
+  handleNavigationItemClick(e: Event): void {
+    this.selected = this.isMobile ? true : !this.selected;
+
+    this.fireEvent<ItemClickEventDetail>("item-click", {
+      item: this,
+      originalEvent: e,
+    });
+  }
+
   setDropdownInsetStart(): void {
     const dropdown = this.getDomElement(".udex-masthead-item__dropdown");
     if (dropdown) {
@@ -369,20 +398,24 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.hasDropdownSlot && !this.isProfileBtn && !this.icon.length;
   }
 
-  get isProfileBtn():boolean {
+  get isProfileBtn(): boolean {
     return this.getAttribute("slot") === "profile";
   }
 
-  get isExploreBtn():boolean {
+  get isExploreBtn(): boolean {
     return this.getAttribute("slot") === "exploreSAP";
   }
 
+  get accessibleLabel(): string {
+    return this.accessibleName || this.innerText || (this.isProfileBtn ? UDExMastheadItem.i18nBundle.getText(PROFILE) : "");
+  }
+
   get isMenuItem(): boolean {
     return true;
   }
 
   get isMobile(): boolean {
-    return window.innerWidth < 1279;
+    return window.innerWidth < breakpointSizeM;
   }
 }
 

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" : "";