@sapudex/web-components 0.173.0 → 0.184.0

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.hbs

@@ -1,6 +1,6 @@
-<div class="udex-search__root {{classWithPrefix}}">
+<div class="udex-search__root {{searchClasses}}">
     {{#if isShowSearchHomePrefix}}
-        <div class="udex-search__prefix">
+        <div class="udex-search__prefix {{prefixWrapperClasses}}">
             <button
                 type="button"
                 role="combobox"
@@ -14,7 +14,7 @@
             </button>
             <ui5-popover
                 id="udex-search-prefix"
-                class="udex-search__prefix-popover"
+                class="{{prefixPopoverClasses}}"
                 hide-arrow
                 placement-type="Bottom"
                 horizontal-align="Left"

package/src/Search.ts

@@ -88,6 +88,8 @@ export enum Mode {
   HomeSearch = "Home Search"
 }
 
+export type PopoverPlacement = "Bottom" | "Top";
+
 /**
  * @class
  *
@@ -214,6 +216,15 @@ class UDExSearch extends UI5Element {
   @property({ type: Boolean, noAttribute: true })
     showResetButton!: boolean;
 
+  /**
+   * Defines where the SuggestionPopover is currently placed.
+   *
+   * @default "Bottom"
+   * @private
+   */
+  @property({ type: String, noAttribute: true, defaultValue: "Bottom" })
+    _popoverPlacement!: PopoverPlacement;
+
   /**
    * Defines display the submit button for the search field.
    *
@@ -709,7 +720,7 @@ class UDExSearch extends UI5Element {
     return this.shadowRoot!.querySelector(".udex-search__prefix") as HTMLElement;
   }
 
-  getPrefixPopover() {
+  getPrefixPopover(): Popover {
     return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
   }
 
@@ -726,8 +737,9 @@ class UDExSearch extends UI5Element {
       this._prefixDropdownExpanded = true;
       dropdown.showAt(this.getPrefixButton());
       dropdown.style.width = `${button.offsetWidth + 1}px`;
+      dropdown.classList.add(this.prefixPopoverClasses);
       button.classList.add("udex-search__prefix-button--active");
-      wrapper.classList.add("udex-search__prefix--show-popover");
+      wrapper.classList.add(this.prefixWrapperClasses);
       this.dropdownPrefix[0].addEventListener("item-press", this.handleItemClick);
     }
   }
@@ -750,8 +762,7 @@ class UDExSearch extends UI5Element {
   handleAfterClosePrefixPopover() {
     const wrapper = this.getPrefixWrapper();
     const button = this.getPrefixButton();
-
-    wrapper.classList.remove("udex-search__prefix--show-popover");
+    wrapper.classList.remove("udex-search__prefix--show-popover", "udex-search__prefix--show-popover-top");
     button.classList.remove("udex-search__prefix-button--active");
   }
 
@@ -790,10 +801,9 @@ class UDExSearch extends UI5Element {
             console.warn(error.message);
           });
       } else {
+        this.open = true;
         this.Suggestion.open();
       }
-
-      this.handleClassToRoot();
       this.handleAriaExpanded();
     }
   }
@@ -801,9 +811,8 @@ class UDExSearch extends UI5Element {
   onClosePopover(): void {
     if (this.showSuggestedPopover) {
       this.Suggestion!.close();
-      this.handleClassToRoot();
       this.handleAriaExpanded();
-      this.openSuggestionPopup = false;
+      this.open = false;
     }
   }
 
@@ -811,16 +820,11 @@ class UDExSearch extends UI5Element {
     this.Suggestion?.handleKeyPress(e);
   }
 
-  handleClassToRoot() {
-    const hasAdditionRootClass = !this.shadowRoot?.querySelector(".udex-search__root")?.classList.contains("udex-search__root--show-popover");
-
-    if (this.mode === Mode.HomeSearch && hasAdditionRootClass && this.open) {
-      this.shadowRoot?.querySelector(".udex-search__root")?.classList.add("udex-search__root--show-popover");
-    }
-
-    if (this.mode === Mode.HomeSearch && !hasAdditionRootClass && !this.open) {
-      this.shadowRoot?.querySelector(".udex-search__root")?.classList.remove("udex-search__root--show-popover");
+  get rootClasses(): string {
+    if (this.mode === Mode.HomeSearch && this.showSuggestedPopover && this.open) {
+      return this.isSuggestionPopoverTop ? "udex-search__root--show-popover-top" : "udex-search__root--show-popover";
     }
+    return "";
   }
 
   onBeforeRendering(): void {
@@ -875,8 +879,39 @@ class UDExSearch extends UI5Element {
     }
   }
 
+  private _createObserver(popover: Popover, ingoreOpenState: boolean = false): MutationObserver {
+    return new MutationObserver(mutationList => {
+      mutationList.forEach(mutation => {
+        const newValue = popover?.actualPlacementType;
+        const oldValue = mutation.oldValue;
+
+        if (mutation.attributeName === "actual-placement-type" && newValue !== oldValue) {
+          this._popoverPlacement = newValue as PopoverPlacement;
+        }
+
+        if (mutation.attributeName === "open" && newValue !== oldValue && !ingoreOpenState) {
+          this.open = popover?.open || false;
+        }
+      });
+    });
+  }
+
   onAfterRendering(): void {
     if (this.showSuggestedPopover) {
+      const prefixPopover = this.getPrefixPopover();
+
+      if (this.Suggestion?.popover) {
+        const suggestionObserver = this._createObserver(this.Suggestion.popover);
+        const popoverNode = this.Suggestion?.popover as Node;
+        suggestionObserver.observe(popoverNode, { attributes: true, attributeOldValue: true });
+      }
+
+      if (prefixPopover) {
+        const prefixObserver = this._createObserver(prefixPopover, true);
+        const popoverNode = prefixPopover as Node;
+        prefixObserver.observe(popoverNode, { attributes: true, attributeOldValue: true });
+      }
+
       this.handleOutsideClick();
       this.handleOpenSuggestionPopover();
       this.setSearchWidth();
@@ -941,7 +976,6 @@ class UDExSearch extends UI5Element {
         e.preventDefault();
       } else {
         this.Suggestion?.onEnter(e);
-        this.fireDropdownItemClick(this.value);
       }
       this.handleSubmitValue();
     }
@@ -957,7 +991,6 @@ class UDExSearch extends UI5Element {
     if (isEscape(e)) {
       if (this.open) {
         this.Suggestion?.onEscape(e);
-        this.handleClassToRoot();
       }
       this.fireEvent("handle-close-search");
     }
@@ -976,7 +1009,6 @@ class UDExSearch extends UI5Element {
   handleTabKeyList(e: KeyboardEvent) {
     if (isTabNext(e)) {
       this.Suggestion?.onKeyTabList(e);
-      this.handleClassToRoot();
     }
   }
 
@@ -1156,6 +1188,16 @@ class UDExSearch extends UI5Element {
     return this._recommendLabel;
   }
 
+  get isSuggestionPopoverTop(): boolean {
+    const suggestionPopover = this.Suggestion?.popover;
+    return suggestionPopover! && suggestionPopover.open && this._popoverPlacement === "Top";
+  }
+
+  get isPrefixSuggestionPopoverTop(): boolean {
+    const prefixSuggestionPopover = this.getPrefixPopover();
+    return prefixSuggestionPopover && prefixSuggestionPopover.open && this._popoverPlacement === "Top";
+  }
+
   get isShowSearchHomePrefix(): boolean {
     return this.isHomeSearchWithPrefixMode && !!this.dropdownPrefix.length;
   }
@@ -1168,12 +1210,31 @@ class UDExSearch extends UI5Element {
     return this.mode === Mode.HomeSearch && !!this.dropdownPrefix.length;
   }
 
+  get searchClasses(): string {
+    return `${this.classWithPrefix}  ${this.rootClasses}`;
+  }
+
+  get prefixWrapperClasses(): string {
+    const prefixPopover = this.getPrefixPopover();
+    if (prefixPopover && prefixPopover.open) {
+      return this._popoverPlacement === "Top" ? "udex-search__prefix--show-popover-top" : "udex-search__prefix--show-popover";
+    }
+    return "";
+  }
+
+  get prefixPopoverClasses(): string {
+    return this.isPrefixSuggestionPopoverTop ? "udex-search__prefix-popover-top" : "udex-search__prefix-popover";
+  }
+
   get classWithPrefix(): string {
     return this.isHomeSearchWithPrefixMode ? "udex-search-prefix" : "";
   }
 
   get homeSearchPopoverClass(): string {
-    return this.isHomeSearchMode || this.isHomeSearchWithPrefixMode ? "udex-search-suggestions__root--home" : "";
+    if (this.isHomeSearchMode || this.isHomeSearchWithPrefixMode) {
+      return this.isSuggestionPopoverTop ? "udex-search-suggestions__root-top--home" : "udex-search-suggestions__root--home";
+    }
+    return "";
   }
 
   get homeSearchWithPrefixPopoverClass(): string {

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/TabHeader.hbs

@@ -45,7 +45,7 @@
             {{/if}}
         </span>
     {{/if}}
-    <span class="udex-tab-navigation__button-text {{classWithIcon}}">
+    <p class="udex-tab-navigation__button-text {{classWithIcon}}">
         {{text}}
         {{#if numberBadge}}
             <udex-badge
@@ -56,7 +56,7 @@
                 {{numberBadge}}
             </udex-badge>
         {{/if}}
-    </span>
+    </p>
     {{#if hasNotIcon}}
         <span class="udex-tab-navigation__button-badge"></span>
     {{/if}}

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>`;}