@sapudex/web-components 0.176.0 → 0.184.0

package/src/FilterMenu.ts

@@ -3,7 +3,6 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
-import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
@@ -11,7 +10,8 @@ import {
   isTabPrevious, isTabNext, isEscape, isSpace, isEnter,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
-import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
 import UDExListGroupHeader from "./ListGroupHeader.js";
@@ -59,7 +59,8 @@ import SearchableListCss from "./generated/themes/SearchableList.css.js";
   styles: [FilterMenuCss, SearchableListCss],
   template: FilterMenuTemplate,
   dependencies: [
-    ResponsivePopover,
+    Popover,
+    Icon,
     UDExFilterMenuItem,
     UDExFilterMenuGroupHeader,
     UDExFilterMenuSelectAll,
@@ -293,8 +294,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
 
   _trigger!: UDExButton;
   _search!: UDExSearch;
-  _hasFooterButtons!: boolean;
-  _popover!: ResponsivePopover;
+  _popover!: Popover;
   _breakpointSizeXS = 640;
 
   onEnterDOM(): void {
@@ -311,7 +311,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
     this._search = this.getSearch();
     this._popover = this.getPopover();
     this._trigger = this.getTriggerButton();
-    this._hasFooterButtons = this.hasFooterButtons;
   }
 
   handleSelectAll(e:CustomEvent): void {
@@ -352,7 +351,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   handleResult(): void {
-    if (!this.disabledResultBtn) {
+    if (!this.disabledButtons) {
       this._popover.close();
       this.fireEvent("result-click", {
         selectedItems: this.selectedItems,
@@ -361,7 +360,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   handleKeyDownList(e: KeyboardEvent): void {
-    const isTabNextPress = isTabNext(e) && !this._hasFooterButtons;
+    const isTabNextPress = isTabNext(e) && !this.hasFooterButtons;
     const isTabPrevPress = isTabPrevious(e) && !this._search;
     const target = e.target as HTMLElement;
     const isSearchResetTrigger = target === this._search;
@@ -425,7 +424,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   getSearch(): UDExSearch {
-    return this.shadowRoot!.querySelector<UDExSearch>("udex-search")!;
+    return this.shadowRoot!.querySelector<UDExSearch>("[udex-search]")!;
   }
 
   _dropdownBeforeOpen(): void {
@@ -472,7 +471,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return hasLabel ? this.resetBtnLabel : UDExFilterMenu.i18nBundle.getText(RESET);
   }
 
-  get disabledResultBtn(): boolean {
+  get disabledButtons(): boolean {
     return !this.selectedItems.length && !this.selectAll;
   }
 
@@ -493,11 +492,11 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   get hasFooterButtons(): boolean {
-    return (this.hasResultBtn || this.hasResetBtn) && this.modeMultiSelect;
+    return (this.hasResultBtn || this.hasResetBtn) && !this.disabledButtons;
   }
 
   get hasResultBtn(): boolean {
-    return !this.hideResultBtn && !this.disabledResultBtn;
+    return !this.hideResultBtn && !this.disabledButtons;
   }
 
   get hasResetBtn(): boolean {
@@ -508,8 +507,8 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return this.shadowRoot!.querySelector<UDExButton>("#filterMenuTrigger")!;
   }
 
-  getPopover(): ResponsivePopover {
-    return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-popover]")!;
+  getPopover(): Popover {
+    return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
   }
 
   getItems(): Array<UDExListItemBase> {

package/src/Footer.ts

@@ -14,13 +14,17 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import UDExAccordionItem from "./AccordionItem.js";
+import UDExButton from "./Button.js";
+import UDExAccordion from "./Accordion.js";
+import UDExDivider from "./Divider.js";
 
 // Template
 import FooterTemplate from "./generated/templates/FooterTemplate.lit.js";
 
 // Styles
 import FooterCss from "./generated/themes/Footer.css";
-import UDExAccordionItem from "./AccordionItem.js";
 import {
   ABOUT_SAP,
   CHAT_WITH_US,
@@ -116,7 +120,7 @@ export const FooterDetailedEvent = {
   renderer: litRender,
   styles: [FooterCss],
   template: FooterTemplate,
-  dependencies: [UDExAccordionItem],
+  dependencies: [UDExAccordion, UDExAccordionItem, Icon, UDExButton, UDExDivider],
 })
 /**
  * Triggered on click interaction with logo in footer

package/src/HeroBanner.ts

@@ -4,7 +4,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
-import "@ui5/webcomponents/dist/Icon.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/media-play.js";
 import "@ui5/webcomponents-icons/dist/media-pause.js";
 
@@ -31,6 +31,7 @@ export enum imageLoadingStrategies {
   renderer: litRender,
   styles: HeroBannerCss,
   template: HeroBannerTemplate,
+  dependencies: [Icon],
 })
 class UDExHeroBanner extends UI5Element {
   /**

package/src/Link.ts

@@ -2,6 +2,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Link from "@ui5/webcomponents/dist/Link.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
 
 import linkCss from "@ui5/webcomponents/dist/generated/themes/Link.css.js";
 import LinkTemplate from "./generated/templates/LinkTemplate.lit.js";
@@ -34,6 +35,7 @@ import IconPlacement from "./types/IconPlacement.js";
   renderer: litRender,
   styles: [linkCss, LinkCss],
   template: LinkTemplate,
+  dependencies: [Icon],
 })
 
 class UDExLink extends Link {

package/src/ListSelectAll.ts

@@ -8,6 +8,7 @@ import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import { ListMode } from "./types/List.js";
 import { SELECT_ALL } from "./generated/i18n/i18n-defaults.js";
 import ListSelectAllTemplate from "./generated/templates/ListSelectAllTemplate.lit";
+import UDExListItem from "./ListItem.js";
 
 // Styles
 import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css";
@@ -34,6 +35,7 @@ import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css";
   renderer: litRender,
   styles: ListGroupHeaderCss,
   template: ListSelectAllTemplate,
+  dependencies: [UDExListItem],
 })
 
 @event("select-all", {

package/src/MastheadItem.ts

@@ -280,7 +280,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleKeyEscapeMobile(): void {
-    const mastheadShell: MastheadShell = document.querySelector<MastheadShell>("udex-masthead-shell")!;
+    const mastheadShell: MastheadShell = document.querySelector<MastheadShell>("[udex-masthead-shell]")!;
 
     mastheadShell.closeMobileMenu();
     mastheadShell.mobileBtn?.focus();
@@ -365,7 +365,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get profileAvatar(): UDExAvatar {
-    return this.querySelector("udex-avatar")!;
+    return this.querySelector("[udex-avatar]")!;
   }
 
   get isRtlDirection(): boolean {

package/src/MastheadMenu.ts

@@ -149,7 +149,7 @@ class UDExMastheadMenu extends UI5Element {
   }
 
   get links(): Array<UDExMastheadMenuItem> {
-    const menuItems: Array<UDExMastheadMenuItem> = Array.from(this.shadowRoot!.querySelectorAll("udex-masthead-menu-item"));
+    const menuItems: Array<UDExMastheadMenuItem> = Array.from(this.shadowRoot!.querySelectorAll("[udex-masthead-menu-item]"));
     return menuItems.filter(({ url }) => url && url.length > 0);
   }
 

package/src/MastheadMobileMenu.ts

@@ -401,7 +401,7 @@ class UDExMastheadMobileMenu extends UI5Element {
   }
 
   getListItemByIndex(index: number): HTMLElement | null {
-    return this.navigationItems[index]?.querySelector("udex-masthead-menu-item");
+    return this.navigationItems[index]?.querySelector("[udex-masthead-menu-item]");
   }
 
   get exploreBtnMenu(): UDExMastheadMenuItem {

package/src/MastheadShell.ts

@@ -60,6 +60,20 @@ const breakpointSizeM: number = 1279;
   ],
 })
 
+/**
+ * Fired event when the user clicks the mobile menu button opener.
+ *
+ * @public
+ */
+@event("mobile-menu-open")
+
+/**
+ * Fired event when the user clicks the mobile menu button closer.
+ *
+ * @public
+ */
+@event("mobile-menu-close")
+
 /**
  * Fired event when the user clicks the search button trigger.
  *
@@ -402,11 +416,14 @@ class UDExMastheadShell extends UI5Element {
   handleMobileMenuClick(e: CustomEvent) {
     e.stopPropagation();
     this.setSelectedItem(e);
+
     this._isMobileMenuOpen = true;
 
     if (this.bodyOverflow) {
       this.setOverflowBody();
     }
+
+    this.fireEvent("mobile-menu-open");
   }
 
   handleMobileCloseClick(e: CustomEvent) {
@@ -434,7 +451,7 @@ class UDExMastheadShell extends UI5Element {
   }
 
   focusSearchInput(): void {
-    const searchSlot = this.querySelector<UDExSearch>("udex-search");
+    const searchSlot = this.querySelector<UDExSearch>("[udex-search]");
     if (searchSlot) {
       const input = searchSlot.shadowRoot!.querySelector<HTMLElement>("input");
       input?.focus();
@@ -524,6 +541,12 @@ class UDExMastheadShell extends UI5Element {
     if (this.bodyOverflow) {
       this.removeOverflowBody();
     }
+
+    this.fireMobileMenuCloseEvent();
+  }
+
+  fireMobileMenuCloseEvent(): void {
+    this.fireEvent("mobile-menu-close");
   }
 
   get searchOpener(): UDExMastheadItem | null | undefined {

package/src/MediaPlayer.ts

@@ -347,11 +347,11 @@ class UDExMediaPlayer extends UI5Element {
    */
   getPlayer(): HTMLVideoElement | HTMLAudioElement | YT.Player | VimeoPlayer | null {
     if (this._youtubeSrc) {
-      const player = this.shadowRoot?.querySelector("udex-media-player-youtube") as UDExMediaPlayerYoutube;
+      const player = this.shadowRoot?.querySelector("[udex-media-player-youtube]") as UDExMediaPlayerYoutube;
       return player?.getPlayer() || null;
     }
     if (this._vimeoSrc) {
-      const player = this.shadowRoot?.querySelector("udex-media-player-vimeo") as UDExMediaPlayerVimeo;
+      const player = this.shadowRoot?.querySelector("[udex-media-player-vimeo]") as UDExMediaPlayerVimeo;
       return player?.getPlayer() || null;
     }
     return this.shadowRoot?.querySelector(".video-js video") as HTMLVideoElement || this.shadowRoot?.querySelector(".video-js audio") || null;

package/src/MessageStrip.ts

@@ -10,6 +10,7 @@ import {
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import MessageStrip from "@ui5/webcomponents/dist/MessageStrip.js";
 import messageStripCss from "@ui5/webcomponents/dist/generated/themes/MessageStrip.css.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExButton from "./Button.js";
 import {
   MESSAGE_STRIP_CLOSE_BUTTON,
@@ -73,7 +74,7 @@ type textStatusType = Record<Exclude<MessageStripDesign, "Action">, string>;
   renderer: litRender,
   styles: [messageStripCss, MessageStripCss],
   template: MessageStripTemplate,
-  dependencies: [UDExButton],
+  dependencies: [UDExButton, UI5Icon],
 })
 /**
  * Fired when the close button is pressed either with a

package/src/RadioButton.ts

@@ -29,7 +29,6 @@ import RadioButtonCss from "./generated/themes/RadioButton.css.js";
   tag: "udex-radio-button",
   renderer: litRender,
   styles: [radioButtonCss, RadioButtonCss],
-  dependencies: [RadioButton],
 })
 class UDExRadioButton extends RadioButton {
   /**

package/src/Search.ts

@@ -976,7 +976,6 @@ class UDExSearch extends UI5Element {
         e.preventDefault();
       } else {
         this.Suggestion?.onEnter(e);
-        this.fireDropdownItemClick(this.value);
       }
       this.handleSubmitValue();
     }

package/src/SearchableListBase.ts

@@ -393,12 +393,12 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   getSearch(): Search {
-    return this.shadowRoot!.querySelector<Search>("udex-search")!;
+    return this.shadowRoot!.querySelector<Search>("[udex-search]")!;
   }
 
   getDomListItems(): Element[] {
-    const elementList = this.shadowRoot!.querySelector("udex-list") as HTMLElement;
-    return elementList ? Array.from(elementList.querySelectorAll("udex-list-item")) : [];
+    const elementList = this.shadowRoot!.querySelector("[udex-list]") as HTMLElement;
+    return elementList ? Array.from(elementList.querySelectorAll("[udex-list-item]")) : [];
   }
 
   setItemsModeAndControl(items: Array<UDExFilterMenuItem>) {

package/src/SecondaryNavigation.ts

@@ -411,7 +411,7 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   get domNavItems(): Array<UDExSecondaryNavigationItem> {
-    const items = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationItem>("udex-secondary-navigation-item");
+    const items = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationItem>("[udex-secondary-navigation-item]");
     return items ? Array.from(items) : [];
   }
 

package/src/SecondaryNavigationItem.ts

@@ -378,7 +378,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   }
 
   get domNavItems(): Array<UDExSecondaryNavigationSubItem> {
-    const domNavItems = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationSubItem>("udex-secondary-navigation-sub-item");
+    const domNavItems = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationSubItem>("[udex-secondary-navigation-sub-item]");
     return domNavItems ? Array.from(domNavItems) : [];
   }
 

package/src/SelectBox.ts

@@ -22,7 +22,7 @@ import Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Token from "@ui5/webcomponents/dist/Token.js";
 import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
 import UDExListGroupHeader from "./ListGroupHeader.js";
@@ -86,7 +86,7 @@ import UDExTagGroup from "./TagGroup.js";
     Icon,
     UDExStatusMessage,
     UDExControlButton,
-    ResponsivePopover,
+    Popover,
     UDExTagGroup,
   ],
 })
@@ -246,7 +246,7 @@ class UDExSelectBox extends UDExSearchableListBase {
     _showTagsDropdownContent!: boolean;
 
   _trigger!: HTMLElement;
-  _popover!: ResponsivePopover;
+  _popover!: Popover;
   _tokenizer!: Tokenizer;
   _search!: UDExSearch;
   _singleSelectedOption!: string;
@@ -576,12 +576,12 @@ class UDExSelectBox extends UDExSearchableListBase {
     this.fireEvent("show-more");
   }
 
-  getPopover(): ResponsivePopover {
-    return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-popover]")!;
+  getPopover(): Popover {
+    return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
   }
 
   getSearch(): UDExSearch {
-    return this.shadowRoot!.querySelector<UDExSearch>("udex-search")!;
+    return this.shadowRoot!.querySelector<UDExSearch>("[udex-search]")!;
   }
 
   getTrigger(): HTMLElement {
@@ -589,12 +589,12 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   getTagGroup(): UDExTagGroup {
-    return this.shadowRoot!.querySelector<UDExTagGroup>("udex-tag-group")!;
+    return this.shadowRoot!.querySelector<UDExTagGroup>("[udex-tag-group]")!;
   }
 
   getTags(): Array<UDExTag> {
     if (this.getTagGroup()) {
-      return Array.from(this.getTagGroup().shadowRoot!.querySelectorAll<UDExTag>("udex-tag"));
+      return Array.from(this.getTagGroup().shadowRoot!.querySelectorAll<UDExTag>("[udex-tag]"));
     }
     return [];
   }
@@ -698,7 +698,7 @@ class UDExSelectBox extends UDExSearchableListBase {
     return {
       "ariaLabel": this.accessibleName || this.label || undefined,
       "ariaLabelledBy": this.accessibleNameRef || undefined,
-      "ariaControls": this.shadowRoot?.querySelector("udex-list")?.getAttribute("id"),
+      "ariaControls": this.shadowRoot?.querySelector("[udex-list]")?.getAttribute("id"),
     };
   }
 

package/src/SideNavigationMobile.ts

@@ -101,7 +101,7 @@ class UDExSideNavigationMobile extends UI5Element {
 
   async _getResponsePopover() {
     const staticAreaItem = await this.getStaticAreaItemDomRef();
-    return staticAreaItem!.querySelector<UDExDropdown>(`udex-dropdown`)!;
+    return staticAreaItem!.querySelector<UDExDropdown>(`[udex-dropdown]`)!;
   }
 
   _afterDropdownOpen() {

package/src/StepInput.ts

@@ -306,7 +306,7 @@ class UDExStepInput extends UI5Element {
   }
 
   get inputOuter() {
-    return this.shadowRoot!.querySelector("udex-text-field")!;
+    return this.shadowRoot!.querySelector("[udex-text-field]")!;
   }
 
   _onInputFocusIn() {

package/src/TabNavigation.ts

@@ -7,7 +7,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
@@ -24,8 +24,8 @@ import {
   isTabNext,
   isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Tab, { ITab } from "./Tab.js";
-import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import { MORE } from "./generated/i18n/i18n-defaults.js";
 
@@ -72,7 +72,7 @@ export enum Mode {
   renderer: litRender,
   styles: [TabNavigationCss, TabInOverflowCss],
   template: TabNavigationTemplate,
-  dependencies: [ResponsivePopover],
+  dependencies: [Popover, Icon],
 })
 /**
  * Fires when the tab was clicked.
@@ -157,9 +157,9 @@ class UDExTabNavigation extends UI5Element {
 
   static i18nBundle: any;
   _handleResizeBound: () => void;
-  _responsivePopover?: ResponsivePopover;
+  _popover?: Popover;
   _visibleTabs?: Array<ITab | HTMLElement>;
-  _isExpanded!: boolean;
+  _isExpanded: boolean = false;
   _maxTitleLength: number = 25;
   _maxTitleLengthInSecondLines: number = this._maxTitleLength * 2;
 
@@ -270,7 +270,7 @@ class UDExTabNavigation extends UI5Element {
   }
 
   initOutsideClick() {
-    if (this._responsivePopover?.opened) {
+    if (this._popover?.opened) {
       this.handleOutsideClick();
     }
   }
@@ -569,8 +569,9 @@ class UDExTabNavigation extends UI5Element {
     return this.shadowRoot!.querySelector<HTMLElement>(`#${this.__id!}-header`)!;
   }
 
-  handleMoreButton() {
-    this._responsivePopover = this.getResponsePopover();
+  handleMoreButton(e: Event) {
+    e.stopPropagation();
+    this._popover = this.getResponsePopover();
     this.updateOverflowItems();
     this.handleTogglePopover();
   }
@@ -583,7 +584,7 @@ class UDExTabNavigation extends UI5Element {
   }
 
   handleTogglePopover() {
-    if (this._responsivePopover?.opened) {
+    if (this._popover?.opened) {
       this.handleClosePopover();
     } else {
       this.handleOpenPopover();
@@ -591,16 +592,16 @@ class UDExTabNavigation extends UI5Element {
   }
 
   handleClosePopover() {
-    if (this._responsivePopover?.opened) {
-      this._responsivePopover.close();
+    if (this._popover?.opened) {
+      this._popover.close();
       this.getMoreButton().classList.remove("udex-tab-navigation__button-more--toggled");
       this._isExpanded = false;
     }
   }
 
   handleOpenPopover() {
-    if (!this._responsivePopover?.opened) {
-      this._responsivePopover!.showAt(this.getMoreButton());
+    if (!this._popover?.opened) {
+      this._popover!.showAt(this.getMoreButton());
       this.getMoreButton().classList.add("udex-tab-navigation__button-more--toggled");
       this._isExpanded = true;
     }
@@ -690,7 +691,7 @@ class UDExTabNavigation extends UI5Element {
   handleEnterKeyMoreButton(e: KeyboardEvent) {
     if (isEnter(e)) {
       e.preventDefault();
-      this._responsivePopover = this.getResponsePopover();
+      this._popover = this.getResponsePopover();
       this.updateOverflowItems();
       this.handleOpenPopover();
     }
@@ -698,14 +699,14 @@ class UDExTabNavigation extends UI5Element {
 
   handleDownMoreButton(e: KeyboardEvent) {
     if (isDown(e) || isEnter(e)) {
-      this._responsivePopover = this.getResponsePopover();
+      this._popover = this.getResponsePopover();
       this.handleOpenPopover();
       this.updateOverflowItems();
     }
   }
 
   onFocusFirstItemPopover() {
-    if (this._responsivePopover?.opened) {
+    if (this._popover?.opened) {
       const popoverItems = this.getItemsFromPopover();
       const firstPopoverItem = popoverItems[0];
       firstPopoverItem.setAttribute("tabindex", "0");
@@ -811,8 +812,8 @@ class UDExTabNavigation extends UI5Element {
     }
   }
 
-  getResponsePopover(): ResponsivePopover {
-    return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-popover]")!;
+  getResponsePopover(): Popover {
+    return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
   }
 
   get moreButtonText(): string {

package/src/Table.ts

@@ -301,7 +301,7 @@ class UDExTable extends UI5Element {
 
   getParentRow(): UDExTableRow | UDExTableHeaderRow | UDExTableGroupRow {
     const focusedElement = document.activeElement as HTMLElement;
-    return focusedElement.closest("udex-table-row, udex-table-header-row, udex-table-group-row")!;
+    return focusedElement.closest("[udex-table-row], [udex-table-header-row], [udex-table-group-row]")!;
   }
 
   getKeyboardNavigationItems(): Array<KeyBoardItem> {
@@ -347,7 +347,7 @@ class UDExTable extends UI5Element {
 
   getInteractiveElements(el: TableBaseRow): Array<HTMLElement> {
     return el.cells.flatMap(cell => Array.from(
-      cell.querySelectorAll("button, a, udex-button, udex-link, udex-rating-indicator"),
+      cell.querySelectorAll("button, a, [udex-button], [udex-link], [udex-rating-indicator]"),
     ));
   }
 

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

@@ -6,7 +6,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	
 function block0 (this: BreadcrumbsPopover, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-dropdown", tags, suffix)} id="udex-${ifDefined(this._id)}-breadcrumbs__popover" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement-type="Bottom" horizontal-align="Left" @after-open="${this._afterDropdownOpen}" @after-close="${this._afterDropdownClose}" @keydown="${this._handleKeydown}"><div class="udex-breadcrumbs__popover-content">${ repeat(this._dropdownItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></${scopeTag("udex-dropdown", tags, suffix)}>` : html`<udex-dropdown id="udex-${ifDefined(this._id)}-breadcrumbs__popover" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement-type="Bottom" horizontal-align="Left" @after-open="${this._afterDropdownOpen}" @after-close="${this._afterDropdownClose}" @keydown="${this._handleKeydown}"><div class="udex-breadcrumbs__popover-content">${ repeat(this._dropdownItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></udex-dropdown>`;}
 function block1 (this: BreadcrumbsPopover, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.icon ? block2.call(this, context, tags, suffix, item, index) : block3.call(this, context, tags, suffix, item, index) }`;}
-function block2 (this: BreadcrumbsPopover, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-link", tags, suffix)} index="${index}" id="${ifDefined(item._id)}-li" @ui5-click="${ifDefined(this._onDropdownLinkPress)}" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" class="udex-breadcrumbs__item udex-breadcrumbs__item--${index} udex-breadcrumbs__item--with-icon" icon=${ifDefined(item.icon)} icon-placement="start" accessible-name="${ifDefined(item.textContent)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.textContent)}</${scopeTag("udex-link", tags, suffix)}>` : html`<udex-link index="${index}" id="${ifDefined(item._id)}-li" @ui5-click="${ifDefined(this._onDropdownLinkPress)}" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" class="udex-breadcrumbs__item udex-breadcrumbs__item--${index} udex-breadcrumbs__item--with-icon" icon=${ifDefined(item.icon)} icon-placement="start" accessible-name="${ifDefined(item.textContent)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.textContent)}</udex-link>`;}
+function block2 (this: BreadcrumbsPopover, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-link", tags, suffix)} index="${index}" id="${ifDefined(item._id)}-li" @ui5-click="${ifDefined(this._onDropdownLinkPress)}" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" class="udex-breadcrumbs__item udex-breadcrumbs__item--${index} udex-breadcrumbs__item--with-icon" icon=${ifDefined(item.icon)} icon-placement="Start" accessible-name="${ifDefined(item.textContent)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.textContent)}</${scopeTag("udex-link", tags, suffix)}>` : html`<udex-link index="${index}" id="${ifDefined(item._id)}-li" @ui5-click="${ifDefined(this._onDropdownLinkPress)}" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" class="udex-breadcrumbs__item udex-breadcrumbs__item--${index} udex-breadcrumbs__item--with-icon" icon=${ifDefined(item.icon)} icon-placement="Start" accessible-name="${ifDefined(item.textContent)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.textContent)}</udex-link>`;}
 function block3 (this: BreadcrumbsPopover, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item._isCurrentPageItem ? block4.call(this, context, tags, suffix, item, index) : block5.call(this, context, tags, suffix, item, index) }`;}
 function block4 (this: BreadcrumbsPopover, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<span id="${ifDefined(item._id)}-li" class="udex-breadcrumbs__item udex-breadcrumb__item--current udex-breadcrumbs__item--${index}" accessible-name="${ifDefined(item.accessibleName)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.textContent)}</span>`;}
 function block5 (this: BreadcrumbsPopover, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-link", tags, suffix)} index="${index}" id="${ifDefined(item._id)}-li" @ui5-click="${ifDefined(this._onDropdownLinkPress)}" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" class="udex-breadcrumbs__item udex-breadcrumbs__item--${index}" accessible-name="${ifDefined(item.accessibleName)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.textContent)}</${scopeTag("udex-link", tags, suffix)}>` : html`<udex-link index="${index}" id="${ifDefined(item._id)}-li" @ui5-click="${ifDefined(this._onDropdownLinkPress)}" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" class="udex-breadcrumbs__item udex-breadcrumbs__item--${index}" accessible-name="${ifDefined(item.accessibleName)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.textContent)}</udex-link>`;}

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

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	type DatePickerPopover = any;
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: DatePickerPopover, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-dropdown", tags, suffix)} id="udex-${ifDefined(this._id)}-calendar__popover" class="udex-date-picker__popover" placement-type="Bottom" horizontal-align="Left" @after-close="${this._afterDropdownClose}" @after-open="${this._afterDropdownOpen}"><${scopeTag("ui5-calendar", tags, suffix)} class="udex-date-picker__calendar" @ui5-selected-dates-change="${ifDefined(this.handleCalendarChange)}" selection-mode="${ifDefined(this.selectionMode)}" min-date="${ifDefined(this.minDate)}" max-date="${ifDefined(this.maxDate)}" format-pattern="${ifDefined(this.formatPattern)}">${ repeat(this._calendarSelectedDates, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</${scopeTag("ui5-calendar", tags, suffix)}></${scopeTag("udex-dropdown", tags, suffix)}>` : html`<udex-dropdown id="udex-${ifDefined(this._id)}-calendar__popover" class="udex-date-picker__popover" placement-type="Bottom" horizontal-align="Left" @after-close="${this._afterDropdownClose}" @after-open="${this._afterDropdownOpen}"><ui5-calendar class="udex-date-picker__calendar" @ui5-selected-dates-change="${ifDefined(this.handleCalendarChange)}" selection-mode="${ifDefined(this.selectionMode)}" min-date="${ifDefined(this.minDate)}" max-date="${ifDefined(this.maxDate)}" format-pattern="${ifDefined(this.formatPattern)}">${ repeat(this._calendarSelectedDates, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</ui5-calendar></udex-dropdown>`;}
+function block0 (this: DatePickerPopover, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-dropdown", tags, suffix)} id="udex-${ifDefined(this._id)}-calendar__popover" class="udex-date-picker__popover" placement-type="Bottom" horizontal-align="Left" @ui5-after-close="${ifDefined(this._afterDropdownClose)}" @ui5-after-open="${ifDefined(this._afterDropdownOpen)}"><${scopeTag("ui5-calendar", tags, suffix)} class="udex-date-picker__calendar" @ui5-selected-dates-change="${ifDefined(this.handleCalendarChange)}" selection-mode="${ifDefined(this.selectionMode)}" min-date="${ifDefined(this.minDate)}" max-date="${ifDefined(this.maxDate)}" format-pattern="${ifDefined(this.formatPattern)}">${ repeat(this._calendarSelectedDates, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</${scopeTag("ui5-calendar", tags, suffix)}></${scopeTag("udex-dropdown", tags, suffix)}>` : html`<udex-dropdown id="udex-${ifDefined(this._id)}-calendar__popover" class="udex-date-picker__popover" placement-type="Bottom" horizontal-align="Left" @ui5-after-close="${ifDefined(this._afterDropdownClose)}" @ui5-after-open="${ifDefined(this._afterDropdownOpen)}"><ui5-calendar class="udex-date-picker__calendar" @ui5-selected-dates-change="${ifDefined(this.handleCalendarChange)}" selection-mode="${ifDefined(this.selectionMode)}" min-date="${ifDefined(this.minDate)}" max-date="${ifDefined(this.maxDate)}" format-pattern="${ifDefined(this.formatPattern)}">${ repeat(this._calendarSelectedDates, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</ui5-calendar></udex-dropdown>`;}
 function block1 (this: DatePickerPopover, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("ui5-date", tags, suffix)} value="${ifDefined(item)}"></${scopeTag("ui5-date", tags, suffix)}>` : html`<ui5-date value="${ifDefined(item)}"></ui5-date>`;}