@sapudex/web-components 2.57.0 → 2.58.0

package/src/MastheadItem.ts

@@ -7,21 +7,18 @@ 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";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { isEscape, isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
   OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT, SEARCH,
 } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
-import "@ui5/webcomponents-icons/dist/world.js";
 import type UDExAvatar from "./Avatar.js";
 import type UDExMastheadShell from "./MastheadShell.js";
 import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
 import type UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
-import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
+import MastheadItemTemplate from "./MastheadItemTemplate.js";
 import { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
@@ -94,7 +91,7 @@ type UDExMastheadDropdownEventDetail = {
  */
 @customElement({
   tag: "udex-masthead-item",
-  renderer: litRender,
+  renderer: jsxRenderer,
   languageAware: true,
   styles: MastheadItemCss,
   template: MastheadItemTemplate,

package/src/MastheadItemTemplate.tsx

@@ -0,0 +1,178 @@
+import type UDExMastheadItem from "./MastheadItem.js";
+import type { AriaRole } from "@ui5/webcomponents-base";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import UDExBadge from "./Badge.js";
+import arrowDownIcon from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import worldIcon from "@ui5/webcomponents-icons/dist/world.js";
+import { UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTypeBadgeDesign } from "./types/BadgeDesign.js";
+
+export default function MastheadItemTemplate(this: UDExMastheadItem) {
+  if (this.hasHref) {
+    return link.call(this);
+  }
+  if (this.isProfileBtn) {
+    return profileButton.call(this);
+  }
+  return button.call(this);
+}
+
+function link(this: UDExMastheadItem) {
+  return (
+    <>
+      <a
+        id={this._id}
+        class={this.additionalClass}
+        role={this.accessibleRoleName as AriaRole}
+        aria-label={this.accessibleLabel}
+        target={this.target}
+        href={this.href}
+        aria-describedby={this.ariaDescribedBy}
+        onClick={this.handleItemClick as any}
+        onMouseDown={this.handleMouseDown}
+        onMouseUp={this.handleMouseUp}
+        tabindex={0}>
+        {content.call(this)}
+        {badge.call(this)}
+      </a>
+      {this.isTargetBlank && (
+        <span id="new-win-desc" class="udex-masthead-hidden-text">
+          {this.openInNewWindowText}
+        </span>
+      )}
+    </>
+  );
+}
+
+function profileButton(this: UDExMastheadItem) {
+  return (
+    <>
+      <button
+        class={`udex-masthead-item__btn udex-masthead-item__profile-btn ${this.additionalClass}`}
+        id={this._id}
+        tabindex={0}
+        aria-expanded={this.buttonAriaExpanded}
+        aria-describedby={this.ariaDescribedBy}
+        aria-controls={`${this._id}_dropdown`}
+        aria-label={this.accessibleLabel}
+        onKeyDown={this.handleKeyDown}
+        onClick={this.handleItemClick as any}
+        onclick-default={this.handleItemClick}
+        onMouseDown={this.handleMouseDown}
+        onMouseUp={this.handleMouseUp}>
+        {content.call(this)}
+        {badge.call(this)}
+      </button>
+      {dropdown.call(this)}
+    </>
+  );
+}
+
+function button(this: UDExMastheadItem) {
+  return (
+    <>
+      <button
+        role={this.accessibleRoleName as AriaRole}
+        id={this._id}
+        class={`udex-masthead-item__btn ${this.additionalClass}`}
+        tabindex={0}
+        aria-expanded={this.buttonAriaExpanded}
+        aria-controls={`${this._id}_dropdown`}
+        aria-describedby={this.ariaDescribedBy}
+        aria-label={this.accessibleLabel}
+        onKeyDown={this.handleKeyDown}
+        onMouseDown={this.handleMouseDown}
+        onMouseUp={this.handleMouseUp}
+        onClick={this.handleItemClick as any}>
+        {content.call(this)}
+        {badge.call(this)}
+      </button>
+      {dropdown.call(this)}
+    </>
+  );
+}
+
+function content(this: UDExMastheadItem) {
+  if (this.icon) {
+    return (
+      <UI5Icon
+        class="udex-masthead-item__icon"
+        name={this.icon}
+        show-tooltip={this.iconAltText}
+        accessible-name={this.iconAltText}
+        mode={IconMode.Decorative}>
+      </UI5Icon>
+    );
+  }
+
+  if (this.image) {
+    return (
+      <>
+        {this.imageLoadError ? (
+          <UI5Icon
+            class="udex-masthead-item__icon"
+            name={worldIcon}
+            mode={IconMode.Decorative}>
+          </UI5Icon>
+        ) : (
+          <div class="udex-masthead-item__image-wrap">
+            <img
+              class="udex-masthead-item__image"
+              id={`${this._id}_image-alt`}
+              src={this.image}
+              aria-hidden={this.isCountrySelectorBtn}
+              alt={this.imageAlt}
+              onError={this.handleImageError}
+            />
+          </div>
+        )}
+        {this.imageAlt && (
+          <span id="image-desc" class="udex-masthead-hidden-text">
+            {this.imageAlt}
+          </span>
+        )}
+      </>
+    );
+  }
+
+  return (
+    <span class="udex-masthead-item__text">
+      <slot></slot>
+      {this.hasArrowDown && (
+        <UI5Icon
+          class="udex-masthead-item__dropdown-icon"
+          name={arrowDownIcon}
+          mode={IconMode.Decorative}>
+        </UI5Icon>
+      )}
+    </span>
+  );
+}
+
+function dropdown(this: UDExMastheadItem) {
+  return this.isDropdownOpened ? (
+    <div
+      class="udex-masthead-item__dropdown"
+      id={`${this._id}_dropdown`}
+      onKeyDown={this.handleKeyDown}
+      onFocusOut={this.handleFocusout}>
+      <div class="udex-masthead-item__dropdown-holder">
+        <slot name="dropdown"></slot>
+      </div>
+    </div>
+  ) : (
+    <div id={`${this._id}_dropdown`}></div>
+  );
+}
+
+function badge(this: UDExMastheadItem) {
+  return this.numberBadge ? (
+    <UDExBadge
+      class="udex-masthead-item__badge"
+      type={UDExTypeBadgeDesign.Number}
+      numberDesign={UDExNumberBadgeDesign.Red}
+      size={UDExSizeBadgeDesign.Small}>
+      {this.numberBadge}
+    </UDExBadge>
+  ) : undefined;
+}

package/src/MastheadMenu.ts

@@ -1,7 +1,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 jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
@@ -11,11 +11,9 @@ import "@ui5/webcomponents-icons/dist/action.js";
 import {
   isTabNext, isTabPrevious, isHome, isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import UDExBadge from "./Badge.js";
 import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
 import type UDExMastheadItem from "./MastheadItem.js";
-import UDExDivider from "./Divider.js";
-import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
+import MastheadMenuTemplate from "./MastheadMenuTemplate.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
@@ -31,6 +29,7 @@ export type Item = {
   title: string;
   url?: string;
   externalLink: boolean;
+  badge?: string;
   isDivider?: boolean;
   subItems?: Item[];
 };
@@ -74,10 +73,10 @@ type UDExMastheadMenuMenuItemClickEventDetail = {
  */
 @customElement({
   tag: "udex-masthead-menu",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: MastheadMenuCss,
   template: MastheadMenuTemplate,
-  dependencies: [Icon, UDExBadge, UDExMastheadMenuItem, UDExDivider],
+  dependencies: [Icon, UDExMastheadMenuItem],
 })
 
 /**

package/src/MastheadMenuItem.ts

@@ -1,20 +1,16 @@
 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 jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.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 "@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 { UDExTarget } from "./types/common.js";
 import translate from "./utils/translate.js";
 
-import MastheadMenuItemTemplate from "./generated/templates/MastheadMenuItemTemplate.lit.js";
+import MastheadMenuItemTemplate from "./MastheadMenuItemTemplate.js";
 
 // Styles
 import MastheadMenuItemCss from "./generated/themes/MastheadMenuItem.css.js";
@@ -45,7 +41,7 @@ export enum UDExItemType {
 @customElement({
   tag: "udex-masthead-menu-item",
   languageAware: true,
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: MastheadMenuItemCss,
   template: MastheadMenuItemTemplate,
   dependencies: [Icon],

package/src/MastheadMenuItemTemplate.tsx

@@ -0,0 +1,123 @@
+import type UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import type { AriaRole } from "@ui5/webcomponents-base";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import UDExBadge from "./Badge.js";
+import { UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTypeBadgeDesign } from "./types/BadgeDesign.js";
+import actionIcon from "@ui5/webcomponents-icons/dist/action.js";
+import slimArrowRightIcon from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import slimArrowLeftIcon from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import type { Booleanish } from "@ui5/webcomponents-base/thirdparty/preact/jsx.js";
+
+export default function MastheadMenuItemTemplate(this: UDExMastheadMenuItem) {
+  if (this.isActive) {
+    return activeItem.call(this);
+  }
+  if (this.isButtonType) {
+    return buttonItem.call(this);
+  }
+  return spanItem.call(this);
+}
+
+function activeItem(this: UDExMastheadMenuItem) {
+  return (
+    <>
+      <a
+        class={`udex-masthead-menu-item ${this.rootClass}`}
+        aria-describedby={this.ariaDescribedby || undefined}
+        role={this.accessibleRoleText as AriaRole}
+        href={this.url}
+        part={this.partAttr}
+        target={this.targetLink}
+        tabindex={Number(this._tabIndex)}>
+        {this.iconStart && arrowLeft()}
+        <span class={this.labelClass}>
+          {label.call(this)}
+        </span>
+        {this.iconEnd && arrowRight()}
+      </a>
+      {this.externalLink && (
+        <span id="new-win-desc" class="udex-masthead-hidden-text">
+          {this.openInNewWindowText}
+        </span>
+      )}
+      {this.badge && (
+        <UDExBadge
+          class="udex-masthead-menu-item-badge"
+          part="badge"
+          type={UDExTypeBadgeDesign.Number}
+          number-design={UDExNumberBadgeDesign.Blue}
+          size={UDExSizeBadgeDesign.Small}>
+          {this.badge}
+        </UDExBadge>
+      )}
+    </>
+  );
+}
+
+function buttonItem(this: UDExMastheadMenuItem) {
+  return (
+    <button
+      {...{ "_id": this.id }}
+      part="menu-item-button"
+      class={`udex-masthead-menu-item ${this.rootClass}`}
+      aria-label={this._accessibleName}
+      aria-haspopup={this.ariaHasPopup as Booleanish}
+      role={this.accessibleRoleText as AriaRole}
+      tabindex={Number(this._tabIndex)}>
+      {this.iconStart && arrowLeft()}
+      {this.label}
+      {this.iconEnd && arrowRight()}
+    </button>
+  );
+}
+
+function spanItem(this: UDExMastheadMenuItem) {
+  return (
+    <span class={`udex-masthead-menu-item ${this.rootClass}`} part="menu-item">
+      {this.iconStart && arrowLeft()}
+      {this.label}
+      {this.iconEnd && arrowRight()}
+    </span>
+  );
+}
+
+function label(this: UDExMastheadMenuItem) {
+  return this.externalLink ? (
+    <>
+      {this.leadingWordsOfLabel}
+      <span class="udex-masthead-menu-item__text-with-icon">
+        {this.lastWordOfLabel}
+        <UI5Icon
+          class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-action"
+          name={actionIcon}
+          mode={IconMode.Decorative}>
+        </UI5Icon>
+      </span>
+    </>
+  ) : (
+    <span>{this.label}</span>
+  );
+}
+
+function arrowLeft() {
+  return (
+    <UI5Icon
+      class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-left"
+      part="left"
+      name={slimArrowLeftIcon}
+      mode={IconMode.Decorative}>
+    </UI5Icon>
+  );
+}
+
+function arrowRight() {
+  return (
+    <UI5Icon
+      class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-right"
+      part="right"
+      name={slimArrowRightIcon}
+      mode={IconMode.Decorative}>
+    </UI5Icon>
+  );
+}

package/src/MastheadMenuTemplate.tsx

@@ -0,0 +1,142 @@
+import type UDExMastheadMenu from "./MastheadMenu.js";
+import type { SubMenuLinkItem } from "./MastheadMenu.js";
+import UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import UDExDivider from "./Divider.js";
+
+export default function MastheadMenuTemplate(this: UDExMastheadMenu) {
+  return (
+    <div
+      class={`udex-masthead-menu ${this.oneRowClass}`}
+      part="menu"
+      onKeyDown={this.handleKeyDown}>
+      {this.menuTitle && (
+        <div class="udex-masthead-menu__title">{this.menuTitle}</div>
+      )}
+      {this.itemsList.map((mainItem, index) => (
+        <div class="udex-masthead-menu__row" key={index}>
+          {mainItem.subMenuLinkItems.map(subMenu => (
+            <div class="udex-masthead-menu__column" part="column" key={subMenu.categoryId}>
+              {subMenu.category && header.call(this, subMenu)}
+              {list.call(this, subMenu)}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function header(this: UDExMastheadMenu, subMenu: SubMenuLinkItem) {
+  return (
+    <div class="udex-masthead-menu__header">
+      {subMenu.url ? (
+        this._isMobileMode ? (
+          <>
+            <UDExMastheadMenuItem
+              id={`category-${subMenu.categoryId}`}
+              type="Heading"
+              part="menu-item"
+              exportparts="menu-item"
+              label={subMenu.category}
+              has-border={true}>
+            </UDExMastheadMenuItem>
+            <UDExMastheadMenuItem
+              part="menu-item"
+              accessible-role="link"
+              exportparts="menu-item"
+              label={this.overviewHeaderLinkText}
+              url={subMenu.url}
+              has-border={true}>
+            </UDExMastheadMenuItem>
+          </>
+        ) : (
+          <UDExMastheadMenuItem
+            id={`category-${subMenu.categoryId}`}
+            type="Heading"
+            part="menu-item"
+            exportparts="menu-item"
+            accessible-role="link"
+            onClick={this.handleMenuItemClick as any}
+            url={subMenu.url}
+            label={subMenu.category}
+            icon-end={true}
+            has-border={true}>
+          </UDExMastheadMenuItem>
+        )
+      ) : (
+        <UDExMastheadMenuItem
+          id={`category-${subMenu.categoryId}`}
+          type="Heading"
+          part="menu-item"
+          exportparts="menu-item"
+          label={subMenu.category}
+          has-border={true}>
+        </UDExMastheadMenuItem>
+      )}
+    </div>
+  );
+}
+
+function list(this: UDExMastheadMenu, subMenu: SubMenuLinkItem) {
+  return (
+    <ul
+      class="udex-masthead-menu__list"
+      aria-labelledby={`category-${subMenu.categoryId}`}
+      {...{ category: subMenu.category }}>
+      {subMenu.items.map((item, index) => (
+        <li key={index}>
+          {item.isDivider ? (
+            <UDExDivider class="udex-masthead-menu__item-divider"></UDExDivider>
+          ) : item.subItems ? (
+            <>
+              {item.url ? (
+                <UDExMastheadMenuItem
+                  part="menu-item"
+                  accessible-role="link"
+                  exportparts="menu-item"
+                  onClick={this.handleMenuItemClick as any}
+                  url={item.url}
+                  label={item.title}
+                  class="udex-masthead-menu__sub-category">
+                </UDExMastheadMenuItem>
+              ) : (
+                <span class="udex-masthead-menu__sub-category">{item.title}</span>
+              )}
+              <ul class="udex-masthead-menu__sub-list" aria-label={item.title}>
+                {item.subItems.map((subItem, subIndex) => (
+                  <li key={subIndex}>
+                    {subItem.isDivider ? (
+                      <UDExDivider class="udex-masthead-menu__item-divider"></UDExDivider>
+                    ) : (
+                      <UDExMastheadMenuItem
+                        part="menu-item"
+                        accessible-role="link"
+                        exportparts="badge"
+                        onClick={this.handleMenuItemClick as any}
+                        badge={subItem.badge}
+                        external-link={subItem.externalLink}
+                        url={subItem.url}
+                        label={subItem.title}>
+                      </UDExMastheadMenuItem>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </>
+          ) : (
+            <UDExMastheadMenuItem
+              part="menu-item"
+              accessible-role="link"
+              exportparts="badge"
+              onClick={this.handleMenuItemClick as any}
+              badge={item.badge}
+              external-link={item.externalLink}
+              url={item.url}
+              label={item.title}>
+            </UDExMastheadMenuItem>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/MastheadMobileMenu.ts

@@ -2,7 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { DefaultSlot, Slot } 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 jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
@@ -16,7 +16,7 @@ import type UDExSearch from "./Search.js";
 import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
 import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
 import AnalyticsName from "./types/AnalyticsName.js";
-import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenuTemplate.lit.js";
+import MastheadMobileMenuTemplate from "./MastheadMobileMenuTemplate.js";
 import type UDExMastheadShell from "./MastheadShell.js";
 import translate from "./utils/translate.js";
 
@@ -62,7 +62,7 @@ type UDExMastheadMobileMenuExploreClickEventDetail = {
  */
 @customElement({
   tag: "udex-masthead-mobile-menu",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: MastheadMobileMenuCss,
   template: MastheadMobileMenuTemplate,
   dependencies: [UDExMastheadMenuItem],