@sapudex/web-components 2.46.0 → 2.48.0

package/cypress/specs/DatePicker.cy.tsx

@@ -191,6 +191,68 @@ describe("Date Picker", () => {
     });
   });
 
+  describe("calendar icon aria-haspopup / aria-expanded (a11y)", () => {
+    // Updated: accessibility fix moved aria-haspopup/aria-expanded off the input and onto the
+    // calendar icon *button*. DatePicker's template passes `_icon-aria-has-popup="grid"` and
+    // `_icon-aria-expanded={this._isPopoverOpen ? "true" : "false"}` to the inner UDExTextField.
+    // TextField exposes these as the private string props `_iconAriaHasPopup` / `_iconAriaExpanded`,
+    // whose `iconAccessibilityAttributes` getter forwards a ButtonAccessibilityAttributes object to
+    // the UDExControlButton (a UI5 Button), whose shadow `.ui5-button-root` renders aria-haspopup /
+    // aria-expanded. `_isPopoverOpen` (toggled in _afterDropdownOpen/_afterDropdownClose) drives expanded.
+    // The previous object-based `_calendarIconAccessibilityAttributes` / `_icon-accessibility-attributes`
+    // forwarding no longer exists.
+    // Traversal: [udex-date-picker] -> shadow -> [udex-text-field] -> shadow ->
+    //            [udex-control-button] -> shadow -> .ui5-button-root
+
+    const buttonRoot = () =>
+      cy
+        .get("#a11yDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("[udex-control-button]")
+        .shadow()
+        .find(".ui5-button-root");
+
+    const nativeInput = () =>
+      cy
+        .get("#a11yDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input");
+
+    beforeEach(() => {
+      cy.mount(<UDExDatePicker id="a11yDatePicker" label="Date"></UDExDatePicker>);
+    });
+
+    it("sets aria-haspopup=\"grid\" on the calendar icon button", () => {
+      buttonRoot().should("have.attr", "aria-haspopup", "grid");
+    });
+
+    it("does NOT set aria-haspopup on the native input", () => {
+      // The accessibility fix removed aria-haspopup from the input entirely.
+      nativeInput().should("not.have.attr", "aria-haspopup");
+    });
+
+    it("sets aria-expanded=\"false\" on the calendar icon button when the popover is closed", () => {
+      buttonRoot().should("have.attr", "aria-expanded", "false");
+    });
+
+    it("sets aria-expanded=\"true\" on the calendar icon button after opening the calendar", () => {
+      // Click the icon button to open the calendar popover; `_isPopoverOpen` flips true
+      // in `_afterDropdownOpen`, which re-renders the button with aria-expanded="true".
+      cy.get("#a11yDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("[udex-control-button]")
+        .click();
+
+      buttonRoot().should("have.attr", "aria-expanded", "true");
+    });
+  });
+
   describe("calendar timestamp navigation", () => {
     // Regression coverage for the fix that forwards `_calendarTimestamp` to the inner
     // `udex-calendar`. UI5's Calendar guards `timestamp` behind an internal

package/cypress/specs/Tag.cy.tsx

@@ -10,10 +10,11 @@ const outlineTag =<UDExTag id="tag-outlined" text="Outlined" design="Outlined"><
 const iconTag = <UDExTag id="tag-icon" text="Tag text" icon="decline"></UDExTag>
 const startIconTag = <UDExTag id="tag-icon-start" text="Tag text" icon="decline" iconPlacement="Start"></UDExTag>
 const readonlyTag = <UDExTag id="tag-readonly" text="Tag text" icon="accept" readOnly></UDExTag>
+const readonlyNoIconTag = <UDExTag id="tag-readonly-no-icon" text="Tag text" readOnly></UDExTag>
 const nonselectableTag = <UDExTag id="tag-nonselectable" text="Non selectable" non-selectable></UDExTag>
 const nonselectableIconTag = <UDExTag id="tag-nonselectable-icon" text="Non selectable" icon="decline" non-selectable></UDExTag>
 const linkTag = <UDExTag id="tag-link" text="SAP home page" href="https://sap.com"></UDExTag>
-const nonInteractiveTag = <UDExTag id="tag-nonselectable" text="Non selectable" icon="decline" non-interactive></UDExTag>
+const nonInteractiveTag = <UDExTag id="tag-noninteractive" text="Non selectable" icon="decline" non-interactive></UDExTag>
 
 describe("Tag", () => {
   it("is rendered", () => {
@@ -118,8 +119,38 @@ describe("Tag", () => {
 
   it("icon is not focusable when non-interactive attribute is set", () => {
     cy.mount(nonInteractiveTag)
-    cy.get("#tag-nonselectable").shadow().find(".udex-tag__icon").should("have.attr", "mode", "Decorative")
-  }); 
+    cy.get("#tag-noninteractive").shadow().find(".udex-tag__icon").should("have.attr", "mode", "Decorative")
+  });
+
+  it("non-interactive tag renders with udex-tag--noninteractive class", () => {
+    cy.mount(nonInteractiveTag)
+    cy.get("#tag-noninteractive").shadow().find(".udex-tag--noninteractive").should("be.visible")
+  });
+
+  it("non-interactive tag icon has no wrapping button", () => {
+    cy.mount(nonInteractiveTag)
+    cy.get("#tag-noninteractive").shadow().find(".udex-tag__btn-icon").should("not.exist")
+  });
+
+  it("readonly tag renders the icon inside shadow DOM", () => {
+    cy.mount(readonlyTag)
+    cy.get("#tag-readonly").shadow().find(".udex-tag__icon").should("be.visible")
+  });
+
+  it("readonly tag icon has no wrapping button", () => {
+    cy.mount(readonlyTag)
+    cy.get("#tag-readonly").shadow().find(".udex-tag__btn-icon").should("not.exist")
+  });
+
+  it("readonly tag icon is non-interactive (decorative)", () => {
+    cy.mount(readonlyTag)
+    cy.get("#tag-readonly").shadow().find(".udex-tag__icon").should("have.attr", "mode", "Decorative")
+  });
+
+  it("readonly tag without icon renders no icon", () => {
+    cy.mount(readonlyNoIconTag)
+    cy.get("#tag-readonly-no-icon").shadow().find(".udex-tag__icon").should("not.exist")
+  });
 
   it("tests if tag with link is correctly rendered", () => {
     cy.mount(linkTag)

package/cypress/specs/TextField.cy.tsx

@@ -262,6 +262,74 @@ describe("Text Field", () => {
     });
   });
 
+  describe("icon accessibility attributes (a11y)", () => {
+    // Updated: the accessibility fix now uses two private string properties on TextField —
+    // `_iconAriaHasPopup` and `_iconAriaExpanded` (both @property type String, reflected as the
+    // kebab attributes `_icon-aria-has-popup` / `_icon-aria-expanded`). The `iconAccessibilityAttributes`
+    // getter assembles a ButtonAccessibilityAttributes object from them (returning undefined when both
+    // are unset) and forwards it to the internal UDExControlButton via `accessibilityAttributes`, so
+    // aria-haspopup / aria-expanded land on the icon *button* (its shadow `.ui5-button-root`), not the input.
+    // The previous object-based `_iconAccessibilityAttributes` approach no longer exists.
+    // Traversal to the button root:
+    //   [udex-text-field] -> shadow -> [udex-control-button] -> shadow -> .ui5-button-root
+
+    const controlButtonRoot = (id: string) =>
+      cy
+        .get(`#${id}`)
+        .shadow()
+        .find("[udex-control-button]")
+        .shadow()
+        .find(".ui5-button-root");
+
+    it("does NOT render aria-haspopup on the native input", () => {
+      // The input's aria-haspopup is driven only by `_ariaHasPopup`, which is unset here.
+      cy.mount(<UDExTextField id="noHasPopupTextField" icon="appointment-2"></UDExTextField>);
+      cy.get("#noHasPopupTextField").shadow().find("input").should("not.have.attr", "aria-haspopup");
+    });
+
+    it("does not forward accessibilityAttributes when neither string prop is set", () => {
+      // getter returns undefined => the control button renders no aria-haspopup / aria-expanded.
+      cy.mount(<UDExTextField id="noIconA11yTextField" icon="appointment-2"></UDExTextField>);
+      controlButtonRoot("noIconA11yTextField").should("not.have.attr", "aria-haspopup");
+      controlButtonRoot("noIconA11yTextField").should("not.have.attr", "aria-expanded");
+    });
+
+    it("forwards _iconAriaHasPopup / _iconAriaExpanded to the control button (aria-haspopup / aria-expanded)", () => {
+      // Both string props supplied as the reflected kebab attributes on the host.
+      cy.mount(
+        <UDExTextField
+          id="iconA11yTextField"
+          icon="appointment-2"
+          _icon-aria-has-popup="grid"
+          _icon-aria-expanded="false"
+        ></UDExTextField>,
+      );
+
+      controlButtonRoot("iconA11yTextField").should("have.attr", "aria-haspopup", "grid");
+      controlButtonRoot("iconA11yTextField").should("have.attr", "aria-expanded", "false");
+    });
+
+    it("reflects an updated expanded value onto the control button", () => {
+      cy.mount(
+        <UDExTextField
+          id="iconExpandedTextField"
+          icon="appointment-2"
+          _icon-aria-has-popup="grid"
+          _icon-aria-expanded="false"
+        ></UDExTextField>,
+      );
+
+      controlButtonRoot("iconExpandedTextField").should("have.attr", "aria-expanded", "false");
+
+      // Flip the reactive string property; the getter re-derives and the button re-renders.
+      cy.get("#iconExpandedTextField").then($el => {
+        ($el[0] as unknown as { _iconAriaExpanded: string })._iconAriaExpanded = "true";
+      });
+
+      controlButtonRoot("iconExpandedTextField").should("have.attr", "aria-expanded", "true");
+    });
+  });
+
   describe("with the type Number", () => {
     beforeEach( () => {
       cy.mount(numberTextField)

package/dist/Carousel.d.ts

@@ -5,7 +5,6 @@ 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 +13,9 @@ export declare enum UDExCarouselButtonDesign {
     Secondary = "Secondary",
     Tertiary = "Tertiary"
 }
+type UDExCarouselAutoplayToggleEventDetails = {
+    isPaused: boolean;
+};
 /**
  * @class
  *
@@ -35,6 +37,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 +51,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.
      *
@@ -101,9 +128,16 @@ declare class UDExCarousel extends UI5Element {
      */
     accessibleName: string;
     static i18nBundle: I18nBundle;
+    _autoplayInterval: ReturnType<typeof setInterval> | null;
+    _autoplayLastToggle: number;
+    _autoplayMinTimeBetweenToggle: number;
+    _autoplayManualStop: boolean;
+    _autoplayLoop: () => void;
     get nextPageText(): string;
     get previousPageText(): string;
     get carouselClass(): string;
+    get navigationWrapperClass(): string;
+    get navigationButtonWrapperClass(): string;
     get buttonDesign(): UDExCarouselButtonDesign;
     get showNavigationButtons(): {
         top: boolean;
@@ -112,11 +146,22 @@ declare class UDExCarousel extends UI5Element {
     get _hidePageIndicator(): boolean;
     get _carousel(): UI5Carousel | null;
     get _ui5CarouselRoot(): HTMLElement | null | undefined;
+    _startAutoplay(): void;
+    _stopAutoplay(): void;
+    _onAutoplayToggleClick(): void;
+    get _isBottomNavigation(): boolean;
+    get autoplayToggleButtonTooltipText(): string;
+    _onFocusIn(): void;
+    _onFocusOut(): void;
+    _onMouseEnter(): void;
+    _onMouseLeave(): void;
     _calculateDisabledButtonsState(): void;
-    _prevButtonClick(e: UI5CustomEvent<UDExButton, "click">): void;
-    _nextButtonClick(e: UI5CustomEvent<UDExButton, "click">): void;
+    _prevButtonClick(): void;
+    _nextButtonClick(): void;
     _onkeydown(e: KeyboardEvent): void;
     _handleNavigate(e: UI5CustomEvent<UI5Carousel, "navigate">): void;
     onAfterRendering(): void;
+    onExitDOM(): void;
 }
 export default UDExCarousel;
+export type { CarouselNavigateEventDetail, UDExCarouselAutoplayToggleEventDetails };

package/dist/Carousel.js

@@ -13,7 +13,7 @@ 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 { 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";
@@ -62,6 +62,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,6 +105,27 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
          * @public
          */
         this.accessibleName = "";
+        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();
+        };
     }
     get nextPageText() {
         return translate(UDExCarousel_1, CAROUSEL_NEXT_ARROW_TEXT);
@@ -104,6 +137,20 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
         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
@@ -124,21 +171,88 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
     get _ui5CarouselRoot() {
         return this._carousel?.shadowRoot?.querySelector(".ui5-carousel-root");
     }
+    _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();
+    }
+    _stopAutoplay() {
+        if (!this._autoplayInterval) {
+            return;
+        }
+        clearInterval(this._autoplayInterval);
+        this._autoplayIsPaused = true;
+        this._autoplayLastToggle = Date.now();
+    }
+    _onAutoplayToggleClick() {
+        if (this._autoplayIsPaused) {
+            this._startAutoplay();
+            this._autoplayManualStop = false;
+        }
+        else {
+            this._stopAutoplay();
+            this._autoplayManualStop = true;
+        }
+        this.fireDecoratorEvent("autoplay-toggle-click", {
+            isPaused: this._autoplayIsPaused,
+        });
+    }
+    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);
+    }
+    _onFocusIn() {
+        this._stopAutoplay();
+    }
+    _onFocusOut() {
+        if (!this._autoplayManualStop) {
+            this._startAutoplay();
+        }
+    }
+    _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)) {
@@ -152,11 +266,31 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
     onAfterRendering() {
         redirectAttributes(this, "carousel");
         this._calculateDisabledButtonsState();
+        if (this._autoplayInterval === null) {
+            this._startAutoplay();
+        }
+    }
+    onExitDOM() {
+        if (this._autoplayInterval) {
+            clearInterval(this._autoplayInterval);
+        }
     }
 };
 __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);
@@ -192,6 +326,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 {\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  @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  _autoplayLoop = () => {\n    const items = this._carousel?.items;\n    if (!items) { return; }\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  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,\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  _startAutoplay(): void {\n    if (!this.autoplay) { return; }\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) { return; }\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  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  _onFocusIn(): void {\n    this._stopAutoplay();\n  }\n\n  _onFocusOut(): void {\n    if (!this._autoplayManualStop) { this._startAutoplay(); }\n  }\n\n  _onMouseEnter(): void {\n    this._stopAutoplay();\n  }\n\n  _onMouseLeave(): void {\n    if (!this._autoplayManualStop) { this._startAutoplay(); }\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  onAfterRendering() {\n    redirectAttributes(this, \"carousel\");\n\n    this._calculateDisabledButtonsState();\n\n    if (this._autoplayInterval === null) { this._startAutoplay(); }\n  }\n\n  onExitDOM(): void {\n    if (this._autoplayInterval) { clearInterval(this._autoplayInterval); }\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":";AACA,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAC9D,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAEvD,OAAO,uBAAuB,MAAM,0DAA0D,CAAC;AAC/F,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAC7E,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAC/E,OAAO,IAAI,MAAM,uCAAuC,CAAC;AACzD,OAAO,KAAK,MAAM,wCAAwC,CAAC;AAE3D,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,EAExD,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,EAChC,YAAY,EAAE,IAAI,CAAC,aAAa,EAChC,YAAY,EAAE,IAAI,CAAC,aAAa,EAChC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,MAAM,EAAE,IAAI,CAAC,MAAM,YAGjB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACpB,eAAM,IAAI,EAAG,IAAqB,CAAC,eAAe,GAAS,CAC5D,GAES,EAEb,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;IACxD,MAAM,IAAI,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEnD,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,CAAC,sBAAsB,EAAE,IAAI,EAAC,YAAY,aAE1D,IAAI,CAAC,QAAQ;gBACb,KAAC,UAAU,IACT,KAAK,EAAE,uCAAuC,EAC9C,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,MAAM,EAAE,gBAAgB,CAAC,QAAQ,EACjC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,IAAI,CAAC,sBAAsB,EACpC,OAAO,EAAE,IAAI,CAAC,+BAA+B,GACjC,EAGhB,eAAK,SAAS,EAAE,IAAI,CAAC,4BAA4B,aAC/C,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,EAGX,IAAI,CAAC,mBAAmB;wBACxB,cAAK,SAAS,EAAC,iDAAiD,GAAG,EAGrE,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,EAGJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,mBAAmB;gBACzC,cAAK,SAAS,EAAC,kCAAkC,GAAO,IAEtD,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 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"]}