@sapudex/web-components 2.14.0 → 2.16.0

package/src/Accordion.ts

@@ -7,7 +7,9 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import "@ui5/webcomponents-icons/dist/feeder-arrow.js";
-import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+  isEnter, isSpace, isUp, isDown, isEnd, isHome, isTabPrevious, isTabNext,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import AccordionTemplate from "./AccordionTemplate.js";
 import type UDExAccordionItem from "./AccordionItem.js";
 import { COLLAPSE_ALL, EXPAND_ALL } from "./generated/i18n/i18n-defaults.js";
@@ -153,39 +155,67 @@ class UDExAccordion extends UI5Element {
   }
 
   keydownHandler(e: KeyboardEvent) {
-    if (e.key !== "Tab") {
-      e.preventDefault();
-    }
-    const len = this._items.length;
+    const activeItem = this._items[this._activeItemIndex];
+    const previousItem = this._items[this._activeItemIndex - 1];
+    const isLastItem = this._activeItemIndex === this._items.length - 1;
+    const isFirstItem = this._activeItemIndex === 0;
+    const lastItem = this._items[this._items.length - 1];
+
+    const updateTabIndex = (elements: NodeListOf<Element>, value: string) => {
+      elements.forEach(element => element.setAttribute("tabindex", value));
+    };
+
+    const getInteractiveElements = (item: HTMLElement) => {
+      const selectors = ["button", "a[href]", "input", "select", "textarea", "[tabindex]"];
+      return item.querySelectorAll(selectors.join(","));
+    };
+
+    const handleTabNavigation = (keyboardEvent: KeyboardEvent) => {
+      if (isLastItem && isTabNext(keyboardEvent) && !lastItem.expanded) {
+        updateTabIndex(getInteractiveElements(activeItem), "-1");
+        return true;
+      }
+
+      if ((activeItem?.expanded && isTabNext(e))
+        || (previousItem?.expanded && isTabPrevious(e))
+        || (isFirstItem && isTabPrevious(e))) {
+        return true;
+      }
+
+      if (isEnter(e) && isLastItem) {
+        updateTabIndex(getInteractiveElements(activeItem), "0");
+      }
+
+      return false;
+    };
+
     const focusOnItem = (itemIndex: number) => {
       const item = this._items[itemIndex];
       this._activeItemIndex = itemIndex;
       (item?.shadowRoot?.querySelector(".udex-accordion-item__header") as HTMLElement)?.focus();
     };
 
-    switch (e.key) {
-    case "Home":
+    if (handleTabNavigation(e)) {
+      return;
+    }
+
+    e.preventDefault();
+    const len = this._items.length;
+
+    if (isHome(e)) {
       focusOnItem(0);
-      break;
-    case "End":
+    }
+
+    if (isEnd(e)) {
       focusOnItem(len - 1);
-      break;
-    case "ArrowUp":
-      if (this._activeItemIndex > 0) {
-        focusOnItem(this._activeItemIndex - 1);
-      } else if (this._activeItemIndex === 0) {
-        focusOnItem(len - 1);
-      }
-      break;
-    case "ArrowDown":
-      if (this._activeItemIndex < len - 1) {
-        focusOnItem(this._activeItemIndex + 1);
-      } else if (this._activeItemIndex === len - 1) {
-        focusOnItem(0);
-      }
-      break;
-    default:
-      break;
+    }
+
+    if (isTabPrevious(e) || isUp(e)) {
+      focusOnItem(this._activeItemIndex > 0 ? this._activeItemIndex - 1 : len - 1);
+    }
+
+    if (isTabNext(e) || isDown(e)) {
+      focusOnItem(this._activeItemIndex < len - 1 ? this._activeItemIndex + 1 : 0);
     }
   }
 

package/src/Breadcrumbs.ts

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
@@ -14,7 +14,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UI5BreadcrumbsCss from "@ui5/webcomponents/dist/generated/themes/Breadcrumbs.css.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/home.js";
-import BreadcrumbsTemplate from "./generated/templates/BreadcrumbsTemplate.lit.js";
+import BreadcrumbsTemplate from "./BreadcrumbsTemplate.js";
 import UDExBreadcrumbsItem from "./BreadcrumbsItem.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExLink from "./Link.js";
@@ -24,8 +24,6 @@ import { BREADCRUMBS_ARIA_LABEL, BREADCRUMBS_OVERFLOW_ARIA_LABEL } from "./gener
 import BreadcrumbsCss from "./generated/themes/Breadcrumbs.css.js";
 import BreadcrumbsPopoverCss from "./generated/themes/BreadcrumbsPopover.css.js";
 
-const triggerActiveClass = "udex-breadcrumbs__trigger--opened";
-
 type UDExBreadcrumbsItemClickEventDetail = {
   item: UDExBreadcrumbsItem;
   altKey?: boolean;
@@ -53,7 +51,7 @@ type UDExBreadcrumbsItemClickEventDetail = {
  */
 @customElement({
   tag: "udex-breadcrumbs",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [UI5BreadcrumbsCss, BreadcrumbsCss, BreadcrumbsPopoverCss],
   template: BreadcrumbsTemplate,
   dependencies: [UDExBreadcrumbsItem, UDExLink, UDExDropdown, UI5Icon],
@@ -116,6 +114,12 @@ class UDExBreadcrumbs extends UI5Element {
   _responsivePopover?: UDExDropdown;
   _itemNavigation?: ItemNavigation;
   _shouldFocusFirstVisibleItem!: boolean;
+  _rootClass: string;
+
+  constructor() {
+    super();
+    this._rootClass = "udex-breadcrumbs";
+  }
 
   onBeforeRendering(): void {
     this._preprocessItems();
@@ -232,7 +236,7 @@ class UDExBreadcrumbs extends UI5Element {
   }
 
   _handleKeydown(e: KeyboardEvent): void {
-    const itemIndex = (e.target as HTMLElement).getAttribute("index");
+    const itemIndex = (e.target as HTMLElement).getAttribute("data-index");
     const isLastItem = itemIndex === (this.items.length - 2).toString();
     const isFirstItem = itemIndex === "0";
 
@@ -304,7 +308,8 @@ class UDExBreadcrumbs extends UI5Element {
   }
 
   get _triggerClass(): string {
-    return this._dropdownOpened ? triggerActiveClass : "";
+    const rootClass = "udex-breadcrumbs";
+    return this._dropdownOpened ? `${rootClass} ${rootClass}__trigger--opened` : rootClass;
   }
 
   get _accessibleNameText(): string {

package/src/BreadcrumbsItem.ts

@@ -24,11 +24,11 @@ import BreadcrumbsItem from "@ui5/webcomponents/dist/BreadcrumbsItem.js";
   tag: "udex-breadcrumbs-item",
   renderer: jsxRenderer,
 })
+
 class UDExBreadcrumbsItem extends BreadcrumbsItem {
   /**
    * Defines item icon to be displayed before the item name.
-   *
-   * @default ""
+   * @default undefined
    * @public
    */
   @property()

package/src/BreadcrumbsPopoverTemplate.tsx

@@ -0,0 +1,60 @@
+import type Breadcrumbs from "./Breadcrumbs.js";
+import UDExDropdown from "./Dropdown.js";
+import UDExLink from "./Link.js";
+import { Placement, HorizontalAlign } from "./types/Dropdown.js";
+
+export default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {
+  return (
+    <UDExDropdown
+      id={`udex-${this._id}-breadcrumbs__popover`}
+      opener={`udex-${this._id}-breadcrumbs__opener`}
+      class={`${this._rootClass}__popover ui5-breadcrumbs-popover`}
+      placement={Placement.Bottom}
+      horizontalAlign={HorizontalAlign.Start}
+      onKeyDown={this._handleKeydown}
+      onClose={this._afterDropdownClose}
+      onOpen={this._afterDropdownOpen}>
+      <div className={`${this._rootClass}__popover-content`}>
+        {this._dropdownItems.map((item, index) => (
+          item.icon ? (
+            <UDExLink
+              key={index}
+              data-index={index}
+              id={`${item._id}-li`}
+              onClick={this._onDropdownLinkPress}
+              href={item.href}
+              target={item.target}
+              class={`${this._rootClass}__item ${this._rootClass}__item--with-icon ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}
+              icon={item.icon}
+              accessibleName={item.textContent ?? undefined}
+              data-ui5-stable={item.stableDomRef}>
+              {item.textContent}
+            </UDExLink>
+          ) : item._isCurrentPageItem ? (
+            <span
+              key={index}
+              id={`${item._id}-li`}
+              className={`${this._rootClass}__item ${this._rootClass}__item--current ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}
+              accessible-name={item.accessibleName}
+              data-ui5-stable={item.stableDomRef}>
+              {item.textContent}
+            </span>
+          ) : (
+            <UDExLink
+              key={index}
+              data-index={index}
+              id={`${item._id}-li`}
+              onClick={this._onDropdownLinkPress}
+              href={item.href}
+              target={item.target}
+              class={`${this._rootClass}__item ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}
+              accessibleName={item.accessibleName}
+              data-ui5-stable={item.stableDomRef}>
+              {item.textContent}
+            </UDExLink>
+          )
+        ))}
+      </div>
+    </UDExDropdown>
+  );
+}

package/src/BreadcrumbsTemplate.tsx

@@ -0,0 +1,53 @@
+import type Breadcrumbs from "./Breadcrumbs.js";
+import UDExLink from "./Link.js";
+import UDExButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import BreadcrumbsPopoverTemplate from "./BreadcrumbsPopoverTemplate.js";
+
+export default function BreadcrumbsTemplate(this: Breadcrumbs) {
+  const rootClass = "udex-breadcrumbs";
+
+  return (
+    <>
+      <nav
+        class={`${this._rootClass} ui5-breadcrumbs-root`}
+        aria-label={this._accessibleNameText}>
+        <ol onFocusIn={this._onfocusin}>
+          <li class={`${this._rootClass}__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper`}>
+            <UDExLink
+              id={`udex-${this._id}-breadcrumbs__opener`}
+              class={`${this._rootClass}__trigger ${this._triggerClass}`}
+              onClick={this._toggleDropdown}
+              aria-label={this._dropdownArrowAccessibleNameText}
+              accessibleRole={UDExButtonAccessibleRole.Button}
+              icon={slimArrowDown}
+              aria-haspopup="true">
+            </UDExLink>
+          </li>
+          {this._linksData.map(linkData =>
+            <li
+              class={`${this._rootClass}__link-wrapper ui5-breadcrumbs-link-wrapper`}
+              id={`${linkData._id}-link-wrapper`}>
+              {!linkData._isCurrentPageItem && (
+                <>
+                  <span className={`${this._rootClass}__separator`} aria-hidden="true"></span>
+                  <UDExLink
+                    onClick={this._onLinkPress}
+                    id={`${linkData._id}-link`}
+                    class={`${rootClass}__item ${this._rootClass}__item--visible`}
+                    href={linkData.href}
+                    target={linkData.target}
+                    accessibleName={linkData._accessibleNameText}
+                    data-ui5-stable={linkData.stableDomRef}>
+                    {linkData.innerText}
+                  </UDExLink>
+                </>
+              )}
+            </li>
+          )}
+        </ol>
+      </nav>
+      {BreadcrumbsPopoverTemplate.call(this)}
+    </>
+  );
+}

package/src/FilterMenu.ts

@@ -332,8 +332,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   handleSelectAll(e:CustomEvent): void {
-    this.onFilterSelectAllHeaderPress(e);
-    this.fireDecoratorEvent("select-all");
+    this.onSelectAllHeaderPress(e);
   }
 
   handleItemPress(e:CustomEvent): void {

package/src/FilterMenuSelectAll.ts

@@ -28,10 +28,6 @@ class UDExFilterMenuSelectAll extends UDExListGroupHeaderBase {
   get isSelectAllHeader() {
     return true;
   }
-
-  get isFilterMenuSelectAllHeader() {
-    return true;
-  }
 }
 
 UDExFilterMenuSelectAll.define();

package/src/Footer.ts

@@ -1,13 +1,14 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.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";
 import UDExAccordionItem from "./AccordionItem.js";
 import UDExButton from "./Button.js";
@@ -19,14 +20,7 @@ import type { UDExSocialMediaButtonType } from "./types/SocialMediaButtonType.js
 import type { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
-
-// Template
-import FooterTemplate from "./generated/templates/FooterTemplate.lit.js";
-
-// Styles
-import FooterCss from "./generated/themes/Footer.css.js";
-import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import FooterTemplate from "./FooterTemplate.js";
 import {
   ABOUT_SAP,
   CHAT_WITH_US,
@@ -42,15 +36,14 @@ import {
   PUBLIC_SECURITY_NETWORK_NUMBER,
   ICP_NUMBER,
 } from "./generated/i18n/i18n-defaults.js";
-import "@ui5/webcomponents-icons/dist/headset.js";
-import "@ui5/webcomponents-icons/dist/email.js";
-import "@ui5/webcomponents-icons/dist/back-to-top.js";
-import "@ui5/webcomponents-icons/dist/discussion-2.js";
-import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+
+// Styles
+import FooterCss from "./generated/themes/Footer.css.js";
 
 export const chineseICPDefaultLink = "https://beian.miit.gov.cn/";
 
 export type FooterLink = {
+  id: string;
   title: string;
   url: string;
   target: UDExTarget;
@@ -70,14 +63,14 @@ export type FooterContactNumber = {
 };
 
 type UDExFooterDetailedClickEventDetail = {
-  originalEvent: PointerEvent,
+  originalEvent: MouseEvent,
   name: string | undefined;
   id?: string;
   sourceNode: HTMLElement;
 }
 
 type UDExFooterBaseEventDetail = {
-  originalEvent: PointerEvent,
+  originalEvent: MouseEvent | Event,
 }
 
 type BaseEvents = "contact-chat-click" | "contact-phone-local-numbers-click" | "contact-email-click" | "contact-phone-click" | "logo-click" | "back-to-top-click";
@@ -106,7 +99,7 @@ type DetailedEvents = "quick-links-click" | "trending-click" | "about-sap-click"
 @customElement({
   languageAware: true,
   tag: "udex-footer",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [FooterCss],
   template: FooterTemplate,
   dependencies: [UDExAccordion, UDExAccordionItem, Icon, UDExButton, UDExDivider, UDExLink, UDExSocialMediaButton],
@@ -437,7 +430,7 @@ class UDExFooter extends UI5Element {
     this._shouldRenderMobileMenu = this.isMobile;
   }
 
-  onBackToTopClick(e: PointerEvent): void {
+  onBackToTopClick(e: Event): void {
     this.fireFooterBaseEvent(e, "back-to-top-click");
 
     window.scrollTo(0, 0);
@@ -490,19 +483,19 @@ class UDExFooter extends UI5Element {
     return UDExFooter.i18nBundle.getText(CHAT_WITH_US);
   }
 
-  get _quickLinksTitle() {
+  get _quickLinksTitle(): string {
     return this.quickLinksTitle || UDExFooter.i18nBundle.getText(QUICK_LINKS);
   }
 
-  get _trendingTitle() {
+  get _trendingTitle(): string {
     return this.trendingTitle || UDExFooter.i18nBundle.getText(TRENDING);
   }
 
-  get _aboutSapTitle() {
+  get _aboutSapTitle(): string {
     return this.aboutSapTitle || UDExFooter.i18nBundle.getText(ABOUT_SAP);
   }
 
-  get _siteInformationTitle() {
+  get _siteInformationTitle(): string {
     return this.siteInformationTitle || UDExFooter.i18nBundle.getText(SITE_INFORMATION);
   }
 
@@ -568,48 +561,48 @@ class UDExFooter extends UI5Element {
     return this.isChineseLang && this.chineseLogoUrl ? `${root}-chinese` : root;
   }
 
-  _onLogoClick(e: PointerEvent): void {
+  _onLogoClick(e: MouseEvent): void {
     this.fireFooterBaseEvent(e, "logo-click");
   }
 
-  _onContactPhoneClick(e: PointerEvent): void {
+  _onContactPhoneClick(e: MouseEvent): void {
     this.fireFooterBaseEvent(e, "contact-phone-click");
   }
-  _onContactPhoneLocalNumbersClick(e: PointerEvent): void {
+  _onContactPhoneLocalNumbersClick(e: Event): void {
     this.fireFooterBaseEvent(e, "contact-phone-local-numbers-click");
   }
-  _onContactEmailClick(e: PointerEvent): void {
+  _onContactEmailClick(e: MouseEvent): void {
     this.fireFooterBaseEvent(e, "contact-email-click");
   }
-  _onContactChatClick(e: PointerEvent): void {
+  _onContactChatClick(e: MouseEvent): void {
     this.fireFooterBaseEvent(e, "contact-chat-click");
   }
 
-  _onQuickLinksClick(e: PointerEvent): void {
+  _onQuickLinksClick(e: MouseEvent): void {
     this.fireFooterDetailedClickEvent(e, "quick-links-click");
   }
 
-  _onTrendingClick(e: PointerEvent): void {
+  _onTrendingClick(e: MouseEvent): void {
     this.fireFooterDetailedClickEvent(e, "trending-click");
   }
 
-  _onAboutSapClick(e: PointerEvent): void {
+  _onAboutSapClick(e: MouseEvent): void {
     this.fireFooterDetailedClickEvent(e, "about-sap-click");
   }
 
-  _onSiteInformationClick(e: PointerEvent): void {
+  _onSiteInformationClick(e: MouseEvent): void {
     this.fireFooterDetailedClickEvent(e, "site-information-click");
   }
 
-  _onSocialMediaLinkClick(e: PointerEvent): void {
+  _onSocialMediaLinkClick(e: MouseEvent): void {
     this.fireFooterDetailedClickEvent(e, "social-media-link-click");
   }
 
-  fireFooterBaseEvent(e: PointerEvent, eventName: BaseEvents): void {
+  fireFooterBaseEvent(e: MouseEvent | Event, eventName: BaseEvents): void {
     this.fireDecoratorEvent(eventName, { originalEvent: e });
   }
 
-  fireFooterDetailedClickEvent(e: PointerEvent, eventName: DetailedEvents): void {
+  fireFooterDetailedClickEvent(e: MouseEvent, eventName: DetailedEvents): void {
     const sourceNode = e.composedPath()[0] as HTMLElement;
     const { innerText, dataset: { id, name } } = sourceNode;