@sapudex/web-components 2.56.0 → 2.58.0

package/src/TabHeaderTemplate.tsx

@@ -0,0 +1,153 @@
+import type UDExTab from "./Tab.js";
+import type { ITab } from "./Tab.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import UDExBadge from "./Badge.js";
+import { UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTypeBadgeDesign } from "./types/BadgeDesign.js";
+
+export default function TabHeaderTemplate(this: UDExTab) {
+  const tab = this as unknown as ITab;
+
+  if (this.hasBodyTextOrLink) {
+    return (
+      <div
+        class="udex-tab-navigation__tab-wrapper"
+        role="presentation"
+        style={this.widthStyle || undefined}>
+        {this.hasNotHref ? (
+          <button
+            id={this._id}
+            type="button"
+            role="tab"
+            class={`udex-tab-navigation__button-tab ${this.selectedClass} ${this.classWithIconWithoutBackground} ${this.buttonClassWithIcon} ${this.processTabClass}`}
+            tabindex={Number(this._tabIndex)}
+            aria-posinset={tab._posinset}
+            aria-setsize={tab._setsize}
+            aria-controls={tab._contentId}
+            aria-selected={this.effectiveSelected}
+            aria-disabled={this.ariaDisabled ? "true" : undefined}>
+            {tabContent.call(this)}
+            {this.ariaDescribedByBodyText && (
+              <span class="visually-hidden">{this.bodyText}</span>
+            )}
+          </button>
+        ) : (
+          <a
+            id={this._id}
+            role="tab"
+            class={`udex-tab-navigation__button-tab ${this.selectedClass} ${this.classWithIconWithoutBackground} ${this.buttonClassWithIcon} ${this.processTabClass}`}
+            href={this.href}
+            target={this.target}
+            tabindex={Number(this.linkTabIndex)}
+            aria-posinset={tab._posinset}
+            aria-setsize={tab._setsize}
+            aria-disabled={this.ariaDisabled ? "true" : undefined}>
+            {tabContent.call(this)}
+            {this.ariaDescribedByBodyText && (
+              <span class="visually-hidden">{this.bodyText}</span>
+            )}
+          </a>
+        )}
+        {this.hasBodyText && (
+          <p class="udex-tab-navigation__button-body-text">{this.bodyText}</p>
+        )}
+        {this.hasLinkSlot && (
+          <div class="udex-tab-navigation__button-links" {...({ innerHTML: this.linkSlotHtml } as object)}></div>
+        )}
+      </div>
+    );
+  }
+
+  return this.hasNotHref ? (
+    <button
+      id={this._id}
+      type="button"
+      role="tab"
+      class={`udex-tab-navigation__button-tab ${this.selectedClass} ${this.classWithIconWithoutBackground} ${this.buttonClassWithIcon} ${this.processTabClass}`}
+      tabindex={Number(this._tabIndex)}
+      aria-describedby={`udex-tab-navigation__${this._id}__accessible-name`}
+      aria-posinset={tab._posinset}
+      aria-setsize={tab._setsize}
+      aria-controls={tab._contentId}
+      aria-selected={this.effectiveSelected}
+      aria-disabled={this.ariaDisabled ? "true" : undefined}
+      style={this.widthStyle || undefined}>
+      {tabContent.call(this)}
+    </button>
+  ) : (
+    <a
+      id={this._id}
+      role="tab"
+      class={`udex-tab-navigation__button-tab ${this.selectedClass} ${this.classWithIconWithoutBackground} ${this.buttonClassWithIcon} ${this.processTabClass}`}
+      tabindex={Number(this.linkTabIndex)}
+      aria-posinset={tab._posinset}
+      aria-setsize={tab._setsize}
+      href={this.href}
+      target={this.target}
+      aria-disabled={this.ariaDisabled ? "true" : undefined}
+      style={this.widthStyle || undefined}>
+      {tabContent.call(this)}
+    </a>
+  );
+}
+
+function tabContent(this: UDExTab) {
+  return (
+    <>
+      {this.hasIcon && (
+        <span
+          class="udex-tab-navigation__button-icon-outer"
+          role="presentation"
+          aria-hidden="true">
+          <Icon
+            class="udex-tab-navigation__button-icon"
+            name={this.icon}>
+          </Icon>
+          {this.showAttentionBadge && (
+            <span class="udex-tab-navigation__button-badge"></span>
+          )}
+        </span>
+      )}
+      {this._isProcessTab ? (
+        <span class="udex-tab-navigation__button-text-block">
+          <span class="udex-tab-navigation__button-item-count">{this.effectiveItemCountText}</span>
+          <p class={`udex-tab-navigation__button-text ${this.classWithIcon}`}>
+            {this.text}
+            {this.numberBadge && (
+              <UDExBadge
+                class="udex-tab-navigation__badge"
+                type={UDExTypeBadgeDesign.Number}
+                number-design={UDExNumberBadgeDesign.Blue}
+                size={UDExSizeBadgeDesign.Medium}>
+                {this.numberBadge}
+              </UDExBadge>
+            )}
+            {this.hasNotIcon && (
+              <span class="udex-tab-navigation__button-badge"></span>
+            )}
+          </p>
+        </span>
+      ) : (
+        <p class={`udex-tab-navigation__button-text ${this.classWithIcon}`}>
+          {this.text}
+          {this.numberBadge && (
+            <UDExBadge
+              class="udex-tab-navigation__badge"
+              type={UDExTypeBadgeDesign.Number}
+              number-design={UDExNumberBadgeDesign.Blue}
+              size={UDExSizeBadgeDesign.Medium}>
+              {this.numberBadge}
+            </UDExBadge>
+          )}
+          {this.hasNotIcon && (
+            <span class="udex-tab-navigation__button-badge"></span>
+          )}
+        </p>
+      )}
+      <span
+        class="visually-hidden"
+        id={`udex-tab-navigation__${this._id}__accessible-name`}>
+        {this.accessibleNameText}
+      </span>
+    </>
+  );
+}

package/src/TabInOverflowTemplate.tsx

@@ -0,0 +1,68 @@
+import type UDExTab from "./Tab.js";
+import type { ITab } from "./Tab.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+
+export default function TabInOverflowTemplate(this: UDExTab) {
+  const tab = this as unknown as ITab;
+
+  return this.hasNotHref ? (
+    <button
+      id={this._id}
+      class="udex-tab-overflow__button"
+      role="tab"
+      aria-selected={this.effectiveSelected}
+      aria-disabled={this.ariaDisabled ? "true" : undefined}
+      disabled={!!this.ariaDisabled}
+      tabindex={Number(tab._tabIndex)}>
+      {this.hasIcon && (
+        <span
+          class="udex-tab-overflow__button-icon"
+          role="presentation"
+          aria-hidden="true">
+          <Icon name={this.icon}></Icon>
+          {this.showAttentionBadge && (
+            <span class="udex-tab-overflow__button-badge"></span>
+          )}
+        </span>
+      )}
+      {this.text}
+      {this.hasNotIcon && (
+        <span
+          class="udex-tab-overflow__button-badge"
+          role="presentation"
+          aria-hidden="true">
+        </span>
+      )}
+    </button>
+  ) : (
+    <a
+      id={this._id}
+      href={this.ariaDisabled ? undefined : this.href}
+      target={this.target}
+      class="udex-tab-overflow__button"
+      role="tab"
+      aria-selected={this.effectiveSelected}
+      aria-disabled={this.ariaDisabled ? "true" : undefined}
+      tabindex={Number(tab._tabIndex)}>
+      {this.hasIcon && (
+        <span
+          class="udex-tab-overflow__button-icon"
+          role="presentation"
+          aria-hidden="true">
+          <Icon name={this.icon}></Icon>
+          {this.showAttentionBadge && (
+            <span class="udex-tab-overflow__button-badge"></span>
+          )}
+        </span>
+      )}
+      {this.text}
+      {this.hasNotIcon && (
+        <span
+          class="udex-tab-overflow__button-badge"
+          role="presentation"
+          aria-hidden="true">
+        </span>
+      )}
+    </a>
+  );
+}

package/src/TabNavigation.ts

@@ -5,10 +5,9 @@ import type { StyleData } from "@ui5/webcomponents-base/dist/types.js";
 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/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
-import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
   isUp, isDown, isRight, isLeft, isEnter, isSpace, isEscape, isHome, isEnd, isTabNext, isTabPrevious,
@@ -25,15 +24,15 @@ import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import "@ui5/webcomponents-icons/dist/play.js";
 import "@ui5/webcomponents-icons/dist/pause.js";
 import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import translate from "./utils/translate.js";
 
 // Templates
-import TabNavigationTemplate from "./generated/templates/TabNavigationTemplate.lit.js";
-import TabNavigationPopoverTemplate from "./generated/templates/TabNavigationPopoverTemplate.lit.js";
+import TabNavigationTemplate from "./TabNavigationTemplate.js";
 
 // Styles
 import TabNavigationCss from "./generated/themes/TabNavigation.css.js";
 import TabInOverflowCss from "./generated/themes/TabInOverflow.css.js";
-import translate from "./utils/translate.js";
 
 const staticAreaTabStyles: Array<StyleData> = [];
 
@@ -91,7 +90,7 @@ type UDExTabContainerTabSelectEventDetail = {
  */
 @customElement({
   tag: "udex-tab-navigation",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [TabNavigationCss, TabInOverflowCss],
   template: TabNavigationTemplate,
   dependencies: [Popover, Icon, UDExButton],
@@ -122,10 +121,10 @@ class UDExTabNavigation extends UI5Element {
    * Defines the size of the "More" button.
    *
    * @public
-   * @default "Small"
+   * @default "Medium"
   */
   @property()
-    sizeMoreButton: `${UDExSizeMoreButton}` = "Small";
+    sizeMoreButton: `${UDExButtonSize}` = UDExButtonSize.Medium;
 
   /**
    * Defines the mode of the component.
@@ -279,6 +278,7 @@ class UDExTabNavigation extends UI5Element {
   _maxTitleLength: number = 25;
   _maxTitleLengthInSecondLines: number = this._maxTitleLength * 2;
   _autoPlayTimer?: number;
+  _focusSelectedTabAfterRender: boolean = false;
 
   constructor() {
     super();
@@ -296,6 +296,11 @@ class UDExTabNavigation extends UI5Element {
     }
     this.initOutsideClick();
     this.applyTabWidthToVerticalTabs();
+
+    if (this._focusSelectedTabAfterRender) {
+      this._focusSelectedTabAfterRender = false;
+      this._selectedTab?.getTabInHeaderDomRef()?.focus();
+    }
   }
 
   onEnterDOM(): void {
@@ -666,10 +671,6 @@ class UDExTabNavigation extends UI5Element {
       .filter(tab => !tab.disabled)
       .map(tab => tab.getTabInHeaderDomRef()!)
       .filter(tab => !tab.hasAttribute("hidden"));
-
-    if (!this.getMoreButton().hasAttribute("hidden")) {
-      this._visibleTabs.push(this.getMoreButton());
-    }
   }
 
   applyTabIndex() {
@@ -688,15 +689,32 @@ class UDExTabNavigation extends UI5Element {
   }
 
   handleOverflowItemClick(e: Event) {
-    if ((e.target as HTMLElement).localName === "button") {
-      const targetId = (e.target as HTMLElement).id;
-      const [targetTab] = this.items.filter(item => item.__id === targetId);
-      if (!targetTab?.disabled) {
-        e.preventDefault();
-        this.onItemSelect(targetId);
-      }
+    const target = e.target as HTMLElement;
+    const { localName } = target;
+
+    if (localName !== "button" && localName !== "a") {
+      this.handleClosePopover();
+      return;
     }
+
+    const targetId = target.id;
+    const [targetTab] = this.items.filter(item => item.__id === targetId);
+
+    if (targetTab?.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
+    if (localName === "button") {
+      e.preventDefault();
+      this.onItemSelect(targetId);
+    }
+
     this.handleClosePopover();
+    if (localName === "button") {
+      this._focusSelectedTabAfterRender = true;
+    }
   }
 
   onItemSelect(selectedId: string) {
@@ -856,7 +874,6 @@ class UDExTabNavigation extends UI5Element {
   }
 
   handleFocusMoreButton(e: KeyboardEvent) {
-    this.handleDownMoreButton(e);
     this.handleHomeKeyMoreButton(e);
     this.handleEnterKeyMoreButton(e);
   }
@@ -878,20 +895,12 @@ class UDExTabNavigation extends UI5Element {
     }
   }
 
-  handleDownMoreButton(e: KeyboardEvent) {
-    if (isDown(e) || isEnter(e)) {
-      this._popover = this.getResponsePopover();
-      this.handleOpenPopover();
-      this.updateOverflowItems();
-    }
-  }
-
   onFocusFirstItemPopover() {
     if (this._popover?.open) {
       const popoverItems = this.getItemsFromPopover();
-      const firstPopoverItem = popoverItems[0];
-      firstPopoverItem.setAttribute("tabindex", "0");
-      firstPopoverItem.focus();
+      const firstActiveItem = popoverItems.find(item => !this.isPopoverItemDisabled(item)) ?? popoverItems[0];
+      firstActiveItem.setAttribute("tabindex", "0");
+      firstActiveItem.focus();
     }
   }
 
@@ -921,8 +930,7 @@ class UDExTabNavigation extends UI5Element {
   onPreviousItemInPopover(target: HTMLElement) {
     const popoverItems = this.getItemsFromPopover();
     const currentSelectedTabIndex = this.getPopoverTabIndexById(popoverItems, target.id);
-    const previousSelectIndex = currentSelectedTabIndex - 1 < 0 ? popoverItems.length - 1 : currentSelectedTabIndex - 1;
-    const prevItem = popoverItems[previousSelectIndex];
+    const prevItem = this.findNextEnabledPopoverItem(popoverItems, currentSelectedTabIndex, -1);
 
     this.resetTabIndexItem(popoverItems[currentSelectedTabIndex]);
     prevItem.setAttribute("tabIndex", "0");
@@ -932,14 +940,29 @@ class UDExTabNavigation extends UI5Element {
   onNextItemInPopover(target: HTMLElement) {
     const popoverItems = this.getItemsFromPopover();
     const currentSelectedTabIndex = this.getPopoverTabIndexById(popoverItems, target.id);
-    const nextSelectIndex = currentSelectedTabIndex + 1 > popoverItems.length - 1 ? 0 : currentSelectedTabIndex + 1;
-    const nextItem = popoverItems[nextSelectIndex];
+    const nextItem = this.findNextEnabledPopoverItem(popoverItems, currentSelectedTabIndex, 1);
 
     this.resetTabIndexItem(popoverItems[currentSelectedTabIndex]);
     nextItem.setAttribute("tabIndex", "0");
     nextItem.focus();
   }
 
+  private isPopoverItemDisabled(item: HTMLElement): boolean {
+    return item.getAttribute("aria-disabled") === "true";
+  }
+
+  private findNextEnabledPopoverItem(items: HTMLElement[], currentIndex: number, direction: 1 | -1): HTMLElement {
+    const len = items.length;
+    let index = (currentIndex + direction + len) % len;
+    while (index !== currentIndex) {
+      if (!this.isPopoverItemDisabled(items[index])) {
+        return items[index];
+      }
+      index = (index + direction + len) % len;
+    }
+    return items[currentIndex];
+  }
+
   resetTabIndexItem(item: HTMLElement): void {
     item.setAttribute("tabIndex", "-1");
   }
@@ -968,6 +991,7 @@ class UDExTabNavigation extends UI5Element {
       if (!targetTab?.disabled) {
         this.onItemSelect(targetId);
         this.handleClosePopover();
+        this._focusSelectedTabAfterRender = true;
       }
     }
   }
@@ -976,7 +1000,7 @@ class UDExTabNavigation extends UI5Element {
     if (isEscape(e)) {
       e.preventDefault();
       this.handleClosePopover();
-      this._visibleTabs![this._visibleTabs!.length - 1].focus();
+      this.getMoreButton().focus();
     }
   }
 
@@ -984,7 +1008,8 @@ class UDExTabNavigation extends UI5Element {
     if (isHome(e)) {
       e.preventDefault();
       const popoverItems = this.getItemsFromPopover();
-      popoverItems[0].focus();
+      const firstActiveItem = popoverItems.find(item => !this.isPopoverItemDisabled(item)) ?? popoverItems[0];
+      firstActiveItem.focus();
     }
   }
 
@@ -993,7 +1018,8 @@ class UDExTabNavigation extends UI5Element {
       e.preventDefault();
       e.stopPropagation();
       const popoverItems = this.getItemsFromPopover();
-      popoverItems[popoverItems.length - 1].focus();
+      const lastActiveItem = [...popoverItems].reverse().find(item => !this.isPopoverItemDisabled(item)) ?? popoverItems[popoverItems.length - 1];
+      lastActiveItem.focus();
     }
   }
 
@@ -1025,14 +1051,6 @@ class UDExTabNavigation extends UI5Element {
     staticAreaTabStyles.push(styles);
   }
 
-  static get tabNavigationPopoverTemplate() {
-    return TabNavigationPopoverTemplate;
-  }
-
-  get tabNavigationPopover() {
-    return executeTemplate(UDExTabNavigation.tabNavigationPopoverTemplate, this);
-  }
-
   applyTabWidthToVerticalTabs(): void {
     if (this.isVertical && this.tabWidth && this.tabWidth !== "auto") {
       this.style.setProperty("--udex-tab-header-width", this.tabWidth);

package/src/TabNavigationPopoverTemplate.tsx

@@ -0,0 +1,27 @@
+import type UDExTabNavigation from "./TabNavigation.js";
+import type UDExTab from "./Tab.js";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
+import UI5PopoverHAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
+import UI5PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
+import TabInOverflowTemplate from "./TabInOverflowTemplate.js";
+
+export default function TabNavigationPopoverTemplate(this: UDExTabNavigation) {
+  return (
+    <Popover
+      id={`${this._id}-overflow-popover`}
+      aria-orientation="vertical"
+      horizontal-align={UI5PopoverHAlign.End}
+      placement={UI5PopoverPlacement.Bottom}
+      onui5-open={this.onFocusFirstItemPopover}
+      hide-arrow
+      {...({ _hideHeader: true } as object)}>
+      <div
+        class="tab-navigation-popover"
+        onClick={this.handleOverflowItemClick}
+        onKeyDown={this.handleFocusPopover}
+        role="tablist">
+        {this._overflowItems.map(item => TabInOverflowTemplate.call(item as unknown as UDExTab))}
+      </div>
+    </Popover>
+  );
+}

package/src/TabNavigationTemplate.tsx

@@ -0,0 +1,98 @@
+import type UDExTabNavigation from "./TabNavigation.js";
+import type UDExTab from "./Tab.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import TabNavigationPopoverTemplate from "./TabNavigationPopoverTemplate.js";
+import TabHeaderTemplate from "./TabHeaderTemplate.js";
+
+export default function TabNavigationTemplate(this: UDExTabNavigation) {
+  return (
+    <div className="udex-tab-navigation__root">
+      <div
+        id={`${this._id}-header`}
+        className="udex-tab-navigation__header"
+        part="tab-navigation-header">
+        {this.showPlayButton && (
+          <UDExButton
+            class="udex-tab-navigation__play-button"
+            design={UDExButtonDesign.Tertiary}
+            size={UDExButtonSize.Large}
+            icon={this.playBtnIcon}
+            tooltip={this.playBtnTooltipText}
+            onClick={this.onPlayButtonClick}>
+          </UDExButton>
+        )}
+        <div
+          id={`${this._id}-header-tabs`}
+          className="udex-tab-navigation__header-tabs"
+          role="tablist"
+          aria-labelledby={`tablist-${this._id}`}
+          aria-orientation={this.ariaOrientationValue as "horizontal" | "vertical"}
+          part="tab-navigation-header-tabs"
+          onClick={this.onTabClick}
+          onKeyDown={this.handleKeyDown}>
+          {this.items.map(item => (
+            <>
+              {TabHeaderTemplate.call(item as unknown as UDExTab)}
+              {(item as unknown as UDExTab).isMobileVertical && item.selected && (
+                <div
+                  className="udex-tab-navigation__content"
+                  part="tab-navigation-content">
+                  <div
+                    className="udex-tab-navigation__content-item"
+                    id={`${item._contentId}-mobile`}
+                    role="tabpanel"
+                    aria-labelledby={item._id}>
+                    <slot name={item._slotName}></slot>
+                  </div>
+                </div>
+              )}
+            </>
+          ))}
+        </div>
+        <UDExButton
+          class="udex-tab-navigation__button-more"
+          end-icon="navigation-down-arrow"
+          aria-haspopup="menu"
+          design={UDExButtonDesign.Tertiary}
+          size={this.sizeMoreButton}
+          onClick={this.handleMoreButton}
+          onKeyDown={this.handleFocusMoreButton}
+          aria-expanded={this._isExpanded}
+          hidden>
+          {this.moreButtonText}
+        </UDExButton>
+        {!!this._overflowItems.length && TabNavigationPopoverTemplate.call(this)}
+        {this.showFooterSlot && (
+          <div className="udex-tab-navigation__footer" part="tab-navigation-footer">
+            <slot name="footer"></slot>
+          </div>
+        )}
+      </div>
+      <div
+        className="udex-tab-navigation__content"
+        id={`udex-${this._id}-content`}
+        part="tab-navigation-content">
+        {this.items.map(item => (
+          item.selected ? (
+            <div
+              className="udex-tab-navigation__content-item"
+              id={item._contentId}
+              aria-hidden={item.isMobile}
+              role="tabpanel"
+              aria-labelledby={item._id}>
+              <slot name={item._slotName}></slot>
+            </div>
+          ) : (
+            <div
+              className="udex-tab-navigation__content-item"
+              id={item._contentId}>
+              <slot name={item._slotName}></slot>
+            </div>
+          )
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/TabTemplate.tsx

@@ -0,0 +1,7 @@
+import type UDExTab from "./Tab.js";
+
+export default function TabTemplate(this: UDExTab) {
+  return (
+    <slot></slot>
+  );
+}

package/src/Tag.ts

@@ -289,6 +289,13 @@ class UDExTag extends UI5Element {
     this.focused = !this.focused;
   }
 
+  override getFocusDomRef(): HTMLElement | undefined {
+    if (this.nonSelectable) {
+      return this.getDomRef()?.querySelector<HTMLElement>("button") ?? undefined;
+    }
+    return super.getFocusDomRef();
+  }
+
   get tagClasses(): string {
     const hasIconClass = this.hasIcon ? "udex-tag--has-icon" : "";
     const readOnlyClass = this.readOnly ? "udex-tag--readonly" : "";

package/src/TagGroup.ts

@@ -251,9 +251,11 @@ class UDExTagGroup extends UI5Element {
       const active = getActiveElement();
       const moreLink = this._tokenizer.moreLink;
       if (active === moreLink) {
-        e.preventDefault();
         const focusDomRef = this._lastVisibleTag?.getFocusDomRef();
-        focusDomRef?.focus();
+        if (focusDomRef) {
+          e.preventDefault();
+          focusDomRef.focus();
+        }
       }
     }
   }