@sapudex/web-components 0.192.4 → 0.224.0

package/src/MastheadItem.ts

@@ -16,12 +16,11 @@ import UDExAvatar from "./Avatar.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import UDExMastheadShell from "./MastheadShell.js";
 import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
-
+import { Target } from "./types/common.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
 
-const breakpointSizeM: number = 1279;
-
 export interface IMastheadItem {
   text?: string;
   selected?: boolean;
@@ -52,13 +51,6 @@ export type ItemClickEventDetail = {
   item: UDExMastheadItem,
 }
 
-export enum Target {
-  _blank = "_blank",
-  _parent = "_parent",
-  _self = "_self",
-  _top = "_top",
-}
-
 /**
  * @class
  *
@@ -70,7 +62,7 @@ export enum Target {
  * For the <code>udex-masthead-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MastheadItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/MastheadItem.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -112,7 +104,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     subItems!: string;
 
   /**
@@ -121,7 +113,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     menuTitle!: string;
 
   /**
@@ -130,7 +122,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @public
    * @default ""
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     text!: string;
 
   /**
@@ -142,15 +134,42 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @property({ type: Boolean })
     selected!: boolean;
 
+  /**
+   * Defines if the arrow icon is hidden.
+   *
+   * @public
+   * @default false
+   */
+  @property({ type: Boolean })
+    hideArrowIcon!: boolean;
+
   /**
    * Defines the icon in the item.
    *
    * @public
    * @default ""
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     icon!: string;
 
+  /**
+   * Defines the image in the item.
+   *
+   * @public
+   * @default ""
+   */
+  @property({ type: String })
+    image!: string;
+
+  /**
+   * Defines an alt text for item image
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    imageAlt!: string;
+
   /**
    * Defines the href of the item.
    *
@@ -191,8 +210,8 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    iconAlt?: string;
+  @property({ type: String })
+    iconAlt!: string;
 
   /**
    * Hide active border for item
@@ -201,7 +220,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @public
    */
   @property({ type: Boolean })
-    hideActiveBorder?: boolean;
+    hideActiveBorder!: boolean;
 
   /**
    * Defines direction of the text.
@@ -209,7 +228,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @private
    */
   @property({ type: String })
-    _direction?: string;
+    _direction!: string;
 
   /**
    * Defines the mobile mode for component
@@ -243,7 +262,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExMastheadItem.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExMastheadItem.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onEnterDOM(): void {
@@ -262,10 +281,12 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleFocusout(e: FocusEvent): void {
-    const eTarget = e.relatedTarget as HTMLElement;
-    const focusedAvatarItem = eTarget?.shadowRoot?.querySelector("[ui5-avatar]");
+    if (e.relatedTarget === null) {
+      return;
+    }
 
-    if (!this.isMobile && (!this.isProfileBtn || eTarget === null || focusedAvatarItem)) {
+    const eTarget = e.target as HTMLElement;
+    if (!this.isMobile && eTarget.getAttribute("slot") === "dropdown") {
       this.closeDropdown();
     }
   }
@@ -295,7 +316,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleItemClick(e: Event): void {
-    this.selected = this.isMobile ? true : !this.selected;
+    this.handleSelectedChange();
 
     this.fireEvent<ItemClickEventDetail>("item-click", {
       item: this,
@@ -303,6 +324,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     });
   }
 
+  handleSelectedChange(): void {
+    this.selected = this.isMobile ? true : !this.selected;
+  }
+
   setDropdownInsetStart(): void {
     const dropdown = this.getDomElement(".udex-masthead-item__dropdown");
     if (dropdown) {
@@ -370,10 +395,11 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get additionalClass(): string {
-    const iconClass = this.icon ? "udex-masthead-item__button--icon" : "";
+    const iconClass = (this.icon || this.image) ? "udex-masthead-item__button--icon" : "";
     const profileClass = this.isProfileBtn ? "udex-masthead-item__button--profile" : "";
     const exploreClass = this.isExploreBtn ? "udex-masthead-item__button--explore" : "";
-    return `udex-masthead-item ${iconClass} ${profileClass} ${exploreClass}`.trim();
+    const countrySelectorClass = this.isCountrySelectorBtn ? "udex-masthead-item__button--country-selector" : "";
+    return `udex-masthead-item ${iconClass} ${profileClass} ${exploreClass} ${countrySelectorClass}`.trim();
   }
 
   get profileAvatar(): UDExAvatar {
@@ -427,7 +453,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get hasArrowDown(): boolean {
-    return this.hasDropdownSlot && !this.isProfileBtn && !this.icon.length;
+    return this.hasDropdownSlot && !this.isProfileBtn && !this.icon.length && !this.hideArrowIcon;
   }
 
   get isProfileBtn(): boolean {
@@ -438,6 +464,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.getAttribute("slot") === "exploreSAP";
   }
 
+  get isCountrySelectorBtn(): boolean {
+    return this.getAttribute("slot") === "countrySelector";
+  }
+
   get accessibleLabel(): string {
     return this.accessibleName || this.innerText || (this.isProfileBtn ? UDExMastheadItem.i18nBundle.getText(PROFILE) : "");
   }
@@ -447,7 +477,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get isMobile(): boolean {
-    return window.innerWidth < breakpointSizeM || this.mastheadShell?._isMobileMode;
+    return BreakpointUtils.isBelow("M") || this.mastheadShell?._isMobileMode;
   }
 
   get isTargetBlank(): boolean {

package/src/MastheadMenu.hbs

@@ -37,13 +37,17 @@
     <ul class="udex-masthead-menu__list" aria-labelledby="category-{{categoryId}}">
         {{#each this.items}}
             <li>
-                <udex-masthead-menu-item
-                    @click="{{../../../handleMenuItemClick}}"
-                    badge="{{this.badge}}"
-                    ?external-link="{{this.externalLink}}"
-                    url="{{this.url}}"
-                    label="{{this.title}}">
-                </udex-masthead-menu-item>
+                {{#if this.url}}
+                    <udex-masthead-menu-item
+                        @click="{{../../../handleMenuItemClick}}"
+                        badge="{{this.badge}}"
+                        ?external-link="{{this.externalLink}}"
+                        url="{{this.url}}"
+                        label="{{this.title}}">
+                    </udex-masthead-menu-item>
+                {{else}}
+                    <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
+                {{/if}}
             </li>
         {{/each}}
     </ul>

package/src/MastheadMenu.ts

@@ -9,6 +9,7 @@ import "@ui5/webcomponents-icons/dist/action.js";
 import { isUp, isDown } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExBadge from "./Badge.js";
 import UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import UDExDivider from "./Divider.js";
 import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
 
 // Styles
@@ -49,7 +50,7 @@ export type MenuItemClickEventDetail = {
  * For the <code>udex-masthead-menu</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MastheadMenu.js";</code>
+ * <code>import "@sapudex/web-components/dist/MastheadMenu.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -60,7 +61,7 @@ export type MenuItemClickEventDetail = {
   renderer: litRender,
   styles: MastheadMenuCss,
   template: MastheadMenuTemplate,
-  dependencies: [Icon, UDExBadge, UDExMastheadMenuItem],
+  dependencies: [Icon, UDExBadge, UDExMastheadMenuItem, UDExDivider],
 })
 
 /**

package/src/MastheadMenuItem.hbs

@@ -1,28 +1,29 @@
 {{#if isActive}}
-    {{#if externalLink}}
-        <span
-            id="new-win-desc"
-            class="udex-masthead-hidden-text">
-            {{openInNewWindowText}}
-        </span>
-    {{/if}}
     <a
         class="udex-masthead-menu-item {{rootClass}}"
         aria-describedby="{{ariaDescribedby}}"
         role="{{accessibleRoleText}}"
         href="{{url}}"
         part="{{partAttr}}"
-        target="{{target}}">
+        target="{{targetLink}}"
+        tabindex="{{_tabIndex}}">
         {{#if iconStart}}
             {{>arrow-left}}
         {{/if}}
-        <span class={{labelClass}}>
+        <span class="{{labelClass}}">
            {{>label}}
         </span>
         {{#if iconEnd}}
             {{>arrow-right}}
         {{/if}}
     </a>
+    {{#if externalLink}}
+        <span
+            id="new-win-desc"
+            class="udex-masthead-hidden-text">
+            {{openInNewWindowText}}
+        </span>
+    {{/if}}
     {{#if badge}}
         <udex-badge
             part="badge"
@@ -39,7 +40,9 @@
             _id="{{id}}"
             class="udex-masthead-menu-item {{rootClass}}"
             part="menu-item-button"
-            role="button">
+            aria-haspopup="{{ariaHasPopup}}"
+            role="button"
+            tabindex="{{_tabIndex}}">
             {{#if iconStart}}
                 {{>arrow-left}}
             {{/if}}

package/src/MastheadMenuItem.ts

@@ -6,9 +6,11 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.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/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 MastheadMenuItemTemplate from "./generated/templates/MastheadMenuItemTemplate.lit.js";
 
@@ -20,11 +22,6 @@ export enum ItemType {
   Button = "Button",
   Link = "Link"
 }
-
-export enum Target {
-  _blank = "_blank",
-  _self = "_self",
-}
 /**
  * @class
  *
@@ -36,7 +33,7 @@ export enum Target {
  * For the <code>udex-masthead-menu-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MastheadMenuItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/MastheadMenuItem.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -137,27 +134,60 @@ class UDExMastheadMenuItem extends UI5Element {
   @property({ type: Boolean })
     iconEnd?: boolean;
 
+  /**
+   * Defines the index for the item.
+   *
+   * @public
+   */
+  @property({ validator: Integer })
+    index!: number;
+
+  /**
+   * Defines the aria-haspopup attribute for the item.
+   *
+   * @public
+   */
+  @property({ type: String })
+    ariaHasPopup!: string;
+
+  /**
+   * Define the target of the item
+   * <b>Note:</b> Standard hyperlink behavior is supported.
+   * @public
+   */
+  @property({ type: Target, defaultValue: Target._self })
+    target!: `${Target}`;
+
+  /**
+   * Defines the tabindex attribute for the item.
+   *
+   * @private
+   */
+  @property({ type: String })
+    _tabIndex!: string;
+
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExMastheadMenuItem.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExMastheadMenuItem.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
-  onEnterDOM() {
+  onEnterDOM(): void {
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
   }
 
   get rootClass(): string {
-    const badgeClass = this.badge ? "udex-masthead-menu-item_badge" : "";
-    const rootClass = this.isHeadingType ? "udex-masthead-menu-item_is-header" : "udex-masthead-menu-item_is-list";
+    const prefixClass = "udex-masthead-menu-item";
+    const badgeClass = this.badge ? `${prefixClass}_badge` : "";
+    const rootClass = this.isHeadingType ? `${prefixClass}_is-header` : `${prefixClass}_is-list`;
     return `${rootClass} ${badgeClass}`;
   }
 
   get labelClass(): string {
     const root = "udex-masthead-menu-item__label";
-    return this.externalLink ? `${root} udex-masthead-menu-item__label_with-icon` : `${root}`;
+    return this.externalLink ? `${root} ${root}__label_with-icon` : `${root}`;
   }
 
   get isHeadingType(): boolean {
@@ -169,11 +199,14 @@ class UDExMastheadMenuItem extends UI5Element {
   }
 
   get isActive(): boolean {
-    return (this.type === ItemType.Link || !!this.url) && !this.isButtonType;
+    return !!this.url && !this.isButtonType;
   }
 
-  get target(): string {
-    return this.externalLink ? Target._blank : Target._self;
+  get targetLink(): string {
+    if (this.externalLink) {
+      return this.externalLink ? Target._blank : Target._self;
+    }
+    return this.target;
   }
 
   get lastWordOfLabel(): string | undefined {

package/src/MastheadMobileMenu.hbs

@@ -1,11 +1,11 @@
-<nav class="udex-masthead-mobile-menu" @keydown="{{handleKeyDown}}">
+<nav class="udex-masthead-mobile-menu">
     <div class="udex-masthead-mobile-menu__nav-holder">
         {{#if hasSearchSlot}}
             <div class="udex-masthead-mobile-menu__list-search">
                 <slot name="search"></slot>
             </div>
         {{/if}}
-        <ul class="udex-masthead-mobile-menu__list" role="menu">
+        <ul class="udex-masthead-mobile-menu__list" role="menu" @keydown="{{handlePressKey}}">
             {{#if showNavigation}}
                 {{>nav-items}}
             {{/if}}
@@ -65,12 +65,13 @@
             class="udex-masthead-mobile-menu__explore-btn"
             id="{{exploreItem._id}}"
             @click="{{handleExploreSapClick}}"
+            @keydown="{{handleLeftRightKeys}}"
             accessible-role="button"
             type="Button"
             first-level
             icon-end
             is-explore
-            label={{exploreItem.innerText}}>
+            label="{{exploreItem.innerText}}">
         </udex-masthead-menu-item>
     {{/if}}
 </nav>
@@ -82,6 +83,7 @@
                 <udex-masthead-menu-item
                     @click="{{../handleMenuItemClick}}"
                     label="{{this.innerText}}"
+                    aria-has-popup="true"
                     id="{{this._id}}"
                     type="Button"
                     has-border
@@ -93,6 +95,7 @@
                     @click="{{../handleMobileItemEvent}}"
                     url="{{this.href}}"
                     label="{{this.innerText}}"
+                    target="{{this.target}}"
                     has-border>
                 </udex-masthead-menu-item>
             {{/if}}
@@ -119,6 +122,7 @@
                     url="{{this.url}}"
                     id="{{@index}}"
                     label="{{this.category}}"
+                    aria-has-popup="true"
                     type="Button"
                     second-level
                     has-border
@@ -152,13 +156,15 @@
         </li>
     {{/if}}
     {{#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>
-            </udex-masthead-menu-item>
-        </li>
+        {{#if this.url}}
+            <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+                <udex-masthead-menu-item
+                    @click="{{../handleMobileItemEvent}}"
+                    label="{{this.title}}"
+                    url="{{this.url}}"
+                    has-border>
+                </udex-masthead-menu-item>
+            </li>
+        {{/if}}
     {{/each}}
 {{/inline}}