@sapudex/web-components 2.54.0 → 2.56.0

package/src/PhoneNumberFieldTemplate.tsx

@@ -0,0 +1,128 @@
+import type UDExPhoneNumberField from "./PhoneNumberField.js";
+import UDExDropdown from "./Dropdown.js";
+import UDExList from "./List.js";
+import UDExListItem from "./ListItem.js";
+import UDExButton from "./Button.js";
+import UDExStatusMessage from "./StatusMessage.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+
+export default function PhoneNumberFieldTemplate(this: UDExPhoneNumberField) {
+  return (
+    <>
+      <div
+        class="udex-phone-number-field"
+        onui5-selection-change={this.handleSelect}>
+        {this.label && (
+          <label
+            id="udex-phone-number-field__label"
+            class="udex-phone-number-field__label"
+            htmlFor={`${this._id}-phone`}>
+            {this.label}
+            {this.required && " *"}
+          </label>
+        )}
+        <UDExDropdown
+          class="udex-phone-number-field__dropdown"
+          opener={`udex-${this._id}-phone-number__opener`}
+          id={`${this._id}_dropdown-menu`}
+          onui5-before-open={this.dropdownBeforeOpen}
+          onui5-before-close={this.dropdownBeforeClose}
+          horizontalAlign="Start"
+          height={this.height}>
+          <UDExList>
+            {this.countriesList.map(country => (
+              <UDExListItem
+                id={country.iso}
+                selected={country.selected}>
+                <div class="udex-phone-number-field__dropdown-list-item">
+                  <div
+                    class="udex-phone-number-field__flag"
+                    style={{ backgroundPositionX: country.flagX, backgroundPositionY: country.flagY }}
+                  ></div>
+                  <span class="udex-phone-number-field__country-name">
+                    {country.countryName}
+                    {country.localName && ` (${country.localName})`}
+                    {" "}{country.phonePrefix}
+                  </span>
+                </div>
+              </UDExListItem>
+            ))}
+          </UDExList>
+        </UDExDropdown>
+        <div class="udex-phone-number-field__input-wrapper">
+          {!this.displayonly && (
+            <UDExButton
+              id={`udex-${this._id}-phone-number__opener`}
+              class="udex-phone-number-field__open-button"
+              role="combobox"
+              aria-haspopup="true"
+              design={UDExButtonDesign.Tertiary}
+              size={UDExButtonSize.Large}
+              endIcon={this.buttonIcon}
+              disabled={this.isButtonDisabled}
+              accessibleNameRef={`${this._id}-countrySelectorAriaLabel ${this.ariaDescribedById}`}
+              aria-label={this.countrySelectorAriaLabel}
+              aria-expanded={this._dropdownExpanded}
+              aria-controls={`${this._id}_dropdown-menu`}
+              onClick={this.openDropdown}>
+              <div class="udex-phone-number-field__open-button-text">
+                {this.selectedCountryName} {this.selectedPhonePrefix}
+              </div>
+              <div class="udex-phone-number-field__button-content">
+                <span
+                  class="udex-phone-number-field__flag"
+                  aria-label={this.selectedCountryName}
+                  style={{ backgroundPositionX: this.selectedFlagBackgroundPosition.x, backgroundPositionY: this.selectedFlagBackgroundPosition.y }}
+                />
+              </div>
+            </UDExButton>
+          )}
+          <input
+            id={`${this._id}-phone`}
+            class="udex-phone-number-field__input"
+            type="tel"
+            value={this.value}
+            placeholder={this.phoneFormat}
+            maxLength={this.maxlength}
+            disabled={this.disabled}
+            readonly={this.isInputReadonly}
+            required={this.required}
+            autoComplete="tel"
+            aria-label={this.accessibleName}
+            aria-labelledby={this.accessibleName}
+            aria-required={this.required}
+            aria-readonly={this.isInputReadonly}
+            aria-disabled={this.disabled}
+            aria-invalid={(this.ariaInvalid ?? undefined) as "true" | undefined}
+            aria-describedby={this.ariaDescribedById}
+            onInput={this.handleInput}
+            onClick={this.handleClick}
+            onFocus={this.handleFocus}
+            onBlur={this.handleBlur}
+            onKeyDown={this.handleKeyDown}
+            onKeyUp={this.handleKeyUp}
+            tabIndex={this.inputTabIndex}
+          />
+        </div>
+      </div>
+      {this.supportingText && (
+        <UDExStatusMessage
+          disabled={this.disabled}
+          supportingText={this.supportingText}
+          valueState={this.valueState}>
+        </UDExStatusMessage>
+      )}
+      {this.supportingText && (
+        <span id={`${this._id}-supportingTextDesc`} class="hidden-text">{this.supportingText}</span>
+      )}
+      {this.hasValueState && (
+        <span id={`${this._id}-valueStateDesc`} class="hidden-text">{this.valueStateText}</span>
+      )}
+      {this.readonly && (
+        <span id={`${this._id}-stateReadOnlyDesc`} class="hidden-text">{this.readOnlyStateText}</span>
+      )}
+      <span id={`${this._id}-countrySelectorAriaLabel`} class="hidden-text">{this.countrySelectorAriaLabel}</span>
+    </>
+  );
+}

package/src/Search.ts

@@ -188,6 +188,18 @@ type UDExSearchKeydownEventDetail = {
  * @param {KeyboardEvent} e The keyboard event object
  */
 @event("search-keydown", { bubbles: true })
+/**
+ * Fired when the suggestions popover opens.
+ *
+ * @public
+ */
+@event("suggestion-popover-opened", { bubbles: true })
+/**
+ * Fired when the suggestions popover closes.
+ *
+ * @public
+ */
+@event("suggestion-popover-closed", { bubbles: true })
 class UDExSearch extends UI5Element {
   eventDetails!: {
     "submit-search-value": UDExSearchBaseEventDetail,
@@ -196,7 +208,8 @@ class UDExSearch extends UI5Element {
     "search-keydown": UDExSearchKeydownEventDetail,
     "dropdown-item-click": UDExSearchBaseEventDetail,
     "prefix-item-click": UDExSearchPrefixItemClickEventDetail,
-
+    "suggestion-popover-opened": void,
+    "suggestion-popover-closed": void,
   };
   _labelActiveClassName = "udex-search__label--active";
   _labelAnimationClassName = "udex-search__label--animation-enabled";
@@ -856,6 +869,7 @@ class UDExSearch extends UI5Element {
         retryUntilSuccessful(() => this.Suggestion, this.retryDelay, this.maxRetryAttempts, this.unsuccessfulRetryMessage)
           .then(() => {
             this.Suggestion!.open();
+            this.fireDecoratorEvent("suggestion-popover-opened");
           })
           .catch(error => {
             console.warn(error.message);
@@ -863,6 +877,7 @@ class UDExSearch extends UI5Element {
       } else {
         this.open = true;
         this.Suggestion.open();
+        this.fireDecoratorEvent("suggestion-popover-opened");
       }
       this.handleAriaExpanded();
     }
@@ -873,6 +888,7 @@ class UDExSearch extends UI5Element {
       this.Suggestion!.close();
       this.handleAriaExpanded();
       this.open = false;
+      this.fireDecoratorEvent("suggestion-popover-closed");
     }
   }
 
@@ -951,6 +967,9 @@ class UDExSearch extends UI5Element {
 
         if (mutation.attributeName === "open" && newValue !== oldValue && !ingoreOpenState) {
           this.open = popover?.open || false;
+          if (!popover?.open) {
+            this.fireDecoratorEvent("suggestion-popover-closed");
+          }
         }
       });
     });
@@ -1053,6 +1072,7 @@ class UDExSearch extends UI5Element {
     if (isEscape(e)) {
       if (this.open) {
         this.Suggestion?.onEscape(e);
+        this.fireDecoratorEvent("suggestion-popover-closed");
       }
     }
   }

package/src/SearchableListBase.ts

@@ -345,6 +345,14 @@ class UDExSearchableListBase extends UI5Element {
     this.fireSelectionChange(id);
   }
 
+  handleAccordionIconClick(e: CustomEvent<{ collapsed: boolean }>): void {
+    const target = e.target as HTMLElement;
+    const originalItem = this._validItems.find(item => item._id === target.id) as (UDExListGroupHeaderBase & { setCollapsedItems?(): void }) | undefined;
+    if (!originalItem) { return; }
+    originalItem.collapsed = e.detail.collapsed;
+    originalItem.setCollapsedItems?.();
+  }
+
   onSelectAllHeaderPress(e:CustomEvent) {
     const item = e.detail.item as UDExListItemBase;
     const id = this.getDataTokenId(item);
@@ -570,20 +578,67 @@ class UDExSearchableListBase extends UI5Element {
     this.getPopoverPart(UDExPopoverPart.Content)?.scrollTo({ top: 0 });
   }
 
+  _expandCollapsedGroupsWithSelection() {
+    this._validItems
+      .filter(item => item.isGroup)
+      .forEach(group => {
+        const header = group as UDExListGroupHeaderBase & { setCollapsedItems?(): void };
+        if (!header.collapsible) { return; }
+        // The rendered element may have been manually collapsed by the user, which
+        // only updates the rendered copy. handleAccordionIconClick syncs the original
+        // going forward, but we also check the rendered element as a safety net
+        // (e.g. if the event wasn't caught, or for the current open cycle).
+        const rendered = this.shadowRoot?.querySelector<HTMLElement & { collapsed?: boolean; setCollapsedItems?(): void }>(`[udex-list-group-header][id="${header._id}"]`);
+        const isCollapsed = header.collapsed || !!rendered?.hasAttribute("collapsed");
+        if (!isCollapsed) { return; }
+        const hasSelectedChild = (header.items as UDExListItemBase[]).some(child => child.selected);
+        if (hasSelectedChild) {
+          header.collapsed = false;
+          header.setCollapsedItems?.();
+          // Also reset the rendered element directly so it takes effect
+          // immediately, regardless of whether a template re-render is pending.
+          if (rendered) {
+            rendered.collapsed = false;
+            rendered.setCollapsedItems?.();
+          }
+        }
+      });
+  }
+
   _dropdownScrollToSelectedItem() {
     const content = this.getPopoverPart(UDExPopoverPart.Content);
+    if (!content) { return; }
     const activeItem = this.activeItem;
-    if (!content || !activeItem) { return; }
-    const itemRect = activeItem.getBoundingClientRect();
-    const contentRect = content.getBoundingClientRect();
-    content.scrollTop += itemRect.top - contentRect.top + itemRect.height / 2 - content.clientHeight / 2;
+    if (!activeItem) {
+      this._dropdownScrollToTop();
+      return;
+    }
+    // Refresh max-height on expanded collapsible groups before measuring.
+    // setContentHeight() may have run while the popup was closed (scrollHeight=0
+    // for hidden elements), leaving --udex-list-content-max-height at 0px.
+    // With that stale 0px value, getBoundingClientRect on slotted items inside
+    // the overflow:hidden container returns the container top rather than the
+    // item's natural position, producing an incorrect scroll delta.
+    // removeProperty → setContentHeight() avoids the CSS transition because
+    // browsers do not interpolate to/from the `none` fallback value.
+    this.shadowRoot?.querySelectorAll<HTMLElement & { setContentHeight(): void }>("[udex-list-group-header]")
+      .forEach(header => {
+        if (header.hasAttribute("collapsible") && !header.hasAttribute("collapsed")) {
+          header.style.removeProperty("--udex-list-content-max-height");
+          header.setContentHeight();
+        }
+      });
+    // Reset to top before measuring so getBoundingClientRect reads from a stable
+    // baseline regardless of the scroll state left by previous open/close cycles.
+    content.scrollTop = 0;
+    const delta = activeItem.getBoundingClientRect().top - content.getBoundingClientRect().top;
+    content.scrollTop = delta;
   }
 
   _handleDropdownScroll() {
-    if (this.modeMultiSelect) {
+    if (this.modeMultiSelect || !this.activeItem) {
       this._dropdownScrollToTop();
-    }
-    if (this.modeSingleSelect) {
+    } else if (this.modeSingleSelect) {
       this._dropdownScrollToSelectedItem();
     }
   }

package/src/SearchableListBaseTemplate.tsx

@@ -132,6 +132,7 @@ function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProc
       selected={item.selected}
       onFirstIconClick={this.fireFirstIconClickEvent}
       onSecondIconClick={this.fireSecondIconClickEvent}
+      onAccordionIconClick={this.handleAccordionIconClick}
       indeterminate={header.indeterminate}>
       {groupItems.map((child, i) =>
         renderListItem(child as UDExListItem, i, "none", childAccessibleRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent, this._activeDescendantMode, this.isTreeStructure, this.modeMultiSelect)

package/src/SelectBase.ts

@@ -781,28 +781,21 @@ class UDExSelectBase extends UDExSearchableListBase {
   }
 
   handleDropdownOpen() {
-    // Scroll to the previously selected/active item if there is one,
-    // otherwise scroll to top. Do NOT pre-activate any item — that is done
-    // by the first ArrowDown so that ArrowDown[1]=item[0], ArrowDown[2]=item[1].
-    if (this.activeItem) {
-      const items = this._list?.getKeyboardNavigationItems();
-      const active = items?.find(i => !i.isGroup && (i as any).selected);
-      if (active && this._list?._scrollIntoView) {
-        this._list.scrollToItem(active);
-      } else {
-        this._dropdownScrollToTop();
-      }
-    } else {
-      this._dropdownScrollToTop();
-    }
-
-    // Announce the visually focused item (fake focus outline on first item).
-    // Using polite politeness — it waits for the AT to finish announcing
-    // "expanded" before reading the item, so no timeout is needed.
-    // Clear first so the mutation fires even if the text is unchanged from
-    // the previous open, then populate after render completes.
+    // Clear first so the live-region mutation fires even if text is unchanged.
     this._liveRegionText = "";
-    renderFinished().then(() => this._announceCurrentOrFirst()).catch(() => {});
+    // Defer scroll and announcement until rendering settles.
+    // Calling _handleDropdownScroll synchronously causes getBoundingClientRect
+    // to read mid-transition positions (e.g. the max-height animation on
+    // collapsible group headers), producing an incorrect scroll offset.
+    // The expand step modifies reactive properties that trigger a new render,
+    // so a second renderFinished is needed before measuring scroll positions.
+    renderFinished().then(() => {
+      this._expandCollapsedGroupsWithSelection();
+      return renderFinished();
+    }).then(() => {
+      this._handleDropdownScroll();
+      this._announceCurrentOrFirst();
+    }).catch(() => {});
 
     this.fireEventDropdownOpen();
   }

package/src/SelectBox.ts

@@ -232,6 +232,40 @@ class UDExSelectBox extends UDExSelectBase {
     const isSearchInput = relatedTarget === this._search;
     const hasTags = this.tokenizer?.tokens.length > 0;
 
+    // When focus moves to the body div of a collapsible single-select group header
+    // (which is focusable via tabindex="0" but has no click→header-press wiring),
+    // set it as the active descendant and redirect DOM focus back to the input so
+    // the combobox pattern is preserved and subsequent arrow navigation works.
+    //
+    // The focusout handler sits on div.udex-text-field__input (SelectBox's shadow DOM).
+    // Shadow DOM retargeting means relatedTarget is either:
+    //   (a) the body div itself (.udex-list__group-content) — if caught at a lower boundary
+    //   (b) the UDExListGroupHeader HOST — the common case when the event bubbles to this div
+    const rtAsItem = relatedTarget as UDExListItemBase | null;
+    const isGroupHeaderBodyDiv = this._popover?.open
+      && !!relatedTarget?.classList.contains("udex-list__group-content");
+    const isGroupHeaderHost = this._popover?.open
+      && !!rtAsItem?.isGroup
+      && !!rtAsItem?.collapsible
+      && !rtAsItem?.modeMultiSelect;
+    if (isGroupHeaderBodyDiv || isGroupHeaderHost) {
+      const groupHeaderHost: UDExListItemBase | null = isGroupHeaderBodyDiv
+        ? ((relatedTarget.getRootNode() as ShadowRoot | null)?.host as UDExListItemBase | null)
+        : rtAsItem;
+      if (groupHeaderHost?.isGroup) {
+        const navItems = this._list?.getKeyboardNavigationItems();
+        const tokenId = this.getDataTokenId(groupHeaderHost);
+        const renderedItem = navItems?.find(
+          i => (i.getAttribute("data-token-id") ?? i._id) === tokenId,
+        );
+        if (renderedItem) {
+          this._setActiveDescendant(renderedItem);
+        }
+      }
+      (this._search as HTMLElement).focus();
+      return;
+    }
+
     if (!isInsideComponent && !isFooterElement && !isIconButton && !isSearchInput) {
       this.closeDropdown();
       this.resetSearchState();

package/src/SelectBoxTemplate.tsx

@@ -7,6 +7,7 @@ import UI5Popover from "@ui5/webcomponents/dist/Popover.js";
 import UI5PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
 import UI5PopoverHAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
 import { cleanLabel } from "./utils/listItemLabelUtils.js";
+import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
 
 export default function SelectBoxTemplate(this: UDExSelectBox) {
   return (
@@ -77,6 +78,7 @@ export default function SelectBoxTemplate(this: UDExSelectBox) {
             )}
             <UI5Popover
               id={this.popoverId}
+              accessibleRole={PopupAccessibleRole.None}
               allow-target-overlap={this.allowTargetOverlap}
               onKeyDown={this.handleKeyDownDropdown}
               {...({
@@ -104,7 +106,7 @@ export default function SelectBoxTemplate(this: UDExSelectBox) {
         </div>
         {this.supportingText && (
           <UDExStatusMessage
-            disabled={this.disabled ? "true" : undefined}
+            disabled={this.disabled}
             supporting-text={this.supportingText}
             value-state={this.valueState}>
           </UDExStatusMessage>

package/src/StatusMessage.ts

@@ -67,11 +67,12 @@ class UDExStatusMessage extends UI5Element {
   /**
    * Defines if component should have disabled styles.
    *
-   * @default ""
+   * @default false
    * @public
    */
-  @property({ type: String })
-    disabled!: string;
+  @property({ type: Boolean })
+    disabled!: boolean;
+
   /**
    * Defines the value state of the component.
    *

package/src/TextAreaTemplate.tsx

@@ -45,7 +45,7 @@ export default function TextAreaTemplate(this: TextArea) {
             supporting-text={this._supportingText}
             supporting-text-alignment="Right"
             value-state={this.valueState}
-            disabled={this.disabled ? "true" : undefined}>
+            disabled={this.disabled}>
           </UDExStatusMessage>
           <span id={`${this._id}-supportingTextDesc`} class={hiddenClass}>
             {this._supportingText}

package/src/TextFieldTemplate.tsx

@@ -70,7 +70,7 @@ export default function TextFieldTemplate(this: TextField) {
           <UDExStatusMessage
             supporting-text={this.supportingText}
             value-state={this.valueState}
-            disabled={this.disabled ? "true" : undefined}>
+            disabled={this.disabled}>
           </UDExStatusMessage>
           <span id={`${this._id}-supportingTextDesc`} class={hiddenClass}>
             {this.supportingText}

package/src/Upload.ts

@@ -1,29 +1,26 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { DefaultSlot } 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 { slot } from "@ui5/webcomponents-base/dist/decorators.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import FileUploader from "@ui5/webcomponents/dist/FileUploader.js";
+import type FileUploader from "@ui5/webcomponents/dist/FileUploader.js";
 import type { FileUploaderChangeEventDetail } from "@ui5/webcomponents/dist/FileUploader.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { UPLOAD_BUTTON_LABEL } from "./generated/i18n/i18n-defaults.js";
-import UDExButton from "./Button.js";
 import UDExButtonSize from "./types/ButtonSize.js";
-import UDExList from "./List.js";
 import UDExUploadItem from "./UploadItem.js";
-import UploadTemplate from "./generated/templates/UploadTemplate.lit.js";
+import UploadTemplate from "./UploadTemplate.js";
 import type FileData from "./types/FileData.js";
 import translate from "./utils/translate.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
 
 // Styles
 import UploadCss from "./generated/themes/Upload.css.js";
-import { BreakpointUtils } from "./utils/Breakpoints.js";
 
 const convertBytesToMegabytes = (bytes: number) => (bytes / 1024) / 1024;
 
@@ -58,10 +55,10 @@ type UDExUploadFileChangeEventDetail = {
  */
 @customElement({
   tag: "udex-upload",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: UploadCss,
   template: UploadTemplate,
-  dependencies: [FileUploader, UDExList, UDExButton, UDExUploadItem],
+  dependencies: [UDExUploadItem],
 })
 
 /**

package/src/UploadItem.ts

@@ -1,9 +1,9 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import { slot } from "@ui5/webcomponents-base/dist/decorators.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -12,11 +12,9 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { UDExTarget } from "./types/common.js";
 import { REMOVE_FILE_TEXT, TERMINATED_FILE_STATUS_TEXT, UPLOADING_FILE_STATUS_TEXT } from "./generated/i18n/i18n-defaults.js";
 import UDExListItem from "./ListItem.js";
-import UDExProgressBar from "./ProgressBar.js";
-import UDExLink from "./Link.js";
-import UDExButton from "./Button.js";
+import type UDExLink from "./Link.js";
 import UDExButtonSize from "./types/ButtonSize.js";
-import UploadItemTemplate from "./generated/templates/UploadItemTemplate.lit.js";
+import UploadItemTemplate from "./UploadItemTemplate.js";
 import translate from "./utils/translate.js";
 
 // Styles
@@ -41,15 +39,15 @@ const BreakpointSizeM: number = 1279;
  * <code>import "@sapudex/web-components/dist/UploadItem.js";</code>
  *
  * @constructor
- * @extends UDExListItemBase
+ * @extends UDExListItem
  * @public
  */
 @customElement({
   tag: "udex-upload-item",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: UploadItemCss,
   template: UploadItemTemplate,
-  dependencies: [UDExLink, UDExListItem, UDExProgressBar, UDExButton],
+  dependencies: [UDExListItem],
 })
 
 /**

package/src/UploadItemTemplate.tsx

@@ -0,0 +1,62 @@
+import type UploadItem from "./UploadItem.js";
+import UDExLink from "./Link.js";
+import UDExButton from "./Button.js";
+import UDExProgressBar from "./ProgressBar.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+
+export default function UploadItemTemplate(this: UploadItem) {
+  const rootClass = "udex-upload-item";
+
+  return (
+    <div className={`${rootClass}__wrapper`}>
+      <div className={`${rootClass}__info ${this.uploadItemClasses}`}>
+        <div>
+          {this.fileInteractive ? (
+            <UDExLink
+              href={this.fileLink}
+              target={this.fileTarget}>
+              {this.fileName}
+            </UDExLink>
+          ) : (
+            <p className={`${rootClass}__name`}>{this.fileName}</p>
+          )}
+          <div className={this.additionalInfoClasses}>
+            <slot></slot>
+          </div>
+        </div>
+        {this._breakpointM && deleteButton.call(this)}
+      </div>
+      <div className={`${rootClass}__progress-info-wrapper`}>
+        {this.showUploadProgress && (
+          <div className={`${rootClass}__progress-info`}>
+            <UDExProgressBar
+              role="progressbar"
+              aria-valuemin={0}
+              aria-valuemax={100}
+              aria-valuenow={this.uploadPercentage}
+              value={this.uploadPercentage}
+              value-state={this.uploadProgressState}
+              hide-value>
+            </UDExProgressBar>
+            <p className={`${rootClass}__progress-status`}>{this.uploadStatus}</p>
+          </div>
+        )}
+        {this._breakpointL && deleteButton.call(this)}
+      </div>
+    </div>
+  );
+}
+
+function deleteButton(this: UploadItem) {
+  return (
+    <UDExButton
+      accessible-name={this.removeButtonAccessibleName}
+      onKeyDown={this.handleButtonKeydown}
+      onClick={this.handleButtonClick}
+      size={this._buttonSize}
+      design={UDExButtonDesign.Tertiary}
+      icon={decline}>
+    </UDExButton>
+  );
+}

package/src/UploadTemplate.tsx

@@ -0,0 +1,53 @@
+import FileUploader from "@ui5/webcomponents/dist/FileUploader.js";
+import type Upload from "./Upload.js";
+import UDExButton from "./Button.js";
+import UDExList from "./List.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import { UDExListMode } from "./types/List.js";
+
+export default function UploadTemplate(this: Upload) {
+  const rootClass = "udex-upload";
+
+  return (
+    <div
+      className={`${rootClass}__wrapper`}
+      onui5-request-delete={this.handleRemoveFile}>
+      {this.uploadTitle && (
+        <h1 className={`${rootClass}__title`}>{this.uploadTitle}</h1>
+      )}
+      {this.additionalText && (
+        <p className={`${rootClass}__additional-text`}>{this.additionalText}</p>
+      )}
+      <div className={`${rootClass}__upload-button-container`}>
+        <FileUploader
+          id="fileUploader"
+          disabled={this.disabled}
+          accept={this.accept}
+          multiple={this.multiple}
+          onChange={this.handleUploadFile}
+          onClick={this.handleUploadClick}
+          hide-input>
+          <UDExButton
+            aria-label={this.uploadButtonAriaLabel}
+            disabled={this.disabled}
+            aria-disabled={this.disabled}
+            design={UDExButtonDesign.Secondary}
+            size={this._buttonSize}>
+            {this.uploadButtonText}
+          </UDExButton>
+        </FileUploader>
+        {this.showSupportingText && (
+          <p className={this.supportingTextClasses}>{this.supportingText}</p>
+        )}
+      </div>
+      <div className={`${rootClass}__files-wrapper`}>
+        <UDExList
+          mode={UDExListMode.MultiSelect}
+          aria-busy={this.listBusy}
+          onui5-selection-change={this.handleSelectionChange}>
+          <slot></slot>
+        </UDExList>
+      </div>
+    </div>
+  );
+}