@sapudex/web-components 2.42.0 → 2.44.0

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

@@ -472,6 +472,11 @@
           "description": "Allows to hide the flag images in the country selector.",
           "values": []
         },
+        {
+          "name": "item-icon",
+          "description": "Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.",
+          "values": []
+        },
         {
           "name": "mode",
           "description": "Defines the mode of the component.",
@@ -516,6 +521,16 @@
           "name": "show-search-input",
           "description": "Defines if the search input is visible.",
           "values": []
+        },
+        {
+          "name": "type",
+          "description": "Defines the list style type of the dropdown items.",
+          "values": [
+            { "name": "Circle" },
+            { "name": "Number" },
+            { "name": "None" },
+            { "name": "Icon" }
+          ]
         }
       ],
       "references": []
@@ -849,6 +864,11 @@
             { "name": "Stretch" }
           ]
         },
+        {
+          "name": "item-icon",
+          "description": "Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.",
+          "values": []
+        },
         {
           "name": "mode",
           "description": "Defines the mode of the component.",
@@ -913,6 +933,16 @@
           "name": "trigger-accessible-role",
           "description": "Allows setting a custom role for dropdown trigger.",
           "values": []
+        },
+        {
+          "name": "type",
+          "description": "Defines the list style type of the dropdown items.",
+          "values": [
+            { "name": "Circle" },
+            { "name": "Number" },
+            { "name": "None" },
+            { "name": "Icon" }
+          ]
         }
       ],
       "references": []
@@ -3280,6 +3310,11 @@
           "description": "Defines the language of voice search.",
           "values": []
         },
+        {
+          "name": "maxlength",
+          "description": "Sets the maximum number of characters available in the input field.",
+          "values": []
+        },
         {
           "name": "mode",
           "description": "Defines the mode of component.\n<br><br>\n<b>Note:</b> accepts a string \"Standard\" or \"Home Search\".",
@@ -3372,6 +3407,11 @@
           "description": "Allows control over the height.",
           "values": []
         },
+        {
+          "name": "item-icon",
+          "description": "Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.",
+          "values": []
+        },
         {
           "name": "mode",
           "description": "Defines the mode of the component.",
@@ -3411,6 +3451,16 @@
           "name": "show-search-input",
           "description": "Defines if the search input is visible.",
           "values": []
+        },
+        {
+          "name": "type",
+          "description": "Defines the list style type of the dropdown items.",
+          "values": [
+            { "name": "Circle" },
+            { "name": "Number" },
+            { "name": "None" },
+            { "name": "Icon" }
+          ]
         }
       ],
       "references": []
@@ -3664,6 +3714,11 @@
           "description": "Allows control over the height.",
           "values": []
         },
+        {
+          "name": "item-icon",
+          "description": "Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.",
+          "values": []
+        },
         {
           "name": "mode",
           "description": "Defines the mode of the component.",
@@ -3713,6 +3768,16 @@
             { "name": "Top" },
             { "name": "Bottom" }
           ]
+        },
+        {
+          "name": "type",
+          "description": "Defines the list style type of the dropdown items.",
+          "values": [
+            { "name": "Circle" },
+            { "name": "Number" },
+            { "name": "None" },
+            { "name": "Icon" }
+          ]
         }
       ],
       "references": []
@@ -3864,11 +3929,63 @@
           "description": "Defines whether a visual separator should be rendered after the item.",
           "values": []
         },
+        {
+          "name": "flag",
+          "description": "Defines the image, displayed at the start of the item.",
+          "values": []
+        },
+        {
+          "name": "flag-position",
+          "description": "Defines the position for flag image.",
+          "values": []
+        },
+        {
+          "name": "image",
+          "description": "Allows control over the image source.",
+          "values": []
+        },
+        {
+          "name": "image-alt",
+          "description": "Allows control over the alternative text of the image.",
+          "values": []
+        },
+        {
+          "name": "image-badge-state",
+          "description": "Defines the image badge state of the component.",
+          "values": [
+            { "name": "Information" },
+            { "name": "Warning" },
+            { "name": "Success" },
+            { "name": "Error" },
+            { "name": "Edit" }
+          ]
+        },
+        {
+          "name": "image-shape",
+          "description": "Defines the shape of the image.",
+          "values": [{ "name": "Circle" }, { "name": "Square" }]
+        },
+        {
+          "name": "image-size",
+          "description": "Allows control over the size of the image.",
+          "values": [
+            { "name": "XS" },
+            { "name": "S" },
+            { "name": "M" },
+            { "name": "L" },
+            { "name": "XL" }
+          ]
+        },
         {
           "name": "indeterminate",
           "description": "Defines whether the selection of a  list is displayed as partially selected.",
           "values": []
         },
+        {
+          "name": "item-icon",
+          "description": "Defines the name of the UI5 Icon displayed for each item when type is Icon.",
+          "values": []
+        },
         {
           "name": "label",
           "description": "Defines the <code>label</code> for the item.",
@@ -4693,6 +4810,11 @@
           "description": "Defines whether the UI5Tokenizer is expanded.",
           "values": []
         },
+        {
+          "name": "tooltip-accessible-name",
+          "description": "Defines the accessible name for the \"Show More\" tooltip, announced by screen readers\nwhen the tooltip containing hidden tags is opened.",
+          "values": []
+        },
         {
           "name": "tooltip-placement",
           "description": "Determines on which side of the component the Tooltip is displayed.",

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.42.0",
+  "version": "2.44.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -929,6 +929,11 @@
               "description": "Allows to hide the flag images in the country selector.",
               "value": { "type": "boolean | undefined", "default": "false" }
             },
+            {
+              "name": "item-icon",
+              "description": "Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "mode",
               "description": "Defines the mode of the component.",
@@ -971,6 +976,14 @@
               "name": "show-search-input",
               "description": "Defines if the search input is visible.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "type",
+              "description": "Defines the list style type of the dropdown items.",
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
             }
           ],
           "slots": [
@@ -1039,6 +1052,11 @@
                 "description": "Allows to hide the flag images in the country selector.",
                 "value": { "type": "boolean | undefined" }
               },
+              {
+                "name": "item-icon",
+                "description": "Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "mode",
                 "description": "Defines the mode of the component.",
@@ -1080,6 +1098,13 @@
                 "name": "show-search-input",
                 "description": "Defines if the search input is visible.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "type",
+                "description": "Defines the list style type of the dropdown items.",
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
               }
             ],
             "events": [
@@ -1720,6 +1745,11 @@
                 "default": "\"Left\""
               }
             },
+            {
+              "name": "item-icon",
+              "description": "Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "mode",
               "description": "Defines the mode of the component.",
@@ -1783,6 +1813,14 @@
               "name": "trigger-accessible-role",
               "description": "Allows setting a custom role for dropdown trigger.",
               "value": { "type": "string", "default": "\"combobox\"" }
+            },
+            {
+              "name": "type",
+              "description": "Defines the list style type of the dropdown items.",
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
             }
           ],
           "slots": [{ "name": "default", "description": "Slot for items." }],
@@ -1916,6 +1954,11 @@
                   "type": "\"Start\" | \"End\" | \"Center\" | \"Stretch\""
                 }
               },
+              {
+                "name": "item-icon",
+                "description": "Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "mode",
                 "description": "Defines the mode of the component.",
@@ -1974,6 +2017,13 @@
                 "name": "trigger-accessible-role",
                 "description": "Allows setting a custom role for dropdown trigger.",
                 "value": { "type": "string" }
+              },
+              {
+                "name": "type",
+                "description": "Defines the list style type of the dropdown items.",
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
               }
             ],
             "events": [
@@ -7092,6 +7142,11 @@
               "description": "Defines the language of voice search.",
               "value": { "type": "string", "default": "\"en-US\"" }
             },
+            {
+              "name": "maxlength",
+              "description": "Sets the maximum number of characters available in the input field.",
+              "value": { "type": "number | undefined" }
+            },
             {
               "name": "mode",
               "description": "Defines the mode of component.\n<br><br>\n<b>Note:</b> accepts a string \"Standard\" or \"Home Search\".",
@@ -7222,6 +7277,11 @@
                 "description": "Defines the language of voice search.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "maxlength",
+                "description": "Sets the maximum number of characters available in the input field.",
+                "value": { "type": "number | undefined" }
+              },
               {
                 "name": "mode",
                 "description": "Defines the mode of component.\n<br><br>\n<b>Note:</b> accepts a string \"Standard\" or \"Home Search\".",
@@ -7759,6 +7819,11 @@
               "description": "Allows control over the height.",
               "value": { "type": "string | undefined" }
             },
+            {
+              "name": "item-icon",
+              "description": "Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "mode",
               "description": "Defines the mode of the component.",
@@ -7804,6 +7869,14 @@
                 "type": "\"Start\" | \"End\" | \"Top\" | \"Bottom\"",
                 "default": "\"Bottom\""
               }
+            },
+            {
+              "name": "type",
+              "description": "Defines the list style type of the dropdown items.",
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
             }
           ],
           "slots": [
@@ -7875,6 +7948,11 @@
                 "description": "Allows control over the height.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "item-icon",
+                "description": "Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "mode",
                 "description": "Defines the mode of the component.",
@@ -7918,6 +7996,13 @@
                 "value": {
                   "type": "\"Start\" | \"End\" | \"Top\" | \"Bottom\""
                 }
+              },
+              {
+                "name": "type",
+                "description": "Defines the list style type of the dropdown items.",
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
               }
             ],
             "events": [
@@ -8228,11 +8313,60 @@
               "description": "Defines whether a visual separator should be rendered after the item.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "flag",
+              "description": "Defines the image, displayed at the start of the item.",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "flag-position",
+              "description": "Defines the position for flag image.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "image",
+              "description": "Allows control over the image source.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "image-alt",
+              "description": "Allows control over the alternative text of the image.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "image-badge-state",
+              "description": "Defines the image badge state of the component.",
+              "value": {
+                "type": "\"Information\" | \"Warning\" | \"Success\" | \"Error\" | \"Edit\" | undefined",
+                "default": "\"\""
+              }
+            },
+            {
+              "name": "image-shape",
+              "description": "Defines the shape of the image.",
+              "value": {
+                "type": "\"Circle\" | \"Square\"",
+                "default": "\"Circle\""
+              }
+            },
+            {
+              "name": "image-size",
+              "description": "Allows control over the size of the image.",
+              "value": {
+                "type": "\"XS\" | \"S\" | \"M\" | \"L\" | \"XL\"",
+                "default": "\"S\""
+              }
+            },
             {
               "name": "indeterminate",
               "description": "Defines whether the selection of a  list is displayed as partially selected.",
               "value": { "type": "boolean | undefined", "default": "false" }
             },
+            {
+              "name": "item-icon",
+              "description": "Defines the name of the UI5 Icon displayed for each item when type is Icon.",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "label",
               "description": "Defines the <code>label</code> for the item.",
@@ -8351,11 +8485,53 @@
                 "description": "Defines whether a visual separator should be rendered after the item.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "flag",
+                "description": "Defines the image, displayed at the start of the item.",
+                "value": { "type": "boolean | undefined" }
+              },
+              {
+                "name": "flag-position",
+                "description": "Defines the position for flag image.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "image",
+                "description": "Allows control over the image source.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "image-alt",
+                "description": "Allows control over the alternative text of the image.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "image-badge-state",
+                "description": "Defines the image badge state of the component.",
+                "value": {
+                  "type": "\"Information\" | \"Warning\" | \"Success\" | \"Error\" | \"Edit\" | undefined"
+                }
+              },
+              {
+                "name": "image-shape",
+                "description": "Defines the shape of the image.",
+                "value": { "type": "\"Circle\" | \"Square\"" }
+              },
+              {
+                "name": "image-size",
+                "description": "Allows control over the size of the image.",
+                "value": { "type": "\"XS\" | \"S\" | \"M\" | \"L\" | \"XL\"" }
+              },
               {
                 "name": "indeterminate",
                 "description": "Defines whether the selection of a  list is displayed as partially selected.",
                 "value": { "type": "boolean | undefined" }
               },
+              {
+                "name": "item-icon",
+                "description": "Defines the name of the UI5 Icon displayed for each item when type is Icon.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "label",
                 "description": "Defines the <code>label</code> for the item.",
@@ -9994,6 +10170,11 @@
               "description": "Defines whether the UI5Tokenizer is expanded.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "tooltip-accessible-name",
+              "description": "Defines the accessible name for the \"Show More\" tooltip, announced by screen readers\nwhen the tooltip containing hidden tags is opened.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "tooltip-placement",
               "description": "Determines on which side of the component the Tooltip is displayed.",
@@ -10044,6 +10225,11 @@
                 "description": "Defines whether the UI5Tokenizer is expanded.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "tooltip-accessible-name",
+                "description": "Defines the accessible name for the \"Show More\" tooltip, announced by screen readers\nwhen the tooltip containing hidden tags is opened.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "tooltip-placement",
                 "description": "Determines on which side of the component the Tooltip is displayed.",

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.42.0",
+  "version": "2.44.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -37,19 +37,19 @@
   "dependencies": {
     "@types/vimeo__player": "^2.18.3",
     "@types/youtube": "^0.1.2",
-    "@ui5/webcomponents": "2.22.0",
-    "@ui5/webcomponents-base": "2.22.0",
-    "@ui5/webcomponents-fiori": "2.22.0",
-    "@ui5/webcomponents-icons": "2.22.0",
-    "@ui5/webcomponents-localization": "2.22.0",
-    "@ui5/webcomponents-theming": "2.22.0",
+    "@ui5/webcomponents": "2.23.0",
+    "@ui5/webcomponents-base": "2.23.0",
+    "@ui5/webcomponents-fiori": "2.23.0",
+    "@ui5/webcomponents-icons": "2.23.0",
+    "@ui5/webcomponents-localization": "2.23.0",
+    "@ui5/webcomponents-theming": "2.23.0",
     "@vimeo/player": "^2.24.0",
     "video.js": "^8.23.6"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.14.5",
     "@ui5/cypress-ct-ui5-webc": "^0.0.4",
-    "@ui5/webcomponents-tools": "2.22.0",
+    "@ui5/webcomponents-tools": "2.23.0",
     "chromedriver": "149.0.2",
     "cross-env": "^7.0.3",
     "cypress": "^14.3.3",

package/src/FilterMenu.ts

@@ -331,6 +331,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
   _popover!: Popover;
   _breakpointSizeXS = 640;
   _initialState: Array<initialItemState> = [];
+  _list!: UDExList;
 
   onEnterDOM(): void {
     if (isDesktop()) {
@@ -346,6 +347,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
     this._search = this.getSearch();
     this._popover = this.getPopover();
     this._trigger = this.getTriggerButton();
+    this._list = this.getList();
   }
 
   handleSelectAll(e:CustomEvent): void {
@@ -477,9 +479,30 @@ class UDExFilterMenu extends UDExSearchableListBase {
     if (this._popover.offsetWidth + popoverLeftOffset < this._breakpointSizeXS) {
       this.style.setProperty("--udex-filter-menu-popover-left-offset", `${this._popover.style.left}`);
     }
+    if (this.modeMultiSelect) {
+      this._focusFirstInteractiveElement();
+    }
+    if (this.modeSingleSelect && !this._search) {
+      this.activeItem?.focus();
+    }
+    this._handleDropdownScroll();
     this.fireDecoratorEvent("after-open");
   }
 
+  _focusFirstInteractiveElement(): void {
+    if (this.showSearch && this._search) {
+      this._focusSearchInput();
+      return;
+    }
+
+    this.focusFirstItem();
+  }
+
+  _focusSearchInput(): void {
+    const input = this._search.shadowRoot?.querySelector("[id='search-input']") as HTMLInputElement;
+    input.focus();
+  }
+
   _getInitialState(items: Array<UDExListItemBase | UDExListGroupHeaderBase>): Array<initialItemState> {
     return items.flatMap(item => {
       if (item.isGroup) {

package/src/ListGroupHeader.hbs

@@ -40,7 +40,7 @@
     {{#if isNonActiveHeader}}
         <header id="group-heading" class="udex-list__inactive-header udex-list__group-header-wrap">
           <div class="udex-list__inactive-header-content">
-            <span class="udex-list__header-title">{{label}}</span>
+            <span class="udex-list__header-title">{{{label}}}</span>
             {{#if supportingText}}
                 <span class="udex-list__supporting-text">{{supportingText}}</span>
             {{/if}}
@@ -75,7 +75,7 @@
         <header role="button" id="group-heading" class="udex-list__inactive-header udex-list__group-header-wrap " tabindex="{{_effectiveTabIndex}}"
         aria-expanded="{{expanded}}" aria-controls="{{ariaControlsId}}">
           <div class="udex-list__inactive-header-content" >
-            <span class="udex-list__header-title">{{label}}</span>
+            <span class="udex-list__header-title">{{{label}}}</span>
             {{#if supportingText}}
                 <span class="udex-list__supporting-text ">{{supportingText}}</span>
             {{/if}}
@@ -137,7 +137,7 @@
             </ui5-icon>
         {{/if}}
         <div class="udex-list__header">
-            <span id="group-heading" class="udex-list__header-title">{{label}}</span>
+            <span id="group-heading" class="udex-list__header-title">{{{label}}}</span>
             {{#if supportingText}}
                 <span class="udex-list__supporting-text {{sizeClass}}">{{supportingText}}</span>
             {{/if}}
@@ -166,7 +166,7 @@
             </ui5-icon>
         {{/if}}
         <div class="udex-list__header">
-            <span id="group-heading" class="udex-list__header-title">{{label}}</span>
+            <span id="group-heading" class="udex-list__header-title">{{{label}}}</span>
             {{#if supportingText}}
                 <span class="udex-list__supporting-text {{sizeClass}}">{{supportingText}}</span>
             {{/if}}

package/src/ListItemBase.ts

@@ -254,7 +254,7 @@ class UDExListItemBase extends UI5Element {
     if (!this.collapsible) {
       return;
     }
-    this.contentElement = this.shadowRoot?.querySelector(".udex-list__group-list__content") || this.nextElementSibling as HTMLElement;
+    this.contentElement = this.shadowRoot?.querySelector<HTMLElement>(".udex-list__group-list__content");
     if (this.contentElement) {
       ResizeHandler.register(this.contentElement, this._resizeHandler);
       this.setContentHeight();
@@ -272,7 +272,7 @@ class UDExListItemBase extends UI5Element {
   }
 
   _onResize(): void {
-    if (this.contentElement && this.collapsible) {
+    if (this.contentElement && this.collapsible && this.contentElement.scrollHeight > 0) {
       this.setContentHeight();
     }
   }

package/src/MastheadCountrySelector.hbs

@@ -1,4 +1,4 @@
-<div class="udex-masthead-country-selector" @keydown="{{handleKeyDown}}">
+<div class="udex-masthead-country-selector">
     {{#if _isActiveRegionOpen}}
         <span class="udex-masthead-country-selector__title">{{countryTitle}}</span>
         {{#unless this.isSingleMode}}