@sapudex/web-components 2.55.0 → 2.56.0

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.55.0",
+  "version": "2.56.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -7386,7 +7386,7 @@
         },
         {
           "name": "udex-search",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-search</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Search.js\";</code>\n---\n\n\n### **Events:**\n - **dropdown-item-click** - Fired event when the user clicks on the item inside the popover.\n- **handle-value-reset** - Fired event when the user clicks on the reset button.\n- **handle-value-search** - Fired event when the user typed to search field.\n- **prefix-item-click** - Fired event when the user clicks on the intem inside the prefix dropdown.\n- **search-keydown** - Fired event when the user clicks on the intem inside the prefix dropdown.\n- **submit-search-value** - Fired event when the user submitted the value.\n\n### **Slots:**\n - **default** - Defines the prefix dropdown of the Search component.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-search</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Search.js\";</code>\n---\n\n\n### **Events:**\n - **dropdown-item-click** - Fired event when the user clicks on the item inside the popover.\n- **handle-value-reset** - Fired event when the user clicks on the reset button.\n- **handle-value-search** - Fired event when the user typed to search field.\n- **prefix-item-click** - Fired event when the user clicks on the intem inside the prefix dropdown.\n- **search-keydown** - Fired event when the user clicks on the intem inside the prefix dropdown.\n- **submit-search-value** - Fired event when the user submitted the value.\n- **suggestion-popover-closed** - Fired when the suggestions popover closes.\n- **suggestion-popover-opened** - Fired when the suggestions popover opens.\n\n### **Slots:**\n - **default** - Defines the prefix dropdown of the Search component.",
           "doc-url": "",
           "attributes": [
             {
@@ -7520,6 +7520,14 @@
             {
               "name": "submit-search-value",
               "description": "Fired event when the user submitted the value."
+            },
+            {
+              "name": "suggestion-popover-closed",
+              "description": "Fired when the suggestions popover closes."
+            },
+            {
+              "name": "suggestion-popover-opened",
+              "description": "Fired when the suggestions popover opens."
             }
           ],
           "js": {
@@ -7649,6 +7657,14 @@
               {
                 "name": "submit-search-value",
                 "description": "Fired event when the user submitted the value."
+              },
+              {
+                "name": "suggestion-popover-closed",
+                "description": "Fired when the suggestions popover closes."
+              },
+              {
+                "name": "suggestion-popover-opened",
+                "description": "Fired when the suggestions popover opens."
               }
             ]
           }
@@ -9321,7 +9337,7 @@
             {
               "name": "disabled",
               "description": "Defines if component should have disabled styles.",
-              "value": { "type": "string", "default": "\"\"" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "supporting-text",
@@ -9348,7 +9364,7 @@
               {
                 "name": "disabled",
                 "description": "Defines if component should have disabled styles.",
-                "value": { "type": "string" }
+                "value": { "type": "boolean" }
               },
               {
                 "name": "supporting-text",
@@ -11480,9 +11496,57 @@
         },
         {
           "name": "udex-upload-item",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-upload-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UploadItem.js\";</code>\n---\n\n\n### **Events:**\n - **request-delete** - Triggered when the upload item is deleted.\n\n### **Slots:**\n - **default** - Slot for information about the uploaded file.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-upload-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UploadItem.js\";</code>\n---\n\n\n### **Events:**\n - **accordion-icon-click** - Triggered when the user clicks on an accordion item.\n- **first-icon-click** - Fired event when the user click on a first icon.\n- **item-focus** - Fired event when the user focuses on a list item.\n- **item-press** - Fired event when the user click on a list item.\n- **request-delete** - Triggered when the upload item is deleted.\n- **second-icon-click** - Fired event when the user click on a second icon.\n\n### **Slots:**\n - **default** - Slot for information about the uploaded file.\n- **firstIcon** - Slot for first icon.\n- **secondIcon** - Slot for second icon.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible name of the item.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "accessible-role",
+              "description": "Defines the role attribute of component",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "additional-text",
+              "description": "Defines the additionalText, displayed at the end of the list item.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "additional-text-state",
+              "description": "Defines the state of the additionalText.",
+              "value": {
+                "type": "\"Information\" | \"Warning\" | \"None\" | \"Success\" | \"Error\"",
+                "default": "\"None\""
+              }
+            },
+            {
+              "name": "collapsed",
+              "description": "Defines if collapsible grouping header is collapsed or expanded",
+              "value": { "type": "boolean", "default": "undefined" }
+            },
+            {
+              "name": "collapsible",
+              "description": "Defines if grouping header can collapse/expand child elements.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "controlled",
+              "description": "Defines the controlled state of the item.",
+              "value": { "type": "boolean | undefined", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "Defines whether <code> list item</code> is in disabled state.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "divider",
+              "description": "Defines whether a visual separator should be rendered after the item.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "file-link",
               "description": "Defines the link of the uploaded file.",
@@ -11500,6 +11564,114 @@
                 "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
               }
             },
+            {
+              "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": "label",
+              "description": "Defines the <code>label</code> for the item.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "mode",
+              "description": "Defines the mode of the item.",
+              "value": {
+                "type": "\"SingleSelect\" | \"MultiSelect\" | \"SingleContent\" | \"RadioGroup\"",
+                "default": "\"SingleSelect\""
+              }
+            },
+            {
+              "name": "rating",
+              "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "rating-count",
+              "description": "Defines the number of the rating.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "rating-max",
+              "description": "Defines the number of displayed rating symbols.",
+              "value": { "type": "number", "default": "5" }
+            },
+            {
+              "name": "selected",
+              "description": "Defines the selected state of the item.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "size",
+              "description": "Defines the size of the item.",
+              "value": {
+                "type": "\"Large\" | \"Standard\"",
+                "default": "\"Standard\""
+              }
+            },
+            {
+              "name": "supporting-text",
+              "description": "Defines the supportingText, displayed in the end of the item.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "total-count",
+              "description": "The number of total votes.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "type",
+              "description": "Defines the type of the item.",
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
+            },
             {
               "name": "upload-percentage",
               "description": "Defines the percentage of the upload.",
@@ -11518,16 +11690,85 @@
             {
               "name": "default",
               "description": "Slot for information about the uploaded file."
-            }
+            },
+            { "name": "firstIcon", "description": "Slot for first icon." },
+            { "name": "secondIcon", "description": "Slot for second icon." }
           ],
           "events": [
+            {
+              "name": "accordion-icon-click",
+              "description": "Triggered when the user clicks on an accordion item."
+            },
+            {
+              "name": "first-icon-click",
+              "description": "Fired event when the user click on a first icon."
+            },
+            {
+              "name": "item-focus",
+              "description": "Fired event when the user focuses on a list item."
+            },
+            {
+              "name": "item-press",
+              "description": "Fired event when the user click on a list item."
+            },
             {
               "name": "request-delete",
               "description": "Triggered when the upload item is deleted."
+            },
+            {
+              "name": "second-icon-click",
+              "description": "Fired event when the user click on a second icon."
             }
           ],
           "js": {
             "properties": [
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible name of the item.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "accessible-role",
+                "description": "Defines the role attribute of component",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "additional-text",
+                "description": "Defines the additionalText, displayed at the end of the list item.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "additional-text-state",
+                "description": "Defines the state of the additionalText.",
+                "value": {
+                  "type": "\"Information\" | \"Warning\" | \"None\" | \"Success\" | \"Error\""
+                }
+              },
+              {
+                "name": "collapsed",
+                "description": "Defines if collapsible grouping header is collapsed or expanded",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "collapsible",
+                "description": "Defines if grouping header can collapse/expand child elements.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "controlled",
+                "description": "Defines the controlled state of the item.",
+                "value": { "type": "boolean | undefined" }
+              },
+              {
+                "name": "disabled",
+                "description": "Defines whether <code> list item</code> is in disabled state.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "divider",
+                "description": "Defines whether a visual separator should be rendered after the item.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "file-link",
                 "description": "Defines the link of the uploaded file.",
@@ -11545,6 +11786,102 @@
                   "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
                 }
               },
+              {
+                "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": "label",
+                "description": "Defines the <code>label</code> for the item.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "mode",
+                "description": "Defines the mode of the item.",
+                "value": {
+                  "type": "\"SingleSelect\" | \"MultiSelect\" | \"SingleContent\" | \"RadioGroup\""
+                }
+              },
+              {
+                "name": "rating",
+                "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "rating-count",
+                "description": "Defines the number of the rating.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "rating-max",
+                "description": "Defines the number of displayed rating symbols.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "selected",
+                "description": "Defines the selected state of the item.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "size",
+                "description": "Defines the size of the item.",
+                "value": { "type": "\"Large\" | \"Standard\"" }
+              },
+              {
+                "name": "supporting-text",
+                "description": "Defines the supportingText, displayed in the end of the item.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "total-count",
+                "description": "The number of total votes.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "type",
+                "description": "Defines the type of the item.",
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
+              },
               {
                 "name": "upload-percentage",
                 "description": "Defines the percentage of the upload.",
@@ -11557,9 +11894,29 @@
               }
             ],
             "events": [
+              {
+                "name": "accordion-icon-click",
+                "description": "Triggered when the user clicks on an accordion item."
+              },
+              {
+                "name": "first-icon-click",
+                "description": "Fired event when the user click on a first icon."
+              },
+              {
+                "name": "item-focus",
+                "description": "Fired event when the user focuses on a list item."
+              },
+              {
+                "name": "item-press",
+                "description": "Fired event when the user click on a list item."
+              },
               {
                 "name": "request-delete",
                 "description": "Triggered when the upload item is deleted."
+              },
+              {
+                "name": "second-icon-click",
+                "description": "Fired event when the user click on a second icon."
               }
             ]
           }

package/package.json

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

package/src/CountrySelectorTemplate.tsx

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

package/src/FilterMenu.ts

@@ -6,6 +6,7 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
   isTabPrevious, isTabNext, isEscape, isSpace, isEnter,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import UDExBusyIndicator from "./BusyIndicator.js";
@@ -485,7 +486,10 @@ class UDExFilterMenu extends UDExSearchableListBase {
     if (this.modeSingleSelect && !this._search) {
       this.activeItem?.focus();
     }
-    this._handleDropdownScroll();
+    this._expandCollapsedGroupsWithSelection();
+    renderFinished().then(() => {
+      this._handleDropdownScroll();
+    }).catch(() => {});
     this.fireDecoratorEvent("after-open");
   }
 

package/src/HeroBanner.ts

@@ -8,6 +8,7 @@ import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import HeroBannerTemplate from "./HeroBannerTemplate.js";
 import type UDExBreadcrumbs from "./Breadcrumbs.js";
+import ensureSearchBackdropStyles from "./utils/searchBackdrop.js";
 
 // Styles
 import HeroBannerCss from "./generated/themes/HeroBanner.css.js";
@@ -155,6 +156,71 @@ class UDExHeroBanner extends UI5Element {
         this._calculateMediaButtonState();
       });
     }
+    this._handleSuggestionOpenedBound = this._showSearchBackdrop.bind(this);
+    this._handleSuggestionClosedBound = this._hideSearchBackdrop.bind(this);
+    this.addEventListener("suggestion-popover-opened", this._handleSuggestionOpenedBound);
+    this.addEventListener("suggestion-popover-closed", this._handleSuggestionClosedBound);
+  }
+
+  onExitDOM() {
+    this.removeEventListener("suggestion-popover-opened", this._handleSuggestionOpenedBound);
+    this.removeEventListener("suggestion-popover-closed", this._handleSuggestionClosedBound);
+    this._removeBackdropScrollListener();
+    this._bodyBackdropEl?.remove();
+    this._bodyBackdropEl = null;
+  }
+
+  _handleSuggestionOpenedBound!: () => void;
+  _handleSuggestionClosedBound!: () => void;
+  _handleBackdropScrollBound!: () => void;
+  _bodyBackdropEl: HTMLElement | null = null;
+
+  private _getBackdropEl(): HTMLElement {
+    if (!this._bodyBackdropEl) {
+      ensureSearchBackdropStyles(this.ownerDocument);
+      const el = this.ownerDocument.createElement("div");
+      el.className = "udex-search-backdrop";
+      el.addEventListener("click", () => this.handleBackdropClick());
+      this.ownerDocument.body.appendChild(el);
+      this._bodyBackdropEl = el;
+    }
+    return this._bodyBackdropEl;
+  }
+
+  private _updateBackdropTop(): void {
+    if (this._bodyBackdropEl) {
+      this._bodyBackdropEl.style.top = `${this.getBoundingClientRect().bottom}px`;
+    }
+  }
+
+  private _addBackdropScrollListener(): void {
+    this._handleBackdropScrollBound = this._updateBackdropTop.bind(this);
+    window.addEventListener("scroll", this._handleBackdropScrollBound, { passive: true });
+  }
+
+  private _removeBackdropScrollListener(): void {
+    if (this._handleBackdropScrollBound) {
+      window.removeEventListener("scroll", this._handleBackdropScrollBound);
+    }
+  }
+
+  private _showSearchBackdrop(): void {
+    const backdrop = this._getBackdropEl();
+    this._updateBackdropTop();
+    this._addBackdropScrollListener();
+    backdrop.style.display = "block";
+  }
+
+  private _hideSearchBackdrop(): void {
+    this._removeBackdropScrollListener();
+    if (this._bodyBackdropEl) {
+      this._bodyBackdropEl.style.display = "none";
+    }
+  }
+
+  handleBackdropClick(): void {
+    const search = this.querySelector<any>("[udex-search]");
+    search?.onClosePopover?.();
   }
 
   _toggleMediaButton(): void {

package/src/List.ts

@@ -598,6 +598,14 @@ class UDExList extends UI5Element {
     return this._hasCollapsibleGroups ? "tree" : this.accessibleRole;
   }
 
+  /**
+   * Role for SingleContent mode. listbox/option is for selection widgets only;
+   * SingleContent is informational so "list"/"listitem" is the correct semantic.
+   */
+  get singleContentRole(): string {
+    return this.accessibleRole !== "listbox" ? this.accessibleRole : "list";
+  }
+
   /** aria-multiselectable exposed only for MultiSelect tree (collapsible groups). */
   get _listAriaMultiSelectable(): string | undefined {
     return (this._hasCollapsibleGroups && this.modeMultiSelect) ? "true" : undefined;

package/src/ListItem.ts

@@ -372,7 +372,11 @@ class UDExListItem extends UDExListItemBase {
     if (this._useHostAriaRole) {
       return "presentation";
     }
-    return this.accessibleRole.length > 0 ? this.accessibleRole : listItemRole;
+    if (this.accessibleRole.length > 0) {
+      return this.accessibleRole;
+    }
+    // SingleContent is informational (not a selection widget) — listitem is semantically correct
+    return this.modeSingleContent ? "listitem" : listItemRole;
   }
 
   get effectiveRole(): string {

package/src/ListTemplate.tsx

@@ -34,7 +34,7 @@ export default function ListTemplate(this: UDExList) {
           <div
             id="udex-list"
             class="udex-list"
-            role={this.accessibleRole as AriaRole}
+            role={this.singleContentRole as AriaRole}
             aria-label={this.singleContentAriaLabel}
             aria-busy={(this.ariaBusy ?? undefined) as "true" | "false" | undefined}>
             <slot></slot>