@sapudex/web-components 0.192.4 → 0.224.0

package/src/Search.ts

@@ -19,9 +19,11 @@ 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";
 import ListItemBase from "./ListItemBase.js";
-import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/search.js";
 import "@ui5/webcomponents-icons/dist/microphone.js";
@@ -36,7 +38,8 @@ import {
   ACCESSIBLE_NAME_SEARCH_ICON,
   TOOLTIP_RESET_BUTTON,
   TOOLTIP_VOICE_BUTTON,
-  TOOLTIP_SUBMIT_BUTTON,
+  LISTENING,
+  OF,
 } from "./generated/i18n/i18n-defaults.js";
 import type SearchInputSuggestion from "./features/SearchSuggestionsPopover.js";
 
@@ -81,6 +84,7 @@ export type SuggestionList = {
   title: string,
   hasCustomIcon: boolean,
   id: string
+  suggestionDescription: string;
 }
 
 export enum Mode {
@@ -101,7 +105,7 @@ export type PopoverPlacement = "Bottom" | "Top";
  * For the <code>udex-search</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Search.js";</code>
+ * <code>import "@sapudex/web-components/dist/Search.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -118,7 +122,7 @@ export type PopoverPlacement = "Bottom" | "Top";
   staticAreaTemplate: SearchSuggestionsTemplate,
   get dependencies() {
     const Suggestion = getFeature<typeof SearchInputSuggestion>("SearchInputSuggestion");
-    return ([Popover] as Array<typeof UI5Element>).concat(Suggestion ? [...Suggestion.dependencies, List] : [List]);
+    return ([ControlButton, Button, Icon, List, Popover] as Array<typeof UI5Element>).concat(Suggestion ? [...Suggestion.dependencies] : []);
   },
 })
 
@@ -515,7 +519,7 @@ class UDExSearch extends UI5Element {
   }
 
   static async onDefine(): Promise<void> {
-    UDExSearch.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExSearch.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onEnterDOM(): void {
@@ -681,6 +685,7 @@ class UDExSearch extends UI5Element {
         icon: itemWithCustomIcon ? item.icon : SearchIcon,
         hasCustomIcon: itemWithCustomIcon,
         id: `${idName}-${index}`,
+        suggestionDescription: `${label}, ${idName} ${index + 1} ${UDExSearch.i18nBundle.getText(OF)} ${suggestedList.length}`,
       };
     });
   }
@@ -692,6 +697,7 @@ class UDExSearch extends UI5Element {
 
   getTextWithSuggestion(text: string): string {
     const escapedValue = this.escapeRegExp(this.value);
+    console.warn(escapedValue);
     const search = new RegExp(escapedValue, "i");
     return text.replace(search, "<b>$&</b>");
   }
@@ -875,7 +881,7 @@ class UDExSearch extends UI5Element {
     if (Suggestion) {
       this.Suggestion = new Suggestion(this);
     } else {
-      throw new Error("You have to import '@udex/webcomponents/dist/features/SearchSuggestionsPopover.js' module to use udex-search suggestions");
+      throw new Error("You have to import '@sapudex/webcomponents/dist/features/SearchSuggestionsPopover.js' module to use udex-search suggestions");
     }
   }
 
@@ -1092,6 +1098,10 @@ class UDExSearch extends UI5Element {
     }
   }
 
+  get effectivePlaceholder() {
+    return !this.voiceActiveClass ? this.label : `${UDExSearch.i18nBundle.getText(LISTENING)}...`;
+  }
+
   onSpeechStart(): void {
     this.speechRecognition.onstart = () => {
       this.voiceActiveClass = this._voiceActiveClassName;
@@ -1146,7 +1156,11 @@ class UDExSearch extends UI5Element {
   }
 
   get isShowResetButton(): boolean {
-    return this.showResetButton && !!this.value.length;
+    return this.showResetButton && !!this.value.length && this.mode === Mode.Standard;
+  }
+
+  get isShowHomeResetButton(): boolean {
+    return this.showResetButton && !!this.value.length && this.mode === Mode.HomeSearch;
   }
 
   get noResultMessage(): string {
@@ -1212,7 +1226,7 @@ class UDExSearch extends UI5Element {
   }
 
   get searchClasses(): string {
-    return `${this.classWithPrefix}  ${this.rootClasses}`;
+    return `${this.classWithPrefix}  ${this.rootClasses} udex-search-mode-${this.mode.toLowerCase().replace(" ", "-")}`.trim();
   }
 
   get prefixWrapperClasses(): string {
@@ -1251,28 +1265,45 @@ class UDExSearch extends UI5Element {
   }
 
   get isVoiceButton(): boolean {
-    return this.showVoiceButton && this.isNotMozillaFirefox && this.isNotMozillaFirefoxIOS;
+    return this.showVoiceButton && this.isNotMozillaFirefox && this.isNotMozillaFirefoxIOS && this.mode === Mode.HomeSearch;
   }
 
   get accInfo() {
     return {
       "ariaLabel": this.accessibleName || undefined,
+      "ariaDescription": this.open ? this.suggestionsDescription : undefined,
       "accessibleNameResetIcon": this.accessibleNameResetIcon || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_RESET_ICON) as string,
       "accessibleNameSearchIcon": this.accessibleNameSearchIcon || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_SEARCH_ICON) as string,
     };
   }
 
+  get suggestionsDescription(): string {
+    return this.hasPopoverContent ? `${this.suggestedList.length} ${this._suggestionLabel}, ${this.recommendedList.length} ${this._recommendLabel}` : `${this.noResultText}`;
+  }
+
   get tooltipInfo() {
     return {
       "tooltipResetButton": this.tooltipResetButton || UDExSearch.i18nBundle.getText(TOOLTIP_RESET_BUTTON) as string,
       "tooltipVoiceButton": this.tooltipVoiceButton || UDExSearch.i18nBundle.getText(TOOLTIP_VOICE_BUTTON) as string,
-      "tooltipSubmitButton": this.tooltipSubmitButton || UDExSearch.i18nBundle.getText(TOOLTIP_SUBMIT_BUTTON) as string,
+      "tooltipSubmitButton": this.tooltipSubmitButton || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_SEARCH_ICON) as string,
     };
   }
 
   get suggestionsAccessibleName(): string {
     return UDExSearch.i18nBundle.getText(AVAILABLE_VALUES) as string;
   }
+
+  get showNonInteractiveButton(): boolean {
+    return this.showSubmitButton && this.nonInteractiveSubmitButton;
+  }
+
+  get showSubmitStandardButton(): boolean {
+    return this.showSubmitButton && !this.nonInteractiveSubmitButton && this.mode === Mode.Standard;
+  }
+
+  get showSubmitHomeButton(): boolean {
+    return this.showSubmitButton && !this.nonInteractiveSubmitButton && this.mode === Mode.HomeSearch;
+  }
 }
 
 UDExSearch.define();

package/src/SearchSuggestions.hbs

@@ -30,6 +30,7 @@
                                 icon="{{icon}}"
                                 type="Button"
                                 design="Default"
+                                accessible-name="{{suggestionDescription}}"
                                 class="udex-search-suggestions__item-button"
                                 title="{{title}}"
                                 tabindex="-1"
@@ -61,6 +62,7 @@
                                     design="Default"
                                     class="udex-search-suggestions__item-button"
                                     title="{{title}}"
+                                    accessible-name="{{suggestionDescription}}"
                                     tabindex="-1"
                                     role="option"
                                     @click="{{handleSelectItem}}">
@@ -72,6 +74,7 @@
                                     type="Button"
                                     design="Default"
                                     class="udex-search-suggestions__item-button"
+                                    accessible-name="{{suggestionDescription}}"
                                     title="{{title}}"
                                     tabindex="-1"
                                     role="option"

package/src/SearchableListBase.hbs

@@ -11,6 +11,13 @@
 {{/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"
+        delay="{{busyDelay}}"
+        active>
+    </ui5-busy-indicator>
 {{else}}
     <udex-list
         id="udex-list"

package/src/SearchableListBase.ts

@@ -4,6 +4,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import {
   isDown, isUp,
 } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -82,6 +83,24 @@ import { NO_MATCHES_FOUND } from "./generated/i18n/i18n-defaults.js";
 })
 
 class UDExSearchableListBase extends UI5Element {
+  /**
+   * Defines if the component would display a loading indicator.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    busy?: boolean;
+
+  /**
+   * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
+   *
+   * @default 1000
+   * @public
+   */
+  @property({ type: Number, defaultValue: 1000, validator: Integer })
+    busyDelay?: number;
+
   /**
    * Defines the "no result" text of the component.
    *
@@ -136,6 +155,15 @@ class UDExSearchableListBase extends UI5Element {
   @slot({ type: HTMLElement, "default": true, invalidateOnChildChange: true })
     items!: Array<UDExListItemBase | UDExListGroupHeaderBase>;
 
+  /**
+   * Defines the default accessible role for the list componnet.
+   *
+   * @default "list"
+   * @public
+   */
+  @property({ type: String, defaultValue: "list" })
+    defaultAccessibleRole!: string;
+
   @property({ type: Object })
     _filteredItems!: Array<ProcessedItem>;
 
@@ -477,11 +505,11 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   get accessibleRoleForList(): string {
-    return this._filteredItems.some(element => element.isGroup) ? "group" : "list";
+    return this._filteredItems.some(element => element.isGroup) ? "group" : this.defaultAccessibleRole;
   }
 
   static async onDefine(): Promise<void> {
-    UDExSearchableListBase.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExSearchableListBase.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 }
 

package/src/SecondaryNavigation.hbs

@@ -59,6 +59,7 @@
     </div>
     <udex-secondary-navigation-item
         @keydown="{{handleKeyDown}}"
+        _max-height="{{maxDropdownHeight}}"
         class="udex-secondary-navigation__mobile-nav"
         role="button"
         aria-label="{{mobileMenuOpenerAriaLabel}}"

package/src/SecondaryNavigation.ts

@@ -16,12 +16,12 @@ import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
 import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
 import { MORE } from "./generated/i18n/i18n-defaults.js";
 import SecondaryNavigationTemplate from "./generated/templates/SecondaryNavigationTemplate.lit.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
 // Styles
 import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.js";
 
 const canvasContentFont: string = "16px / 17.6px '72 Brand Variable'";
 const rootClass = "udex-secondary-navigation__root";
-export const breakpointSizeS: number = 979;
 
 export type ItemClickDetail = {
   originalEvent: Event,
@@ -40,7 +40,7 @@ export type ItemClickDetail = {
  * For the <code>udex-secondary-navigation</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SecondaryNavigation.js";</code>
+ * <code>import "@sapudex/web-components/dist/SecondaryNavigation.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -127,6 +127,13 @@ class UDExSecondaryNavigation extends UI5Element {
    */
   @property()
     titleHref!: string;
+  /**
+   * Defines the height of the dropdown opened on mobile screen.
+   *
+   * @public
+   */
+  @property({ type: String })
+    maxDropdownHeight!: string;
 
   @property({ type: Boolean, noAttribute: true })
     _selectedMore!: boolean;
@@ -152,7 +159,7 @@ class UDExSecondaryNavigation extends UI5Element {
   static i18nBundle: any;
 
   static async onDefine(): Promise<void> {
-    UDExSecondaryNavigation.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExSecondaryNavigation.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   constructor() {
@@ -464,11 +471,11 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   get isDesktopScreen(): boolean {
-    return window.innerWidth > breakpointSizeS;
+    return BreakpointUtils.isAtLeast("M");
   }
 
   get isMobileScreen(): boolean {
-    return window.innerWidth <= breakpointSizeS;
+    return BreakpointUtils.isAtMost("S");
   }
 }
 

package/src/SecondaryNavigationItem.hbs

@@ -5,6 +5,7 @@
         ?active="{{isActive}}"
         href="{{path}}"
         target="{{target}}"
+        aria-current="{{ariaCurrent}}"
         @keydown="{{handleItemLinkKeyDown}}"
         @click="{{fireNavItemClickEvent}}">
         {{itemLabel}}
@@ -54,7 +55,7 @@
                             .nestedItems="{{this.items}}"
                             path="{{this.path}}"
                             target="{{this.target}}"
-                            ?is-active="{{this.active}}">
+                            ?active="{{this.active}}">
                         </udex-secondary-navigation-sub-item>
                     </li>
                 {{/each}}

package/src/SecondaryNavigationItem.ts

@@ -16,6 +16,8 @@ import {
   isHome,
   isEnd, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
+import parseRelativeUnits, { RelativeValue } from "./utils/parseRelativeUnits.js";
 import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
 import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
@@ -38,7 +40,7 @@ export const menuItemRole: string = "menuitem";
  * For the <code>udex-secondary-navigation-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SecondaryNavigationItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/SecondaryNavigationItem.js";</code>
  *
  * @constructor
  * @extends UDExSecondaryNavigationItemBase
@@ -48,7 +50,7 @@ export const menuItemRole: string = "menuitem";
 @customElement({
   tag: "udex-secondary-navigation-item",
   renderer: litRender,
-  styles: SecondaryNavigationItemCss,
+  styles: [SecondaryNavigationItemCss, getEffectiveScrollbarStyle()],
   template: SecondaryNavigationItemTemplate,
   dependencies: [UI5Icon, UDExSecondaryNavigationSubItem],
 })
@@ -131,6 +133,14 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   @property({ validator: Integer })
     _navItemsLength!: number;
 
+  /**
+   * Defines the height of the dropdown opened on mobile screen.
+   *
+   * @private
+   */
+  @property({ type: String })
+    _maxHeight!: RelativeValue;
+
   /**
    * Defines processed items.
    *
@@ -153,6 +163,10 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
       this.onFirstSubItemFocus();
       this._shouldFocusFirstSubItem = false;
     }
+
+    if (this._isMobileView && this.isOpen) {
+      this.setDropdownHeight();
+    }
   }
 
   onBeforeRendering() : void {
@@ -337,16 +351,36 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._processedItems = this.subItems;
   }
 
+  setDropdownHeight(): void {
+    if (!this._maxHeight || this._dropdownMaxHeightExceeds || !this.heightSatisfiesType) {
+      const secondaryNavigationMobileTrigger = this.shadowRoot!.querySelector(".udex-secondary-navigation__item")!;
+      const maxDropdownHeight = window.innerHeight - secondaryNavigationMobileTrigger.clientHeight;
+      this.style.setProperty("--udex-secondary-navigation-item-dropdown-max-height", `${maxDropdownHeight}px`);
+      return;
+    }
+
+    this.style.setProperty("--udex-secondary-navigation-item-dropdown-max-height", `${this._maxHeight}`);
+  }
+
+  get _dropdownMaxHeightExceeds(): boolean {
+    const normalizedHeight = parseRelativeUnits(this._maxHeight, this.dropdown);
+    const secondaryNavigationMobileTriggerHeight = this.shadowRoot!.querySelector(".udex-secondary-navigation__item")!.clientHeight;
+    return normalizedHeight >= window.innerHeight - secondaryNavigationMobileTriggerHeight;
+  }
+
+  get heightSatisfiesType(): boolean {
+    return /vh|vw|%|em|rem|px/.test(this._maxHeight);
+  }
+
   setDropdownHorizontalAlign(): void {
-    const dropdown = this.shadowRoot!.querySelector<HTMLElement>(".udex-secondary-navigation__dropdown");
-    const { right, left } = dropdown!.getBoundingClientRect();
+    const { right, left } = this.dropdown.getBoundingClientRect();
 
     if (right > window.innerWidth) {
-      dropdown?.setAttribute("data-horizontal-align", "right");
+      this.dropdown.setAttribute("data-horizontal-align", "right");
     }
 
     if (left < 0) {
-      dropdown?.setAttribute("data-horizontal-align", "left");
+      this.dropdown.setAttribute("data-horizontal-align", "left");
     }
   }
 
@@ -373,6 +407,10 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._shouldFocusFirstSubItem = true;
   }
 
+  get dropdown(): HTMLElement {
+    return this.shadowRoot!.querySelector<HTMLElement>(".udex-secondary-navigation__dropdown")!;
+  }
+
   get isLastItem(): boolean {
     return this._navItemsLength === this.index;
   }

package/src/SecondaryNavigationItemBase.ts

@@ -5,14 +5,8 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { breakpointSizeS } from "./SecondaryNavigation.js";
-
-export enum Target {
-  _blank = "_blank",
-  _parent = "_parent",
-  _self = "_self",
-  _top = "_top",
-}
+import { Target } from "./types/common.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
 
 export type NavItem = {
   path?: string;
@@ -146,7 +140,11 @@ class UDExSecondaryNavigationItemBase extends UI5Element {
   }
 
   get isMobile(): boolean {
-    return window.innerWidth <= breakpointSizeS;
+    return BreakpointUtils.isAtMost("S");
+  }
+
+  get ariaCurrent(): string | null {
+    return this.active ? "page" : null;
   }
 }
 

package/src/SecondaryNavigationSubItem.hbs

@@ -22,7 +22,8 @@
             aria-haspopup="{{hasItems}}"
             ?sub-active="{{isSubItemActive}}"
             aria-label="{{label}}"
-            ?active="{{isActive}}"
+            ?active="{{active}}"
+            aria-current="{{ariaCurrent}}"
             class="udex-secondary-navigation__dropdown-item">
             {{itemLabel}}
             {{#if hasItems}}
@@ -39,7 +40,8 @@
             role="menuitem"
             href="{{path}}"
             target="{{target}}"
-            ?active="{{isActive}}"
+            ?active="{{active}}"
+            aria-current="{{ariaCurrent}}"
             class="udex-secondary-navigation__dropdown-item">
             {{itemLabel}}
         </a>

package/src/SecondaryNavigationSubItem.ts

@@ -25,7 +25,7 @@ import SecondaryNavigationSubItemCss from "./generated/themes/SecondaryNavigatio
  * For the <code>udex-secondary-navigation-sub-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SecondaryNavigationSubItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/SecondaryNavigationSubItem.js";</code>
  *
  * @constructor
  * @extends UDExSecondaryNavigationItemBase
@@ -61,15 +61,6 @@ import SecondaryNavigationSubItemCss from "./generated/themes/SecondaryNavigatio
 @event("back-item-click")
 
 class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
-  /**
-   * Defines active item.
-   *
-   * @public
-   * @default false
-   */
-  @property({ type: Boolean })
-    isActive!: boolean;
-
   /**
    * Defines back item.
    *
@@ -94,7 +85,7 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
   static i18nBundle: any;
 
   static async onDefine(): Promise<void> {
-    UDExSecondaryNavigationSubItem.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExSecondaryNavigationSubItem.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onItemClick(): void {

package/src/SegmentedButton.ts

@@ -9,7 +9,8 @@ import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsSco
 // Styles
 import SegmentedButtonMode from "@ui5/webcomponents/dist/types/SegmentedButtonMode.js";
 import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js";
-import UDExSegmentedButtonItem, { SegmentedButtonItemSize } from "./SegmentedButtonItem.js";
+import UDExSegmentedButtonItem from "./SegmentedButtonItem.js";
+import UDExButtonSize from "./types/ButtonSize.js";
 
 export enum SegmentedButtonSelectionMode {
   /**
@@ -36,10 +37,10 @@ export enum SegmentedButtonSelectionMode {
  * For the <code>udex-segmented-button</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SegmentedButton.js";</code>
+ * <code>import "@sapudex/web-components/dist/SegmentedButton.js";</code>
  *
  * @constructor
- * @extends UI5Element
+ * @extends SegmentedButton
  * @public
  */
 @customElement({
@@ -55,8 +56,8 @@ class UDExSegmentedButton extends SegmentedButton {
    * @default "Medium"
    * @public
    */
-  @property({ type: SegmentedButtonItemSize, defaultValue: SegmentedButtonItemSize.Medium })
-    size!: `${SegmentedButtonItemSize}`;
+  @property({ type: UDExButtonSize, defaultValue: UDExButtonSize.Medium })
+    size!: `${UDExButtonSize}`;
 
   onBeforeRendering() {
     const items = this.getSlottedNodes<UDExSegmentedButtonItem>("items");

package/src/SegmentedButtonItem.ts

@@ -5,12 +5,7 @@ import SegmentedButtonItem from "@ui5/webcomponents/dist/SegmentedButtonItem.js"
 // Styles
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import SegmentedButtonItemCss from "./generated/themes/SegmentedButtonItem.css.js";
-
-export enum SegmentedButtonItemSize {
-  Small = "Small",
-  Medium = "Medium",
-  Large = "Large",
-}
+import UDExButtonSize from "./types/ButtonSize.js";
 
 /**
  * @class
@@ -23,7 +18,7 @@ export enum SegmentedButtonItemSize {
  * For the <code>udex-segmented-button-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/SegmentedButtonItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/SegmentedButtonItem.js";</code>
  *
  * @constructor
  * @extends SegmentedButtonItem
@@ -41,8 +36,8 @@ class UDExSegmentedButtonItem extends SegmentedButtonItem {
    * @default "Medium"
    * @public
    */
-  @property({ type: SegmentedButtonItemSize, defaultValue: SegmentedButtonItemSize.Medium })
-    size!: `${SegmentedButtonItemSize}`;
+  @property({ type: UDExButtonSize, defaultValue: UDExButtonSize.Medium })
+    size!: `${UDExButtonSize}`;
 }
 
 UDExSegmentedButtonItem.define();