@sapudex/web-components 0.226.0 → 2.1.0

package/src/ListSelectAll.ts

@@ -1,21 +1,25 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.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 { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
-import { ListMode } from "./types/List.js";
+import { UDExListMode } from "./types/List.js";
 import { SELECT_ALL } from "./generated/i18n/i18n-defaults.js";
-import ListSelectAllTemplate from "./generated/templates/ListSelectAllTemplate.lit";
+import ListSelectAllTemplate from "./generated/templates/ListSelectAllTemplate.lit.js";
 import UDExListItem from "./ListItem.js";
 
 // Styles
-import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css";
+import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css.js";
 
 const selectAllClass: string = "udex-list__header-select-all";
 const groupListClass: string = "udex-list__group-list";
 
+type UDExListSelectAllSelectAllEventDetail = {
+  item: HTMLElement
+}
+
 /**
  * @class
  *
@@ -41,24 +45,21 @@ const groupListClass: string = "udex-list__group-list";
   dependencies: [UDExListItem],
 })
 
-@event("select-all", {
-  detail: {
-    item: { type: HTMLElement },
-  },
-})
+@event("select-all", { bubbles: true })
 
 class UDExListSelectAll extends UDExListGroupHeaderBase {
-  static i18nBundle: I18nBundle;
+  eventDetails!: {
+    "select-all": UDExListSelectAllSelectAllEventDetail,
+  };
 
-  static async onDefine(): Promise<void> {
-    UDExListSelectAll.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
 
   handleSelectAllPress() {
     if (!this.controlled) {
       this.handleSelectionGroupState();
     }
-    this.fireEvent("select-all", {
+    this.fireDecoratorEvent("select-all", {
       item: this,
     });
   }
@@ -82,8 +83,8 @@ class UDExListSelectAll extends UDExListGroupHeaderBase {
     return true;
   }
 
-  get multiselectMode(): ListMode {
-    return ListMode.MultiSelect;
+  get multiselectMode(): UDExListMode {
+    return UDExListMode.MultiSelect;
   }
 
   get selectAllLabel(): string {

package/src/MastheadCountrySelector.ts

@@ -2,7 +2,7 @@ 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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
@@ -17,7 +17,7 @@ import MastheadCountrySelectorTemplate from "./generated/templates/MastheadCount
 // Styles
 import MastheadCountrySelectorCss from "./generated/themes/MastheadCountrySelector.css.js";
 
-export type RegionItemClickEventDetail = {
+type UDExMastheadCountrySelectorRegionClickEventDetail = {
   item: {
     title: string,
     countries: Array<Country>,
@@ -25,7 +25,7 @@ export type RegionItemClickEventDetail = {
   originalEvent: Event,
 }
 
-export type CountryItemClickEventDetail = {
+type UDExMastheadCountrySelectorItemClickEventDetail = {
   item: {
     displayTitle: string,
     countryCode: string,
@@ -34,7 +34,7 @@ export type CountryItemClickEventDetail = {
   originalEvent: Event,
 }
 
-export type SearchEventDetail = {
+type UDExMastheadCountrySelectorSearchEventDetail = {
   value: string,
 }
 
@@ -79,45 +79,28 @@ export type Country = {
  *
  * @public
  */
-@event("region-item-click", {
-  detail: {
-    item: {
-      type: HTMLElement,
-    },
-    originalEvent: {
-      type: Event,
-    },
-  },
-})
+@event("region-item-click", { bubbles: true })
 
 /**
  * Fires when region item is clicked
  *
  * @public
  */
-@event("country-item-click", {
-  detail: {
-    item: {
-      type: HTMLElement,
-    },
-    originalEvent: {
-      type: Event,
-    },
-  },
-})
+@event("country-item-click", { bubbles: true })
 
 /**
  * Fired event when the user typed to search field.
  *
  * @public
  */
-@event("country-selector-search", {
-  detail: {
-    value: { type: String },
-  },
-})
+@event("country-selector-search", { bubbles: true })
 
 class UDExMastheadCountrySelector extends UI5Element {
+  eventDetails!: {
+    "country-item-click": UDExMastheadCountrySelectorItemClickEventDetail,
+    "country-selector-search": UDExMastheadCountrySelectorSearchEventDetail,
+    "region-item-click": UDExMastheadCountrySelectorRegionClickEventDetail
+  };
   /**
    * Defines title of the regions menu
    *
@@ -302,7 +285,7 @@ class UDExMastheadCountrySelector extends UI5Element {
     }
 
     this._shouldFocusBackBtn = false;
-    this.fireEvent<SearchEventDetail>("country-selector-search", {
+    this.fireDecoratorEvent("country-selector-search", {
       value: e.detail.value,
     });
     this.refreshRendering();
@@ -431,7 +414,7 @@ class UDExMastheadCountrySelector extends UI5Element {
   fireEventRegionItemClick(e: CustomEvent | KeyboardEvent): void {
     const { label } = e.target as UDExMastheadMenuItem;
 
-    this.fireEvent<RegionItemClickEventDetail>("region-item-click", {
+    this.fireDecoratorEvent("region-item-click", {
       item: {
         title: label,
         countries: this._activeRegion?.countries || [],
@@ -444,7 +427,7 @@ class UDExMastheadCountrySelector extends UI5Element {
     const item = e.target as UDExMastheadMenuItem;
     const { label, url } = item;
 
-    this.fireEvent<CountryItemClickEventDetail>("country-item-click", {
+    this.fireDecoratorEvent("country-item-click", {
       item: {
         displayTitle: label,
         countryCode: item.getAttribute("_country-code") || "",

package/src/MastheadItem.hbs

@@ -21,7 +21,6 @@
 {{else if isProfileBtn}}
     <span
         id="{{this._id}}"
-        role="combobox"
         class="udex-masthead-item__btn {{additionalClass}}"
         aria-expanded="{{selected}}"
         aria-describedby="{{ariaDescribedBy}}"
@@ -41,6 +40,7 @@
         id="{{this._id}}"
         class="udex-masthead-item__btn {{additionalClass}}"
         aria-expanded="{{selected}}"
+        aria-controls="{{this._id}}_dropdown"
         aria-describedby="{{ariaDescribedBy}}"
         aria-haspopup="{{hasDropdownSlot}}"
         aria-label="{{accessibleLabel}}"
@@ -59,7 +59,8 @@
             class="udex-masthead-item__icon"
             name="{{icon}}"
             show-tooltip="{{iconAlt}}"
-            accessible-name="{{iconAlt}}">
+            accessible-name="{{iconAlt}}"
+            mode="Decorative">
         </ui5-icon>
     {{else if image}}
         <img
@@ -72,7 +73,8 @@
             {{#if hasArrowDown}}
                  <ui5-icon
                      class="udex-masthead-item__dropdown-icon"
-                     name="slim-arrow-down">
+                     name="slim-arrow-down"
+                     mode="Decorative">
                 </ui5-icon>
             {{/if}}
         </span>

package/src/MastheadItem.ts

@@ -1,10 +1,10 @@
 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 i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/search.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
@@ -14,16 +14,17 @@ import {
   OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT,
 } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
-import UDExAvatar from "./Avatar.js";
+import type UDExAvatar from "./Avatar.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
-import UDExMastheadShell from "./MastheadShell.js";
+import type UDExMastheadShell from "./MastheadShell.js";
 import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
-import { Target } from "./types/common.js";
+import { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
+
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
 
-export enum DropdownItemAction {
+export enum UDExMastheadDropdownItemAction {
   Open = "Open",
   Close = "Close",
   ClickOutside = "Click Outside",
@@ -54,34 +55,16 @@ export type MenuItem = {
   subMenuLinkItems: SubMenuLinkItem[];
 };
 
-export type ItemClickEventDetail = {
-  originalEvent: Event,
+type UDExMastheadItemItemClickEventDetail = {
+  originalEvent: PointerEvent,
   item: UDExMastheadItem,
 }
 
-export type DropdownEventDetail = {
+export type UDExMastheadDropdownEventDetail = {
   title: string,
-  action: DropdownItemAction,
+  action: UDExMastheadDropdownItemAction,
 }
 
-export const DropdownBaseEventDetail = {
-  detail: {
-    title: { type: String },
-    action: { type: DropdownItemAction },
-  },
-};
-
-export const ItemBaseEvent = {
-  detail: {
-    item: {
-      type: HTMLElement,
-    },
-    originalEvent: {
-      type: Event,
-    },
-  },
-};
-
 /**
  * @class
  *
@@ -117,25 +100,30 @@ export const ItemBaseEvent = {
  * @allowPreventDefault
  * @public
  */
-@event("item-click", ItemBaseEvent)
+@event("item-click", { bubbles: true })
 
 /**
- * Fires when item is clicked
+ * Fires when dropdown is closed
  *
  * @allowPreventDefault
  * @public
  */
-@event("dropdown-closed", DropdownBaseEventDetail)
+@event("dropdown-closed", { bubbles: true })
 
 /**
- * Fires when item is clicked
+ * Fires when dropdown is opened
  *
  * @allowPreventDefault
  * @public
  */
-@event("dropdown-opened", DropdownBaseEventDetail)
+@event("dropdown-opened", { bubbles: true })
 
 class UDExMastheadItem extends UI5Element implements IMastheadItem {
+  eventDetails!: {
+    "item-click": UDExMastheadItemItemClickEventDetail,
+    "dropdown-closed": UDExMastheadDropdownEventDetail,
+    "dropdown-opened": UDExMastheadDropdownEventDetail,
+  };
   /**
    * Defines sub items for item
    *
@@ -143,7 +131,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @public
    */
   @property({ type: String })
-    subItems!: string;
+    subItems: string = "";
 
   /**
    * Defines a title for sub menu items
@@ -152,7 +140,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @public
    */
   @property({ type: String })
-    menuTitle!: string;
+    menuTitle: string = "";
 
   /**
    * Defines the text of item.
@@ -161,7 +149,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @default ""
    */
   @property({ type: String })
-    text!: string;
+    text: string = "";
 
   /**
    * Defines the selected item.
@@ -188,7 +176,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @default ""
    */
   @property({ type: String })
-    icon!: string;
+    icon: string = "";
 
   /**
    * Defines the image in the item.
@@ -221,26 +209,26 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * <b>Note:</b> Standard hyperlink behavior is supported.
    * @public
    */
-  @property({ type: Target, defaultValue: Target._self })
-    target!: Target;
+  @property()
+    target: UDExTarget = UDExTarget._self;
 
   /**
    * Controls the ARIA name of the item
    *
-   * @default ""
+   * @default undefined
    * @public
    */
   @property({ type: String })
-    accessibleName!: string;
+    accessibleName?: string;
 
   /**
    * Controls the ARIA role of the item
    *
-   * @default ""
+   * @default undefined
    * @public
    */
   @property({ type: String })
-    accessibleRole!: string;
+    accessibleRole?: string;
 
   /**
    * Defines an alt text for item icon
@@ -249,7 +237,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @public
    */
   @property({ type: String })
-    iconAlt!: string;
+    iconAlt: string = "";
 
   /**
    * Hide active border for item
@@ -294,16 +282,13 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @slot({ type: HTMLElement, "default": true })
     content?: Array<HTMLElement>;
 
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
   _profileAvatar!: UDExAvatar;
   _mastheadShell!: UDExMastheadShell;
   _isEscPress!: boolean;
 
-  static i18nBundle: I18nBundle;
-
-  static async onDefine(): Promise<void> {
-    UDExMastheadItem.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   onEnterDOM(): void {
     if (isDesktop()) {
       this.setAttribute("desktop", "");
@@ -328,7 +313,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
       const item = target.closest("[udex-masthead-item]");
       if (item !== this && !this.isMobile) {
         if (this.isDropdownOpened) {
-          this.fireDropdownCloseEvent(this.eventItemTitle, DropdownItemAction.ClickOutside);
+          this.fireDropdownCloseEvent(this.eventItemTitle, UDExMastheadDropdownItemAction.ClickOutside);
         }
 
         this.selected = false;
@@ -368,14 +353,14 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleKeyEscapeMobile(): void {
-    this.fireDropdownCloseEvent(this.eventItemTitle, DropdownItemAction.Close);
+    this.fireDropdownCloseEvent(this.eventItemTitle, UDExMastheadDropdownItemAction.Close);
     this._mastheadShell.closeMobileMenu();
     this._mastheadShell.mobileBtn?.focus();
   }
 
-  handleItemClick(e: Event): void {
-    this.fireItemClickEvent(e);
+  handleItemClick(e: PointerEvent): void {
     this.handleSelectedChange();
+    this.fireItemClickEvent(e);
     this.fireDropdownEvents();
   }
 
@@ -385,7 +370,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   fireDropdownEvents(): void {
     if (this.hasDropdownSlot) {
-      const { Open, Close } = DropdownItemAction;
+      const { Open, Close } = UDExMastheadDropdownItemAction;
       const action = this.selected ? Open : Close;
       if (this.selected) {
         this.fireDropdownOpenEvent(this.eventItemTitle, action);
@@ -395,16 +380,16 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
   }
 
-  fireDropdownCloseEvent(title: string, action: DropdownItemAction): void {
-    this.fireEvent<DropdownEventDetail>("dropdown-closed", { title, action });
+  fireDropdownCloseEvent(title: string, action: UDExMastheadDropdownItemAction): void {
+    this.fireDecoratorEvent("dropdown-closed", { title, action });
   }
 
-  fireDropdownOpenEvent(title: string, action: DropdownItemAction): void {
-    this.fireEvent<DropdownEventDetail>("dropdown-opened", { title, action });
+  fireDropdownOpenEvent(title: string, action: UDExMastheadDropdownItemAction): void {
+    this.fireDecoratorEvent("dropdown-opened", { title, action });
   }
 
-  fireItemClickEvent(e: Event): void {
-    this.fireEvent<ItemClickEventDetail>("item-click", {
+  fireItemClickEvent(e: PointerEvent): void {
+    this.fireDecoratorEvent("item-click", {
       item: this,
       originalEvent: e,
     });
@@ -457,7 +442,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   closeDropdown(): void {
     this.selected = false;
-    this.fireDropdownCloseEvent(this.eventItemTitle, DropdownItemAction.Close);
+    this.fireDropdownCloseEvent(this.eventItemTitle, UDExMastheadDropdownItemAction.Close);
   }
 
   getDomElement(selector: string): HTMLElement | undefined | null {
@@ -498,7 +483,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get hasHref(): boolean {
-    return !!this.href.length;
+    return !!this.href?.length;
   }
 
   get accessibleRoleName(): string {
@@ -568,7 +553,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get isTargetBlank(): boolean {
-    return this.target === Target._blank;
+    return this.target === UDExTarget._blank;
   }
 
   get openInNewWindowText(): string {

package/src/MastheadMenu.ts

@@ -3,12 +3,12 @@ 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.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";
 import UDExBadge from "./Badge.js";
-import UDExMastheadMenuItem, { ItemType } from "./MastheadMenuItem.js";
+import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
 import UDExDivider from "./Divider.js";
 import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
 
@@ -34,9 +34,9 @@ export type MenuItem = {
   subMenuLinkItems: SubMenuLinkItem[];
 };
 
-export type MenuItemClickEventDetail = {
+type UDExMastheadMenuMenuItemClickEventDetail = {
   category?: string,
-  originalEvent: Event,
+  originalEvent: PointerEvent,
   item: UDExMastheadMenuItem,
 }
 
@@ -71,21 +71,12 @@ export type MenuItemClickEventDetail = {
  * @allowPreventDefault
  * @public
  */
-@event("menu-item-click", {
-  detail: {
-    category: {
-      type: String,
-    },
-    item: {
-      type: HTMLElement,
-    },
-    originalEvent: {
-      type: Event,
-    },
-  },
-})
+@event("menu-item-click", { bubbles: true })
 
 class UDExMastheadMenu extends UI5Element {
+  eventDetails!: {
+    "menu-item-click": UDExMastheadMenuMenuItemClickEventDetail
+  };
   /**
    * Defines a menu heading
    *
@@ -93,7 +84,7 @@ class UDExMastheadMenu extends UI5Element {
    * @public
    */
   @property({ type: String })
-    menuTitle!: string;
+    menuTitle: string = "";
 
   /**
    * List of the menu items
@@ -101,8 +92,8 @@ class UDExMastheadMenu extends UI5Element {
    * @default "[]"
    * @public
    */
-  @property({ type: String, defaultValue: "[]" })
-    subItems!: string;
+  @property({ type: String })
+    subItems: string = "[]";
 
   /**
    * Defines the mobile mode for component
@@ -133,16 +124,15 @@ class UDExMastheadMenu extends UI5Element {
     }
   }
 
-  handleMenuItemClick(e: Event): void {
+  handleMenuItemClick(e: PointerEvent): void {
     const item = e.target as UDExMastheadMenuItem;
     const { url, type } = item;
-
     if (url?.length) {
       const list = item.closest(".udex-masthead-menu__list") as HTMLElement;
-      this.fireEvent<MenuItemClickEventDetail>("menu-item-click", {
+      this.fireDecoratorEvent("menu-item-click", {
         item,
         originalEvent: e,
-        ...(type !== ItemType.Heading && { category: list?.getAttribute("category") || "" }),
+        ...(type !== UDExItemType.Heading && { category: list?.getAttribute("category") || "" }),
       });
     }
   }

package/src/MastheadMenuItem.hbs

@@ -73,7 +73,8 @@
             {{lastWordOfLabel}}
             <ui5-icon
                 class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-action"
-                name="action">
+                name="action"
+                mode="Decorative">
             </ui5-icon>
         </span>
     {{else}}
@@ -85,7 +86,8 @@
     <ui5-icon
         class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-left"
         name="slim-arrow-left"
-        part="left">
+        part="left"
+        mode="Decorative">
     </ui5-icon>
 {{/inline}}
 
@@ -93,6 +95,7 @@
     <ui5-icon
         class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-right"
         name="slim-arrow-right"
-        part="right">
+        part="right"
+        mode="Decorative">
     </ui5-icon>
 {{/inline}}