@sapudex/web-components 2.56.0 → 2.57.0

package/README.md

@@ -0,0 +1,258 @@
+# Quickstart guide for UDEx Components
+
+Follow along these few steps to get you successfully using our provided web components.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Importing the component/-s you intend to use](#importing-the-component-s-you-intend-to-use)
+- [Using the component](#using-the-component)
+- [Using our custom theme](#using-our-custom-theme)
+  - [Import our asset bundle and theme css](#import-our-asset-bundle-and-theme-css)
+  - [Activate the theme](#activate-the-theme)
+- [Configuration options](#configuration-options)
+  - [Controlling default tooltips](#controlling-default-tooltips)
+  - [Language](#language)
+  - [UDEx Custom Translation](#udex-custom-translation)
+- [Using UDEx components with UI5 components](#using-ui5-components)
+  - [Scoping configuration](#scoping-configuration)
+  - [Using UI5 icons](#using-ui5-icons)
+
+## Installation
+
+To use our provided components, it's necessary to add the package to your project as a dependancy:
+
+Using npm:
+
+```bash
+npm install @sapudex/web-components
+```
+
+Or with yarn:
+
+```bash
+yarn add @sapudex/web-components
+```
+
+## Importing the component/-s you intend to use
+
+Next we're going to import and register the components we need, this should be done at the root of application(`src/main.js`, etc) to ensure the components are loaded appropriately.
+Registering the components will tell the browser what to do with them once it encounters their HTML markup tags in source.
+
+Replace `<component-name>` with the name of the desired component.
+
+```javascript
+import '@sapudex/web-components/dist/<component-name>.js';
+```
+
+For example, to use the "Button" component:
+
+```javascript
+import '@sapudex/web-components/dist/Button.js';
+```
+
+## Using the component
+
+And finally, once the component is imported, you can use it just like any other standard HTML element, typically by adding it to your rendered HTML markup.
+
+```html
+<html>
+  <body>
+    <section>
+      <udex-button>UDEx Button</udex-button>
+    </section>
+  </body>
+</html>
+```
+
+```jsx
+const renderSectionWithButton = (title = 'UDEx Button') => (
+  <section>
+    <udex-button>{title}</udex-button>
+  </section>
+);
+```
+
+## Using our custom theme
+
+While our components come out-of-the-box with default styling, it's recommended to include our theming assets as well.
+
+### Import our asset bundle and theme css
+
+Import our `Assets.js` in your root javascript - `main.js`, `index.js` or similar.
+
+```javascript
+import '@sapudex/web-components/dist/Assets.js';
+```
+
+and add the following HTML snippet to your root `.html` file - `index.html` or similar, depending on your setup.
+
+```html
+<link rel="stylesheet" type="text/css" href="path/to/@sapudex/design-tokens/dist/themes/sap_glow/css_variables.css">
+```
+
+Where you should adjust the path to the theme("css_variables.css") file provided by our `@sapudex/design-tokens` package.
+
+An alternative way for setting up the theme is to import our `css_variables.css` before the `Assets.js` in the root javascript.
+
+```javascript
+import '@sapudex/design-tokens/dist/themes/sap_glow/css_variables.css';
+import '@sapudex/web-components/dist/Assets.js';
+```
+
+Another option, if acceptable by technical requirements, you can use theme files from our CDN, e.g.:
+
+```html
+<link rel="stylesheet" type="text/css" href="https://cdn.udex.services.sap.com/dds/design-tokens/latest/themes/sap_glow/css_variables.css">
+```
+
+### Activate the theme
+
+You have several options on activating the theme but the simplest is to add a
+small HTML snippet to your root `.html` file:
+
+```html
+<script data-ui5-config type="application/json">
+  {
+    "theme": "sap_glow"
+  }
+</script>
+```
+
+Visit [SAP Web Components](https://ui5.github.io/webcomponents/docs/advanced/theming-part2/) to see other ways to activate our theme or just generally integrate with the SAP Web Components/Theme Designer theming ecosystem.
+
+## Configuration options
+
+### Controlling default tooltips
+
+Configuration options are inherited from UI5 settings. For more information, please visit [UI5 Configuration documentation](https://ui5.github.io/webcomponents/docs/advanced/configuration/).
+
+This configuration option controls whether components will display default tooltips in specific cases.
+
+Default tooltips are generally recommended to cover accessibility standards and typically you would not need to modify this setting. However, in rare cases you may want to implement custom tooltip visualization and turn off the default tooltips. To do so, set `enableDefaultTooltips` to `false`.
+
+```html
+<script data-ui5-config type="application/json">
+{
+  "enableDefaultTooltips": false
+}
+</script>
+
+```
+
+### Language
+
+Configuration options are inherited from UI5 settings. For more information, please visit [UI5 Configuration documentation](https://ui5.github.io/webcomponents/docs/advanced/configuration/).
+
+Language to be used for translatable texts. The `en` language is built in all UI5/UDEx Web Components that have translatable texts. Thus, components are always translated. Configuring another language will additionally fetch and use that language. Any language is fetched once.
+
+```html
+<script data-ui5-config type="application/json">
+{
+  "language": "zh_cn"
+}
+</script>
+
+```
+
+or
+
+```javascript
+import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
+setLanguage("zh_cn");
+```
+
+### UDEx custom Translation
+
+UDEx custom translation is a feature that allows to overwrite default UI5 automatic translation of components hardcoded text.
+This setting will overwrite translated texts, regardless of configured language.
+To setup custom translations, push an object with proper `[key: string] :string` values into `window["udex-config"].translations` object, before component loads.
+
+```javascript
+window["udex-config"] = {
+  translations: {
+    MAIN_LINKS: "custom main links",
+    LOGOUT: "custom logout"
+  }
+};
+```
+
+List of all translatable keys can be found under `@sapudex/web-components/dist/generated/i18n/i18n-defaults.js`.
+
+## Using UI5 components
+
+In order to use UDEx components together with [UI5 components library](https://ui5.github.io/webcomponents/) , you need to make sure to use matching version for both libraries. UDEx components, under the hood uses following UI5 packages:
+
+- `@ui5/webcomponents`
+- `@ui5/webcomponents-base`
+- `@ui5/webcomponents-fiori`
+
+If any of this package is used at the same project scope, all of those packages version need to match with the one used internal in `@sapudex/web-components`.
+
+### Scoping configuration
+
+In case it is not possible to keep in sync ui5 and udex packages version or in case of conflicting functionalities, it is possible to keep both packages detached and use as separate libraries. When scoping is configured, components can be used under tags with custom suffix.
+
+Scoping configuration example:
+
+```javascript
+import {
+  setCustomElementsScopingSuffix,
+  setCustomElementsScopingRules,
+} from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
+
+setCustomElementsScopingRules({ include: [/^udex-/, /^ui5-/], exclude: [] });
+setCustomElementsScopingSuffix("lib");
+```
+
+Usage example:
+
+```html
+<udex-checkbox-lib></udex-checkbox-lib>
+<ui5-checkbox-lib></ui5-checkbox-lib>
+```
+
+Please read more detailed information about the scoping on [UI5 documentation page](https://ui5.github.io/webcomponents/docs/advanced/scoping/).
+
+### Using UI5 icons
+
+UDEx components do not include icons, please use UI5 provided [icon library](https://ui5.github.io/webcomponents/icons/) available with following packages:
+
+- `@ui5/webcomponents-icons`
+- `@ui5/webcomponents-icons-tnt`
+- `@ui5/webcomponents-icons-business-suite`
+
+Those libraries contains only set of icons, without UI5 components or utility functions. It is not required to import `@ui5/webcomponents` package (or other components packages) in order to use icons with UDEx components.
+
+Single icon should be imported to be used by its name in UDEx components, e.g.:
+
+```javascript
+import "@ui5/webcomponents-icons/dist/action";
+```
+
+```html
+<udex-button icon="action">Button Text</udex-button>
+```
+
+In cases where UDEx do not provide option for component icon or there is special need to icon styling, custom UI5 [Icon](https://ui5.github.io/webcomponents/components/Icon/) component can be use as a slot, e.g.:
+
+```javascript
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import "@ui5/webcomponents-icons/dist/action";
+```
+
+```html
+<udex-tile>
+  <ui5-icon name="action"></ui5-icon>
+  <h3>Title</h3>
+  ...
+</udex-tile>
+```
+
+## Additional resources
+
+- [UI5: Importing components](https://ui5.github.io/webcomponents/docs/getting-started/components-packages/#usage)
+- [UI5: Understanding Web Component APIs](https://ui5.github.io/webcomponents/docs/getting-started/components-APIs/)
+- [UI5: Theming configuration](https://ui5.github.io/webcomponents/docs/advanced/configuration/#theme)
+- [UI5: i18n for Apps](https://ui5.github.io/webcomponents/docs/advanced/using-i18n-for-apps/)
+- [UI5: Using Icons](https://ui5.github.io/webcomponents/docs/advanced/using-icons/)

package/cypress/specs/TagGroup.cy.tsx

@@ -210,4 +210,39 @@ describe("TagGroup", () => {
     });
   });
 
+  describe("Keyboard navigation with nonSelectable tags", () => {
+    const nonSelectableTagGroup = <UDExTagGroup>
+      {Array.from({ length: 16 }, (_, i) => (
+        <UDExTag nonSelectable text={`Tag ${i + 1}`} icon="employee"></UDExTag>
+      ))}
+    </UDExTagGroup>;
+
+    it("Shift+Tab from overflow button focuses last visible nonSelectable tag's button", () => {
+      cy.mount(<div><button id="before">before</button>{nonSelectableTagGroup}</div>);
+
+      cy.get("[udex-tag-group]").shadow().find(".udex-tag-group__tokenizer").as("tokenizer");
+      cy.get("[udex-tag-group]").should("have.attr", "_is-hidden-tags");
+      cy.get("@tokenizer").shadow().find(".ui5-tokenizer-more-text").should("be.visible");
+
+      cy.get("@tokenizer").then($tokenizer => {
+        const nMoreCount = ($tokenizer[0] as any)._nMoreCount as number;
+        const totalCount = ($tokenizer[0] as any)._tokens.length as number;
+        const visibleCount = totalCount - nMoreCount;
+        cy.get("#before").focus();
+        // Tab through each visible tag's button + 1 more to land on the "n more" button
+        Cypress._.times(visibleCount + 1, () => cy.realPress("Tab"));
+      });
+
+      cy.get("@tokenizer").shadow().find(".ui5-tokenizer-more-text").should("be.focused");
+
+      cy.realPress(["Shift", "Tab"]);
+
+      cy.get("@tokenizer").then($tokenizer => {
+        const nMoreCount = ($tokenizer[0] as any)._nMoreCount as number;
+        const totalCount = ($tokenizer[0] as any)._tokens.length as number;
+        const lastVisibleToken = ($tokenizer[0] as any)._tokens[totalCount - nMoreCount - 1];
+        cy.wrap(lastVisibleToken).shadow().find("button").should("be.focused");
+      });
+    });
+  });
 });

package/dist/Carousel.d.ts

@@ -4,12 +4,17 @@ 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 { UI5CustomEvent } from "@ui5/webcomponents-base";
 export declare enum UDExCarouselNavigationPosition {
     top = "top",
     bottom = "bottom"
 }
+export declare enum UDExCarouselPageIndicatorType {
+    Default = "Default",
+    Numeric = "Numeric",
+    None = "None"
+}
 export declare enum UDExCarouselButtonDesign {
     Secondary = "Secondary",
     Tertiary = "Tertiary"
@@ -106,7 +111,7 @@ declare class UDExCarousel extends UI5Element {
      * @default "Default"
      * @public
      */
-    pageIndicatorType: `${CarouselPageIndicatorType}`;
+    pageIndicatorType: `${UDExCarouselPageIndicatorType}`;
     /**
      * Defines the prev button is disabled
      *
@@ -171,8 +176,9 @@ declare class UDExCarousel extends UI5Element {
     };
     get _hidePageIndicator(): boolean;
     get _carousel(): UI5Carousel | null;
-    get _isBottomNavigation(): boolean;
+    get _isBottomDotNavigation(): boolean;
     get autoplayToggleButtonTooltipText(): string;
+    get sanitizedPageIndicatorType(): `${CarouselPageIndicatorType}`;
 }
 export default UDExCarousel;
 export type { CarouselNavigateEventDetail, UDExCarouselAutoplayToggleEventDetails };

package/dist/Carousel.js

@@ -25,6 +25,12 @@ export var UDExCarouselNavigationPosition;
     UDExCarouselNavigationPosition["top"] = "top";
     UDExCarouselNavigationPosition["bottom"] = "bottom";
 })(UDExCarouselNavigationPosition || (UDExCarouselNavigationPosition = {}));
+export var UDExCarouselPageIndicatorType;
+(function (UDExCarouselPageIndicatorType) {
+    UDExCarouselPageIndicatorType["Default"] = "Default";
+    UDExCarouselPageIndicatorType["Numeric"] = "Numeric";
+    UDExCarouselPageIndicatorType["None"] = "None";
+})(UDExCarouselPageIndicatorType || (UDExCarouselPageIndicatorType = {}));
 export var UDExCarouselButtonDesign;
 (function (UDExCarouselButtonDesign) {
     UDExCarouselButtonDesign["Secondary"] = "Secondary";
@@ -220,14 +226,14 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
         if (this.isPrevButtonDisabled || !this._carousel) {
             return;
         }
-        this._carousel.navigateLeft();
+        this._carousel.navigateArrowLeft();
         this._calculateDisabledButtonsState();
     }
     _nextButtonClick() {
         if (this.isNextButtonDisabled || !this._carousel) {
             return;
         }
-        this._carousel.navigateRight();
+        this._carousel.navigateArrowRight();
         this._calculateDisabledButtonsState();
     }
     _onkeydown(e) {
@@ -246,8 +252,13 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
         return translate(UDExCarousel_1, CAROUSEL_PREVIOUS_ARROW_TEXT);
     }
     get carouselClass() {
-        const classes = "udex-carousel";
-        return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;
+        let classes = "udex-carousel";
+        classes += ` udex-carousel__navigation--${this.navigationPlacement}`;
+        if (this.navigationPlacement === UDExCarouselNavigationPosition.bottom
+            && this.pageIndicatorType === UDExCarouselPageIndicatorType.None) {
+            classes += " udex-carousel__navigation--bottom-buttons-only";
+        }
+        return classes;
     }
     get navigationWrapperClass() {
         let _class = "udex-carousel__navigation-wrapper";
@@ -264,6 +275,10 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
         return _class;
     }
     get buttonDesign() {
+        if (this.navigationPlacement === UDExCarouselNavigationPosition.bottom
+            && this.pageIndicatorType === UDExCarouselPageIndicatorType.None) {
+            return UDExCarouselButtonDesign.Secondary;
+        }
         return this.navigationPlacement === UDExCarouselNavigationPosition.top
             ? UDExCarouselButtonDesign.Secondary
             : UDExCarouselButtonDesign.Tertiary;
@@ -275,19 +290,33 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
         };
     }
     get _hidePageIndicator() {
+        if (this.navigationPlacement === UDExCarouselNavigationPosition.bottom
+            && this.pageIndicatorType === UDExCarouselPageIndicatorType.None) {
+            return true;
+        }
         return this.navigationPlacement === UDExCarouselNavigationPosition.top;
     }
     get _carousel() {
         return this.shadowRoot.querySelector("[ui5-carousel]");
     }
-    get _isBottomNavigation() {
-        return this.navigationPlacement === UDExCarouselNavigationPosition.bottom;
+    get _isBottomDotNavigation() {
+        if (this.navigationPlacement === UDExCarouselNavigationPosition.bottom
+            && this.pageIndicatorType !== UDExCarouselPageIndicatorType.None) {
+            return true;
+        }
+        return false;
     }
     get autoplayToggleButtonTooltipText() {
         return this._autoplayIsPaused
             ? translate(UDExCarousel_1, CAROUSEL_AUTOPLAY_TOGGLE_START)
             : translate(UDExCarousel_1, CAROUSEL_AUTOPLAY_TOGGLE_STOP);
     }
+    get sanitizedPageIndicatorType() {
+        if (this.pageIndicatorType === UDExCarouselPageIndicatorType.None) {
+            return UDExCarouselPageIndicatorType.Default;
+        }
+        return this.pageIndicatorType;
+    }
 };
 __decorate([
     property()

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-strict.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"]}
+{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../src/Carousel.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,aAAa,MAAM,wDAAwD,CAAC;AAEnF,OAAO,EACL,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAC9B,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EACL,wBAAwB,EACxB,4BAA4B,EAC5B,8BAA8B,EAC9B,6BAA6B,GAC9B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,kBAAkB,MAAM,+BAA+B,CAAC;AAK/D,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAE7C,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AAErD,SAAS;AACT,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAE7D,MAAM,CAAN,IAAY,8BAGX;AAHD,WAAY,8BAA8B;IACxC,6CAAW,CAAA;IACX,mDAAiB,CAAA;AACnB,CAAC,EAHW,8BAA8B,KAA9B,8BAA8B,QAGzC;AAED,MAAM,CAAN,IAAY,6BAIX;AAJD,WAAY,6BAA6B;IACrC,oDAAmB,CAAA;IACnB,oDAAmB,CAAA;IACnB,8CAAa,CAAA;AACjB,CAAC,EAJW,6BAA6B,KAA7B,6BAA6B,QAIxC;AAED,MAAM,CAAN,IAAY,wBAGX;AAHD,WAAY,wBAAwB;IAClC,mDAAuB,CAAA;IACvB,iDAAqB,CAAA;AACvB,CAAC,EAHW,wBAAwB,KAAxB,wBAAwB,QAGnC;AAMD;;;;;;;;;;;;;;;;;GAiBG;AAqBH,IAAM,YAAY,oBAAlB,MAAM,YAAa,SAAQ,UAAU;IAoInC;QACE,KAAK,EAAE,CAAC;QAhIV;;;;;;;;;;WAUG;QAED,wBAAmB,GAAwC,8BAA8B,CAAC,GAAG,CAAC;QAShG;;;WAGG;QAED,kBAAa,GAAW,IAAI,CAAC;QAE/B;;;;;WAKG;QAED,sBAAiB,GAAG,IAAI,CAAC;QAmB3B;;;;;;;;;;;WAWG;QAED,iBAAY,GAAG,cAAc,CAAC;QAEhC;;;;;;;;;WASG;QAED,sBAAiB,GAAuC,SAAS,CAAC;QAoBpE;;;;;WAKG;QAED,mBAAc,GAAW,EAAE,CAAC;QAE9B;;;;;WAKG;QAED,kBAAa,GAAG,KAAK,CAAC;QAKxB,sBAAiB,GAA0C,IAAI,CAAC;QAChE,wBAAmB,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACjC,kCAA6B,GAAG,GAAG,CAAC;QACpC,wBAAmB,GAAG,KAAK,CAAC;QAkC5B,kBAAa,GAAG,GAAG,EAAE;YACnB,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC;YACpC,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,OAAO;YACT,CAAC;YAED,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC;YACtD,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,qBAAqB,CAAC;YAC1D,MAAM,WAAW,GAAG,YAAY,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY,CAAC,CAAC;YAEnE,IAAI,WAAW,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChC,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrB,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;gBAEhC,OAAO;YACT,CAAC;YAED,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,YAAY,CAAC,CAAC;YAElE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;YACtC,IAAI,CAAC,8BAA8B,EAAE,CAAC;QACxC,CAAC,CAAC;QAlDA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClD,CAAC;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAErC,IAAI,CAAC,8BAA8B,EAAE,CAAC;QAEtC,IAAI,IAAI,CAAC,iBAAiB,KAAK,IAAI,EAAE,CAAC;YACpC,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAED,SAAS;QACP,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAEpD,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,aAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAED,UAAU;QACR,aAAa,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACpD,CAAC;IAED,SAAS;QACP,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,EAAE,YAAY,IAAI,KAAK,CAAC;IAC7D,CAAC;IAyBD,cAAc;QACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC;YAC3B,OAAO,CAAC,IAAI,CAAC,2DAA2D,CAAC,CAAC;YAC1E,OAAO;QACT,CAAC;QAED,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,mBAAmB,CAAC;QAC3D,IAAI,IAAI,CAAC,iBAAiB,KAAK,IAAI,IAAI,YAAY,IAAI,IAAI,CAAC,6BAA6B,EAAE,CAAC;YAC1F,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,iBAAiB,KAAK,IAAI,EAAE,CAAC;YACpC,aAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACxC,CAAC;QAED,IAAI,CAAC,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC7E,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACxC,CAAC;IAED,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,aAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACtC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAC9B,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACxC,CAAC;IAED,sBAAsB;QACpB,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;QACnC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;QAClC,CAAC;QAED,IAAI,CAAC,kBAAkB,CAAC,uBAAuB,EAAE;YAC/C,QAAQ,EAAE,IAAI,CAAC,iBAAiB;SACjC,CAAC,CAAC;IACL,CAAC;IAED,UAAU;QACR,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,WAAW;QACT,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAED,aAAa;QACX,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAED,8BAA8B;QAC5B,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;QACrD,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IACvD,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACjD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,iBAAiB,EAAE,CAAC;QACnC,IAAI,CAAC,8BAA8B,EAAE,CAAC;IACxC,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACjD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE,CAAC;QACpC,IAAI,CAAC,8BAA8B,EAAE,CAAC;IACxC,CAAC;IAED,UAAU,CAAC,CAAgB;QACzB,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YACpD,IAAI,CAAC,8BAA8B,EAAE,CAAC;QACxC,CAAC;IACH,CAAC;IAED,eAAe,CAAC,CAA0C;QACxD,IAAI,CAAC,8BAA8B,EAAE,CAAC;QAEtC,IAAI,CAAC,kBAAkB,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;IAChD,CAAC;IAED,IAAI,YAAY;QACd,OAAO,SAAS,CAAC,cAAY,EAAE,wBAAwB,CAAC,CAAC;IAC3D,CAAC;IAED,IAAI,gBAAgB;QAClB,OAAO,SAAS,CAAC,cAAY,EAAE,4BAA4B,CAAC,CAAC;IAC/D,CAAC;IAED,IAAI,aAAa;QACf,IAAI,OAAO,GAAG,eAAe,CAAC;QAE9B,OAAO,IAAI,+BAA+B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAErE,IACE,IAAI,CAAC,mBAAmB,KAAK,8BAA8B,CAAC,MAAM;eAC/D,IAAI,CAAC,iBAAiB,KAAK,6BAA6B,CAAC,IAAI,EAChE,CAAC;YACD,OAAO,IAAI,iDAAiD,CAAC;QAC/D,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,IAAI,sBAAsB;QACxB,IAAI,MAAM,GAAG,mCAAmC,CAAC;QAEjD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,MAAM,IAAI,8CAA8C,CAAC;QAC3D,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,IAAI,4BAA4B;QAC9B,IAAI,MAAM,GAAG,0CAA0C,CAAC;QAExD,IAAI,IAAI,CAAC,SAAS,EAAE,cAAc,EAAE,CAAC;YACnC,MAAM,IAAI,2DAA2D,CAAC;QACxE,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,IAAI,YAAY;QACd,IACE,IAAI,CAAC,mBAAmB,KAAK,8BAA8B,CAAC,MAAM;eAC/D,IAAI,CAAC,iBAAiB,KAAK,6BAA6B,CAAC,IAAI,EAChE,CAAC;YACD,OAAO,wBAAwB,CAAC,SAAS,CAAC;QAC5C,CAAC;QAED,OAAO,IAAI,CAAC,mBAAmB,KAAK,8BAA8B,CAAC,GAAG;YACpE,CAAC,CAAC,wBAAwB,CAAC,SAAS;YACpC,CAAC,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IACxC,CAAC;IAED,IAAI,qBAAqB;QACvB,OAAO;YACL,GAAG,EAAE,IAAI,CAAC,mBAAmB,KAAK,8BAA8B,CAAC,GAAG,IAAI,IAAI,CAAC,aAAa;YAC1F,MAAM,EAAE,IAAI,CAAC,mBAAmB,KAAK,8BAA8B,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa;SACjG,CAAC;IACJ,CAAC;IAED,IAAI,kBAAkB;QACpB,IACE,IAAI,CAAC,mBAAmB,KAAK,8BAA8B,CAAC,MAAM;eAC/D,IAAI,CAAC,iBAAiB,KAAK,6BAA6B,CAAC,IAAI,EAChE,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,IAAI,CAAC,mBAAmB,KAAK,8BAA8B,CAAC,GAAG,CAAC;IACzE,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAc,gBAAgB,CAAC,CAAC;IACvE,CAAC;IAED,IAAI,sBAAsB;QACxB,IACE,IAAI,CAAC,mBAAmB,KAAK,8BAA8B,CAAC,MAAM;eAC/D,IAAI,CAAC,iBAAiB,KAAK,6BAA6B,CAAC,IAAI,EAChE,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,+BAA+B;QACjC,OAAO,IAAI,CAAC,iBAAiB;YAC3B,CAAC,CAAC,SAAS,CAAC,cAAY,EAAE,8BAA8B,CAAC;YACzD,CAAC,CAAC,SAAS,CAAC,cAAY,EAAE,6BAA6B,CAAC,CAAC;IAC7D,CAAC;IAED,IAAI,0BAA0B;QAC5B,IAAI,IAAI,CAAC,iBAAiB,KAAK,6BAA6B,CAAC,IAAI,EAAE,CAAC;YAClE,OAAO,6BAA6B,CAAC,OAAO,CAAC;QAC/C,CAAC;QAED,OAAO,IAAI,CAAC,iBAAiB,CAAC;IAChC,CAAC;CACF,CAAA;AAtXG;IADD,QAAQ,EAAE;yDACqF;AAO9F;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACP;AAOnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACI;AAS7B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDACD;AAQzB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACT;AASjB;IADD,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC;2CACjC;AAejC;IADD,QAAQ,EAAE;kDACqB;AAa9B;IADD,QAAQ,EAAE;uDACyD;AASlE;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;0DACd;AAS/B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;0DACd;AAS/B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACG;AAS5B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;mDACvB;AAGjB;IADN,IAAI,CAAC,yBAAyB,CAAC;sCACF;AA5H1B,YAAY;IApBjB,aAAa,CAAC;QACb,GAAG,EAAE,eAAe;QACpB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,WAAW;QACnB,QAAQ,EAAE,gBAAgB;KAC3B,CAAC;IACF;;;;OAIG;;IACF,KAAK,CAAC,UAAU,CAAC;IAClB;;;;;OAKG;;IACF,KAAK,CAAC,uBAAuB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;GAE5C,YAAY,CAuYjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","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-strict.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 CarouselPageIndicatorType from \"@ui5/webcomponents/dist/types/CarouselPageIndicatorType.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\";\n\nexport enum UDExCarouselNavigationPosition {\n  top = \"top\",\n  bottom = \"bottom\",\n}\n\nexport enum UDExCarouselPageIndicatorType {\n    Default = \"Default\",\n    Numeric = \"Numeric\",\n    None = \"None\"\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: `${UDExCarouselPageIndicatorType}` = \"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.navigateArrowLeft();\n    this._calculateDisabledButtonsState();\n  }\n\n  _nextButtonClick() {\n    if (this.isNextButtonDisabled || !this._carousel) {\n      return;\n    }\n\n    this._carousel.navigateArrowRight();\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    let classes = \"udex-carousel\";\n\n    classes += ` udex-carousel__navigation--${this.navigationPlacement}`;\n\n    if (\n      this.navigationPlacement === UDExCarouselNavigationPosition.bottom\n      && this.pageIndicatorType === UDExCarouselPageIndicatorType.None\n    ) {\n      classes += \" udex-carousel__navigation--bottom-buttons-only\";\n    }\n\n    return classes;\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    if (\n      this.navigationPlacement === UDExCarouselNavigationPosition.bottom\n      && this.pageIndicatorType === UDExCarouselPageIndicatorType.None\n    ) {\n      return UDExCarouselButtonDesign.Secondary;\n    }\n\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    if (\n      this.navigationPlacement === UDExCarouselNavigationPosition.bottom\n      && this.pageIndicatorType === UDExCarouselPageIndicatorType.None\n    ) {\n      return true;\n    }\n\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 _isBottomDotNavigation(): boolean {\n    if (\n      this.navigationPlacement === UDExCarouselNavigationPosition.bottom\n      && this.pageIndicatorType !== UDExCarouselPageIndicatorType.None\n    ) {\n      return true;\n    }\n    return false;\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  get sanitizedPageIndicatorType(): `${CarouselPageIndicatorType}` {\n    if (this.pageIndicatorType === UDExCarouselPageIndicatorType.None) {\n      return UDExCarouselPageIndicatorType.Default;\n    }\n\n    return this.pageIndicatorType;\n  }\n}\n\nUDExCarousel.define();\n\nexport default UDExCarousel;\nexport type { CarouselNavigateEventDetail, UDExCarouselAutoplayToggleEventDetails };\n"]}

package/dist/CarouselTemplate.js

@@ -9,14 +9,14 @@ 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, 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)] }));
+    return (_jsxs("div", { className: this.carouselClass, onKeyDown: this._onkeydown, children: [this.showNavigationButtons.top && navigation.call(this), _jsx(UI5Carousel, { itemsPerPage: this.itemsPerPage, pageIndicatorType: this.sanitizedPageIndicatorType, 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";
     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(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._isBottomDotNavigation &&
+                        _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._isBottomDotNavigation &&
                 _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":"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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"]}
+{"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.sanitizedPageIndicatorType}\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._isBottomDotNavigation &&\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._isBottomDotNavigation &&\n        <div className=\"udex-carousel__navigation-spacer\"></div>\n      }\n    </div>\n  );\n}\n"]}

package/dist/TabNavigation.d.ts

@@ -9,6 +9,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import "@ui5/webcomponents-icons/dist/play.js";
 import "@ui5/webcomponents-icons/dist/pause.js";
+import UDExButtonSize from "./types/ButtonSize.js";
 import TabNavigationPopoverTemplate from "./generated/templates/TabNavigationPopoverTemplate.lit.js";
 export declare enum UDExSizeMoreButton {
     Small = "Small",
@@ -64,9 +65,9 @@ declare class UDExTabNavigation extends UI5Element {
      * Defines the size of the "More" button.
      *
      * @public
-     * @default "Small"
+     * @default "Medium"
     */
-    sizeMoreButton: `${UDExSizeMoreButton}`;
+    sizeMoreButton: `${UDExButtonSize}`;
     /**
      * Defines the mode of the component.
      *

package/dist/TabNavigation.js

@@ -25,6 +25,7 @@ import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import "@ui5/webcomponents-icons/dist/play.js";
 import "@ui5/webcomponents-icons/dist/pause.js";
 import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
 // Templates
 import TabNavigationTemplate from "./generated/templates/TabNavigationTemplate.lit.js";
 import TabNavigationPopoverTemplate from "./generated/templates/TabNavigationPopoverTemplate.lit.js";
@@ -83,9 +84,9 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
          * Defines the size of the "More" button.
          *
          * @public
-         * @default "Small"
+         * @default "Medium"
         */
-        this.sizeMoreButton = "Small";
+        this.sizeMoreButton = UDExButtonSize.Medium;
         /**
          * Defines the mode of the component.
          *