@sapudex/web-components 2.44.0 → 2.45.0

package/dist/messagebundle_pt.properties

@@ -4,3 +4,129 @@ OVERVIEW=Síntese
 LOGOUT=Sair
 MAIN_LINKS=Principais links
 BACK_TO_TOP=Voltar ao início
+COUNT=Número
+OF=de
+PAGINATION_PAGE=Página
+SELECTED=Selecionado
+UNSELECTED=Não selecionado
+INDETERMINATE=Indeterminado
+EDIT_BUTTON=Editar
+DELETE_BUTTON=Excluir
+BACK_TO_REGION_LIST=Voltar para 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=Advertência
+BUTTON_ARIA_TYPE_POSITIVE=Positivo
+BUTTON_ARIA_TYPE_NEGATIVE=Negativo
+BUTTON_ARIA_EMPHASIZED=Enfatizado
+BUTTON_ARIA_DEFAULT=Padrão
+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=Próxima página
+CURRENT_PAGE=Página atual
+ACTIVATE_PAGE=Ativar número da página
+SUGGESTED_TEXT=pesquisas sugeridas
+ACCESSIBLE_NAME_SEARCH_ICON=Pesquisa
+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=Recolher tudo
+MORE=Mais
+ATTENTION_BADGE=Indicador de atenção
+READ_MORE=Leia mais
+READ_LESS=Ler menos
+SHOW_MORE=Mostrar mais
+SHOW_LESS=Mostrar menos
+RATING_INDICATOR_TEXT=Indicador de avaliaçã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 com seleção múltipla
+ARIA_LABEL_LIST_SELECTABLE=Contém itens selecionáveis
+SHOW_RESULTS=Mostrar resultados
+RESET=Redefinir
+MESSAGE_STRIP_CLOSE_BUTTON=Botão Fechar faixa de mensagens
+MESSAGE_STRIP_INFORMATION=Barra de informações
+MESSAGE_STRIP_SUCCESS=Barra positiva
+MESSAGE_STRIP_WARNING=Barra de advertência
+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 tudo
+TEXTAREA_CHARACTERS_LEFT={0} caracteres restantes
+VALUE_STATE_TYPE_ERROR=Erro de status do campo
+VALUE_STATE_TYPE_WARNING=Advertência de status do campo
+VALUE_STATE_TYPE_SUCCESS=Sucesso no status do campo
+VALUE_STATE_TYPE_STANDARD=Padrão de status do campo
+CAROUSEL_PREVIOUS_ARROW_TEXT=Página anterior
+CAROUSEL_NEXT_ARROW_TEXT=Próxima página
+NO_MATCHES_FOUND=Nenhuma correspondência encontrada.
+BREADCRUMBS_ARIA_LABEL=Trilha de navegação
+BREADCRUMBS_OVERFLOW_ARIA_LABEL=Mais
+STEPINPUT_INC_ICON_TITLE=Aumentar quantidade em
+STEPINPUT_DEC_ICON_TITLE=Reduzir quantidade em
+TABLE_NO_DATA_FOUND=Nenhum dado encontrado
+VALUE_STATE_ERROR=Entrada inválida
+VALUE_STATE_WARNING=Advertência emitida
+VALUE_STATE_INFORMATION=Entrada informativa
+VALUE_STATE_SUCCESS=Entrada validada com sucesso
+READ_ONLY=Somente leitura
+SWITCH_ACCOUNT=Trocar a 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íses
+PHONE_NUMBER=Nº de telefone
+CONTACT_US=Fale conosco
+EMAIL=E-mail
+CHAT_WITH_US=Fale conosco pelo chat
+QUICK_LINKS=Links úteis
+TRENDING=Tendências
+ABOUT_SAP=Sobre a SAP
+SITE_INFORMATION=Informações sobre o site
+AVATAR_TEXT=Avatar
+CALENDAR_ICON=Ícone Abrir calendário
+LIST_ITEM_EDIT_ICON=Editar entrada de item da lista
+LIST_ITEM_DELETE_ICON=Excluir entrada de item da lista
+BACK_BUTTON_LABEL=botão Voltar
+STATUS_BADGE_TEXT=Indicador de status
+STATUS_BADGE_EDIT_TITLE=Clique para editar o perfil
+STATUS_BADGE_INFORMATION_TITLE=Clique para abrir as informações do perfil
+STATUS_BADGE_WARNING_TITLE=Advertência, risco potencial com o perfil
+STATUS_BADGE_ERROR_TITLE=Há um erro no perfil
+STATUS_BADGE_SUCCESS_TITLE=Perfil verificado com sucesso
+PROFILE=Perfil
+OPENS_IN_A_NEW_WINDOW=abre em uma nova janela
+TEXT_FIELD=Campo de texto
+UPLOADING_FILE_STATUS_TEXT=Upload em andamento
+TERMINATED_FILE_STATUS_TEXT=Encerrado
+REMOVE_FILE_TEXT=Remover arquivo
+UPLOAD_BUTTON_LABEL=Carregar arquivo
+COMPLETE_LIST_OF=Lista completa de
+CALL_US_TODAY=Ligue para nós ainda hoje!
+SEARCH=Pesquisar
+RESULT_RETURNED=resultados encontrados.
+SOCIAL_MEDIA_BUTTON=Botão de Mídias sociais
+PROMO_TILE=Bloco promocional
+PROMO_TILE_ICON=Ícone de bloco promocional
+PLAY_BUTTON_ACCESSIBLE_NAME=Botão Iniciar para iniciar a rotação dos logotipos de cliente
+PAUSE_BUTTON_ACCESSIBLE_NAME=Botão Pausar para interromper a rotação dos logotipos de cliente
+LOCATION=Localização
+TOAST_CLOSE_ACCESSIBLE_NAME=Fechar
+DISABLED=Desativado
+EXPAND=Expandir
+COLLAPSE=Recolher

package/dist/messagebundle_ro.properties

@@ -3,3 +3,129 @@ OVERVIEW=Imagine generală
 LOGOUT=Ieșire
 MAIN_LINKS=Linkuri principale
 BACK_TO_TOP=Înapoi sus
+COUNT=Numărul
+OF=din
+PAGINATION_PAGE=Pagina
+SELECTED=Selectate
+UNSELECTED=Neselectat
+INDETERMINATE=Nedeterminat
+EDIT_BUTTON=Editare
+DELETE_BUTTON=Ștergere
+BACK_TO_REGION_LIST=Înapoi la lista de regiuni
+BUTTON_ARIA_TYPE_PRIMARY=Primar
+BUTTON_ARIA_TYPE_SECONDARY=Secundar
+BUTTON_ARIA_TYPE_TERTIARY=Terțiar
+BUTTON_ARIA_TYPE_WARNING=Avertisment
+BUTTON_ARIA_TYPE_POSITIVE=Pozitiv
+BUTTON_ARIA_TYPE_NEGATIVE=Negativ
+BUTTON_ARIA_EMPHASIZED=Evidențiat
+BUTTON_ARIA_DEFAULT=Implicit
+BUTTON_ARIA_TRANSPARENT=Transparent
+BUTTON_ARIA_ATTENTION=Atenție
+DATEPICKER_DATE_DESCRIPTION=Intrare de dată
+TOGGLED=Comutat
+FIRST_PAGE=Prima pagină
+LAST_PAGE=Ultima pagină
+PREVIOUS_PAGE=Pagina anterioară
+NEXT_PAGE=Pagina următoare
+CURRENT_PAGE=Pagina curentă
+ACTIVATE_PAGE=Activare număr de pagină
+SUGGESTED_TEXT=căutări sugerate
+ACCESSIBLE_NAME_SEARCH_ICON=Căutare
+TOOLTIP_VOICE_BUTTON=Voce
+TOOLTIP_SUBMIT_BUTTON=Trimitere
+LISTENING=Ascultare
+AVAILABLE_VALUES=Valori disponibile
+RECOMMENDED_TEXT=Pagini recomandate
+EXPAND_ALL=Expandare tot
+COLLAPSE_ALL=Comprimare tot
+MORE=Mai mult
+ATTENTION_BADGE=Ecuson de atenție
+READ_MORE=Citiți mai mult
+READ_LESS=Citește mai puțin
+SHOW_MORE=Arătați mai multe
+SHOW_LESS=Afișare mai puțin
+RATING_INDICATOR_TEXT=Indicator de evaluare
+RATING_INDICATOR_TOOLTIP_TEXT=Evaluare
+RATING_INDICATOR_ARIA_DESCRIPTION=Obligatoriu
+TOTAL=Total
+RATING_COUNT_TITLE=Evaluare
+ARIA_LABEL_LIST_MULTISELECTABLE=Conține articole cu selecție multiplă
+ARIA_LABEL_LIST_SELECTABLE=Conține articole selectabile
+SHOW_RESULTS=Afișare rezultate
+RESET=Resetare
+MESSAGE_STRIP_CLOSE_BUTTON=Buton de închidere a liniei de mesaj
+MESSAGE_STRIP_INFORMATION=Bară de informații
+MESSAGE_STRIP_SUCCESS=Bară pozitivă
+MESSAGE_STRIP_WARNING=Bară de avertizare
+MESSAGE_STRIP_ERROR=Bară negativă
+MESSAGE_STRIP_ACTION=Bară de acțiuni
+REVIEWS=recenzii
+STARS=stele
+SELECT_OPTIONS=Selectare opțiuni
+SELECT_ALL=Selectare toate
+TEXTAREA_CHARACTERS_LEFT={0} caractere rămase
+VALUE_STATE_TYPE_ERROR=Stare câmp Eroare
+VALUE_STATE_TYPE_WARNING=Stare câmp Avertizare
+VALUE_STATE_TYPE_SUCCESS=Stare câmp Succes
+VALUE_STATE_TYPE_STANDARD=Stare câmp Standard
+CAROUSEL_PREVIOUS_ARROW_TEXT=Pagina anterioară
+CAROUSEL_NEXT_ARROW_TEXT=Pagina următoare
+NO_MATCHES_FOUND=Nicio concordanță găsită.
+BREADCRUMBS_ARIA_LABEL=Cale de navigare
+BREADCRUMBS_OVERFLOW_ARIA_LABEL=Mai mult
+STEPINPUT_INC_ICON_TITLE=Mărire cantitate cu
+STEPINPUT_DEC_ICON_TITLE=Micșorare cantitate cu
+TABLE_NO_DATA_FOUND=Nu s-au găsit date
+VALUE_STATE_ERROR=Intrare nevalabilă
+VALUE_STATE_WARNING=Avertizare emisă
+VALUE_STATE_INFORMATION=Intrare informativă
+VALUE_STATE_SUCCESS=Intrare validată cu succes
+READ_ONLY=Numai în citire
+SWITCH_ACCOUNT=Schimbare cont
+BACK=Înapoi
+OTHER_IDENTITIES=Alte identități
+ADD_OR_REMOVE_ACCOUNT=Adăugare sau eliminare cont
+COUNTRY_SELECT=Selectare țară
+CART=Coș
+COUNTRY_SELECTOR=Selector de țară
+PHONE_NUMBER=Număr de telefon
+CONTACT_US=Contactați-ne
+EMAIL=E-mail
+CHAT_WITH_US=Discută cu noi
+QUICK_LINKS=Linkuri rapide
+TRENDING=În tendințe
+ABOUT_SAP=Despre SAP
+SITE_INFORMATION=Informații site
+AVATAR_TEXT=Avatar
+CALENDAR_ICON=Pictogramă de deschidere calendar
+LIST_ITEM_EDIT_ICON=Editare intrare articol de listă
+LIST_ITEM_DELETE_ICON=Ștergere intrare articol de listă
+BACK_BUTTON_LABEL=butonul înapoi
+STATUS_BADGE_TEXT=Ecuson de stare
+STATUS_BADGE_EDIT_TITLE=Dă click pentru a edita profilul
+STATUS_BADGE_INFORMATION_TITLE=Dă click pentru a deschide informațiile de profil
+STATUS_BADGE_WARNING_TITLE=Avertizare, risc potențial cu profilul
+STATUS_BADGE_ERROR_TITLE=Există o eroare cu profilul
+STATUS_BADGE_SUCCESS_TITLE=Profil verificat cu succes
+PROFILE=Profil
+OPENS_IN_A_NEW_WINDOW=se deschide într-o fereastră nouă
+TEXT_FIELD=Câmp de text
+UPLOADING_FILE_STATUS_TEXT=Se încarcă
+TERMINATED_FILE_STATUS_TEXT=Întrerupt
+REMOVE_FILE_TEXT=Eliminare fișier
+UPLOAD_BUTTON_LABEL=Încărcare fișier
+COMPLETE_LIST_OF=Listă completă de
+CALL_US_TODAY=Sună-ne astăzi!
+SEARCH=Căutare
+RESULT_RETURNED=rezultate returnate.
+SOCIAL_MEDIA_BUTTON=Buton de social media
+PROMO_TILE=Mozaicul promoției
+PROMO_TILE_ICON=Pictogramă cu mozaicul promoției
+PLAY_BUTTON_ACCESSIBLE_NAME=Butonul de pornire pentru a începe rotația logourilor de client
+PAUSE_BUTTON_ACCESSIBLE_NAME=Butonul de întrerupere pentru a opri rotația logourilor de client
+LOCATION=Locație
+TOAST_CLOSE_ACCESSIBLE_NAME=Închidere
+DISABLED=Dezactivat
+EXPAND=Expandare
+COLLAPSE=Comprimare

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

@@ -283,7 +283,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\n\n\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 - **navigate** - Triggered when carousel navigates to a new slide\n\n### **Slots:**\n - **default** - Defines the content of the component.",
       "attributes": [
         {
           "name": "accessible-name",
@@ -550,13 +550,13 @@
           "values": []
         },
         {
-          "name": "disabled",
-          "description": "Defines whether the component is in disabled state.\n<br><br>\n<b>Note:</b> A disabled component is completely noninteractive.",
-          "values": []
+          "name": "default_-format_-pattern",
+          "description": "Defines the date format pattern (e.g., \\\"MMM dd, yyyy\\\" or \\\"MM/dd/yyyy\\\").",
+          "values": [{ "name": "\"MMM dd" }, { "name": "yyyy\"" }]
         },
         {
-          "name": "format-pattern",
-          "description": "Defines the date format pattern (e.g., \\\"MMM dd, yyyy\\\" or \\\"MM/dd/yyyy\\\").",
+          "name": "disabled",
+          "description": "Defines whether the component is in disabled state.\n<br><br>\n<b>Note:</b> A disabled component is completely noninteractive.",
           "values": []
         },
         {
@@ -4989,6 +4989,11 @@
           "description": "Defines the name of the input element.",
           "values": []
         },
+        {
+          "name": "placeholder",
+          "description": "Defines the placeholder text of the input field.",
+          "values": []
+        },
         {
           "name": "readonly",
           "description": "Defines whether the component is read-only.\n<br><br>\n<b>Note:</b> A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",

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.44.0",
+  "version": "2.45.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### **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 - **navigate** - Triggered when carousel navigates to a new slide\n\n### **Slots:**\n - **default** - Defines the content of the component.",
           "doc-url": "",
           "attributes": [
             {
@@ -617,7 +617,12 @@
               "description": "Defines the content of the component."
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "navigate",
+              "description": "Triggered when carousel navigates to a new slide"
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -641,7 +646,12 @@
                 "value": { "type": "\"Default\" | \"Numeric\"" }
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "navigate",
+                "description": "Triggered when carousel navigates to a new slide"
+              }
+            ]
           }
         },
         {
@@ -1151,16 +1161,19 @@
               "description": "Receives id (or many ids) of the elements that label the component.",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "default_-format_-pattern",
+              "description": "Defines the date format pattern (e.g., \\\"MMM dd, yyyy\\\" or \\\"MM/dd/yyyy\\\").",
+              "value": {
+                "type": "\"MMM dd, yyyy\"",
+                "default": "\"MMM dd, yyyy\""
+              }
+            },
             {
               "name": "disabled",
               "description": "Defines whether the component is in disabled state.\n<br><br>\n<b>Note:</b> A disabled component is completely noninteractive.",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "format-pattern",
-              "description": "Defines the date format pattern (e.g., \\\"MMM dd, yyyy\\\" or \\\"MM/dd/yyyy\\\").",
-              "value": { "type": "string", "default": "\"MMM dd, yyyy\"" }
-            },
             {
               "name": "label",
               "description": "Defines label text for the input field.",
@@ -1225,16 +1238,16 @@
                 "description": "Receives id (or many ids) of the elements that label the component.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "default_-format_-pattern",
+                "description": "Defines the date format pattern (e.g., \\\"MMM dd, yyyy\\\" or \\\"MM/dd/yyyy\\\").",
+                "value": { "type": "\"MMM dd, yyyy\"" }
+              },
               {
                 "name": "disabled",
                 "description": "Defines whether the component is in disabled state.\n<br><br>\n<b>Note:</b> A disabled component is completely noninteractive.",
                 "value": { "type": "boolean" }
               },
-              {
-                "name": "format-pattern",
-                "description": "Defines the date format pattern (e.g., \\\"MMM dd, yyyy\\\" or \\\"MM/dd/yyyy\\\").",
-                "value": { "type": "string" }
-              },
               {
                 "name": "label",
                 "description": "Defines label text for the input field.",
@@ -10504,6 +10517,11 @@
               "description": "Defines the name of the input element.",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "placeholder",
+              "description": "Defines the placeholder text of the input field.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "readonly",
               "description": "Defines whether the component is read-only.\n<br><br>\n<b>Note:</b> A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
@@ -10631,6 +10649,11 @@
                 "description": "Defines the name of the input element.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "placeholder",
+                "description": "Defines the placeholder text of the input field.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "readonly",
                 "description": "Defines whether the component is read-only.\n<br><br>\n<b>Note:</b> A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",

package/package.json

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

package/src/Carousel.ts

@@ -3,6 +3,7 @@ import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -12,6 +13,7 @@ import {
 import { CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT } 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";
@@ -57,8 +59,17 @@ export enum UDExCarouselButtonDesign {
   styles: CarouselCss,
   template: CarouselTemplate,
 })
+/**
+ * Triggered when carousel navigates to a new slide
+ * @public
+ * @param { CustomEvent }
+ */
+@event("navigate")
 
 class UDExCarousel extends UI5Element {
+  eventDetails!: {
+    "navigate": CarouselNavigateEventDetail,
+  };
   /**
    * Defines the position of the navigation.
    * <br><br>
@@ -206,8 +217,10 @@ class UDExCarousel extends UI5Element {
     }
   }
 
-  _handleNavigate(): void {
+  _handleNavigate(e: UI5CustomEvent<UI5Carousel, "navigate">): void {
     this._calculateDisabledButtonsState();
+
+    this.fireDecoratorEvent("navigate", e.detail);
   }
 
   onAfterRendering() {

package/src/DatePicker.ts

@@ -8,19 +8,25 @@ import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import { CALENDAR_ICON, DATEPICKER_DATE_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
 import type UDExTextField from "./TextField.js";
 import type UDExDropdown from "./Dropdown.js";
 import UDExValueState from "./types/common.js";
 import translate from "./utils/translate.js";
-
-// Template
 import DatePickerTemplate from "./DatePickerTemplate.js";
-
-// Styles
 import DatePickerCss from "./generated/themes/DatePicker.css.js";
 import DatePickerPopoverCss from "./generated/themes/DatePickerPopover.css.js";
 
+// DateFormat's published type declaration omits the runtime parse/format methods
+// and the oFormatOptions property (they come from the underlying SAP core type).
+// This intersection adds the missing members without widening to `any`.
+type DateFormatFull = DateFormat & {
+  parse(value: string, utc?: boolean): Date | null;
+  format(date: Date, utc?: boolean): string;
+  oFormatOptions: { pattern?: string };
+};
+
 export enum UDExDatePickerSelectionMode {
   Single = "Single",
   Range = "Range",
@@ -197,8 +203,10 @@ class UDExDatePicker extends DateComponentBase {
    * @default "MMM dd, yyyy"
    * @public
    */
+  static readonly DEFAULT_FORMAT_PATTERN = "MMM dd, yyyy";
+
   @property({ type: String })
-    formatPattern: string = "MMM dd, yyyy";
+    formatPattern: string = UDExDatePicker.DEFAULT_FORMAT_PATTERN;
 
   /**
    * The first date in the range during selection (this is a temporary value, not the first date in the value range)
@@ -212,6 +220,8 @@ class UDExDatePicker extends DateComponentBase {
 
   responsivePopover?: UDExDropdown;
 
+  private _getCurrentFormat(): DateFormatFull { return this.getFormat() as DateFormatFull; }
+
   private _prevDelimiter!: string | null;
 
   _getResponsePopover(): UDExDropdown {
@@ -297,7 +307,7 @@ class UDExDatePicker extends DateComponentBase {
     const partsArray = value.split(this._prevDelimiter || this._effectiveDelimiter);
 
     // if format successfully parse the value, the value contains only single date
-    if (this.getFormat().parse(value)) {
+    if (this._getCurrentFormat().parse(value)) {
       valuesArray[0] = partsArray.join(this._effectiveDelimiter);
       valuesArray[1] = "";
 
@@ -321,7 +331,7 @@ class UDExDatePicker extends DateComponentBase {
 
     const dateStrings = this._splitValueByDelimiter(value);
     if (dateStrings[1]) {
-      const parsedDate = this.getFormat().parse(dateStrings[1], true) as Date;
+      const parsedDate = this._getCurrentFormat().parse(dateStrings[1], true) as Date;
       return parsedDate.getTime() / 1000;
     }
 
@@ -339,7 +349,7 @@ class UDExDatePicker extends DateComponentBase {
 
     const dateStrings = this._splitValueByDelimiter(value); // at least one item guaranteed due to the checks above (non-empty and valid)
 
-    const parsedDate = this.getFormat().parse(dateStrings[0], true) as Date;
+    const parsedDate = this._getCurrentFormat().parse(dateStrings[0], true) as Date;
     return parsedDate.getTime() / 1000;
   }
 
@@ -353,7 +363,7 @@ class UDExDatePicker extends DateComponentBase {
       return true;
     }
 
-    return !!this.getFormat().parse(value);
+    return !!this._getCurrentFormat().parse(value);
   }
 
   isValidRange(value: string): boolean {
@@ -428,7 +438,7 @@ class UDExDatePicker extends DateComponentBase {
       if (value === "") {
         return value;
       }
-      result = this.getFormat().format(this.getFormat().parse(value, true), true); // it is important to both parse and format the date as UTC
+      result = this._getCurrentFormat().format(this._getCurrentFormat().parse(value, true) as Date, true); // it is important to both parse and format the date as UTC
     }
     if (this.selectionMode === UDExDatePickerSelectionMode.Range) {
       const firstDateTimestamp = this._extractFirstTimestamp(value);
@@ -501,7 +511,7 @@ class UDExDatePicker extends DateComponentBase {
   }
 
   _onInputChange(e: Event) {
-    this._updateValueAndFireDecoratorEvents((e.target as UDExDatePicker).value, true);
+    this._updateValueAndFireDecoratorEvents((e.target as UDExTextField).value, true);
   }
 
   handleInputClick(e: CustomEvent<void>): void {
@@ -554,6 +564,14 @@ class UDExDatePicker extends DateComponentBase {
   get isRangeMode(): boolean {
     return this.selectionMode === UDExDatePickerSelectionMode.Range;
   }
+
+  get _calendarTimestamp(): number | undefined {
+    return this._extractFirstTimestamp(this.value);
+  }
+
+  get _effectivePlaceholder(): string {
+    return this.formatPattern || UDExDatePicker.DEFAULT_FORMAT_PATTERN;
+  }
 }
 
 UDExDatePicker.define();

package/src/DatePickerPopoverTemplate.tsx

@@ -21,7 +21,8 @@ export default function DatePickerPopoverTemplate(this: DatePicker) {
         selection-mode={this.selectionMode}
         min-date={this.minDate}
         max-date={this.maxDate}
-        format-pattern={this.formatPattern}>
+        format-pattern={this.formatPattern}
+        {...(this._calendarTimestamp ? { timestamp: this._calendarTimestamp } : {})}>
         { this.isRangeMode ?
           <CalendarDateRange start-value={this.startValue} end-value={this.endValue}></CalendarDateRange>
           :

package/src/DatePickerTemplate.tsx

@@ -10,6 +10,7 @@ export default function DatePickerTemplate(this: DatePicker) {
         _aria-has-popup="grid"
         icon="appointment-2"
         value={this.value}
+        placeholder={this._effectivePlaceholder}
         label={this.label}
         accessible-name={this.dateAccessibleName}
         accessible-name-ref={this.accessibleNameRef}

package/src/MastheadItem.ts

@@ -1,5 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot, ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
@@ -15,16 +15,17 @@ import {
   OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT, SEARCH,
 } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
-import type UDExAvatar from "./Avatar.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/world.js";
+import type UDExAvatar from "./Avatar.js";
 import type UDExMastheadShell from "./MastheadShell.js";
+import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
+import type UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
 import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
 import { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
-import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
 import translate from "./utils/translate.js";
 
 // Styles
@@ -363,6 +364,12 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     this.handleOutsideClick();
   }
 
+  onInvalidation({ name, newValue }: ChangeInfo): void {
+    if (name === "selected" && !newValue && this.isMobile) {
+      this.dropdownScrollToTop();
+    }
+  }
+
   handleOutsideClick(): void {
     document.addEventListener("click", (e: Event) => {
       const target = e.target as HTMLElement;
@@ -496,6 +503,16 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     });
   }
 
+  dropdownScrollToTop(): void {
+    if (this.isMobileMenuOpenBtn) {
+      const menu = this.getSlottedNodes<UDExMastheadMobileMenu>("dropdown")[0];
+      menu.mobileMenuScrollToTop();
+    } else {
+      const dropdown = this.getDomElement(".udex-masthead-item__dropdown-holder");
+      dropdown?.scrollTo({ top: 0 });
+    }
+  }
+
   setDropdownInsetStart(): void {
     const dropdown = this.dropdownHolder;
     if (dropdown) {
@@ -648,6 +665,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.hasDropdownSlot && this.selected;
   }
 
+  get isMobileMenuOpenBtn(): boolean {
+    return this.hasAttribute("_is-menu-open-btn");
+  }
+
   get hasDropdownSlot(): boolean {
     return !!this.getSlottedNodes("dropdown").length;
   }