@sapudex/web-components 2.47.0 → 2.49.0

package/src/Carousel.ts

@@ -7,15 +7,21 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.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 ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import {
   isUp, isDown, isRight, isLeft,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import { CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT } from "./generated/i18n/i18n-defaults.js";
+import {
+  CAROUSEL_NEXT_ARROW_TEXT,
+  CAROUSEL_PREVIOUS_ARROW_TEXT,
+  CAROUSEL_AUTOPLAY_TOGGLE_START,
+  CAROUSEL_AUTOPLAY_TOGGLE_STOP,
+} from "./generated/i18n/i18n-defaults.js";
 import redirectAttributes from "./utils/redirectAttributes.js";
 import type UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
 import type { CarouselNavigateEventDetail } from "@ui5/webcomponents/dist/Carousel.js";
 import type { UI5CustomEvent } from "@ui5/webcomponents-base";
-import type Icon from "@ui5/webcomponents/dist/Icon.js";
 import translate from "./utils/translate.js";
 
 import CarouselTemplate from "./CarouselTemplate.js";
@@ -23,7 +29,6 @@ import CarouselTemplate from "./CarouselTemplate.js";
 // Styles
 import CarouselCss from "./generated/themes/Carousel.css.js";
 import type CarouselPageIndicatorType from "@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js";
-import type UDExButton from "./Button.js";
 
 export enum UDExCarouselNavigationPosition {
   top = "top",
@@ -35,6 +40,10 @@ export enum UDExCarouselButtonDesign {
   Tertiary = "Tertiary",
 }
 
+type UDExCarouselAutoplayToggleEventDetails = {
+  isPaused: boolean;
+}
+
 /**
  * @class
  *
@@ -65,10 +74,18 @@ export enum UDExCarouselButtonDesign {
  * @param { CustomEvent }
  */
 @event("navigate")
+/**
+ * Fired event when the user click on a play/paused button.
+ *
+ * @public
+ * @param {boolean} isPaused - Indicates current state of autoplay
+ */
+@event("autoplay-toggle-click", { bubbles: true })
 
 class UDExCarousel extends UI5Element {
   eventDetails!: {
     "navigate": CarouselNavigateEventDetail,
+    "autoplay-toggle-click": UDExCarouselAutoplayToggleEventDetails,
   };
   /**
    * Defines the position of the navigation.
@@ -83,6 +100,37 @@ class UDExCarousel extends UI5Element {
    */
   @property()
     navigationPlacement: `${UDExCarouselNavigationPosition}` = UDExCarouselNavigationPosition.top;
+  /**
+   * Controls carousel autoplay functionality
+   * @public
+   * @default undefined
+   */
+  @property({ type: Boolean })
+    autoplay?: boolean;
+
+  /**
+   * Defines carousel autoplay speed in milliseconds till next slide
+   * @public
+   */
+  @property({ type: Number })
+    autoplaySpeed: number = 2000;
+
+  /**
+   * Indicates current state of autoplay.
+   *
+   * @default true
+   * @private
+   */
+  @property({ type: Boolean })
+    _autoplayIsPaused = true;
+
+  /**
+   * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.
+   * @public
+   * @default false
+   */
+  @property({ type: Boolean })
+    cyclic?: boolean;
 
   /**
    * Defines the content of the component.
@@ -148,46 +196,145 @@ class UDExCarousel extends UI5Element {
   @property({ type: String })
     accessibleName: string = "";
 
+  /**
+   * Tracks whether the inner carousel has multiple pages (updated after render).
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean, noAttribute: true })
+    _hasManyPages = false;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  get nextPageText(): string {
-    return translate(UDExCarousel, CAROUSEL_NEXT_ARROW_TEXT);
+  _autoplayInterval: ReturnType<typeof setInterval> | null = null;
+  _autoplayLastToggle = Date.now();
+  _autoplayMinTimeBetweenToggle = 250;
+  _autoplayManualStop = false;
+  _resizeHandler: ResizeObserverCallback;
+
+  constructor() {
+    super();
+    this._resizeHandler = this._onResize.bind(this);
   }
 
-  get previousPageText(): string {
-    return translate(UDExCarousel, CAROUSEL_PREVIOUS_ARROW_TEXT);
+  onAfterRendering() {
+    redirectAttributes(this, "carousel");
+
+    this._calculateDisabledButtonsState();
+
+    if (this._autoplayInterval === null) {
+      this._startAutoplay();
+    }
   }
 
-  get carouselClass(): string {
-    const classes = "udex-carousel";
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._resizeHandler);
 
-    return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;
+    if (this._autoplayInterval) {
+      clearInterval(this._autoplayInterval);
+    }
   }
 
-  get buttonDesign(): UDExCarouselButtonDesign {
-    return this.navigationPlacement === UDExCarouselNavigationPosition.top
-      ? UDExCarouselButtonDesign.Secondary
-      : UDExCarouselButtonDesign.Tertiary;
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._resizeHandler);
   }
 
-  get showNavigationButtons(): { top: boolean; bottom: boolean } {
-    return {
-      top: this.navigationPlacement === UDExCarouselNavigationPosition.top,
-      bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom,
-    };
+  _onResize(): void {
+    this._hasManyPages = this._carousel?.hasManyPages ?? false;
   }
 
-  get _hidePageIndicator(): boolean {
-    return this.navigationPlacement === UDExCarouselNavigationPosition.top;
+  _autoplayLoop = () => {
+    const items = this._carousel?.items;
+    if (!items) {
+      return;
+    }
+
+    const currentSlide = this._carousel._currentPageIndex;
+    const itemsPerPage = this._carousel.effectiveItemsPerPage;
+    const isLastSlide = currentSlide === (items.length - itemsPerPage);
+
+    if (isLastSlide && !this.cyclic) {
+      this._stopAutoplay();
+      this._autoplayManualStop = true;
+
+      return;
+    }
+
+    const nextSlide = isLastSlide ? 0 : (currentSlide + itemsPerPage);
+
+    this._carousel?.navigateTo(nextSlide);
+    this._calculateDisabledButtonsState();
+  };
+
+  _startAutoplay(): void {
+    if (!this.autoplay) {
+      return;
+    }
+
+    if (!this._carousel?.items) {
+      console.warn("[UDExCarousel] Cannot start autoplay on an empty carousel");
+      return;
+    }
+
+    const toggleBuffer = Date.now() - this._autoplayLastToggle;
+    if (this._autoplayInterval !== null && toggleBuffer <= this._autoplayMinTimeBetweenToggle) {
+      this._autoplayLastToggle = Date.now();
+      return;
+    }
+
+    if (this._autoplayInterval !== null) {
+      clearInterval(this._autoplayInterval);
+    }
+
+    this._autoplayInterval = setInterval(this._autoplayLoop, this.autoplaySpeed);
+    this._autoplayIsPaused = false;
+    this._autoplayLastToggle = Date.now();
   }
 
-  get _carousel(): UI5Carousel | null {
-    return this.shadowRoot!.querySelector<UI5Carousel>("[ui5-carousel]");
+  _stopAutoplay(): void {
+    if (!this._autoplayInterval) {
+      return;
+    }
+
+    clearInterval(this._autoplayInterval);
+    this._autoplayIsPaused = true;
+    this._autoplayLastToggle = Date.now();
+  }
+
+  _onAutoplayToggleClick(): void {
+    if (this._autoplayIsPaused) {
+      this._startAutoplay();
+      this._autoplayManualStop = false;
+    } else {
+      this._stopAutoplay();
+      this._autoplayManualStop = true;
+    }
+
+    this.fireDecoratorEvent("autoplay-toggle-click", {
+      isPaused: this._autoplayIsPaused,
+    });
+  }
+
+  _onFocusIn(): void {
+    this._stopAutoplay();
+  }
+
+  _onFocusOut(): void {
+    if (!this._autoplayManualStop) {
+      this._startAutoplay();
+    }
   }
 
-  get _ui5CarouselRoot(): HTMLElement | null | undefined {
-    return this._carousel?.shadowRoot?.querySelector(".ui5-carousel-root");
+  _onMouseEnter(): void {
+    this._stopAutoplay();
+  }
+
+  _onMouseLeave(): void {
+    if (!this._autoplayManualStop) {
+      this._startAutoplay();
+    }
   }
 
   _calculateDisabledButtonsState() {
@@ -195,20 +342,22 @@ class UDExCarousel extends UI5Element {
     this.isNextButtonDisabled = !this._carousel?.hasNext;
   }
 
-  _prevButtonClick(e: UI5CustomEvent<UDExButton, "click">) {
-    if (this.isPrevButtonDisabled) {
+  _prevButtonClick() {
+    if (this.isPrevButtonDisabled || !this._carousel) {
       return;
     }
 
-    this._carousel?._navButtonClick(e as unknown as UI5CustomEvent<Icon, "click">);
+    this._carousel.navigateLeft();
+    this._calculateDisabledButtonsState();
   }
 
-  _nextButtonClick(e: UI5CustomEvent<UDExButton, "click">) {
-    if (this.isNextButtonDisabled) {
+  _nextButtonClick() {
+    if (this.isNextButtonDisabled || !this._carousel) {
       return;
     }
 
-    this._carousel?._navButtonClick(e as unknown as UI5CustomEvent<Icon, "click">);
+    this._carousel.navigateRight();
+    this._calculateDisabledButtonsState();
   }
 
   _onkeydown(e: KeyboardEvent) {
@@ -223,13 +372,73 @@ class UDExCarousel extends UI5Element {
     this.fireDecoratorEvent("navigate", e.detail);
   }
 
-  onAfterRendering() {
-    redirectAttributes(this, "carousel");
+  get nextPageText(): string {
+    return translate(UDExCarousel, CAROUSEL_NEXT_ARROW_TEXT);
+  }
 
-    this._calculateDisabledButtonsState();
+  get previousPageText(): string {
+    return translate(UDExCarousel, CAROUSEL_PREVIOUS_ARROW_TEXT);
+  }
+
+  get carouselClass(): string {
+    const classes = "udex-carousel";
+
+    return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;
+  }
+
+  get navigationWrapperClass(): string {
+    let _class = "udex-carousel__navigation-wrapper";
+
+    if (this.autoplay) {
+      _class += " udex-carousel__navigation-wrapper--autoplay";
+    }
+
+    return _class;
+  }
+
+  get navigationButtonWrapperClass(): string {
+    let _class = "udex-carousel__navigation-button-wrapper";
+
+    if (this._carousel?.isPageTypeDots) {
+      _class += " udex-carousel__navigation-button-wrapper--dot-indicators";
+    }
+
+    return _class;
+  }
+
+  get buttonDesign(): UDExCarouselButtonDesign {
+    return this.navigationPlacement === UDExCarouselNavigationPosition.top
+      ? UDExCarouselButtonDesign.Secondary
+      : UDExCarouselButtonDesign.Tertiary;
+  }
+
+  get showNavigationButtons(): { top: boolean; bottom: boolean } {
+    return {
+      top: this.navigationPlacement === UDExCarouselNavigationPosition.top && this._hasManyPages,
+      bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom && this._hasManyPages,
+    };
+  }
+
+  get _hidePageIndicator(): boolean {
+    return this.navigationPlacement === UDExCarouselNavigationPosition.top;
+  }
+
+  get _carousel(): UI5Carousel | null {
+    return this.shadowRoot!.querySelector<UI5Carousel>("[ui5-carousel]");
+  }
+
+  get _isBottomNavigation(): boolean {
+    return this.navigationPlacement === UDExCarouselNavigationPosition.bottom;
+  }
+
+  get autoplayToggleButtonTooltipText(): string {
+    return this._autoplayIsPaused
+      ? translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_START)
+      : translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_STOP);
   }
 }
 
 UDExCarousel.define();
 
 export default UDExCarousel;
+export type { CarouselNavigateEventDetail, UDExCarouselAutoplayToggleEventDetails };

package/src/CarouselTemplate.tsx

@@ -2,15 +2,19 @@ import type Carousel from "./Carousel.js";
 import UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
 import UDExButton from "./Button.js";
 import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
 import type SlottedChild from "@ui5/webcomponents-base/dist/UI5Element.js";
 import CarouselArrowsPlacement from "@ui5/webcomponents/dist/types/CarouselArrowsPlacement.js";
 import slimArrowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import play from "@ui5/webcomponents-icons/dist/play.js";
+import pause from "@ui5/webcomponents-icons/dist/pause.js";
 
 export default function CarouselTemplate(this: Carousel) {
   return (
     <div className={this.carouselClass} onKeyDown={this._onkeydown}>
       {this.showNavigationButtons.top && navigation.call(this)}
+
       <UI5Carousel
         itemsPerPage={this.itemsPerPage}
         pageIndicatorType={this.pageIndicatorType}
@@ -19,11 +23,20 @@ export default function CarouselTemplate(this: Carousel) {
         arrowsPlacement={CarouselArrowsPlacement.Navigation}
         accessibleName={this.accessibleName}
         hidePageIndicator={this._hidePageIndicator}
-        onNavigate={this._handleNavigate}>
-        {this.items.map(item =>
-          <slot name={(item as SlottedChild)._individualSlot}></slot>
-        )}
+        onNavigate={this._handleNavigate}
+        onMouseEnter={this._onMouseEnter}
+        onMouseLeave={this._onMouseLeave}
+        onFocusIn={this._onFocusIn}
+        onFocusOut={this._onFocusOut}
+        cyclic={this.cyclic}
+      >
+        {
+          this.items.map(item =>
+            <slot name={(item as SlottedChild)._individualSlot}></slot>
+          )
+        }
       </UI5Carousel>
+
       {this.showNavigationButtons.bottom && navigation.call(this)}
     </div>
   );
@@ -31,31 +44,57 @@ export default function CarouselTemplate(this: Carousel) {
 
 function navigation(this: Carousel) {
   const btnClassName = "udex-carousel__navigation-button";
+  const icon = this._autoplayIsPaused ? play : pause;
 
   return (
-    <div class="udex-carousel__navigation-wrapper" part="navigation">
-      <UDExButton
-        data-ui5-arrow-back
-        size={UDExButtonSize.Large}
-        disabled={this.isPrevButtonDisabled}
-        class={btnClassName}
-        icon={slimArrowLeft}
-        design={this.buttonDesign}
-        tooltip={this.previousPageText}
-        onClick={this._prevButtonClick}
-        part="prev-button">
-      </UDExButton>
-      <UDExButton
-        data-ui5-arrow-forward
-        size={UDExButtonSize.Large}
-        disabled={this.isNextButtonDisabled}
-        class={btnClassName}
-        icon={slimArrowRight}
-        design={this.buttonDesign}
-        tooltip={this.nextPageText}
-        onClick={this._nextButtonClick}
-        part="next-button">
-      </UDExButton>
+    <div className={this.navigationWrapperClass} part="navigation">
+      {
+        this.autoplay &&
+        <UDExButton
+          class={`udex-carousel__autoplay-toggle-button`}
+          size={UDExButtonSize.Large}
+          design={UDExButtonDesign.Tertiary}
+          icon={icon}
+          onClick={this._onAutoplayToggleClick}
+          tooltip={this.autoplayToggleButtonTooltipText}
+        ></UDExButton>
+      }
+
+      <div className={this.navigationButtonWrapperClass}>
+        <UDExButton
+          data-ui5-arrow-back
+          size={UDExButtonSize.Large}
+          disabled={this.isPrevButtonDisabled}
+          class={btnClassName}
+          icon={slimArrowLeft}
+          design={this.buttonDesign}
+          tooltip={this.previousPageText}
+          onClick={this._prevButtonClick}
+          part="prev-button">
+        </UDExButton>
+
+        {
+          this._isBottomNavigation &&
+          <div className="udex-carousel__navigation-page-indicator-spacer" />
+        }
+
+        <UDExButton
+          data-ui5-arrow-forward
+          size={UDExButtonSize.Large}
+          disabled={this.isNextButtonDisabled}
+          class={btnClassName}
+          icon={slimArrowRight}
+          design={this.buttonDesign}
+          tooltip={this.nextPageText}
+          onClick={this._nextButtonClick}
+          part="next-button">
+        </UDExButton>
+      </div>
+
+      {
+        this.autoplay && this._isBottomNavigation &&
+        <div className="udex-carousel__navigation-spacer"></div>
+      }
     </div>
   );
 }

package/src/DatePicker.ts

@@ -215,6 +215,13 @@ class UDExDatePicker extends DateComponentBase {
   @property()
     _tempValue!: string;
 
+  /**
+   * Tracks whether the calendar popover is currently open, used to reflect aria-expanded on the control button.
+   * @private
+   */
+  @property({ type: Boolean, noAttribute: true })
+    _isPopoverOpen: boolean = false;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -237,6 +244,7 @@ class UDExDatePicker extends DateComponentBase {
   }
 
   _afterDropdownClose(): void {
+    this._isPopoverOpen = false;
     this._dropdownTrigger.active = false;
     this._dropdownTrigger.iconActive = false;
     this._dropdownTrigger.shadowRoot?.querySelector("input")?.blur();
@@ -244,6 +252,7 @@ class UDExDatePicker extends DateComponentBase {
   }
 
   _afterDropdownOpen(): void {
+    this._isPopoverOpen = true;
     this._dropdownTrigger.iconActive = true;
   }
 

package/src/DatePickerTemplate.tsx

@@ -7,7 +7,6 @@ export default function DatePickerTemplate(this: DatePicker) {
     <>
       <UDExTextField
         class="udex-date-picker__input"
-        _aria-has-popup="grid"
         icon="appointment-2"
         value={this.value}
         placeholder={this._effectivePlaceholder}
@@ -15,6 +14,8 @@ export default function DatePickerTemplate(this: DatePicker) {
         accessible-name={this.dateAccessibleName}
         accessible-name-ref={this.accessibleNameRef}
         accessible-icon-name={this.accessibleIconName}
+        _icon-aria-has-popup="grid"
+        _icon-aria-expanded={this._isPopoverOpen ? "true" : "false"}
         {...(this.disabled ? { "disabled": true } : {})}
         {...(this.required ? { "required": true } : {})}
         {...(this.readonly ? { "readonly": true } : {})}

package/src/FilterMenu.ts

@@ -296,19 +296,19 @@ class UDExFilterMenu extends UDExSearchableListBase {
     accessibleNameRef!: string;
   /**
    * Allows setting a custom role.
-   * @default "None"
+   * @default "Dialog"
    * @public
    */
   @property()
-    accessibleRole: `${PopupAccessibleRole}` = PopupAccessibleRole.None;
+    accessibleRole: `${PopupAccessibleRole}` = PopupAccessibleRole.Dialog;
 
   /**
    * Allows setting a custom role for dropdown trigger.
-   * @default "combobox"
+   * @default "button"
    * @public
    */
   @property({ type: String })
-    triggerAccessibleRole: string = "combobox";
+    triggerAccessibleRole: string = "button";
 
   /**
    * Determines whether the filter should be applied.
@@ -591,6 +591,27 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return translate(UDExFilterMenu, SELECT_OPTIONS);
   }
 
+  /**
+   * FilterMenu uses the ARIA tree pattern for genuinely grouped items when:
+   *   - MultiSelect mode (headers/items expose aria-checked), or
+   *   - SingleSelect mode with at least one collapsible group
+   *     (headers expose aria-expanded, items expose aria-selected).
+   *
+   * A "Select All" header is NOT a hierarchical group — it is a bulk-select
+   * affordance for a flat list — so it must not trigger the tree pattern.
+   */
+  override get isTreeStructure(): boolean {
+    const groups = this._filteredItems.filter(e => e.isGroup && !(e.item as UDExListGroupHeaderBase).isSelectAllHeader);
+    if (!groups.length) {
+      return false;
+    }
+    if (this.modeMultiSelect) {
+      return true;
+    }
+    return this.modeSingleSelect
+      && groups.some(e => (e.item as UDExListGroupHeaderBase).collapsible);
+  }
+
   get triggerButtonAccessibleName(): string {
     return this.accessibleName || translate(UDExFilterMenu, SELECT_OPTIONS);
   }

package/src/FilterMenuTemplate.tsx

@@ -19,7 +19,7 @@ export default function FilterMenuTemplate(this: UDExFilterMenu) {
         aria-label={this.triggerButtonAccessibleName}
         aria-labelledby={this.accessibleNameRef}
         aria-expanded={this._open}
-        aria-haspopup="true"
+        aria-haspopup="dialog"
         role={this.triggerAccessibleRole as AriaRole}
         aria-controls={`${this._id}_udex-filter-menu-dropdown`}
         disabled={this.disabled}