@sapudex/web-components 2.30.0 → 2.32.0

package/src/MediaPlayer.ts

@@ -35,6 +35,10 @@ type UDExMediaPlayerVideoProgressEventDetail = {
   progress: number,
 }
 
+type UDExMediaPlayerVideojsReadyEventDetail = {
+  videojs: any,
+}
+
 /**
  * @class
  *
@@ -117,6 +121,15 @@ type UDExMediaPlayerVideoProgressEventDetail = {
  * @public
  */
 @event("video75", { bubbles: true })
+/**
+ * Fires when the VideoJS library is loaded but before the player is created.
+ * Use this event to register custom VideoJS plugins via
+ * <code>event.detail.videojs.registerPlugin()</code>.
+ *
+ * @public
+ * @param {object} videojs the VideoJS constructor object
+ */
+@event("videojsReady", { bubbles: true })
 class UDExMediaPlayer extends UI5Element {
   eventDetails!: {
     "videoStart": void,
@@ -127,6 +140,7 @@ class UDExMediaPlayer extends UI5Element {
     "video25": void,
     "video50": void,
     "video75": void,
+    "videojsReady": UDExMediaPlayerVideojsReadyEventDetail,
   };
   /**
    * Defines the options object of video.js element
@@ -251,6 +265,20 @@ class UDExMediaPlayer extends UI5Element {
   videoStart!: boolean;
   videoReady!: boolean;
   videoProgress!: number;
+  private _pendingPlugins: Array<{ name: string; plugin: (...args: any[]) => any }> = [];
+
+  /**
+   * Registers a custom VideoJS plugin to be applied before player initialization.
+   * Must be called before the component renders.
+   * For plugins registered after rendering, use the videojsReady event instead.
+   *
+   * @param name - The plugin name
+   * @param plugin - The plugin function or class
+   * @public
+   */
+  registerPlugin(name: string, plugin: (...args: any[]) => any): void {
+    this._pendingPlugins.push({ name, plugin });
+  }
 
   getPlayedTime = (target: EventTarget): number => {
     const progressControl = (target as any)?.player.controlBar?.progressControl?.childNameIndex_.seekBar;
@@ -518,6 +546,13 @@ class UDExMediaPlayer extends UI5Element {
         window.videojs = videojs;
       }
 
+      this._pendingPlugins.forEach(({ name, plugin }) => {
+        videojs.registerPlugin(name, plugin);
+      });
+      this._pendingPlugins = [];
+
+      this.fireDecoratorEvent("videojsReady", { videojs });
+
       const options = this.getOptionsValue();
       const language: string = options?.language;
       if (language) {

package/src/Pagination.ts

@@ -40,7 +40,8 @@ export enum UDExPaginationType {
 
 export enum UDExDisplayType {
   desktop = "desktop",
-  mobile = "mobile"
+  mobile = "mobile",
+  auto = "auto"
 }
 
 type UDExPaginationChangeEventDetail = {
@@ -121,6 +122,14 @@ class UDExPagination extends UI5Element {
   @property({ type: String })
     _direction?: string;
 
+  /**
+   * Tracks the resolved display mode for auto display.
+   *
+   * @private
+   */
+  @property({ noAttribute: true })
+    _effectiveDisplay?: `${UDExDisplayType}`;
+
   /**
    * Defines if the previous button is in pseudo-disabled.
    *
@@ -140,6 +149,8 @@ class UDExPagination extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
+  static readonly AUTO_DISPLAY_BREAKPOINT = 980;
+
   _pages: Page[];
   _visiblePages: Page[];
 
@@ -150,6 +161,7 @@ class UDExPagination extends UI5Element {
   _firstPageIndex!: number;
   _lastPageIndex!: number;
   _pageFocusedManually!: boolean;
+  _resizeHandler!: () => void;
 
   constructor() {
     super();
@@ -160,12 +172,44 @@ class UDExPagination extends UI5Element {
     this._mobileDisplayNumber = 5;
     this._desktopDisplayNumber = 10;
     this._pageFocusedManually = false;
+    this._resizeHandler = this._handleResize.bind(this);
   }
 
   onEnterDOM() {
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
+    if (this.display === UDExDisplayType.auto) {
+      this._effectiveDisplay = this._displayType;
+      window.addEventListener("resize", this._resizeHandler);
+    }
+  }
+
+  onExitDOM() {
+    window.removeEventListener("resize", this._resizeHandler);
+  }
+
+  _handleResize(): void {
+    if (this.display === UDExDisplayType.auto) {
+      const newDisplay = this._displayType;
+      if (this._effectiveDisplay !== newDisplay) {
+        this._effectiveDisplay = newDisplay;
+        this._pages = [];
+      }
+    }
+  }
+
+  get _displayType(): `${UDExDisplayType}` {
+    return window.innerWidth > UDExPagination.AUTO_DISPLAY_BREAKPOINT
+      ? UDExDisplayType.desktop
+      : UDExDisplayType.mobile;
+  }
+
+  get effectiveDisplay(): `${UDExDisplayType}` {
+    if (this.display === UDExDisplayType.auto) {
+      return this._effectiveDisplay ?? (this._displayType);
+    }
+    return this.display;
   }
 
   onBeforeRendering(): void {
@@ -182,13 +226,13 @@ class UDExPagination extends UI5Element {
 
   get typeFull(): boolean {
     return (
-      this.type === UDExPaginationType.full || this.display === UDExDisplayType.mobile
+      this.type === UDExPaginationType.full || this.effectiveDisplay === UDExDisplayType.mobile
     );
   }
 
   get typeShort(): boolean {
     return (
-      this.type === UDExPaginationType.short && this.display !== UDExDisplayType.mobile
+      this.type === UDExPaginationType.short && this.effectiveDisplay !== UDExDisplayType.mobile
     );
   }
 
@@ -265,19 +309,19 @@ class UDExPagination extends UI5Element {
     if (this._direction === "rtl") {
       classes = `${classes} udex-pagination--${this._direction}`;
     }
-    if (!this.display) {
+    if (!this.effectiveDisplay) {
       return classes;
     }
-    return `${classes} udex-pagination--${this.display} udex-pagination--${this.type}`;
+    return `${classes} udex-pagination--${this.effectiveDisplay} udex-pagination--${this.type}`;
   }
 
   get displayNumber(): number {
-    const lastIndex = this.display === UDExDisplayType.mobile ? this._mobileDisplayNumber : this._desktopDisplayNumber;
+    const lastIndex = this.effectiveDisplay === UDExDisplayType.mobile ? this._mobileDisplayNumber : this._desktopDisplayNumber;
     return lastIndex;
   }
 
   get pageOffset(): number {
-    if (this.display === UDExDisplayType.mobile) {
+    if (this.effectiveDisplay === UDExDisplayType.mobile) {
       return Math.floor(this._mobileDisplayNumber / 2);
     }
     return this._desktopDisplayNumber / 2 - 1;

package/src/PromoTile.ts

@@ -81,6 +81,15 @@ class UDExPromoTile extends UI5Element {
   @slot({ type: HTMLElement })
     pictogram?: Array<HTMLElement>;
 
+  /**
+   * Allows control over setting the CSS gradient.
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    backgroundGradient?: string;
+
   /**
    * Defines the orientation of the Promo Tile component.
    *
@@ -179,6 +188,7 @@ class UDExPromoTile extends UI5Element {
   _colorMode: UDExPromoTileMode = UDExPromoTileMode.light;
   _lightModeColors: Array<number> = [1, 2];
   _darkModeColors: Array<number> = [7, 8, 9, 10];
+  _defaultBackgroundColor = "#FFF";
 
   constructor() {
     super();

package/src/PromoTileTemplate.tsx

@@ -12,7 +12,10 @@ export default function PromoTileTemplate(this: UDExPromoTile) {
     <div
       role="region"
       class={`${rootClass}__container ${rootClass}--${this.orientation?.toLowerCase()} ${rootClass}--${this._colorMode}`}
-      aria-label={this.promoTileContainerText}>
+      aria-label={this.promoTileContainerText}
+      style={this.backgroundGradient
+        ? { backgroundImage: this.backgroundGradient, backgroundColor: this._defaultBackgroundColor }
+        : undefined}>
       {this._showPictogram &&
         <div
           part="image"

package/src/SecondaryNavigation.hbs

@@ -70,6 +70,7 @@
         aria-label="{{mobileMenuOpenerAriaLabel}}"
         label="{{heading}}"
         mobile-link-title="{{title}}"
+        @ui5-nav-item-click="{{handleMobileMenuOpenerClick}}"
         @ui5-sub-item-click="{{handleSubItemClick}}"
         _is-mobile-menu-opener
         .subItems="{{this.parsedItems}}">

package/src/SecondaryNavigation.ts

@@ -34,8 +34,10 @@ type UDExSecondaryNavigationClickEventDetail = {
   originalEvent: Event,
   clickedItem: NavItem;
   clickedIndex: number;
+  isMore?: boolean,
   isMobile?: boolean,
   analyticsName: AnalyticsName,
+  analyticsPath: Array<string>,
   sourceNode: HTMLElement,
 };
 
@@ -45,6 +47,12 @@ type UDExSecondaryNavigationHeadingClickEventDetail = {
   sourceNode: HTMLElement,
 };
 
+type UDExSecondaryNavigationMobileMenuOpenerClickEventDetail = {
+  originalEvent: Event,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
+};
+
 /**
  * @class
  *
@@ -97,10 +105,23 @@ type UDExSecondaryNavigationHeadingClickEventDetail = {
  */
 @event("heading-click", { cancelable: true, bubbles: true })
 
+/**
+ * The event is triggered on user interaction with the mobile menu opener
+ *
+ * @allowPreventDefault
+ * @public
+ * @param {Event} originalEvent The original event object
+ * @param {AnalyticsName} analyticsName The analytics name for the mobile menu opener
+ * @param {HTMLElement} sourceNode The source node of the mobile menu opener
+ *
+ */
+@event("mobile-menu-opener-click", { cancelable: true, bubbles: true })
+
 class UDExSecondaryNavigation extends UI5Element {
   eventDetails!: {
     "item-click": UDExSecondaryNavigationClickEventDetail,
     "heading-click": UDExSecondaryNavigationHeadingClickEventDetail,
+    "mobile-menu-opener-click": UDExSecondaryNavigationMobileMenuOpenerClickEventDetail,
   };
   /**
    * Defines an aria label for the mobile menu opener
@@ -247,7 +268,7 @@ class UDExSecondaryNavigation extends UI5Element {
     });
 
     if ((steps.at(-1) || 0) <= availableWidth) {
-      this._visibleItems.splice(0, Infinity, ...this.parsedItems);
+      this._visibleItems = [...this.parsedItems];
       this._showMoreButton = false;
       this.refreshRendering();
       return;
@@ -256,8 +277,8 @@ class UDExSecondaryNavigation extends UI5Element {
     if (this.parsedItems) {
       // @ts-ignore
       const lastVisibleIndex: number = steps.findLastIndex((size: number) => size < (availableWidth - moreButtonWidth - itemsGap));
-      this._visibleItems.splice(0, Infinity, ...this.parsedItems.slice(0, lastVisibleIndex + 1));
-      this._overflowItems.splice(0, Infinity, ...this.parsedItems.slice(lastVisibleIndex + 1));
+      this._visibleItems = this.parsedItems.slice(0, lastVisibleIndex + 1);
+      this._overflowItems = this.parsedItems.slice(lastVisibleIndex + 1);
       this._showMoreButton = true;
       this.refreshRendering();
     }
@@ -345,7 +366,7 @@ class UDExSecondaryNavigation extends UI5Element {
       active,
       mobileLinkTitle,
       items: subItems,
-    });
+    }, this.getAnalyticsPath(title, path), title === this.moreButtonText);
 
     if (prevented) {
       e.preventDefault();
@@ -366,7 +387,9 @@ class UDExSecondaryNavigation extends UI5Element {
     const { originalEvent: actualOriginalEvent, index } = e.detail;
     const item = e.detail.item as UDExSecondaryNavigationSubItem;
     const { items } = item as NavItem;
-    const prevented = !this.fireEventItemClick(actualOriginalEvent, index, item);
+    const analyticsPath = this.getAnalyticsPath(item.title, item.path);
+    const isMore = this._clickedNavItem?.title === this.moreButtonText;
+    const prevented = !this.fireEventItemClick(actualOriginalEvent, index, item, analyticsPath, isMore);
 
     if (prevented) {
       e.preventDefault();
@@ -397,10 +420,14 @@ class UDExSecondaryNavigation extends UI5Element {
     {
       items, target, path, title, active, mobileLinkTitle,
     }: NavItem,
+    analyticsPath: Array<string> = [],
+    isMore: boolean = false,
   ): boolean {
     return this.fireDecoratorEvent("item-click", {
       ...(this.isMobileScreen && { isMobile: true }),
+      ...(isMore && { isMore: true }),
       analyticsName: AnalyticsName.HeaderSub,
+      analyticsPath,
       sourceNode: e?.currentTarget as HTMLElement,
       originalEvent: e,
       clickedItem: {
@@ -415,25 +442,62 @@ class UDExSecondaryNavigation extends UI5Element {
     });
   }
 
+  getAnalyticsPath(clickedTitle: string, clickedPath?: string): Array<string> {
+    const getLabel = (item: NavItem) => (this.isMobileScreen ? (item.mobileLinkTitle || item.title) : item.title);
+    const findPath = (items: Array<NavItem>, parentPath: Array<string>): Array<string> | null => items.reduce<Array<string> | null>((found, item) => {
+      if (found !== null) {
+        return found;
+      }
+      if (item.title === clickedTitle && (!clickedPath || item.path === clickedPath)) {
+        return [...parentPath, getLabel(item)];
+      }
+      if (item.items?.length) {
+        return findPath(item.items, [...parentPath, getLabel(item)]);
+      }
+      return null;
+    }, null);
+    return findPath(this.parsedItems, []) || [];
+  }
+
   setActiveItem(navItems: Array<NavItem>, clickedItem: UDExSecondaryNavigationItemBase): void {
-    const updateNav = (items: Array<NavItem>, { title, path }: UDExSecondaryNavigationItemBase) => {
+    const updateNav = (items: Array<NavItem>, { title, path }: UDExSecondaryNavigationItemBase): boolean => {
+      let hasActiveDescendant = false;
+
       items.forEach(item => {
         if (item.title === title && (item.path === path || !item.path)) {
           item.active = true;
+          hasActiveDescendant = true;
           return;
         }
-        delete item.active;
 
         if (item.items) {
-          updateNav(item.items, clickedItem);
+          const childIsActive = updateNav(item.items, clickedItem);
+          if (childIsActive) {
+            item.active = true;
+            hasActiveDescendant = true;
+          } else {
+            delete item.active;
+          }
+        } else {
+          delete item.active;
         }
       });
+
+      return hasActiveDescendant;
     };
 
     updateNav(navItems, clickedItem);
     this.navItems = JSON.stringify(navItems);
   }
 
+  handleMobileMenuOpenerClick(e: CustomEvent): void {
+    this.fireDecoratorEvent("mobile-menu-opener-click", {
+      analyticsName: AnalyticsName.HeaderSub,
+      sourceNode: e.target as HTMLElement,
+      originalEvent: e,
+    });
+  }
+
   handleOutsideClick(): void {
     document.addEventListener("mousedown", this.outsideClickListener);
   }
@@ -545,4 +609,8 @@ class UDExSecondaryNavigation extends UI5Element {
 UDExSecondaryNavigation.define();
 
 export default UDExSecondaryNavigation;
-export type { UDExSecondaryNavigationClickEventDetail, UDExSecondaryNavigationHeadingClickEventDetail };
+export type {
+  UDExSecondaryNavigationClickEventDetail,
+  UDExSecondaryNavigationHeadingClickEventDetail,
+  UDExSecondaryNavigationMobileMenuOpenerClickEventDetail,
+};

package/src/SecondaryNavigationItem.ts

@@ -127,7 +127,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
    * @default false
    */
   @property({ type: Boolean })
-    isOpen!: boolean;
+    isOpen: boolean = false;
 
   /**
    * Defines the length of items in the secondary navigation.
@@ -166,7 +166,6 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   _dropdownHistory: Array<Array<NavItem>> = [];
   _shouldFocusFirstSubItem!: boolean;
   _subTitle!: string | undefined;
-  _shouldResetTabIndex!: boolean;
   _shouldSetTabIndex!: boolean;
 
   onAfterRendering(): void {
@@ -187,11 +186,6 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
       this._tabIndex = "0";
       this._shouldSetTabIndex = false;
     }
-
-    if (this._shouldResetTabIndex) {
-      this._tabIndex = "-1";
-      this._shouldResetTabIndex = false;
-    }
   }
 
   onBeforeRendering() : void {
@@ -220,7 +214,6 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     if (this.hasNestedItems) {
       this.setDropdownItems();
       this.isOpen = !this.isOpen;
-      this._shouldResetTabIndex = true;
       this.onShouldFocusFirstSubItem();
     }
 

package/src/SecondaryNavigationSubItem.ts

@@ -121,7 +121,7 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
 
   get backButtonAriaLabel(): string {
     const label = translate(UDExSecondaryNavigationSubItem, BACK_BUTTON_LABEL);
-    return `${label} ${this.itemLabel}`;
+    return `${this.itemLabel}, ${label}`;
   }
 }
 

package/src/SelectBase.ts

@@ -286,16 +286,28 @@ class UDExSelectBase extends UDExSearchableListBase {
   }
 
   handleHomeKeyPress(items: UDExListItemBase[]) {
-    this._selectedOption = items[0].label;
+    const firstIndex = (items[0]?.nonInteractive && !items[0]?.collapsible) ? 1 : 0;
+    this._selectedOption = items[firstIndex].label;
 
     if (this.showImageFlags) {
-      this.handleImagePosition(items, 0);
+      this.handleImagePosition(items, firstIndex);
     }
   }
 
   handleDownKeyPress(items: UDExListItemBase[], currentSelectedIndex: number, lastItemIndex: number) {
     const nextIndex = currentSelectedIndex + 1;
     const nextSelectIndex = nextIndex > lastItemIndex ? 0 : nextIndex;
+    const isNonInteractive = items[nextSelectIndex].nonInteractive && !items[nextSelectIndex].collapsible;
+
+    if (isNonInteractive) {
+      const skipIndex = nextSelectIndex + 1 > lastItemIndex ? 0 : nextSelectIndex + 1;
+      this._selectedOption = items[skipIndex].label;
+      if (this.showImageFlags) {
+        this.handleImagePosition(items, skipIndex);
+      }
+      return;
+    }
+
     this._selectedOption = items[nextSelectIndex].label;
 
     if (this.showImageFlags) {
@@ -306,6 +318,17 @@ class UDExSelectBase extends UDExSearchableListBase {
   handleUpKeyPress(items: UDExListItemBase[], currentSelectedIndex: number, lastItemIndex: number) {
     const prevIndex = currentSelectedIndex - 1;
     const previousSelectIndex = prevIndex < 0 ? lastItemIndex : prevIndex;
+    const isNonInteractive = items[previousSelectIndex].nonInteractive && !items[previousSelectIndex].collapsible;
+
+    if (isNonInteractive) {
+      const skipIndex = previousSelectIndex === 0 ? lastItemIndex : previousSelectIndex - 1;
+      this._selectedOption = items[skipIndex].label;
+      if (this.showImageFlags) {
+        this.handleImagePosition(items, skipIndex);
+      }
+      return;
+    }
+
     this._selectedOption = items[previousSelectIndex].label;
 
     if (this.showImageFlags) {
@@ -381,15 +404,18 @@ class UDExSelectBase extends UDExSearchableListBase {
   }
 
   focusFirstItem(items: UDExListItemBase[]): void {
-    this._list.setTabIndexByIndex(items, 0);
+    const firstIndex = (items[0]?.nonInteractive && !items[0]?.collapsible) ? 1 : 0;
+    const firstItem = items[firstIndex];
+    this._list.setTabIndexByIndex(items, firstIndex);
+
     if (!this.tabNavigationEnabled) {
-      this._selectedOption = items[0].label;
+      this._selectedOption = firstItem.label;
     }
 
-    if (items[0].isGroup) {
-      this._list.focusHeader(items[0]);
+    if (firstItem.isGroup) {
+      this._list.focusHeader(firstItem);
     } else {
-      items[0].focus();
+      firstItem.focus();
     }
   }
 

package/src/Tab.ts

@@ -299,6 +299,10 @@ class UDExTab extends UI5Element implements ITab {
     return this.effectiveSelected && this.hasBodyText && this._isVertical;
   }
 
+  get hasBodyTextOrLink(): boolean {
+    return this._isVertical && (this.hasBodyText || this.hasLinkSlot);
+  }
+
   get hasLinkSlot(): boolean {
     return this.link && this.link.length > 0;
   }
@@ -314,10 +318,6 @@ class UDExTab extends UI5Element implements ITab {
     return this.link.map(l => l.outerHTML).join("");
   }
 
-  get hasBodyTextOrLink(): boolean {
-    return this._isVertical && (this.hasBodyText || this.hasLinkSlot);
-  }
-
   get effectiveSelected(): boolean {
     return this.selected || this._selected;
   }

package/src/TabNavigation.hbs

@@ -4,6 +4,16 @@
         class="udex-tab-navigation__header"
         part="tab-navigation-header"
         @keydown="{{handleKeyDown}}">
+        {{#if showPlayButton}}
+            <udex-button
+                class="udex-tab-navigation__play-button"
+                design="Tertiary"
+                size="Large"
+                icon="{{playBtnIcon}}"
+                tooltip="{{playBtnTooltipText}}"
+                @click="{{onPlayButtonClick}}">
+            </udex-button>
+        {{/if}}
         <div
             id="{{_id}}-header-tabs"
             class="udex-tab-navigation__header-tabs"
@@ -49,6 +59,11 @@
         {{#if this._overflowItems.length}}
             {{tabNavigationPopover}}
         {{/if}}
+        {{#if showFooterSlot}}
+            <div class="udex-tab-navigation__footer" part="tab-navigation-footer">
+                <slot name="footer"></slot>
+            </div>
+        {{/if}}
     </div>
     <div
         class="udex-tab-navigation__content"