@sapudex/web-components 2.5.0 → 2.6.0

package/src/MastheadShell.ts

@@ -46,6 +46,17 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
   analyticsName: AnalyticsName,
 }
 
+export enum UDExMastheadVariable {
+  mobileMenuHeight = "--udex-masthead-shell-mobile-menu-height",
+  itemButtonIconSize = "--udex-masthead-item-button-icon-size",
+  itemArrowIconSize = "--udex-masthead-item-arrow-icon-size",
+  rightMenuPadding = "--udex-masthead-right-menu-padding",
+  exploreMargin = "--udex-masthead-shell-explore-margin",
+  itemIconGap = "--udex-masthead-shell-item-icon-gap",
+  mastheadHeight = "--udex-masthead-shell-height",
+  itemGap = "--udex-masthead-shell-item-gap",
+}
+
 /**
  * @class
  *
@@ -453,6 +464,7 @@ class UDExMastheadShell extends UI5Element {
   _handleResizeBound: ResizeObserverCallback;
   _rootHolder!: HTMLElement | null | undefined;
   _shouldHandleResize!: boolean;
+  _isVisible!: boolean;
 
   constructor() {
     super();
@@ -477,6 +489,8 @@ class UDExMastheadShell extends UI5Element {
     if (this._closeBtnClicked) {
       this.focusSearchBtn();
     }
+
+    this.updateVisibility();
   }
 
   onEnterDOM(): void {
@@ -526,6 +540,8 @@ class UDExMastheadShell extends UI5Element {
       } else {
         this.removeMobileMode();
       }
+
+      this._isVisible = true;
     }
   }
 
@@ -721,26 +737,40 @@ class UDExMastheadShell extends UI5Element {
     const itemsIcon = [...this.shadowRoot!.querySelectorAll<HTMLDivElement>(".udex-masthead-shell__item_icon")];
     const itemIconWidths = itemsIcon.length * this.getItemIconWidth();
     const itemIconGaps = itemsIcon.length * this.getItemIconGap();
-    const exploreSAPWidth = this.hasExploreSAP ? this.getItemWidth(this.exploreSAP[0]) : 0;
+    const exploreItem = this.exploreSAP[0];
+    const exploreItemIconWidth = exploreItem.hasArrowDown ? this.getItemArrowIconWidth() : 0;
+    const exploreSAPWidth = this.hasExploreSAP ? this.getItemWidth(exploreItem) : 0;
     const rightMenuGaps = this.getRightMenuGap() + this.getExploreSapBtnGap() + itemIconGaps;
-    return exploreSAPWidth + itemIconWidths + rightMenuGaps;
+    return exploreSAPWidth + exploreItemIconWidth + itemIconWidths + rightMenuGaps;
   }
 
-  getItemIconWidth(): number {
+  getItemIconSize(cssVariableName: string): number {
     const item = this.querySelector("[udex-masthead-item]");
 
-    if (!item) { return 0; }
+    if (!item) {
+      return 0;
+    }
 
     const style = window.getComputedStyle(item);
-    const itemIconWidthVar = style.getPropertyValue("--udex-masthead-item-button-icon-size");
-    return parseInt(itemIconWidthVar);
+    const iconSizeVar = style.getPropertyValue(cssVariableName);
+    return parseInt(iconSizeVar);
+  }
+
+  getItemIconWidth(): number {
+    return this.getItemIconSize(UDExMastheadVariable.itemButtonIconSize);
+  }
+
+  getItemArrowIconWidth(): number {
+    return this.getItemIconSize(UDExMastheadVariable.itemArrowIconSize);
   }
 
   getMainMenuWidth(): number {
     const mainItems = this.getSlottedNodes("menuItems");
-    const gapItemVar = this.getRootVar("--udex-masthead-shell-item-gap");
+    const gapItemVar = this.getRootVar(UDExMastheadVariable.itemGap);
     return mainItems.reduce((accumulatedWidth, item, index) => {
-      return accumulatedWidth + this.getItemWidth(item as UDExMastheadItem) + (index && parseInt(gapItemVar));
+      const mainItem = item as UDExMastheadItem;
+      const arrowIconWidth = mainItem.hasArrowDown ? this.getItemArrowIconWidth() : 0;
+      return accumulatedWidth + this.getItemWidth(mainItem) + (index && parseInt(gapItemVar) + arrowIconWidth);
     }, 0);
   }
 
@@ -760,17 +790,17 @@ class UDExMastheadShell extends UI5Element {
   }
 
   getItemIconGap(): number {
-    const gapIconItemVar = this.getRootVar("--udex-masthead-shell-item-icon-gap");
+    const gapIconItemVar = this.getRootVar(UDExMastheadVariable.itemIconGap);
     return parseInt(gapIconItemVar);
   }
 
   getExploreSapBtnGap(): number {
-    const exploreSapBtnGapVar = this.getRootVar("--udex-masthead-shell-explore-margin");
+    const exploreSapBtnGapVar = this.getRootVar(UDExMastheadVariable.exploreMargin);
     return this.hasExploreSAP ? parseInt(exploreSapBtnGapVar) : 0;
   }
 
   getRightMenuGap(): number {
-    const rightMenuGapVar = this.getRootVar("--udex-masthead-right-menu-padding");
+    const rightMenuGapVar = this.getRootVar(UDExMastheadVariable.rightMenuPadding);
     return parseInt(rightMenuGapVar);
   }
 
@@ -803,9 +833,9 @@ class UDExMastheadShell extends UI5Element {
   }
 
   setMobileMenuHeight(): void {
-    const mastheadHeight = parseInt(window.getComputedStyle(this).getPropertyValue("--udex-masthead-shell-height"));
+    const mastheadHeight = parseInt(window.getComputedStyle(this).getPropertyValue(UDExMastheadVariable.mastheadHeight));
     const mobileMenuHeight = `${window.innerHeight - mastheadHeight}px`;
-    this.style.setProperty("--udex-masthead-shell-mobile-menu-height", mobileMenuHeight);
+    this.style.setProperty(UDExMastheadVariable.mobileMenuHeight, mobileMenuHeight);
   }
 
   removeMobileMode(): void {
@@ -815,6 +845,10 @@ class UDExMastheadShell extends UI5Element {
     });
   }
 
+  updateVisibility(): void {
+    this.style.opacity = this.isVisible ? "1" : "0";
+  }
+
   fireMastheadEvent(eventName: keyof this["eventDetails"], e?: PointerEvent): void {
     const eventDetails = {
       analyticsName: AnalyticsName.Header,
@@ -997,17 +1031,32 @@ class UDExMastheadShell extends UI5Element {
     return this.showSearchByDefault || this._isSearchOpened;
   }
 
+  get isVisible(): boolean {
+    return this.isMobileMenuMode || !this.menuItems.length || this._isVisible;
+  }
+
   get shouldHandleMobileView(): boolean {
-    return !this.isAtMostBreakpointSizeM && !this.showSearchByDefault;
+    return !this.isAtMostBreakpointSizeM && this.isMainMenuVisible;
   }
 
   get mainNavigationAriaLabel(): string {
     return UDExMastheadShell.i18nBundle.getText(MAIN_LINKS);
   }
 
+  get isSimpleExploreMode(): boolean {
+    return !this.hasSearch && !this.hasProfile && !this.hasCart && !this.hasSupport && !this.hasCountrySelector;
+  }
+
+  get rightMenuClass(): string {
+    const root = "udex-masthead-shell__right-menu";
+    const simpleExploreClass = this.isSimpleExploreMode ? `${root}_simple-explore` : "";
+    return `${root} ${simpleExploreClass}`.trim();
+  }
+
   get mainClass(): string {
-    const coBrandWithoutNavClass = (!!this.coBrandImage && !this.menuItems.length) ? "udex-masthead-shell_co-brand-without-nav" : "";
-    return `udex-masthead-shell ${coBrandWithoutNavClass}`.trim();
+    const root = "udex-masthead-shell";
+    const coBrandWithoutNavClass = (!!this.coBrandImage && !this.menuItems.length) ? `${root}_co-brand-without-nav` : "";
+    return `${root} ${coBrandWithoutNavClass}`.trim();
   }
 }
 

package/src/Modal.ts

@@ -5,10 +5,10 @@ import Dialog from "@ui5/webcomponents/dist/Dialog.js";
 import Popup from "@ui5/webcomponents/dist/Popup.js";
 
 // Styles
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import PopupsCommonCss from "@ui5/webcomponents/dist/generated/themes/PopupsCommon.css.js";
 import dialogCSS from "@ui5/webcomponents/dist/generated/themes/Dialog.css.js";
 import ModalCss from "./generated/themes/Modal.css.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
 export enum UDExModalType {
   default = "default",
@@ -32,10 +32,10 @@ export enum UDExModalType {
   renderer: jsxRenderer,
   styles: [
     Popup.styles,
-    getEffectiveScrollbarStyle(),
     PopupsCommonCss,
     dialogCSS,
     ModalCss,
+    getEffectiveScrollbarStyle(),
   ],
 })
 class UDExModal extends Dialog {

package/src/Search.hbs

@@ -18,7 +18,7 @@
                 class="{{prefixPopoverClasses}}"
                 hide-arrow
                 placement="Bottom"
-	            horizontal-align="Start"
+	              horizontal-align="Start"
                 style="{{prefixPopoverStyles}}"
                 @after-close="{{handleAfterClosePrefixPopover}}">
                 <slot></slot>

package/src/Search.ts

@@ -19,7 +19,6 @@ import {
   isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import Button from "@ui5/webcomponents/dist/Button.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import List from "./List.js";
 import ControlButton from "./ControlButton.js";
@@ -45,13 +44,15 @@ import {
   OF,
 } from "./generated/i18n/i18n-defaults.js";
 import type SearchInputSuggestion from "./features/SearchSuggestionsPopover.js";
+import retryUntilSuccessful from "./utils/retryUntilSuccessful.js";
+import UDExButton from "./Button.js";
 
 import SearchTemplate from "./generated/templates/SearchTemplate.lit.js";
 
 // Styles
 import SearchCss from "./generated/themes/Search.css.js";
 import SearchSuggestionsCss from "./generated/themes/SearchSuggestions.css.js";
-import retryUntilSuccessful from "./utils/retryUntilSuccessful.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
 const SearchIcon: string = "sap-icon://search";
 
@@ -129,11 +130,11 @@ export type UDExSearchKeydownEventDetail = {
 @customElement({
   tag: "udex-search",
   renderer: litRender,
-  styles: [SearchCss, SearchSuggestionsCss],
+  styles: [SearchCss, SearchSuggestionsCss, getEffectiveScrollbarStyle()],
   template: SearchTemplate,
   get dependencies() {
     const Suggestion = getFeature<typeof SearchInputSuggestion>("SearchInputSuggestion");
-    return ([ControlButton, Button, Icon, List, Popover] as Array<typeof UI5Element>).concat(Suggestion ? [...Suggestion.dependencies] : []);
+    return ([ControlButton, UDExButton, Icon, List, Popover] as Array<typeof UI5Element>).concat(Suggestion ? [...Suggestion.dependencies] : []);
   },
 })
 

package/src/SearchableListBase.hbs

@@ -8,13 +8,19 @@
         non-interactive-submit-button
         show-submit-button>
     </udex-search>
+    <span
+        aria-live="polite"
+        aria-atomic="true"
+        class="hidden">
+        {{_accSearchResultInfo}}
+    </span>
 {{/if}}
 {{#if isListEmpty}}
     <div class="udex-no-result"><span>{{getNoResultText}}&lrm;</span></div>
 {{else if busy}}
     <ui5-busy-indicator
         class="udex-busy-indicator"
-        size="Medium"
+        size="M"
         delay="{{busyDelay}}"
         active>
     </ui5-busy-indicator>

package/src/SearchableListBase.ts

@@ -4,18 +4,17 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import {
-  isDown, isUp,
-} from "@ui5/webcomponents-base/dist/Keys.js";
+import type Popover from "@ui5/webcomponents/dist/Popover.js";
+import { isDown, isUp } from "@ui5/webcomponents-base/dist/Keys.js";
 import { cleanLabel } from "./utils/listItemLabelUtils.js";
-import type Search from "./Search.js";
+import type UDExSearch from "./Search.js";
 import type UDExListItemBase from "./ListItemBase.js";
 import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import { UDExListMode } from "./types/List.js";
 import type UDExFilterMenuItem from "./FilterMenuItem.js";
 import type { UDExProcessedItem } from "./types/SearchableListBase.js";
-import { SHOW_SEARCH_AFTER_COUNT } from "./types/SearchableListBase.js";
-import { NO_MATCHES_FOUND } from "./generated/i18n/i18n-defaults.js";
+import { SHOW_SEARCH_AFTER_COUNT, UDExPopoverPart } from "./types/SearchableListBase.js";
+import { NO_MATCHES_FOUND, RESULT_RETURNED } from "./generated/i18n/i18n-defaults.js";
 
 export type UDExItemFromList = UDExListItemBase | UDExListGroupHeaderBase | null | undefined;
 
@@ -88,6 +87,22 @@ export type UDExSearchableListBaseEvents = {
 
 class UDExSearchableListBase extends UI5Element {
   eventDetails!: UDExSearchableListBaseEvents;
+  /**
+   * Allows control over the height.
+   * @public
+   */
+  @property({ type: String })
+    height?: string;
+
+  /**
+   * Defines if page scrolling should be prevented within the list of items.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    preventPageScroll = false;
+
   /**
    * Defines if the component would display a loading indicator.
    *
@@ -185,6 +200,7 @@ class UDExSearchableListBase extends UI5Element {
   static i18nBundle: I18nBundle;
 
   _shouldFilterItems?: boolean;
+  _accSearchResultInfo?: string;
 
   constructor() {
     super();
@@ -280,6 +296,8 @@ class UDExSearchableListBase extends UI5Element {
     const searchValue: string = e.detail.value;
     this._shouldFilterItems = true;
     this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);
+    const items = this.getFlattenItemsArray(this._filteredItems);
+    this._accSearchResultInfo = items.length ? `${items.length} ${this.resultReturnedText}` : this.noMatchesFoundText;
     this.fireDecoratorEvent("change-search", { value: searchValue });
   }
 
@@ -440,12 +458,28 @@ class UDExSearchableListBase extends UI5Element {
     }
   }
 
+  getFlattenItemsArray(array: Array<UDExProcessedItem>): (UDExProcessedItem | UDExListItemBase)[] {
+    return array.flatMap(item => {
+      if (item.isGroup) {
+        return [
+          item,
+          ...item.groupItems.filter(groupItem => !groupItem.disabled),
+        ];
+      }
+      return item.item.disabled ? [] : [item.item];
+    });
+  }
+
   getCurrentIndex(item: Element): number {
     return this.getDomListItems().indexOf(item);
   }
 
-  getSearch(): Search {
-    return this.shadowRoot!.querySelector<Search>("[udex-search]")!;
+  getSearch(): UDExSearch {
+    return this.shadowRoot!.querySelector<UDExSearch>("[udex-search]")!;
+  }
+
+  getPopover(): Popover {
+    return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
   }
 
   getDomListItems(): Element[] {
@@ -480,9 +514,31 @@ class UDExSearchableListBase extends UI5Element {
     });
   }
 
+  getPopoverPart(part: UDExPopoverPart): HTMLElement {
+    return this.getPopover().shadowRoot!.querySelector<HTMLElement>(`[part=${part}]`)!;
+  }
+
+  _managePopupListeners(part: UDExPopoverPart, action: "addEventListener" | "removeEventListener"): void {
+    const element = this.getPopoverPart(part);
+    element?.[action]("wheel", ((e: WheelEvent) => e.preventDefault()) as EventListener);
+  }
+
+  _setContentHeight(): void {
+    const content = this.getPopoverPart(UDExPopoverPart.Content);
+    content.style.maxHeight = this.height || "";
+  }
+
   get getNoResultText(): string {
     const hasTextProperty = this.noResultText !== undefined && this.noResultText.length > 0;
-    return hasTextProperty ? this.noResultText : UDExSearchableListBase.i18nBundle.getText(NO_MATCHES_FOUND);
+    return hasTextProperty ? this.noResultText : this.noMatchesFoundText;
+  }
+
+  get noMatchesFoundText(): string {
+    return UDExSearchableListBase.i18nBundle.getText(NO_MATCHES_FOUND);
+  }
+
+  get resultReturnedText(): string {
+    return UDExSearchableListBase.i18nBundle.getText(RESULT_RETURNED);
   }
 
   get isListEmpty(): boolean {

package/src/SecondaryNavigation.ts

@@ -64,7 +64,7 @@ type UDExSecondaryNavigationHeadingClickEventDetail = {
 @customElement({
   tag: "udex-secondary-navigation",
   renderer: litRender,
-  styles: SecondaryNavigationCss,
+  styles: [SecondaryNavigationCss],
   template: SecondaryNavigationTemplate,
   dependencies: [UDExSecondaryNavigationItem],
 })

package/src/SecondaryNavigationItem.ts

@@ -15,7 +15,6 @@ import {
   isHome,
   isEnd, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import type { RelativeValue } from "./utils/parseRelativeUnits.js";
 import parseRelativeUnits from "./utils/parseRelativeUnits.js";
 import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
@@ -63,7 +62,7 @@ export type UDExSecondaryNavigationItemSubItemClickEventDetail = {
 @customElement({
   tag: "udex-secondary-navigation-item",
   renderer: litRender,
-  styles: [SecondaryNavigationItemCss, getEffectiveScrollbarStyle()],
+  styles: [SecondaryNavigationItemCss],
   template: SecondaryNavigationItemTemplate,
   dependencies: [UI5Icon, UDExSecondaryNavigationSubItem],
 })

package/src/SegmentedButton.ts

@@ -47,15 +47,18 @@ class UDExSegmentedButton extends SegmentedButton {
   onBeforeRendering() {
     const items = this.getSlottedNodes<UDExSegmentedButtonItem>("items");
 
-    items.forEach((item, index, arr) => {
+    const visibleItems = items.filter(item => !item.hidden);
+    let index = 1;
+
+    items.forEach(item => {
       item.size = this.size;
-      item.posInSet = index + 1;
-      item.sizeOfSet = arr.length;
+      item.posInSet = item.hidden ? undefined : index++;
+      item.sizeOfSet = item.hidden ? undefined : visibleItems.length;
     });
 
     this.normalizeSelection();
 
-    this.style.setProperty(getScopedVarName("--udex-segmented-button-items-count"), `${items.length}`);
+    this.style.setProperty(getScopedVarName("--udex-segmented-button-items-count"), `${visibleItems.length}`);
   }
 
   _selectItem(e: MouseEvent | KeyboardEvent) {

package/src/SelectBox.ts

@@ -40,6 +40,7 @@ import UDExValueState from "./types/common.js";
 import UDExStatusMessage from "./StatusMessage.js";
 import UDExControlButton from "./ControlButton.js";
 import { Placement } from "./types/Dropdown.js";
+import { UDExPopoverPart } from "./types/SearchableListBase.js";
 import UDExTagGroup from "./TagGroup.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
@@ -51,6 +52,7 @@ import SearchableListBaseTemplate from "./generated/templates/SearchableListBase
 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 getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
 export type SelectBoxAccessibilityAttributes = {
   controls?: string,
@@ -84,7 +86,7 @@ type UDExSelectBoxRemoveEventDetail = {
 @customElement({
   tag: "udex-select-box",
   renderer: litRender,
-  styles: [TextFieldCss, SelectBoxCss, SearchableListCss],
+  styles: [TextFieldCss, SelectBoxCss, SearchableListCss, getEffectiveScrollbarStyle()],
   template: SelectBoxTemplate,
   dependencies: [
     UDExSelectBoxGroupHeader,
@@ -102,7 +104,6 @@ type UDExSelectBoxRemoveEventDetail = {
     Tokenizer,
     Token,
     Icon,
-    UDExStatusMessage,
     Popover,
   ],
 })
@@ -155,13 +156,6 @@ class UDExSelectBox extends UDExSearchableListBase {
   @property({ type: Boolean })
     disabled!: boolean;
 
-  /**
-   * Allows control over the height.
-   * @public
-   */
-  @property({ type: String })
-    height?: string;
-
   /**
    * Defines label text for field container.
    *
@@ -371,14 +365,22 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleDropdownBeforeOpen() {
+    if (this.preventPageScroll) {
+      this._managePopupListeners(UDExPopoverPart.Header, "addEventListener");
+    }
+
     if (this.height) {
-      const content = this._popover.shadowRoot!.querySelector("[part=content]") as HTMLElement;
-      content.style.maxHeight = this.height;
+      this._setContentHeight();
     }
+
     this.fireDecoratorEvent("before-open");
   }
 
   handleDropdownAfterClose() {
+    if (this.preventPageScroll) {
+      this._managePopupListeners(UDExPopoverPart.Header, "removeEventListener");
+    }
+
     if (this._tokenizer?._tokensCount > 0) {
       this._tokenizer.expanded = false;
     }
@@ -592,14 +594,6 @@ class UDExSelectBox extends UDExSearchableListBase {
     this.fireDecoratorEvent("show-more");
   }
 
-  getPopover(): Popover {
-    return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
-  }
-
-  getSearch(): UDExSearch {
-    return this.shadowRoot!.querySelector<UDExSearch>("[udex-search]")!;
-  }
-
   getTrigger(): HTMLElement {
     return this.shadowRoot!.querySelector(".udex-text-field__input")!;
   }

package/src/TabNavigation.ts

@@ -54,6 +54,11 @@ type UDExTabNavigationClickDetail = {
   currentPage: number,
 }
 
+type UDExTabContainerTabSelectEventDetail = {
+  tab: Tab;
+  tabIndex: number;
+}
+
 /**
  * @class
  *
@@ -86,10 +91,17 @@ type UDExTabNavigationClickDetail = {
  * @public
  */
 @event("click", { bubbles: true })
+/**
+ * Fired when a tab is selected.
+ *
+ * @public
+ */
+@event("tab-select", { bubbles: true })
 
 class UDExTabNavigation extends UI5Element {
   eventDetails!: {
     "click": UDExTabNavigationClickDetail,
+    "tab-select": UDExTabContainerTabSelectEventDetail,
   };
   /**
    * Defines the size of the "More" button.
@@ -320,6 +332,7 @@ class UDExTabNavigation extends UI5Element {
       }
     });
     this.setTabsIndex(selectedTabIndex);
+    this.fireDecoratorEvent("tab-select", { tab: this._selectedTab, tabIndex: selectedTabIndex });
   }
 
   setItemsInHeader() {

package/src/Table.ts

@@ -4,7 +4,6 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import {
   isUp, isDown, isLeft, isRight,
 } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -20,6 +19,7 @@ import TableTemplate from "./generated/templates/TableTemplate.lit.js";
 
 // Styles
 import TableCss from "./generated/themes/Table.css.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
 type TableBaseRow = UDExTableHeaderRow | UDExTableRow;
 

package/src/TextArea.ts

@@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -27,6 +26,7 @@ import TextAreaTemplate from "./generated/templates/TextAreaTemplate.lit.js";
 
 // Styles
 import TextAreaCss from "./generated/themes/TextArea.css.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
 /**
  * @class