@sapudex/web-components 2.57.0 → 2.59.0

package/src/SecondaryNavigationSubItemTemplate.tsx

@@ -0,0 +1,63 @@
+import type UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import slimArrowLeftIcon from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import slimArrowRightIcon from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+
+export default function SecondaryNavigationSubItemTemplate(this: UDExSecondaryNavigationSubItem) {
+  if (this.isBack) {
+    return (
+      <button
+        className="udex-secondary-navigation__dropdown-item"
+        onClick={this.onBackItemClick as any}
+        aria-label={this.backButtonAriaLabel}
+        tabindex={0}
+        {...{ "is-back": "" }}>
+        <UI5Icon
+          class="udex-secondary-navigation__dropdown-icon udex-secondary-navigation__dropdown-icon_back"
+          name={slimArrowLeftIcon}
+          mode={IconMode.Decorative}>
+        </UI5Icon>
+        {this.itemLabel}
+      </button>
+    );
+  }
+
+  if (this.isButton) {
+    return (
+      <button
+        onClick={this.onItemClick as any}
+        aria-haspopup={this.hasItems || undefined}
+        {...{
+          "sub-active": this.isSubItemActive || undefined,
+          "active": this.active || undefined,
+        }}
+        aria-label={this.label || undefined}
+        tabindex={0}
+        aria-current={(this.ariaCurrent || undefined) as "page" | undefined}
+        className="udex-secondary-navigation__dropdown-item">
+        {this.itemLabel}
+        {this.hasItems && (
+          <UI5Icon
+            class="udex-secondary-navigation__dropdown-icon"
+            name={slimArrowRightIcon}
+            mode={IconMode.Decorative}>
+          </UI5Icon>
+        )}
+      </button>
+    );
+  }
+
+  return (
+    <a
+      className="udex-secondary-navigation__dropdown-item"
+      onClick={this.onItemClick as any}
+      href={this.path}
+      target={this.target}
+      tabindex={0}
+      aria-current={(this.ariaCurrent || undefined) as "page" | undefined}
+      {...{ "active": this.active || undefined }}>
+      {this.itemLabel}
+    </a>
+  );
+}

package/src/SecondaryNavigationTemplate.tsx

@@ -0,0 +1,90 @@
+import type UDExSecondaryNavigation from "./SecondaryNavigation.js";
+import UDExSecondaryNavigationItem from "./SecondaryNavigationItem.js";
+
+export default function SecondaryNavigationTemplate(this: UDExSecondaryNavigation) {
+  return (
+    <div className={this.rootClass}>
+      {this.hasBreadcrumbsSlot && (
+        <div className="udex-secondary-navigation__breadcrumbs">
+          <slot name="breadcrumbs"></slot>
+        </div>
+      )}
+      <div className="udex-secondary-navigation__holder">
+        {this.heading.length > 0 && (
+          <div className="udex-secondary-navigation__heading">
+            {this.headingHref.length > 0 ? (
+              <a
+                className="udex-secondary-navigation__title"
+                tabindex={0}
+                onClick={this.handleHeadingClick as any}
+                href={this.headingHref}>
+                {this.heading}
+              </a>
+            ) : (
+              <span className="udex-secondary-navigation__title">{this.heading}</span>
+            )}
+          </div>
+        )}
+        <nav className="udex-secondary-navigation__wrap">
+          <ul
+            className="udex-secondary-navigation__list"
+            onKeyDown={this.handleKeyDown}>
+            {this.visibleItems.map((item, index) => (
+              <li className="udex-secondary-navigation__list-item">
+                <UDExSecondaryNavigationItem
+                  index={index}
+                  active={item.active}
+                  path={item.path}
+                  label={item.title}
+                  mobile-link-title={item.mobileLinkTitle}
+                  target={item.target}
+                  subItems={item.items ?? []}
+                  onui5-sub-item-click={this.handleSubItemClick}
+                  onui5-nav-item-click={this.handleItemClick}
+                  {...{ "_nav-items-length": this.visibleItems.length }}>
+                </UDExSecondaryNavigationItem>
+              </li>
+            ))}
+            {this._showMoreButton && (
+              <li className="udex-secondary-navigation__list-item">
+                <UDExSecondaryNavigationItem
+                  index={this.visibleItems.length}
+                  onui5-sub-item-click={this.handleSubItemClick}
+                  onui5-nav-item-click={this.handleItemClick}
+                  label={this.moreButtonText}
+                  subItems={this._overflowItems}
+                  {...{ "_nav-items-length": this.visibleItems.length }}>
+                </UDExSecondaryNavigationItem>
+              </li>
+            )}
+          </ul>
+          {this.hasDesktopButtonsSlot && (
+            <div className="udex-secondary-navigation__buttons">
+              <slot name="buttons"></slot>
+            </div>
+          )}
+        </nav>
+      </div>
+      <UDExSecondaryNavigationItem
+        class="udex-secondary-navigation__mobile-nav"
+        role="button"
+        aria-label={this.mobileMenuOpenerAriaLabel}
+        label={this.heading}
+        mobile-link-title={this.title}
+        onui5-nav-item-click={this.handleMobileMenuOpenerClick}
+        onui5-sub-item-click={this.handleSubItemClick}
+        onKeyDown={this.handleKeyDown}
+        subItems={this.parsedItems}
+        {...{
+          "_is-mobile-menu-opener": "",
+          "_max-height": this.maxDropdownHeight
+        }}>
+        {this.hasMobileButtonsSlot && (
+          <div className="udex-secondary-navigation__buttons" onClick={this.handleMobileButtonsClick}>
+            <slot name="buttons"></slot>
+          </div>
+        )}
+      </UDExSecondaryNavigationItem>
+    </div>
+  );
+}

package/src/SelectBase.ts

@@ -14,7 +14,7 @@ import type UDExSearch from "./Search.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import {
-  COUNTRY_SELECT, STARS, SELECTED, UNSELECTED, INDETERMINATE, DISABLED,
+  COUNTRY_SELECT, STARS, SELECTED, UNSELECTED, INDETERMINATE, DISABLED, EXPANDED, COLLAPSED,
 } from "./generated/i18n/i18n-defaults.js";
 import SearchableListBaseTemplate from "./SearchableListBaseTemplate.js";
 import CountrySelectorTemplate from "./CountrySelectorTemplate.js";
@@ -697,6 +697,12 @@ class UDExSelectBase extends UDExSearchableListBase {
       e.preventDefault();
       const activeItem = this._activeDescendantItem;
       if (activeItem.isGroup) {
+        // Group-header selection is "select all" — only meaningful in MultiSelect.
+        // In SingleSelect (and RadioGroup) a group header is not a selectable option,
+        // so Enter/Space must do nothing (collapse/expand stays on Left/Right + chevron).
+        if (!this.modeMultiSelect) {
+          return;
+        }
         // Group header: fire header-press (same event the click handler fires) so
         // handleHeaderPress → onHeaderPress → handleGroupHeaderSelection runs.
         activeItem.fireDecoratorEvent("header-press", { item: activeItem });
@@ -1138,8 +1144,7 @@ class UDExSelectBase extends UDExSearchableListBase {
     const parts: string[] = [];
 
     if (item.collapsible) {
-      // Use plain English — matches what AT announce for aria-expanded.
-      parts.push(item.expanded ? "expanded" : "collapsed");
+      parts.push(translate(UDExSearchableListBase, item.expanded ? EXPANDED : COLLAPSED));
     }
 
     if (item.disabled) {

package/src/SideNavigationMobile.ts

@@ -3,13 +3,9 @@ import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
-import UDExSideNavigation from "./SideNavigation.js";
-import UDExDropdown from "./Dropdown.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
-
-import SideNavigationMobileTemplate from "./generated/templates/SideNavigationMobileTemplate.lit.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import SideNavigationMobileTemplate from "./SideNavigationMobileTemplate.js";
+import type UDExDropdown from "./Dropdown.js";
 import type UDExSideNavigationItem from "./SideNavigationItem.js";
 import type UDExSideNavigationSubItem from "./SideNavigationSubItem.js";
 import type UDExSideNavigationGroup from "./SideNavigationGroup.js";
@@ -39,10 +35,9 @@ export type SelectedItem = UDExSideNavigationItem | UDExSideNavigationSubItem |
  */
 @customElement({
   tag: "udex-side-navigation-mobile",
-  renderer: litRender,
+  renderer: jsxRenderer,
   template: SideNavigationMobileTemplate,
   styles: [SideNavigationMobileCss, SideNavigationMobileDropdownCss],
-  dependencies: [UDExSideNavigation, UDExDropdown, Icon],
 })
 
 class UDExSideNavigationMobile extends UI5Element {
@@ -86,23 +81,35 @@ class UDExSideNavigationMobile extends UI5Element {
     _selectedItem!: SelectedItem;
 
   _navItems!: Array<UDExSideNavigationItem | UDExSideNavigationGroup>;
-  _initialized = false;
   _dropdown!: UDExDropdown;
 
   onBeforeRendering() {
-    if (!this._initialized) {
-      const items = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>("navItems");
-      const fixedItems = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>("fixedItems");
-      this._navItems = items.concat(fixedItems);
+    const items = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>("navItems");
+    const fixedItems = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>("fixedItems");
+    const allItems = items.concat(fixedItems);
+    if (allItems.length > 0) {
+      this._navItems = allItems;
+    }
+    if (!this._selectedItem && this._navItems?.length) {
       this._selectedItem = this.getSelectedItem() || null;
     }
-    this._initialized = true;
   }
 
   onAfterRendering() {
     this._dropdown = this._getResponsePopover();
   }
 
+  _setNavItems = (sideNavigation: HTMLElement | null) => {
+    if (!sideNavigation) {
+      return;
+    }
+    this._navItems?.forEach(item => {
+      if (item.parentElement !== sideNavigation) {
+        sideNavigation.appendChild(item);
+      }
+    });
+  };
+
   _getResponsePopover(): UDExDropdown {
     return this.shadowRoot!.querySelector<UDExDropdown>(`[udex-dropdown]`)!;
   }
@@ -133,9 +140,9 @@ class UDExSideNavigationMobile extends UI5Element {
 
   getSelectedItem(): UDExSideNavigationItem | UDExSideNavigationSubItem | undefined {
     const items = this._navItems.reduce((result, item) => {
-      return (result).concat(item.allItems as UDExSideNavigationSubItem[]);
+      return (result).concat((item.allItems as UDExSideNavigationSubItem[]) || []);
     }, new Array<UDExSideNavigationItem | UDExSideNavigationSubItem>());
-    return items.find(item => item._selected);
+    return items.find(item => item?._selected);
   }
 }
 

package/src/SideNavigationMobileTemplate.tsx

@@ -0,0 +1,59 @@
+import type UDExSideNavigationMobile from "./SideNavigationMobile.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import UDExDropdown from "./Dropdown.js";
+import UDExSideNavigation from "./SideNavigation.js";
+import { PopoverActualHorizontalAlign, PopoverActualPlacement } from "@ui5/webcomponents/Popover.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+
+export default function SideNavigationMobileTemplate(this: UDExSideNavigationMobile) {
+  return (
+    <>
+      <div
+        id={`udex-${this._id}-side-navigation-mobile__opener`}
+        class="udex-side-navigation-mobile__trigger"
+        aria-haspopup="true"
+        tabindex={0}
+        onKeyDown={this.handleKeydown}
+        onClick={this.handleTriggerClick}
+        accessible-role="button"
+        {...{
+          "active": this._dropdownOpened || undefined,
+        }}>
+        <div class="udex-side-navigation-mobile__selected-item">
+          {this._selectedItem ? (
+            <>
+              {this._selectedItem.icon ? (
+                <Icon
+                  class="udex-side-navigation-mobile__selected-item-icon"
+                  name={this._selectedItem.icon}>
+                </Icon>
+              ) : undefined}
+              <span>{this._selectedItem.text}</span>
+            </>
+          ) : undefined}
+        </div>
+        <Icon
+          class="udex-side-navigation-mobile__trigger-toggle-icon"
+          name={slimArrowDown}>
+        </Icon>
+      </div>
+      <UDExDropdown
+        id={`udex-${this._id}-side-navigation-mobile__popover`}
+        class="udex-side-navigation-mobile__popover"
+        placement={PopoverActualPlacement.Bottom}
+        onOpen={this._afterDropdownOpen}
+        onClose={this._afterDropdownClose}
+        horizontalAlign={PopoverActualHorizontalAlign.Stretch}
+        height="none"
+        {...{
+          "opener": `udex-${this._id}-side-navigation-mobile__opener`,
+          "disable-target-overlap": "true",
+        }}>
+        <UDExSideNavigation
+          ref={this._setNavItems}
+          onSelectionChange={this._handleSelectionChanged as any}>
+        </UDExSideNavigation>
+      </UDExDropdown>
+    </>
+  );
+}

package/src/Tab.ts

@@ -3,21 +3,18 @@ import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import TabNavigation from "./TabNavigation.js";
 import UDExBadge from "./Badge.js";
 import { UDExTarget } from "./types/common.js";
-import TabTemplate from "./generated/templates/TabTemplate.lit.js";
-import TabHeaderTemplate from "./generated/templates/TabHeaderTemplate.lit.js";
-import TabInOverflowTemplate from "./generated/templates/TabInOverflowTemplate.lit.js";
+import TabTemplate from "./TabTemplate.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { ATTENTION_BADGE } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import TabInOverflowCss from "./generated/themes/TabInOverflow.css.js";
-import translate from "./utils/translate.js";
 
 export interface ITab extends UI5Element {
   getTabInHeaderDomRef: () => ITab | null;
@@ -40,7 +37,6 @@ export interface ITab extends UI5Element {
   hasNotHref: boolean;
   hasLinkSlot: boolean;
   selectedClass: string;
-  tabNavigation: any;
   _individualSlot: string;
   _effectiveSlotName: string;
   _slotName: string;
@@ -79,7 +75,7 @@ export interface ITab extends UI5Element {
  */
 @customElement({
   tag: "udex-tab",
-  renderer: litRender,
+  renderer: jsxRenderer,
   template: TabTemplate,
   dependencies: [UDExBadge],
 })
@@ -409,22 +405,6 @@ class UDExTab extends UI5Element implements ITab {
     }
     return "";
   }
-
-  get tabNavigation() {
-    return executeTemplate(UDExTab.headerTemplate, this);
-  }
-
-  get tabInOverflow() {
-    return executeTemplate(UDExTab.overflowTemplate, this);
-  }
-
-  static get headerTemplate() {
-    return TabHeaderTemplate;
-  }
-
-  static get overflowTemplate() {
-    return TabInOverflowTemplate;
-  }
 }
 
 UDExTab.define();

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>
+  );
+}