@sapudex/web-components 2.28.0 → 2.30.0

package/cypress/specs/FilterMenu.cy.tsx

@@ -68,6 +68,30 @@ const filterMenuGroup = <><UDExFilterMenu
 <a id="next-focus" href="#">Next focus</a>
 </>
 
+const filterMenuGroupCollapsible = <UDExFilterMenu
+id="filter-menu-group-with-search"
+disable-target-overlap="true"
+badge-value="2"
+mode={UDExListMode.MultiSelect}
+filter-name="Filter Name">
+<UDExFilterMenuGroupHeader collapsible collapsed label="Programming Languages" supporting-text="Digital Builders">
+  <UDExFilterMenuItem label="JavaScript" supporting-text="Frontend web development"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Python" supporting-text="Used in data analysis"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Java" supporting-text="Building large-scale applications"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Swift" supporting-text="iOS app development"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="C#" supporting-text="Object-oriented language"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Perl" supporting-text="General-purpose scripting language"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Rust" supporting-text="Focused on safety and speed"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="PHP" supporting-text="Server-side scripting language"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Go" supporting-text="Statically typed language"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Kotlin" supporting-text="For Android development"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="TypeScript" supporting-text="Super set of JS with static typing"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Ruby" supporting-text="Readable and easy-to-use"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="C++" supporting-text="Efficient and flexible language"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="R" supporting-text="Language for statistical computing"></UDExFilterMenuItem>
+</UDExFilterMenuGroupHeader>
+</UDExFilterMenu>
+
 const filterMenuRadioGroup = <UDExFilterMenu
   id="filter-menu-radio-group"
   disable-target-overlap="true"
@@ -77,7 +101,7 @@ const filterMenuRadioGroup = <UDExFilterMenu
     <UDExFilterMenuItem label="Python"></UDExFilterMenuItem>
     <UDExFilterMenuItem label="Node.js"></UDExFilterMenuItem>
   </UDExFilterMenuGroupHeader>
-  <UDExFilterMenuGroupHeader label="Programming Languages">
+  <UDExFilterMenuGroupHeader label="Programming Languages" collapsible>
     <UDExFilterMenuItem label="JavaScript" supporting-text="Frontend web development"></UDExFilterMenuItem>
     <UDExFilterMenuItem label="Python" supporting-text="Used in data analysis"></UDExFilterMenuItem>
     <UDExFilterMenuItem label="Java" supporting-text="Building large-scale applications"></UDExFilterMenuItem>
@@ -338,6 +362,20 @@ describe("Filter Menu component", () => {
         .find("udex-list-group-header")
         .should("have.attr", "selected")
     });
+
+    it('MultiSelect mode - expand collapsed items to show search result', () => {
+      cy.mount(filterMenuGroupCollapsible);
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("[udex-filter-menu]")
+        .shadow().find("[udex-search]")
+        .shadow().find(".udex-search__field")
+        .click().type("java");
+
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-item").eq(0).shadow()
+        .find(".udex-list__item").should("not.have.attr", "collapsed");
+    })
   });
 
   describe("Filter Menu group", () => {

package/cypress/specs/List.cy.tsx

@@ -0,0 +1,171 @@
+import { UDExList, UDExListGroupHeader, UDExListItem } from "../support/component-imports.js";
+
+const collapsibleList = <UDExList id="list-group-header-collapsible" mode="MultiSelect">
+<UDExListGroupHeader collapsible id="group-header-collapsible" supporting-text="Supporting text" label="Group Header">
+  <UDExListItem>List Item1</UDExListItem>
+  <UDExListItem>List Item2</UDExListItem>
+</UDExListGroupHeader>
+<UDExListGroupHeader collapsible collapsed id="group-header-collapsible-collapsed" supporting-text="Supporting text" label="Group Header">
+  <UDExListItem>List Item1</UDExListItem>
+  <UDExListItem>List Item2</UDExListItem>
+</UDExListGroupHeader>
+</UDExList>;
+
+const collapsibleListSingleSelect = <UDExList id="list-group-header-collapsible" mode="SingleSelect">
+<UDExListGroupHeader collapsible id="group-header-collapsible" supporting-text="Supporting text" label="Group Header">
+  <UDExListItem>List Item1</UDExListItem>
+  <UDExListItem>List Item2</UDExListItem>
+</UDExListGroupHeader>
+<UDExListGroupHeader collapsible collapsed id="group-header-collapsible-collapsed" supporting-text="Supporting text" label="Group Header">
+  <UDExListItem>List Item1</UDExListItem>
+  <UDExListItem>List Item2</UDExListItem>
+</UDExListGroupHeader>
+</UDExList>;
+
+const collapsibleListSingleContent = <UDExList id="list-group-header-collapsible" mode="SingleContent">
+<UDExListGroupHeader collapsible id="group-header-collapsible" supporting-text="Supporting text" label="Group Header">
+  <UDExListItem>List Item1</UDExListItem>
+  <UDExListItem>List Item2</UDExListItem>
+</UDExListGroupHeader>
+<UDExListGroupHeader collapsible collapsed id="group-header-collapsible-collapsed" supporting-text="Supporting text" label="Group Header">
+  <UDExListItem>List Item1</UDExListItem>
+  <UDExListItem>List Item2</UDExListItem>
+</UDExListGroupHeader>
+</UDExList>;
+
+const collapsibleListRadioGroup = <UDExList id="list-group-header-collapsible" mode="RadioGroup">
+<UDExListGroupHeader collapsible id="group-header-collapsible" supporting-text="Supporting text" label="Group Header">
+  <UDExListItem>List Item1</UDExListItem>
+  <UDExListItem>List Item2</UDExListItem>
+</UDExListGroupHeader>
+<UDExListGroupHeader collapsible collapsed id="group-header-collapsible-collapsed" supporting-text="Supporting text" label="Group Header">
+  <UDExListItem>List Item1</UDExListItem>
+  <UDExListItem>List Item2</UDExListItem>
+</UDExListGroupHeader>
+</UDExList>;
+
+describe("List component - collapsible group header", () => {
+  it("MultiSelect - collapse and expand the group when pressing arrow keys on grouping header", () => {
+    cy.mount(collapsibleList);
+    cy.get("#group-header-collapsible").shadow().find(".udex-list__group-header").as("grouping-header");
+    cy.get("@grouping-header").shadow().find('.udex-list__item').realClick();
+    cy.get("@grouping-header").should("have.attr", "focused", "");
+
+    cy.get("@grouping-header").realPress("ArrowLeft")
+      .then(() => {
+        cy.get("@grouping-header").should("have.attr", "collapsed", "");
+        cy.get("#group-header-collapsible").find("udex-list-item").eq(0).should("have.attr", "collapsed", "");
+      });
+
+    cy.get("@grouping-header").realPress("ArrowRight")
+      .then(() => {
+        cy.get("@grouping-header").should("not.have.attr", "collapsed");
+        cy.get("#group-header-collapsible").find("udex-list-item").eq(0).should("not.have.attr", "collapsed", "");
+      });
+  });
+
+  it("MultiSelect - collapses the group when clicking on grouping header arrow icon", () => {
+    cy.mount(collapsibleList);
+    cy.get("#group-header-collapsible").shadow().find(".udex-list__group-header").as("grouping-header");
+    // First click to collapse
+    cy.get("@grouping-header").shadow().find('.udex-list__group-heading__icon').realClick();
+    cy.get("@grouping-header").should("have.attr", "collapsed", "");
+    cy.get("#group-header-collapsible").find("udex-list-item").eq(0).should("have.attr", "collapsed", "");
+
+    // Second click to expand
+    cy.get("@grouping-header").shadow().find('.udex-list__group-heading__icon').realClick();
+    cy.get("@grouping-header").should("not.have.attr", "collapsed", "");
+    cy.get("#group-header-collapsible").find("udex-list-item").eq(0).should("not.have.attr", "collapsed", "");
+  });
+
+  it("MultiSelect - focus on next grouping header on arrow down when previous grouping header is collapsed", () => {
+    cy.mount(collapsibleList);
+    cy.get("#group-header-collapsible-collapsed").shadow().find(".udex-list__group-header").as("grouping-header");
+    cy.get("@grouping-header").shadow().find('.udex-list__item').realClick();
+    cy.get("@grouping-header").should("have.attr", "focused", "");
+
+    cy.get("@grouping-header").realPress("ArrowDown")
+      .then(() => {
+        cy.get("#group-header-collapsible").shadow().find(".udex-list__group-header").should("have.attr", "focused", "");
+      });
+  });
+
+  it("SingleSelect - collapse and expand the group when pressing arrow keys on grouping header", () => {
+    cy.mount(collapsibleListSingleSelect);
+    cy.get("#group-header-collapsible").shadow().find(".udex-list__group-header-wrap").as("grouping-header");
+    cy.get("@grouping-header").realClick();
+
+    cy.get("@grouping-header").realPress("ArrowLeft")
+      .then(() => {
+        cy.get("#group-header-collapsible").should("have.attr", "collapsed", "");
+      });
+  });
+
+  it("SingleSelect - collapses the group when clicking on grouping header arrow icon", () => {
+    cy.mount(collapsibleListSingleSelect);
+    cy.get("#group-header-collapsible").shadow().find(".udex-list__group-header-wrap").as("grouping-header");
+    // First click to collapse
+    cy.get("@grouping-header").find('.udex-list__group-heading__icon').realClick();
+    cy.get("#group-header-collapsible").should("have.attr", "collapsed", "");
+
+    // Second click to expand
+    cy.get("@grouping-header").find('.udex-list__group-heading__icon').realClick();
+    cy.get("#group-header-collapsible").should("not.have.attr", "collapsed", "");
+  });
+
+  it("SingleContent - collapse and expand the group when pressing arrow keys on grouping header", () => {
+    cy.mount(collapsibleListSingleContent);
+    cy.get("#group-header-collapsible").shadow().find(".udex-list__group-header-wrap").as("grouping-header");
+    cy.get("@grouping-header").realClick();
+
+    cy.get("@grouping-header").realPress("ArrowLeft")
+      .then(() => {
+        cy.get("#group-header-collapsible").should("have.attr", "collapsed", "");
+      });
+
+    cy.get("@grouping-header").realPress("ArrowRight")
+      .then(() => {
+        cy.get("#group-header-collapsible").should("not.have.attr", "collapsed", "");
+      });
+  });
+
+  it("SingleContent - collapses the group when clicking on grouping header arrow icon", () => {
+    cy.mount(collapsibleListSingleContent);
+    cy.get("#group-header-collapsible").shadow().find(".udex-list__group-header-wrap").as("grouping-header");
+    // First click to collapse
+    cy.get("@grouping-header").find('.udex-list__group-heading__icon').realClick();
+    cy.get("#group-header-collapsible").should("have.attr", "collapsed", "");
+
+    // Second click to expand
+    cy.get("@grouping-header").find('.udex-list__group-heading__icon').realClick();
+    cy.get("#group-header-collapsible").should("not.have.attr", "collapsed", "");
+  });
+
+  it("RadioGroup - collapse and expand the group when pressing arrow keys on grouping header", () => {
+    cy.mount(collapsibleListRadioGroup);
+    cy.get("#group-header-collapsible").shadow().find(".udex-list__group-header-wrap").as("grouping-header");
+    cy.get("@grouping-header").realClick();
+
+    cy.get("@grouping-header").realPress("ArrowLeft")
+      .then(() => {
+        cy.get("#group-header-collapsible").should("have.attr", "collapsed", "");
+      });
+
+    cy.get("@grouping-header").realPress("ArrowRight")
+      .then(() => {
+        cy.get("#group-header-collapsible").should("not.have.attr", "collapsed", "");
+      });
+  });
+
+  it("RadioGroup - collapses the group when clicking on grouping header arrow icon", () => {
+    cy.mount(collapsibleListRadioGroup);
+    cy.get("#group-header-collapsible").shadow().find(".udex-list__group-header-wrap").as("grouping-header");
+    // First click to collapse
+    cy.get("@grouping-header").find('.udex-list__group-heading__icon').realClick();
+    cy.get("#group-header-collapsible").should("have.attr", "collapsed", "");
+
+    // Second click to expand
+    cy.get("@grouping-header").find('.udex-list__group-heading__icon').realClick();
+    cy.get("#group-header-collapsible").should("not.have.attr", "collapsed", "");
+  });
+});

package/cypress/specs/PromoTile.cy.tsx

@@ -14,6 +14,14 @@ const iconPromoTile = <UDExPromoTile icon={iconName} image-label={imageLabel}>Te
 const logoPromoTile = <UDExPromoTile logoUrl={logoUrl} image-label={imageLabel}>Text</UDExPromoTile>;
 const buttonPromoTile = <UDExPromoTile button={buttonLabel} button-design={design}>Text</UDExPromoTile>;
 const horizontalPromoTile = <UDExPromoTile orientation="Horizontal" button={buttonLabel}>Text</UDExPromoTile>;
+const pictogramPromoTile = <UDExPromoTile button={buttonLabel}>
+  Text
+  <img
+    alt="John Ford avatar"
+    slot="pictogram"
+    src="https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg"
+  />
+</UDExPromoTile>;
 const darkPromoTile = <UDExPromoTile color-scheme={colorScheme} button={buttonLabel}>Text</UDExPromoTile>;
 
 describe("Promo Tile", () => {
@@ -22,6 +30,12 @@ describe("Promo Tile", () => {
     cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__container").should("be.visible");
   });
 
+  it("renders promo tile with custom pictogram", () => {
+    cy.mount(pictogramPromoTile);
+    cy.get("[udex-promo-tile]").shadow().find("slot[name='pictogram']").should("exist");
+    cy.get("[udex-promo-tile]").find("img[slot='pictogram']").should("have.attr", "src", "https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg");
+  });
+
   it("renders promo tile with default classes", () => {
     cy.mount(promoTile)
     cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__container").should("have.class", "udex-promo-tile--vertical");
@@ -37,7 +51,7 @@ describe("Promo Tile", () => {
     cy.mount(promoTile)
     cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__footer").should("not.exist");
   });
- 
+
   it("renders promo tile in horizontal orientation", () => {
     cy.mount(horizontalPromoTile)
     cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__container").should("have.class", "udex-promo-tile--horizontal");
@@ -121,4 +135,4 @@ describe("Promo Tile - Mobile tests", () => {
       expect(tileStyles.flexDirection).eqls("column");
     })
   });
-});
+});

package/cypress/specs/ReviewItem.cy.tsx

@@ -4,7 +4,9 @@ const defaultReviewItem = <UDExReviewItem
   id="review-item"
   rating={4}
   reviewTitle="Review title"
-  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt mauris id aliquet consectetur. Nulla euismod ligula id ante feugiat ornare. Mauris enim velit, sodales eget lectus at, tristique condimentum sapien. Integer quam lacus, faucibus in lacus ut, ullamcorper dictum lacus. In ac lectus congue, blandit quam non, congue ante. Suspendisse sem mauris, tempor dignissim nisl facilisis, vulputate tincidunt turpis. In egestas nisl ut sollicitudin rutrum.">
+  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt mauris id aliquet consectetur. Nulla euismod ligula id ante feugiat ornare. Mauris enim velit, sodales eget lectus at, tristique condimentum sapien. Integer quam lacus, faucibus in lacus ut, ullamcorper dictum lacus. In ac lectus congue, blandit quam non, congue ante. Suspendisse sem mauris, tempor dignissim nisl facilisis, vulputate tincidunt turpis. In egestas nisl ut sollicitudin rutrum.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt mauris id aliquet consectetur. Nulla euismod ligula id ante feugiat ornare. Mauris enim velit, sodales eget lectus at, tristique condimentum sapien. Integer quam lacus, faucibus in lacus ut, ullamcorper dictum lacus. In ac lectus congue, blandit quam non, congue ante. Suspendisse sem mauris, tempor dignissim nisl facilisis, vulputate tincidunt turpis. In egestas nisl ut sollicitudin rutrum.
+  ">
     <span slot="date">Jan 7, 2025</span>
     <span slot="author">John Ford, Job Title, Company, Inc.</span>
 </UDExReviewItem>
@@ -19,6 +21,33 @@ const reviewItemWithTopRating = <UDExReviewItem
     <span slot="author">John Ford, Job Title, Company, Inc.</span>
 </UDExReviewItem>
 
+const reviewItemWithTCustomContent = <UDExReviewItem
+  id="review-item-content"
+  rating={4}
+  reviewTitle="Review title"
+  showRatingTop>
+  <div slot="content">
+    <div class="truncatable-content">
+      <h4>AI agents that truly understand your business</h4>
+      <p>Amplify the impact of all your teams with Joule's AI agents that use their unique understanding
+        of your business context to offer expertise to perform complex processes across your business.
+        Reliable insights and the right business context enable Joule to act as an AI agent orchestrator,
+        triggering more impactful actions throughout your teams' workflows. And with SAP's agent builder,
+        you can scale endlessly as teams create and deploy custom AI agents tailored to their business needs.</p>
+      <h4>AI agents that truly understand your business</h4>
+      <p>SAP Business Data Cloud brings together the world's most comprehensive and mission-critical
+        data with the leading data platform to deliver transformational insights across all lines of business.</p>
+      <h4>Connect processes and empower teams with modular Cloud ERP applications</h4>
+      <p>Seamlessly connect your entire business value chain, from order to cash, procure to pay,
+        design to operate, hire to retire, and record to report, all tailored for industry nuances.
+        Power end-to-end processes with the most comprehensive and integrated portfolio of applications
+        with embedded AI capabilities.</p>
+    </div>
+  </div>
+  <span slot="date">Jan 7, 2025</span>
+  <span slot="author">John Ford, Job Title, Company, Inc.</span>
+</UDExReviewItem>
+
 
 describe("ReviewItem", () => {
   it("renders correctly", () => {
@@ -27,47 +56,52 @@ describe("ReviewItem", () => {
   });
 
   it("shows review expander", () => {
-    cy.mount(defaultReviewItem)
+    cy.mount(defaultReviewItem);
     cy.get("#review-item").shadow().find("#reviewExpander").should("be.visible")
   });
 
   it("review expander has correct text before clicking", () => {
-    cy.mount(defaultReviewItem)
-    const SUPPORTING_TEXT_TEST_VALUE = "Read more";
+    cy.mount(defaultReviewItem);
+    const SUPPORTING_TEXT_TEST_VALUE = "Show more";
     cy.get("#review-item").shadow().find("#reviewExpander").should("have.text", SUPPORTING_TEXT_TEST_VALUE)
   });
 
   it("renders rating on top when specified", () => {
-    cy.mount(reviewItemWithTopRating)
+    cy.mount(reviewItemWithTopRating);
     cy.get("#review-item-top").shadow().find(".udex-review-item__rating-top").should("be.visible")
   });
 
+  it("renders custom content", () => {
+    cy.mount(reviewItemWithTCustomContent);
+    cy.get("#review-item-content").find(".truncatable-content").should("be.visible")
+  });
+
   it("renders rating on top on mobile", () => {
-    cy.viewport(640, 640)
-    cy.mount(defaultReviewItem)
+    cy.viewport(640, 640);
+    cy.mount(defaultReviewItem);
     cy.get("#review-item").shadow().find(".udex-review-item").then($container => {
-      const styles = window.getComputedStyle($container[0])
-      expect(styles.flexDirection).eqls("column")
+      const styles = window.getComputedStyle($container[0]);
+      expect(styles.flexDirection).eqls("column");
     })
   });
 
   it("review expander has correct text after clicking on expander", () => {
-    cy.mount(defaultReviewItem)
-    const SUPPORTING_TEXT_TEST_VALUE = "Read less";
+    cy.mount(defaultReviewItem);
+    const SUPPORTING_TEXT_TEST_VALUE = "Show less";
     cy.get("#review-item").shadow().find("#reviewExpander").click().should("have.text", SUPPORTING_TEXT_TEST_VALUE)
   });
 
   it("has maximum rating when the upper limit is exceeded", () => {
     cy.mount(<UDExReviewItem rating={500} text="Lorem ipsum dolor sit amet, consectetur adipiscing elit"></UDExReviewItem>)
     cy.get("[udex-review-item]").shadow().find("udex-rating-indicator").then($rating => {
-      expect($rating.attr("value")).eqls("5")
+      expect($rating.attr("value")).eqls("5");
     })
   });
 
   it("has minimum rating when the lower limit is exceeded", () => {
     cy.mount(<UDExReviewItem rating={-500} text="Lorem ipsum dolor sit amet, consectetur adipiscing elit"></UDExReviewItem>)
     cy.get("[udex-review-item]").shadow().find("udex-rating-indicator").then($rating => {
-      expect($rating.attr("value")).eqls("0")
+      expect($rating.attr("value")).eqls("0");
     })
   });
-})
+})

package/cypress/specs/Tag.cy.tsx

@@ -13,6 +13,7 @@ const readonlyTag = <UDExTag id="tag-readonly" text="Tag text" icon="accept" rea
 const nonselectableTag = <UDExTag id="tag-nonselectable" text="Non selectable" non-selectable></UDExTag>
 const nonselectableIconTag = <UDExTag id="tag-nonselectable-icon" text="Non selectable" icon="decline" non-selectable></UDExTag>
 const linkTag = <UDExTag id="tag-link" text="SAP home page" href="https://sap.com"></UDExTag>
+const nonInteractiveTag = <UDExTag id="tag-nonselectable" text="Non selectable" icon="decline" non-interactive></UDExTag>
 
 describe("Tag", () => {
   it("is rendered", () => {
@@ -115,6 +116,11 @@ describe("Tag", () => {
     cy.get("#tag-nonselectable-icon").shadow().find(".udex-tag__btn-icon").click()
   });
 
+  it("icon is not focusable when non-interactive attribute is set", () => {
+    cy.mount(nonInteractiveTag)
+    cy.get("#tag-nonselectable").shadow().find(".udex-tag__icon").should("have.attr", "mode", "Decorative")
+  }); 
+
   it("tests if tag with link is correctly rendered", () => {
     cy.mount(linkTag)
     cy.get("#tag-link").shadow().find("a").should("be.visible")

package/cypress/support/component-imports.instrumented.ts

@@ -31,6 +31,8 @@ import UDExInputGroup from "../../instrumented/InputGroup.js";
 import UDExLink from "../../instrumented/Link.js";
 import UDExLinkList from "../../instrumented/LinkList.js";
 import UDExLinkListItem from "../../instrumented/LinkListItem.js";
+import UDExList from "../../instrumented/List.js";
+import UDExListGroupHeader from "../../instrumented/ListGroupHeader.js";
 import UDExListItem from "../../instrumented/ListItem.js";
 import UDExMastheadProfileMenu from "../../instrumented/MastheadProfileMenu.js";
 import UDExMessageStrip from "../../instrumented/MessageStrip.js";
@@ -104,7 +106,9 @@ export {
   UDExLink,
   UDExLinkList,
   UDExLinkListItem,
+  UDExList,
   UDExListItem,
+  UDExListGroupHeader,
   UDExMastheadProfileMenu,
   UDExMessageStrip,
   UDExPasswordField,

package/cypress/support/component-imports.src.ts

@@ -31,7 +31,9 @@ import UDExInputGroup from "../../src/InputGroup.js";
 import UDExLink from "../../src/Link.js";
 import UDExLinkList from "../../src/LinkList.js";
 import UDExLinkListItem from "../../src/LinkListItem.js";
-import UDExListItem from "../../src/ListItem.js";
+import UDExList from "../../instrumented/List.js";
+import UDExListGroupHeader from "../../instrumented/ListGroupHeader.js";
+import UDExListItem from "../../instrumented/ListItem.js";
 import UDExMastheadProfileMenu from "../../src/MastheadProfileMenu.js";
 import UDExMessageStrip from "../../src/MessageStrip.js";
 import UDExPasswordField from "../../src/PasswordField.js";
@@ -106,7 +108,9 @@ export {
   UDExLink,
   UDExLinkList,
   UDExLinkListItem,
+  UDExList,
   UDExListItem,
+  UDExListGroupHeader,
   UDExMastheadProfileMenu,
   UDExMessageStrip,
   UDExPasswordField,

package/dist/Avatar.d.ts

@@ -45,6 +45,7 @@ export declare enum UDExAvatarSize {
 declare class UDExAvatar extends UI5Element {
     eventDetails: {
         "click": void;
+        "click-default": void;
     };
     /**
      * Defines the displayed initials.

package/dist/Avatar.js

@@ -128,7 +128,9 @@ let UDExAvatar = UDExAvatar_1 = class UDExAvatar extends UI5Element {
         e.stopPropagation();
         if (this.interactive) {
             this.fireDecoratorEvent("click");
+            return;
         }
+        this.fireDecoratorEvent("click-default");
     }
     /**
      * Returns the effective avatar size.
@@ -224,6 +226,13 @@ UDExAvatar = UDExAvatar_1 = __decorate([
      */
     ,
     event("click", { bubbles: true })
+    /**
+     * Fires when the avatar is clicked.
+     *
+     * @public
+     */
+    ,
+    event("click-default", { bubbles: true })
 ], UDExAvatar);
 UDExAvatar.define();
 export default UDExAvatar;

package/dist/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { ATTENTION_BADGE, AVATAR_TEXT, DISABLED } from \"./generated/i18n/i18n-defaults.js\";\nimport type AvatarColorScheme from \"@ui5/webcomponents/dist/types/AvatarColorScheme.js\";\nimport translate from \"./utils/translate.js\";\n\n// Template\nimport AvatarTemplate from \"./AvatarTemplate.js\";\n\n// Styles\nimport AvatarCss from \"./generated/themes/Avatar.css.js\";\n\nexport enum UDExAvatarColorScheme {\n  Mango = \"Mango\",\n  Red = \"Red\",\n  Raspberry = \"Raspberry\",\n  Pink = \"Pink\",\n  Indigo = \"Indigo\",\n  Blue = \"Blue\",\n  Teal = \"Teal\",\n  Green = \"Green\",\n  Grey = \"Grey\",\n  Transparent = \"Transparent\",\n  Neutral = \"Neutral\",\n}\n\nexport enum UDExAvatarShape {\n  Circle = \"Circle\",\n  Square = \"Square\",\n}\n\nexport enum UDExAvatarSize {\n  XS = \"XS\",\n  S = \"S\",\n  M = \"M\",\n  L = \"L\",\n  XL = \"XL\",\n}\n\nconst UDExToUi5ColorSchemeMap = {\n  Mango: \"Accent1\",\n  Red: \"Accent2\",\n  Raspberry: \"Accent3\",\n  Pink: \"Accent4\",\n  Indigo: \"Accent5\",\n  Blue: \"Accent6\",\n  Transparent: \"Accent6\",\n  Neutral: \"Accent6\",\n  Teal: \"Accent7\",\n  Green: \"Accent8\",\n  Grey: \"Accent10\",\n};\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-avatar</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Avatar.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-avatar\",\n  renderer: jsxRenderer,\n  styles: AvatarCss,\n  template: AvatarTemplate,\n})\n\n/**\n * Fires when the avatar is clicked.\n *\n * @public\n */\n@event(\"click\", { bubbles: true })\n\nclass UDExAvatar extends UI5Element {\n  eventDetails!: {\n    \"click\": void,\n  };\n  /**\n   * Defines the displayed initials.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    initials: string = \"\";\n\n  /**\n   * Defines if the avatar is interactive (focusable and pressable).\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    interactive!: boolean;\n\n  /**\n   * Defines the text alternative of the component.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    accessibleName?: string;\n\n  /**\n   * Defines the design of the component.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property()\n    colorScheme: `${UDExAvatarColorScheme}` = UDExAvatarColorScheme.Blue;\n\n  /**\n   * Defines whether the component is disabled.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines the name of the fallback icon.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    fallbackIcon: string = \"\";\n\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    icon: string = \"\";\n\n  /**\n   * Defines the shape of the component.\n   *\n   * @default \"Circle\"\n   * @public\n   */\n  @property()\n    shape: `${UDExAvatarShape}` = UDExAvatarShape.Circle;\n\n  /**\n   * Defines predefined size of the component.\n   *\n   * @default \"S\"\n   * @public\n   */\n  @property()\n    size: `${UDExAvatarSize}` = UDExAvatarSize.S;\n\n  /**\n   * Defines the displaying attention badge.\n   *\n   * @public\n   * @default false\n   */\n    @property({ type: Boolean })\n      showAttentionBadge!: boolean;\n\n  /**\n   * Receives the desired <img> tag\n   *\n   * @slot image\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    image!: Array<HTMLElement>;\n\n  /**\n   * Defines the optional badge that will be used for visual affordance.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    badge!: Array<HTMLElement>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  onAfterRendering(): void {\n    this.title = this.initials;\n  }\n  handleClick(e: Event) {\n    e.stopPropagation();\n    if (this.interactive) {\n      this.fireDecoratorEvent(\"click\");\n    }\n  }\n\n  /**\n   * Returns the effective avatar size.\n   * @default \"S\"\n   * @private\n   */\n  get effectiveSize(): UDExAvatarSize {\n    // we read the attribute, because the \"size\" property will always have a default value\n    return this.getAttribute(\"size\") as UDExAvatarSize || this.size;\n  }\n\n  /**\n   * Returns the effective background color.\n   * @default \"Blue\"\n   * @private\n   */\n  get effectiveBackgroundColor(): UDExAvatarColorScheme {\n    // we read the attribute, because the \"background-color\" property will always have a default value\n    return this.getAttribute(\"color-scheme\") as UDExAvatarColorScheme || this.colorScheme;\n  }\n\n  get getUDExAvatarColorScheme(): AvatarColorScheme {\n    return UDExToUi5ColorSchemeMap[this.colorScheme] as AvatarColorScheme;\n  }\n\n  get imageSlot(): boolean {\n    return !!this.image.length;\n  }\n\n  get badgeSlot(): boolean {\n    return !!this.badge.length;\n  }\n\n  get udexAvatarClass(): string {\n    let avatarClass = \"udex-avatar\";\n\n    if (this.imageSlot) {\n      avatarClass += \" udex-avatar--with-image\";\n    }\n\n    return avatarClass;\n  }\n\n  get avatarAccessibleName(): string {\n    let accName = `${this.accessibleName ? this.accessibleName : `${translate(UDExAvatar, AVATAR_TEXT)} ${this.initials}`}`;\n    accName += ` ${this.disabled ? translate(UDExAvatar, DISABLED) : \"\"}`;\n    accName += ` ${this.showAttentionBadge ? translate(UDExAvatar, ATTENTION_BADGE) : \"\"}`;\n    return accName;\n  }\n}\n\nUDExAvatar.define();\n\nexport default UDExAvatar;\n"]}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { ATTENTION_BADGE, AVATAR_TEXT, DISABLED } from \"./generated/i18n/i18n-defaults.js\";\nimport type AvatarColorScheme from \"@ui5/webcomponents/dist/types/AvatarColorScheme.js\";\nimport translate from \"./utils/translate.js\";\n\n// Template\nimport AvatarTemplate from \"./AvatarTemplate.js\";\n\n// Styles\nimport AvatarCss from \"./generated/themes/Avatar.css.js\";\n\nexport enum UDExAvatarColorScheme {\n  Mango = \"Mango\",\n  Red = \"Red\",\n  Raspberry = \"Raspberry\",\n  Pink = \"Pink\",\n  Indigo = \"Indigo\",\n  Blue = \"Blue\",\n  Teal = \"Teal\",\n  Green = \"Green\",\n  Grey = \"Grey\",\n  Transparent = \"Transparent\",\n  Neutral = \"Neutral\",\n}\n\nexport enum UDExAvatarShape {\n  Circle = \"Circle\",\n  Square = \"Square\",\n}\n\nexport enum UDExAvatarSize {\n  XS = \"XS\",\n  S = \"S\",\n  M = \"M\",\n  L = \"L\",\n  XL = \"XL\",\n}\n\nconst UDExToUi5ColorSchemeMap = {\n  Mango: \"Accent1\",\n  Red: \"Accent2\",\n  Raspberry: \"Accent3\",\n  Pink: \"Accent4\",\n  Indigo: \"Accent5\",\n  Blue: \"Accent6\",\n  Transparent: \"Accent6\",\n  Neutral: \"Accent6\",\n  Teal: \"Accent7\",\n  Green: \"Accent8\",\n  Grey: \"Accent10\",\n};\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-avatar</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Avatar.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-avatar\",\n  renderer: jsxRenderer,\n  styles: AvatarCss,\n  template: AvatarTemplate,\n})\n\n/**\n * Fires when the avatar is clicked.\n *\n * @public\n */\n@event(\"click\", { bubbles: true })\n/**\n * Fires when the avatar is clicked.\n *\n * @public\n */\n@event(\"click-default\", { bubbles: true })\n\nclass UDExAvatar extends UI5Element {\n  eventDetails!: {\n    \"click\": void,\n    \"click-default\": void,\n  };\n  /**\n   * Defines the displayed initials.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    initials: string = \"\";\n\n  /**\n   * Defines if the avatar is interactive (focusable and pressable).\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    interactive!: boolean;\n\n  /**\n   * Defines the text alternative of the component.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    accessibleName?: string;\n\n  /**\n   * Defines the design of the component.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property()\n    colorScheme: `${UDExAvatarColorScheme}` = UDExAvatarColorScheme.Blue;\n\n  /**\n   * Defines whether the component is disabled.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines the name of the fallback icon.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    fallbackIcon: string = \"\";\n\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    icon: string = \"\";\n\n  /**\n   * Defines the shape of the component.\n   *\n   * @default \"Circle\"\n   * @public\n   */\n  @property()\n    shape: `${UDExAvatarShape}` = UDExAvatarShape.Circle;\n\n  /**\n   * Defines predefined size of the component.\n   *\n   * @default \"S\"\n   * @public\n   */\n  @property()\n    size: `${UDExAvatarSize}` = UDExAvatarSize.S;\n\n  /**\n   * Defines the displaying attention badge.\n   *\n   * @public\n   * @default false\n   */\n    @property({ type: Boolean })\n      showAttentionBadge!: boolean;\n\n  /**\n   * Receives the desired <img> tag\n   *\n   * @slot image\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    image!: Array<HTMLElement>;\n\n  /**\n   * Defines the optional badge that will be used for visual affordance.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    badge!: Array<HTMLElement>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  onAfterRendering(): void {\n    this.title = this.initials;\n  }\n  handleClick(e: Event) {\n    e.stopPropagation();\n    if (this.interactive) {\n      this.fireDecoratorEvent(\"click\");\n      return;\n    }\n    this.fireDecoratorEvent(\"click-default\");\n  }\n\n  /**\n   * Returns the effective avatar size.\n   * @default \"S\"\n   * @private\n   */\n  get effectiveSize(): UDExAvatarSize {\n    // we read the attribute, because the \"size\" property will always have a default value\n    return this.getAttribute(\"size\") as UDExAvatarSize || this.size;\n  }\n\n  /**\n   * Returns the effective background color.\n   * @default \"Blue\"\n   * @private\n   */\n  get effectiveBackgroundColor(): UDExAvatarColorScheme {\n    // we read the attribute, because the \"background-color\" property will always have a default value\n    return this.getAttribute(\"color-scheme\") as UDExAvatarColorScheme || this.colorScheme;\n  }\n\n  get getUDExAvatarColorScheme(): AvatarColorScheme {\n    return UDExToUi5ColorSchemeMap[this.colorScheme] as AvatarColorScheme;\n  }\n\n  get imageSlot(): boolean {\n    return !!this.image.length;\n  }\n\n  get badgeSlot(): boolean {\n    return !!this.badge.length;\n  }\n\n  get udexAvatarClass(): string {\n    let avatarClass = \"udex-avatar\";\n\n    if (this.imageSlot) {\n      avatarClass += \" udex-avatar--with-image\";\n    }\n\n    return avatarClass;\n  }\n\n  get avatarAccessibleName(): string {\n    let accName = `${this.accessibleName ? this.accessibleName : `${translate(UDExAvatar, AVATAR_TEXT)} ${this.initials}`}`;\n    accName += ` ${this.disabled ? translate(UDExAvatar, DISABLED) : \"\"}`;\n    accName += ` ${this.showAttentionBadge ? translate(UDExAvatar, ATTENTION_BADGE) : \"\"}`;\n    return accName;\n  }\n}\n\nUDExAvatar.define();\n\nexport default UDExAvatar;\n"]}

package/dist/FilterMenu.d.ts

@@ -15,6 +15,8 @@ export type initialItemState = {
     id: string;
     selected: boolean;
     indeterminate?: boolean;
+    collapsed?: boolean;
+    _filtered?: boolean;
 };
 type UDExFilterMenuResultClickEventDetail = {
     selectedItems: Array<UDExListItemBase>;

package/dist/FilterMenu.js

@@ -270,6 +270,8 @@ let UDExFilterMenu = UDExFilterMenu_1 = class UDExFilterMenu extends UDExSearcha
                     id: item._id,
                     selected: item.selected,
                     indeterminate: item.indeterminate,
+                    collapsed: item.collapsed,
+                    _filtered: item._filtered,
                 };
                 const subItemsState = item.getItems().map(subItem => ({
                     id: subItem._id,