@sapudex/web-components 2.25.1 → 2.27.0

package/src/TabNavigation.hbs

@@ -9,10 +9,25 @@
             class="udex-tab-navigation__header-tabs"
             role="tablist"
             aria-labelledby="tablist-{{_id}}"
+            aria-orientation="{{ariaOrientationValue}}"
             part="tab-navigation-header-tabs"
             @click="{{onTabClick}}">
             {{#each items}}
                 {{this.tabNavigation}}
+                {{#if this.isMobileVertical}}
+                    {{#if this.selected}}
+                        <div
+                            class="udex-tab-navigation__content"
+                            part="tab-navigation-content">
+                            <div
+                                class="udex-tab-navigation__content-item"
+                                id="{{_contentId}}-mobile"
+                                aria-labelledby="{{_id}}">
+                                <slot name="{{this._slotName}}"></slot>
+                            </div>
+                        </div>
+                    {{/if}}
+                {{/if}}
             {{/each}}
         </div>
         <button
@@ -44,6 +59,7 @@
                 <div
                     class="udex-tab-navigation__content-item"
                     id="{{_contentId}}"
+                    aria-hidden="{{this.IsMobile}}"
                     aria-labelledby="{{_id}}">
                     <slot name="{{this._slotName}}"></slot>
                 </div>

package/src/TabNavigation.ts

@@ -19,6 +19,9 @@ import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { MORE } from "./generated/i18n/i18n-defaults.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import UDExButton from "./Button.js";
 
 // Templates
 import TabNavigationTemplate from "./generated/templates/TabNavigationTemplate.lit.js";
@@ -41,6 +44,11 @@ export enum Mode {
   Dark = "Dark",
 }
 
+export enum UDExTabNavigationOrientation {
+  Horizontal = "Horizontal",
+  Vertical = "Vertical",
+}
+
 type UDExTabNavigationClickDetail = {
   currentPage: number
 }
@@ -73,7 +81,7 @@ type UDExTabContainerTabSelectEventDetail = {
   renderer: litRender,
   styles: [TabNavigationCss, TabInOverflowCss],
   template: TabNavigationTemplate,
-  dependencies: [Popover, Icon],
+  dependencies: [Popover, Icon, UDExButton],
 })
 
 /**
@@ -115,6 +123,15 @@ class UDExTabNavigation extends UI5Element {
   @property()
     mode: `${Mode}` = Mode.Light;
 
+  /**
+   * Defines the orientation of the tab navigation.
+   *
+   * @public
+   * @default "Horizontal"
+   */
+  @property()
+    orientation: `${UDExTabNavigationOrientation}` = UDExTabNavigationOrientation.Horizontal;
+
   /**
    * Defines the background color of the component.
    *
@@ -169,6 +186,7 @@ class UDExTabNavigation extends UI5Element {
   static i18nBundle: I18nBundle;
 
   _handleResizeBound: () => void;
+  _handleWindowResizeBound: () => void;
   _popover?: Popover;
   _visibleTabs?: Array<ITab | HTMLElement>;
   _isExpanded: boolean = false;
@@ -178,6 +196,7 @@ class UDExTabNavigation extends UI5Element {
   constructor() {
     super();
     this._handleResizeBound = this._handleResize.bind(this);
+    this._handleWindowResizeBound = this._handleWindowResize.bind(this);
   }
 
   onAfterRendering(): void {
@@ -189,10 +208,12 @@ class UDExTabNavigation extends UI5Element {
       console.warn("You have to add the 'udex-tab' as a default slot to the udex-tab-navigation.");
     }
     this.initOutsideClick();
+    this.applyTabWidthToVerticalTabs();
   }
 
   onEnterDOM(): void {
     ResizeHandler.register(this.getHeader(), this._handleResizeBound);
+    window.addEventListener("resize", this._handleWindowResizeBound);
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
@@ -200,11 +221,17 @@ class UDExTabNavigation extends UI5Element {
 
   onExitDOM(): void {
     ResizeHandler.deregister(this.getHeader(), this._handleResizeBound);
+    window.removeEventListener("resize", this._handleWindowResizeBound);
+  }
+
+  _handleWindowResize() {
+    this.updateMobileState();
   }
 
   _handleResize() {
     this.handleClosePopover();
     this._width = this.offsetWidth;
+    this.updateMobileState();
   }
 
   emitClickEvent(pageIndex: number) {
@@ -214,6 +241,7 @@ class UDExTabNavigation extends UI5Element {
   onBeforeRendering(): void {
     this.updateOverflowItems();
     this.setSelectedTab();
+    this.updateMobileState();
   }
 
   setSelectedTab() {
@@ -240,6 +268,7 @@ class UDExTabNavigation extends UI5Element {
   }
 
   setRealTabToItems() {
+    const isMobile = BreakpointUtils.isAtMost("S");
     this.items.forEach((tab, index, arr) => {
       tab._iconWithoutBackground = this.iconWithoutBackground;
       tab._posinset = index + 1;
@@ -247,6 +276,8 @@ class UDExTabNavigation extends UI5Element {
       tab._contentId = this.getContentId(index);
       tab._realTab = this._selectedTab;
       tab._width = this.tabWidth;
+      tab._isMobile = isMobile;
+      tab._isVertical = this.isVertical;
     });
   }
 
@@ -307,7 +338,7 @@ class UDExTabNavigation extends UI5Element {
 
   getTab(el: HTMLElement | null) {
     while (el) {
-      if (el.localName === "button" && el.getAttribute("role") === "tab") {
+      if (el.getAttribute("role") === "tab") {
         return el as Tab;
       }
 
@@ -330,6 +361,13 @@ class UDExTabNavigation extends UI5Element {
   }
 
   setItemsInHeader() {
+    const itemsDomRefs = this.items.map(item => item.getTabInHeaderDomRef()!);
+
+    // Skip overflow logic for vertical tabs - show all tabs
+    if (this.isVertical) {
+      return;
+    }
+
     const tabHeader = this.getTabHeader();
     let allItemsWidth = 0;
 
@@ -337,8 +375,6 @@ class UDExTabNavigation extends UI5Element {
       return;
     }
 
-    const itemsDomRefs = this.items.map(item => item.getTabInHeaderDomRef()!);
-
     this.getMoreButton()?.setAttribute("hidden", "");
     this.removeHiddenAttributeInAllTabs(itemsDomRefs);
     allItemsWidth += this.getTotalItemsWidth(itemsDomRefs);
@@ -617,42 +653,57 @@ class UDExTabNavigation extends UI5Element {
   }
 
   handleKeyDown(e: KeyboardEvent) {
-    this.handleRightArrow(e);
-    this.handleLeftArrow(e);
+    if (this.isHorizontal) {
+      this.handleRightArrow(e);
+      this.handleLeftArrow(e);
+    } else {
+      this.handleDownArrow(e);
+      this.handleUpArrow(e);
+    }
     this.handleHomeKey(e);
     this.handleEndKey(e);
   }
 
-  handleRightArrow(e: KeyboardEvent) {
-    if (isRight(e)) {
+  getTabIndexById(id: string): number {
+    return this._visibleTabs!.findIndex(tab => tab.id === id);
+  }
+
+  handleLeftArrow(e: KeyboardEvent) {
+    if (isLeft(e)) {
       e.preventDefault();
       e.stopPropagation();
-
-      this.onFocusRightItem(e.target as HTMLElement);
+      this.onFocusPreviousItem(e.target as HTMLElement);
     }
   }
 
-  onFocusRightItem(target: HTMLElement) {
-    const previousSelectedIndex = this.getTabIndexById(target.id);
-    const lastIndex = this._visibleTabs!.length;
-    const nextSelectIndex = previousSelectedIndex + 1 < lastIndex ? previousSelectedIndex + 1 : 0;
+  handleRightArrow(e: KeyboardEvent) {
+    if (isRight(e)) {
+      e.preventDefault();
+      e.stopPropagation();
 
-    this._visibleTabs![nextSelectIndex].focus();
+      // For horizontal tabs, right arrow always moves focus to the next tab
+      this.onFocusNextItem(e.target as HTMLElement);
+    }
   }
 
-  getTabIndexById(id: string): number {
-    return this._visibleTabs!.findIndex(tab => tab.id === id);
+  handleUpArrow(e: KeyboardEvent) {
+    if (isUp(e)) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.onFocusPreviousItem(e.target as HTMLElement);
+    }
   }
 
-  handleLeftArrow(e: KeyboardEvent) {
-    if (isLeft(e)) {
+  handleDownArrow(e: KeyboardEvent) {
+    if (isDown(e)) {
       e.preventDefault();
       e.stopPropagation();
-      this.onFocusLeftItem(e.target as HTMLElement);
+
+      this.onFocusNextItem(e.target as HTMLElement);
     }
   }
 
-  onFocusLeftItem(target: HTMLElement) {
+  onFocusPreviousItem(target: HTMLElement) {
     const previousSelectedIndex = this.getTabIndexById(target.id);
     const lastIndex = this._visibleTabs!.length - 1;
     const previousSelectIndex = previousSelectedIndex - 1 < 0 ? lastIndex : previousSelectedIndex - 1;
@@ -660,6 +711,14 @@ class UDExTabNavigation extends UI5Element {
     this._visibleTabs![previousSelectIndex].focus();
   }
 
+  onFocusNextItem(target: HTMLElement) {
+    const previousSelectedIndex = this.getTabIndexById(target.id);
+    const lastIndex = this._visibleTabs!.length;
+    const nextSelectIndex = previousSelectedIndex + 1 < lastIndex ? previousSelectedIndex + 1 : 0;
+
+    this._visibleTabs![nextSelectIndex].focus();
+  }
+
   handleHomeKey(e: KeyboardEvent) {
     if (isHome(e)) {
       e.preventDefault();
@@ -825,6 +884,22 @@ class UDExTabNavigation extends UI5Element {
     return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
   }
 
+  get isHorizontal(): boolean {
+    return this.orientation === UDExTabNavigationOrientation.Horizontal;
+  }
+
+  get isVertical(): boolean {
+    return this.orientation === UDExTabNavigationOrientation.Vertical;
+  }
+
+  get ariaOrientationValue(): string {
+    return this.isVertical ? "vertical" : "horizontal";
+  }
+
+  get isDesktop(): boolean {
+    return isDesktop();
+  }
+
   get moreButtonText(): string {
     return translate(UDExTabNavigation, MORE);
   }
@@ -840,6 +915,19 @@ class UDExTabNavigation extends UI5Element {
   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);
+    }
+  }
+
+  updateMobileState(): void {
+    const isMobile = BreakpointUtils.isAtMost("S");
+    this.items.forEach(tab => {
+      tab._isMobile = isMobile;
+    });
+  }
 }
 
 UDExTabNavigation.define();

package/src/Tooltip.ts

@@ -3,14 +3,13 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Popover from "@ui5/webcomponents/dist/Popover.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
 import type { PopupBeforeCloseEventDetail } from "@ui5/webcomponents/dist/Popup.js";
 import { HorizontalAlign, Placement, VerticalAlign } from "./types/Dropdown.js";
 
 // Template
-import TooltipTemplate from "./generated/templates/TooltipTemplate.lit.js";
+import TooltipTemplate from "./TooltipTemplate.js";
 
 // Styles
 import TooltipCss from "./generated/themes/Tooltip.css.js";
@@ -35,11 +34,11 @@ import TooltipCss from "./generated/themes/Tooltip.css.js";
  */
 @customElement({
   tag: "udex-tooltip",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: TooltipCss,
   template: TooltipTemplate,
-  dependencies: [Popover],
 })
+
 /**
  * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.
  * @public
@@ -68,6 +67,7 @@ import TooltipCss from "./generated/themes/Tooltip.css.js";
  * @public
  */
 @event("close")
+
 class UDExTooltip extends UI5Element {
   eventDetails!: {
     "before-open": void
@@ -109,6 +109,7 @@ class UDExTooltip extends UI5Element {
    */
   @property()
     placement: `${Placement}` = Placement.End;
+
   /**
    * Determines the horizontal alignment of the component.
    * @default "Center"
@@ -185,7 +186,7 @@ class UDExTooltip extends UI5Element {
     this._onClose = this.syncClose.bind(this);
   }
 
-  syncClose() {
+  syncClose(): void {
     this.open = false;
   }
 

package/src/TooltipTemplate.tsx

@@ -0,0 +1,29 @@
+import type Tooltip from "./Tooltip.js";
+import UI5Popover from "@ui5/webcomponents/dist/Popover.js";
+
+export default function TooltipTemplate(this: Tooltip) {
+  const rootClass = "udex-tooltip";
+
+  return (
+    <UI5Popover
+      class={`${rootClass}__pane`}
+      opener={this.opener}
+      open={this.open}
+      hideArrow={this.hideArrow}
+      placement={this.placement}
+      horizontalAlign={this.horizontalAlign}
+      verticalAlign={this.verticalAlign}
+      accessibleName={this.accessibleName}
+      accessibleNameRef={this.accessibleNameRef}
+      accessibleRole={this.accessibleRole}
+      preventInitialFocus={this.preventInitialFocus}
+      preventFocusRestore={this.preventFocusRestore}
+      onui5-open={this.handleOpen}
+      onui5-close={this.handleClose}
+      onui5-before-close={this.handleBeforeClose}
+      onui5-before-open={this.handleBeforeOpen}>
+      {this.title && <div class={`${rootClass}-title`}>{this.title}</div>}
+      <slot></slot>
+    </UI5Popover>
+  );
+}

package/src/generated/templates/MastheadCountrySelectorTemplate.lit.ts

@@ -6,7 +6,7 @@ import type MastheadCountrySelector from "../../MastheadCountrySelector.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
 function block0 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-country-selector" @keydown="${this.handleKeyDown}">${ this._isActiveRegionOpen ? block1.call(this, context, tags, suffix) : block4.call(this, context, tags, suffix) }</div>`;}
-function block1 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-masthead-country-selector__title">${ifDefined(this.countryTitle)}</span>${ !this.isSingleMode ? block2.call(this, context, tags, suffix) : undefined }<${scopeTag("udex-search", tags, suffix)} class="udex-masthead-country-selector__search" @ui5-handle-value-search="${ifDefined(this.handleSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleSearchReset)}" @ui5-submit-search-value="${ifDefined(this.handleSearch)}" language-voice="${ifDefined(this.languageVoice)}" label="${ifDefined(this.searchLabel)}" mode="${ifDefined(this.homeSearchMode)}" ?show-voice-button="${this.showSearchVoiceButton}" non-interactive-submit-button show-submit-button></${scopeTag("udex-search", tags, suffix)}><span aria-live="polite" aria-atomic="true" class="hidden">${ifDefined(this._accSearchResultInfo)}</span><ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">${ repeat(this._activeCountries, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</ul>` : html`<span class="udex-masthead-country-selector__title">${ifDefined(this.countryTitle)}</span>${ !this.isSingleMode ? block2.call(this, context, tags, suffix) : undefined }<udex-search class="udex-masthead-country-selector__search" @ui5-handle-value-search="${ifDefined(this.handleSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleSearchReset)}" @ui5-submit-search-value="${ifDefined(this.handleSearch)}" language-voice="${ifDefined(this.languageVoice)}" label="${ifDefined(this.searchLabel)}" mode="${ifDefined(this.homeSearchMode)}" ?show-voice-button="${this.showSearchVoiceButton}" non-interactive-submit-button show-submit-button></udex-search><span aria-live="polite" aria-atomic="true" class="hidden">${ifDefined(this._accSearchResultInfo)}</span><ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">${ repeat(this._activeCountries, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</ul>`;}
+function block1 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-masthead-country-selector__title">${ifDefined(this.countryTitle)}</span>${ !this.isSingleMode ? block2.call(this, context, tags, suffix) : undefined }<${scopeTag("udex-search", tags, suffix)} class="udex-masthead-country-selector__search" @ui5-handle-value-search="${ifDefined(this.handleSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleSearchReset)}" @ui5-submit-search-value="${ifDefined(this.handleSearch)}" language-voice="${ifDefined(this.languageVoice)}" label="${ifDefined(this.searchLabel)}" mode="${ifDefined(this.homeSearchMode)}" ?show-voice-button="${this.showSearchVoiceButton}" non-interactive-submit-button show-submit-button></${scopeTag("udex-search", tags, suffix)}><span aria-live="polite" aria-atomic="true" class="hidden">${ifDefined(this._accSearchResultInfo)}</span><div class="udex-masthead-country-selector__list-container"><div class="udex-masthead-country-selector__list-wrap" @scroll=${this.handleCountryListShadowVisible}><ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">${ repeat(this._activeCountries, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</ul></div></div>` : html`<span class="udex-masthead-country-selector__title">${ifDefined(this.countryTitle)}</span>${ !this.isSingleMode ? block2.call(this, context, tags, suffix) : undefined }<udex-search class="udex-masthead-country-selector__search" @ui5-handle-value-search="${ifDefined(this.handleSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleSearchReset)}" @ui5-submit-search-value="${ifDefined(this.handleSearch)}" language-voice="${ifDefined(this.languageVoice)}" label="${ifDefined(this.searchLabel)}" mode="${ifDefined(this.homeSearchMode)}" ?show-voice-button="${this.showSearchVoiceButton}" non-interactive-submit-button show-submit-button></udex-search><span aria-live="polite" aria-atomic="true" class="hidden">${ifDefined(this._accSearchResultInfo)}</span><div class="udex-masthead-country-selector__list-container"><div class="udex-masthead-country-selector__list-wrap" @scroll=${this.handleCountryListShadowVisible}><ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">${ repeat(this._activeCountries, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</ul></div></div>`;}
 function block2 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-country-selector__region-back-item" @click="${this.backToRegions}" label="${ifDefined(this._activeRegion?.title)}" type="Button" part="menu-item" is-back icon-start></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item class="udex-masthead-country-selector__region-back-item" @click="${this.backToRegions}" label="${ifDefined(this._activeRegion?.title)}" type="Button" part="menu-item" is-back icon-start></udex-masthead-menu-item>`;}
 function block3 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries" @click="${this.handleCountryClick}" _country-code="${ifDefined(item.countryCode)}" url="${ifDefined(item.url)}" label="${ifDefined(item.displayTitle)}" index="${index}" part="menu-item" is-nav-item></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li role="none"><udex-masthead-menu-item class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries" @click="${this.handleCountryClick}" _country-code="${ifDefined(item.countryCode)}" url="${ifDefined(item.url)}" label="${ifDefined(item.displayTitle)}" index="${index}" part="menu-item" is-nav-item></udex-masthead-menu-item></li>`;}
 function block4 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-masthead-country-selector__title">${ifDefined(this.regionTitle)}</span><ul class="udex-masthead-country-selector__list" role="menu">${ repeat(this.regionsData, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }</ul>`;}

package/src/generated/templates/MastheadProfileMenuTemplate.lit.ts

@@ -6,15 +6,17 @@ import type MastheadProfileMenu from "../../MastheadProfileMenu.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
 function block0 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div @keydown="${this.handleKeydown}" class="${ifDefined(this.rootClass)}">${ this._openIdentities ? block1.call(this, context, tags, suffix) : block4.call(this, context, tags, suffix) }</div> `;}
-function block1 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-profile-menu__header-wrap back-btn"><${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-profile-menu__btn-back" @click="${this.handleSwitcherClick}" label="${ifDefined(this.btnBackText)}" type="Button" icon-start></${scopeTag("udex-masthead-menu-item", tags, suffix)}><span class="udex-masthead-profile-menu__switcher-title">${ifDefined(this.switcherAccountText)}</span></div><div class="udex-masthead-profile-menu__identities-list-wrap"><span class="udex-masthead-profile-menu__identities-list-title">${ifDefined(this.listTitleText)}</span>${ this.identitiesList.length ? block2.call(this, context, tags, suffix) : undefined }<${scopeTag("udex-button", tags, suffix)} @click="${this.fireEventAddOrRemoveAccountClick}" class="udex-masthead-profile-menu__add-remove-btn" design="Primary" end-icon="action" size="Large">${ifDefined(this.addOrRemoveAccountText)}</${scopeTag("udex-button", tags, suffix)}></div>` : html`<div class="udex-masthead-profile-menu__header-wrap back-btn"><udex-masthead-menu-item class="udex-masthead-profile-menu__btn-back" @click="${this.handleSwitcherClick}" label="${ifDefined(this.btnBackText)}" type="Button" icon-start></udex-masthead-menu-item><span class="udex-masthead-profile-menu__switcher-title">${ifDefined(this.switcherAccountText)}</span></div><div class="udex-masthead-profile-menu__identities-list-wrap"><span class="udex-masthead-profile-menu__identities-list-title">${ifDefined(this.listTitleText)}</span>${ this.identitiesList.length ? block2.call(this, context, tags, suffix) : undefined }<udex-button @click="${this.fireEventAddOrRemoveAccountClick}" class="udex-masthead-profile-menu__add-remove-btn" design="Primary" end-icon="action" size="Large">${ifDefined(this.addOrRemoveAccountText)}</udex-button></div>`;}
-function block2 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-list", tags, suffix)} class="udex-masthead-profile-menu__identities-list" mode="SingleSelect" accessible-name="${ifDefined(this.listTitleText)}" controlled>${ repeat(this.identitiesList, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list", tags, suffix)}>` : html`<udex-list class="udex-masthead-profile-menu__identities-list" mode="SingleSelect" accessible-name="${ifDefined(this.listTitleText)}" controlled>${ repeat(this.identitiesList, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</udex-list>`;}
+function block1 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-profile-menu__header-wrap back-btn"><${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-profile-menu__btn-back" @click="${this.handleSwitcherClick}" label="${ifDefined(this.btnBackText)}" type="Button" icon-start></${scopeTag("udex-masthead-menu-item", tags, suffix)}><span class="udex-masthead-profile-menu__switcher-title">${ifDefined(this.switcherAccountText)}</span></div><span class="udex-masthead-profile-menu__identities-list-title">${ifDefined(this.listTitleText)}</span><div class="udex-masthead-profile-menu__identities-list-wrap">${ this.identitiesList.length ? block2.call(this, context, tags, suffix) : undefined }</div><${scopeTag("udex-button", tags, suffix)} @click="${this.fireEventAddOrRemoveAccountClick}" class="udex-masthead-profile-menu__add-remove-btn" design="Primary" end-icon="action" size="Large">${ifDefined(this.addOrRemoveAccountText)}</${scopeTag("udex-button", tags, suffix)}>` : html`<div class="udex-masthead-profile-menu__header-wrap back-btn"><udex-masthead-menu-item class="udex-masthead-profile-menu__btn-back" @click="${this.handleSwitcherClick}" label="${ifDefined(this.btnBackText)}" type="Button" icon-start></udex-masthead-menu-item><span class="udex-masthead-profile-menu__switcher-title">${ifDefined(this.switcherAccountText)}</span></div><span class="udex-masthead-profile-menu__identities-list-title">${ifDefined(this.listTitleText)}</span><div class="udex-masthead-profile-menu__identities-list-wrap">${ this.identitiesList.length ? block2.call(this, context, tags, suffix) : undefined }</div><udex-button @click="${this.fireEventAddOrRemoveAccountClick}" class="udex-masthead-profile-menu__add-remove-btn" design="Primary" end-icon="action" size="Large">${ifDefined(this.addOrRemoveAccountText)}</udex-button>`;}
+function block2 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-list", tags, suffix)} class="udex-masthead-profile-menu__identities-list" mode="SingleSelect" accessible-name="${ifDefined(this.listTitleText)}" @scroll="${this.handleIdentitiesListShadowVisible}" _scroll-into-view="Center" controlled>${ repeat(this.identitiesList, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list", tags, suffix)}>` : html`<udex-list class="udex-masthead-profile-menu__identities-list" mode="SingleSelect" accessible-name="${ifDefined(this.listTitleText)}" @scroll="${this.handleIdentitiesListShadowVisible}" _scroll-into-view="Center" controlled>${ repeat(this.identitiesList, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</udex-list>`;}
 function block3 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} id="${ifDefined(item.idsUser)}" class="udex-masthead-profile-menu__identities-list-item" @ui5-item-press="${ifDefined(this.fireEventIdentityItemClick)}" supporting-text="${ifDefined(item.supportingText)}" image-badge-state="${ifDefined(item.statusBadge)}" image="${ifDefined(item.avatarUrl)}" image-alt="${ifDefined(item.name)}">${ifDefined(item.email)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item id="${ifDefined(item.idsUser)}" class="udex-masthead-profile-menu__identities-list-item" @ui5-item-press="${ifDefined(this.fireEventIdentityItemClick)}" supporting-text="${ifDefined(item.supportingText)}" image-badge-state="${ifDefined(item.statusBadge)}" image="${ifDefined(item.avatarUrl)}" image-alt="${ifDefined(item.name)}">${ifDefined(item.email)}</udex-list-item>`;}
-function block4 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-profile-menu__header">${ this.userData ? block5.call(this, context, tags, suffix) : undefined }</div>${ this.messageAvailable ? block8.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-profile-menu__links"><${scopeTag("udex-masthead-menu", tags, suffix)} exportparts="badge, menu-item" part="menu" sub-items='${ifDefined(this.linksList)}' @ui5-menu-item-click="${ifDefined(this.handleProfileMenuItemClick)}"></${scopeTag("udex-masthead-menu", tags, suffix)}>${ this.logoutLink ? block9.call(this, context, tags, suffix) : undefined }</div>` : html`<div class="udex-masthead-profile-menu__header">${ this.userData ? block5.call(this, context, tags, suffix) : undefined }</div>${ this.messageAvailable ? block8.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-profile-menu__links"><udex-masthead-menu exportparts="badge, menu-item" part="menu" sub-items='${ifDefined(this.linksList)}' @ui5-menu-item-click="${ifDefined(this.handleProfileMenuItemClick)}"></udex-masthead-menu>${ this.logoutLink ? block9.call(this, context, tags, suffix) : undefined }</div>`;}
-function block5 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-avatar", tags, suffix)} aria-hidden="true" size="L" initials="${ifDefined(this.userData.avatarInitials)}">${ this.userData.avatarUrl ? block6.call(this, context, tags, suffix) : undefined }</${scopeTag("udex-avatar", tags, suffix)}><div><p class="udex-profile-menu__account-name">${ifDefined(this.userData.name)}</p><p class="udex-profile-menu__account-email">${ifDefined(this.userData.email)}</p>${ this.hasIdentities ? block7.call(this, context, tags, suffix) : undefined }</div>` : html`<udex-avatar aria-hidden="true" size="L" initials="${ifDefined(this.userData.avatarInitials)}">${ this.userData.avatarUrl ? block6.call(this, context, tags, suffix) : undefined }</udex-avatar><div><p class="udex-profile-menu__account-name">${ifDefined(this.userData.name)}</p><p class="udex-profile-menu__account-email">${ifDefined(this.userData.email)}</p>${ this.hasIdentities ? block7.call(this, context, tags, suffix) : undefined }</div>`;}
+function block4 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-profile-menu__header">${ this.userData ? block5.call(this, context, tags, suffix) : undefined }</div>${ this.messageAvailable ? block8.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-profile-menu__content"><div class="udex-masthead-profile-menu__links" @scroll="${this.handleProfileMenuShadowVisible}"><${scopeTag("udex-masthead-menu", tags, suffix)} exportparts="badge, menu-item" part="menu" sub-items='${ifDefined(this.linksList)}' @ui5-menu-item-click="${ifDefined(this.handleProfileMenuItemClick)}" _scroll-into-view="Center"></${scopeTag("udex-masthead-menu", tags, suffix)}></div></div>${ this.hasActionButton ? block9.call(this, context, tags, suffix) : undefined }` : html`<div class="udex-masthead-profile-menu__header">${ this.userData ? block5.call(this, context, tags, suffix) : undefined }</div>${ this.messageAvailable ? block8.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-profile-menu__content"><div class="udex-masthead-profile-menu__links" @scroll="${this.handleProfileMenuShadowVisible}"><udex-masthead-menu exportparts="badge, menu-item" part="menu" sub-items='${ifDefined(this.linksList)}' @ui5-menu-item-click="${ifDefined(this.handleProfileMenuItemClick)}" _scroll-into-view="Center"></udex-masthead-menu></div></div>${ this.hasActionButton ? block9.call(this, context, tags, suffix) : undefined }`;}
+function block5 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-avatar", tags, suffix)} aria-hidden="true" size="L" initials="${ifDefined(this.userData.avatarInitials)}" fallback-icon="${ifDefined(this.userData.fallbackIcon)}">${ this.userData.avatarUrl ? block6.call(this, context, tags, suffix) : undefined }</${scopeTag("udex-avatar", tags, suffix)}><div><p class="udex-profile-menu__account-name">${ifDefined(this.userData.name)}</p><p class="udex-profile-menu__account-email">${ifDefined(this.userData.email)}</p>${ this.hasIdentities ? block7.call(this, context, tags, suffix) : undefined }</div>` : html`<udex-avatar aria-hidden="true" size="L" initials="${ifDefined(this.userData.avatarInitials)}" fallback-icon="${ifDefined(this.userData.fallbackIcon)}">${ this.userData.avatarUrl ? block6.call(this, context, tags, suffix) : undefined }</udex-avatar><div><p class="udex-profile-menu__account-name">${ifDefined(this.userData.name)}</p><p class="udex-profile-menu__account-email">${ifDefined(this.userData.email)}</p>${ this.hasIdentities ? block7.call(this, context, tags, suffix) : undefined }</div>`;}
 function block6 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<img src="${ifDefined(this.userData.avatarUrl)}" alt="avatar"/>`;}
 function block7 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} @click="${this.handleSwitcherClick}" class="udex-masthead-profile-menu__btn-switcher" size="Large" end-icon="slim-arrow-right" design="Invisible">${ifDefined(this.switcherAccountText)}</${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button @click="${this.handleSwitcherClick}" class="udex-masthead-profile-menu__btn-switcher" size="Large" end-icon="slim-arrow-right" design="Invisible">${ifDefined(this.switcherAccountText)}</udex-button>`;}
 function block8 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-profile-menu__message"><slot name="message"></slot></div>`;}
-function block9 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-profile-menu__actions"><${scopeTag("udex-masthead-menu-item", tags, suffix)} @click="${this.handleUserLogoutItemClick}" label="${ifDefined(this.logoutText)}" url="${ifDefined(this.logoutUrl)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}></div>` : html`<div class="udex-masthead-profile-menu__actions"><udex-masthead-menu-item @click="${this.handleUserLogoutItemClick}" label="${ifDefined(this.logoutText)}" url="${ifDefined(this.logoutUrl)}"></udex-masthead-menu-item></div>`;}
+function block9 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-profile-menu__actions">${ this.hasLogoutButton ? block10.call(this, context, tags, suffix) : block11.call(this, context, tags, suffix) }</div>`;}
+function block10 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-profile-menu__btn"><slot name="logoutButton"></slot></div>`;}
+function block11 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-link", tags, suffix)} @click="${this.handleUserLogoutClick}" end-icon="action" design="Default" accessible-role="Link" href="${ifDefined(this.logoutUrl)}">${ifDefined(this.logoutText)}</${scopeTag("udex-link", tags, suffix)}>` : html`<udex-link @click="${this.handleUserLogoutClick}" end-icon="action" design="Default" accessible-role="Link" href="${ifDefined(this.logoutUrl)}">${ifDefined(this.logoutText)}</udex-link>`;}
 
 function template(this: MastheadProfileMenu) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

package/src/generated/templates/TabHeaderTemplate.lit.ts

@@ -5,17 +5,36 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 type TabHeader = any;
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.hasNotHref ? block1.call(this, context, tags, suffix) : block6.call(this, context, tags, suffix) } `;}
-function block1 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button id="${ifDefined(this._id)}" class="udex-tab-navigation__button-tab ${ifDefined(this.selectedClass)}${ifDefined(this.classWithIconWithoutBackground)}${ifDefined(this.buttonClassWithIcon)}" tabindex="${ifDefined(this._tabIndex)}" type="button" role="tab" aria-describedby="udex-tab-navigation__${ifDefined(this._id)}__accessible-name" aria-posinset="${ifDefined(this._posinset)}" aria-setsize="${ifDefined(this._setsize)}" aria-controls="${ifDefined(this._contentId)}" aria-selected="${ifDefined(this.effectiveSelected)}" aria-labelledby="${ifDefined(this.ariaLabelledBy)}" ._realTab="${ifDefined(this)}" style="width: ${ifDefined(this._width)};">${ this.hasIcon ? block2.call(this, context, tags, suffix) : undefined }<p class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block4.call(this, context, tags, suffix) : undefined }</p>${ this.hasNotIcon ? block5.call(this, context, tags, suffix) : undefined }<span aria-hidden="true" class="hidden" id="udex-tab-navigation__${ifDefined(this._id)}__accessible-name">${ifDefined(this.accessibleNameText)}</span></button>`;}
-function block2 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block3.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><ui5-icon class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block3.call(this, context, tags, suffix) : undefined }</span>`;}
-function block3 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
-function block4 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</udex-badge>`;}
+function block0 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.hasBodyTextOrLink ? block1.call(this, context, tags, suffix) : block17.call(this, context, tags, suffix) } `;}
+function block1 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-tab-navigation__tab-wrapper" role="presentation" ._realTab="${ifDefined(this)}" ${ this.widthStyle ? block2.call(this, context, tags, suffix) : undefined }>${ this.hasNotHref ? block3.call(this, context, tags, suffix) : block9.call(this, context, tags, suffix) }${ this.hasBodyText ? block15.call(this, context, tags, suffix) : undefined }${ this.hasLinkSlot ? block16.call(this, context, tags, suffix) : undefined }</div>`;}
+function block2 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`style="${styleMap(this.widthStyle)}"`;}
+function block3 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button id="${ifDefined(this._id)}" class="udex-tab-navigation__button-tab ${ifDefined(this.selectedClass)}${ifDefined(this.classWithIconWithoutBackground)}${ifDefined(this.buttonClassWithIcon)}" type="button" role="tab" tabindex="${ifDefined(this._tabIndex)}" aria-posinset="${ifDefined(this._posinset)}" aria-setsize="${ifDefined(this._setsize)}" aria-controls="${ifDefined(this._contentId)}" aria-selected="${ifDefined(this.effectiveSelected)}">${ this.hasIcon ? block4.call(this, context, tags, suffix) : undefined }<p class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block6.call(this, context, tags, suffix) : undefined }${ this.hasNotIcon ? block7.call(this, context, tags, suffix) : undefined }</p><span class="visually-hidden" id="udex-tab-navigation__${ifDefined(this._id)}__accessible-name">${ifDefined(this.accessibleNameText)}</span>${ this.ariaDescribedByBodyText ? block8.call(this, context, tags, suffix) : undefined }</button>`;}
+function block4 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block5.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><ui5-icon class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block5.call(this, context, tags, suffix) : undefined }</span>`;}
 function block5 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
-function block6 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a id="${ifDefined(this._id)}" class="udex-tab-navigation__button-tab ${ifDefined(this.selectedClass)}${ifDefined(this.classWithIconWithoutBackground)}${ifDefined(this.buttonClassWithIcon)}" tabindex="${ifDefined(this.linkTabIndex)}" role="tab" aria-posinset="${ifDefined(this._posinset)}" aria-setsize="${ifDefined(this._setsize)}" href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" style="max-width: ${ifDefined(this._maxWidth)}px; width: ${ifDefined(this._width)};" ._realTab="${ifDefined(this)}">${ this.hasIcon ? block7.call(this, context, tags, suffix) : undefined }<p class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block9.call(this, context, tags, suffix) : undefined }</p>${ this.hasNotIcon ? block10.call(this, context, tags, suffix) : undefined }<span aria-hidden="true" class="hidden" id="udex-tab-navigation__${ifDefined(this._id)}__accessible-name">${ifDefined(this.accessibleNameText)}</span></a>`;}
-function block7 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block8.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><ui5-icon class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block8.call(this, context, tags, suffix) : undefined }</span>`;}
-function block8 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
-function block9 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</udex-badge>`;}
-function block10 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
+function block6 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</udex-badge>`;}
+function block7 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
+function block8 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="visually-hidden">${ifDefined(this.bodyText)}</span>`;}
+function block9 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a id="${ifDefined(this._id)}" class="udex-tab-navigation__button-tab ${ifDefined(this.selectedClass)}${ifDefined(this.classWithIconWithoutBackground)}${ifDefined(this.buttonClassWithIcon)}" href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" role="tab" tabindex="${ifDefined(this.linkTabIndex)}" aria-posinset="${ifDefined(this._posinset)}" aria-setsize="${ifDefined(this._setsize)}">${ this.hasIcon ? block10.call(this, context, tags, suffix) : undefined }<p class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block12.call(this, context, tags, suffix) : undefined }${ this.hasNotIcon ? block13.call(this, context, tags, suffix) : undefined }</p><span class="visually-hidden" id="udex-tab-navigation__${ifDefined(this._id)}__accessible-name">${ifDefined(this.accessibleNameText)}</span>${ this.ariaDescribedByBodyText ? block14.call(this, context, tags, suffix) : undefined }</a>`;}
+function block10 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block11.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><ui5-icon class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block11.call(this, context, tags, suffix) : undefined }</span>`;}
+function block11 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
+function block12 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</udex-badge>`;}
+function block13 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
+function block14 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="visually-hidden">${ifDefined(this.bodyText)}</span>`;}
+function block15 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<p class="udex-tab-navigation__button-body-text">${ifDefined(this.bodyText)}</p>`;}
+function block16 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-tab-navigation__button-links">${unsafeHTML(this.linkSlotHtml)}</div>`;}
+function block17 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.hasNotHref ? block18.call(this, context, tags, suffix) : block24.call(this, context, tags, suffix) }`;}
+function block18 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button id="${ifDefined(this._id)}" class="udex-tab-navigation__button-tab ${ifDefined(this.selectedClass)}${ifDefined(this.classWithIconWithoutBackground)}${ifDefined(this.buttonClassWithIcon)}" tabindex="${ifDefined(this._tabIndex)}" type="button" role="tab" aria-describedby="udex-tab-navigation__${ifDefined(this._id)}__accessible-name" aria-posinset="${ifDefined(this._posinset)}" aria-setsize="${ifDefined(this._setsize)}" aria-controls="${ifDefined(this._contentId)}" aria-selected="${ifDefined(this.effectiveSelected)}" ._realTab="${ifDefined(this)}" ${ this.widthStyle ? block19.call(this, context, tags, suffix) : undefined }>${ this.hasIcon ? block20.call(this, context, tags, suffix) : undefined }<p class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block22.call(this, context, tags, suffix) : undefined }${ this.hasNotIcon ? block23.call(this, context, tags, suffix) : undefined }</p><span class="visually-hidden" id="udex-tab-navigation__${ifDefined(this._id)}__accessible-name">${ifDefined(this.accessibleNameText)}</span></button>`;}
+function block19 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`style="${styleMap(this.widthStyle)}"`;}
+function block20 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block21.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><ui5-icon class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block21.call(this, context, tags, suffix) : undefined }</span>`;}
+function block21 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
+function block22 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</udex-badge>`;}
+function block23 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
+function block24 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a id="${ifDefined(this._id)}" class="udex-tab-navigation__button-tab ${ifDefined(this.selectedClass)}${ifDefined(this.classWithIconWithoutBackground)}${ifDefined(this.buttonClassWithIcon)}" tabindex="${ifDefined(this.linkTabIndex)}" role="tab" aria-posinset="${ifDefined(this._posinset)}" aria-setsize="${ifDefined(this._setsize)}" href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" ${ this.widthStyle ? block25.call(this, context, tags, suffix) : undefined } ._realTab="${ifDefined(this)}">${ this.hasIcon ? block26.call(this, context, tags, suffix) : undefined }<p class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block28.call(this, context, tags, suffix) : undefined }${ this.hasNotIcon ? block29.call(this, context, tags, suffix) : undefined }</p><span class="visually-hidden" id="udex-tab-navigation__${ifDefined(this._id)}__accessible-name">${ifDefined(this.accessibleNameText)}</span></a>`;}
+function block25 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`style="${styleMap(this.widthStyle)}"`;}
+function block26 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block27.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><ui5-icon class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block27.call(this, context, tags, suffix) : undefined }</span>`;}
+function block27 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
+function block28 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</udex-badge>`;}
+function block29 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
 
 function template(this: TabHeader) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

package/src/generated/templates/TabNavigationTemplate.lit.ts

@@ -5,12 +5,14 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type TabNavigation from "../../TabNavigation.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-tab-navigation__root"><div id="${ifDefined(this._id)}-header" class="udex-tab-navigation__header" part="tab-navigation-header" @keydown="${this.handleKeyDown}"><div id="${ifDefined(this._id)}-header-tabs" class="udex-tab-navigation__header-tabs" role="tablist" aria-labelledby="tablist-${ifDefined(this._id)}" part="tab-navigation-header-tabs" @click="${this.onTabClick}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div><button class="udex-tab-navigation__button-more" @click="${this.handleMoreButton}" @keydown="${this.handleFocusMoreButton}" tabindex="0" aria-haspopup="menu" aria-expanded="${ifDefined(this._isExpanded)}" tooltip="${ifDefined(this.moreButtonText)}" hidden>${ifDefined(this.moreButtonText)}<${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-more-icon" name="navigation-down-arrow" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}></button>${ this._overflowItems.length ? block2.call(this, context, tags, suffix) : undefined }</div><div class="udex-tab-navigation__content" id="udex-${ifDefined(this.__id)}-content" part="tab-navigation-content">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</div></div>` : html`<div class="udex-tab-navigation__root"><div id="${ifDefined(this._id)}-header" class="udex-tab-navigation__header" part="tab-navigation-header" @keydown="${this.handleKeyDown}"><div id="${ifDefined(this._id)}-header-tabs" class="udex-tab-navigation__header-tabs" role="tablist" aria-labelledby="tablist-${ifDefined(this._id)}" part="tab-navigation-header-tabs" @click="${this.onTabClick}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div><button class="udex-tab-navigation__button-more" @click="${this.handleMoreButton}" @keydown="${this.handleFocusMoreButton}" tabindex="0" aria-haspopup="menu" aria-expanded="${ifDefined(this._isExpanded)}" tooltip="${ifDefined(this.moreButtonText)}" hidden>${ifDefined(this.moreButtonText)}<ui5-icon class="udex-tab-navigation__button-more-icon" name="navigation-down-arrow" mode="Decorative"></ui5-icon></button>${ this._overflowItems.length ? block2.call(this, context, tags, suffix) : undefined }</div><div class="udex-tab-navigation__content" id="udex-${ifDefined(this.__id)}-content" part="tab-navigation-content">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</div></div>`;}
-function block1 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ifDefined(item.tabNavigation)}`;}
-function block2 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ifDefined(this.tabNavigationPopover)}`;}
-function block3 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.selected ? block4.call(this, context, tags, suffix, item, index) : block5.call(this, context, tags, suffix, item, index) }`;}
-function block4 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div class="udex-tab-navigation__content-item" id="${ifDefined(item._contentId)}" aria-labelledby="${ifDefined(item._id)}"><slot name="${ifDefined(item._slotName)}"></slot></div>`;}
-function block5 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div class="udex-tab-navigation__content-item" id="${ifDefined(item._contentId)}"><slot name="${ifDefined(item._slotName)}"></slot></div>`;}
+function block0 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-tab-navigation__root"><div id="${ifDefined(this._id)}-header" class="udex-tab-navigation__header" part="tab-navigation-header" @keydown="${this.handleKeyDown}"><div id="${ifDefined(this._id)}-header-tabs" class="udex-tab-navigation__header-tabs" role="tablist" aria-labelledby="tablist-${ifDefined(this._id)}" aria-orientation="${ifDefined(this.ariaOrientationValue)}" part="tab-navigation-header-tabs" @click="${this.onTabClick}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div><button class="udex-tab-navigation__button-more" @click="${this.handleMoreButton}" @keydown="${this.handleFocusMoreButton}" tabindex="0" aria-haspopup="menu" aria-expanded="${ifDefined(this._isExpanded)}" tooltip="${ifDefined(this.moreButtonText)}" hidden>${ifDefined(this.moreButtonText)}<${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-more-icon" name="navigation-down-arrow" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}></button>${ this._overflowItems.length ? block4.call(this, context, tags, suffix) : undefined }</div><div class="udex-tab-navigation__content" id="udex-${ifDefined(this.__id)}-content" part="tab-navigation-content">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }</div></div>` : html`<div class="udex-tab-navigation__root"><div id="${ifDefined(this._id)}-header" class="udex-tab-navigation__header" part="tab-navigation-header" @keydown="${this.handleKeyDown}"><div id="${ifDefined(this._id)}-header-tabs" class="udex-tab-navigation__header-tabs" role="tablist" aria-labelledby="tablist-${ifDefined(this._id)}" aria-orientation="${ifDefined(this.ariaOrientationValue)}" part="tab-navigation-header-tabs" @click="${this.onTabClick}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div><button class="udex-tab-navigation__button-more" @click="${this.handleMoreButton}" @keydown="${this.handleFocusMoreButton}" tabindex="0" aria-haspopup="menu" aria-expanded="${ifDefined(this._isExpanded)}" tooltip="${ifDefined(this.moreButtonText)}" hidden>${ifDefined(this.moreButtonText)}<ui5-icon class="udex-tab-navigation__button-more-icon" name="navigation-down-arrow" mode="Decorative"></ui5-icon></button>${ this._overflowItems.length ? block4.call(this, context, tags, suffix) : undefined }</div><div class="udex-tab-navigation__content" id="udex-${ifDefined(this.__id)}-content" part="tab-navigation-content">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }</div></div>`;}
+function block1 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ifDefined(item.tabNavigation)}${ item.isMobileVertical ? block2.call(this, context, tags, suffix, item, index) : undefined }`;}
+function block2 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.selected ? block3.call(this, context, tags, suffix, item, index) : undefined }`;}
+function block3 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div class="udex-tab-navigation__content" part="tab-navigation-content"><div class="udex-tab-navigation__content-item" id="${ifDefined(item._contentId)}-mobile" aria-labelledby="${ifDefined(item._id)}"><slot name="${ifDefined(item._slotName)}"></slot></div></div>`;}
+function block4 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ifDefined(this.tabNavigationPopover)}`;}
+function block5 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.selected ? block6.call(this, context, tags, suffix, item, index) : block7.call(this, context, tags, suffix, item, index) }`;}
+function block6 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div class="udex-tab-navigation__content-item" id="${ifDefined(item._contentId)}" aria-hidden="${ifDefined(item.IsMobile)}" aria-labelledby="${ifDefined(item._id)}"><slot name="${ifDefined(item._slotName)}"></slot></div>`;}
+function block7 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div class="udex-tab-navigation__content-item" id="${ifDefined(item._contentId)}"><slot name="${ifDefined(item._slotName)}"></slot></div>`;}
 
 function template(this: TabNavigation) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;