@sapudex/web-components 2.40.0 → 2.42.0

package/dist/custom-elements.json

@@ -3396,16 +3396,6 @@
               "default": "undefined",
               "privacy": "public"
             },
-            {
-              "kind": "field",
-              "name": "tabNavigationEnabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Enables tab navigation for the list.",
-              "default": "\"\"",
-              "privacy": "public"
-            },
             {
               "kind": "field",
               "name": "valueState",
@@ -3549,15 +3539,6 @@
               "type": {
                 "text": "boolean"
               }
-            },
-            {
-              "description": "Enables tab navigation for the list.",
-              "name": "tab-navigation-enabled",
-              "default": "\"\"",
-              "fieldName": "tabNavigationEnabled",
-              "type": {
-                "text": "boolean | undefined"
-              }
             }
           ],
           "superclass": {
@@ -5666,16 +5647,6 @@
               "default": "false",
               "privacy": "public"
             },
-            {
-              "kind": "field",
-              "name": "tabNavigationEnabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Enables tab navigation for the list.",
-              "default": "\"\"",
-              "privacy": "public"
-            },
             {
               "kind": "field",
               "name": "triggerAccessibleRole",
@@ -6004,15 +5975,6 @@
                 "text": "boolean"
               }
             },
-            {
-              "description": "Enables tab navigation for the list.",
-              "name": "tab-navigation-enabled",
-              "default": "\"\"",
-              "fieldName": "tabNavigationEnabled",
-              "type": {
-                "text": "boolean | undefined"
-              }
-            },
             {
               "description": "Allows setting a custom role for dropdown trigger.",
               "name": "trigger-accessible-role",
@@ -9632,16 +9594,6 @@
               "default": "\"SingleSelect\"",
               "privacy": "public"
             },
-            {
-              "kind": "field",
-              "name": "tabNavigationEnabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Enables tab navigation for the list.",
-              "default": "\"\"",
-              "privacy": "public"
-            },
             {
               "kind": "field",
               "name": "type",
@@ -9738,15 +9690,6 @@
                 "text": "\"SingleSelect\" | \"MultiSelect\" | \"SingleContent\" | \"RadioGroup\""
               }
             },
-            {
-              "description": "Enables tab navigation for the list.",
-              "name": "tab-navigation-enabled",
-              "default": "\"\"",
-              "fieldName": "tabNavigationEnabled",
-              "type": {
-                "text": "boolean | undefined"
-              }
-            },
             {
               "description": "Defines the type of the item.",
               "name": "type",
@@ -12030,6 +11973,16 @@
               "default": "\"\"",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "hideSearch",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Hides the search field in the country list view.",
+              "default": "false",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "languageVoice",
@@ -12153,6 +12106,15 @@
                 "text": "string"
               }
             },
+            {
+              "description": "Hides the search field in the country list view.",
+              "name": "hide-search",
+              "default": "false",
+              "fieldName": "hideSearch",
+              "type": {
+                "text": "boolean"
+              }
+            },
             {
               "description": "Defines the language voice of the search",
               "name": "language-voice",
@@ -14817,6 +14779,36 @@
               "description": "Defines whether the MessageStrip renders close button.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "statusErrorText",
+              "type": {
+                "text": "string"
+              },
+              "description": "Defines custom status text for error type",
+              "default": "\"\"",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "statusInformationText",
+              "type": {
+                "text": "string"
+              },
+              "description": "Defines custom status text for information type",
+              "default": "\"\"",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "statusSuccessText",
+              "type": {
+                "text": "string"
+              },
+              "description": "Defines custom status text for success type",
+              "default": "\"\"",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "statusType",
@@ -14833,6 +14825,16 @@
               "description": "Defines the component Status Type.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "statusWarningText",
+              "type": {
+                "text": "string"
+              },
+              "description": "Defines custom status text for warning type",
+              "default": "\"\"",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "colorScheme",
@@ -14889,6 +14891,33 @@
                 "text": "boolean"
               }
             },
+            {
+              "description": "Defines custom status text for error type",
+              "name": "status-error-text",
+              "default": "\"\"",
+              "fieldName": "statusErrorText",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "description": "Defines custom status text for information type",
+              "name": "status-information-text",
+              "default": "\"\"",
+              "fieldName": "statusInformationText",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "description": "Defines custom status text for success type",
+              "name": "status-success-text",
+              "default": "\"\"",
+              "fieldName": "statusSuccessText",
+              "type": {
+                "text": "string"
+              }
+            },
             {
               "description": "Defines the component Status Type.",
               "name": "status-type",
@@ -14897,6 +14926,15 @@
                 "text": "\"Text\" | \"None\" | \"Icon\""
               }
             },
+            {
+              "description": "Defines custom status text for warning type",
+              "name": "status-warning-text",
+              "default": "\"\"",
+              "fieldName": "statusWarningText",
+              "type": {
+                "text": "string"
+              }
+            },
             {
               "description": "Defines the color scheme of the component.\nThere are 10 predefined schemes.\nTo use one you can set a number from `\"1\"` to `\"10\"`. The `colorScheme` `\"1\"` will be set by default.",
               "name": "color-scheme",
@@ -15588,6 +15626,16 @@
               "default": "false",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "hideButtonTooltip",
+              "type": {
+                "text": "string"
+              },
+              "description": "Defines the tooltip for the hide password button.",
+              "default": "\"\"",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "label",
@@ -15778,6 +15826,15 @@
                 "text": "boolean"
               }
             },
+            {
+              "description": "Defines the tooltip for the hide password button.",
+              "name": "hide-button-tooltip",
+              "default": "\"\"",
+              "fieldName": "hideButtonTooltip",
+              "type": {
+                "text": "string"
+              }
+            },
             {
               "description": "Defines label text for the input field.",
               "name": "label",
@@ -18646,16 +18703,6 @@
               "description": "Defines if the search input is visible.",
               "default": "false",
               "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "tabNavigationEnabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Enables tab navigation for the list.",
-              "default": "\"\"",
-              "privacy": "public"
             }
           ],
           "events": [
@@ -18807,15 +18854,6 @@
               "type": {
                 "text": "boolean"
               }
-            },
-            {
-              "description": "Enables tab navigation for the list.",
-              "name": "tab-navigation-enabled",
-              "default": "\"\"",
-              "fieldName": "tabNavigationEnabled",
-              "type": {
-                "text": "boolean | undefined"
-              }
             }
           ],
           "superclass": {
@@ -20398,16 +20436,6 @@
               "default": "undefined",
               "privacy": "public"
             },
-            {
-              "kind": "field",
-              "name": "tabNavigationEnabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Enables tab navigation for the list.",
-              "default": "\"\"",
-              "privacy": "public"
-            },
             {
               "kind": "field",
               "name": "valueState",
@@ -20529,15 +20557,6 @@
               "type": {
                 "text": "boolean"
               }
-            },
-            {
-              "description": "Enables tab navigation for the list.",
-              "name": "tab-navigation-enabled",
-              "default": "\"\"",
-              "fieldName": "tabNavigationEnabled",
-              "type": {
-                "text": "boolean | undefined"
-              }
             }
           ],
           "events": [
@@ -20836,16 +20855,6 @@
               "default": "undefined",
               "privacy": "public"
             },
-            {
-              "kind": "field",
-              "name": "tabNavigationEnabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Enables tab navigation for the list.",
-              "default": "\"\"",
-              "privacy": "public"
-            },
             {
               "kind": "field",
               "name": "tooltipPlacement",
@@ -21054,15 +21063,6 @@
                 "text": "boolean"
               }
             },
-            {
-              "description": "Enables tab navigation for the list.",
-              "name": "tab-navigation-enabled",
-              "default": "\"\"",
-              "fieldName": "tabNavigationEnabled",
-              "type": {
-                "text": "boolean | undefined"
-              }
-            },
             {
               "description": "Determines on which side of the component the Tooltip is displayed.",
               "name": "tooltip-placement",

package/dist/features/SearchSuggestionsPopover.d.ts

@@ -6,7 +6,7 @@ interface SuggestionComponent extends UI5Element {
     open: boolean;
     value?: string;
     suggestionItems?: string;
-    openSuggestionPopup?: boolean;
+    openSuggestionPopup: boolean;
 }
 type SearchInputSuggestion = {
     handleSelectItem: () => void;
@@ -26,8 +26,6 @@ declare class Suggestion {
     focusabledList?: HTMLDivElement;
     lists?: Array<HTMLDivElement>;
     _focusHandler: UDExListWithFirstLetterFocus;
-    _tabEscapedFromPopover: boolean;
-    _shiftTabEscapedFromPopover: boolean;
     constructor(component: SuggestionComponent);
     _getComponent(): SuggestionComponent;
     _getSuggestionPopover(): Popover | null;
@@ -39,15 +37,14 @@ declare class Suggestion {
     resetFocusState(): void;
     onFocusInput(): void;
     onEnter(e: KeyboardEvent): void;
-    onTab(e: KeyboardEvent): void;
-    getFocusableItems(): Element[];
-    onShiftTab(e: KeyboardEvent): void;
+    getAllFocusableItems(): Element[];
+    private _updateItemSelection;
+    onKeyDown(e: KeyboardEvent): void;
+    onKeyUp(e: KeyboardEvent): void;
+    onTab(): void;
     onEscape(e: KeyboardEvent): void;
     onKeyTabList(e: KeyboardEvent): void;
     onPrevKeyTabList(e: KeyboardEvent): void;
-    onKeyDown(e: KeyboardEvent): true | undefined;
-    onKeyUp(e: KeyboardEvent): true | undefined;
-    handlePrevTabReset(e: KeyboardEvent): void;
     static get dependencies(): (typeof Button | typeof Popover)[];
 }
 export default Suggestion;

package/dist/features/SearchSuggestionsPopover.js

@@ -13,8 +13,6 @@ import UDExFirstLetterFocusHandler from "../utils/ListWithFirstLetterFocus.js";
 class Suggestion {
     constructor(component) {
         this._focusHandler = new UDExFirstLetterFocusHandler();
-        this._tabEscapedFromPopover = false;
-        this._shiftTabEscapedFromPopover = false;
         this.component = component;
         this._getSuggestionPopover();
         this.selectedItemIndex = -1;
@@ -50,18 +48,12 @@ class Suggestion {
         }
     }
     initLists() {
-        const list = this.popover?.querySelectorAll(".udex-search-suggestions__list") ? this.popover?.querySelectorAll(".udex-search-suggestions__list") : [];
-        const newLists = Array.from(list);
-        if (this.focusabledList && this.lists?.length && newLists.length) {
-            const oldIndex = this.lists.indexOf(this.focusabledList);
-            if (oldIndex >= 0 && oldIndex < newLists.length) {
-                this.focusabledList = newLists[oldIndex];
-            }
-        }
-        this.lists = newLists;
+        const list = this.popover?.querySelectorAll(".udex-search-suggestions__list") ?? [];
+        this.lists = Array.from(list);
     }
     close() {
         this._getSuggestionPopover();
+        this.getAllFocusableItems().forEach(item => item.removeAttribute("aria-selected"));
         this._getComponent().open = false;
         this.popover.open = false;
         this.selectedItemIndex = -1;
@@ -80,36 +72,45 @@ class Suggestion {
             this.component.value = this._getItems()[this.selectedItemIndex].getAttribute("title")?.replace(/<[^>]*>?/gm, "");
         }
     }
-    onTab(e) {
-        if (this._tabEscapedFromPopover) {
-            this._tabEscapedFromPopover = false;
-            return;
-        }
-        if (this.lists?.length && this._getComponent().open) {
-            this._shiftTabEscapedFromPopover = false;
-            e.preventDefault();
-            this.focusabledList = this.lists[0];
-            this.selectedItemIndex = -1;
-            this.focusabledList.focus();
+    getAllFocusableItems() {
+        return Array.from(this.popover?.querySelectorAll("[ui5-button]") ?? []);
+    }
+    _updateItemSelection(items, nextIndex) {
+        if (this.selectedItemIndex >= 0 && this.selectedItemIndex < items.length) {
+            items[this.selectedItemIndex].removeAttribute("aria-selected");
         }
+        const button = items[nextIndex];
+        button.setAttribute("aria-selected", "true");
+        button.focus();
+        this.selectedItemIndex = nextIndex;
     }
-    getFocusableItems() {
-        const items = this.focusabledList?.children ? this.focusabledList?.querySelectorAll("[ui5-button]") : [];
-        return Array.from(items);
+    onKeyDown(e) {
+        e.preventDefault();
+        const items = this.getAllFocusableItems();
+        if (!items.length) {
+            return;
+        }
+        const nextIndex = this.selectedItemIndex < 0 || this.selectedItemIndex >= items.length - 1
+            ? 0
+            : this.selectedItemIndex + 1;
+        this._updateItemSelection(items, nextIndex);
     }
-    onShiftTab(e) {
-        if (this._shiftTabEscapedFromPopover) {
-            this._shiftTabEscapedFromPopover = false;
+    onKeyUp(e) {
+        e.preventDefault();
+        const items = this.getAllFocusableItems();
+        if (!items.length) {
             return;
         }
-        const keepOpen = !!this.component.openSuggestionPopup;
-        if (keepOpen && this.lists?.length && this._getComponent().open) {
-            this._tabEscapedFromPopover = false;
-            e.preventDefault();
-            this.focusabledList = this.lists[this.lists.length - 1];
-            this.focusabledList.focus();
-            this.selectedItemIndex = -1;
+        const prevIndex = this.selectedItemIndex <= 0
+            ? items.length - 1
+            : this.selectedItemIndex - 1;
+        this._updateItemSelection(items, prevIndex);
+    }
+    onTab() {
+        if (!this._getComponent().openSuggestionPopup) {
+            this.close();
         }
+        this.resetFocusState();
     }
     onEscape(e) {
         e.preventDefault();
@@ -117,140 +118,23 @@ class Suggestion {
         this.onFocusInput();
     }
     onKeyTabList(e) {
-        const keepOpen = !!this.component.openSuggestionPopup;
-        if (this.lists?.length === 2) {
-            if (this.focusabledList === this.lists[1]) {
-                e.preventDefault();
-                if (keepOpen) {
-                    this.focusabledList = undefined;
-                    this.selectedItemIndex = -1;
-                    this._tabEscapedFromPopover = true;
-                    this.onFocusInput();
-                    return;
-                }
-                this.close();
-                this.onFocusInput();
-                return;
-            }
-            if (this.focusabledList === this.lists[0]) {
-                e.preventDefault();
-                this.focusabledList = this.lists[1];
-                this.focusabledList.focus();
-                this.selectedItemIndex = -1;
-            }
-        }
-        if (this.lists?.length === 1) {
-            e.preventDefault();
-            if (keepOpen) {
-                this.focusabledList = undefined;
-                this.selectedItemIndex = -1;
-                this._tabEscapedFromPopover = true;
-                this.onFocusInput();
-                return;
-            }
-            this.close();
-            this.onFocusInput();
-        }
-    }
-    onPrevKeyTabList(e) {
-        const keepOpen = !!this.component.openSuggestionPopup;
         e.preventDefault();
-        if (this.lists?.length === 2) {
-            if (this.focusabledList === this.lists[0]) {
-                if (keepOpen) {
-                    this.focusabledList = undefined;
-                    this.selectedItemIndex = -1;
-                    this._shiftTabEscapedFromPopover = true;
-                }
-                this.onFocusInput();
-                return;
-            }
-            if (this.focusabledList === this.lists[1]) {
-                this.focusabledList = this.lists[0];
-                this.focusabledList.focus();
-                this.selectedItemIndex = -1;
-            }
+        this.close();
+        this.resetFocusState();
+        const shadow = this._getComponent().shadowRoot;
+        const firstBtn = shadow?.querySelector("#reset-button, #voice-button, #submit-button");
+        if (firstBtn) {
+            firstBtn.focus();
         }
-        if (this.lists?.length === 1) {
-            if (keepOpen) {
-                this.focusabledList = undefined;
-                this.selectedItemIndex = -1;
-                this._shiftTabEscapedFromPopover = true;
-            }
+        else {
             this.onFocusInput();
         }
     }
-    onKeyDown(e) {
-        e.preventDefault();
-        const nextSelectedIdx = this.selectedItemIndex;
-        const focusabledItems = this.getFocusableItems();
-        const itemCount = focusabledItems.length - 1;
-        if (this.lists?.length) {
-            if (nextSelectedIdx === -1) {
-                const button = focusabledItems[0];
-                button.setAttribute("aria-selected", "true");
-                button.focus();
-                this.selectedItemIndex = 0;
-                this.focusabledList?.setAttribute("aria-activedescendant", button.id);
-                return true;
-            }
-            if (nextSelectedIdx >= 0 && nextSelectedIdx !== itemCount) {
-                const button = focusabledItems[nextSelectedIdx + 1];
-                focusabledItems[nextSelectedIdx].removeAttribute("aria-selected");
-                button.setAttribute("aria-selected", "true");
-                button.focus();
-                this.selectedItemIndex = nextSelectedIdx + 1;
-                this.focusabledList?.setAttribute("aria-activedescendant", button.id);
-                return true;
-            }
-            if (nextSelectedIdx === itemCount && this.focusabledList === this.lists[0] && this.lists.length === 2) {
-                focusabledItems[nextSelectedIdx].removeAttribute("aria-selected");
-                this.focusabledList?.removeAttribute("aria-activedescendant");
-                this.focusabledList = this.lists[1];
-                this.focusabledList.focus();
-                this.selectedItemIndex = -1;
-                return true;
-            }
-        }
-    }
-    onKeyUp(e) {
+    onPrevKeyTabList(e) {
         e.preventDefault();
-        const focusabledItems = this.getFocusableItems();
-        const itemCount = focusabledItems.length - 1;
-        const previousSelectedIdx = this.selectedItemIndex;
-        if (this.lists?.length) {
-            if (previousSelectedIdx === -1) {
-                const button = focusabledItems[0];
-                button.setAttribute("aria-selected", "true");
-                button.focus();
-                this.selectedItemIndex = 0;
-                this.focusabledList?.setAttribute("aria-activedescendant", button.id);
-                return true;
-            }
-            if (previousSelectedIdx > 0 && previousSelectedIdx <= itemCount) {
-                const button = focusabledItems[previousSelectedIdx - 1];
-                focusabledItems[previousSelectedIdx].removeAttribute("aria-selected");
-                button.setAttribute("aria-selected", "true");
-                button.focus();
-                this.selectedItemIndex = previousSelectedIdx - 1;
-                this.focusabledList?.setAttribute("aria-activedescendant", button.id);
-                return true;
-            }
-            if (previousSelectedIdx === 0 && this.lists.length === 2 && this.focusabledList === this.lists[1]) {
-                focusabledItems[previousSelectedIdx].removeAttribute("aria-selected");
-                this.focusabledList?.removeAttribute("aria-activedescendant");
-                this.focusabledList = this.lists[0];
-                this.focusabledList.focus();
-                this.selectedItemIndex = -1;
-                return true;
-            }
-        }
-    }
-    handlePrevTabReset(e) {
-        if (this.focusabledList) {
-            e.preventDefault();
-            this.focusabledList.focus();
-        }
+        this.close();
+        this.resetFocusState();
+        this.onFocusInput();
     }
     static get dependencies() {
         return [