@sapudex/web-components 2.57.0 → 2.58.0

package/src/MastheadMobileMenuTemplate.tsx

@@ -0,0 +1,274 @@
+import UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import type UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
+import type { CategoryItem, SubMenuLinkItem } from "./MastheadItem.js";
+
+export default function MastheadMobileMenuTemplate(this: UDExMastheadMobileMenu) {
+  return (
+    <nav class="udex-masthead-mobile-menu">
+      <div class="udex-masthead-mobile-menu__nav-holder">
+        {this.hasSearchSlot && (
+          <div class="udex-masthead-mobile-menu__list-search">
+            <slot name="search"></slot>
+          </div>
+        )}
+        <ul class="udex-masthead-mobile-menu__list" role="menu" onKeyDown={this.handlePressKey}>
+          {this.showNavigation && navItems.call(this)}
+          {this._showCategories && (
+            <>
+              <li class="udex-masthead-mobile-menu__list-item" role="none">
+                {this._hideExploreSapBtn ? (
+                  <UDExMastheadMenuItem
+                    class="udex-masthead-mobile-menu__back-item"
+                    part="menu-item"
+                    type="Button"
+                    onClick={this.handleExploreBackToMenuItems as any}
+                    label={this._clickedItem.innerText}
+                    has-border={true}
+                    icon-start={true}
+                    {...{ "is-back": "", "is-explore-back": "" }}>
+                  </UDExMastheadMenuItem>
+                ) : this.isNotMultipleMode ? (
+                  <UDExMastheadMenuItem
+                    class="udex-masthead-mobile-menu__heading"
+                    part="menu-item"
+                    type="Heading"
+                    label={this._clickedItem.innerText}
+                    has-border={true}>
+                  </UDExMastheadMenuItem>
+                ) : (
+                  <UDExMastheadMenuItem
+                    class="udex-masthead-mobile-menu__back-item"
+                    part="menu-item"
+                    aria-haspopup="true"
+                    type="Button"
+                    onClick={this.handleBackToMenuItems as any}
+                    label={this._clickedItem.innerText}
+                    has-border={true}
+                    icon-start={true}
+                    {...{ "is-back": "", "is-back-to-nav": "" }}>
+                  </UDExMastheadMenuItem>
+                )}
+              </li>
+              {categories.call(this)}
+            </>
+          )}
+          {this._showCategoryItems && (
+            <>
+              <li class="udex-masthead-mobile-menu__list-item" role="none">
+                <UDExMastheadMenuItem
+                  class="udex-masthead-mobile-menu__back-item"
+                  part="menu-item"
+                  type="Button"
+                  aria-haspopup="true"
+                  onClick={this.handleBackToCategories as any}
+                  label={this._category.category}
+                  has-border={true}
+                  icon-start={true}
+                  {...{ "is-back": "", "is-back-to-categories": "" }}>
+                </UDExMastheadMenuItem>
+              </li>
+              {categoryItems.call(this)}
+            </>
+          )}
+        </ul>
+      </div>
+      {this.showExploreBtn && (
+        <UDExMastheadMenuItem
+          class="udex-masthead-mobile-menu__explore-btn"
+          part="menu-item"
+          type="Button"
+          aria-haspopup="true"
+          id={this.exploreItem._id}
+          onClick={this.handleExploreSapClick as any}
+          icon-end={true}
+          label={this.exploreItem.innerText}
+          {...{
+            "accessible-role-text": "button",
+            "first-level-btn": "",
+            "first-level": "",
+            "is-explore": "",
+          }}>
+        </UDExMastheadMenuItem>
+      )}
+    </nav>
+  );
+}
+
+function navItems(this: UDExMastheadMobileMenu) {
+  return this.items.map((item, index) => (
+    <li class="udex-masthead-mobile-menu__list-item" role="none" key={index}>
+      {item.subItems ? (
+        <UDExMastheadMenuItem
+          part="menu-item"
+          type="Button"
+          aria-haspopup="true"
+          onClick={this.handleMenuItemClick as any}
+          label={item.innerText}
+          id={item._id}
+          has-border={true}
+          icon-end={true}
+          {...{ "first-level-btn": "", "first-level": "" }}>
+        </UDExMastheadMenuItem>
+      ) : (
+        <UDExMastheadMenuItem
+          part="menu-item"
+          onClick={this.handleMobileItemEvent as any}
+          url={item.href}
+          label={item.innerText}
+          target={item.target}
+          has-border={true}
+          {...{ "first-level": "" }}>
+        </UDExMastheadMenuItem>
+      )}
+    </li>
+  ));
+}
+
+function categories(this: UDExMastheadMobileMenu) {
+  return (
+    <>
+      {this._clickedItem.href && (
+        <li class="udex-masthead-mobile-menu__list-item" role="none">
+          <UDExMastheadMenuItem
+            part="menu-item"
+            url={this._clickedItem.href}
+            label={this.overviewLinkText}
+            onClick={this.handleMobileItemEvent as any}
+            has-border={true}
+            {...{ "second-level": "" }}>
+          </UDExMastheadMenuItem>
+        </li>
+      )}
+      {this._categories.map((category, index) => categoryEntry.call(this, category, index))}
+    </>
+  );
+}
+
+function categoryEntry(this: UDExMastheadMobileMenu, category: SubMenuLinkItem, index: number) {
+  if (category.items.length) {
+    if (category.category) {
+      return (
+        <li class="udex-masthead-mobile-menu__list-item" role="none" key={index}>
+          <UDExMastheadMenuItem
+            part="menu-item"
+            onClick={this.handleMenuCategoryClick as any}
+            id={`${index}`}
+            label={category.category}
+            aria-haspopup="true"
+            type="Button"
+            has-border={true}
+            icon-end={true}
+            {...{ "second-level-btn": "", "second-level": "" }}>
+          </UDExMastheadMenuItem>
+        </li>
+      );
+    }
+
+    return category.items.map((item, itemIndex) => (
+      <li class="udex-masthead-mobile-menu__list-item" role="none" key={`${index}-${itemIndex}`}>
+        <UDExMastheadMenuItem
+          part="menu-item"
+          onClick={this.handleMobileItemEvent as any}
+          url={item.url}
+          label={item.title}
+          has-border={true}
+          {...{ "second-level": "" }}>
+        </UDExMastheadMenuItem>
+      </li>
+    ));
+  }
+
+  return (
+    <li class="udex-masthead-mobile-menu__list-item" role="none" key={index}>
+      {category.url ? (
+        <UDExMastheadMenuItem
+          id={`${index}`}
+          onClick={this.handleMobileItemEvent as any}
+          label={category.category}
+          url={category.url}
+          part="menu-item"
+          type="Link"
+          has-border={true}
+          {...{ "second-level": "" }}>
+        </UDExMastheadMenuItem>
+      ) : (
+        <UDExMastheadMenuItem
+          id={`${index}`}
+          onClick={this.handleMobileItemEvent as any}
+          label={category.category}
+          part="menu-item"
+          type="Button"
+          has-border={true}
+          {...{ "second-level": "" }}>
+        </UDExMastheadMenuItem>
+      )}
+    </li>
+  );
+}
+
+function categoryItems(this: UDExMastheadMobileMenu) {
+  return (
+    <>
+      {this._category.url && (
+        <li class="udex-masthead-mobile-menu__list-item" role="none">
+          <UDExMastheadMenuItem
+            part="menu-item"
+            onClick={this.handleMobileCategoryItemEvent as any}
+            url={this._category.url}
+            label={this.overviewLinkText}
+            has-border={true}
+            {...{ "third-level": "" }}>
+          </UDExMastheadMenuItem>
+        </li>
+      )}
+      {this._category.items.map((item, index) => categoryItemEntry.call(this, item, index))}
+    </>
+  );
+}
+
+function categoryItemEntry(this: UDExMastheadMobileMenu, item: CategoryItem, index: number) {
+  if (item.subItems) {
+    return (
+      <li class="udex-masthead-mobile-menu__list-item" role="none" key={index}>
+        {item.url ? (
+          <UDExMastheadMenuItem
+            class="udex-masthead-mobile-menu__sub-category"
+            part="menu-item"
+            onClick={this.handleMobileCategoryItemEvent as any}
+            label={item.title}
+            url={item.url}
+            {...{ "third-level": "" }}>
+          </UDExMastheadMenuItem>
+        ) : (
+          <span class="udex-masthead-mobile-menu__sub-category">{item.title}</span>
+        )}
+        <ul class="udex-masthead-mobile-menu__sub-list" aria-label={item.title}>
+          {item.subItems.map((subItem, subIndex) => (subItem.url ? (
+            <li class="udex-masthead-mobile-menu__list-item" role="none" key={`${index}-${subIndex}`}>
+              <UDExMastheadMenuItem
+                part="menu-item"
+                onClick={this.handleMobileCategoryItemEvent as any}
+                label={subItem.title}
+                url={subItem.url}
+                {...{ "third-level": "" }}>
+              </UDExMastheadMenuItem>
+            </li>
+          ) : undefined))}
+        </ul>
+      </li>
+    );
+  }
+
+  return item.url ? (
+    <li class="udex-masthead-mobile-menu__list-item" role="none" key={index}>
+      <UDExMastheadMenuItem
+        part="menu-item"
+        onClick={this.handleMobileCategoryItemEvent as any}
+        label={item.title}
+        url={item.url}
+        has-border={true}
+        {...{ "third-level": "" }}>
+      </UDExMastheadMenuItem>
+    </li>
+  ) : undefined;
+}

package/src/MastheadProfileMenu.ts

@@ -4,7 +4,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -12,24 +12,19 @@ import {
   LOGOUT, SWITCH_ACCOUNT, BACK, OTHER_IDENTITIES, ADD_OR_REMOVE_ACCOUNT,
 } from "./generated/i18n/i18n-defaults.js";
 import { isEscape } from "@ui5/webcomponents-base/Keys.js";
-import UDExMastheadMenu from "./MastheadMenu.js";
-import UDExButton from "./Button.js";
-import UDExList from "./List.js";
-import UDExLink from "./Link.js";
-import UDExListItem from "./ListItem.js";
-import UDExMastheadMenuItem from "./MastheadMenuItem.js";
-import MastheadProfileMenuTemplate from "./generated/templates/MastheadProfileMenuTemplate.lit.js";
+import MastheadProfileMenuTemplate from "./MastheadProfileMenuTemplate.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
+import translate from "./utils/translate.js";
 import AnalyticsName from "./types/AnalyticsName.js";
-import type UDExMastheadShell from "./MastheadShell.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
-import "@ui5/webcomponents-icons/dist/action.js";
-import type { LinkClickEventDetail } from "@ui5/webcomponents/dist/Link.js";
+import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExStatusBadgeValueState from "./types/StatusBadgeValueState.js";
-import type { ResizeObserverCallback } from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
-import translate from "./utils/translate.js";
+import type UDExMastheadShell from "./MastheadShell.js";
+import type { LinkClickEventDetail } from "@ui5/webcomponents/dist/Link.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
+import type UDExButton from "./Button.js";
+import type UDExMastheadMenuItem from "./MastheadMenuItem.js";
 
 // Styles
 import MastheadProfileMenuCss from "./generated/themes/MastheadProfileMenu.css.js";
@@ -91,17 +86,9 @@ type UDExMastheadProfileMenuAddOrRemoveClickEventDetail = {
  */
 @customElement({
   tag: "udex-masthead-profile-menu",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [UDExMastheadMenu.styles, MastheadProfileMenuCss],
   template: MastheadProfileMenuTemplate,
-  dependencies: [
-    UDExMastheadMenuItem,
-    UDExMastheadMenu,
-    UDExListItem,
-    UDExButton,
-    UDExList,
-    UDExLink,
-  ],
 })
 
 /**

package/src/MastheadProfileMenuTemplate.tsx

@@ -0,0 +1,143 @@
+import actionIcon from "@ui5/webcomponents-icons/dist/action.js";
+import slimArrowRightIcon from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import UI5LinkDesign from "@ui5/webcomponents/types/LinkDesign.js";
+import UDExAvatar, { UDExAvatarSize } from "./Avatar.js";
+import UDExButton from "./Button.js";
+import UDExLink from "./Link.js";
+import UDExList from "./List.js";
+import UDExListItem from "./ListItem.js";
+import UDExMastheadMenu from "./MastheadMenu.js";
+import UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import { UDExListMode } from "./types/List.js";
+import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
+
+export default function MastheadProfileMenuTemplate(this: UDExMastheadProfileMenu) {
+  return (
+    <div onKeyDown={this.handleKeydown} class={this.rootClass}>
+      {this._openIdentities ? accountIdentities.call(this) : accountProfile.call(this)}
+    </div>
+  );
+}
+
+function accountProfile(this: UDExMastheadProfileMenu) {
+  return (
+    <>
+      {this.hasUserData && (
+        <div class="udex-masthead-profile-menu__header">
+          <UDExAvatar
+            aria-hidden="true"
+            size={UDExAvatarSize.L}
+            initials={this.userData.avatarInitials}
+            fallback-icon={this.userData.fallbackIcon}>
+            {this.userData.avatarUrl && (
+              <img src={this.userData.avatarUrl} alt="avatar" />
+            )}
+          </UDExAvatar>
+          <div>
+            <p class="udex-profile-menu__account-name">{this.userData.name}</p>
+            <p class="udex-profile-menu__account-email">{this.userData.email}</p>
+            {this.hasIdentities && (
+              <UDExButton
+                onClick={this.handleSwitcherClick}
+                class="udex-masthead-profile-menu__btn-switcher"
+                size={UDExButtonSize.Large}
+                end-icon={slimArrowRightIcon}
+                design={UDExButtonDesign.Invisible}>
+                {this.switcherAccountText}
+              </UDExButton>
+            )}
+          </div>
+        </div>
+      )}
+      {this.messageAvailable && (
+        <div class="udex-masthead-profile-menu__message">
+          <slot name="message"></slot>
+        </div>
+      )}
+      <div class="udex-masthead-profile-menu__content">
+        <div
+          class="udex-masthead-profile-menu__links"
+          onScroll={this.handleProfileMenuShadowVisible}>
+          <UDExMastheadMenu
+            exportparts="badge, menu-item"
+            part="menu"
+            sub-items={this.linksList}
+            onui5-menu-item-click={this.handleProfileMenuItemClick}
+            {...{ "_scroll-into-view": "Center" }}>
+          </UDExMastheadMenu>
+        </div>
+      </div>
+      {this.hasActionButton && (
+        <div class="udex-masthead-profile-menu__actions">
+          {this.hasLogoutButton ? (
+            <div class="udex-masthead-profile-menu__btn">
+              <slot name="logoutButton"></slot>
+            </div>
+          ) : (
+            <UDExLink
+              accessible-role="Link"
+              onClick={this.handleUserLogoutClick as any}
+              end-icon={actionIcon}
+              design={UI5LinkDesign.Default}
+              href={this.logoutUrl}>
+              {this.logoutText}
+            </UDExLink>
+          )}
+        </div>
+      )}
+    </>
+  );
+}
+
+function accountIdentities(this: UDExMastheadProfileMenu) {
+  return (
+    <>
+      <div class="udex-masthead-profile-menu__header-wrap back-btn">
+        <UDExMastheadMenuItem
+          type="Button"
+          class="udex-masthead-profile-menu__btn-back"
+          onClick={this.handleSwitcherClick}
+          label={this.btnBackText}
+          icon-start={true}>
+        </UDExMastheadMenuItem>
+        <span class="udex-masthead-profile-menu__switcher-title">{this.switcherAccountText}</span>
+      </div>
+      <span class="udex-masthead-profile-menu__identities-list-title">{this.listTitleText}</span>
+      <div class="udex-masthead-profile-menu__identities-list-wrap">
+        {this.identitiesList.length > 0 && (
+          <UDExList
+            class="udex-masthead-profile-menu__identities-list"
+            mode={UDExListMode.SingleSelect}
+            accessible-name={this.listTitleText}
+            onScroll={this.handleIdentitiesListShadowVisible}
+            controlled={true}
+            {...{ "_scroll-into-view": "Center" }}>
+            {this.identitiesList.map((identity, index) => (
+              <UDExListItem
+                key={index}
+                id={identity.idsUser}
+                class="udex-masthead-profile-menu__identities-list-item"
+                onui5-item-press={this.fireEventIdentityItemClick}
+                image-badge-state={identity.statusBadge}
+                image={identity.avatarUrl}
+                image-alt={identity.name}
+                {...{ "supporting-text": identity.supportingText }}>
+                {identity.email}
+              </UDExListItem>
+            ))}
+          </UDExList>
+        )}
+      </div>
+      <UDExButton
+        onClick={this.fireEventAddOrRemoveAccountClick as any}
+        class="udex-masthead-profile-menu__add-remove-btn"
+        design={UDExButtonDesign.Primary}
+        end-icon={actionIcon}
+        size={UDExButtonSize.Large}>
+        {this.addOrRemoveAccountText}
+      </UDExButton>
+    </>
+  );
+}

package/src/MastheadShell.ts

@@ -5,7 +5,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import type { DefaultSlot, Slot, ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import {
@@ -20,14 +20,13 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { MAIN_LINKS, SEARCH } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadItem, { UDExMastheadDropdownItemAction } from "./MastheadItem.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
-import UDExControlButton from "./ControlButton.js";
 import type UDExSearch from "./Search.js";
 import UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
 import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
 import type UDExMastheadCountrySelector from "./MastheadCountrySelector.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import AnalyticsName from "./types/AnalyticsName.js";
-import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.lit.js";
+import MastheadShellTemplate from "./MastheadShellTemplate.js";
 import translate from "./utils/translate.js";
 import ensureSearchBackdropStyles from "./utils/searchBackdrop.js";
 
@@ -82,12 +81,11 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
 @customElement({
   tag: "udex-masthead-shell",
   languageAware: true,
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: MastheadShellCss,
   template: MastheadShellTemplate,
   dependencies: [
     UDExMastheadMobileMenu,
-    UDExControlButton,
     UDExMastheadItem,
     UDExMastheadMenu,
     UI5Icon,