@sapudex/web-components 2.0.0 → 2.1.0

package/src/MastheadShell.ts

@@ -8,16 +8,15 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import {
-  isLeft, isRight, isSpace, isEnter,
+  isLeft, isRight, isSpace, isEnter, isEscape,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/menu2.js";
 import "@ui5/webcomponents-icons/dist/search.js";
-import "@ui5/webcomponents-icons/dist/cart.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { MAIN_LINKS } from "./generated/i18n/i18n-defaults.js";
-import UDExMastheadItem from "./MastheadItem.js";
+import UDExMastheadItem, { UDExMastheadDropdownItemAction } from "./MastheadItem.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExControlButton from "./ControlButton.js";
 import type UDExSearch from "./Search.js";
@@ -91,6 +90,27 @@ type UDExMastheadShellBaseEventDetail = {
  */
 @event("search-click", { bubbles: true })
 
+/**
+ * Fired event when the user clicks the search close button.
+ *
+ * @public
+ */
+@event("search-close-click", { bubbles: true })
+
+/**
+ * Fired event when the search panel is opened.
+ *
+ * @public
+ */
+@event("search-opened", { bubbles: true })
+
+/**
+ * Fired event when the search panel is closed.
+ *
+ * @public
+ */
+@event("search-closed", { bubbles: true })
+
 /**
  * Fired event when the user clicks the cart button trigger.
  *
@@ -98,6 +118,13 @@ type UDExMastheadShellBaseEventDetail = {
  */
 @event("cart-click", { bubbles: true })
 
+/**
+ * Fired event when the user clicks the support button trigger.
+ *
+ * @public
+ */
+@event("support-click", { bubbles: true })
+
 /**
  * Fired event when the user clicks the profile button trigger.
  *
@@ -130,10 +157,14 @@ class UDExMastheadShell extends UI5Element {
   eventDetails!: {
     "mobile-menu-open": void,
     "mobile-menu-close": void,
-    "search-click": void,
-    "cart-click": void,
-    "profile-click": void,
-    "country-selector-click": void,
+    "search-opened": void,
+    "search-closed": void,
+    "cart-click": UDExMastheadShellBaseEventDetail,
+    "support-click": UDExMastheadShellBaseEventDetail,
+    "profile-click": UDExMastheadShellBaseEventDetail,
+    "country-selector-click": UDExMastheadShellBaseEventDetail,
+    "search-click": UDExMastheadShellBaseEventDetail,
+    "search-close-click": UDExMastheadShellBaseEventDetail,
     "logo-click": UDExMastheadShellBaseEventDetail,
     "site-label-click": UDExMastheadShellBaseEventDetail,
   };
@@ -195,6 +226,14 @@ class UDExMastheadShell extends UI5Element {
   @slot({ type: HTMLElement })
     profile!: Array<UDExMastheadItem>;
 
+  /**
+   * Slot for support
+   *
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    support!: Array<UDExMastheadItem>;
+
   /**
    * Defines URL to homepage. It will be used as a link on a logo and a site label
    *
@@ -353,8 +392,6 @@ class UDExMastheadShell extends UI5Element {
     this._searchOpener = this.searchOpener;
     this._mobileMenu = this.mastheadMobileMenu;
 
-    this.handleOutsideClick();
-
     if (this._isSearchOpened) {
       this.focusSearchInput();
     }
@@ -383,6 +420,7 @@ class UDExMastheadShell extends UI5Element {
 
     if (this._shouldHandleResize && this._isMobileMenuOpen) {
       this.closeMobileMenu();
+      this.resetSelectedItems();
       return;
     }
 
@@ -412,6 +450,19 @@ class UDExMastheadShell extends UI5Element {
     this.handleRightArrow(e);
   }
 
+  handleSearchKeyDown(e: CustomEvent): void {
+    e.stopPropagation();
+    const keyEvent = e.detail.e as KeyboardEvent;
+
+    if (isEscape(keyEvent)) {
+      if (this.showSearchByDefault && this.isAtLeastBreakpointSizeM) {
+        return;
+      }
+      this.closeSearch();
+      this.focusSearchBtn();
+    }
+  }
+
   handleLeftArrow(e: KeyboardEvent): void {
     if (isLeft(e)) {
       const currentItem = e.target as UDExMastheadItem;
@@ -444,25 +495,30 @@ class UDExMastheadShell extends UI5Element {
     this.fireDecoratorEvent("site-label-click", { originalEvent: e });
   }
 
-  handleSearchClick(e: CustomEvent): void {
+  handleSearchClick(e: PointerEvent): void {
     e.stopPropagation();
+    this.fireDecoratorEvent("search-click", { originalEvent: e });
     this.openSearch();
-    this.fireEvent("search-click");
   }
 
-  handleCartClick(e: CustomEvent): void {
+  handleCartClick(e: PointerEvent): void {
+    e.stopPropagation();
+    this.fireDecoratorEvent("cart-click", { originalEvent: e });
+  }
+
+  handleProfileClick(e: PointerEvent): void {
     e.stopPropagation();
-    this.fireDecoratorEvent("cart-click");
+    this.fireDecoratorEvent("profile-click", { originalEvent: e });
   }
 
-  handleProfileClick(e: CustomEvent): void {
+  handleSupportClick(e: PointerEvent): void {
     e.stopPropagation();
-    this.fireDecoratorEvent("profile-click");
+    this.fireDecoratorEvent("support-click", { originalEvent: e });
   }
 
-  handleCountrySelectorClick(e: CustomEvent): void {
+  handleCountrySelectorClick(e: PointerEvent): void {
     e.stopPropagation();
-    this.fireDecoratorEvent("country-selector-click");
+    this.fireDecoratorEvent("country-selector-click", { originalEvent: e });
   }
 
   handleOpenMobileMenu(): void {
@@ -481,9 +537,10 @@ class UDExMastheadShell extends UI5Element {
     this.fireDecoratorEvent("mobile-menu-open");
   }
 
-  handleCloseSearch(): void {
-    this.closeSearch();
+  handleCloseSearch(e: PointerEvent): void {
     this._closeBtnClicked = true;
+    this.fireDecoratorEvent("search-close-click", { originalEvent: e });
+    this.closeSearch();
   }
 
   handleEnterAndSpaceOnCloseBtn(e: KeyboardEvent): void {
@@ -494,17 +551,6 @@ class UDExMastheadShell extends UI5Element {
     }
   }
 
-  handleOutsideClick(): void {
-    document.addEventListener("click", (e: MouseEvent) => {
-      const el = e.target as UDExMastheadItem;
-      const isMobile = window.innerWidth < 1280 || this._isMobileMode;
-      const isDropdownSlot = el.getAttribute("slot") === "dropdown";
-      if (!isDropdownSlot && !el.isMenuItem && !isMobile) {
-        this.resetSelectedItems();
-      }
-    });
-  }
-
   focusSearchInput(): void {
     const searchSlot = this.querySelector<UDExSearch>("[udex-search]");
     if (searchSlot) {
@@ -530,7 +576,10 @@ class UDExMastheadShell extends UI5Element {
 
   resetSelectedItems(clickedId?: string): void {
     this.getSelectedItems().forEach(item => {
-      if (item._id !== clickedId) {
+      if (item._id !== clickedId && item.selected) {
+        if (item.hasDropdownSlot) {
+          item.fireDropdownCloseEvent(item.eventItemTitle, UDExMastheadDropdownItemAction.ClickOutside);
+        }
         item.selected = false;
       }
     });
@@ -559,6 +608,7 @@ class UDExMastheadShell extends UI5Element {
       ...this.menuItems,
       ...this.exploreSAP,
       ...this.cart,
+      ...this.support,
       ...this.profile,
       ...this.countrySelector,
       ...(this.mobileBtn && this.closeBtn ? [this.mobileBtn, this.closeBtn] : []),
@@ -676,6 +726,7 @@ class UDExMastheadShell extends UI5Element {
    */
   closeSearch(): void {
     this._isSearchOpened = false;
+    this.fireDecoratorEvent("search-closed");
   }
 
   /**
@@ -686,7 +737,7 @@ class UDExMastheadShell extends UI5Element {
     const shouldPreventOpeningSearch = this._isSearchOpened
       || (this.isBreakpointSizeM && !this.showSearchByDefault)
       || this._isMobileMode
-      || (this.IsAtLeastBreakpointSizeM && this.showSearchByDefault);
+      || (this.isAtLeastBreakpointSizeM && this.showSearchByDefault);
 
     if (shouldPreventOpeningSearch) {
       return;
@@ -698,6 +749,8 @@ class UDExMastheadShell extends UI5Element {
     if (this._searchOpener) {
       this._searchOpener.selected = false;
     }
+
+    this.fireDecoratorEvent("search-opened");
   }
 
   /**
@@ -706,7 +759,7 @@ class UDExMastheadShell extends UI5Element {
    */
   openMobileMenu(): void {
     if (!this._isMobileMenuOpen && (this._isMobileMode || this.isBreakpointSizeM)) {
-      (this.mobileBtn as UDExMastheadItem).handleSelectedChange();
+      this.mobileBtn?.handleSelectedChange();
       this.handleOpenMobileMenu();
     }
   }
@@ -720,15 +773,15 @@ class UDExMastheadShell extends UI5Element {
       return;
     }
 
+    (this.mobileBtn as UDExMastheadItem).selected = false;
     this._isMobileMenuOpen = false;
-    this.resetSelectedItems();
     this._mobileMenu?.showFirstLevelMenu();
 
     if (this.bodyOverflow) {
       this.removeOverflowBody();
     }
 
-    this.fireEvent("mobile-menu-close");
+    this.fireDecoratorEvent("mobile-menu-close");
   }
 
   get slottedItems(): (MastheadSlottedItem)[] {
@@ -736,6 +789,7 @@ class UDExMastheadShell extends UI5Element {
       this.profileItem,
       this.profileMenu,
       this.cartItem,
+      this.supportItem,
       this.profileMenu,
       this.profileMenuLinks,
       this.countrySelectorItem,
@@ -775,6 +829,10 @@ class UDExMastheadShell extends UI5Element {
     return this.getSlottedNodes<UDExMastheadItem>("cart")[0];
   }
 
+  get supportItem(): MastheadItemType {
+    return this.getSlottedNodes<UDExMastheadItem>("support")[0];
+  }
+
   get profileMenu(): UDExMastheadProfileMenu {
     return this.querySelector("[udex-masthead-profile-menu]")!;
   }
@@ -807,6 +865,10 @@ class UDExMastheadShell extends UI5Element {
     return !!this.countrySelector.length;
   }
 
+  get hasSupport(): boolean {
+    return !!this.support.length;
+  }
+
   get hasMobileMenuButtons(): boolean {
     return !!this.mobileMenu.length;
   }
@@ -815,7 +877,7 @@ class UDExMastheadShell extends UI5Element {
     return BreakpointUtils.isAtMost("M");
   }
 
-  get IsAtLeastBreakpointSizeM(): boolean {
+  get isAtLeastBreakpointSizeM(): boolean {
     return BreakpointUtils.isAtLeast("M");
   }
 

package/src/SecondaryNavigation.ts

@@ -10,6 +10,7 @@ import {
   isEscape, isLeft, isRight, isDown,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type { UDExSecondaryNavigationItemClickEventDetail, UDExSecondaryNavigationItemSubItemClickEventDetail } from "./SecondaryNavigationItem.js";
 import UDExSecondaryNavigationItem from "./SecondaryNavigationItem.js";
 import type UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
 import type { NavItem } from "./SecondaryNavigationItemBase.js";
@@ -25,7 +26,7 @@ import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.j
 const canvasContentFont: string = "16px / 17.6px '72 Brand Variable'";
 const rootClass = "udex-secondary-navigation__root";
 
-type UDExSecondaryNavigationItemClickEventDetail = {
+type UDExSecondaryNavigationClickEventDetail = {
   originalEvent: Event,
   clickedItem: NavItem;
   clickedIndex: number;
@@ -66,7 +67,7 @@ type UDExSecondaryNavigationItemClickEventDetail = {
 
 class UDExSecondaryNavigation extends UI5Element {
   eventDetails!: {
-    "item-click": UDExSecondaryNavigationItemClickEventDetail,
+    "item-click": UDExSecondaryNavigationClickEventDetail,
   };
   /**
    * Defines an aria label for the mobile menu opener
@@ -234,7 +235,7 @@ class UDExSecondaryNavigation extends UI5Element {
       return item.closeDropdown();
     }
     if (isDown(e) && item.hasNestedItems) {
-      item.openDropdown();
+      item.openDropdown(e);
     }
   }
 
@@ -282,13 +283,14 @@ class UDExSecondaryNavigation extends UI5Element {
     return this.domNavItems.indexOf(item);
   }
 
-  handleItemClick(e: CustomEvent): void {
-    const clickedItem = e.detail.item as UDExSecondaryNavigationItem;
+  handleItemClick(e: CustomEvent<UDExSecondaryNavigationItemClickEventDetail>): void {
+    const { index, item, originalEvent: actualOriginalEvent } = e.detail;
+    const clickedItem = item as UDExSecondaryNavigationItem;
     const {
       path, target, title, active, subItems, _id, mobileLinkTitle,
     } = clickedItem;
 
-    const prevented = !this.fireEventItemClick(e, {
+    const prevented = !this.fireEventItemClick(actualOriginalEvent, index, {
       path,
       target,
       title,
@@ -310,10 +312,11 @@ class UDExSecondaryNavigation extends UI5Element {
     }
   }
 
-  handleSubItemClick(e: CustomEvent): void {
+  handleSubItemClick(e: CustomEvent<UDExSecondaryNavigationItemSubItemClickEventDetail>): void {
+    const { originalEvent: actualOriginalEvent, index } = e.detail;
     const item = e.detail.item as UDExSecondaryNavigationSubItem;
     const { items } = item as NavItem;
-    const prevented = !this.fireEventItemClick(e, item);
+    const prevented = !this.fireEventItemClick(actualOriginalEvent, index, item);
 
     if (prevented) {
       e.preventDefault();
@@ -331,7 +334,8 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   fireEventItemClick(
-    e: CustomEvent,
+    e: PointerEvent | KeyboardEvent,
+    clickedIndex: number,
     {
       items, target, path, title, active, mobileLinkTitle,
     }: NavItem,
@@ -346,7 +350,7 @@ class UDExSecondaryNavigation extends UI5Element {
         target,
         title,
       },
-      clickedIndex: e.detail.index,
+      clickedIndex,
     });
   }
 

package/src/SecondaryNavigationItem.hbs

@@ -48,7 +48,7 @@
                     <li role="none">
                         <udex-secondary-navigation-sub-item
                             index="{{@index}}"
-                            @ui5-sub-item-click="{{../onSubItemClick}}"
+                            @ui5-sub-item-click="{{../handleSubItemClick}}"
                             @ui5-back-item-click="{{../onBackClick}}"
                             is-back="{{this.isBack}}"
                             label="{{this.title}}"

package/src/SecondaryNavigationItem.ts

@@ -30,14 +30,16 @@ import SecondaryNavigationItemCss from "./generated/themes/SecondaryNavigationIt
 
 export const menuItemRole: string = "menuitem";
 
-type UDExSecondaryNavigationItemClickEventDetail = {
+export type UDExSecondaryNavigationItemClickEventDetail = {
   item: HTMLElement,
   index: number,
+  originalEvent: PointerEvent | KeyboardEvent
 };
 
-type UDExSecondaryNavigationItemSubItemClickEventDetail = {
-  item: object,
+export type UDExSecondaryNavigationItemSubItemClickEventDetail = {
+  item: NavItem,
   index: number,
+  originalEvent: PointerEvent
 }
 
 /**
@@ -72,7 +74,7 @@ type UDExSecondaryNavigationItemSubItemClickEventDetail = {
  * @allowPreventDefault
  * @public
  */
-@event("nav-item-click", { bubbles: true })
+@event("nav-item-click", { bubbles: true, cancelable: true })
 
 /**
  * Fires when dropdown item is clicked
@@ -80,7 +82,7 @@ type UDExSecondaryNavigationItemSubItemClickEventDetail = {
  * @allowPreventDefault
  * @public
  */
-@event("sub-item-click", { bubbles: true })
+@event("sub-item-click", { bubbles: true, cancelable: true })
 
 class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   eventDetails!: {
@@ -178,7 +180,8 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._subTitle = this.subActiveItemTitle || this._subTitle;
   }
 
-  onSubItemClick(e: Event): void {
+  handleSubItemClick(e: CustomEvent | KeyboardEvent): void {
+    const { originalEvent } = e.detail;
     const { index } = e.target as UDExSecondaryNavigationSubItem;
     const clickedItem = this._processedItems[index];
 
@@ -188,24 +191,21 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
       this.onShouldFocusFirstSubItem();
     }
 
-    this.fireDecoratorEvent("sub-item-click", {
-      item: clickedItem,
-      index,
-    });
+    this.fireSubItemClickEvent(originalEvent as PointerEvent, clickedItem, index);
   }
 
   onBackClick(): void {
     this.setPrevNestedItems();
   }
 
-  openDropdown(): void {
+  openDropdown(e: PointerEvent | KeyboardEvent): void {
     if (this.hasNestedItems) {
       this.setDropdownItems();
       this.isOpen = !this.isOpen;
       this.onShouldFocusFirstSubItem();
     }
 
-    this.fireNavItemClickEvent();
+    this.fireNavItemClickEvent(e);
   }
 
   closeDropdown(): void {
@@ -214,7 +214,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
 
   handleItemLinkKeyDown(e: KeyboardEvent): void {
     if (isSpace(e)) {
-      this.fireNavItemClickEvent();
+      this.fireNavItemClickEvent(e);
     }
   }
 
@@ -303,7 +303,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   handleRightArrow(e: KeyboardEvent): void {
     const { hasItems, isBack, index } = e.target as UDExSecondaryNavigationSubItem;
     if (hasItems && !isBack) {
-      this.onSubItemClick(e);
+      this.handleSubItemClick(e);
       this.unsetTabIndex(this.domNavItems[index]);
     }
   }
@@ -316,7 +316,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
       return;
     }
 
-    this.onSubItemClick(e);
+    this.handleSubItemClick(e);
 
     if (hasItems) {
       this.onShouldFocusFirstSubItem();
@@ -331,10 +331,19 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this.focus();
   }
 
-  fireNavItemClickEvent(): void {
+  fireNavItemClickEvent(e: PointerEvent | KeyboardEvent): void {
     this.fireDecoratorEvent("nav-item-click", {
       item: this,
       index: this.index,
+      originalEvent: e,
+    });
+  }
+
+  fireSubItemClickEvent(e: PointerEvent, clickedItem: NavItem, index: number): void {
+    this.fireDecoratorEvent("sub-item-click", {
+      item: clickedItem,
+      index,
+      originalEvent: e,
     });
   }
 

package/src/SecondaryNavigationSubItem.ts

@@ -15,8 +15,13 @@ import SecondaryNavigationSubItemTemplate from "./generated/templates/SecondaryN
 // Styles
 import SecondaryNavigationSubItemCss from "./generated/themes/SecondaryNavigationSubItem.css.js";
 
-type UDExSecondaryNavigationSubItemClickEventDetail = {
+export type UDExSecondaryNavigationSubItemClickEventDetail = {
   item: UDExSecondaryNavigationSubItem,
+  originalEvent: PointerEvent
+}
+
+export type UDExSecondaryNavigationSubItemBackClickEventDetail = {
+  originalEvent: PointerEvent
 }
 
 /**
@@ -51,7 +56,7 @@ type UDExSecondaryNavigationSubItemClickEventDetail = {
  * @allowPreventDefault
  * @public
  */
-@event("sub-item-click", { bubbles: true })
+@event("sub-item-click", { bubbles: true, cancelable: true })
 
 /**
  * Fires when back item is clicked
@@ -59,12 +64,12 @@ type UDExSecondaryNavigationSubItemClickEventDetail = {
  * @allowPreventDefault
  * @public
  */
-@event("back-item-click", { bubbles: true })
+@event("back-item-click", { bubbles: true, cancelable: true })
 
 class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
   eventDetails!: {
     "sub-item-click": UDExSecondaryNavigationSubItemClickEventDetail,
-    "back-item-click": void,
+    "back-item-click": UDExSecondaryNavigationSubItemBackClickEventDetail,
   };
   /**
    * Defines back item.
@@ -90,14 +95,15 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  onItemClick(): void {
+  onItemClick(e: PointerEvent): void {
     this.fireDecoratorEvent("sub-item-click", {
       item: this,
+      originalEvent: e,
     });
   }
 
-  onBackItemClick(): void {
-    this.fireDecoratorEvent("back-item-click");
+  onBackItemClick(e: PointerEvent): void {
+    this.fireDecoratorEvent("back-item-click", { originalEvent: e });
   }
 
   get hasItems(): boolean {

package/src/Table.ts

@@ -98,8 +98,8 @@ class UDExTable extends UI5Element {
    * @default false
    * @public
    */
-  @property({ type: String })
-    loading!: string;
+  @property({ type: Boolean })
+    loading!: boolean;
 
   /**
    * Defines the delay in milliseconds, after which the loading indicator will show up for this component.

package/src/Upload.hbs

@@ -6,11 +6,11 @@
         <p class="udex-upload__additional-text">{{additionalText}}</p>
     {{/if}}
     <div class="udex-upload__upload-button-container">
-        <ui5-file-uploader id="fileUploader" hide-input accept="{{accept}}" ?multiple="{{multiple}}" @change="{{handleUploadFile}}" @click="{{handleUploadClick}}">
-            <udex-button design="Secondary" aria-label="{{uploadButtonAriaLabel}}" size="{{_buttonSize}}">{{uploadButtonText}}</udex-button>
+        <ui5-file-uploader ?disabled="{{disabled}}" id="fileUploader" hide-input accept="{{accept}}" ?multiple="{{multiple}}" @change="{{handleUploadFile}}" @click="{{handleUploadClick}}">
+            <udex-button ?disabled="{{disabled}}" aria-disabled="{{disabled}}" design="Secondary" aria-label="{{uploadButtonAriaLabel}}" size="{{_buttonSize}}">{{uploadButtonText}}</udex-button>
         </ui5-file-uploader>
-        {{#if _filesFull}}
-            <p class="udex-upload__error">{{errorText}}</p>
+        {{#if showSupportingText}}
+            <p class="{{supportingTextClasses}}">{{supportingText}}</p>
         {{/if}}
     </div>
     <div class="udex-upload__files-wrapper">

package/src/Upload.ts

@@ -114,12 +114,14 @@ class UDExUpload extends UI5Element {
     uploadTitle!: string;
 
   /**
-   * Defines the error message shown when more than one file is uploaded with multiple set to false.
+   * Defines an optional upporting message shown in 2 cases, both in single uplaod mode.
+   * 1) When more than one file is uploaded and the button for uploading is clicked.
+   * 2) When the button for uploading is disabled and a file has already been uploaded.
    *
    * @public
    */
   @property({ type: String })
-    errorText!: string;
+    supportingText!: string;
 
   /**
    * Defines if uploader is required.
@@ -127,7 +129,15 @@ class UDExUpload extends UI5Element {
    * @public
    */
   @property({ type: Boolean })
-    required!: boolean;
+    required: boolean = false;
+
+  /**
+   * Defines if the button for uploading is disabled.
+   *
+   * @public
+   */
+  @property({ type: Boolean })
+    disabled: boolean = false;
 
   /**
    * Defines if uploading multiple files is allowed.
@@ -320,6 +330,17 @@ class UDExUpload extends UI5Element {
     return duplicateFiles;
   }
 
+  get showSupportingText(): boolean {
+    return this.disabled || this._filesFull;
+  }
+
+  get supportingTextClasses(): string {
+    if (this.disabled && !!this.supportingText) {
+      return "udex-upload__supporting-text";
+    }
+    return "udex-upload__supporting-error-text";
+  }
+
   get fileUploader(): HTMLInputElement {
     const uploader = this.shadowRoot!.querySelector<FileUploader>("[ui5-file-uploader]")!;
     return uploader.shadowRoot!.querySelector("input")!;