@sapudex/web-components 2.31.0 → 2.32.1

package/src/MastheadItem.ts

@@ -491,6 +491,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   calculateMarginInlineStart(rect: DOMRect): number | null {
     const { left, right } = rect;
+    const viewportWidth = document.documentElement.clientWidth;
 
     if (this.isLtrDirection && left < 0) {
       return left * -1 + 15;
@@ -500,12 +501,12 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
       return left - 15;
     }
 
-    if (this.isRtlDirection && right > window.innerWidth) {
-      return right - window.innerWidth + 15;
+    if (this.isRtlDirection && right > viewportWidth) {
+      return right - viewportWidth + 15;
     }
 
-    if (this.isLtrDirection && right > window.innerWidth) {
-      return window.innerWidth - right - 15;
+    if (this.isLtrDirection && right > viewportWidth) {
+      return viewportWidth - right - 15;
     }
 
     return null;

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/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

@@ -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 {

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

@@ -194,7 +194,7 @@ class UDExSelectBase extends UDExSearchableListBase {
   }
 
   onInvalidation({ name }: ChangeInfo): void {
-    if (name === "default" && this.modeSingleSelect) {
+    if (name === "default" && this.modeSingleSelect && !this._inputValue) {
       this.setSelectOption();
     }
   }
@@ -340,6 +340,7 @@ class UDExSelectBase extends UDExSearchableListBase {
     e.stopPropagation();
     e.preventDefault();
     this._selectedOption = "";
+    this._inputValue = e.key;
     this._search.value = e.key;
     this._search.focus();
     this.onSearch(this._search.value);

package/src/StepInput.ts

@@ -294,6 +294,18 @@ class UDExStepInput extends UI5Element {
     this._setButtonState();
   }
 
+  onAfterRendering() {
+    this._skipLiveAnnouncement = false;
+  }
+
+  // Plain (non-reactive) flag — set before a re-render when focus is being
+  // redirected to the input so the live region stays silent for that render.
+  private _skipLiveAnnouncement = false;
+
+  get _liveRegionText() {
+    return this._skipLiveAnnouncement ? "" : this._valuePrecisioned;
+  }
+
   get input() {
     return this.inputOuter.shadowRoot!.querySelector("input")!;
   }
@@ -405,6 +417,10 @@ class UDExStepInput extends UI5Element {
     if (!this._incIconInactive) {
       this._modifyValue(this.step, true);
       this._previousValue = this.value;
+      if (this._incIconDisabled) {
+        this._skipLiveAnnouncement = true;
+        this.input.focus();
+      }
     }
   }
 
@@ -412,6 +428,10 @@ class UDExStepInput extends UI5Element {
     if (!this._decIconInactive) {
       this._modifyValue(-this.step, true);
       this._previousValue = this.value;
+      if (this._decIconDisabled) {
+        this._skipLiveAnnouncement = true;
+        this.input.focus();
+      }
     }
   }
 

package/src/StepInputTemplate.tsx

@@ -60,6 +60,6 @@ export default function StepInputTemplate(this: UDExStepInput) {
         ></UDExControlButton>
       </>)
     }
-    <div class="hidden" aria-live="polite">{this._valuePrecisioned}</div>
+    <div class="hidden" aria-live="polite">{this._liveRegionText}</div>
   </div>);
 }

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"

package/src/TabNavigation.ts

@@ -18,9 +18,11 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { MORE } from "./generated/i18n/i18n-defaults.js";
+import { MORE, PLAY_BUTTON_ACCESSIBLE_NAME, PAUSE_BUTTON_ACCESSIBLE_NAME } from "./generated/i18n/i18n-defaults.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import "@ui5/webcomponents-icons/dist/play.js";
+import "@ui5/webcomponents-icons/dist/pause.js";
 import UDExButton from "./Button.js";
 
 // Templates
@@ -49,6 +51,16 @@ export enum UDExTabNavigationOrientation {
   Vertical = "Vertical",
 }
 
+export enum UDExTabNavigationPlacement {
+  Start = "Start",
+  End = "End",
+}
+
+export enum UDExTabNavigationVerticalAlignment {
+  Top = "Top",
+  Center = "Center",
+}
+
 type UDExTabNavigationClickDetail = {
   currentPage: number
 }
@@ -132,6 +144,53 @@ class UDExTabNavigation extends UI5Element {
   @property()
     orientation: `${UDExTabNavigationOrientation}` = UDExTabNavigationOrientation.Horizontal;
 
+  /**
+   * Defines the placement of the tab strip relative to the content area.
+   * Applies to Vertical orientation only.
+   *
+   * @public
+   * @default "Start"
+   */
+  @property()
+    placement: `${UDExTabNavigationPlacement}` = UDExTabNavigationPlacement.Start;
+
+  /**
+   * Defines the vertical alignment of the tab strip relative to the content area.
+   * Applies to Vertical orientation only.
+   *
+   * @public
+   * @default "Top"
+   */
+  @property()
+    verticalAlignment: `${UDExTabNavigationVerticalAlignment}` = UDExTabNavigationVerticalAlignment.Top;
+
+  /**
+   * Enables automatic tab switching for Vertical orientation.
+   *
+   * @public
+   * @default false
+   */
+  @property({ type: Boolean })
+    autoPlay: boolean = false;
+
+  /**
+   * Defines the interval in milliseconds between automatic tab switches.
+   * Applies only when autoPlay is enabled.
+   *
+   * @public
+   * @default 5000
+   */
+  @property({ type: Number })
+    autoPlayInterval: number = 5000;
+
+  /**
+   * Indicates whether the auto-play is paused.
+   *
+   * @private
+   */
+  @property({ type: Boolean, noAttribute: true })
+    _isPaused: boolean = false;
+
   /**
    * Defines the background color of the component.
    *
@@ -182,6 +241,16 @@ class UDExTabNavigation extends UI5Element {
   })
     items!: Array<ITab>;
 
+  /**
+   * Defines optional content rendered below the tab list in Vertical orientation.
+   * Use to place a button or any action element beneath the tabs.
+   *
+   * @slot footer
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    footer!: Array<HTMLElement>;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -192,6 +261,7 @@ class UDExTabNavigation extends UI5Element {
   _isExpanded: boolean = false;
   _maxTitleLength: number = 25;
   _maxTitleLengthInSecondLines: number = this._maxTitleLength * 2;
+  _autoPlayTimer?: number;
 
   constructor() {
     super();
@@ -217,11 +287,20 @@ class UDExTabNavigation extends UI5Element {
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
+    if (this.showPlayButton) {
+      const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (prefersReducedMotion) {
+        this._isPaused = true;
+      } else {
+        this._startAutoPlay();
+      }
+    }
   }
 
   onExitDOM(): void {
     ResizeHandler.deregister(this.getHeader(), this._handleResizeBound);
     window.removeEventListener("resize", this._handleWindowResizeBound);
+    this._stopAutoPlay();
   }
 
   _handleWindowResize() {
@@ -334,6 +413,10 @@ class UDExTabNavigation extends UI5Element {
     this._selectedTab = this.items[selectedTabIndex] as Tab;
     this.updateSelectedTab(selectedTabIndex);
     this.emitClickEvent(selectedTabIndex + 1);
+
+    if (this.showPlayButton && !this._isPaused) {
+      this._startAutoPlay();
+    }
   }
 
   getTab(el: HTMLElement | null): Tab | false {
@@ -921,6 +1004,56 @@ class UDExTabNavigation extends UI5Element {
       tab._isMobile = isMobile;
     });
   }
+
+  _startAutoPlay(): void {
+    this._stopAutoPlay();
+    this._isPaused = false;
+    this._autoPlayTimer = window.setInterval(() => {
+      this._advanceTab();
+    }, this.autoPlayInterval);
+  }
+
+  _stopAutoPlay(): void {
+    if (this._autoPlayTimer !== undefined) {
+      window.clearInterval(this._autoPlayTimer);
+      this._autoPlayTimer = undefined;
+    }
+  }
+
+  _advanceTab(): void {
+    const currentIndex = (this.items as Array<Tab>).findIndex(item => item === this._selectedTab);
+    const nextIndex = (currentIndex + 1) % this.items.length;
+    this._selectedTab = this.items[nextIndex] as Tab;
+    this.updateSelectedTab(nextIndex);
+    this.emitClickEvent(nextIndex + 1);
+  }
+
+  onPlayButtonClick(): void {
+    if (this._isPaused) {
+      this._startAutoPlay();
+    } else {
+      this._stopAutoPlay();
+      this._isPaused = true;
+    }
+  }
+
+  get showPlayButton(): boolean {
+    return this.isVertical && this.autoPlay;
+  }
+
+  get showFooterSlot(): boolean {
+    return this.isVertical && this.footer?.length > 0;
+  }
+
+  get playBtnIcon(): string {
+    return this._isPaused ? "play" : "pause";
+  }
+
+  get playBtnTooltipText(): string {
+    return this._isPaused
+      ? translate(UDExTabNavigation, PLAY_BUTTON_ACCESSIBLE_NAME)
+      : translate(UDExTabNavigation, PAUSE_BUTTON_ACCESSIBLE_NAME);
+  }
 }
 
 UDExTabNavigation.define();