@sapudex/web-components 0.226.0 → 2.1.0

package/src/SelectBox.ts

@@ -1,7 +1,7 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import {
   isEnter,
@@ -17,11 +17,12 @@ import {
   isBackSpace,
   isShift,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 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 type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
@@ -29,24 +30,27 @@ import UDExListGroupHeader from "./ListGroupHeader.js";
 import UDExListSelectAll from "./ListSelectAll.js";
 import UDExSelectBoxItem from "./SelectBoxItem.js";
 import UDExSelectBoxGroupHeader from "./SelectBoxGroupHeader.js";
+import type { UDExItemFromList, UDExSearchableListBaseEvents } from "./SearchableListBase.js";
 import UDExSearchableListBase from "./SearchableListBase.js";
+import type { UDExSearchKeydownEventDetail } from "./Search.js";
 import UDExSearch from "./Search.js";
 import UDExTag from "./Tag.js";
-import { PlacementType } from "./Tooltip.js";
 import UDExButton from "./Button.js";
-import ValueState from "./types/common.js";
+import UDExValueState from "./types/common.js";
+import UDExStatusMessage from "./StatusMessage.js";
+import UDExControlButton from "./ControlButton.js";
+import { Placement } from "./types/Dropdown.js";
+import UDExTagGroup from "./TagGroup.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import { SELECT_OPTIONS } from "./generated/i18n/i18n-defaults.js";
 import SelectBoxTemplate from "./generated/templates/SelectBoxTemplate.lit.js";
-import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit";
+import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
 
 // Styles
 import SelectBoxCss from "./generated/themes/SelectBox.css.js";
 import TextFieldCss from "./generated/themes/TextField.css.js";
 import SearchableListCss from "./generated/themes/SearchableList.css.js";
-import UDExStatusMessage from "./StatusMessage.js";
-import UDExTagGroup from "./TagGroup.js";
 
 export type SelectBoxAccessibilityAttributes = {
   controls?: string,
@@ -54,6 +58,11 @@ export type SelectBoxAccessibilityAttributes = {
   hasPopup?: string,
   ariaLabel?: string,
 }
+
+type UDExSelectBoxRemoveEventDetail = {
+  item: UDExItemFromList,
+};
+
 /**
  * @class
  *
@@ -79,44 +88,45 @@ export type SelectBoxAccessibilityAttributes = {
   template: SelectBoxTemplate,
   dependencies: [
     UDExSelectBoxGroupHeader,
-    UDExListItem,
     UDExListGroupHeader,
     UDExListSelectAll,
     UDExSelectBoxItem,
+    UDExStatusMessage,
+    UDExControlButton,
+    UDExTagGroup,
+    UDExListItem,
     UDExList,
     UDExSearch,
     UDExButton,
-    Tokenizer,
     UDExTag,
+    Tokenizer,
     Token,
     Icon,
     UDExStatusMessage,
     Popover,
-    UDExTagGroup,
   ],
 })
 
 /**
  * Fired event when the user clicks on the reset button in the search.
  *
- * @event sap.ui.webc.web-components.UDExSelectBox#resetSearch
  * @public
  */
-@event("remove", {
-  detail: {
-    item: { type: HTMLElement },
-  },
-})
+@event("remove", { bubbles: true })
 
 /**
  * Fired event when the user clicks on the More button.
  *
- * @event sap.ui.webc.web-components.UDExSelectBox#showMore
  * @public
  */
-@event("show-more")
+@event("show-more", { bubbles: true })
 
 class UDExSelectBox extends UDExSearchableListBase {
+  eventDetails!: {
+    "remove": UDExSelectBoxRemoveEventDetail,
+    "show-more": void,
+    "before-open": void,
+  } & UDExSearchableListBaseEvents;
   /**
    * Determines if there is no enough space, the component can be placed
    * over the target.
@@ -164,19 +174,19 @@ class UDExSelectBox extends UDExSearchableListBase {
   /**
    * Defines the accessible ARIA name of the component.
    *
-   * @default ""
+   * @default undefined
    * @public
    */
   @property()
-    accessibleName!: string;
+    accessibleName?: string;
 
   /**
    * Receives id (or many ids) of the elements that label the component.
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ defaultValue: "" })
-    accessibleNameRef!: string;
+  @property()
+    accessibleNameRef?: string;
 
   /**
    * Defines whether the component is read-only.
@@ -202,17 +212,17 @@ class UDExSelectBox extends UDExSearchableListBase {
    * @default "Standard"
    * @public
    */
-  @property({ type: ValueState, defaultValue: ValueState.Standard })
-    valueState!: `${ValueState}`;
+  @property()
+    valueState: `${UDExValueState}` = UDExValueState.Standard;
 
   /**
    * Defines supporting text under the trigger container.
    *
-   * @default ""
+   * @default undefined
    * @public
    */
   @property({ type: String })
-    supportingText!: string;
+    supportingText?: string;
 
   /**
    * Determines on which side of the component the Tooltip is displayed.
@@ -220,8 +230,8 @@ class UDExSelectBox extends UDExSearchableListBase {
    * @default "Bottom"
    * @public
    */
-  @property({ type: PlacementType, defaultValue: PlacementType.Bottom })
-    tooltipPlacement!: `${PlacementType}`;
+  @property()
+    tooltipPlacement: `${Placement}` = Placement.Bottom;
 
   /**
    * @private
@@ -241,7 +251,7 @@ class UDExSelectBox extends UDExSearchableListBase {
    * @private
    */
   @property({ type: Boolean })
-    _open!: boolean;
+    _open: boolean = false;
 
   /**
    * @default false
@@ -261,7 +271,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   _inactiveTabIndex: number = -1;
   _activeTabIndex: number = 0;
   _openedByTrigger: boolean = true;
-
+  _shouldScrollToEnd: boolean = false;
   _handleResizeBound: ResizeObserverCallback;
 
   constructor() {
@@ -289,11 +299,14 @@ class UDExSelectBox extends UDExSearchableListBase {
     this.handleDirection();
     if (this._tokenizer?.tokens.length > 0) {
       if (!this.displayonly) {
-        this._tokenizer.shadowRoot!.querySelector(".ui5-tokenizer-more-text")?.setAttribute("tabindex", "-1");
+        this._tokenizer.moreLink?.setAttribute("tabindex", "-1");
+      }
+      if (this._shouldScrollToEnd) {
+        this._tokenizer.scrollToEnd();
       }
-      this.handleOutsideClick();
       this.resetTagsTabIndexes();
     }
+    this.handleOutsideClick();
   }
 
   onBeforeRendering() {
@@ -323,7 +336,7 @@ class UDExSelectBox extends UDExSearchableListBase {
 
   handleSelectAll(e:CustomEvent) {
     this.onHeaderPress(e);
-    this.fireEvent("select-all");
+    this.fireDecoratorEvent("select-all");
   }
 
   handleHeaderPress(e:CustomEvent) {
@@ -348,6 +361,9 @@ class UDExSelectBox extends UDExSearchableListBase {
       return;
     }
     this._focused = true;
+    if (this._tokenizer) {
+      this._tokenizer.expanded = false;
+    }
   }
 
   handleFocusOut() {
@@ -359,7 +375,7 @@ class UDExSelectBox extends UDExSearchableListBase {
       const content = this._popover.shadowRoot!.querySelector("[part=content]") as HTMLElement;
       content.style.maxHeight = this.height;
     }
-    this.fireEvent("before-open");
+    this.fireDecoratorEvent("before-open");
   }
 
   handleDropdownAfterClose() {
@@ -371,7 +387,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   showMoreItems() {
-    this._tokenizer.expanded = true;
+    this._shouldScrollToEnd = true;
     this._showTagsDropdownContent = false;
     this.openDropdown();
     this.handleUnselectTruncatableTag();
@@ -381,19 +397,18 @@ class UDExSelectBox extends UDExSearchableListBase {
     tag = tag ?? (e?.detail.tag as UI5Element);
     const tagId: string = tag.getAttribute("data-id")!;
     this.handleDropdownItemPress(tagId);
-    this.fireEventRemove(tagId);
+    this.fireDecoratorEventRemove(tagId);
   }
 
   handleRemoveTruncatableTag() {
     const tagId: string = this._truncatableTag.getAttribute("data-id")!;
     this.handleDropdownItemPress(tagId);
     this.closeDropdown();
-    this.fireEventRemove(tagId);
+    this.fireDecoratorEventRemove(tagId);
   }
 
-  handleTagPress(e: CustomEvent) {
+  handleTagClick(e: CustomEvent) {
     const tag = e.detail.tag as UDExTag;
-    tag.selected = false;
     this.toggleTruncatedPopover(tag);
   }
 
@@ -417,30 +432,32 @@ class UDExSelectBox extends UDExSearchableListBase {
     if (this.isDisabled) { return; }
     const originalEvent: KeyboardEvent = e.detail.originalEvent;
     const tag = originalEvent.target as UDExTag;
+    const token = originalEvent.target as Token;
     this.getTagContent(this._tags[0]).tabIndex = this._inactiveTabIndex;
-
-    const activeIndex = this._tokenizer.tokens?.indexOf(originalEvent.target as Token);
     const tagsCount = this._tokenizer._tokensCount;
     this._tokenizer.expanded = (isLeft(originalEvent) || isRight(originalEvent) || isBackSpace(originalEvent) || isDelete(originalEvent)) && tagsCount > 0;
-
-    if (isLeft(originalEvent) && activeIndex !== 0) {
-      this.focusTag(activeIndex - 1);
-      this.scrollToTag(activeIndex - 1);
-    }
-
-    if (isRight(originalEvent) && tagsCount !== activeIndex + 1) {
-      this.focusTag(activeIndex + 1);
-      this.scrollToTag(activeIndex + 1);
+    if (isTabNext(originalEvent)) {
+      this._trigger.focus();
+      return;
     }
 
     if ((isDown(originalEvent) || isUp(originalEvent))) {
+      this._tokenizer._preventCollapse = true;
       this._openedByTrigger = false;
-      this.openDropdown();
+      this.showMoreItems();
     }
 
     if (isSpace(originalEvent) || isShift(originalEvent) || isEnter(originalEvent)) {
       originalEvent.preventDefault();
       originalEvent.stopPropagation();
+      tag.selected = false;
+    }
+
+    if (isLeft(originalEvent) || isRight(originalEvent)) {
+      const nextTokenIndex = this._tokenizer._calcNextTokenIndex(token, this._tokenizer.tokens, isRight(originalEvent));
+      this.focusTag(nextTokenIndex);
+      this.scrollToTag(nextTokenIndex);
+      return;
     }
 
     if (tag.isTruncatable && this.validTruncatableKey(originalEvent)) {
@@ -451,20 +468,10 @@ class UDExSelectBox extends UDExSearchableListBase {
 
     if (isDelete(originalEvent) || isBackSpace(originalEvent)) {
       this.handleRemoveTag(null, tag);
-
-      const tags = this._tokenizer.tokens;
-      const deletedTagIndex = tags.indexOf(originalEvent.target as Token);
-      let nextTokenIndex = deletedTagIndex + 1;
-      if (this._tokenizer.tokens.length !== 1) {
-        if (deletedTagIndex === tags.length - 1) {
-          nextTokenIndex = deletedTagIndex - 1;
-          this.focusTag(nextTokenIndex);
-        } else {
-          this.focusTag(nextTokenIndex);
-        }
-        this.scrollToTag(nextTokenIndex);
-      } else {
+      if (this._tokenizer.tokens.length === 1) {
         this._trigger.focus();
+      } else {
+        this._tokenizer.deleteToken(token);
       }
     }
   }
@@ -474,30 +481,31 @@ class UDExSelectBox extends UDExSearchableListBase {
     const isTabNextPress = isTabNext(e);
     const isEscapePress = isEscape(e);
     const isSearchResetTrigger = e.target === this._search;
-
     if ((isTabNextPress && (!isSearchResetTrigger || this.isListEmpty)) || isTabPrevPress || isEscapePress) {
       this.closeDropdown(e);
     }
   }
 
-  handleKeyDownSearch(e: CustomEvent) {
-    const keyEvent = e.detail as KeyboardEvent;
+  handleKeyDownSearch(keyEvent: CustomEvent<UDExSearchKeydownEventDetail>) {
+    const { detail: { e } } = keyEvent;
 
-    if (isTabPrevious(keyEvent) || isEscape(keyEvent)) {
-      this.closeDropdown(keyEvent);
+    if (isTabPrevious(e) || isEscape(e)) {
+      this.closeDropdown(e);
     }
   }
 
   handleOutsideClick(): void {
-    document.addEventListener("click", (e: Event) => {
+    document.addEventListener("click", (e: MouseEvent) => {
       if (this._tokenizer?.tokens.length > 0 && e.target !== this) {
         this._tokenizer.expanded = false;
       }
+      this._open = this._popover.open;
     });
   }
 
   openDropdown() {
-    this._popover.showAt(this._trigger);
+    this._popover.opener = this._trigger;
+    this._popover.open = true;
     this._open = true;
     if (this.showMultiSelectedOptions) {
       this._tokenizer.expanded = true;
@@ -507,6 +515,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   closeDropdown(e?: KeyboardEvent) {
     if (this._popover.open) {
       if (this._tokenizer) {
+        this._tokenizer._preventCollapse = false;
         this._tokenizer.expanded = false;
       }
 
@@ -514,17 +523,17 @@ class UDExSelectBox extends UDExSearchableListBase {
         e.preventDefault();
         if (this._openedByTrigger) {
           this._trigger.focus();
-        } else {
-          this.focusTag(0);
         }
       }
-      this._popover.close();
+      this._open = false;
+      this._popover.open = false;
     }
   }
 
   toggleTruncatedPopover(tag: UDExTag) {
     if (!tag.isTruncatable) {
       this._showTagsDropdownContent = false;
+      tag.selected = false;
     }
 
     if (tag.isTruncatable && !this._open) {
@@ -544,8 +553,8 @@ class UDExSelectBox extends UDExSearchableListBase {
     this._tokenizer.tokens[index].forcedTabIndex = "0";
   }
 
-  fireEventRemove(id: string) {
-    this.fireEvent("remove", {
+  fireDecoratorEventRemove(id: string) {
+    this.fireDecoratorEvent("remove", {
       item: this.getItemFromList(id),
     });
   }
@@ -580,7 +589,7 @@ class UDExSelectBox extends UDExSearchableListBase {
       e.preventDefault();
       this.showMoreItems();
     }
-    this.fireEvent("show-more");
+    this.fireDecoratorEvent("show-more");
   }
 
   getPopover(): Popover {

package/src/SideNavigation.ts

@@ -1,10 +1,7 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import SideNavigation from "@ui5/webcomponents-fiori/dist/SideNavigation.js";
-import UDExSideNavigationItem from "./SideNavigationItem.js";
-import UDExSideNavigationGroup from "./SideNavigationGroup.js";
-import UDExSideNavigationSubItem from "./SideNavigationSubItem.js";
 
 // Styles
 import SideNavigationCss from "./generated/themes/SideNavigation.css.js";
@@ -28,9 +25,8 @@ import SideNavigationCss from "./generated/themes/SideNavigation.css.js";
  */
 @customElement({
   tag: "udex-side-navigation",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [SideNavigation.styles, SideNavigationCss],
-  dependencies: [UDExSideNavigationItem, UDExSideNavigationGroup, UDExSideNavigationSubItem],
 })
 
 class UDExSideNavigation extends SideNavigation {

package/src/SideNavigationGroup.ts

@@ -1,5 +1,5 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import SideNavigationGroup from "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";
 
 // Styles
@@ -24,7 +24,7 @@ import SideNavigationGroupCss from "./generated/themes/SideNavigationGroup.css.j
  */
 @customElement({
   tag: "udex-side-navigation-group",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [SideNavigationGroup.styles, SideNavigationGroupCss],
 })
 

package/src/SideNavigationItem.ts

@@ -1,9 +1,10 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import SideNavigationItem from "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
 
 // Styles
 import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js";
+import { isDesktop } from "@ui5/webcomponents-base";
 
 /**
  * @class
@@ -24,13 +25,18 @@ import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js"
  */
 @customElement({
   tag: "udex-side-navigation-item",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [SideNavigationItem.styles, SideNavigationItemCss],
 })
 
 class UDExSideNavigationItem extends SideNavigationItem {
   onEnterDOM() {
     this.setAttribute("id", this._id);
+
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+
     this.items.map(item => {
       if (this.icon) {
         item.setAttribute("with-icon", "true");

package/src/SideNavigationMobile.hbs

@@ -1,19 +1,41 @@
 <div
-  class="udex-side-navigation-mobile__trigger"
-  slot="trigger"
-  accessible-role="button"
-  aria-haspopup="true"
-  ?active="{{_dropdownOpened}}"
-  tabindex="0"
-  @keydown="{{handleKeydown}}"
-  @click="{{handleTriggerClick}}">
-  <div class="udex-side-navigation-mobile__selected-item">
-    {{#if _selectedItem}}
-      {{#if _selectedItem?.icon}}
-        <ui5-icon class="udex-side-navigation-mobile__selected-item-icon" name="{{_selectedItem?.icon}}"></ui5-icon>
-      {{/if}}
-      <span>{{_selectedItem?.text}}</span>
-    {{/if}}
-  </div>
-  <ui5-icon class="udex-side-navigation-mobile__trigger-toggle-icon" name="slim-arrow-down"></ui5-icon>
+    id="udex-{{this._id}}-side-navigation-mobile__opener"
+    class="udex-side-navigation-mobile__trigger"
+    accessible-role="button"
+    aria-haspopup="true"
+    tabindex="0"
+    ?active="{{_dropdownOpened}}"
+    @keydown="{{handleKeydown}}"
+    @click="{{handleTriggerClick}}">
+    <div class="udex-side-navigation-mobile__selected-item">
+        {{#if _selectedItem}}
+            {{#if _selectedItem?.icon}}
+                <ui5-icon
+                    class="udex-side-navigation-mobile__selected-item-icon"
+                    name="{{_selectedItem?.icon}}">
+                </ui5-icon>
+            {{/if}}
+            <span>{{_selectedItem?.text}}</span>
+        {{/if}}
+    </div>
+    <ui5-icon
+        class="udex-side-navigation-mobile__trigger-toggle-icon"
+        name="slim-arrow-down">
+    </ui5-icon>
 </div>
+<udex-dropdown
+    class="udex-side-navigation-mobile__popover"
+    id="udex-{{this._id}}-side-navigation-mobile__popover"
+    opener="udex-{{this._id}}-side-navigation-mobile__opener"
+    placement="Bottom"
+    horizontal-align="Stretch"
+    disable-target-overlap="true"
+    height="none"
+    @open="{{_afterDropdownOpen}}"
+    @close="{{_afterDropdownClose}}">
+    <udex-side-navigation @ui5-selection-change="{{_handleSelectionChanged}}">
+        {{#each _navItems}}
+            {{this}}
+        {{/each}}
+    </udex-side-navigation>
+</udex-dropdown>

package/src/SideNavigationMobile.ts

@@ -9,10 +9,9 @@ import UDExDropdown from "./Dropdown.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 
 import SideNavigationMobileTemplate from "./generated/templates/SideNavigationMobileTemplate.lit.js";
-import SideNavigationMobileDropdownTemplate from "./generated/templates/SideNavigationMobileDropdownTemplate.lit.js";
-import UDExSideNavigationItem from "./SideNavigationItem.js";
-import UDExSideNavigationSubItem from "./SideNavigationSubItem.js";
-import UDExSideNavigationGroup from "./SideNavigationGroup.js";
+import type UDExSideNavigationItem from "./SideNavigationItem.js";
+import type UDExSideNavigationSubItem from "./SideNavigationSubItem.js";
+import type UDExSideNavigationGroup from "./SideNavigationGroup.js";
 
 // Styles
 import SideNavigationMobileCss from "./generated/themes/SideNavigationMobile.css.js";
@@ -41,9 +40,7 @@ type SelectedItem = UDExSideNavigationItem | UDExSideNavigationSubItem | null;
   tag: "udex-side-navigation-mobile",
   renderer: litRender,
   template: SideNavigationMobileTemplate,
-  styles: SideNavigationMobileCss,
-  staticAreaTemplate: SideNavigationMobileDropdownTemplate,
-  staticAreaStyles: [SideNavigationMobileCss, SideNavigationMobileDropdownCss],
+  styles: [SideNavigationMobileCss, SideNavigationMobileDropdownCss],
   dependencies: [UDExSideNavigation, UDExDropdown, Icon],
 })
 
@@ -91,17 +88,22 @@ class UDExSideNavigationMobile extends UI5Element {
   _initialized = false;
   _dropdown!: UDExDropdown;
 
-  /**
-   * Getter for the interactive element that opens the dropdown
-   * @private
-   */
-  get _dropdownTrigger() {
-    return this.shadowRoot!.querySelector<HTMLElement>(".udex-side-navigation-mobile__trigger")!;
+  onBeforeRendering() {
+    if (!this._initialized) {
+      const items = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>("navItems");
+      const fixedItems = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>("fixedItems");
+      this._navItems = items.concat(fixedItems);
+      this._selectedItem = this.getSelectedItem() || null;
+    }
+    this._initialized = true;
+  }
+
+  onAfterRendering() {
+    this._dropdown = this._getResponsePopover();
   }
 
-  async _getResponsePopover() {
-    const staticAreaItem = await this.getStaticAreaItemDomRef();
-    return staticAreaItem!.querySelector<UDExDropdown>(`[udex-dropdown]`)!;
+  _getResponsePopover(): UDExDropdown {
+    return this.shadowRoot!.querySelector<UDExDropdown>(`[udex-dropdown]`)!;
   }
 
   _afterDropdownOpen() {
@@ -112,47 +114,28 @@ class UDExSideNavigationMobile extends UI5Element {
     this._dropdownOpened = false;
   }
 
-  async handleTriggerClick() {
-    this._dropdown = await this._getResponsePopover();
-    if (this._dropdown?.open) {
-      this._dropdown.onClose();
-    } else {
-      this._dropdown.onOpen(this._dropdownTrigger);
-    }
+  handleTriggerClick() {
+    this._dropdown.open = !this._dropdown.open;
   }
 
-  async handleKeydown(event: KeyboardEvent) {
+  handleKeydown(event: KeyboardEvent) {
     if ((event.key === "Enter" || event.key === " ")) {
-      await this.handleTriggerClick();
+      this.handleTriggerClick();
     }
   }
 
-  async _handleSelectionChanged(event: {detail: { item: UDExSideNavigationItem | UDExSideNavigationSubItem }}) {
-    this._dropdown = await this._getResponsePopover();
-    this._dropdown.onClose();
+  _handleSelectionChanged(event: {detail: { item: UDExSideNavigationItem | UDExSideNavigationSubItem }}) {
+    this._dropdown = this._getResponsePopover();
+    this._dropdown.open = false;
     this._selectedItem = event.detail.item;
   }
 
-  getSelectedItem() {
+  getSelectedItem(): UDExSideNavigationItem | UDExSideNavigationSubItem | undefined {
     const items = this._navItems.reduce((result, item) => {
       return (result).concat(item.allItems as UDExSideNavigationSubItem[]);
     }, new Array<UDExSideNavigationItem | UDExSideNavigationSubItem>());
     return items.find(item => item._selected);
   }
-
-  onBeforeRendering() {
-    if (!this._initialized) {
-      const items = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>("navItems");
-      const fixedItems = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>("fixedItems");
-      this._navItems = items.concat(fixedItems);
-      this._selectedItem = this.getSelectedItem() || null;
-    }
-    this._initialized = true;
-  }
-
-  async onAfterRendering() {
-    this._dropdown = await this._getResponsePopover();
-  }
 }
 
 UDExSideNavigationMobile.define();