@sapudex/web-components 2.55.0 → 2.57.0

package/src/CarouselTemplate.tsx

@@ -17,7 +17,7 @@ export default function CarouselTemplate(this: Carousel) {
 
       <UI5Carousel
         itemsPerPage={this.itemsPerPage}
-        pageIndicatorType={this.pageIndicatorType}
+        pageIndicatorType={this.sanitizedPageIndicatorType}
         id="carousel"
         hideNavigationArrows
         arrowsPlacement={CarouselArrowsPlacement.Navigation}
@@ -70,11 +70,11 @@ function navigation(this: Carousel) {
           design={this.buttonDesign}
           tooltip={this.previousPageText}
           onClick={this._prevButtonClick}
-          part="prev-button">
-        </UDExButton>
+          part="prev-button"
+        ></UDExButton>
 
         {
-          this._isBottomNavigation &&
+          this._isBottomDotNavigation &&
           <div className="udex-carousel__navigation-page-indicator-spacer" />
         }
 
@@ -87,12 +87,12 @@ function navigation(this: Carousel) {
           design={this.buttonDesign}
           tooltip={this.nextPageText}
           onClick={this._nextButtonClick}
-          part="next-button">
-        </UDExButton>
+          part="next-button"
+        ></UDExButton>
       </div>
 
       {
-        this.autoplay && this._isBottomNavigation &&
+        this.autoplay && this._isBottomDotNavigation &&
         <div className="udex-carousel__navigation-spacer"></div>
       }
     </div>

package/src/CountrySelectorTemplate.tsx

@@ -3,10 +3,10 @@ import type UDExCountrySelector from "./CountrySelector.js";
 export default function CountrySelectorTemplate(this: UDExCountrySelector) {
   if (this.hideFlagImages) { return <></>; }
   return (
-    <img
+    <span
       class="udex-text-field__image"
       aria-label={this.flagAriaLabel}
       style={`background-position-x: ${this.selectedCountryFlagX}; background-position-y: ${this.selectedCountryFlagY}`}>
-    </img>
+    </span>
   );
 }

package/src/FilterMenu.ts

@@ -6,6 +6,7 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
   isTabPrevious, isTabNext, isEscape, isSpace, isEnter,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import UDExBusyIndicator from "./BusyIndicator.js";
@@ -485,7 +486,10 @@ class UDExFilterMenu extends UDExSearchableListBase {
     if (this.modeSingleSelect && !this._search) {
       this.activeItem?.focus();
     }
-    this._handleDropdownScroll();
+    this._expandCollapsedGroupsWithSelection();
+    renderFinished().then(() => {
+      this._handleDropdownScroll();
+    }).catch(() => {});
     this.fireDecoratorEvent("after-open");
   }
 

package/src/HeroBanner.ts

@@ -8,6 +8,7 @@ import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import HeroBannerTemplate from "./HeroBannerTemplate.js";
 import type UDExBreadcrumbs from "./Breadcrumbs.js";
+import ensureSearchBackdropStyles from "./utils/searchBackdrop.js";
 
 // Styles
 import HeroBannerCss from "./generated/themes/HeroBanner.css.js";
@@ -155,6 +156,71 @@ class UDExHeroBanner extends UI5Element {
         this._calculateMediaButtonState();
       });
     }
+    this._handleSuggestionOpenedBound = this._showSearchBackdrop.bind(this);
+    this._handleSuggestionClosedBound = this._hideSearchBackdrop.bind(this);
+    this.addEventListener("suggestion-popover-opened", this._handleSuggestionOpenedBound);
+    this.addEventListener("suggestion-popover-closed", this._handleSuggestionClosedBound);
+  }
+
+  onExitDOM() {
+    this.removeEventListener("suggestion-popover-opened", this._handleSuggestionOpenedBound);
+    this.removeEventListener("suggestion-popover-closed", this._handleSuggestionClosedBound);
+    this._removeBackdropScrollListener();
+    this._bodyBackdropEl?.remove();
+    this._bodyBackdropEl = null;
+  }
+
+  _handleSuggestionOpenedBound!: () => void;
+  _handleSuggestionClosedBound!: () => void;
+  _handleBackdropScrollBound!: () => void;
+  _bodyBackdropEl: HTMLElement | null = null;
+
+  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 _updateBackdropTop(): void {
+    if (this._bodyBackdropEl) {
+      this._bodyBackdropEl.style.top = `${this.getBoundingClientRect().bottom}px`;
+    }
+  }
+
+  private _addBackdropScrollListener(): void {
+    this._handleBackdropScrollBound = this._updateBackdropTop.bind(this);
+    window.addEventListener("scroll", this._handleBackdropScrollBound, { passive: true });
+  }
+
+  private _removeBackdropScrollListener(): void {
+    if (this._handleBackdropScrollBound) {
+      window.removeEventListener("scroll", this._handleBackdropScrollBound);
+    }
+  }
+
+  private _showSearchBackdrop(): void {
+    const backdrop = this._getBackdropEl();
+    this._updateBackdropTop();
+    this._addBackdropScrollListener();
+    backdrop.style.display = "block";
+  }
+
+  private _hideSearchBackdrop(): void {
+    this._removeBackdropScrollListener();
+    if (this._bodyBackdropEl) {
+      this._bodyBackdropEl.style.display = "none";
+    }
+  }
+
+  handleBackdropClick(): void {
+    const search = this.querySelector<any>("[udex-search]");
+    search?.onClosePopover?.();
   }
 
   _toggleMediaButton(): void {

package/src/List.ts

@@ -598,6 +598,14 @@ class UDExList extends UI5Element {
     return this._hasCollapsibleGroups ? "tree" : this.accessibleRole;
   }
 
+  /**
+   * Role for SingleContent mode. listbox/option is for selection widgets only;
+   * SingleContent is informational so "list"/"listitem" is the correct semantic.
+   */
+  get singleContentRole(): string {
+    return this.accessibleRole !== "listbox" ? this.accessibleRole : "list";
+  }
+
   /** aria-multiselectable exposed only for MultiSelect tree (collapsible groups). */
   get _listAriaMultiSelectable(): string | undefined {
     return (this._hasCollapsibleGroups && this.modeMultiSelect) ? "true" : undefined;

package/src/ListItem.ts

@@ -372,7 +372,11 @@ class UDExListItem extends UDExListItemBase {
     if (this._useHostAriaRole) {
       return "presentation";
     }
-    return this.accessibleRole.length > 0 ? this.accessibleRole : listItemRole;
+    if (this.accessibleRole.length > 0) {
+      return this.accessibleRole;
+    }
+    // SingleContent is informational (not a selection widget) — listitem is semantically correct
+    return this.modeSingleContent ? "listitem" : listItemRole;
   }
 
   get effectiveRole(): string {

package/src/ListTemplate.tsx

@@ -34,7 +34,7 @@ export default function ListTemplate(this: UDExList) {
           <div
             id="udex-list"
             class="udex-list"
-            role={this.accessibleRole as AriaRole}
+            role={this.singleContentRole as AriaRole}
             aria-label={this.singleContentAriaLabel}
             aria-busy={(this.ariaBusy ?? undefined) as "true" | "false" | undefined}>
             <slot></slot>

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");
       }
     }
   }