@sapudex/web-components 0.138.0 → 0.143.0

package/src/FilterMenu.ts

@@ -295,13 +295,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
   _search!: UDExSearch;
   _hasFooterButtons!: boolean;
   _popover!: ResponsivePopover;
-
-  onAfterRendering() {
-    this._search = this.getSearch();
-    this._popover = this.getPopover();
-    this._trigger = this.getTriggerButton();
-    this._hasFooterButtons = this.hasFooterButtons;
-  }
+  _breakpointSizeXS = 640;
 
   onEnterDOM(): void {
     if (isDesktop()) {
@@ -313,6 +307,13 @@ class UDExFilterMenu extends UDExSearchableListBase {
     super.onBeforeRendering();
   }
 
+  onAfterRendering() {
+    this._search = this.getSearch();
+    this._popover = this.getPopover();
+    this._trigger = this.getTriggerButton();
+    this._hasFooterButtons = this.hasFooterButtons;
+  }
+
   handleSelectAll(e:CustomEvent): void {
     this.onFilterSelectAllHeaderPress(e);
     this.fireEvent("select-all");
@@ -436,6 +437,10 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   _dropdownAfterOpen(): void {
+    const popoverLeftOffset = +this._popover.style.left.split("px")[0];
+    if (this._popover.offsetWidth + popoverLeftOffset < this._breakpointSizeXS) {
+      this.style.setProperty("--udex-filter-menu-popover-left-offset", `${this._popover.style.left}`);
+    }
     this.fireEvent("after-open");
   }
 

package/src/Footer.ts

@@ -320,7 +320,7 @@ class UDExFooter extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExFooter.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExFooter.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   _handleResizeBound: ResizeObserverCallback;

package/src/InputGroup.ts

@@ -104,7 +104,7 @@ class UDExInputGroup extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExInputGroup.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExInputGroup.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   get _items() {

package/src/List.ts

@@ -147,7 +147,7 @@ class UDExList extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExList.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExList.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onBeforeRendering(): void {

package/src/ListItem.ts

@@ -251,7 +251,7 @@ class UDExListItem extends UDExListItemBase {
   }
 
   static async onDefine(): Promise<void> {
-    UDExListItem.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExListItem.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onEnterDOM() {

package/src/ListItemBase.ts

@@ -112,7 +112,7 @@ class UDExListItemBase extends UI5Element {
     _icon?: string;
 
   @property({ type: String })
-    _tabIndex!: number | string;
+    _tabIndex!: string;
 
   get _effectiveTabIndex() {
     if (this.disabled) {

package/src/ListSelectAll.ts

@@ -46,7 +46,7 @@ class UDExListSelectAll extends UDExListGroupHeaderBase {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExListSelectAll.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExListSelectAll.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   handleSelectAllPress() {

package/src/MastheadItem.ts

@@ -226,7 +226,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExMastheadItem.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExMastheadItem.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onEnterDOM() {
@@ -262,16 +262,11 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
   }
 
-  handleKeyEscapeMobile() {
-    const mastheadShell: MastheadShell | null = document.querySelector("udex-masthead-shell");
-    const mobileMenu = mastheadShell?.mastheadMobileMenu;
-    mastheadShell?.removeActiveMobileClass();
-    mastheadShell?.mobileBtn?.focus();
-    this.selected = false;
+  handleKeyEscapeMobile(): void {
+    const mastheadShell: MastheadShell = document.querySelector<MastheadShell>("udex-masthead-shell")!;
 
-    if (mobileMenu) {
-      mobileMenu.showFirstLevelMenu();
-    }
+    mastheadShell.closeMobileMenu();
+    mastheadShell.mobileBtn?.focus();
   }
 
   handleNavigationItemClick(e: Event): void {

package/src/MastheadMobileMenu.ts

@@ -122,7 +122,7 @@ class UDExMastheadMobileMenu extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExMastheadMobileMenu.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExMastheadMobileMenu.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onAfterRendering() {

package/src/MastheadProfileMenu.ts

@@ -122,7 +122,7 @@ class UDExMastheadProfileMenu extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExMastheadProfileMenu.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExMastheadProfileMenu.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   handleUserLogoutItemClick(e: Event): void {

package/src/MastheadShell.hbs

@@ -8,7 +8,7 @@
             {{>siteLabel}}
         {{/if}}
 
-        {{#unless _isSearchVisible}}
+        {{#if isMainMenuVisible}}
             <div
                 class="udex-masthead-shell__main-menu"
                 data-menubar-item-expanded="true"
@@ -17,29 +17,35 @@
                     {{>item}}
                 {{/each}}
             </div>
-        {{/unless}}
+        {{/if}}
     </div>
 
-    {{#if _isSearchVisible}}
+    {{#if isSearchVisible}}
         <div class="udex-masthead-shell__search-container">
             <slot name="search"></slot>
         </div>
-        <div class="udex-masthead-shell__btn-holder">
-            <udex-control-button
-                class="udex-masthead-shell__close-search-btn"
-                size="Small"
-                icon="decline"
-                accessible-name="{{closeButtonAccessibleName}}"
-                @click={{hideSearch}}>
-            </udex-control-button>
-        </div>
-    {{else}}
-        <div class="udex-masthead-shell__right-menu">
-            <div
-                class="udex-masthead-shell__explore"
-                @ui5-item-click="{{setSelectedItem}}">
-                <slot name="exploreSAP"></slot>
+        {{#if _isSearchOpened}}
+            <div class="udex-masthead-shell__btn-holder">
+                <udex-control-button
+                    class="udex-masthead-shell__close-search-btn"
+                    size="Small"
+                    icon="decline"
+                    accessible-name="{{closeButtonAccessibleName}}"
+                    @click={{hideSearch}}>
+                </udex-control-button>
             </div>
+        {{/if}}
+    {{/if}}
+
+    {{#if isRightMenuVisible}}
+        <div class="udex-masthead-shell__right-menu">
+            {{#if hasExploreSAP}}
+                <div
+                    class="udex-masthead-shell__explore"
+                    @ui5-item-click="{{setSelectedItem}}">
+                    <slot name="exploreSAP"></slot>
+                </div>
+            {{/if}}
             {{#if hasSearch}}
                 <div class="udex-masthead-shell__search-icon">
                     <udex-masthead-item
@@ -77,6 +83,7 @@
                     <slot slot="dropdown" name="mobileMenu"></slot>
                 </udex-masthead-item>
                 <udex-masthead-item
+                    @keydown="{{handleEnterAndSpaceOnCloseBtn}}"
                     @ui5-item-click="{{handleMobileCloseClick}}"
                     class="udex-masthead-shell__close-btn"
                     accessible-role="button"
@@ -124,7 +131,7 @@
 {{/inline}}
 
 {{#*inline "siteLabel"}}
-    {{#if homeUrl}}
+    {{#if siteLabelUrl}}
         <a
             @click="{{handleSiteLabelClick}}"
             role="link"

package/src/MastheadShell.ts

@@ -6,7 +6,9 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+  isLeft, isRight, isSpace, isEnter,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/menu2.js";
 import "@ui5/webcomponents-icons/dist/search.js";
@@ -22,9 +24,7 @@ import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.l
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
 
-const mobileMenuActiveClass: string = "udex-masthead-shell_mobile-menu-open";
 const breakpointSizeM: number = 1279;
-
 /**
  * @class
  *
@@ -181,6 +181,15 @@ class UDExMastheadShell extends UI5Element {
   @property({ type: Boolean })
     bodyOverflow!: boolean;
 
+  /**
+   * Defines the visibility of the Search by default.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: Boolean })
+    showSearchByDefault!: boolean;
+
   /**
    * Defines sticky position for component
    *
@@ -251,12 +260,20 @@ class UDExMastheadShell extends UI5Element {
     siteLabelAriaLabel!: string;
 
   /**
-   * Defines if the search container is visible
+   * Defines if the search container is opened
    *
    * @private
    */
   @property({ type: Boolean })
-    _isSearchVisible!: boolean;
+    _isSearchOpened!: boolean;
+
+  /**
+   * Defines if the mobile menu is open
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isMobileMenuOpen!: boolean;
 
   /**
    * Defines if the close button was clicked
@@ -284,7 +301,7 @@ class UDExMastheadShell extends UI5Element {
 
     this.handleOutsideClick();
 
-    if (this._isSearchVisible) {
+    if (this._isSearchOpened) {
       this.focusSearchInput();
     }
 
@@ -302,12 +319,12 @@ class UDExMastheadShell extends UI5Element {
   }
 
   _handleResize(): void {
-    if (this.isMobileView) {
-      this._isSearchVisible = false;
+    if (this.isBreakpointSizeM) {
+      this._isSearchOpened = false;
     }
 
-    if (this._shouldHandleResize && this.isMobileView) {
-      this.resetMobileMenuOpenState();
+    if (this._shouldHandleResize && this.isBreakpointSizeM) {
+      this.closeMobileMenu();
       return;
     }
 
@@ -348,7 +365,7 @@ class UDExMastheadShell extends UI5Element {
 
   handleSearchClick(e: CustomEvent): void {
     e.stopPropagation();
-    this._isSearchVisible = true;
+    this._isSearchOpened = true;
     this.resetSelectedItems();
     if (this._searchOpener) {
       this._searchOpener.selected = false;
@@ -369,7 +386,7 @@ class UDExMastheadShell extends UI5Element {
   handleMobileMenuClick(e: CustomEvent) {
     e.stopPropagation();
     this.setSelectedItem(e);
-    this.addActiveMobileClass();
+    this._isMobileMenuOpen = true;
 
     if (this.bodyOverflow) {
       this.setOverflowBody();
@@ -378,12 +395,14 @@ class UDExMastheadShell extends UI5Element {
 
   handleMobileCloseClick(e: CustomEvent) {
     e.preventDefault();
-    this.removeActiveMobileClass();
-    this.setSelectedItem(e);
-    this._mobileMenu?.showFirstLevelMenu();
+    this.closeMobileMenu();
+  }
 
-    if (this.bodyOverflow) {
-      this.removeOverflowBody();
+  handleEnterAndSpaceOnCloseBtn(e: KeyboardEvent) {
+    e.preventDefault();
+    if (isSpace(e) || isEnter(e)) {
+      this.closeMobileMenu();
+      this.mobileBtn?.focus();
     }
   }
 
@@ -425,14 +444,6 @@ class UDExMastheadShell extends UI5Element {
     });
   }
 
-  addActiveMobileClass() {
-    this._rootHolder?.classList.add(mobileMenuActiveClass);
-  }
-
-  removeActiveMobileClass() {
-    this._rootHolder?.classList.remove(mobileMenuActiveClass);
-  }
-
   setSelectedItem(e: CustomEvent): void {
     const clickedItem: UDExMastheadItem = e.detail.item;
     if (!clickedItem) {
@@ -449,11 +460,12 @@ class UDExMastheadShell extends UI5Element {
   focusSearchBtn(): void {
     if (this._searchOpener) {
       this._searchOpener.focus();
+      this._closeBtnClicked = false;
     }
   }
 
   hideSearch(): void {
-    this._isSearchVisible = false;
+    this._isSearchOpened = false;
     this._closeBtnClicked = true;
   }
 
@@ -488,8 +500,8 @@ class UDExMastheadShell extends UI5Element {
     style.removeProperty("overflow");
   }
 
-  resetMobileMenuOpenState(): void {
-    this.removeActiveMobileClass();
+  closeMobileMenu(): void {
+    this._isMobileMenuOpen = false;
     this.resetSelectedItems();
     this._mobileMenu?.showFirstLevelMenu();
 
@@ -530,13 +542,29 @@ class UDExMastheadShell extends UI5Element {
     return !!this.search.length;
   }
 
+  get hasExploreSAP(): boolean {
+    return !!this.exploreSAP.length;
+  }
+
   get hasMobileMenuButtons(): boolean {
     return !!this.mobileMenu.length;
   }
 
-  get isMobileView(): boolean {
+  get isBreakpointSizeM(): boolean {
     return window.innerWidth <= breakpointSizeM;
   }
+
+  get isMainMenuVisible(): boolean {
+    return !this.showSearchByDefault && !this._isSearchOpened;
+  }
+
+  get isRightMenuVisible(): boolean {
+    return this.showSearchByDefault || !this._isSearchOpened;
+  }
+
+  get isSearchVisible(): boolean {
+    return this.showSearchByDefault || this._isSearchOpened;
+  }
 }
 
 UDExMastheadShell.define();

package/src/MessageStrip.ts

@@ -133,9 +133,7 @@ class UDExMessageStrip extends MessageStrip {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExMessageStrip.i18nBundle = await getI18nBundle(
-      "sap-ui-webcomponents-bundle",
-    );
+    UDExMessageStrip.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   getTranslation(text: I18nText): string {

package/src/Pagination.ts

@@ -245,7 +245,7 @@ class UDExPagination extends UI5Element {
   }
 
   static async onDefine() {
-    UDExPagination.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExPagination.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   setActive(element: HTMLElement): void {

package/src/PasswordField.ts

@@ -194,7 +194,7 @@ class UDExPasswordField extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExPasswordField.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExPasswordField.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   handleShowPassword(): void {

package/src/PhoneNumberField.ts

@@ -290,7 +290,7 @@ class UDExPhoneNumberField extends UI5Element {
   _handleResizeBound: ResizeObserverCallback;
 
   static async onDefine() {
-    UDExPhoneNumberField.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExPhoneNumberField.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   get countrySelectorAriaLabel() {

package/src/RatingBar.ts

@@ -72,7 +72,7 @@ class UDExRatingBar extends UI5Element {
   _maxPercentage: number = 100;
 
   static async onDefine() {
-    UDExRatingBar.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    UDExRatingBar.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onBeforeRendering(): void {

package/src/Review.ts

@@ -94,7 +94,7 @@ class UDExReview extends UI5Element {
   _maxRatingBars: number = 5;
 
   static async onDefine() {
-    UDExReview.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    UDExReview.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   get reviewsText(): string {

package/src/ReviewItem.ts

@@ -146,7 +146,7 @@ class UDExReviewItem extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExReviewItem.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    UDExReviewItem.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   constructor() {

package/src/Search.ts

@@ -504,7 +504,7 @@ class UDExSearch extends UI5Element {
   }
 
   static async onDefine(): Promise<void> {
-    UDExSearch.i18nBundle = await getI18nBundle("udex-search");
+    UDExSearch.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onEnterDOM(): void {

package/src/SearchableListBase.ts

@@ -241,9 +241,7 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   onResetSearch() {
-    const search = this.getSearch();
-    search.value = "";
-    this._filteredItems = this.filterItems(this.getProcessedItems(), "");
+    this.resetSearch();
     this.fireEvent("reset-search");
   }
 
@@ -253,6 +251,16 @@ class UDExSearchableListBase extends UI5Element {
     });
   }
 
+  /**
+   * Reset the search value.
+   * @public
+   */
+  resetSearch() {
+    const search = this.getSearch();
+    search.value = "";
+    this._filteredItems = this.filterItems(this.getProcessedItems(), "");
+  }
+
   filterItems(items: Array<ProcessedItem>, str: string): Array<ProcessedItem> {
     return items.filter(preparedItem => {
       const { isGroup, item } = preparedItem;
@@ -285,7 +293,7 @@ class UDExSearchableListBase extends UI5Element {
     return text.replace(new RegExp(`(${str})`, "i"), "<b>$&</b>");
   }
 
-  isIncludes(string: string, value: string):boolean {
+  isIncludes(string: string, value: string): boolean {
     return string.toLowerCase().includes(value.toLowerCase());
   }
 
@@ -407,11 +415,11 @@ class UDExSearchableListBase extends UI5Element {
     return this.mode === ListMode.MultiSelect && isGrouping;
   }
 
-  get additionalClassName() {
+  get additionalClassName(): string {
     return `udex-searchable-list__header`;
   }
 
-  get groupClassName() {
+  get groupClassName(): string {
     const classHeader = `udex-searchable-list__header`;
     return this.showSearch ? `${classHeader} udex-searchable-list__header_no-margin` : classHeader;
   }
@@ -422,7 +430,7 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   static async onDefine(): Promise<void> {
-    UDExSearchableListBase.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExSearchableListBase.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 }
 

package/src/SecondaryNavigation.hbs

@@ -31,6 +31,7 @@
                             mobile-link-title="{{this.mobileLinkTitle}}"
                             target="{{this.target}}"
                             .subItems="{{this.items}}"
+                            _nav-items-length="{{../visibleItems.length}}"
                             @ui5-sub-item-click="{{../handleSubItemClick}}"
                             @ui5-nav-item-click="{{../handleItemClick}}">
                         </udex-secondary-navigation-item>
@@ -41,6 +42,7 @@
                         role="none"
                         class="udex-secondary-navigation__list-item">
                         <udex-secondary-navigation-item
+                            _nav-items-length="{{visibleItems.length}}"
                             index="{{visibleItems.length}}"
                             @ui5-sub-item-click="{{../handleSubItemClick}}"
                             @ui5-nav-item-click="{{../handleItemClick}}"

package/src/SecondaryNavigation.ts

@@ -156,13 +156,13 @@ class UDExSecondaryNavigation extends UI5Element {
   static i18nBundle: any;
 
   static async onDefine(): Promise<void> {
-    UDExSecondaryNavigation.i18nBundle = await getI18nBundle("udex-secondary-navigation");
+    UDExSecondaryNavigation.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   constructor() {
     super();
     this._showMoreButton = true;
-    this._boundReflowItems = this.reflowItems.bind(this);
+    this._boundReflowItems = this._handleResize.bind(this);
   }
 
   onEnterDOM(): void {
@@ -177,6 +177,13 @@ class UDExSecondaryNavigation extends UI5Element {
     ResizeHandler.deregister(this, this._boundReflowItems);
   }
 
+  _handleResize() {
+    this.reflowItems();
+    if (this._clickedNavItem && this.isDesktopScreen) {
+      this._clickedNavItem.closeDropdown();
+    }
+  }
+
   onInvalidation(changeInfo: ChangeInfo): void {
     if (changeInfo.name === "navItems") {
       this.reflowItems();

package/src/SecondaryNavigationItem.ts

@@ -123,6 +123,14 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   @property({ type: Boolean })
     isOpen!: boolean;
 
+  /**
+   * Defines the length of items in the secondary navigation.
+   *
+   * @private
+   */
+  @property({ validator: Integer })
+    _navItemsLength!: number;
+
   /**
    * Defines processed items.
    *
@@ -137,6 +145,10 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   _subTitle!: string | undefined;
 
   onAfterRendering(): void {
+    if (this.isLastItem && this.isOpen && !this._isMobileView) {
+      this.setDropdownHorizontalAlign();
+    }
+
     if (this._shouldFocusFirstSubItem && this.isOpen) {
       this.onFirstSubItemFocus();
       this._shouldFocusFirstSubItem = false;
@@ -306,6 +318,19 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._processedItems = this.subItems;
   }
 
+  setDropdownHorizontalAlign(): void {
+    const dropdown = this.shadowRoot!.querySelector<HTMLElement>(".udex-secondary-navigation__dropdown");
+    const { right, left } = dropdown!.getBoundingClientRect();
+
+    if (right > window.innerWidth) {
+      dropdown?.setAttribute("data-horizontal-align", "right");
+    }
+
+    if (left < 0) {
+      dropdown?.setAttribute("data-horizontal-align", "left");
+    }
+  }
+
   onFirstSubItemFocus(): void {
     this.domNavItems[0].focus();
   }
@@ -318,6 +343,10 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._shouldFocusFirstSubItem = true;
   }
 
+  get isLastItem(): boolean {
+    return this._navItemsLength === this.index;
+  }
+
   get domNavItems(): Array<UDExSecondaryNavigationSubItem> {
     const domNavItems = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationSubItem>("udex-secondary-navigation-sub-item");
     return domNavItems ? Array.from(domNavItems) : [];