@sapudex/web-components 2.54.0 → 2.56.0

package/src/ListItemBase.ts

@@ -2,7 +2,7 @@ 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { UDExListItemSize, UDExListMode, UDExListStyleType } from "./types/List.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
@@ -37,7 +37,7 @@ type UDExListItemBaseAccordionClickEventDetail = {
  * @public
  */
 @customElement({
-  renderer: litRender,
+  renderer: jsxRenderer,
 })
 
 /**
@@ -261,17 +261,22 @@ class UDExListItemBase extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  onEnterDOM() {
+  onAfterRendering() {
     if (!this.collapsible) {
       return;
     }
     this.contentElement = this.shadowRoot?.querySelector<HTMLElement>(".udex-list__group-list__content");
     if (this.contentElement) {
-      ResizeHandler.register(this.contentElement, this._resizeHandler);
       this.setContentHeight();
     }
   }
 
+  onEnterDOM() {
+    if (this.contentElement && this.collapsible) {
+      ResizeHandler.register(this.contentElement, this._resizeHandler);
+    }
+  }
+
   onExitDOM(): void {
     if (this.contentElement && this.collapsible) {
       ResizeHandler.deregister(this.contentElement, this._resizeHandler);

package/src/ListItemTemplate.tsx

@@ -0,0 +1,193 @@
+import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
+import type UDExListItem from "./ListItem.js";
+import UDExCheckbox from "./Checkbox.js";
+import UDExRadioButton from "./RadioButton.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import UDExAvatar from "./Avatar.js";
+import UDExStatusBadge from "./StatusBadge.js";
+import UDExRatingIndicator from "./RatingIndicator.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+
+function ContentList(this: UDExListItem) {
+  return (
+    <div
+      class="udex-list__content-wrap"
+      {...({ "_id": this._id } as object)}
+      aria-labelledby={`${this._id}-invisibleText`}
+      aria-label={this.accessibleListItemName}>
+      {this.flag && (
+        <div class="udex-list__flag-wrap">
+          <span class="udex-list__flag" style={{ backgroundPosition: this.flagPosition }}></span>
+        </div>
+      )}
+      {this.typeNumber && <span class="udex-list__number">{this.numberOfItem}.</span>}
+      {this.typeCircle && <span class="udex-list__circle">&#x2022;</span>}
+      {this.typeIcon && (
+        <Icon
+          name={this._icon}
+          class="udex-list__icon"
+          accessible-role="presentation"
+          aria-hidden="true"
+          part="icon"
+        />
+      )}
+      {this.image && (
+        <UDExAvatar
+          class="udex-list__avatar"
+          part="avatar"
+          shape={this.imageShape}
+          size={this.imageSize}>
+          {this.imageBadgeState && (
+            <UDExStatusBadge
+              slot="badge"
+              value-state={this.imageBadgeState}
+              size={this.imageSize}
+            />
+          )}
+          <img src={this.image} alt={this.imageAlt} />
+        </UDExAvatar>
+      )}
+      <div class="udex-list__content" part="content">
+        {this.label ? (
+          <>
+            <div class="udex-list__text-holder">
+              <span part="title" {...({ innerHTML: this.label } as object)}></span>
+              {this.supportingText && (
+                <span class="udex-list__supporting-text" part="supporting">{this.supportingText}</span>
+              )}
+              <slot part="content"></slot>
+              {this.hasRating && (
+                <UDExRatingIndicator
+                  aria-label={this.ratingAriaLabel}
+                  value={this.rating !== undefined ? Number(this.rating) : undefined}
+                  rating-count={this.ratingCount}
+                  total-count={this.totalCount}
+                  max={this.ratingMax}
+                  display={this._displayRating}
+                  disabled
+                  readonly
+                />
+              )}
+            </div>
+            {this.additionalText && (
+              <div class="udex-list__add-text" part="additional-text">{this.additionalText}</div>
+            )}
+            <div class="udex-list__btn-wrap">
+              {this.hasFirstIcon && <slot name="firstIcon" onClick={this._fireIconClickEvent as EventListener}></slot>}
+              {this.hasSecondIcon && <slot name="secondIcon" onClick={this._fireIconClickEvent as EventListener}></slot>}
+            </div>
+          </>
+        ) : (
+          <>
+            <div class="udex-list__text-holder">
+              <slot part="content"></slot>
+              {this.supportingText && (
+                <span class="udex-list__supporting-text" part="supporting">{this.supportingText}</span>
+              )}
+              {this.hasRating && (
+                <UDExRatingIndicator
+                  aria-label={this.ratingAriaLabel}
+                  value={this.rating !== undefined ? Number(this.rating) : undefined}
+                  rating-count={this.ratingCount}
+                  total-count={this.totalCount}
+                  max={this.ratingMax}
+                  display={this._displayRating}
+                  disabled
+                  readonly
+                />
+              )}
+            </div>
+            {this.additionalText && (
+              <div class="udex-list__add-text" part="additional-text">{this.additionalText}</div>
+            )}
+            <div class="udex-list__btn-wrap">
+              {this.hasFirstIcon && <slot name="firstIcon" onClick={this._fireIconClickEvent as EventListener}></slot>}
+              {this.hasSecondIcon && <slot name="secondIcon" onClick={this._fireIconClickEvent as EventListener}></slot>}
+            </div>
+          </>
+        )}
+        {this.collapsible && (
+          <div class="udex-list__group-heading__icon-wrapper">
+            <UDExButton
+              class="udex-list__group-heading__icon"
+              size={UDExButtonSize.Small}
+              design={UDExButtonDesign.Tertiary}
+              onMouseDown={this.handleCollapseIconMouseDown}
+              onClick={this.handleCollapseIconClick as EventListener}
+              tabindex={-1}
+              accessible-name={this.expandButtonAccessibleName}
+              {...({ "mode": "Interactive" } as object)}
+              icon={slimArrowRight}
+            />
+          </div>
+        )}
+      </div>
+      <div class="hidden" id={`${this._id}-invisibleText`}>{this.accessibleListItemName}</div>
+      <div class="hidden" id={`${this._id}-invisibleText-describedby`}>{this.itemState}</div>
+    </div>
+  );
+}
+
+export default function ListItemTemplate(this: UDExListItem) {
+  return (
+    <>
+      {this.modeSelected && (
+        <div
+          part="item"
+          tabIndex={Number(this._effectiveTabIndex)}
+          aria-disabled={this._ariaDisabled}
+          class={this.className}
+          role={this.roleItem as AriaRole}
+          aria-checked={this.ariaCheckedValue}
+          aria-selected={this.ariaSelectedValue}
+          aria-expanded={this.ariaExpandedValue}
+          onFocusIn={this.handleFocusIn}
+          onFocusOut={this.handleFocusOut}
+          onClick={this.handleItemClick}
+          onMouseDown={this.handleMouseDown}
+          onMouseUp={this.handleMouseUp}
+          onKeyUp={this.handleKeyUp}
+          onKeyDown={this.handleKeyDown}
+          {...({ divider: this.divider, "_id": this._id } as object)}
+          data-selected={this.selected}
+          aria-describedby={this.itemDescribedBy}>
+          {this.modeMultiSelect && (
+            <UDExCheckbox
+              class="udex-list__checkbox"
+              part="checkbox"
+              tabindex={-1}
+              indeterminate={this.indeterminate}
+              accessible-name={`checkbox ${this.stateAccessibleName}`}
+              checked={this.selected}
+              disabled={this.disabled}
+              aria-hidden={this.checkboxAriaHidden ? "true" : undefined}
+            />
+          )}
+          {this.modeRadioGroup && (
+            <UDExRadioButton
+              class="udex-list__radio"
+              part="radio"
+              tabindex={-1}
+              accessible-name={`radio ${this.stateAccessibleName}`}
+              checked={this.selected}
+              disabled={this.disabled}
+            />
+          )}
+          {ContentList.call(this)}
+        </div>
+      )}
+      {this.modeSingleContent && (
+        <div
+          part="item"
+          role={this.roleItem as AriaRole}
+          aria-selected={this.selected}
+          class={this.className}>
+          {ContentList.call(this)}
+        </div>
+      )}
+    </>
+  );
+}

package/src/ListSelectAll.ts

@@ -1,14 +1,13 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import { UDExListMode } from "./types/List.js";
 import { SELECT_ALL } from "./generated/i18n/i18n-defaults.js";
-import ListSelectAllTemplate from "./generated/templates/ListSelectAllTemplate.lit.js";
-import UDExListItem from "./ListItem.js";
+import ListSelectAllTemplate from "./ListSelectAllTemplate.js";
 import type { UDExListItemBaseEvents } from "./ListItemBase.js";
 import translate from "./utils/translate.js";
 
@@ -41,10 +40,10 @@ type UDExListSelectAllSelectAllEventDetail = {
  */
 @customElement({
   tag: "udex-list-select-all",
-  renderer: litRender,
+  renderer: jsxRenderer,
+  languageAware: true,
   styles: ListGroupHeaderCss,
   template: ListSelectAllTemplate,
-  dependencies: [UDExListItem],
 })
 /**
    * Fired when the user clicks on the Select All header.

package/src/ListSelectAllTemplate.tsx

@@ -0,0 +1,38 @@
+import type UDExListSelectAll from "./ListSelectAll.js";
+import UDExListItem from "./ListItem.js";
+
+export default function ListSelectAllTemplate(this: UDExListSelectAll) {
+  return (
+    <div
+      part="item"
+      class="udex-list__group"
+      role="group"
+      aria-labelledby="group-select-all">
+      <div
+        role="listbox"
+        aria-label="select-all-group"
+        class={this.groupListClassName}
+        onui5-item-press={this.handleSelectAllGroupItemsPress}>
+        <UDExListItem
+          role="group"
+          part="group-item"
+          accessible-role="option"
+          mode={this.multiselectMode}
+          onClick={this.handleSelectAllPress}
+          class={this.className}
+          selected={this.selected}
+          aria-current={this.selected}
+          indeterminate={this.indeterminate}
+          controlled={this.controlled}
+          onKeyDown={this.handleKeyDownPress}
+          _tab-index={Number(this._effectiveTabIndex)}
+          _additional-class-name={this.additionalClassName}
+          supportingText={this.supportingText}
+          divider>
+          {this.selectAllLabel}
+        </UDExListItem>
+        <slot></slot>
+      </div>
+    </div>
+  );
+}

package/src/ListTemplate.tsx

@@ -0,0 +1,60 @@
+import type UDExList from "./List.js";
+import type { AriaRole } from "@ui5/webcomponents-base/types.js";
+
+export default function ListTemplate(this: UDExList) {
+  return (
+    <>
+      {this.modeSelected && (
+        <div
+          class="udex-list-root"
+          onKeyDown={this.handleKeyDown}
+          style={{ height: this.holderHeight }}
+          onui5-item-press={this.handleItemPress}
+          onui5-header-press={this.handleItemPress}>
+          <div class="udex-list__scroll-container">
+            {HeaderText.call(this)}
+            <span id={`${this._id}-mode-label`} class="udex-list__hidden-text">
+              {this.ariaLabelModeText}
+            </span>
+            <div
+              id="udex-list"
+              class="udex-list"
+              role={this.effectiveAccessibleRole as AriaRole}
+              aria-labelledby={this.ariaLabelledBy}
+              aria-multiselectable={this._listAriaMultiSelectable as "true" | undefined}
+              aria-busy={(this.ariaBusy ?? undefined) as "true" | "false" | undefined}>
+              <slot></slot>
+            </div>
+          </div>
+        </div>
+      )}
+      {this.modeSingleContent && (
+        <>
+          {HeaderText.call(this)}
+          <div
+            id="udex-list"
+            class="udex-list"
+            role={this.singleContentRole as AriaRole}
+            aria-label={this.singleContentAriaLabel}
+            aria-busy={(this.ariaBusy ?? undefined) as "true" | "false" | undefined}>
+            <slot></slot>
+          </div>
+        </>
+      )}
+    </>
+  );
+}
+
+function HeaderText(this: UDExList) {
+  if (!this.headerText) {
+    return null;
+  }
+  return (
+    <header
+      id={`${this._id}-mode-label`}
+      class="udex-list__header-text"
+      part="header">
+      {this.headerText}
+    </header>
+  );
+}

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/MediaPlayer.ts

@@ -371,6 +371,9 @@ class UDExMediaPlayer extends UI5Element {
     });
 
     player.on("ended", () => {
+      this.video25 = false;
+      this.video50 = false;
+      this.video75 = false;
       this.fireDecoratorEvent("videoComplete");
     });
 
@@ -621,6 +624,9 @@ class UDExMediaPlayer extends UI5Element {
 
   handleEmbedVideoEnded() {
     this._embedVideoStartFired = false;
+    this.video25 = false;
+    this.video50 = false;
+    this.video75 = false;
     this.fireDecoratorEvent("videoComplete");
   }
 

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() {