@sapudex/web-components 2.36.0 → 2.38.0

package/dist/messagebundle_cs.properties

@@ -3,3 +3,129 @@ OVERVIEW=Přehled
 LOGOUT=Odhlásit se
 MAIN_LINKS=Hlavní odkazy
 BACK_TO_TOP=Zpět na začátek
+COUNT=Počet
+OF=z
+PAGINATION_PAGE=Stránka
+SELECTED=Vybrané
+UNSELECTED=Nevybráno
+INDETERMINATE=Nejednoznačné
+EDIT_BUTTON=Upravit
+DELETE_BUTTON=Odstranit
+BACK_TO_REGION_LIST=Zpět do seznamu regionů
+BUTTON_ARIA_TYPE_PRIMARY=Primární
+BUTTON_ARIA_TYPE_SECONDARY=Sekundární
+BUTTON_ARIA_TYPE_TERTIARY=Terciální
+BUTTON_ARIA_TYPE_WARNING=Varování
+BUTTON_ARIA_TYPE_POSITIVE=Pozitivní
+BUTTON_ARIA_TYPE_NEGATIVE=Negativní
+BUTTON_ARIA_EMPHASIZED=Zvýrazněné
+BUTTON_ARIA_DEFAULT=Standardní
+BUTTON_ARIA_TRANSPARENT=Transparentní
+BUTTON_ARIA_ATTENTION=Pozor
+DATEPICKER_DATE_DESCRIPTION=Zadání datumu
+TOGGLED=Přepnuto
+FIRST_PAGE=První stránka
+LAST_PAGE=Poslední stránka
+PREVIOUS_PAGE=Předchozí stránka
+NEXT_PAGE=Další stránka
+CURRENT_PAGE=Aktuální stránka
+ACTIVATE_PAGE=Aktivovat číslo stránky
+SUGGESTED_TEXT=navrhovaná hledání
+ACCESSIBLE_NAME_SEARCH_ICON=Hledat
+TOOLTIP_VOICE_BUTTON=Hlas
+TOOLTIP_SUBMIT_BUTTON=Odeslat
+LISTENING=Poslech
+AVAILABLE_VALUES=Dostupné hodnoty
+RECOMMENDED_TEXT=Doporučené stránky
+EXPAND_ALL=Rozbalit vše
+COLLAPSE_ALL=Sbalit vše
+MORE=Více
+ATTENTION_BADGE=Upozorňovací odznak
+READ_MORE=Číst více
+READ_LESS=Číst méně
+SHOW_MORE=Více
+SHOW_LESS=Zobrazit méně
+RATING_INDICATOR_TEXT=Indikátor hodnocení
+RATING_INDICATOR_TOOLTIP_TEXT=Hodnocení
+RATING_INDICATOR_ARIA_DESCRIPTION=Požadováno
+TOTAL=Celkem
+RATING_COUNT_TITLE=Hodnocení
+ARIA_LABEL_LIST_MULTISELECTABLE=Obsahuje položky s možností vícenásobného výběru
+ARIA_LABEL_LIST_SELECTABLE=Obsahuje položky s možností výběru
+SHOW_RESULTS=Zobrazit výsledky
+SHOW_HIDE_PASSWORD=Zobrazit/skrýt tlačítko hesla
+MESSAGE_STRIP_CLOSE_BUTTON=Tlačítko Zavřít na liště se zprávami
+MESSAGE_STRIP_INFORMATION=Informační lišta
+MESSAGE_STRIP_SUCCESS=Lišta pro pozitivní
+MESSAGE_STRIP_WARNING=Lišta pro upozornění
+MESSAGE_STRIP_ERROR=Lišta pro negativní
+MESSAGE_STRIP_ACTION=Lišta akcí
+REVIEWS=hodnocení
+STARS=hvězdičky
+SELECT_OPTIONS=Vybrat volby
+SELECT_ALL=Vybrat vše
+TEXTAREA_CHARACTERS_LEFT={0} zbývajících znaků
+VALUE_STATE_TYPE_ERROR=Chyba statusu pole
+VALUE_STATE_TYPE_WARNING=Status pole – upozornění
+VALUE_STATE_TYPE_SUCCESS=Status pole – úspěch
+VALUE_STATE_TYPE_STANDARD=Status pole – standardní
+CAROUSEL_PREVIOUS_ARROW_TEXT=Předchozí stránka
+CAROUSEL_NEXT_ARROW_TEXT=Další stránka
+NO_MATCHES_FOUND=Nebyly nalezeny žádné shody.
+BREADCRUMBS_ARIA_LABEL=Navigační cesta
+BREADCRUMBS_OVERFLOW_ARIA_LABEL=Další
+STEPINPUT_INC_ICON_TITLE=Zvýšit množství o
+STEPINPUT_DEC_ICON_TITLE=Snížit množství o
+TABLE_NO_DATA_FOUND=Nebyla nalezena žádá data
+VALUE_STATE_ERROR=Neplatné zadání
+VALUE_STATE_WARNING=Zobrazeno upozornění
+VALUE_STATE_INFORMATION=Informativní záznam
+VALUE_STATE_SUCCESS=Záznam úspěšně ověřen
+READ_ONLY=Pouze pro čtení
+SWITCH_ACCOUNT=Přepnout účet
+BACK=Zpět
+OTHER_IDENTITIES=Ostatní identity
+ADD_OR_REMOVE_ACCOUNT=Přidat nebo odebrat účet
+COUNTRY_SELECT=Vyberte stát
+CART=Nákupní košík
+COUNTRY_SELECTOR=Výběr státu
+SUPPORT=Podpora
+PHONE_NUMBER=Telefon
+CONTACT_US=Kontaktujte nás
+CHAT_WITH_US=Napište nám
+QUICK_LINKS=Rychlé odkazy
+TRENDING=Trendy
+ABOUT_SAP=O společnosti SAP
+SITE_INFORMATION=Informace o stránkách
+AVATAR_TEXT=Avatar
+CALENDAR_ICON=Otevřít ikonu kalendáře
+LIST_ITEM_EDIT_ICON=Upravit položku seznamu
+LIST_ITEM_DELETE_ICON=Odstranit položku seznamu
+BACK_BUTTON_LABEL=tlačítko zpět
+STATUS_BADGE_TEXT=Znak statusu
+STATUS_BADGE_EDIT_TITLE=Klikněte pro editaci profilu
+STATUS_BADGE_INFORMATION_TITLE=Klikněte pro otevření profilových informací
+STATUS_BADGE_WARNING_TITLE=Upozornění: možné riziko spojené s profilem
+STATUS_BADGE_ERROR_TITLE=Existuje chyba týkající se profilu
+STATUS_BADGE_SUCCESS_TITLE=Úspěšně ověřený profil
+PROFILE=Profil
+OPENS_IN_A_NEW_WINDOW=otevře se v novém okně
+TEXT_FIELD=Textové pole
+UPLOADING_FILE_STATUS_TEXT=Nahrávání
+TERMINATED_FILE_STATUS_TEXT=Ukončeno
+REMOVE_FILE_TEXT=Odstranit soubor
+UPLOAD_BUTTON_LABEL=Nahrát soubor
+COMPLETE_LIST_OF=Dokončete seznam
+CALL_US_TODAY=Zavolejte nám ještě dnes!
+SEARCH=Hledat
+RESULT_RETURNED=výsledků vráceno.
+SOCIAL_MEDIA_BUTTON=Tlačítko sociálních sítí
+PROMO_TILE=Propagační dlaždice
+PROMO_TILE_ICON=Propagační dlaždice – ikona
+PLAY_BUTTON_ACCESSIBLE_NAME=Tlačítko ke spuštění otáčení log zákazníků
+PAUSE_BUTTON_ACCESSIBLE_NAME=Tlačítko k zastavení otáčení log zákazníků
+LOCATION=Místo
+TOAST_CLOSE_ACCESSIBLE_NAME=Zavřít
+DISABLED=Deaktivováno
+EXPAND=Rozbalit
+COLLAPSE=Sbalit

package/dist/messagebundle_en.properties

@@ -122,7 +122,6 @@ REMOVE_FILE_TEXT=Remove file
 UPLOAD_BUTTON_LABEL=Upload file
 COMPLETE_LIST_OF=Complete list of
 CALL_US_TODAY=Call us today!
-CONTACT_US=Contact us
 SEARCH=Search
 RESULT_RETURNED=results returned.
 SOCIAL_MEDIA_BUTTON=Social Media Button
@@ -133,3 +132,6 @@ PLAY_BUTTON_ACCESSIBLE_NAME=Start button to begin customer logos rotation
 PAUSE_BUTTON_ACCESSIBLE_NAME=Pause button to stop customer logos rotation
 LOCATION=Location
 TOAST_CLOSE_ACCESSIBLE_NAME=Close
+DISABLED=Disabled
+EXPAND=Expand
+COLLAPSE=Collapse

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

@@ -2779,7 +2779,7 @@
     },
     {
       "name": "udex-password-field",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-password-field</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExPasswordField.js\";</code>\n\n\n---\n\n\n",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-password-field</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExPasswordField.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **input** - Fired when the value of the component changes at each keystroke.\n- **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **blur** - Fired on input focusout.\n- **click-icon** - Fired when the show/hide password button is clicked.",
       "attributes": [
         {
           "name": "autocomplete",
@@ -4195,6 +4195,11 @@
           "description": "Defines the icon in the tab.",
           "values": []
         },
+        {
+          "name": "disabled",
+          "description": "Defines if the tab is disabled. A disabled tab is not clickable or focusable,\nbut remains reachable by screen readers via aria-disabled.",
+          "values": []
+        },
         {
           "name": "href",
           "description": "Defines the href of the tab.",

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.36.0",
+  "version": "2.38.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -6035,7 +6035,7 @@
         },
         {
           "name": "udex-password-field",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-password-field</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExPasswordField.js\";</code>\n---\n",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-password-field</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExPasswordField.js\";</code>\n---\n\n\n### **Events:**\n - **input** - Fired when the value of the component changes at each keystroke.\n- **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **blur** - Fired on input focusout.\n- **click-icon** - Fired when the show/hide password button is clicked.",
           "doc-url": "",
           "attributes": [
             {
@@ -6109,7 +6109,21 @@
               "value": { "type": "string", "default": "\"\"" }
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "input",
+              "description": "Fired when the value of the component changes at each keystroke."
+            },
+            {
+              "name": "change",
+              "description": "Fired when the input operation has finished by pressing Enter or on focusout."
+            },
+            { "name": "blur", "description": "Fired on input focusout." },
+            {
+              "name": "click-icon",
+              "description": "Fired when the show/hide password button is clicked."
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -6183,7 +6197,21 @@
                 "value": { "type": "string" }
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "input",
+                "description": "Fired when the value of the component changes at each keystroke."
+              },
+              {
+                "name": "change",
+                "description": "Fired when the input operation has finished by pressing Enter or on focusout."
+              },
+              { "name": "blur", "description": "Fired on input focusout." },
+              {
+                "name": "click-icon",
+                "description": "Fired when the show/hide password button is clicked."
+              }
+            ]
           }
         },
         {
@@ -8856,6 +8884,11 @@
               "description": "Defines the icon in the tab.",
               "value": { "type": "string" }
             },
+            {
+              "name": "disabled",
+              "description": "Defines if the tab is disabled. A disabled tab is not clickable or focusable,\nbut remains reachable by screen readers via aria-disabled.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "href",
               "description": "Defines the href of the tab.",
@@ -8922,6 +8955,11 @@
                 "description": "Defines the icon in the tab.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "disabled",
+                "description": "Defines if the tab is disabled. A disabled tab is not clickable or focusable,\nbut remains reachable by screen readers via aria-disabled.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "href",
                 "description": "Defines the href of the tab.",

package/package.json

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

package/src/CountrySelector.ts

@@ -1,5 +1,5 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import UI5Button from "@ui5/webcomponents/dist/Button.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
@@ -15,7 +15,9 @@ import UDExSelectBase from "./SelectBase.js";
 import UDExListItem from "./ListItem.js";
 import UDExTextField from "./TextField.js";
 import UDExStatusMessage from "./StatusMessage.js";
-import SelectBoxTemplate from "./generated/templates/SelectBoxTemplate.lit.js";
+import SelectBoxTemplate from "./SelectBoxTemplate.js";
+import CountrySelectorTemplate from "./CountrySelectorTemplate.js";
+import SearchableListBaseTemplate from "./SearchableListBaseTemplate.js";
 
 // Styles
 import CountrySelectorCss from "./generated/themes/CountrySelector.css.js";
@@ -48,7 +50,7 @@ type UDExCountrySelectorChangeSearchEventDetail = {
  */
 @customElement({
   tag: "udex-country-selector",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [
     TextFieldCss,
     SelectBaseCss,
@@ -213,6 +215,15 @@ class UDExCountrySelector extends UDExSelectBase {
     return localName ? `${countryName} (${localName})` : countryName || null;
   }
 
+  override get countryFlag(): object {
+    return CountrySelectorTemplate.call(this) as object;
+  }
+
+  override get searchableList() {
+    this.defaultAccessibleRole = this._listBoxRole;
+    return SearchableListBaseTemplate.call(this);
+  }
+
   get selectedCountryName(): string | null {
     return this._selectedCountry ? this.getCountryLabel(this._selectedCountry.countryName, this._selectedCountry.localName) : "";
   }

package/src/CountrySelectorTemplate.tsx

@@ -0,0 +1,12 @@
+import type UDExCountrySelector from "./CountrySelector.js";
+
+export default function CountrySelectorTemplate(this: UDExCountrySelector) {
+  if (this.hideFlagImages) { return <></>; }
+  return (
+    <img
+      class="udex-text-field__image"
+      aria-label={this.flagAriaLabel}
+      style={`background-position-x: ${this.selectedCountryFlagX}; background-position-y: ${this.selectedCountryFlagY}`}>
+    </img>
+  );
+}

package/src/FilterMenu.ts

@@ -1,8 +1,7 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
   isTabPrevious, isTabNext, isEscape, isSpace, isEnter,
@@ -32,8 +31,8 @@ import UDExBadge from "./Badge.js";
 import type UDExListItemBase from "./ListItemBase.js";
 import { RESET, SHOW_RESULTS, SELECT_OPTIONS } from "./generated/i18n/i18n-defaults.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
-import FilterMenuTemplate from "./generated/templates/FilterMenuTemplate.lit.js";
-import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
+import FilterMenuTemplate from "./FilterMenuTemplate.js";
+import SearchableListBaseTemplate from "./SearchableListBaseTemplate.js";
 import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import translate from "./utils/translate.js";
 
@@ -78,7 +77,7 @@ type UDExFilterMenuResetClickEventDetail = {
  */
 @customElement({
   tag: "udex-filter-menu",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [FilterMenuCss, SearchableListCss, getEffectiveScrollbarStyle()],
   template: FilterMenuTemplate,
   dependencies: [
@@ -574,7 +573,11 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   get searchableList() {
-    return executeTemplate(UDExFilterMenu.searchableListBaseTemplate, this);
+    return SearchableListBaseTemplate.call(this);
+  }
+
+  static get searchableListBaseTemplate() {
+    return SearchableListBaseTemplate;
   }
 
   get hideActionBar(): boolean {
@@ -600,10 +603,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
   getItems(): Array<UDExListItemBase> {
     return this.getSlottedNodes<UDExListItemBase>("items");
   }
-
-  static get searchableListBaseTemplate() {
-    return SearchableListBaseTemplate;
-  }
 }
 
 UDExFilterMenu.define();

package/src/FilterMenuTemplate.tsx

@@ -0,0 +1,104 @@
+import type UDExFilterMenu from "./FilterMenu.js";
+import UDExBadge from "./Badge.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import UI5Popover from "@ui5/webcomponents/dist/Popover.js";
+import UDExButton from "./Button.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import SearchableListBaseTemplate from "./SearchableListBaseTemplate.js";
+import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
+import { UDExTextBadgeDesign, UDExTypeBadgeDesign } from "./types/BadgeDesign.js";
+
+export default function FilterMenuTemplate(this: UDExFilterMenu) {
+  return (
+    <div>
+      <button
+        id="filterMenuTrigger"
+        onClick={this.handleTriggerClick}
+        onKeyDown={this.handleTriggerKeydown}
+        aria-label={this.triggerButtonAccessibleName}
+        aria-labelledby={this.accessibleNameRef}
+        aria-expanded={this._open}
+        aria-haspopup="true"
+        role={this.triggerAccessibleRole as AriaRole}
+        aria-controls={`${this._id}_udex-filter-menu-dropdown`}
+        disabled={this.disabled}
+        class="udex-filter-menu__trigger"
+        tabindex={0}>
+        {this.hasFilterNamePrefix && (
+          <span class="udex-filter-menu__trigger-prefix">{this.filterNamePrefix}</span>
+        )}
+        <span class="udex-filter-menu__trigger-wrap" {...(this.disabled ? { disabled: "" } : {})}>
+          <span class="udex-filter-menu__trigger-name">{this.filterName}</span>
+          {!!this.badgeValue && (
+            <UDExBadge
+              class="udex-filter-menu__badge"
+              type={UDExTypeBadgeDesign.Number}
+              design={UDExTextBadgeDesign.Information}
+              size="Small">
+              {this.badgeValue}
+            </UDExBadge>
+          )}
+          <UI5Icon
+            class="udex-filter-menu__trigger-icon"
+            name="navigation-down-arrow"
+            mode="Decorative"
+            accessible-name={this._iconAccessibleNameText}>
+          </UI5Icon>
+        </span>
+      </button>
+      <UI5Popover
+        id={`${this._id}_udex-filter-menu-dropdown`}
+        hide-arrow
+        allow-target-overlap={this.disableAllowTargetOverlap}
+        accessible-role={this.accessibleRole}
+        placement={this.placement}
+        horizontal-align={this.horizontalAlign}
+        onKeyDown={this.handleKeyDownList}
+        onBeforeOpen={this._dropdownBeforeOpen}
+        onOpen={this._dropdownAfterOpen}
+        onBeforeClose={this._dropdownBeforeClose}
+        onClose={this._dropdownAfterClose}
+        {...({
+          onItemPress: this.handleItemPress,
+          onHeaderPress: this.handleHeaderPress,
+          onSelectAll: this.handleSelectAll,
+          onSearchKeydown: this.handleKeyDownSearch,
+          onSubmitSearchValue: this.handleSubmitSearch,
+          onHandleValueSearch: this.handleValueSearch,
+          onHandleValueReset: this.handleResetSearch,
+        } as any)}>
+        {SearchableListBaseTemplate.call(this)}
+        {this.modeMultiSelect && renderButtons.call(this)}
+      </UI5Popover>
+    </div>
+  );
+}
+
+function renderButtons(this: UDExFilterMenu) {
+  if (this.hideActionBar) { return null; }
+  return (
+    <div class="udex-filter-menu__footer" slot="footer" {...({ name: "footer" } as any)}>
+      {!this.hideResultBtn && (
+        <UDExButton
+          class="udex-filter-menu__result-btn"
+          size={UDExButtonSize.Medium}
+          design={UDExButtonDesign.Primary}
+          onKeyDown={this.handleKeyDownResultBtn}
+          onClick={this.handleResult}>
+          {this.getResultLabelText}
+        </UDExButton>
+      )}
+      {!this.hideResetBtn && (
+        <UDExButton
+          class="udex-filter-menu__reset-btn"
+          size={UDExButtonSize.Medium}
+          design={UDExButtonDesign.Tertiary}
+          onKeyDown={this.handleKeyDownResetBtn}
+          onClick={this.handleReset}>
+          {this.getResetLabelText}
+        </UDExButton>
+      )}
+    </div>
+  );
+}

package/src/List.hbs

@@ -25,7 +25,7 @@
         id="udex-list"
         class="udex-list"
         role="{{accessibleRole}}"
-        aria-labelledby="{{ariaLabelledBy}}"
+        aria-label="{{singleContentAriaLabel}}"
         aria-busy="{{ariaBusy}}">
         <slot></slot>
     </div>

package/src/List.ts

@@ -540,6 +540,11 @@ class UDExList extends UI5Element {
     return `${this._id}-mode-label`;
   }
 
+  get singleContentAriaLabel(): string | undefined {
+    const label = this.accessibleName || this.headerText;
+    return label || undefined;
+  }
+
   get modeRadioGroup(): boolean {
     return this.mode === UDExListMode.RadioGroup;
   }

package/src/Pagination.ts

@@ -496,6 +496,7 @@ class UDExPagination extends UI5Element {
 
   onAfterRendering() {
     if (this._pageFocusedManually) {
+      this._pageFocusedManually = false;
       this.focusActivePage();
     }
 

package/src/PasswordField.ts

@@ -2,6 +2,7 @@ import UI5Element 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 jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UDExTextField from "./TextField.js";
@@ -23,6 +24,14 @@ export enum UDExPasswordFieldAutoComplete {
   Off = "off",
 }
 
+type UDExPasswordFieldChangeEventDetail = {
+  originalEvent: Event,
+}
+
+type UDExPasswordFieldBlurEventDetail = {
+  originalEvent: FocusEvent,
+}
+
 /**
  * @class
  *
@@ -48,7 +57,38 @@ export enum UDExPasswordFieldAutoComplete {
   dependencies: [UDExTextField],
 })
 
+/**
+ * Fired when the value of the component changes at each keystroke.
+ *
+ * @public
+ */
+@event("input", { bubbles: true })
+/**
+ * Fired when the input operation has finished by pressing Enter or on focusout.
+ *
+ * @public
+ */
+@event("change", { bubbles: true })
+/**
+ * Fired on input focusout.
+ *
+ * @public
+ */
+@event("blur", { bubbles: true })
+/**
+ * Fired when the show/hide password button is clicked.
+ *
+ * @public
+ */
+@event("click-icon", { bubbles: true })
+
 class UDExPasswordField extends UI5Element {
+  eventDetails!: {
+    "input": void,
+    "change": UDExPasswordFieldChangeEventDetail,
+    "blur": UDExPasswordFieldBlurEventDetail,
+    "click-icon": void,
+  };
   /**
    * Defines supporting text under the input field.
    *
@@ -211,8 +251,22 @@ class UDExPasswordField extends UI5Element {
 
     this.icon = isPassword ? UDExIconType.Hide : UDExIconType.Show;
     this.type = isPassword ? UDExInputType.Text : UDExInputType.Password;
+    this.fireDecoratorEvent("click-icon");
   }
 
+  handleInput = (e: CustomEvent): void => {
+    this.value = (e.target as UDExTextField).value;
+    this.fireDecoratorEvent("input");
+  };
+
+  handleChange = (e: CustomEvent<UDExPasswordFieldChangeEventDetail>): void => {
+    this.fireDecoratorEvent("change", { originalEvent: e.detail.originalEvent });
+  };
+
+  handleBlur = (e: CustomEvent<UDExPasswordFieldBlurEventDetail>): void => {
+    this.fireDecoratorEvent("blur", { originalEvent: e.detail.originalEvent });
+  };
+
   get passwordLabel(): string {
     return `${this.label} ${this.showAsterisk ? "*" : ""}`;
   }
@@ -229,3 +283,4 @@ class UDExPasswordField extends UI5Element {
 UDExPasswordField.define();
 
 export default UDExPasswordField;
+export type { UDExPasswordFieldChangeEventDetail, UDExPasswordFieldBlurEventDetail };

package/src/PasswordFieldTemplate.tsx

@@ -21,6 +21,9 @@ export default function PasswordFieldTemplate(this: UDExPasswordField) {
         accessible-name-ref={this.accessibleNameRef}
         accessible-icon-name={this.showButtonTooltip}
         show-button-tooltip={this.showButtonTooltip}
+        onui5-input={this.handleInput}
+        onui5-change={this.handleChange}
+        onui5-blur={this.handleBlur}
         onui5-click-icon={this.handleShowPassword}
         icon={this.iconButton}>
       </UDExTextField>

package/src/Search.ts

@@ -1005,6 +1005,7 @@ class UDExSearch extends UI5Element {
     e.stopPropagation();
     this.handleEnterKey(e);
     this.handleTabKey(e);
+    this.handleShiftTabKey(e);
     this.handleEscapeKey(e);
     this.fireDecoratorEvent("search-keydown", { e });
   };
@@ -1026,6 +1027,12 @@ class UDExSearch extends UI5Element {
     }
   }
 
+  handleShiftTabKey(e: KeyboardEvent) {
+    if (isTabPrevious(e) && this.open) {
+      this.Suggestion?.onShiftTab(e);
+    }
+  }
+
   handleEscapeKey(e: KeyboardEvent) {
     if (isEscape(e)) {
       if (this.open) {