@sapudex/web-components 2.47.0 → 2.48.0

package/dist/messagebundle_pl.properties

@@ -2,4 +2,137 @@ COPYRIGHT=© {0} SAP SE lub podmiot powiązany SAP. Wszelkie prawa zastrzeżone.
 OVERVIEW=Przegląd
 LOGOUT=Wyloguj się
 MAIN_LINKS=Główne łącza
-BACK_TO_TOP=Powrót do góry
+BACK_TO_TOP=Powrót do góry
+COUNT=Liczba
+OF= z
+PAGINATION_PAGE=Strona
+SELECTED=Wybrano
+UNSELECTED=Niezaznaczone
+INDETERMINATE=Nieokreślone
+EDIT_BUTTON=Edytuj
+DELETE_BUTTON=Usuń
+BACK_TO_REGION_LIST=Wróć do listy regionów
+BUTTON_ARIA_TYPE_PRIMARY=Główny
+BUTTON_ARIA_TYPE_SECONDARY=Drugorzędny
+BUTTON_ARIA_TYPE_TERTIARY=Trzeciorzędny
+BUTTON_ARIA_TYPE_WARNING=Ostrzeżenie
+BUTTON_ARIA_TYPE_POSITIVE=Pozytywny
+BUTTON_ARIA_TYPE_NEGATIVE=Negatywny
+BUTTON_ARIA_EMPHASIZED=Wyróżniony
+BUTTON_ARIA_DEFAULT=Domyślny
+BUTTON_ARIA_TRANSPARENT=Przezroczysty
+BUTTON_ARIA_ATTENTION=Ostrzeżenie
+DATEPICKER_DATE_DESCRIPTION=Wprowadzona data
+TOGGLED=Przełączony
+FIRST_PAGE=Pierwsza strona
+LAST_PAGE=Ostatnia strona
+PREVIOUS_PAGE=Poprzednia strona
+NEXT_PAGE=Następna strona
+CURRENT_PAGE=Bieżąca strona
+ACTIVATE_PAGE=Aktywuj stronę numer
+SUGGESTED_TEXT=sugerowane zapytania
+ACCESSIBLE_NAME_SEARCH_ICON=Wyszukaj
+TOOLTIP_VOICE_BUTTON=Głos
+TOOLTIP_SUBMIT_BUTTON=Prześlij
+LISTENING=Słuchanie
+AVAILABLE_VALUES=Dostępne wartości
+RECOMMENDED_TEXT=Zalecane strony
+EXPAND_ALL=Rozwiń wszystko
+COLLAPSE_ALL=Zwin wszystko
+MORE=Więcej
+ATTENTION_BADGE=Znacznik ostrzeżenia
+READ_MORE=Czytaj więcej
+READ_LESS=Czytaj mniej
+SHOW_MORE=Pokaż więcej
+SHOW_LESS=Pokaż mniej
+RATING_INDICATOR_TEXT=Wskaźnik oceny
+RATING_INDICATOR_TOOLTIP_TEXT=Ocena
+RATING_INDICATOR_ARIA_DESCRIPTION=Wymagane
+TOTAL=Ogółem
+RATING_COUNT_TITLE=Ocena
+ARIA_LABEL_LIST_MULTISELECTABLE=Zawiera elementy wielokrotnego wyboru
+ARIA_LABEL_LIST_SELECTABLE=Zawiera elementy do wyboru
+SHOW_RESULTS=Wyświetl wyniki
+RESET=Reset
+MESSAGE_STRIP_CLOSE_BUTTON=Przycisk zamknięcia paska z komunikatem
+MESSAGE_STRIP_INFORMATION=Pasek informacji
+MESSAGE_STRIP_SUCCESS=Pasek pozytywny
+MESSAGE_STRIP_WARNING=Pasek ostrzegawczy
+MESSAGE_STRIP_ERROR=Pasek negatywny
+MESSAGE_STRIP_ACTION=Pasek działań
+REVIEWS=opinie
+STARS=gwiazdki
+SELECT_OPTIONS=Wybierz opcje
+SELECT_ALL=Zaznacz wszystkie
+TEXTAREA_CHARACTERS_LEFT=Pozostałe znaki: {0}
+VALUE_STATE_TYPE_ERROR=Błąd stanu pola
+VALUE_STATE_TYPE_WARNING=Ostrzeżenie dotyczące stanu pola
+VALUE_STATE_TYPE_SUCCESS=Stan pola: poprawny
+VALUE_STATE_TYPE_STANDARD=Stan pola: standardowy
+CAROUSEL_PREVIOUS_ARROW_TEXT=Poprzednia strona
+CAROUSEL_NEXT_ARROW_TEXT=Następna strona
+NO_MATCHES_FOUND=Nie znaleziono pasujących wyników.
+BREADCRUMBS_ARIA_LABEL=Ścieżka nawigacyjna
+BREADCRUMBS_OVERFLOW_ARIA_LABEL=Więcej
+STEPINPUT_INC_ICON_TITLE=Zwiększ ilość o
+STEPINPUT_DEC_ICON_TITLE=Zmniejsz ilość o
+TABLE_NO_DATA_FOUND=Nie znaleziono daty
+VALUE_STATE_ERROR=Nieprawidłowy wpis
+VALUE_STATE_WARNING=Wyświetlono ostrzeżenie
+VALUE_STATE_INFORMATION=Wpis informacyjny
+VALUE_STATE_SUCCESS=Wpis został zweryfikowany
+READ_ONLY=Tylko do odczytu
+SWITCH_ACCOUNT=Przełącz konto
+BACK=Powrót
+OTHER_IDENTITIES=Inne tożsamości
+ADD_OR_REMOVE_ACCOUNT=Dodaj lub usuń konto
+COUNTRY_SELECT=Wybierz kraj
+CART=Koszyk
+COUNTRY_SELECTOR=Selektor kraju
+PHONE_NUMBER=Numer telefonu do miejsca konferencji
+CONTACT_US=Skontaktuj się z nami
+EMAIL=E-mail
+CHAT_WITH_US=Porozmawiaj z nami
+QUICK_LINKS=Szybkie łącza
+TRENDING=Popularne
+ABOUT_SAP=O SAP
+SITE_INFORMATION=Informacje o witrynie
+AVATAR_TEXT=Awatar
+CALENDAR_ICON=Ikona Otwórz kalendarz
+LIST_ITEM_EDIT_ICON=Edytuj wprowadzony element listy
+LIST_ITEM_DELETE_ICON=Usuń wprowadzony element listy
+BACK_BUTTON_LABEL=Przycisk Wstecz
+STATUS_BADGE_TEXT=Znacznik stanu
+STATUS_BADGE_EDIT_TITLE=Kliknij, aby edytować profil
+STATUS_BADGE_INFORMATION_TITLE=Kliknij, aby otworzyć informacje o profilu
+STATUS_BADGE_WARNING_TITLE=Ostrzeżenie, potencjalne ryzyko dotyczące profilu
+STATUS_BADGE_ERROR_TITLE=Wystąpił błąd dotyczący profilu
+STATUS_BADGE_SUCCESS_TITLE=Zweryfikowano profil
+PROFILE=Profil
+OPENS_IN_A_NEW_WINDOW=otwiera się w nowym oknie
+TEXT_FIELD=Pole tekstowe
+UPLOADING_FILE_STATUS_TEXT=Przesyłanie
+TERMINATED_FILE_STATUS_TEXT=Zakończone
+REMOVE_FILE_TEXT=Usuń plik
+UPLOAD_BUTTON_LABEL=Prześlij plik
+COMPLETE_LIST_OF=Pełna lista
+CALL_US_TODAY=Zadzwoń do nas już dziś
+SEARCH=Wyszukaj
+RESULT_RETURNED=zwróconych wyników.
+SOCIAL_MEDIA_BUTTON=Przycisk Media społecznościowe
+PROMO_TILE=Kafelek promocyjny
+PROMO_TILE_ICON=Ikona kafelka promocyjnego
+PLAY_BUTTON_ACCESSIBLE_NAME=Przycisk rozpoczynający rotację logo klientów
+PAUSE_BUTTON_ACCESSIBLE_NAME=Przycisk wstrzymujący rotację logo klientów
+LOCATION=Miejsce konferencji
+TOAST_CLOSE_ACCESSIBLE_NAME=Zamknij
+DISABLED=Wyłączone
+EXPAND=Rozwiń
+COLLAPSE=Zwiń
+SHOW_PASSWORD=Pokaż hasło
+HIDE_PASSWORD=Ukryj hasło
+SUPPORT=Wsparcie
+ACCESSIBLE_NAME_RESET_ICON=Wyczyść
+TOOLTIP_RESET_BUTTON=Wyczyść
+SEE_COMPLETE_LIST=Lub zobacz pełną listę
+LOCAL_COUNTRY_NAMES=lokalnych numerów krajowych

package/dist/messagebundle_pt_PT.properties

@@ -4,4 +4,129 @@ OVERVIEW=Visão geral
 LOGOUT=Sair
 MAIN_LINKS=Ligações principais
 BACK_TO_TOP=Voltar ao início
-
+COUNT=Contagem
+OF=de
+PAGINATION_PAGE=Página
+SELECTED=Selecionado
+UNSELECTED=Não selecionado
+INDETERMINATE=Indeterminado
+EDIT_BUTTON=Editar
+DELETE_BUTTON=Eliminar
+BACK_TO_REGION_LIST=Voltar à lista de regiões
+BUTTON_ARIA_TYPE_PRIMARY=Primário
+BUTTON_ARIA_TYPE_SECONDARY=Secundário
+BUTTON_ARIA_TYPE_TERTIARY=Terciário
+BUTTON_ARIA_TYPE_WARNING=Aviso
+BUTTON_ARIA_TYPE_POSITIVE=Positivo
+BUTTON_ARIA_TYPE_NEGATIVE=Negativo
+BUTTON_ARIA_EMPHASIZED=Destacado
+BUTTON_ARIA_DEFAULT=Predefinido
+BUTTON_ARIA_TRANSPARENT=Transparente
+BUTTON_ARIA_ATTENTION=Atenção
+DATEPICKER_DATE_DESCRIPTION=Entrada de data
+TOGGLED=Alternado
+FIRST_PAGE=Primeira página
+LAST_PAGE=Última página
+PREVIOUS_PAGE=Página anterior
+NEXT_PAGE=Página seguinte
+CURRENT_PAGE=Página atual
+ACTIVATE_PAGE=Ativar número da página
+SUGGESTED_TEXT=pesquisas sugeridas
+ACCESSIBLE_NAME_SEARCH_ICON=Pesquisar
+TOOLTIP_VOICE_BUTTON=Voz
+TOOLTIP_SUBMIT_BUTTON=Enviar
+LISTENING=Escuta
+AVAILABLE_VALUES=Valores disponíveis
+RECOMMENDED_TEXT=Páginas recomendadas
+EXPAND_ALL=Expandir tudo
+COLLAPSE_ALL=Comprimir tudo
+MORE=Mais
+ATTENTION_BADGE=Crachá de atenção
+READ_MORE=Ler mais
+READ_LESS=Ler menos
+SHOW_MORE=Mostrar mais
+SHOW_LESS=Mostrar menos
+RATING_INDICATOR_TEXT=Indicador de classificação
+RATING_INDICATOR_TOOLTIP_TEXT=Classificação
+RATING_INDICATOR_ARIA_DESCRIPTION=Obrigatório
+TOTAL=Total
+RATING_COUNT_TITLE=Classificação
+ARIA_LABEL_LIST_MULTISELECTABLE=Contém itens de seleção múltipla
+ARIA_LABEL_LIST_SELECTABLE=Contém itens selecionáveis
+SHOW_RESULTS=Mostrar resultados
+RESET=Repor
+MESSAGE_STRIP_CLOSE_BUTTON=Botão Fechar da faixa de mensagens
+MESSAGE_STRIP_INFORMATION=Barra de informação
+MESSAGE_STRIP_SUCCESS=Barra positiva
+MESSAGE_STRIP_WARNING=Barra de aviso
+MESSAGE_STRIP_ERROR=Barra negativa
+MESSAGE_STRIP_ACTION=Barra de ação
+REVIEWS=avaliações
+STARS=estrelas
+SELECT_OPTIONS=Selecionar opções
+SELECT_ALL=Selecionar todos
+TEXTAREA_CHARACTERS_LEFT=Restam {0} carateres
+VALUE_STATE_TYPE_ERROR=Erro de estado do campo
+VALUE_STATE_TYPE_WARNING=Aviso de estado do campo
+VALUE_STATE_TYPE_SUCCESS=Sucesso de estado do campo
+VALUE_STATE_TYPE_STANDARD=Padrão de estado do campo
+CAROUSEL_PREVIOUS_ARROW_TEXT=Página anterior
+CAROUSEL_NEXT_ARROW_TEXT=Página seguinte
+NO_MATCHES_FOUND=Nenhuma correspondência encontrada.
+BREADCRUMBS_ARIA_LABEL=Trilho de navegação
+BREADCRUMBS_OVERFLOW_ARIA_LABEL=Mais
+STEPINPUT_INC_ICON_TITLE=Aumentar a quantidade em
+STEPINPUT_DEC_ICON_TITLE=Diminuir a quantidade em
+TABLE_NO_DATA_FOUND=Não foram encontrados dados
+VALUE_STATE_ERROR=Entrada inválida
+VALUE_STATE_WARNING=Aviso emitido
+VALUE_STATE_INFORMATION=Entrada informativa
+VALUE_STATE_SUCCESS=Entrada validada com sucesso
+READ_ONLY=Só de leitura
+SWITCH_ACCOUNT=Mudar de conta
+BACK=Voltar
+OTHER_IDENTITIES=Outras identidades
+ADD_OR_REMOVE_ACCOUNT=Adicionar ou remover conta
+COUNTRY_SELECT=Selecionar país
+CART=Carrinho
+COUNTRY_SELECTOR=Seletor de país
+PHONE_NUMBER=Nº de telefone
+CONTACT_US=Contacte-nos
+EMAIL=E-mail
+CHAT_WITH_US=Fale connosco
+QUICK_LINKS=Ligações rápidas
+TRENDING=Tendências
+ABOUT_SAP=Sobre a SAP
+SITE_INFORMATION=Informações sobre o sítio
+AVATAR_TEXT=Avatar
+CALENDAR_ICON=Ícone Abrir calendário
+LIST_ITEM_EDIT_ICON=Editar entrada do item da lista
+LIST_ITEM_DELETE_ICON=Eliminar entrada do item da lista
+BACK_BUTTON_LABEL=botão Voltar
+STATUS_BADGE_TEXT=Crachá de estado
+STATUS_BADGE_EDIT_TITLE=Clique para editar o perfil
+STATUS_BADGE_INFORMATION_TITLE=Clique para abrir as informações de perfil
+STATUS_BADGE_WARNING_TITLE=Aviso, risco potencial com o perfil
+STATUS_BADGE_ERROR_TITLE=Ocorreu um erro com o perfil
+STATUS_BADGE_SUCCESS_TITLE=Perfil verificado com sucesso
+PROFILE=Perfil
+OPENS_IN_A_NEW_WINDOW=abre numa nova janela
+TEXT_FIELD=Campo de texto
+UPLOADING_FILE_STATUS_TEXT=A carregar
+TERMINATED_FILE_STATUS_TEXT=Terminado
+REMOVE_FILE_TEXT=Remover ficheiro
+UPLOAD_BUTTON_LABEL=Carregar ficheiro
+COMPLETE_LIST_OF=Lista completa de
+CALL_US_TODAY=Contacte-nos hoje mesmo!
+SEARCH=Pesquisar
+RESULT_RETURNED=resultados devolvidos.
+SOCIAL_MEDIA_BUTTON=Botão de Redes sociais
+PROMO_TILE=Mosaico promocional
+PROMO_TILE_ICON=Ícone de mosaico promocional
+PLAY_BUTTON_ACCESSIBLE_NAME=Botão de início para iniciar a rotação de logótipos de cliente
+PAUSE_BUTTON_ACCESSIBLE_NAME=Botão de pausa para interromper a rotação de logótipos de cliente
+LOCATION=Localização
+TOAST_CLOSE_ACCESSIBLE_NAME=Fechar
+DISABLED=Desativado
+EXPAND=Expandir
+COLLAPSE=Comprimir

package/dist/vscode.html-custom-data.json

@@ -283,13 +283,28 @@
     },
     {
       "name": "udex-carousel",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-carousel</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Carousel.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **navigate** - Triggered when carousel navigates to a new slide\n\n### **Slots:**\n - **default** - Defines the content of the component.",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-carousel</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Carousel.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **autoplay-toggle-click** - Fired event when the user click on a play/paused button.\n- **navigate** - Triggered when carousel navigates to a new slide\n\n### **Slots:**\n - **default** - Defines the content of the component.",
       "attributes": [
         {
           "name": "accessible-name",
           "description": "Defines the accessible ARIA name of the component.",
           "values": []
         },
+        {
+          "name": "autoplay",
+          "description": "Controls carousel autoplay functionality",
+          "values": []
+        },
+        {
+          "name": "autoplay-speed",
+          "description": "Defines carousel autoplay speed in milliseconds till next slide",
+          "values": []
+        },
+        {
+          "name": "cyclic",
+          "description": "Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.",
+          "values": []
+        },
         {
           "name": "items-per-page",
           "description": "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\nOne item per page is shown by default.",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.47.0",
+  "version": "2.48.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -584,7 +584,7 @@
         },
         {
           "name": "udex-carousel",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-carousel</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Carousel.js\";</code>\n---\n\n\n### **Events:**\n - **navigate** - Triggered when carousel navigates to a new slide\n\n### **Slots:**\n - **default** - Defines the content of the component.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-carousel</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Carousel.js\";</code>\n---\n\n\n### **Events:**\n - **autoplay-toggle-click** - Fired event when the user click on a play/paused button.\n- **navigate** - Triggered when carousel navigates to a new slide\n\n### **Slots:**\n - **default** - Defines the content of the component.",
           "doc-url": "",
           "attributes": [
             {
@@ -592,6 +592,21 @@
               "description": "Defines the accessible ARIA name of the component.",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "autoplay",
+              "description": "Controls carousel autoplay functionality",
+              "value": { "type": "boolean | undefined", "default": "undefined" }
+            },
+            {
+              "name": "autoplay-speed",
+              "description": "Defines carousel autoplay speed in milliseconds till next slide",
+              "value": { "type": "number", "default": "2000" }
+            },
+            {
+              "name": "cyclic",
+              "description": "Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.",
+              "value": { "type": "boolean | undefined", "default": "false" }
+            },
             {
               "name": "items-per-page",
               "description": "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\nOne item per page is shown by default.",
@@ -618,6 +633,10 @@
             }
           ],
           "events": [
+            {
+              "name": "autoplay-toggle-click",
+              "description": "Fired event when the user click on a play/paused button."
+            },
             {
               "name": "navigate",
               "description": "Triggered when carousel navigates to a new slide"
@@ -630,6 +649,21 @@
                 "description": "Defines the accessible ARIA name of the component.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "autoplay",
+                "description": "Controls carousel autoplay functionality",
+                "value": { "type": "boolean | undefined" }
+              },
+              {
+                "name": "autoplay-speed",
+                "description": "Defines carousel autoplay speed in milliseconds till next slide",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "cyclic",
+                "description": "Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.",
+                "value": { "type": "boolean | undefined" }
+              },
               {
                 "name": "items-per-page",
                 "description": "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\nOne item per page is shown by default.",
@@ -647,6 +681,10 @@
               }
             ],
             "events": [
+              {
+                "name": "autoplay-toggle-click",
+                "description": "Fired event when the user click on a play/paused button."
+              },
               {
                 "name": "navigate",
                 "description": "Triggered when carousel navigates to a new slide"

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.47.0",
+  "version": "2.48.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/Carousel.ts

@@ -10,12 +10,16 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   isUp, isDown, isRight, isLeft,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import { CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT } from "./generated/i18n/i18n-defaults.js";
+import {
+  CAROUSEL_NEXT_ARROW_TEXT,
+  CAROUSEL_PREVIOUS_ARROW_TEXT,
+  CAROUSEL_AUTOPLAY_TOGGLE_START,
+  CAROUSEL_AUTOPLAY_TOGGLE_STOP,
+} from "./generated/i18n/i18n-defaults.js";
 import redirectAttributes from "./utils/redirectAttributes.js";
 import type UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
 import type { CarouselNavigateEventDetail } from "@ui5/webcomponents/dist/Carousel.js";
 import type { UI5CustomEvent } from "@ui5/webcomponents-base";
-import type Icon from "@ui5/webcomponents/dist/Icon.js";
 import translate from "./utils/translate.js";
 
 import CarouselTemplate from "./CarouselTemplate.js";
@@ -23,7 +27,6 @@ import CarouselTemplate from "./CarouselTemplate.js";
 // Styles
 import CarouselCss from "./generated/themes/Carousel.css.js";
 import type CarouselPageIndicatorType from "@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js";
-import type UDExButton from "./Button.js";
 
 export enum UDExCarouselNavigationPosition {
   top = "top",
@@ -35,6 +38,10 @@ export enum UDExCarouselButtonDesign {
   Tertiary = "Tertiary",
 }
 
+type UDExCarouselAutoplayToggleEventDetails = {
+  isPaused: boolean;
+}
+
 /**
  * @class
  *
@@ -65,10 +72,18 @@ export enum UDExCarouselButtonDesign {
  * @param { CustomEvent }
  */
 @event("navigate")
+/**
+ * Fired event when the user click on a play/paused button.
+ *
+ * @public
+ * @param {boolean} isPaused - Indicates current state of autoplay
+ */
+@event("autoplay-toggle-click", { bubbles: true })
 
 class UDExCarousel extends UI5Element {
   eventDetails!: {
     "navigate": CarouselNavigateEventDetail,
+    "autoplay-toggle-click": UDExCarouselAutoplayToggleEventDetails,
   };
   /**
    * Defines the position of the navigation.
@@ -83,6 +98,37 @@ class UDExCarousel extends UI5Element {
    */
   @property()
     navigationPlacement: `${UDExCarouselNavigationPosition}` = UDExCarouselNavigationPosition.top;
+  /**
+   * Controls carousel autoplay functionality
+   * @public
+   * @default undefined
+   */
+  @property({ type: Boolean })
+    autoplay?: boolean;
+
+  /**
+   * Defines carousel autoplay speed in milliseconds till next slide
+   * @public
+   */
+  @property({ type: Number })
+    autoplaySpeed: number = 2000;
+
+  /**
+   * Indicates current state of autoplay.
+   *
+   * @default true
+   * @private
+   */
+  @property({ type: Boolean })
+    _autoplayIsPaused = true;
+
+  /**
+   * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.
+   * @public
+   * @default false
+   */
+  @property({ type: Boolean })
+    cyclic?: boolean;
 
   /**
    * Defines the content of the component.
@@ -151,6 +197,31 @@ class UDExCarousel extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
+  _autoplayInterval: ReturnType<typeof setInterval> | null = null;
+  _autoplayLastToggle = Date.now();
+  _autoplayMinTimeBetweenToggle = 250;
+  _autoplayManualStop = false;
+  _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(): string {
     return translate(UDExCarousel, CAROUSEL_NEXT_ARROW_TEXT);
   }
@@ -165,6 +236,26 @@ class UDExCarousel extends UI5Element {
     return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;
   }
 
+  get navigationWrapperClass(): string {
+    let _class = "udex-carousel__navigation-wrapper";
+
+    if (this.autoplay) {
+      _class += " udex-carousel__navigation-wrapper--autoplay";
+    }
+
+    return _class;
+  }
+
+  get navigationButtonWrapperClass(): string {
+    let _class = "udex-carousel__navigation-button-wrapper";
+
+    if (this._carousel?.isPageTypeDots) {
+      _class += " udex-carousel__navigation-button-wrapper--dot-indicators";
+    }
+
+    return _class;
+  }
+
   get buttonDesign(): UDExCarouselButtonDesign {
     return this.navigationPlacement === UDExCarouselNavigationPosition.top
       ? UDExCarouselButtonDesign.Secondary
@@ -190,25 +281,98 @@ class UDExCarousel extends UI5Element {
     return this._carousel?.shadowRoot?.querySelector(".ui5-carousel-root");
   }
 
+  _startAutoplay(): void {
+    if (!this.autoplay) { return; }
+
+    if (!this._carousel?.items) {
+      console.warn("[UDExCarousel] Cannot start autoplay on an empty carousel");
+      return;
+    }
+
+    const toggleBuffer = Date.now() - this._autoplayLastToggle;
+    if (this._autoplayInterval !== null && toggleBuffer <= this._autoplayMinTimeBetweenToggle) {
+      this._autoplayLastToggle = Date.now();
+      return;
+    }
+
+    if (this._autoplayInterval !== null) {
+      clearInterval(this._autoplayInterval);
+    }
+
+    this._autoplayInterval = setInterval(this._autoplayLoop, this.autoplaySpeed);
+    this._autoplayIsPaused = false;
+    this._autoplayLastToggle = Date.now();
+  }
+
+  _stopAutoplay(): void {
+    if (!this._autoplayInterval) { return; }
+
+    clearInterval(this._autoplayInterval);
+    this._autoplayIsPaused = true;
+    this._autoplayLastToggle = Date.now();
+  }
+
+  _onAutoplayToggleClick(): void {
+    if (this._autoplayIsPaused) {
+      this._startAutoplay();
+      this._autoplayManualStop = false;
+    } else {
+      this._stopAutoplay();
+      this._autoplayManualStop = true;
+    }
+
+    this.fireDecoratorEvent("autoplay-toggle-click", {
+      isPaused: this._autoplayIsPaused,
+    });
+  }
+
+  get _isBottomNavigation(): boolean {
+    return this.navigationPlacement === UDExCarouselNavigationPosition.bottom;
+  }
+
+  get autoplayToggleButtonTooltipText(): string {
+    return this._autoplayIsPaused
+      ? translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_START)
+      : translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_STOP);
+  }
+
+  _onFocusIn(): void {
+    this._stopAutoplay();
+  }
+
+  _onFocusOut(): void {
+    if (!this._autoplayManualStop) { this._startAutoplay(); }
+  }
+
+  _onMouseEnter(): void {
+    this._stopAutoplay();
+  }
+
+  _onMouseLeave(): void {
+    if (!this._autoplayManualStop) { this._startAutoplay(); }
+  }
+
   _calculateDisabledButtonsState() {
     this.isPrevButtonDisabled = !this._carousel?.hasPrev;
     this.isNextButtonDisabled = !this._carousel?.hasNext;
   }
 
-  _prevButtonClick(e: UI5CustomEvent<UDExButton, "click">) {
-    if (this.isPrevButtonDisabled) {
+  _prevButtonClick() {
+    if (this.isPrevButtonDisabled || !this._carousel) {
       return;
     }
 
-    this._carousel?._navButtonClick(e as unknown as UI5CustomEvent<Icon, "click">);
+    this._carousel.navigateLeft();
+    this._calculateDisabledButtonsState();
   }
 
-  _nextButtonClick(e: UI5CustomEvent<UDExButton, "click">) {
-    if (this.isNextButtonDisabled) {
+  _nextButtonClick() {
+    if (this.isNextButtonDisabled || !this._carousel) {
       return;
     }
 
-    this._carousel?._navButtonClick(e as unknown as UI5CustomEvent<Icon, "click">);
+    this._carousel.navigateRight();
+    this._calculateDisabledButtonsState();
   }
 
   _onkeydown(e: KeyboardEvent) {
@@ -227,9 +391,16 @@ class UDExCarousel extends UI5Element {
     redirectAttributes(this, "carousel");
 
     this._calculateDisabledButtonsState();
+
+    if (this._autoplayInterval === null) { this._startAutoplay(); }
+  }
+
+  onExitDOM(): void {
+    if (this._autoplayInterval) { clearInterval(this._autoplayInterval); }
   }
 }
 
 UDExCarousel.define();
 
 export default UDExCarousel;
+export type { CarouselNavigateEventDetail, UDExCarouselAutoplayToggleEventDetails };