@sapudex/web-components 0.226.0 → 2.1.0

package/src/MastheadMenuItem.ts

@@ -4,20 +4,21 @@ 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 { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import "@ui5/webcomponents-icons/dist/action.js";
+
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import { OPENS_IN_A_NEW_WINDOW } from "./generated/i18n/i18n-defaults.js";
-import { Target } from "./types/common.js";
+import { UDExTarget } from "./types/common.js";
 
 import MastheadMenuItemTemplate from "./generated/templates/MastheadMenuItemTemplate.lit.js";
 
 // Styles
 import MastheadMenuItemCss from "./generated/themes/MastheadMenuItem.css.js";
 
-export enum ItemType {
+export enum UDExItemType {
   Heading = "Heading",
   Button = "Button",
   Link = "Link"
@@ -55,8 +56,8 @@ class UDExMastheadMenuItem extends UI5Element {
    * @default "Link"
    * @public
    */
-  @property({ type: ItemType, defaultValue: ItemType.Link })
-    type!: `${ItemType}`;
+  @property()
+    type: `${UDExItemType}` = UDExItemType.Link;
 
   /**
    * Controls the ARIA role of the item
@@ -139,7 +140,7 @@ class UDExMastheadMenuItem extends UI5Element {
    *
    * @public
    */
-  @property({ validator: Integer })
+  @property({ type: Number })
     index!: number;
 
   /**
@@ -154,9 +155,10 @@ class UDExMastheadMenuItem extends UI5Element {
    * Define the target of the item
    * <b>Note:</b> Standard hyperlink behavior is supported.
    * @public
+   * @default "_self"
    */
-  @property({ type: Target, defaultValue: Target._self })
-    target!: `${Target}`;
+  @property()
+    target: `${UDExTarget}` = UDExTarget._self;
 
   /**
    * Defines the tabindex attribute for the item.
@@ -166,12 +168,9 @@ class UDExMastheadMenuItem extends UI5Element {
   @property({ type: String })
     _tabIndex!: string;
 
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  static async onDefine(): Promise<void> {
-    UDExMastheadMenuItem.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   onEnterDOM(): void {
     if (isDesktop()) {
       this.setAttribute("desktop", "");
@@ -191,11 +190,11 @@ class UDExMastheadMenuItem extends UI5Element {
   }
 
   get isHeadingType(): boolean {
-    return this.type === ItemType.Heading;
+    return this.type === UDExItemType.Heading;
   }
 
   get isButtonType(): boolean {
-    return this.type === ItemType.Button;
+    return this.type === UDExItemType.Button;
   }
 
   get isActive(): boolean {
@@ -204,7 +203,7 @@ class UDExMastheadMenuItem extends UI5Element {
 
   get targetLink(): string {
     if (this.externalLink) {
-      return this.externalLink ? Target._blank : Target._self;
+      return this.externalLink ? UDExTarget._blank : UDExTarget._self;
     }
     return this.target;
   }

package/src/MastheadMobileMenu.ts

@@ -3,14 +3,15 @@ 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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   isUp, isDown, isRight, isLeft, isHome, isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import UDExMastheadItem, { MenuItem, SubMenuLinkItem } from "./MastheadItem.js";
-import UDExMastheadMenuItem, { ItemType } from "./MastheadMenuItem.js";
+import type { MenuItem, SubMenuLinkItem } from "./MastheadItem.js";
+import type UDExMastheadItem from "./MastheadItem.js";
+import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
 import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
 
 import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenuTemplate.lit.js";
@@ -18,11 +19,15 @@ import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenu
 // Styles
 import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js";
 
-export type MobileItemClickEventDetail = {
+type UDExMastheadMobileMenuItemClickEventDetail = {
+  originalEvent: PointerEvent | KeyboardEvent,
+  item: UDExMastheadMenuItem,
   category?: string,
   isMobile: boolean,
-  originalEvent: Event,
-  item: UDExMastheadMenuItem,
+}
+
+type UDExMastheadMobileMenuExploreClickEventDetail = {
+  originalEvent: PointerEvent | KeyboardEvent,
 }
 
 /**
@@ -56,16 +61,7 @@ export type MobileItemClickEventDetail = {
  * @allowPreventDefault
  * @public
  */
-@event("item-click", {
-  detail: {
-    item: {
-      type: HTMLElement,
-    },
-    originalEvent: {
-      type: Event,
-    },
-  },
-})
+@event("item-click", { cancelable: true, bubbles: false })
 
 /**
  * Fires when explorer menu button is clicked
@@ -73,15 +69,13 @@ export type MobileItemClickEventDetail = {
  * @allowPreventDefault
  * @public
  */
-@event("explorer-menu-click", {
-  detail: {
-    originalEvent: {
-      type: Event,
-    },
-  },
-})
+@event("explorer-menu-click", { bubbles: true })
 
 class UDExMastheadMobileMenu extends UI5Element {
+  eventDetails!: {
+    "item-click": UDExMastheadMobileMenuItemClickEventDetail,
+    "explorer-menu-click": UDExMastheadMobileMenuExploreClickEventDetail,
+  };
   /**
    * Slot for search
    *
@@ -120,6 +114,9 @@ class UDExMastheadMobileMenu extends UI5Element {
   @property({ type: String })
     _direction?: string;
 
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
   _clickedItem!: UDExMastheadItem;
   _categories!: Array<SubMenuLinkItem>;
   _category!: SubMenuLinkItem;
@@ -127,19 +124,13 @@ class UDExMastheadMobileMenu extends UI5Element {
   _shouldFocusExploreBtn!: boolean;
   _focusedItemIndex!: number;
 
-  static i18nBundle: I18nBundle;
-
-  static async onDefine(): Promise<void> {
-    UDExMastheadMobileMenu.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   onAfterRendering() {
     this.handleMenuMode();
     this.setTabIndexForItems();
     this.handleFocusItem();
   }
 
-  handleMenuItemClick(e: Event) {
+  handleMenuItemClick(e: PointerEvent) {
     e.preventDefault();
     e.stopPropagation();
     const item = this.getClickedItem(e.target as UDExMastheadItem);
@@ -148,7 +139,7 @@ class UDExMastheadMobileMenu extends UI5Element {
     this.fireMobileItemEvent(e);
   }
 
-  handleMenuCategoryClick(e: Event) {
+  handleMenuCategoryClick(e: PointerEvent) {
     e.preventDefault();
     e.stopPropagation();
     this.openCategoryItems(e);
@@ -156,28 +147,28 @@ class UDExMastheadMobileMenu extends UI5Element {
     this.fireMobileItemEvent(e);
   }
 
-  handleExploreSapClick(e: Event) {
+  handleExploreSapClick(e: PointerEvent) {
     e.preventDefault();
     this.openExploreSapMenu(e);
     this.setFocusItemByIndex(0);
-    this.fireEvent("explorer-menu-click", { originalEvent: e });
+    this.fireDecoratorEvent("explorer-menu-click", { originalEvent: e });
   }
 
-  handleBackToMenuItems(e: Event) {
+  handleBackToMenuItems(e: PointerEvent) {
     e.stopPropagation();
     this.showFirstLevelMenu();
     this.setFocusItemByIndex(this.items.indexOf(this._clickedItem));
     this.fireMobileItemEvent(e);
   }
 
-  handleBackToCategories(e: Event) {
+  handleBackToCategories(e: PointerEvent) {
     e.stopPropagation();
     this.showCategories();
     this.setFocusItemByIndex(this._category.index + 1);
     this.fireMobileItemEvent(e);
   }
 
-  handleExploreBackToMenuItems(e: Event) {
+  handleExploreBackToMenuItems(e: PointerEvent) {
     e.stopPropagation();
     this.showFirstLevelMenu();
     this.setFocusExploreBtn();
@@ -242,7 +233,7 @@ class UDExMastheadMobileMenu extends UI5Element {
     }
   }
 
-  handleMobileItemEvent(e: Event) {
+  handleMobileItemEvent(e: PointerEvent) {
     e.stopPropagation();
     this.fireMobileItemEvent(e);
   }
@@ -334,7 +325,7 @@ class UDExMastheadMobileMenu extends UI5Element {
     const currentItem = this.getListItemByIndex(currentIndex);
     let prevItem = this.getListItemByIndex(previousIndex);
 
-    if (prevItem.type === ItemType.Heading) {
+    if (prevItem.type === UDExItemType.Heading) {
       prevItem = this.getListItemByIndex(lastIndex);
     }
 
@@ -350,7 +341,7 @@ class UDExMastheadMobileMenu extends UI5Element {
     const currentItem = this.getListItemByIndex(currentIndex);
     let nextItem = this.getListItemByIndex(nextIndex);
 
-    if (nextItem.type === ItemType.Heading) {
+    if (nextItem.type === UDExItemType.Heading) {
       nextItem = this.getListItemByIndex(nextIndex + 1);
     }
 
@@ -379,7 +370,7 @@ class UDExMastheadMobileMenu extends UI5Element {
       const currentIndex = this.getCurrentIndex(e.target as UDExMastheadMenuItem);
       const currentItem = this.getListItemByIndex(currentIndex);
       const firstItem = this.getListItemByIndex(0);
-      const focusedIndex = firstItem.type === ItemType.Heading ? 1 : 0;
+      const focusedIndex = firstItem.type === UDExItemType.Heading ? 1 : 0;
 
       currentItem._tabIndex = "-1";
       this.getListItemByIndex(focusedIndex)._tabIndex = "0";
@@ -419,13 +410,13 @@ class UDExMastheadMobileMenu extends UI5Element {
     this._showCategoryItems = false;
   }
 
-  fireMobileItemEvent(e: Event, category?: string) {
-    this.fireEvent<MobileItemClickEventDetail>("item-click", {
-      ...(category && { category }),
+  fireMobileItemEvent(e: PointerEvent | KeyboardEvent, category?: string) {
+    this.fireDecoratorEvent("item-click", {
       isMobile: true,
       item: e.target as UDExMastheadMenuItem,
       originalEvent: e,
-    }, true, false);
+      ...(category && { category }),
+    });
   }
 
   setFocusItemByIndex(index: number) {
@@ -471,7 +462,7 @@ class UDExMastheadMobileMenu extends UI5Element {
         return;
       }
 
-      const isPrevItemHeading = this.navigationItems[index - 1]?.type === ItemType.Heading;
+      const isPrevItemHeading = this.navigationItems[index - 1]?.type === UDExItemType.Heading;
       item._tabIndex = isPrevItemHeading || index === 0 ? "0" : "-1";
     });
   }

package/src/MastheadProfileMenu.ts

@@ -2,14 +2,14 @@ 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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { LOGOUT } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import MastheadProfileMenuTemplate from "./generated/templates/MastheadProfileMenuTemplate.lit.js";
-import UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import type UDExMastheadMenuItem from "./MastheadMenuItem.js";
 
 // Styles
 import MastheadProfileMenuCss from "./generated/themes/MastheadProfileMenu.css.js";
@@ -22,13 +22,13 @@ interface UserData {
   avatarInitials?: string
 }
 
-export type LogoutClickEventDetail = {
-  originalEvent: Event,
+type UDExMastheadProfileMenuLogoutClickEventDetail = {
+  originalEvent: PointerEvent,
 }
 
-export type ProfileMenuItemClickEventDetail = {
+type UDExMastheadProfileMenuItemClickEventDetail = {
   item: UDExMastheadMenuItem,
-  originalEvent: Event,
+  originalEvent: PointerEvent,
 }
 
 /**
@@ -60,31 +60,20 @@ export type ProfileMenuItemClickEventDetail = {
  * Fired when use click Logout link
  * @public
  */
-@event("logout", {
-  detail: {
-    originalEvent: {
-      type: Event,
-    },
-  },
-})
+@event("logout", { bubbles: true })
 
 /**
  * Fires when profile menu item is clicked
  *
  * @public
  */
-@event("profile-item-click", {
-  detail: {
-    item: {
-      type: HTMLElement,
-    },
-    originalEvent: {
-      type: Event,
-    },
-  },
-})
+@event("profile-item-click", { bubbles: true })
 
 class UDExMastheadProfileMenu extends UI5Element {
+  eventDetails!: {
+    "logout": UDExMastheadProfileMenuLogoutClickEventDetail,
+    "profile-item-click": UDExMastheadProfileMenuItemClickEventDetail
+  };
   /**
    * Defines the object of link values
    *
@@ -128,14 +117,11 @@ class UDExMastheadProfileMenu extends UI5Element {
   @slot({ type: Node, "default": false })
     message!: Array<Node>;
 
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  static async onDefine(): Promise<void> {
-    UDExMastheadProfileMenu.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
-  handleUserLogoutItemClick(e: Event): void {
-    this.fireEvent<LogoutClickEventDetail>("logout", {
+  handleUserLogoutItemClick(e: PointerEvent): void {
+    this.fireDecoratorEvent("logout", {
       originalEvent: e,
     });
   }
@@ -143,7 +129,7 @@ class UDExMastheadProfileMenu extends UI5Element {
   handleProfileMenuItemClick(e: CustomEvent): void {
     const { item, originalEvent } = e.detail;
 
-    this.fireEvent<ProfileMenuItemClickEventDetail>("profile-item-click", {
+    this.fireDecoratorEvent("profile-item-click", {
       item,
       originalEvent,
     });
@@ -168,7 +154,7 @@ class UDExMastheadProfileMenu extends UI5Element {
   }
 
   get logoutLink(): boolean {
-    return !!this.logoutUrl.length;
+    return !!this.logoutUrl?.length;
   }
 
   get logoutText(): string {