@sapudex/web-components 0.199.3 → 0.224.0

package/src/MastheadItem.hbs

@@ -1,11 +1,4 @@
 {{#if hasHref}}
-    {{#if isTargetBlank}}
-        <span
-            id="new-win-desc"
-            class="udex-masthead-hidden-text">
-            {{openInNewWindowText}}
-        </span>
-    {{/if}}
     <a
         id="{{this._id}}"
         class="{{additionalClass}}"
@@ -18,6 +11,13 @@
         @click="{{handleItemClick}}">
         {{> content}}
     </a>
+    {{#if isTargetBlank}}
+        <span
+            id="new-win-desc"
+            class="udex-masthead-hidden-text">
+            {{openInNewWindowText}}
+        </span>
+    {{/if}}
 {{else if isProfileBtn}}
     <span
         id="{{this._id}}"
@@ -55,14 +55,17 @@
 
 {{#*inline "content"}}
     {{#if icon}}
-        <span class="udex-masthead-item__icon-container">
-          <ui5-icon
-              class="udex-masthead-item__icon"
-              name="{{icon}}"
-              show-tooltip="{{iconAlt}}"
-              accessible-name="{{iconAlt}}">
-          </ui5-icon>
-        </span>
+        <ui5-icon
+            class="udex-masthead-item__icon"
+            name="{{icon}}"
+            show-tooltip="{{iconAlt}}"
+            accessible-name="{{iconAlt}}">
+        </ui5-icon>
+    {{else if image}}
+        <img
+            class="udex-masthead-item__image"
+            src="{{image}}"
+            alt="{{imageAlt}}"/>
     {{else}}
         <span class="udex-masthead-item__text">
             <slot></slot>

package/src/MastheadItem.ts

@@ -62,7 +62,7 @@ export type ItemClickEventDetail = {
  * 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
@@ -104,7 +104,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     subItems!: string;
 
   /**
@@ -113,7 +113,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     menuTitle!: string;
 
   /**
@@ -122,7 +122,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @public
    * @default ""
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     text!: string;
 
   /**
@@ -134,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.
    *
@@ -183,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
@@ -193,7 +220,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @public
    */
   @property({ type: Boolean })
-    hideActiveBorder?: boolean;
+    hideActiveBorder!: boolean;
 
   /**
    * Defines direction of the text.
@@ -201,7 +228,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @private
    */
   @property({ type: String })
-    _direction?: string;
+    _direction!: string;
 
   /**
    * Defines the mobile mode for component
@@ -235,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 {
@@ -254,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();
     }
   }
@@ -287,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,
@@ -295,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) {
@@ -362,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 {
@@ -419,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 {
@@ -430,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) : "");
   }

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="{{targetLink}}">
+        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,6 +6,7 @@ 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";
@@ -32,7 +33,7 @@ export enum ItemType {
  * 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
@@ -133,6 +134,22 @@ 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.
@@ -141,27 +158,36 @@ class UDExMastheadMenuItem extends UI5Element {
   @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 {
@@ -173,7 +199,7 @@ class UDExMastheadMenuItem extends UI5Element {
   }
 
   get isActive(): boolean {
-    return (this.type === ItemType.Link || !!this.url) && !this.isButtonType;
+    return !!this.url && !this.isButtonType;
   }
 
   get targetLink(): string {

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
@@ -120,6 +122,7 @@
                     url="{{this.url}}"
                     id="{{@index}}"
                     label="{{this.category}}"
+                    aria-has-popup="true"
                     type="Button"
                     second-level
                     has-border
@@ -153,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}}