@sapudex/web-components 2.57.0 → 2.59.0

package/dist/Tab.js

@@ -9,19 +9,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 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 { 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";
 /**
  * @class
  *
@@ -177,18 +174,6 @@ let UDExTab = UDExTab_1 = class UDExTab extends UI5Element {
         }
         return "";
     }
-    get tabNavigation() {
-        return executeTemplate(UDExTab_1.headerTemplate, this);
-    }
-    get tabInOverflow() {
-        return executeTemplate(UDExTab_1.overflowTemplate, this);
-    }
-    static get headerTemplate() {
-        return TabHeaderTemplate;
-    }
-    static get overflowTemplate() {
-        return TabInOverflowTemplate;
-    }
 };
 __decorate([
     property({ type: String })
@@ -259,7 +244,7 @@ __decorate([
 UDExTab = UDExTab_1 = __decorate([
     customElement({
         tag: "udex-tab",
-        renderer: litRender,
+        renderer: jsxRenderer,
         template: TabTemplate,
         dependencies: [UDExBadge],
     })

package/dist/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../src/Tab.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport executeTemplate from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport TabNavigation from \"./TabNavigation.js\";\nimport UDExBadge from \"./Badge.js\";\nimport { UDExTarget } from \"./types/common.js\";\nimport TabTemplate from \"./generated/templates/TabTemplate.lit.js\";\nimport TabHeaderTemplate from \"./generated/templates/TabHeaderTemplate.lit.js\";\nimport TabInOverflowTemplate from \"./generated/templates/TabInOverflowTemplate.lit.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { ATTENTION_BADGE } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport TabInOverflowCss from \"./generated/themes/TabInOverflow.css.js\";\nimport translate from \"./utils/translate.js\";\n\nexport interface ITab extends UI5Element {\n  getTabInHeaderDomRef: () => ITab | null;\n  disabled?: boolean;\n  icon?: string;\n  selected?: boolean;\n  numberBadge?: string;\n  text?: string;\n  bodyText?: string;\n  itemCountText?: string;\n  showAttentionBadge?: boolean;\n  accessibleName?: string;\n  href?: string;\n  content?: Array<Node>;\n  link?: Array<HTMLElement>;\n  hasIcon: boolean;\n  isMobile: boolean;\n  isOnSelectedTab: boolean;\n  hasNotIcon: boolean;\n  hasNotHref: boolean;\n  hasLinkSlot: boolean;\n  selectedClass: string;\n  tabNavigation: any;\n  _individualSlot: string;\n  _effectiveSlotName: string;\n  _slotName: string;\n  _selected?: boolean;\n  _tabIndex: string;\n  _isMobile: boolean;\n  _isVertical: boolean;\n  _isProcessTab: boolean;\n  _iconWithoutBackground: boolean;\n  _posinset?: number;\n  _setsize?: number;\n  _contentId?: string;\n  getElementInHeader?: () => ITab | null;\n  _realTab?: UDExTab;\n  _width?: string;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-tab</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Tab.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-tab\n * @public\n */\n@customElement({\n  tag: \"udex-tab\",\n  renderer: litRender,\n  template: TabTemplate,\n  dependencies: [UDExBadge],\n})\n\nclass UDExTab extends UI5Element implements ITab {\n  /**\n   * Defines the Badge at the end of the Tab item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    numberBadge?: string;\n\n  /**\n   * Defines the text of tab.\n   *\n   * @public\n   */\n  @property({ type: String })\n    text!: string;\n\n  /**\n   * Defines the body text (supplementary description) of the tab.\n   * Optional text to provide additional context or explanation.\n   *\n   * @public\n   */\n  @property({ type: String })\n    bodyText?: string;\n\n  /**\n   * Accessible name for tab.\n   *\n   * @public\n   */\n  @property({ type: String })\n    accessibleName!: string;\n\n  /**\n   * Defines the selected tab.\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    selected!: boolean;\n\n  /**\n   * Defines the displaying attention badge.\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    showAttentionBadge!: boolean;\n\n  /**\n   * Defines the icon in the tab.\n   *\n   * @public\n   */\n  @property({ type: String })\n    icon!: string;\n\n  /**\n   * Defines if the tab is disabled. A disabled tab is not clickable or focusable,\n   * but remains reachable by screen readers via aria-disabled.\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines the href of the tab.\n   *\n   * @public\n   */\n  @property({ type: String })\n    href!: string;\n\n  /**\n   * Define the target of the tab\n   *\n   * @public\n   */\n  @property()\n    target: `${UDExTarget}` = UDExTarget._self;\n\n  /**\n   * Defines the tab.\n   *\n   * @private\n   */\n  @property({ type: Object })\n    _realTab!: UDExTab;\n\n  /**\n   * Defines the selected tab for private use.\n   *\n   * @private\n   * @default false\n   */\n  @property({ type: Boolean })\n    _selected!: boolean;\n\n  /**\n   * Defines the tabindex of the tab.\n   *\n   * @private\n   * @default false\n   */\n  @property({ type: String })\n    _tabIndex!: string;\n\n  /**\n   * Defines if the viewport is mobile size.\n   *\n   * @private\n   * @default false\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _isMobile: boolean = false;\n\n  /**\n   * Defines if the tab navigation is in vertical orientation.\n   *\n   * @private\n   * @default false\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _isVertical: boolean = false;\n\n  /**\n   * Defines the width of the tab.\n   *\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    _width?: string;\n\n  /**\n   * Defines the item count text displayed above the tab label in Process Tab variant.\n   * Only rendered when the tab navigation uses the Process Tab variant.\n   *\n   * @public\n   */\n  @property({ type: String })\n    itemCountText?: string;\n\n  /**\n   * Defines the background color of the component.\n   *\n   * @private\n   * @default false\n  */\n  @property({ type: Boolean })\n    _iconWithoutBackground!: boolean;\n\n  /**\n   * Defines if the tab navigation is in process-tab variant.\n   *\n   * @private\n   * @default false\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _isProcessTab: boolean = false;\n\n  /**\n   * Defines the content of the tab.\n   *\n   * @slot content\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: DefaultSlot<Node>;\n\n  /**\n   * Defines the link(s) to be displayed in the tab header (vertical orientation only).\n   * Use this slot to add one or more udex-link elements to the tab button.\n   *\n   * @slot link\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    link!: Slot<HTMLElement>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  getElementInHeader?: () => ITab | null;\n  _individualSlot!: string;\n\n  getTabInHeaderDomRef(): ITab | null {\n    if (this.getElementInHeader) {\n      return this.getElementInHeader();\n    }\n\n    return null;\n  }\n\n  get ariaDisabled(): string | null {\n    return this.disabled ? \"true\" : null;\n  }\n\n  get hasItemCountText(): boolean {\n    return this._isProcessTab && !!this.itemCountText;\n  }\n\n  get effectiveItemCountText(): string {\n    return this.itemCountText || \"0\";\n  }\n\n  get processTabClass(): string {\n    return this._isProcessTab ? \" udex-tab-navigation__button-tab--process\" : \"\";\n  }\n\n  get isOnSelectedTab(): boolean {\n    return this._realTab === this;\n  }\n\n  get _effectiveSlotName(): string {\n    return this.isOnSelectedTab ? this._individualSlot : `disabled-${this._individualSlot}`;\n  }\n\n  get hasIcon(): boolean {\n    return !!this.icon;\n  }\n\n  get classWithIcon(): string {\n    return this.hasIcon ? \"udex-tab-navigation__button-text--icon\" : \"\";\n  }\n\n  get buttonClassWithIcon(): string {\n    return this.hasIcon ? \" udex-tab-navigation__button-tab--icon\" : \"\";\n  }\n\n  get isMobile(): boolean {\n    return this._isMobile;\n  }\n\n  get isMobileVertical(): boolean {\n    return this._isMobile && this._isVertical;\n  }\n\n  get hasNotIcon(): boolean {\n    return !this.icon && this.showAttentionBadge;\n  }\n\n  get hasNotHref(): boolean {\n    return !this.href;\n  }\n\n  get hasBodyText(): boolean {\n    return !!this.bodyText;\n  }\n\n  /**\n   * Returns true if aria-describedby should point to bodyText.\n   * Only applies to selected tabs with bodyText in vertical orientation.\n   */\n  get ariaDescribedByBodyText(): boolean {\n    return this.effectiveSelected && this.hasBodyText && this._isVertical;\n  }\n\n  get hasBodyTextOrLink(): boolean {\n    return this._isVertical && (this.hasBodyText || this.hasLinkSlot);\n  }\n\n  get hasLinkSlot(): boolean {\n    return this.link && this.link.length > 0;\n  }\n\n  /**\n   * Returns the HTML content of the link slot elements.\n   * This is used to render the links in the TabHeader template.\n   */\n  get linkSlotHtml(): string {\n    if (!this.link || this.link.length === 0) {\n      return \"\";\n    }\n    return this.link.map(l => l.outerHTML).join(\"\");\n  }\n\n  get effectiveSelected(): boolean {\n    return this.selected || this._selected;\n  }\n\n  get selectedClass(): string {\n    return this.effectiveSelected ? \"udex-tab-navigation__button-tab--active\" : \"\";\n  }\n\n  get classWithIconWithoutBackground(): string {\n    return this.hasIcon && !this._iconWithoutBackground ? \" udex-tab-navigation__button-tab--icon-tab\" : \"\";\n  }\n\n  get _slotName(): string {\n    return this.isOnSelectedTab ? this._individualSlot : `disabled-${this._individualSlot}`;\n  }\n\n  get ariaLabelledBy(): string {\n    const labels = [];\n\n    if (this.text) {\n      labels.push(`${this.__id!}-text`);\n    }\n\n    if (this.icon) {\n      labels.push(`${this.__id!}-icon`);\n    }\n\n    return labels.join(\" \");\n  }\n\n  get accessibleNameText(): string {\n    return this.accessibleName || (this.showAttentionBadge ? `, ${translate(UDExTab, ATTENTION_BADGE)}` : \"\");\n  }\n\n  get linkTabIndex(): string {\n    return this.href && this.effectiveSelected ? \"1\" : \"-1\";\n  }\n\n  get widthStyle(): string {\n    if (this._width && this._width !== \"auto\") {\n      return `width: ${this._width};`;\n    }\n    return \"\";\n  }\n\n  get tabNavigation() {\n    return executeTemplate(UDExTab.headerTemplate, this);\n  }\n\n  get tabInOverflow() {\n    return executeTemplate(UDExTab.overflowTemplate, this);\n  }\n\n  static get headerTemplate() {\n    return TabHeaderTemplate;\n  }\n\n  static get overflowTemplate() {\n    return TabInOverflowTemplate;\n  }\n}\n\nUDExTab.define();\n\nTabNavigation.registerStaticAreaTabStyles(TabInOverflowCss);\n\nexport default UDExTab;\n"]}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../src/Tab.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAE7C,SAAS;AACT,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AAwCvE;;;;;;;;;;;;;;;;;;GAkBG;AAQH,IAAM,OAAO,eAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QA8EE;;;;WAIG;QAED,WAAM,GAAoB,UAAU,CAAC,KAAK,CAAC;QA4B7C;;;;;WAKG;QAED,cAAS,GAAY,KAAK,CAAC;QAE7B;;;;;WAKG;QAED,gBAAW,GAAY,KAAK,CAAC;QA4B/B;;;;;WAKG;QAED,kBAAa,GAAY,KAAK,CAAC;IAkKnC,CAAC;IAvIC,oBAAoB;QAClB,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC5B,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACnC,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;IACvC,CAAC;IAED,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;IACpD,CAAC;IAED,IAAI,sBAAsB;QACxB,OAAO,IAAI,CAAC,aAAa,IAAI,GAAG,CAAC;IACnC,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,2CAA2C,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/E,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC;IAChC,CAAC;IAED,IAAI,kBAAkB;QACpB,OAAO,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,eAAe,EAAE,CAAC;IAC1F,CAAC;IAED,IAAI,OAAO;QACT,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACrB,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,wCAAwC,CAAC,CAAC,CAAC,EAAE,CAAC;IACtE,CAAC;IAED,IAAI,mBAAmB;QACrB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,wCAAwC,CAAC,CAAC,CAAC,EAAE,CAAC;IACtE,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC;IAC5C,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,kBAAkB,CAAC;IAC/C,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;IACpB,CAAC;IAED,IAAI,WAAW;QACb,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IAED;;;OAGG;IACH,IAAI,uBAAuB;QACzB,OAAO,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC;IACxE,CAAC;IAED,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC;IACpE,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;IAC3C,CAAC;IAED;;;OAGG;IACH,IAAI,YAAY;QACd,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACzC,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAClD,CAAC;IAED,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC;IACzC,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,yCAAyC,CAAC,CAAC,CAAC,EAAE,CAAC;IACjF,CAAC;IAED,IAAI,8BAA8B;QAChC,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,4CAA4C,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1G,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,eAAe,EAAE,CAAC;IAC1F,CAAC;IAED,IAAI,cAAc;QAChB,MAAM,MAAM,GAAG,EAAE,CAAC;QAElB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAK,OAAO,CAAC,CAAC;QACpC,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAK,OAAO,CAAC,CAAC;QACpC,CAAC;QAED,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED,IAAI,kBAAkB;QACpB,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,SAAO,EAAE,eAAe,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC5G,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1D,CAAC;IAED,IAAI,UAAU;QACZ,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YAC1C,OAAO,UAAU,IAAI,CAAC,MAAM,GAAG,CAAC;QAClC,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC;CACF,CAAA;AA9TG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACJ;AAQrB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACX;AASd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACP;AAQlB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACD;AASxB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACP;AASnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACG;AAQ7B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACX;AAUd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACP;AAQnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACX;AAQd;IADD,QAAQ,EAAE;uCACkC;AAQ3C;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACN;AASnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACN;AASpB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACN;AASnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;0CAClB;AAS3B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;4CAChB;AAQ7B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;uCAC5B;AAShB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACF;AASvB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDACO;AASjC;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;8CACd;AAS/B;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;wCACR;AAU5B;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;qCACD;AAGpB;IADN,IAAI,CAAC,yBAAyB,CAAC;iCACF;AAzL1B,OAAO;IAPZ,aAAa,CAAC;QACb,GAAG,EAAE,UAAU;QACf,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,WAAW;QACrB,YAAY,EAAE,CAAC,SAAS,CAAC;KAC1B,CAAC;GAEI,OAAO,CAqUZ;AAED,OAAO,CAAC,MAAM,EAAE,CAAC;AAEjB,aAAa,CAAC,2BAA2B,CAAC,gBAAgB,CAAC,CAAC;AAE5D,eAAe,OAAO,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport TabNavigation from \"./TabNavigation.js\";\nimport UDExBadge from \"./Badge.js\";\nimport { UDExTarget } from \"./types/common.js\";\nimport TabTemplate from \"./TabTemplate.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { ATTENTION_BADGE } from \"./generated/i18n/i18n-defaults.js\";\nimport translate from \"./utils/translate.js\";\n\n// Styles\nimport TabInOverflowCss from \"./generated/themes/TabInOverflow.css.js\";\n\nexport interface ITab extends UI5Element {\n  getTabInHeaderDomRef: () => ITab | null;\n  disabled?: boolean;\n  icon?: string;\n  selected?: boolean;\n  numberBadge?: string;\n  text?: string;\n  bodyText?: string;\n  itemCountText?: string;\n  showAttentionBadge?: boolean;\n  accessibleName?: string;\n  href?: string;\n  content?: Array<Node>;\n  link?: Array<HTMLElement>;\n  hasIcon: boolean;\n  isMobile: boolean;\n  isOnSelectedTab: boolean;\n  hasNotIcon: boolean;\n  hasNotHref: boolean;\n  hasLinkSlot: boolean;\n  selectedClass: string;\n  _individualSlot: string;\n  _effectiveSlotName: string;\n  _slotName: string;\n  _selected?: boolean;\n  _tabIndex: string;\n  _isMobile: boolean;\n  _isVertical: boolean;\n  _isProcessTab: boolean;\n  _iconWithoutBackground: boolean;\n  _posinset?: number;\n  _setsize?: number;\n  _contentId?: string;\n  getElementInHeader?: () => ITab | null;\n  _realTab?: UDExTab;\n  _width?: string;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-tab</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Tab.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-tab\n * @public\n */\n@customElement({\n  tag: \"udex-tab\",\n  renderer: jsxRenderer,\n  template: TabTemplate,\n  dependencies: [UDExBadge],\n})\n\nclass UDExTab extends UI5Element implements ITab {\n  /**\n   * Defines the Badge at the end of the Tab item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    numberBadge?: string;\n\n  /**\n   * Defines the text of tab.\n   *\n   * @public\n   */\n  @property({ type: String })\n    text!: string;\n\n  /**\n   * Defines the body text (supplementary description) of the tab.\n   * Optional text to provide additional context or explanation.\n   *\n   * @public\n   */\n  @property({ type: String })\n    bodyText?: string;\n\n  /**\n   * Accessible name for tab.\n   *\n   * @public\n   */\n  @property({ type: String })\n    accessibleName!: string;\n\n  /**\n   * Defines the selected tab.\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    selected!: boolean;\n\n  /**\n   * Defines the displaying attention badge.\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    showAttentionBadge!: boolean;\n\n  /**\n   * Defines the icon in the tab.\n   *\n   * @public\n   */\n  @property({ type: String })\n    icon!: string;\n\n  /**\n   * Defines if the tab is disabled. A disabled tab is not clickable or focusable,\n   * but remains reachable by screen readers via aria-disabled.\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines the href of the tab.\n   *\n   * @public\n   */\n  @property({ type: String })\n    href!: string;\n\n  /**\n   * Define the target of the tab\n   *\n   * @public\n   */\n  @property()\n    target: `${UDExTarget}` = UDExTarget._self;\n\n  /**\n   * Defines the tab.\n   *\n   * @private\n   */\n  @property({ type: Object })\n    _realTab!: UDExTab;\n\n  /**\n   * Defines the selected tab for private use.\n   *\n   * @private\n   * @default false\n   */\n  @property({ type: Boolean })\n    _selected!: boolean;\n\n  /**\n   * Defines the tabindex of the tab.\n   *\n   * @private\n   * @default false\n   */\n  @property({ type: String })\n    _tabIndex!: string;\n\n  /**\n   * Defines if the viewport is mobile size.\n   *\n   * @private\n   * @default false\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _isMobile: boolean = false;\n\n  /**\n   * Defines if the tab navigation is in vertical orientation.\n   *\n   * @private\n   * @default false\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _isVertical: boolean = false;\n\n  /**\n   * Defines the width of the tab.\n   *\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    _width?: string;\n\n  /**\n   * Defines the item count text displayed above the tab label in Process Tab variant.\n   * Only rendered when the tab navigation uses the Process Tab variant.\n   *\n   * @public\n   */\n  @property({ type: String })\n    itemCountText?: string;\n\n  /**\n   * Defines the background color of the component.\n   *\n   * @private\n   * @default false\n  */\n  @property({ type: Boolean })\n    _iconWithoutBackground!: boolean;\n\n  /**\n   * Defines if the tab navigation is in process-tab variant.\n   *\n   * @private\n   * @default false\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _isProcessTab: boolean = false;\n\n  /**\n   * Defines the content of the tab.\n   *\n   * @slot content\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: DefaultSlot<Node>;\n\n  /**\n   * Defines the link(s) to be displayed in the tab header (vertical orientation only).\n   * Use this slot to add one or more udex-link elements to the tab button.\n   *\n   * @slot link\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    link!: Slot<HTMLElement>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  getElementInHeader?: () => ITab | null;\n  _individualSlot!: string;\n\n  getTabInHeaderDomRef(): ITab | null {\n    if (this.getElementInHeader) {\n      return this.getElementInHeader();\n    }\n\n    return null;\n  }\n\n  get ariaDisabled(): string | null {\n    return this.disabled ? \"true\" : null;\n  }\n\n  get hasItemCountText(): boolean {\n    return this._isProcessTab && !!this.itemCountText;\n  }\n\n  get effectiveItemCountText(): string {\n    return this.itemCountText || \"0\";\n  }\n\n  get processTabClass(): string {\n    return this._isProcessTab ? \" udex-tab-navigation__button-tab--process\" : \"\";\n  }\n\n  get isOnSelectedTab(): boolean {\n    return this._realTab === this;\n  }\n\n  get _effectiveSlotName(): string {\n    return this.isOnSelectedTab ? this._individualSlot : `disabled-${this._individualSlot}`;\n  }\n\n  get hasIcon(): boolean {\n    return !!this.icon;\n  }\n\n  get classWithIcon(): string {\n    return this.hasIcon ? \"udex-tab-navigation__button-text--icon\" : \"\";\n  }\n\n  get buttonClassWithIcon(): string {\n    return this.hasIcon ? \" udex-tab-navigation__button-tab--icon\" : \"\";\n  }\n\n  get isMobile(): boolean {\n    return this._isMobile;\n  }\n\n  get isMobileVertical(): boolean {\n    return this._isMobile && this._isVertical;\n  }\n\n  get hasNotIcon(): boolean {\n    return !this.icon && this.showAttentionBadge;\n  }\n\n  get hasNotHref(): boolean {\n    return !this.href;\n  }\n\n  get hasBodyText(): boolean {\n    return !!this.bodyText;\n  }\n\n  /**\n   * Returns true if aria-describedby should point to bodyText.\n   * Only applies to selected tabs with bodyText in vertical orientation.\n   */\n  get ariaDescribedByBodyText(): boolean {\n    return this.effectiveSelected && this.hasBodyText && this._isVertical;\n  }\n\n  get hasBodyTextOrLink(): boolean {\n    return this._isVertical && (this.hasBodyText || this.hasLinkSlot);\n  }\n\n  get hasLinkSlot(): boolean {\n    return this.link && this.link.length > 0;\n  }\n\n  /**\n   * Returns the HTML content of the link slot elements.\n   * This is used to render the links in the TabHeader template.\n   */\n  get linkSlotHtml(): string {\n    if (!this.link || this.link.length === 0) {\n      return \"\";\n    }\n    return this.link.map(l => l.outerHTML).join(\"\");\n  }\n\n  get effectiveSelected(): boolean {\n    return this.selected || this._selected;\n  }\n\n  get selectedClass(): string {\n    return this.effectiveSelected ? \"udex-tab-navigation__button-tab--active\" : \"\";\n  }\n\n  get classWithIconWithoutBackground(): string {\n    return this.hasIcon && !this._iconWithoutBackground ? \" udex-tab-navigation__button-tab--icon-tab\" : \"\";\n  }\n\n  get _slotName(): string {\n    return this.isOnSelectedTab ? this._individualSlot : `disabled-${this._individualSlot}`;\n  }\n\n  get ariaLabelledBy(): string {\n    const labels = [];\n\n    if (this.text) {\n      labels.push(`${this.__id!}-text`);\n    }\n\n    if (this.icon) {\n      labels.push(`${this.__id!}-icon`);\n    }\n\n    return labels.join(\" \");\n  }\n\n  get accessibleNameText(): string {\n    return this.accessibleName || (this.showAttentionBadge ? `, ${translate(UDExTab, ATTENTION_BADGE)}` : \"\");\n  }\n\n  get linkTabIndex(): string {\n    return this.href && this.effectiveSelected ? \"1\" : \"-1\";\n  }\n\n  get widthStyle(): string {\n    if (this._width && this._width !== \"auto\") {\n      return `width: ${this._width};`;\n    }\n    return \"\";\n  }\n}\n\nUDExTab.define();\n\nTabNavigation.registerStaticAreaTabStyles(TabInOverflowCss);\n\nexport default UDExTab;\n"]}

package/dist/TabHeaderTemplate.d.ts

@@ -0,0 +1,2 @@
+import type UDExTab from "./Tab.js";
+export default function TabHeaderTemplate(this: UDExTab): import("@ui5/webcomponents-base").JSX.Element;

package/dist/TabHeaderTemplate.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+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() {
+    const tab = this;
+    if (this.hasBodyTextOrLink) {
+        return (_jsxs("div", { class: "udex-tab-navigation__tab-wrapper", role: "presentation", style: this.widthStyle || undefined, children: [this.hasNotHref ? (_jsxs("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, children: [tabContent.call(this), this.ariaDescribedByBodyText && (_jsx("span", { class: "visually-hidden", children: this.bodyText }))] })) : (_jsxs("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, children: [tabContent.call(this), this.ariaDescribedByBodyText && (_jsx("span", { class: "visually-hidden", children: this.bodyText }))] })), this.hasBodyText && (_jsx("p", { class: "udex-tab-navigation__button-body-text", children: this.bodyText })), this.hasLinkSlot && (_jsx("div", { class: "udex-tab-navigation__button-links", ...{ innerHTML: this.linkSlotHtml } }))] }));
+    }
+    return this.hasNotHref ? (_jsx("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, children: tabContent.call(this) })) : (_jsx("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, children: tabContent.call(this) }));
+}
+function tabContent() {
+    return (_jsxs(_Fragment, { children: [this.hasIcon && (_jsxs("span", { class: "udex-tab-navigation__button-icon-outer", role: "presentation", "aria-hidden": "true", children: [_jsx(Icon, { class: "udex-tab-navigation__button-icon", name: this.icon }), this.showAttentionBadge && (_jsx("span", { class: "udex-tab-navigation__button-badge" }))] })), this._isProcessTab ? (_jsxs("span", { class: "udex-tab-navigation__button-text-block", children: [_jsx("span", { class: "udex-tab-navigation__button-item-count", children: this.effectiveItemCountText }), _jsxs("p", { class: `udex-tab-navigation__button-text ${this.classWithIcon}`, children: [this.text, this.numberBadge && (_jsx(UDExBadge, { class: "udex-tab-navigation__badge", type: UDExTypeBadgeDesign.Number, "number-design": UDExNumberBadgeDesign.Blue, size: UDExSizeBadgeDesign.Medium, children: this.numberBadge })), this.hasNotIcon && (_jsx("span", { class: "udex-tab-navigation__button-badge" }))] })] })) : (_jsxs("p", { class: `udex-tab-navigation__button-text ${this.classWithIcon}`, children: [this.text, this.numberBadge && (_jsx(UDExBadge, { class: "udex-tab-navigation__badge", type: UDExTypeBadgeDesign.Number, "number-design": UDExNumberBadgeDesign.Blue, size: UDExSizeBadgeDesign.Medium, children: this.numberBadge })), this.hasNotIcon && (_jsx("span", { class: "udex-tab-navigation__button-badge" }))] })), _jsx("span", { class: "visually-hidden", id: `udex-tab-navigation__${this._id}__accessible-name`, children: this.accessibleNameText })] }));
+}
+//# sourceMappingURL=TabHeaderTemplate.js.map

package/dist/TabHeaderTemplate.js.map

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

package/dist/TabInOverflowTemplate.d.ts

@@ -0,0 +1,2 @@
+import type UDExTab from "./Tab.js";
+export default function TabInOverflowTemplate(this: UDExTab): import("@ui5/webcomponents-base").JSX.Element;

package/dist/TabInOverflowTemplate.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+export default function TabInOverflowTemplate() {
+    const tab = this;
+    return this.hasNotHref ? (_jsxs("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), children: [this.hasIcon && (_jsxs("span", { class: "udex-tab-overflow__button-icon", role: "presentation", "aria-hidden": "true", children: [_jsx(Icon, { name: this.icon }), this.showAttentionBadge && (_jsx("span", { class: "udex-tab-overflow__button-badge" }))] })), this.text, this.hasNotIcon && (_jsx("span", { class: "udex-tab-overflow__button-badge", role: "presentation", "aria-hidden": "true" }))] })) : (_jsxs("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), children: [this.hasIcon && (_jsxs("span", { class: "udex-tab-overflow__button-icon", role: "presentation", "aria-hidden": "true", children: [_jsx(Icon, { name: this.icon }), this.showAttentionBadge && (_jsx("span", { class: "udex-tab-overflow__button-badge" }))] })), this.text, this.hasNotIcon && (_jsx("span", { class: "udex-tab-overflow__button-badge", role: "presentation", "aria-hidden": "true" }))] }));
+}
+//# sourceMappingURL=TabInOverflowTemplate.js.map

package/dist/TabInOverflowTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabInOverflowTemplate.js","sourceRoot":"","sources":["../src/TabInOverflowTemplate.tsx"],"names":[],"mappings":";AAEA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AAEnD,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC3C,MAAM,GAAG,GAAG,IAAuB,CAAC;IAEpC,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACvB,kBACE,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,KAAK,EAAC,2BAA2B,EACjC,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,iBAAiB,mBACtB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACrD,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,EAC7B,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,aAC9B,IAAI,CAAC,OAAO,IAAI,CACf,gBACE,KAAK,EAAC,gCAAgC,EACtC,IAAI,EAAC,cAAc,iBACP,MAAM,aAClB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAS,EAC7B,IAAI,CAAC,kBAAkB,IAAI,CAC1B,eAAM,KAAK,EAAC,iCAAiC,GAAQ,CACtD,IACI,CACR,EACA,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,UAAU,IAAI,CAClB,eACE,KAAK,EAAC,iCAAiC,EACvC,IAAI,EAAC,cAAc,iBACP,MAAM,GACb,CACR,IACM,CACV,CAAC,CAAC,CAAC,CACF,aACE,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAC/C,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAC,2BAA2B,EACjC,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,iBAAiB,mBACtB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACrD,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,aAC9B,IAAI,CAAC,OAAO,IAAI,CACf,gBACE,KAAK,EAAC,gCAAgC,EACtC,IAAI,EAAC,cAAc,iBACP,MAAM,aAClB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAS,EAC7B,IAAI,CAAC,kBAAkB,IAAI,CAC1B,eAAM,KAAK,EAAC,iCAAiC,GAAQ,CACtD,IACI,CACR,EACA,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,UAAU,IAAI,CAClB,eACE,KAAK,EAAC,iCAAiC,EACvC,IAAI,EAAC,cAAc,iBACP,MAAM,GACb,CACR,IACC,CACL,CAAC;AACJ,CAAC","sourcesContent":["import type UDExTab from \"./Tab.js\";\nimport type { ITab } from \"./Tab.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\n\nexport default function TabInOverflowTemplate(this: UDExTab) {\n  const tab = this as unknown as ITab;\n\n  return this.hasNotHref ? (\n    <button\n      id={this._id}\n      class=\"udex-tab-overflow__button\"\n      role=\"tab\"\n      aria-selected={this.effectiveSelected}\n      aria-disabled={this.ariaDisabled ? \"true\" : undefined}\n      disabled={!!this.ariaDisabled}\n      tabindex={Number(tab._tabIndex)}>\n      {this.hasIcon && (\n        <span\n          class=\"udex-tab-overflow__button-icon\"\n          role=\"presentation\"\n          aria-hidden=\"true\">\n          <Icon name={this.icon}></Icon>\n          {this.showAttentionBadge && (\n            <span class=\"udex-tab-overflow__button-badge\"></span>\n          )}\n        </span>\n      )}\n      {this.text}\n      {this.hasNotIcon && (\n        <span\n          class=\"udex-tab-overflow__button-badge\"\n          role=\"presentation\"\n          aria-hidden=\"true\">\n        </span>\n      )}\n    </button>\n  ) : (\n    <a\n      id={this._id}\n      href={this.ariaDisabled ? undefined : this.href}\n      target={this.target}\n      class=\"udex-tab-overflow__button\"\n      role=\"tab\"\n      aria-selected={this.effectiveSelected}\n      aria-disabled={this.ariaDisabled ? \"true\" : undefined}\n      tabindex={Number(tab._tabIndex)}>\n      {this.hasIcon && (\n        <span\n          class=\"udex-tab-overflow__button-icon\"\n          role=\"presentation\"\n          aria-hidden=\"true\">\n          <Icon name={this.icon}></Icon>\n          {this.showAttentionBadge && (\n            <span class=\"udex-tab-overflow__button-badge\"></span>\n          )}\n        </span>\n      )}\n      {this.text}\n      {this.hasNotIcon && (\n        <span\n          class=\"udex-tab-overflow__button-badge\"\n          role=\"presentation\"\n          aria-hidden=\"true\">\n        </span>\n      )}\n    </a>\n  );\n}\n"]}

package/dist/TabNavigation.d.ts

@@ -10,7 +10,6 @@ import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import "@ui5/webcomponents-icons/dist/play.js";
 import "@ui5/webcomponents-icons/dist/pause.js";
 import UDExButtonSize from "./types/ButtonSize.js";
-import TabNavigationPopoverTemplate from "./generated/templates/TabNavigationPopoverTemplate.lit.js";
 export declare enum UDExSizeMoreButton {
     Small = "Small",
     Medium = "Medium"
@@ -140,6 +139,17 @@ declare class UDExTabNavigation extends UI5Element {
      */
     processTab: boolean;
     tabWidth: string;
+    /**
+     * Defines the accessible name of the tab list.
+     *
+     * When set, screen readers announce this text as the name of the tab group
+     * (e.g. "Profile navigation") as focus enters the tabs. When empty, the tab
+     * list is exposed by its role only, with no accessible name.
+     *
+     * @public
+     * @default ""
+     */
+    accessibleName: string;
     /**
      * Defines selected tab.
      *
@@ -183,6 +193,7 @@ declare class UDExTabNavigation extends UI5Element {
     _maxTitleLength: number;
     _maxTitleLengthInSecondLines: number;
     _autoPlayTimer?: number;
+    _focusSelectedTabAfterRender: boolean;
     constructor();
     onAfterRendering(): void;
     onEnterDOM(): void;
@@ -249,13 +260,14 @@ declare class UDExTabNavigation extends UI5Element {
     handleFocusMoreButton(e: KeyboardEvent): void;
     handleHomeKeyMoreButton(e: KeyboardEvent): void;
     handleEnterKeyMoreButton(e: KeyboardEvent): void;
-    handleDownMoreButton(e: KeyboardEvent): void;
     onFocusFirstItemPopover(): void;
     handleFocusPopover(e: KeyboardEvent): void;
     handleTab(e: KeyboardEvent): void;
     handleUp(e: KeyboardEvent): void;
     onPreviousItemInPopover(target: HTMLElement): void;
     onNextItemInPopover(target: HTMLElement): void;
+    private isPopoverItemDisabled;
+    private findNextEnabledPopoverItem;
     resetTabIndexItem(item: HTMLElement): void;
     getItemsFromPopover(): Array<HTMLElement>;
     getPopoverTabIndexById(popoverItems: Array<HTMLElement>, id: string): number;
@@ -268,11 +280,10 @@ declare class UDExTabNavigation extends UI5Element {
     get isHorizontal(): boolean;
     get isVertical(): boolean;
     get ariaOrientationValue(): string;
+    get tablistAriaLabel(): string | undefined;
     get isDesktop(): boolean;
     get moreButtonText(): string;
     static registerStaticAreaTabStyles(styles: StyleData): void;
-    static get tabNavigationPopoverTemplate(): typeof TabNavigationPopoverTemplate;
-    get tabNavigationPopover(): object;
     applyTabWidthToVerticalTabs(): void;
     updateMobileState(): void;
     _startAutoPlay(): void;

package/dist/TabNavigation.js

@@ -10,10 +10,9 @@ 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/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, } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
@@ -26,13 +25,12 @@ 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 = [];
 export var UDExSizeMoreButton;
 (function (UDExSizeMoreButton) {
@@ -152,9 +150,21 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
          */
         this.processTab = false;
         this.tabWidth = "auto";
+        /**
+         * Defines the accessible name of the tab list.
+         *
+         * When set, screen readers announce this text as the name of the tab group
+         * (e.g. "Profile navigation") as focus enters the tabs. When empty, the tab
+         * list is exposed by its role only, with no accessible name.
+         *
+         * @public
+         * @default ""
+         */
+        this.accessibleName = "";
         this._isExpanded = false;
         this._maxTitleLength = 25;
         this._maxTitleLengthInSecondLines = this._maxTitleLength * 2;
+        this._focusSelectedTabAfterRender = false;
         this._handleResizeBound = this._handleResize.bind(this);
         this._handleWindowResizeBound = this._handleWindowResize.bind(this);
     }
@@ -169,6 +179,10 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
         }
         this.initOutsideClick();
         this.applyTabWidthToVerticalTabs();
+        if (this._focusSelectedTabAfterRender) {
+            this._focusSelectedTabAfterRender = false;
+            this._selectedTab?.getTabInHeaderDomRef()?.focus();
+        }
     }
     onEnterDOM() {
         ResizeHandler.register(this.getHeader(), this._handleResizeBound);
@@ -466,9 +480,6 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
             .filter(tab => !tab.disabled)
             .map(tab => tab.getTabInHeaderDomRef())
             .filter(tab => !tab.hasAttribute("hidden"));
-        if (!this.getMoreButton().hasAttribute("hidden")) {
-            this._visibleTabs.push(this.getMoreButton());
-        }
     }
     applyTabIndex() {
         if (!this.shadowRoot.contains(document.activeElement)) {
@@ -483,15 +494,27 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
         });
     }
     handleOverflowItemClick(e) {
-        if (e.target.localName === "button") {
-            const targetId = e.target.id;
-            const [targetTab] = this.items.filter(item => item.__id === targetId);
-            if (!targetTab?.disabled) {
-                e.preventDefault();
-                this.onItemSelect(targetId);
-            }
+        const target = e.target;
+        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) {
         const [selectedTab] = this.items.filter(item => item.__id === selectedId);
@@ -627,7 +650,6 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
         }
     }
     handleFocusMoreButton(e) {
-        this.handleDownMoreButton(e);
         this.handleHomeKeyMoreButton(e);
         this.handleEnterKeyMoreButton(e);
     }
@@ -646,19 +668,12 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
             this.handleOpenPopover();
         }
     }
-    handleDownMoreButton(e) {
-        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();
         }
     }
     handleFocusPopover(e) {
@@ -684,8 +699,7 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
     onPreviousItemInPopover(target) {
         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");
         prevItem.focus();
@@ -693,12 +707,25 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
     onNextItemInPopover(target) {
         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();
     }
+    isPopoverItemDisabled(item) {
+        return item.getAttribute("aria-disabled") === "true";
+    }
+    findNextEnabledPopoverItem(items, currentIndex, direction) {
+        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) {
         item.setAttribute("tabIndex", "-1");
     }
@@ -723,6 +750,7 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
             if (!targetTab?.disabled) {
                 this.onItemSelect(targetId);
                 this.handleClosePopover();
+                this._focusSelectedTabAfterRender = true;
             }
         }
     }
@@ -730,14 +758,15 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
         if (isEscape(e)) {
             e.preventDefault();
             this.handleClosePopover();
-            this._visibleTabs[this._visibleTabs.length - 1].focus();
+            this.getMoreButton().focus();
         }
     }
     handleHome(e) {
         if (isHome(e)) {
             e.preventDefault();
             const popoverItems = this.getItemsFromPopover();
-            popoverItems[0].focus();
+            const firstActiveItem = popoverItems.find(item => !this.isPopoverItemDisabled(item)) ?? popoverItems[0];
+            firstActiveItem.focus();
         }
     }
     handleEnd(e) {
@@ -745,7 +774,8 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
             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();
         }
     }
     getResponsePopover() {
@@ -760,6 +790,9 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
     get ariaOrientationValue() {
         return this.isVertical ? "vertical" : "horizontal";
     }
+    get tablistAriaLabel() {
+        return this.accessibleName || undefined;
+    }
     get isDesktop() {
         return isDesktop();
     }
@@ -769,12 +802,6 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
     static registerStaticAreaTabStyles(styles) {
         staticAreaTabStyles.push(styles);
     }
-    static get tabNavigationPopoverTemplate() {
-        return TabNavigationPopoverTemplate;
-    }
-    get tabNavigationPopover() {
-        return executeTemplate(UDExTabNavigation_1.tabNavigationPopoverTemplate, this);
-    }
     applyTabWidthToVerticalTabs() {
         if (this.isVertical && this.tabWidth && this.tabWidth !== "auto") {
             this.style.setProperty("--udex-tab-header-width", this.tabWidth);
@@ -869,6 +896,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], UDExTabNavigation.prototype, "tabWidth", void 0);
+__decorate([
+    property()
+], UDExTabNavigation.prototype, "accessibleName", void 0);
 __decorate([
     property({ type: Object })
 ], UDExTabNavigation.prototype, "_selectedTab", void 0);
@@ -895,7 +925,7 @@ __decorate([
 UDExTabNavigation = UDExTabNavigation_1 = __decorate([
     customElement({
         tag: "udex-tab-navigation",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: [TabNavigationCss, TabInOverflowCss],
         template: TabNavigationTemplate,
         dependencies: [Popover, Icon, UDExButton],