@sapudex/web-components 2.1.0 → 2.2.0

package/src/MediaPlayerYoutube.ts

@@ -3,13 +3,13 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import type { UDExAspectRatio } from "./MediaPlayer.js";
 
 import MediaPlayerYoutubeTemplate from "./generated/templates/MediaPlayerYoutubeTemplate.lit.js";
 
 // Styles
 import MediaPlayerYoutubeCss from "./generated/themes/MediaPlayerYoutube.css.js";
 import MediaPlayerCss from "./generated/themes/MediaPlayer.css.js";
-import type { UDExAspectRatio } from "./MediaPlayer.js";
 
 const MATCH_NOCOOKIE = /youtube-nocookie\.com/;
 const MATCH_URL_YOUTUBE = /(?:youtu\.be\/|youtube(?:-nocookie|education)?\.com\/(?:embed\/|v\/|watch\/|watch\?v=|watch\?.+&v=|shorts\/|live\/))((\w|-){11})|youtube\.com\/playlist\?list=|youtube\.com\/user\//;
@@ -22,6 +22,8 @@ const MATCH_END_QUERY = /[?&#]end=([0-9hms]+)/;
 const MATCH_START_STAMP = /(\d+)(h|m|s)/g;
 const MATCH_NUMERIC = /^\d+$/;
 
+export type YoutubePlayer = YT.Player;
+
 declare global {
   interface Window {
     onYouTubeIframeAPIReady: () => void;
@@ -293,7 +295,7 @@ class UDExMediaPlayerYoutube extends UI5Element {
    * Returns video element
    * @public
    */
-  getPlayer(): YT.Player | null {
+  getPlayer(): YoutubePlayer | null {
     return this.youtubePlayer || null;
   }
 

package/src/Pagination.ts

@@ -46,7 +46,7 @@ export enum UDExDisplayType {
   mobile = "mobile"
 }
 
-type UDExPaginationChangeEventDetail = {
+export type UDExPaginationChangeEventDetail = {
   currentPage: number,
 }
 

package/src/PasswordField.hbs

@@ -2,6 +2,7 @@
     type="{{type}}"
     value="{{value}}"
     label="{{passwordLabel}}"
+    autocomplete="{{autocomplete}}"
     ?disabled="{{disabled}}"
     ?readonly="{{readonly}}"
     ?displayonly="{{displayonly}}"

package/src/PasswordField.ts

@@ -20,6 +20,12 @@ export enum UDExIconType {
   Hide = "hide",
   Show = "show",
 }
+
+export enum UDExPasswordFieldAutoComplete {
+  On = "on",
+  Off = "off",
+}
+
 /**
  * @class
  *
@@ -55,6 +61,14 @@ class UDExPasswordField extends UI5Element {
   @property({ type: String, noAttribute: true })
     type: UDExInputType = UDExInputType.Password;
 
+  /**
+   * Defines the behaviour of autocomplete.
+   *
+   * @public
+   */
+  @property({ type: String })
+    autocomplete: `${UDExPasswordFieldAutoComplete}` = "off";
+
   /**
    * Defines whether the component is in disabled state.
    * <br><br>

package/src/PhoneNumberField.ts

@@ -24,7 +24,6 @@ import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 
 import PhoneNumberFieldTemplate from "./generated/templates/PhoneNumberFieldTemplate.lit.js";
-import type UDExValueState from "./types/common.js";
 
 // Styles
 import PhoneNumberFieldCss from "./generated/themes/PhoneNumberField.css.js";
@@ -39,9 +38,17 @@ export enum UDExOpenButtonIcon {
   iconDown = "slim-arrow-down",
 }
 
-export type UDExPhoneNumberFieldValueState = Exclude<UDExValueState, "Warning">
+export enum UDExPhoneNumberFieldValueState {
+  Standard = "Standard",
+  Error = "Error",
+  Success = "Success",
+}
 
 const initialPlaceholder: string = "+X XXX-XXX-XXXX";
+/**
+ * Maximum number of possible digits based on international standard https://en.wikipedia.org/wiki/E.164
+ */
+const digitsLimit: number = 15;
 
 /**
  * @class
@@ -97,7 +104,7 @@ class UDExPhoneNumberField extends UI5Element {
    * @public
    */
   @property()
-    valueState: `${UDExPhoneNumberFieldValueState}` = "Standard";
+    valueState: `${UDExPhoneNumberFieldValueState}` = UDExPhoneNumberFieldValueState.Standard;
 
   /**
    * Defines supporting text under the input field.
@@ -432,6 +439,15 @@ class UDExPhoneNumberField extends UI5Element {
     this._dropdownExpanded = false;
   }
 
+  calculateMaxLength(prefix: string, mask: string): number {
+    const prefixNonDigitCount = prefix.replace(/[\d]/g, "").length;
+    const maskNonDigitCount = mask.replace(/X/g, "").length;
+
+    const maxLength = digitsLimit + prefixNonDigitCount + maskNonDigitCount;
+
+    return maxLength;
+  }
+
   autoSelectCountry(value: string) {
     const countryToSelect = this.updatedCountriesList.find(country => {
       const valuePhonePrefix = value.substring(0, country.phonePrefix.length);
@@ -444,7 +460,7 @@ class UDExPhoneNumberField extends UI5Element {
     }
 
     if (this.selectedPhonePrefix && this.selectedPlaceholder) {
-      this.maxlength = this.selectedPhonePrefix.length + this.selectedPlaceholder.length;
+      this.maxlength = this.calculateMaxLength(this.selectedPhonePrefix, this.selectedPlaceholder);
     }
   }
 
@@ -460,6 +476,7 @@ class UDExPhoneNumberField extends UI5Element {
       return;
     }
 
+    const maskLength = this.selectedPhonePrefix.length + this.selectedPlaceholder.length;
     const mask = this.selectedPhonePrefix + this.selectedPlaceholder;
     const maskSymbols = [" ", "-", "(", ")"];
 
@@ -476,6 +493,10 @@ class UDExPhoneNumberField extends UI5Element {
       return char;
     }).join("");
 
+    if (this.value.length >= maskLength) {
+      return;
+    }
+
     this.value = valueWithMask;
 
     if (this.value.length > this.maxlength) {

package/src/ProgressBar.ts

@@ -7,7 +7,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   VALUE_STATE_ERROR, VALUE_STATE_SUCCESS, VALUE_STATE_WARNING, VALUE_STATE_INFORMATION,
 } from "./generated/i18n/i18n-defaults.js";
-import ProgressBarValueState from "./types/ProgressBar.js";
+import UDExProgressBarValueState from "./types/ProgressBar.js";
 
 // Styles
 import ProgressBarCss from "./generated/themes/ProgressBar.css.js";
@@ -47,17 +47,17 @@ class UDExProgressBar extends ProgressIndicator {
    */
   @property()
   /** @ts-expect-error */
-    valueState!: `${ProgressBarValueState}` = ProgressBarValueState.None;
+    valueState!: `${UDExProgressBarValueState}` = UDExProgressBarValueState.None;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
   valueStateTextMappings(): Record<string, string> {
     return {
-      [ProgressBarValueState.Error]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_ERROR),
-      [ProgressBarValueState.Warning]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_WARNING),
-      [ProgressBarValueState.Success]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_SUCCESS),
-      [ProgressBarValueState.Information]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_INFORMATION),
+      [UDExProgressBarValueState.Error]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_ERROR),
+      [UDExProgressBarValueState.Warning]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_WARNING),
+      [UDExProgressBarValueState.Success]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_SUCCESS),
+      [UDExProgressBarValueState.Information]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_INFORMATION),
     };
   }
 }

package/src/RadioButton.ts

@@ -7,7 +7,7 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 import RadioButton from "@ui5/webcomponents/dist/RadioButton.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import RadioButtonValueState from "./types/RadioButton.js";
+import UDExRadioButtonValueState from "./types/RadioButton.js";
 
 // Styles
 import RadioButtonCss from "./generated/themes/RadioButton.css.js";
@@ -27,6 +27,7 @@ import RadioButtonCss from "./generated/themes/RadioButton.css.js";
  *
  * @constructor
  * @extends RadioButton
+ * @tagname udex-radio-button
  * @public
  */
 @customElement({
@@ -52,7 +53,7 @@ class UDExRadioButton extends RadioButton {
    */
   @property()
   /** @ts-expect-error */
-    valueState!: `${RadioButtonValueState}` = RadioButtonValueState.None;
+    valueState!: `${UDExRadioButtonValueState}` = UDExRadioButtonValueState.None;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
@@ -64,13 +65,13 @@ class UDExRadioButton extends RadioButton {
 
   get valueStateText(): string {
     switch (this.valueState) {
-    case RadioButtonValueState.Error:
+    case UDExRadioButtonValueState.Error:
       return RadioButton.i18nBundle.getText(VALUE_STATE_ERROR);
-    case RadioButtonValueState.Success:
+    case UDExRadioButtonValueState.Success:
       return RadioButton.i18nBundle.getText(VALUE_STATE_SUCCESS);
-    case RadioButtonValueState.Information:
+    case UDExRadioButtonValueState.Information:
       return RadioButton.i18nBundle.getText(VALUE_STATE_INFORMATION);
-    case RadioButtonValueState.Warning:
+    case UDExRadioButtonValueState.Warning:
       return RadioButton.i18nBundle.getText(VALUE_STATE_WARNING);
     default:
       return "";

package/src/Search.hbs

@@ -73,8 +73,8 @@
                 @click="{{handleInputClick}}"
             />
         {{/if}}
-        {{#if accInfo.ariaDescription}}
-            <span role="status" id="search-description" class="hidden" aria-hidden="true">{{accInfo.ariaDescription}}</span>
+        {{#if open}}
+            <span aria-live="polite" aria-atomic="true" id="search-description" class="hidden" aria-hidden="true">{{suggestionsDescription}}</span>
         {{/if}}
         <div class="udex-search__icons">
             {{#if isShowHomeResetButton}}
@@ -123,6 +123,7 @@
                   class="udex-search__icon"
                   aria-hidden="true"
                   accessible-name="{{accInfo.accessibleNameSearchIcon}}"
+                  show-tooltip
                   name="search">
               </ui5-icon>
             {{/if}}

package/src/Search.ts

@@ -710,7 +710,6 @@ 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>");
   }
@@ -1285,14 +1284,13 @@ class UDExSearch extends UI5Element {
   get accInfo() {
     return {
       "ariaLabel": this.accessibleName || undefined,
-      "ariaDescription": this.open ? this.suggestionsDescription : undefined,
       "accessibleNameResetIcon": this.accessibleNameResetIcon || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_RESET_ICON),
       "accessibleNameSearchIcon": this.accessibleNameSearchIcon || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_SEARCH_ICON),
     };
   }
 
   get suggestionsDescription(): string {
-    return this.hasPopoverContent ? `${this.suggestedList.length} ${this._suggestionLabel}, ${this.recommendedList.length} ${this._recommendLabel}` : `${this.noResultText}`;
+    return !this.showNoResultMessage ? `${this.suggestedList.length} ${this._suggestionLabel}, ${this.recommendedList.length} ${this._recommendLabel}` : `${this.noResultMessage}`;
   }
 
   get tooltipInfo() {

package/src/SecondaryNavigation.hbs

@@ -66,6 +66,7 @@
         label="{{heading}}"
         mobile-link-title="{{title}}"
         @ui5-sub-item-click="{{handleSubItemClick}}"
+        _is-mobile-menu-opener
         .subItems="{{this.parsedItems}}">
         {{#if hasMobileButtonsSlot}}
             {{>buttons}}

package/src/SecondaryNavigation.ts

@@ -145,7 +145,8 @@ class UDExSecondaryNavigation extends UI5Element {
     _mobileBtnExpanded = false;
 
   _navItems!: Array<NavItem>;
-  _showMoreButton: boolean;
+  _showMoreButton: boolean = true;
+  _shouldFocusFirstItem: boolean = true;
   _rootHolder!: HTMLElement | null | undefined;
   _clickedNavItem!: UDExSecondaryNavigationItem;
   _boundReflowItems: () => void;
@@ -155,7 +156,6 @@ class UDExSecondaryNavigation extends UI5Element {
 
   constructor() {
     super();
-    this._showMoreButton = true;
     this._boundReflowItems = this._handleResize.bind(this);
   }
 
@@ -171,13 +171,6 @@ 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();
@@ -186,6 +179,12 @@ class UDExSecondaryNavigation extends UI5Element {
 
   onAfterRendering(): void {
     this._rootHolder = this.rootHolder;
+    if (!this._overflowItems.length) {
+      this._showMoreButton = true;
+    }
+    if (this._shouldFocusFirstItem && this.isDesktopScreen) {
+      this.domNavItems[0]._tabIndex = "0";
+    }
     this.handleOutsideClick();
   }
 
@@ -193,6 +192,16 @@ class UDExSecondaryNavigation extends UI5Element {
     this._requestRender = !this._requestRender;
   }
 
+  _handleResize() {
+    this.reflowItems();
+    if (this.isDesktopScreen) {
+      this.resetTabIndex();
+    }
+    if (this._clickedNavItem && this.isDesktopScreen) {
+      this._clickedNavItem.closeDropdown();
+    }
+  }
+
   reflowItems(): void {
     const availableWidth = this.rootHolder.offsetWidth - (this.headingHolder?.offsetWidth || 0) - (this.optionalButtons?.offsetWidth || 0);
     const moreButtonWidth = this.getMoreButtonWidth();
@@ -243,9 +252,12 @@ class UDExSecondaryNavigation extends UI5Element {
     const item = e.target as UDExSecondaryNavigationItem;
     const currentSelectedIndex = this.getCurrentIndex(item);
     const previousSelectIndex = currentSelectedIndex - 1;
+    const previousItem = this.domNavItems[previousSelectIndex];
     if (currentSelectedIndex > 0) {
       e.preventDefault();
-      this.domNavItems[previousSelectIndex]?.focus();
+      this.domNavItems[currentSelectedIndex]._tabIndex = "-1";
+      previousItem._tabIndex = "0";
+      previousItem?.focus();
     }
   }
 
@@ -254,9 +266,12 @@ class UDExSecondaryNavigation extends UI5Element {
     const currentSelectedIndex = this.getCurrentIndex(item);
     const lastItemIndex = this.domNavItems.length - 1;
     const nextSelectIndex = currentSelectedIndex + 1;
+    const nextItem = this.domNavItems[nextSelectIndex];
     if (nextSelectIndex < lastItemIndex) {
       e.preventDefault();
-      this.domNavItems[nextSelectIndex].focus();
+      this.domNavItems[currentSelectedIndex]._tabIndex = "-1";
+      nextItem._tabIndex = "0";
+      nextItem.focus();
     }
   }
 
@@ -305,6 +320,8 @@ class UDExSecondaryNavigation extends UI5Element {
     }
 
     this._clickedNavItem = clickedItem;
+    this._shouldFocusFirstItem = false;
+    this.setTabIndexById(_id);
     this.closePrevDropdown(_id);
 
     if (!subItems.length) {
@@ -401,7 +418,7 @@ class UDExSecondaryNavigation extends UI5Element {
 
   closePrevDropdown(clickedItemId: string): void {
     this.domNavItems.forEach(item => {
-      if (clickedItemId !== item._id) {
+      if (item.isOpen && item._id !== clickedItemId) {
         item.closeDropdown();
       }
     });
@@ -411,6 +428,18 @@ class UDExSecondaryNavigation extends UI5Element {
     return string ? JSON.parse(string) as T[] : [];
   }
 
+  resetTabIndex(): void {
+    this.domNavItems.forEach((item, index) => {
+      item._tabIndex = index === 0 ? "0" : "-1";
+    });
+  }
+
+  setTabIndexById(id: string): void {
+    this.domNavItems.forEach(item => {
+      item._tabIndex = id === item._id ? "0" : "-1";
+    });
+  }
+
   get domNavItems(): Array<UDExSecondaryNavigationItem> {
     const items = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationItem>("[udex-secondary-navigation-item]");
     return items ? Array.from(items) : [];

package/src/SecondaryNavigationItem.hbs

@@ -5,6 +5,7 @@
         ?active="{{isActive}}"
         href="{{path}}"
         target="{{target}}"
+        tabindex="{{_tabIndex}}"
         aria-current="{{ariaCurrent}}"
         @keydown="{{handleItemLinkKeyDown}}"
         @click="{{fireNavItemClickEvent}}">
@@ -14,7 +15,7 @@
     <button
         class="udex-secondary-navigation__item"
         role="{{itemRole}}"
-        tabindex="0"
+        tabindex="{{menuOpenerTabIndex}}"
         ?active="{{isActive}}"
         aria-haspopup="{{hasNestedItems}}"
         aria-expanded="{{isOpen}}"

package/src/SecondaryNavigationItem.ts

@@ -157,9 +157,20 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   @property({ type: Object })
     _processedItems: Array<NavItem> = [];
 
+  /**
+   * Defines if item is mobile menu opener.
+   *
+   * @private
+   * @default false
+   */
+  @property({ type: Boolean })
+    _isMobileMenuOpener!: boolean;
+
   _dropdownHistory: Array<Array<NavItem>> = [];
   _shouldFocusFirstSubItem!: boolean;
   _subTitle!: string | undefined;
+  _shouldResetTabIndex!: boolean;
+  _shouldSetTabIndex!: boolean;
 
   onAfterRendering(): void {
     if (this.isLastItem && this.isOpen && !this._isMobileView) {
@@ -174,6 +185,16 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     if (this._isMobileView && this.isOpen) {
       this.setDropdownHeight();
     }
+
+    if (this._shouldSetTabIndex) {
+      this._tabIndex = "0";
+      this._shouldSetTabIndex = false;
+    }
+
+    if (this._shouldResetTabIndex) {
+      this._tabIndex = "-1";
+      this._shouldResetTabIndex = false;
+    }
   }
 
   onBeforeRendering() : void {
@@ -202,6 +223,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     if (this.hasNestedItems) {
       this.setDropdownItems();
       this.isOpen = !this.isOpen;
+      this._shouldResetTabIndex = true;
       this.onShouldFocusFirstSubItem();
     }
 
@@ -210,6 +232,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
 
   closeDropdown(): void {
     this.isOpen = false;
+    this._shouldSetTabIndex = true;
   }
 
   handleItemLinkKeyDown(e: KeyboardEvent): void {
@@ -425,6 +448,14 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     return this.shadowRoot!.querySelector<HTMLElement>(".udex-secondary-navigation__dropdown")!;
   }
 
+  get menuOpenerTabIndex(): string {
+    if (this._isMobileMenuOpener) {
+      return "0";
+    }
+
+    return this._tabIndex;
+  }
+
   get isLastItem(): boolean {
     return this._navItemsLength === this.index;
   }

package/src/SecondaryNavigationItemBase.ts

@@ -94,6 +94,9 @@ class UDExSecondaryNavigationItemBase extends UI5Element {
   @property({ type: Boolean })
     _isMobileView!: boolean;
 
+  @property({ type: String })
+    _tabIndex: string = "-1";
+
   _handleResizeBound: ResizeObserverCallback;
 
   constructor() {

package/src/SecondaryNavigationSubItem.ts

@@ -89,9 +89,6 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
   @property({ type: Object })
     nestedItems: Array<NavItem> = [];
 
-  @property({ type: String })
-    _tabIndex: string = "-1";
-
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 

package/src/SegmentedButton.ts

@@ -9,7 +9,7 @@ import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsSco
 import SegmentedButtonSelectionMode from "@ui5/webcomponents/dist/types/SegmentedButtonSelectionMode.js";
 import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js";
 import UDExSegmentedButtonItem from "./SegmentedButtonItem.js";
-import { UDExButtonSize } from "./types/Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
 
 /**
  * @class

package/src/SegmentedButtonItem.ts

@@ -5,7 +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";
-import { UDExButtonSize } from "./types/Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
 
 /**
  * @class
@@ -44,7 +44,7 @@ class UDExSegmentedButtonItem extends SegmentedButtonItem {
    *
    * @private
    */
-  @property()
+  @property({ type: Boolean })
     hasIcon: boolean = false;
 
   constructor() {

package/src/StatusBadge.ts

@@ -23,7 +23,6 @@ import StatusBadgeTemplate from "./generated/templates/StatusBadgeTemplate.lit.j
 
 // Styles
 import StatusBadgeCss from "./generated/themes/StatusBadge.css.js";
-import type UDExProgressBarValueState from "./types/ProgressBar.js";
 
 export enum IconMapping {
   Success = "sys-enter-2",
@@ -41,7 +40,13 @@ export enum BadgeSize {
   XL = "XL",
 }
 
-export type UDExStatusBadgeValueState = `${Exclude<UDExProgressBarValueState, "None">}` | "Edit";
+export enum UDExStatusBadgeValueState {
+  Warning = "Warning",
+  Error = "Error",
+  Success = "Success",
+  Information = "Information",
+  Edit = "Edit"
+}
 
 /**
  * @class
@@ -75,7 +80,7 @@ class UDExStatusBadge extends UI5Element {
    * @public
    */
   @property()
-    valueState: UDExStatusBadgeValueState = "Information";
+    valueState: `${UDExStatusBadgeValueState}` = UDExStatusBadgeValueState.Information;
 
   /**
    * Defines predefined size of the component.

package/src/StepInput.ts

@@ -28,7 +28,7 @@ import StepInputTemplate from "./StepInputTemplate.js";
 
 // Styles
 import StepInputCss from "./generated/themes/StepInput.css.js";
-import type { UDExControlButtonDesign } from "./types/Button.js";
+import type UDExControlButtonDesign from "./types/ControlButtonDesign.js";
 import type { UDExTextFieldKeydownEventDetail } from "./TextField.js";
 
 // Spin variables
@@ -37,11 +37,11 @@ const ACCELERATION = 0.8;
 const MIN_WAIT_TIMEOUT = 50; // milliseconds
 const INITIAL_SPEED = 120; // milliseconds
 
-type UDExStepInputValueChangeEventDetail = {
+export type UDExStepInputValueChangeEventDetail = {
   value: number,
 }
 
-type UDExStepInputValueStateChangeEventDetail = {
+export type UDExStepInputValueStateChangeEventDetail = {
   valueState: `${UDExValueState}`,
   valid: boolean
 }

package/src/TableCellBase.ts

@@ -4,7 +4,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import type TableCellHorizontalAlign from "./types/Table.js";
+import type UDExTableCellHorizontalAlign from "./types/Table.js";
 
 // Styles
 import TableCellBaseCss from "./generated/themes/TableCellBase.css.js";
@@ -32,7 +32,7 @@ abstract class UDExTableCellBase extends UI5Element {
    * @public
    */
   @property()
-    horizontalAlign?: `${TableCellHorizontalAlign}`;
+    horizontalAlign?: `${UDExTableCellHorizontalAlign}`;
 
   /**
    * Defines the content of the component.

package/src/Tag.ts

@@ -8,7 +8,7 @@ import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delega
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import IconPlacement from "./types/IconPlacement.js";
+import UDExIconPlacement from "./types/IconPlacement.js";
 
 import TagTemplate from "./generated/templates/TagTemplate.lit.js";
 
@@ -133,7 +133,7 @@ class UDExTag extends UI5Element {
   * @public
   */
   @property()
-    iconPlacement : `${IconPlacement}` = IconPlacement.End;
+    iconPlacement : `${UDExIconPlacement}` = UDExIconPlacement.End;
 
   /**
    * Defines if tag is in readnly state
@@ -283,11 +283,11 @@ class UDExTag extends UI5Element {
   }
 
   get startIcon(): boolean {
-    return this.hasIcon && this.iconPlacement === IconPlacement.Start;
+    return this.hasIcon && this.iconPlacement === UDExIconPlacement.Start;
   }
 
   get endIcon(): boolean {
-    return this.hasIcon && this.iconPlacement === IconPlacement.End;
+    return this.hasIcon && this.iconPlacement === UDExIconPlacement.End;
   }
 
   get _tabIndex(): number {