@sapudex/web-components 2.55.0 → 2.56.0

package/src/MastheadShell.ts

@@ -29,6 +29,7 @@ import { BreakpointUtils } from "./utils/Breakpoints.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.lit.js";
 import translate from "./utils/translate.js";
+import ensureSearchBackdropStyles from "./utils/searchBackdrop.js";
 
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
@@ -550,11 +551,16 @@ class UDExMastheadShell extends UI5Element {
   _rootHolder!: HTMLElement | null | undefined;
   _shouldHandleResize!: boolean;
   _isVisible!: boolean;
+  _handleSuggestionOpenedBound!: () => void;
+  _handleSuggestionClosedBound!: () => void;
+  _bodyBackdropEl: HTMLElement | null = null;
 
   constructor() {
     super();
     this._handleResizeBound = this._handleResize.bind(this);
     this._handleWindowResizeBound = this._handleWindowResize.bind(this);
+    this._handleSuggestionOpenedBound = this._showSearchBackdrop.bind(this);
+    this._handleSuggestionClosedBound = this._hideSearchBackdrop.bind(this);
   }
 
   onBeforeRendering() {
@@ -585,6 +591,8 @@ class UDExMastheadShell extends UI5Element {
   onEnterDOM(): void {
     ResizeHandler.register(this, this._handleResizeBound);
     window.addEventListener("resize", this._handleWindowResizeBound);
+    this.addEventListener("suggestion-popover-opened", this._handleSuggestionOpenedBound);
+    this.addEventListener("suggestion-popover-closed", this._handleSuggestionClosedBound);
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
@@ -593,6 +601,10 @@ class UDExMastheadShell extends UI5Element {
   onExitDOM(): void {
     ResizeHandler.deregister(this, this._handleResizeBound);
     window.removeEventListener("resize", this._handleWindowResizeBound);
+    this.removeEventListener("suggestion-popover-opened", this._handleSuggestionOpenedBound);
+    this.removeEventListener("suggestion-popover-closed", this._handleSuggestionClosedBound);
+    this._bodyBackdropEl?.remove();
+    this._bodyBackdropEl = null;
   }
 
   _handleWindowResize(): void {
@@ -985,6 +997,38 @@ class UDExMastheadShell extends UI5Element {
     this.fireMastheadEvent("search-opened");
   }
 
+  private _getBackdropEl(): HTMLElement {
+    if (!this._bodyBackdropEl) {
+      ensureSearchBackdropStyles(this.ownerDocument);
+      const el = this.ownerDocument.createElement("div");
+      el.className = "udex-search-backdrop";
+      el.addEventListener("click", () => this.handleBackdropClick());
+      this.ownerDocument.body.appendChild(el);
+      this._bodyBackdropEl = el;
+    }
+    return this._bodyBackdropEl;
+  }
+
+  private _showSearchBackdrop(): void {
+    if (!this.showSearchByDefault && this.isMobileMenuMode) {
+      return;
+    }
+    const backdrop = this._getBackdropEl();
+    const top = this.getBoundingClientRect().bottom;
+    backdrop.style.top = `${top}px`;
+    backdrop.style.display = "block";
+  }
+
+  private _hideSearchBackdrop(): void {
+    if (this._bodyBackdropEl) {
+      this._bodyBackdropEl.style.display = "none";
+    }
+  }
+
+  handleBackdropClick(): void {
+    this._desktopSearch?.onClosePopover();
+  }
+
   /**
    * Open the mobile menu panel.
    * @public

package/src/PhoneNumberField.ts

@@ -1,34 +1,32 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import {
   COUNTRY_SELECT, READ_ONLY, VALUE_STATE_ERROR, VALUE_STATE_SUCCESS,
 } from "./generated/i18n/i18n-defaults.js";
 import type { Country } from "./data/CountryListISO3166.js";
 import { CountryListDB } from "./data/CountryListISO3166.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 type UDExDropdown from "./Dropdown.js";
+import type UDExList from "./List.js";
+import type UDExButton from "./Button.js";
 import translate from "./utils/translate.js";
 
 import "@ui5/webcomponents/dist/Icon.js";
 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 PhoneNumberFieldTemplate from "./PhoneNumberFieldTemplate.js";
 
 // Styles
 import PhoneNumberFieldCss from "./generated/themes/PhoneNumberField.css.js";
-import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 
 export interface ExtendedCountriesListPhoneNumberData extends Country {
   selected?: boolean;
@@ -66,16 +64,9 @@ const digitsLimit: number = 15;
  */
 @customElement({
   tag: "udex-phone-number-field",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: PhoneNumberFieldCss,
   template: PhoneNumberFieldTemplate,
-  dependencies: [
-    UDExDropdown,
-    UDExList,
-    UDExListItem,
-    UDExButton,
-    UDExStatusMessage,
-  ],
 })
 /**
    * Fired when the value of the component changes at each keystroke.
@@ -323,13 +314,22 @@ class UDExPhoneNumberField extends UI5Element {
   }
 
   onBeforeRendering() {
-    this.applyPlaceholder();
-
     if (this.blockedCountryCodes?.length) {
       const blockedCountryCodesArray = this.blockedCountryCodes.split(",").map(code => code.trim().toUpperCase());
       this.countriesList = this.countriesList
         .filter(country => !blockedCountryCodesArray?.includes(country.iso.toUpperCase()));
     }
+
+    if (this.value) {
+      if (this.selectedIso && !this.value.startsWith(this.selectedPhonePrefix)) {
+        this.selectedIso = "";
+      }
+      if (!this.selectedIso) {
+        this.autoSelectCountry(this.value);
+      }
+    }
+
+    this.applyPlaceholder();
   }
 
   onAfterRendering() {
@@ -430,7 +430,8 @@ class UDExPhoneNumberField extends UI5Element {
   handleSelect(e: CustomEvent) {
     this._dropdown.open = false;
     this.selectedIso = e.detail.item.id;
-    this.applyPhoneMask();
+    this.value = this.selectedPhonePrefix;
+    this.maxlength = this.calculateMaxLength(this.selectedPhonePrefix, this.selectedPlaceholder);
     this.getInputField().focus();
     this.fireDecoratorEvent("change");
   }
@@ -585,7 +586,7 @@ class UDExPhoneNumberField extends UI5Element {
   }
 
   get ariaInvalid(): string | null {
-    return this.valueState === "Error" ? "true" : null;
+    return this.valueState === UDExPhoneNumberFieldValueState.Error ? "true" : null;
   }
 
   get isInputReadonly(): boolean {
@@ -619,11 +620,11 @@ class UDExPhoneNumberField extends UI5Element {
   }
 
   get hasValueState(): boolean {
-    return this.valueState !== "Standard";
+    return this.valueState !== UDExPhoneNumberFieldValueState.Standard;
   }
 
   get valueStateText(): string | undefined {
-    return this.valueState !== "Standard" ? this.valueStateTypeMappings[this.valueState] : undefined;
+    return this.valueState !== UDExPhoneNumberFieldValueState.Standard ? this.valueStateTypeMappings[this.valueState] : undefined;
   }
 
   get readOnlyStateText() {

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/SelectBoxTemplate.tsx

@@ -106,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],
 })
 
 /**