@sapudex/web-components 2.47.0 → 2.49.0

package/dist/Carousel.d.ts

@@ -1,11 +1,11 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.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 CarouselPageIndicatorType from "@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js";
-import type UDExButton from "./Button.js";
 export declare enum UDExCarouselNavigationPosition {
     top = "top",
     bottom = "bottom"
@@ -14,6 +14,9 @@ export declare enum UDExCarouselButtonDesign {
     Secondary = "Secondary",
     Tertiary = "Tertiary"
 }
+type UDExCarouselAutoplayToggleEventDetails = {
+    isPaused: boolean;
+};
 /**
  * @class
  *
@@ -35,6 +38,7 @@ export declare enum UDExCarouselButtonDesign {
 declare class UDExCarousel extends UI5Element {
     eventDetails: {
         "navigate": CarouselNavigateEventDetail;
+        "autoplay-toggle-click": UDExCarouselAutoplayToggleEventDetails;
     };
     /**
      * Defines the position of the navigation.
@@ -48,6 +52,30 @@ declare class UDExCarousel extends UI5Element {
      * @public
      */
     navigationPlacement: `${UDExCarouselNavigationPosition}`;
+    /**
+     * Controls carousel autoplay functionality
+     * @public
+     * @default undefined
+     */
+    autoplay?: boolean;
+    /**
+     * Defines carousel autoplay speed in milliseconds till next slide
+     * @public
+     */
+    autoplaySpeed: number;
+    /**
+     * Indicates current state of autoplay.
+     *
+     * @default true
+     * @private
+     */
+    _autoplayIsPaused: boolean;
+    /**
+     * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.
+     * @public
+     * @default false
+     */
+    cyclic?: boolean;
     /**
      * Defines the content of the component.
      *
@@ -100,10 +128,42 @@ declare class UDExCarousel extends UI5Element {
      * @public
      */
     accessibleName: string;
+    /**
+     * Tracks whether the inner carousel has multiple pages (updated after render).
+     *
+     * @default false
+     * @private
+     */
+    _hasManyPages: boolean;
     static i18nBundle: I18nBundle;
+    _autoplayInterval: ReturnType<typeof setInterval> | null;
+    _autoplayLastToggle: number;
+    _autoplayMinTimeBetweenToggle: number;
+    _autoplayManualStop: boolean;
+    _resizeHandler: ResizeObserverCallback;
+    constructor();
+    onAfterRendering(): void;
+    onExitDOM(): void;
+    onEnterDOM(): void;
+    _onResize(): void;
+    _autoplayLoop: () => void;
+    _startAutoplay(): void;
+    _stopAutoplay(): void;
+    _onAutoplayToggleClick(): void;
+    _onFocusIn(): void;
+    _onFocusOut(): void;
+    _onMouseEnter(): void;
+    _onMouseLeave(): void;
+    _calculateDisabledButtonsState(): void;
+    _prevButtonClick(): void;
+    _nextButtonClick(): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _handleNavigate(e: UI5CustomEvent<UI5Carousel, "navigate">): void;
     get nextPageText(): string;
     get previousPageText(): string;
     get carouselClass(): string;
+    get navigationWrapperClass(): string;
+    get navigationButtonWrapperClass(): string;
     get buttonDesign(): UDExCarouselButtonDesign;
     get showNavigationButtons(): {
         top: boolean;
@@ -111,12 +171,8 @@ declare class UDExCarousel extends UI5Element {
     };
     get _hidePageIndicator(): boolean;
     get _carousel(): UI5Carousel | null;
-    get _ui5CarouselRoot(): HTMLElement | null | undefined;
-    _calculateDisabledButtonsState(): void;
-    _prevButtonClick(e: UI5CustomEvent<UDExButton, "click">): void;
-    _nextButtonClick(e: UI5CustomEvent<UDExButton, "click">): void;
-    _onkeydown(e: KeyboardEvent): void;
-    _handleNavigate(e: UI5CustomEvent<UI5Carousel, "navigate">): void;
-    onAfterRendering(): void;
+    get _isBottomNavigation(): boolean;
+    get autoplayToggleButtonTooltipText(): string;
 }
 export default UDExCarousel;
+export type { CarouselNavigateEventDetail, UDExCarouselAutoplayToggleEventDetails };

package/dist/Carousel.js

@@ -12,8 +12,9 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 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 ResizeHandler 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 translate from "./utils/translate.js";
 import CarouselTemplate from "./CarouselTemplate.js";
@@ -49,7 +50,7 @@ export var UDExCarouselButtonDesign;
  */
 let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * Defines the position of the navigation.
          * <br><br>
@@ -62,6 +63,18 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
          * @public
          */
         this.navigationPlacement = UDExCarouselNavigationPosition.top;
+        /**
+         * Defines carousel autoplay speed in milliseconds till next slide
+         * @public
+         */
+        this.autoplaySpeed = 2000;
+        /**
+         * Indicates current state of autoplay.
+         *
+         * @default true
+         * @private
+         */
+        this._autoplayIsPaused = true;
         /**
          * Defines the number of items per page depending on the carousel width.
          *
@@ -93,52 +106,129 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
          * @public
          */
         this.accessibleName = "";
+        /**
+         * Tracks whether the inner carousel has multiple pages (updated after render).
+         *
+         * @default false
+         * @private
+         */
+        this._hasManyPages = false;
+        this._autoplayInterval = null;
+        this._autoplayLastToggle = Date.now();
+        this._autoplayMinTimeBetweenToggle = 250;
+        this._autoplayManualStop = false;
+        this._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();
+        };
+        this._resizeHandler = this._onResize.bind(this);
     }
-    get nextPageText() {
-        return translate(UDExCarousel_1, CAROUSEL_NEXT_ARROW_TEXT);
+    onAfterRendering() {
+        redirectAttributes(this, "carousel");
+        this._calculateDisabledButtonsState();
+        if (this._autoplayInterval === null) {
+            this._startAutoplay();
+        }
     }
-    get previousPageText() {
-        return translate(UDExCarousel_1, CAROUSEL_PREVIOUS_ARROW_TEXT);
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._resizeHandler);
+        if (this._autoplayInterval) {
+            clearInterval(this._autoplayInterval);
+        }
     }
-    get carouselClass() {
-        const classes = "udex-carousel";
-        return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;
+    onEnterDOM() {
+        ResizeHandler.register(this, this._resizeHandler);
     }
-    get buttonDesign() {
-        return this.navigationPlacement === UDExCarouselNavigationPosition.top
-            ? UDExCarouselButtonDesign.Secondary
-            : UDExCarouselButtonDesign.Tertiary;
+    _onResize() {
+        this._hasManyPages = this._carousel?.hasManyPages ?? false;
     }
-    get showNavigationButtons() {
-        return {
-            top: this.navigationPlacement === UDExCarouselNavigationPosition.top,
-            bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom,
-        };
+    _startAutoplay() {
+        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 _hidePageIndicator() {
-        return this.navigationPlacement === UDExCarouselNavigationPosition.top;
+    _stopAutoplay() {
+        if (!this._autoplayInterval) {
+            return;
+        }
+        clearInterval(this._autoplayInterval);
+        this._autoplayIsPaused = true;
+        this._autoplayLastToggle = Date.now();
     }
-    get _carousel() {
-        return this.shadowRoot.querySelector("[ui5-carousel]");
+    _onAutoplayToggleClick() {
+        if (this._autoplayIsPaused) {
+            this._startAutoplay();
+            this._autoplayManualStop = false;
+        }
+        else {
+            this._stopAutoplay();
+            this._autoplayManualStop = true;
+        }
+        this.fireDecoratorEvent("autoplay-toggle-click", {
+            isPaused: this._autoplayIsPaused,
+        });
+    }
+    _onFocusIn() {
+        this._stopAutoplay();
+    }
+    _onFocusOut() {
+        if (!this._autoplayManualStop) {
+            this._startAutoplay();
+        }
     }
-    get _ui5CarouselRoot() {
-        return this._carousel?.shadowRoot?.querySelector(".ui5-carousel-root");
+    _onMouseEnter() {
+        this._stopAutoplay();
+    }
+    _onMouseLeave() {
+        if (!this._autoplayManualStop) {
+            this._startAutoplay();
+        }
     }
     _calculateDisabledButtonsState() {
         this.isPrevButtonDisabled = !this._carousel?.hasPrev;
         this.isNextButtonDisabled = !this._carousel?.hasNext;
     }
-    _prevButtonClick(e) {
-        if (this.isPrevButtonDisabled) {
+    _prevButtonClick() {
+        if (this.isPrevButtonDisabled || !this._carousel) {
             return;
         }
-        this._carousel?._navButtonClick(e);
+        this._carousel.navigateLeft();
+        this._calculateDisabledButtonsState();
     }
-    _nextButtonClick(e) {
-        if (this.isNextButtonDisabled) {
+    _nextButtonClick() {
+        if (this.isNextButtonDisabled || !this._carousel) {
             return;
         }
-        this._carousel?._navButtonClick(e);
+        this._carousel.navigateRight();
+        this._calculateDisabledButtonsState();
     }
     _onkeydown(e) {
         if (isLeft(e) || isDown(e) || isRight(e) || isUp(e)) {
@@ -149,14 +239,71 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
         this._calculateDisabledButtonsState();
         this.fireDecoratorEvent("navigate", e.detail);
     }
-    onAfterRendering() {
-        redirectAttributes(this, "carousel");
-        this._calculateDisabledButtonsState();
+    get nextPageText() {
+        return translate(UDExCarousel_1, CAROUSEL_NEXT_ARROW_TEXT);
+    }
+    get previousPageText() {
+        return translate(UDExCarousel_1, CAROUSEL_PREVIOUS_ARROW_TEXT);
+    }
+    get carouselClass() {
+        const classes = "udex-carousel";
+        return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;
+    }
+    get navigationWrapperClass() {
+        let _class = "udex-carousel__navigation-wrapper";
+        if (this.autoplay) {
+            _class += " udex-carousel__navigation-wrapper--autoplay";
+        }
+        return _class;
+    }
+    get navigationButtonWrapperClass() {
+        let _class = "udex-carousel__navigation-button-wrapper";
+        if (this._carousel?.isPageTypeDots) {
+            _class += " udex-carousel__navigation-button-wrapper--dot-indicators";
+        }
+        return _class;
+    }
+    get buttonDesign() {
+        return this.navigationPlacement === UDExCarouselNavigationPosition.top
+            ? UDExCarouselButtonDesign.Secondary
+            : UDExCarouselButtonDesign.Tertiary;
+    }
+    get showNavigationButtons() {
+        return {
+            top: this.navigationPlacement === UDExCarouselNavigationPosition.top && this._hasManyPages,
+            bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom && this._hasManyPages,
+        };
+    }
+    get _hidePageIndicator() {
+        return this.navigationPlacement === UDExCarouselNavigationPosition.top;
+    }
+    get _carousel() {
+        return this.shadowRoot.querySelector("[ui5-carousel]");
+    }
+    get _isBottomNavigation() {
+        return this.navigationPlacement === UDExCarouselNavigationPosition.bottom;
+    }
+    get autoplayToggleButtonTooltipText() {
+        return this._autoplayIsPaused
+            ? translate(UDExCarousel_1, CAROUSEL_AUTOPLAY_TOGGLE_START)
+            : translate(UDExCarousel_1, CAROUSEL_AUTOPLAY_TOGGLE_STOP);
     }
 };
 __decorate([
     property()
 ], UDExCarousel.prototype, "navigationPlacement", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExCarousel.prototype, "autoplay", void 0);
+__decorate([
+    property({ type: Number })
+], UDExCarousel.prototype, "autoplaySpeed", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExCarousel.prototype, "_autoplayIsPaused", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExCarousel.prototype, "cyclic", void 0);
 __decorate([
     slot({ "default": true, type: HTMLElement, individualSlots: true })
 ], UDExCarousel.prototype, "items", void 0);
@@ -175,6 +322,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], UDExCarousel.prototype, "accessibleName", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], UDExCarousel.prototype, "_hasManyPages", void 0);
 __decorate([
     i18n("@sapudex/web-components")
 ], UDExCarousel, "i18nBundle", void 0);
@@ -192,6 +342,14 @@ UDExCarousel = UDExCarousel_1 = __decorate([
      */
     ,
     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 })
 ], UDExCarousel);
 UDExCarousel.define();
 export default UDExCarousel;

package/dist/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../src/Carousel.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n  isUp, isDown, isRight, isLeft,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT } from \"./generated/i18n/i18n-defaults.js\";\nimport redirectAttributes from \"./utils/redirectAttributes.js\";\nimport type UI5Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\nimport type { CarouselNavigateEventDetail } from \"@ui5/webcomponents/dist/Carousel.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport type Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport translate from \"./utils/translate.js\";\n\nimport CarouselTemplate from \"./CarouselTemplate.js\";\n\n// Styles\nimport CarouselCss from \"./generated/themes/Carousel.css.js\";\nimport type CarouselPageIndicatorType from \"@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js\";\nimport type UDExButton from \"./Button.js\";\n\nexport enum UDExCarouselNavigationPosition {\n  top = \"top\",\n  bottom = \"bottom\",\n}\n\nexport enum UDExCarouselButtonDesign {\n  Secondary = \"Secondary\",\n  Tertiary = \"Tertiary\",\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-carousel</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Carousel.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-carousel\n * @public\n */\n@customElement({\n  tag: \"udex-carousel\",\n  renderer: jsxRenderer,\n  styles: CarouselCss,\n  template: CarouselTemplate,\n})\n/**\n * Triggered when carousel navigates to a new slide\n * @public\n * @param { CustomEvent }\n */\n@event(\"navigate\")\n\nclass UDExCarousel extends UI5Element {\n  eventDetails!: {\n    \"navigate\": CarouselNavigateEventDetail,\n  };\n  /**\n   * Defines the position of the navigation.\n   * <br><br>\n   * Available options are:\n   * <ul>\n   * <li><code>top</code> - the navigation button are placed above the component.</li>\n   * <li><code>bottom</code> - the navigation button arrows are placed below the component.</li>\n   * </ul>\n   *\n   * @public\n   */\n  @property()\n    navigationPlacement: `${UDExCarouselNavigationPosition}` = UDExCarouselNavigationPosition.top;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ \"default\": true, type: HTMLElement, individualSlots: true })\n    items!: DefaultSlot<HTMLElement>;\n\n  /**\n   * Defines the number of items per page depending on the carousel width.\n   *\n   * - 'S' for screens smaller than 600 pixels.\n   * - 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n   * - 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n   * - 'XL' for screens greater than or equal to 1440 pixels.\n   *\n   * One item per page is shown by default.\n   * @default \"S1 M1 L1 XL1\"\n   * @public\n   */\n  @property()\n    itemsPerPage = \"S1 M1 L1 XL1\";\n\n  /**\n   * Defines the style of the page indicator.\n   * Available options are:\n   *\n   * - `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)\n   * - `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)\n   * @since 1.10\n   * @default \"Default\"\n   * @public\n   */\n  @property()\n    pageIndicatorType: `${CarouselPageIndicatorType}` = \"Default\";\n\n  /**\n   * Defines the prev button is disabled\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isPrevButtonDisabled!: boolean;\n\n  /**\n   * Defines the next button is disabled\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isNextButtonDisabled!: boolean;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default ''\n   * @public\n   */\n  @property({ type: String })\n    accessibleName: string = \"\";\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  get nextPageText(): string {\n    return translate(UDExCarousel, CAROUSEL_NEXT_ARROW_TEXT);\n  }\n\n  get previousPageText(): string {\n    return translate(UDExCarousel, CAROUSEL_PREVIOUS_ARROW_TEXT);\n  }\n\n  get carouselClass(): string {\n    const classes = \"udex-carousel\";\n\n    return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;\n  }\n\n  get buttonDesign(): UDExCarouselButtonDesign {\n    return this.navigationPlacement === UDExCarouselNavigationPosition.top\n      ? UDExCarouselButtonDesign.Secondary\n      : UDExCarouselButtonDesign.Tertiary;\n  }\n\n  get showNavigationButtons(): { top: boolean; bottom: boolean } {\n    return {\n      top: this.navigationPlacement === UDExCarouselNavigationPosition.top,\n      bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom,\n    };\n  }\n\n  get _hidePageIndicator(): boolean {\n    return this.navigationPlacement === UDExCarouselNavigationPosition.top;\n  }\n\n  get _carousel(): UI5Carousel | null {\n    return this.shadowRoot!.querySelector<UI5Carousel>(\"[ui5-carousel]\");\n  }\n\n  get _ui5CarouselRoot(): HTMLElement | null | undefined {\n    return this._carousel?.shadowRoot?.querySelector(\".ui5-carousel-root\");\n  }\n\n  _calculateDisabledButtonsState() {\n    this.isPrevButtonDisabled = !this._carousel?.hasPrev;\n    this.isNextButtonDisabled = !this._carousel?.hasNext;\n  }\n\n  _prevButtonClick(e: UI5CustomEvent<UDExButton, \"click\">) {\n    if (this.isPrevButtonDisabled) {\n      return;\n    }\n\n    this._carousel?._navButtonClick(e as unknown as UI5CustomEvent<Icon, \"click\">);\n  }\n\n  _nextButtonClick(e: UI5CustomEvent<UDExButton, \"click\">) {\n    if (this.isNextButtonDisabled) {\n      return;\n    }\n\n    this._carousel?._navButtonClick(e as unknown as UI5CustomEvent<Icon, \"click\">);\n  }\n\n  _onkeydown(e: KeyboardEvent) {\n    if (isLeft(e) || isDown(e) || isRight(e) || isUp(e)) {\n      this._calculateDisabledButtonsState();\n    }\n  }\n\n  _handleNavigate(e: UI5CustomEvent<UI5Carousel, \"navigate\">): void {\n    this._calculateDisabledButtonsState();\n\n    this.fireDecoratorEvent(\"navigate\", e.detail);\n  }\n\n  onAfterRendering() {\n    redirectAttributes(this, \"carousel\");\n\n    this._calculateDisabledButtonsState();\n  }\n}\n\nUDExCarousel.define();\n\nexport default UDExCarousel;\n"]}
+{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../src/Carousel.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport {\n  isUp, isDown, isRight, isLeft,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport {\n  CAROUSEL_NEXT_ARROW_TEXT,\n  CAROUSEL_PREVIOUS_ARROW_TEXT,\n  CAROUSEL_AUTOPLAY_TOGGLE_START,\n  CAROUSEL_AUTOPLAY_TOGGLE_STOP,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport redirectAttributes from \"./utils/redirectAttributes.js\";\nimport type UI5Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\nimport type { CarouselNavigateEventDetail } from \"@ui5/webcomponents/dist/Carousel.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport translate from \"./utils/translate.js\";\n\nimport CarouselTemplate from \"./CarouselTemplate.js\";\n\n// Styles\nimport CarouselCss from \"./generated/themes/Carousel.css.js\";\nimport type CarouselPageIndicatorType from \"@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js\";\n\nexport enum UDExCarouselNavigationPosition {\n  top = \"top\",\n  bottom = \"bottom\",\n}\n\nexport enum UDExCarouselButtonDesign {\n  Secondary = \"Secondary\",\n  Tertiary = \"Tertiary\",\n}\n\ntype UDExCarouselAutoplayToggleEventDetails = {\n  isPaused: boolean;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-carousel</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Carousel.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-carousel\n * @public\n */\n@customElement({\n  tag: \"udex-carousel\",\n  renderer: jsxRenderer,\n  styles: CarouselCss,\n  template: CarouselTemplate,\n})\n/**\n * Triggered when carousel navigates to a new slide\n * @public\n * @param { CustomEvent }\n */\n@event(\"navigate\")\n/**\n * Fired event when the user click on a play/paused button.\n *\n * @public\n * @param {boolean} isPaused - Indicates current state of autoplay\n */\n@event(\"autoplay-toggle-click\", { bubbles: true })\n\nclass UDExCarousel extends UI5Element {\n  eventDetails!: {\n    \"navigate\": CarouselNavigateEventDetail,\n    \"autoplay-toggle-click\": UDExCarouselAutoplayToggleEventDetails,\n  };\n  /**\n   * Defines the position of the navigation.\n   * <br><br>\n   * Available options are:\n   * <ul>\n   * <li><code>top</code> - the navigation button are placed above the component.</li>\n   * <li><code>bottom</code> - the navigation button arrows are placed below the component.</li>\n   * </ul>\n   *\n   * @public\n   */\n  @property()\n    navigationPlacement: `${UDExCarouselNavigationPosition}` = UDExCarouselNavigationPosition.top;\n  /**\n   * Controls carousel autoplay functionality\n   * @public\n   * @default undefined\n   */\n  @property({ type: Boolean })\n    autoplay?: boolean;\n\n  /**\n   * Defines carousel autoplay speed in milliseconds till next slide\n   * @public\n   */\n  @property({ type: Number })\n    autoplaySpeed: number = 2000;\n\n  /**\n   * Indicates current state of autoplay.\n   *\n   * @default true\n   * @private\n   */\n  @property({ type: Boolean })\n    _autoplayIsPaused = true;\n\n  /**\n   * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    cyclic?: boolean;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ \"default\": true, type: HTMLElement, individualSlots: true })\n    items!: DefaultSlot<HTMLElement>;\n\n  /**\n   * Defines the number of items per page depending on the carousel width.\n   *\n   * - 'S' for screens smaller than 600 pixels.\n   * - 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n   * - 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n   * - 'XL' for screens greater than or equal to 1440 pixels.\n   *\n   * One item per page is shown by default.\n   * @default \"S1 M1 L1 XL1\"\n   * @public\n   */\n  @property()\n    itemsPerPage = \"S1 M1 L1 XL1\";\n\n  /**\n   * Defines the style of the page indicator.\n   * Available options are:\n   *\n   * - `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)\n   * - `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)\n   * @since 1.10\n   * @default \"Default\"\n   * @public\n   */\n  @property()\n    pageIndicatorType: `${CarouselPageIndicatorType}` = \"Default\";\n\n  /**\n   * Defines the prev button is disabled\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isPrevButtonDisabled!: boolean;\n\n  /**\n   * Defines the next button is disabled\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isNextButtonDisabled!: boolean;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default ''\n   * @public\n   */\n  @property({ type: String })\n    accessibleName: string = \"\";\n\n  /**\n   * Tracks whether the inner carousel has multiple pages (updated after render).\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _hasManyPages = false;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _autoplayInterval: ReturnType<typeof setInterval> | null = null;\n  _autoplayLastToggle = Date.now();\n  _autoplayMinTimeBetweenToggle = 250;\n  _autoplayManualStop = false;\n  _resizeHandler: ResizeObserverCallback;\n\n  constructor() {\n    super();\n    this._resizeHandler = this._onResize.bind(this);\n  }\n\n  onAfterRendering() {\n    redirectAttributes(this, \"carousel\");\n\n    this._calculateDisabledButtonsState();\n\n    if (this._autoplayInterval === null) {\n      this._startAutoplay();\n    }\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._resizeHandler);\n\n    if (this._autoplayInterval) {\n      clearInterval(this._autoplayInterval);\n    }\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._resizeHandler);\n  }\n\n  _onResize(): void {\n    this._hasManyPages = this._carousel?.hasManyPages ?? false;\n  }\n\n  _autoplayLoop = () => {\n    const items = this._carousel?.items;\n    if (!items) {\n      return;\n    }\n\n    const currentSlide = this._carousel._currentPageIndex;\n    const itemsPerPage = this._carousel.effectiveItemsPerPage;\n    const isLastSlide = currentSlide === (items.length - itemsPerPage);\n\n    if (isLastSlide && !this.cyclic) {\n      this._stopAutoplay();\n      this._autoplayManualStop = true;\n\n      return;\n    }\n\n    const nextSlide = isLastSlide ? 0 : (currentSlide + itemsPerPage);\n\n    this._carousel?.navigateTo(nextSlide);\n    this._calculateDisabledButtonsState();\n  };\n\n  _startAutoplay(): void {\n    if (!this.autoplay) {\n      return;\n    }\n\n    if (!this._carousel?.items) {\n      console.warn(\"[UDExCarousel] Cannot start autoplay on an empty carousel\");\n      return;\n    }\n\n    const toggleBuffer = Date.now() - this._autoplayLastToggle;\n    if (this._autoplayInterval !== null && toggleBuffer <= this._autoplayMinTimeBetweenToggle) {\n      this._autoplayLastToggle = Date.now();\n      return;\n    }\n\n    if (this._autoplayInterval !== null) {\n      clearInterval(this._autoplayInterval);\n    }\n\n    this._autoplayInterval = setInterval(this._autoplayLoop, this.autoplaySpeed);\n    this._autoplayIsPaused = false;\n    this._autoplayLastToggle = Date.now();\n  }\n\n  _stopAutoplay(): void {\n    if (!this._autoplayInterval) {\n      return;\n    }\n\n    clearInterval(this._autoplayInterval);\n    this._autoplayIsPaused = true;\n    this._autoplayLastToggle = Date.now();\n  }\n\n  _onAutoplayToggleClick(): void {\n    if (this._autoplayIsPaused) {\n      this._startAutoplay();\n      this._autoplayManualStop = false;\n    } else {\n      this._stopAutoplay();\n      this._autoplayManualStop = true;\n    }\n\n    this.fireDecoratorEvent(\"autoplay-toggle-click\", {\n      isPaused: this._autoplayIsPaused,\n    });\n  }\n\n  _onFocusIn(): void {\n    this._stopAutoplay();\n  }\n\n  _onFocusOut(): void {\n    if (!this._autoplayManualStop) {\n      this._startAutoplay();\n    }\n  }\n\n  _onMouseEnter(): void {\n    this._stopAutoplay();\n  }\n\n  _onMouseLeave(): void {\n    if (!this._autoplayManualStop) {\n      this._startAutoplay();\n    }\n  }\n\n  _calculateDisabledButtonsState() {\n    this.isPrevButtonDisabled = !this._carousel?.hasPrev;\n    this.isNextButtonDisabled = !this._carousel?.hasNext;\n  }\n\n  _prevButtonClick() {\n    if (this.isPrevButtonDisabled || !this._carousel) {\n      return;\n    }\n\n    this._carousel.navigateLeft();\n    this._calculateDisabledButtonsState();\n  }\n\n  _nextButtonClick() {\n    if (this.isNextButtonDisabled || !this._carousel) {\n      return;\n    }\n\n    this._carousel.navigateRight();\n    this._calculateDisabledButtonsState();\n  }\n\n  _onkeydown(e: KeyboardEvent) {\n    if (isLeft(e) || isDown(e) || isRight(e) || isUp(e)) {\n      this._calculateDisabledButtonsState();\n    }\n  }\n\n  _handleNavigate(e: UI5CustomEvent<UI5Carousel, \"navigate\">): void {\n    this._calculateDisabledButtonsState();\n\n    this.fireDecoratorEvent(\"navigate\", e.detail);\n  }\n\n  get nextPageText(): string {\n    return translate(UDExCarousel, CAROUSEL_NEXT_ARROW_TEXT);\n  }\n\n  get previousPageText(): string {\n    return translate(UDExCarousel, CAROUSEL_PREVIOUS_ARROW_TEXT);\n  }\n\n  get carouselClass(): string {\n    const classes = \"udex-carousel\";\n\n    return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;\n  }\n\n  get navigationWrapperClass(): string {\n    let _class = \"udex-carousel__navigation-wrapper\";\n\n    if (this.autoplay) {\n      _class += \" udex-carousel__navigation-wrapper--autoplay\";\n    }\n\n    return _class;\n  }\n\n  get navigationButtonWrapperClass(): string {\n    let _class = \"udex-carousel__navigation-button-wrapper\";\n\n    if (this._carousel?.isPageTypeDots) {\n      _class += \" udex-carousel__navigation-button-wrapper--dot-indicators\";\n    }\n\n    return _class;\n  }\n\n  get buttonDesign(): UDExCarouselButtonDesign {\n    return this.navigationPlacement === UDExCarouselNavigationPosition.top\n      ? UDExCarouselButtonDesign.Secondary\n      : UDExCarouselButtonDesign.Tertiary;\n  }\n\n  get showNavigationButtons(): { top: boolean; bottom: boolean } {\n    return {\n      top: this.navigationPlacement === UDExCarouselNavigationPosition.top && this._hasManyPages,\n      bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom && this._hasManyPages,\n    };\n  }\n\n  get _hidePageIndicator(): boolean {\n    return this.navigationPlacement === UDExCarouselNavigationPosition.top;\n  }\n\n  get _carousel(): UI5Carousel | null {\n    return this.shadowRoot!.querySelector<UI5Carousel>(\"[ui5-carousel]\");\n  }\n\n  get _isBottomNavigation(): boolean {\n    return this.navigationPlacement === UDExCarouselNavigationPosition.bottom;\n  }\n\n  get autoplayToggleButtonTooltipText(): string {\n    return this._autoplayIsPaused\n      ? translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_START)\n      : translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_STOP);\n  }\n}\n\nUDExCarousel.define();\n\nexport default UDExCarousel;\nexport type { CarouselNavigateEventDetail, UDExCarouselAutoplayToggleEventDetails };\n"]}

package/dist/CarouselTemplate.js

@@ -2,14 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime"
 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 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() {
-    return (_jsxs("div", { className: this.carouselClass, onKeyDown: this._onkeydown, children: [this.showNavigationButtons.top && navigation.call(this), _jsx(UI5Carousel, { itemsPerPage: this.itemsPerPage, pageIndicatorType: this.pageIndicatorType, id: "carousel", hideNavigationArrows: true, arrowsPlacement: CarouselArrowsPlacement.Navigation, accessibleName: this.accessibleName, hidePageIndicator: this._hidePageIndicator, onNavigate: this._handleNavigate, children: this.items.map(item => _jsx("slot", { name: item._individualSlot })) }), this.showNavigationButtons.bottom && navigation.call(this)] }));
+    return (_jsxs("div", { className: this.carouselClass, onKeyDown: this._onkeydown, children: [this.showNavigationButtons.top && navigation.call(this), _jsx(UI5Carousel, { itemsPerPage: this.itemsPerPage, pageIndicatorType: this.pageIndicatorType, id: "carousel", hideNavigationArrows: true, arrowsPlacement: CarouselArrowsPlacement.Navigation, accessibleName: this.accessibleName, hidePageIndicator: this._hidePageIndicator, onNavigate: this._handleNavigate, onMouseEnter: this._onMouseEnter, onMouseLeave: this._onMouseLeave, onFocusIn: this._onFocusIn, onFocusOut: this._onFocusOut, cyclic: this.cyclic, children: this.items.map(item => _jsx("slot", { name: item._individualSlot })) }), this.showNavigationButtons.bottom && navigation.call(this)] }));
 }
 function navigation() {
     const btnClassName = "udex-carousel__navigation-button";
-    return (_jsxs("div", { class: "udex-carousel__navigation-wrapper", part: "navigation", children: [_jsx(UDExButton, { "data-ui5-arrow-back": true, size: UDExButtonSize.Large, disabled: this.isPrevButtonDisabled, class: btnClassName, icon: slimArrowLeft, design: this.buttonDesign, tooltip: this.previousPageText, onClick: this._prevButtonClick, part: "prev-button" }), _jsx(UDExButton, { "data-ui5-arrow-forward": true, size: UDExButtonSize.Large, disabled: this.isNextButtonDisabled, class: btnClassName, icon: slimArrowRight, design: this.buttonDesign, tooltip: this.nextPageText, onClick: this._nextButtonClick, part: "next-button" })] }));
+    const icon = this._autoplayIsPaused ? play : pause;
+    return (_jsxs("div", { className: this.navigationWrapperClass, part: "navigation", children: [this.autoplay &&
+                _jsx(UDExButton, { class: `udex-carousel__autoplay-toggle-button`, size: UDExButtonSize.Large, design: UDExButtonDesign.Tertiary, icon: icon, onClick: this._onAutoplayToggleClick, tooltip: this.autoplayToggleButtonTooltipText }), _jsxs("div", { className: this.navigationButtonWrapperClass, children: [_jsx(UDExButton, { "data-ui5-arrow-back": true, size: UDExButtonSize.Large, disabled: this.isPrevButtonDisabled, class: btnClassName, icon: slimArrowLeft, design: this.buttonDesign, tooltip: this.previousPageText, onClick: this._prevButtonClick, part: "prev-button" }), this._isBottomNavigation &&
+                        _jsx("div", { className: "udex-carousel__navigation-page-indicator-spacer" }), _jsx(UDExButton, { "data-ui5-arrow-forward": true, size: UDExButtonSize.Large, disabled: this.isNextButtonDisabled, class: btnClassName, icon: slimArrowRight, design: this.buttonDesign, tooltip: this.nextPageText, onClick: this._nextButtonClick, part: "next-button" })] }), this.autoplay && this._isBottomNavigation &&
+                _jsx("div", { className: "udex-carousel__navigation-spacer" })] }));
 }
 //# sourceMappingURL=CarouselTemplate.js.map

package/dist/CarouselTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselTemplate.js","sourceRoot":"","sources":["../src/CarouselTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAC9D,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,cAAc,MAAM,uBAAuB,CAAC;AAEnD,OAAO,uBAAuB,MAAM,0DAA0D,CAAC;AAC/F,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAC7E,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAE/E,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACtC,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,aAC3D,IAAI,CAAC,qBAAqB,CAAC,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACxD,KAAC,WAAW,IACV,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,EAAE,EAAC,UAAU,EACb,oBAAoB,QACpB,eAAe,EAAE,uBAAuB,CAAC,UAAU,EACnD,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,EAC1C,UAAU,EAAE,IAAI,CAAC,eAAe,YAC/B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACrB,eAAM,IAAI,EAAG,IAAqB,CAAC,eAAe,GAAS,CAC5D,GACW,EACb,IAAI,CAAC,qBAAqB,CAAC,MAAM,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IACvD,CACP,CAAC;AACJ,CAAC;AAED,SAAS,UAAU;IACjB,MAAM,YAAY,GAAG,kCAAkC,CAAC;IAExD,OAAO,CACL,eAAK,KAAK,EAAC,mCAAmC,EAAC,IAAI,EAAC,YAAY,aAC9D,KAAC,UAAU,iCAET,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,aAAa,GACP,EACb,KAAC,UAAU,oCAET,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,aAAa,GACP,IACT,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type Carousel from \"./Carousel.js\";\nimport UI5Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport type SlottedChild from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport CarouselArrowsPlacement from \"@ui5/webcomponents/dist/types/CarouselArrowsPlacement.js\";\nimport slimArrowLeft from \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nexport default function CarouselTemplate(this: Carousel) {\n  return (\n    <div className={this.carouselClass} onKeyDown={this._onkeydown}>\n      {this.showNavigationButtons.top && navigation.call(this)}\n      <UI5Carousel\n        itemsPerPage={this.itemsPerPage}\n        pageIndicatorType={this.pageIndicatorType}\n        id=\"carousel\"\n        hideNavigationArrows\n        arrowsPlacement={CarouselArrowsPlacement.Navigation}\n        accessibleName={this.accessibleName}\n        hidePageIndicator={this._hidePageIndicator}\n        onNavigate={this._handleNavigate}>\n        {this.items.map(item =>\n          <slot name={(item as SlottedChild)._individualSlot}></slot>\n        )}\n      </UI5Carousel>\n      {this.showNavigationButtons.bottom && navigation.call(this)}\n    </div>\n  );\n}\n\nfunction navigation(this: Carousel) {\n  const btnClassName = \"udex-carousel__navigation-button\";\n\n  return (\n    <div class=\"udex-carousel__navigation-wrapper\" part=\"navigation\">\n      <UDExButton\n        data-ui5-arrow-back\n        size={UDExButtonSize.Large}\n        disabled={this.isPrevButtonDisabled}\n        class={btnClassName}\n        icon={slimArrowLeft}\n        design={this.buttonDesign}\n        tooltip={this.previousPageText}\n        onClick={this._prevButtonClick}\n        part=\"prev-button\">\n      </UDExButton>\n      <UDExButton\n        data-ui5-arrow-forward\n        size={UDExButtonSize.Large}\n        disabled={this.isNextButtonDisabled}\n        class={btnClassName}\n        icon={slimArrowRight}\n        design={this.buttonDesign}\n        tooltip={this.nextPageText}\n        onClick={this._nextButtonClick}\n        part=\"next-button\">\n      </UDExButton>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"CarouselTemplate.js","sourceRoot":"","sources":["../src/CarouselTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type Carousel from \"./Carousel.js\";\nimport UI5Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\nimport type SlottedChild from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport CarouselArrowsPlacement from \"@ui5/webcomponents/dist/types/CarouselArrowsPlacement.js\";\nimport slimArrowLeft from \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport play from \"@ui5/webcomponents-icons/dist/play.js\";\nimport pause from \"@ui5/webcomponents-icons/dist/pause.js\";\n\nexport default function CarouselTemplate(this: Carousel) {\n  return (\n    <div className={this.carouselClass} onKeyDown={this._onkeydown}>\n      {this.showNavigationButtons.top && navigation.call(this)}\n\n      <UI5Carousel\n        itemsPerPage={this.itemsPerPage}\n        pageIndicatorType={this.pageIndicatorType}\n        id=\"carousel\"\n        hideNavigationArrows\n        arrowsPlacement={CarouselArrowsPlacement.Navigation}\n        accessibleName={this.accessibleName}\n        hidePageIndicator={this._hidePageIndicator}\n        onNavigate={this._handleNavigate}\n        onMouseEnter={this._onMouseEnter}\n        onMouseLeave={this._onMouseLeave}\n        onFocusIn={this._onFocusIn}\n        onFocusOut={this._onFocusOut}\n        cyclic={this.cyclic}\n      >\n        {\n          this.items.map(item =>\n            <slot name={(item as SlottedChild)._individualSlot}></slot>\n          )\n        }\n      </UI5Carousel>\n\n      {this.showNavigationButtons.bottom && navigation.call(this)}\n    </div>\n  );\n}\n\nfunction navigation(this: Carousel) {\n  const btnClassName = \"udex-carousel__navigation-button\";\n  const icon = this._autoplayIsPaused ? play : pause;\n\n  return (\n    <div className={this.navigationWrapperClass} part=\"navigation\">\n      {\n        this.autoplay &&\n        <UDExButton\n          class={`udex-carousel__autoplay-toggle-button`}\n          size={UDExButtonSize.Large}\n          design={UDExButtonDesign.Tertiary}\n          icon={icon}\n          onClick={this._onAutoplayToggleClick}\n          tooltip={this.autoplayToggleButtonTooltipText}\n        ></UDExButton>\n      }\n\n      <div className={this.navigationButtonWrapperClass}>\n        <UDExButton\n          data-ui5-arrow-back\n          size={UDExButtonSize.Large}\n          disabled={this.isPrevButtonDisabled}\n          class={btnClassName}\n          icon={slimArrowLeft}\n          design={this.buttonDesign}\n          tooltip={this.previousPageText}\n          onClick={this._prevButtonClick}\n          part=\"prev-button\">\n        </UDExButton>\n\n        {\n          this._isBottomNavigation &&\n          <div className=\"udex-carousel__navigation-page-indicator-spacer\" />\n        }\n\n        <UDExButton\n          data-ui5-arrow-forward\n          size={UDExButtonSize.Large}\n          disabled={this.isNextButtonDisabled}\n          class={btnClassName}\n          icon={slimArrowRight}\n          design={this.buttonDesign}\n          tooltip={this.nextPageText}\n          onClick={this._nextButtonClick}\n          part=\"next-button\">\n        </UDExButton>\n      </div>\n\n      {\n        this.autoplay && this._isBottomNavigation &&\n        <div className=\"udex-carousel__navigation-spacer\"></div>\n      }\n    </div>\n  );\n}\n"]}

package/dist/DatePicker.d.ts

@@ -136,6 +136,11 @@ declare class UDExDatePicker extends DateComponentBase {
      * @private
      */
     _tempValue: string;
+    /**
+     * Tracks whether the calendar popover is currently open, used to reflect aria-expanded on the control button.
+     * @private
+     */
+    _isPopoverOpen: boolean;
     static i18nBundle: I18nBundle;
     responsivePopover?: UDExDropdown;
     private _getCurrentFormat;

package/dist/DatePicker.js

@@ -88,6 +88,11 @@ let UDExDatePicker = UDExDatePicker_1 = class UDExDatePicker extends DateCompone
          */
         this.valueState = UDExValueState.Standard;
         this.formatPattern = UDExDatePicker_1.DEFAULT_FORMAT_PATTERN;
+        /**
+         * Tracks whether the calendar popover is currently open, used to reflect aria-expanded on the control button.
+         * @private
+         */
+        this._isPopoverOpen = false;
     }
     _getCurrentFormat() { return this.getFormat(); }
     _getResponsePopover() {
@@ -101,12 +106,14 @@ let UDExDatePicker = UDExDatePicker_1 = class UDExDatePicker extends DateCompone
         return this.shadowRoot.querySelector("[udex-text-field]");
     }
     _afterDropdownClose() {
+        this._isPopoverOpen = false;
         this._dropdownTrigger.active = false;
         this._dropdownTrigger.iconActive = false;
         this._dropdownTrigger.shadowRoot?.querySelector("input")?.blur();
         this._tempValue = "";
     }
     _afterDropdownOpen() {
+        this._isPopoverOpen = true;
         this._dropdownTrigger.iconActive = true;
     }
     _closeRespPopover() {
@@ -417,6 +424,9 @@ __decorate([
 __decorate([
     property()
 ], UDExDatePicker.prototype, "_tempValue", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], UDExDatePicker.prototype, "_isPopoverOpen", void 0);
 __decorate([
     i18n("@sapudex/web-components")
 ], UDExDatePicker, "i18nBundle", void 0);