@sapudex/web-components 2.20.1 → 2.21.0

package/bundle.esm.js

@@ -45,6 +45,8 @@ import "./dist/FilterMenu.js";
 import "./dist/FilterMenuGroupHeader.js";
 import "./dist/FilterMenuItem.js";
 import "./dist/FilterMenuSelectAll.js";
+import "./dist/Feed.js";
+import "./dist/FeedItem.js";
 import "./dist/Footer.js";
 import "./dist/HeroBanner.js";
 import "./dist/ImageGridTicker.js";

package/cypress/specs/Feed.cy.tsx

@@ -0,0 +1,72 @@
+import { UDExFeed } from "../support/component-imports.js";
+
+const iconName = "add";
+const imageLabel = "image label";
+const imageUrl = "test.com";
+const header = "Feed header";
+const button = "Feed button";
+const buttonDesign = "Tertiary";
+const accessibleName = "Feed label";
+
+const feed = <UDExFeed icon={iconName} image-label={imageLabel} header={header} button={button} button-design={buttonDesign} accessible-name={accessibleName}></UDExFeed>
+const feedWithImage = <UDExFeed image-url={imageUrl} image-label={imageLabel}></UDExFeed>
+
+describe("Feed", () => {
+  it("renders simple feed", () => {
+    cy.mount(feed)
+    cy.get("[udex-feed]").shadow().find(".udex-feed__container").should("be.visible");
+  });
+
+  it("renders feed with icon", () => {
+    cy.mount(feed)
+    cy.get("[udex-feed]").shadow().find(".udex-feed__pictogram").should("have.attr", "title", imageLabel);
+    cy.get("[udex-feed]").shadow().find("[ui5-icon]").should("have.attr", "name", iconName);
+    cy.get("[udex-feed]").shadow().find("[ui5-icon]").should("have.attr", "accessible-name", imageLabel);
+  });
+
+  it("renders feed with image", () => {
+    cy.mount(feedWithImage)
+    cy.get("[udex-feed]").shadow().find(".udex-feed__icon").should("have.attr", "src", imageUrl);
+    cy.get("[udex-feed]").shadow().find(".udex-feed__icon").should("have.attr", "aria-label", imageLabel);
+  });
+
+  it("renders feed with header", () => {
+    cy.mount(feed)
+    cy.get("[udex-feed]").shadow().find(".udex-feed__header").should("have.text", header);
+  });
+
+  it("renders feed with label", () => {
+    cy.mount(feed)
+    cy.get("[udex-feed]").shadow().find(".udex-feed__container").should("have.attr", "aria-label", accessibleName);
+  });
+});
+
+describe("Feed - button", () => {
+  beforeEach(() => {
+    cy.mount(feed)
+  })
+
+  it("renders feed with button", () => { 
+    cy.get("[udex-feed]").shadow().find(".udex-feed__footer").should("be.visible");
+    cy.get("[udex-feed]").shadow().find("[udex-button]").shadow().find("button").should("have.attr", "aria-label", button);
+  });
+
+  it("renders feed with default desktop size", () => {
+    cy.get("[udex-feed]").shadow().find("[udex-button]").should("have.attr", "size", "Large");
+  });
+
+  it("renders feed with button Tertiary design", () => {
+    cy.get("[udex-feed]").shadow().find("[udex-button]").should("have.attr", "design", buttonDesign);
+  });
+
+  it("button click emits \"button-click\" event", () => {
+    const stub = cy.stub();
+    cy.get("[udex-feed]").then($tiles => {
+      $tiles.get(0).addEventListener("button-click", stub);
+    });
+    cy.get("[udex-feed]").shadow().find("[udex-button]").click()
+      .then(() => {
+        expect(stub).to.have.been.called;
+      });
+  });
+});

package/cypress/specs/FeedItem.cy.tsx

@@ -0,0 +1,82 @@
+import { UDExFeedItem, UDExAvatar } from "../support/component-imports.js";
+import { UDExTarget } from "../../src/types/common.js";
+
+const text = "Feed link text";
+const href = "href";
+const target = UDExTarget._self;
+const details = "Additional details";
+const date = new Date().toString();
+const location = "New York, US";
+const icon = "appointment-2";
+const iconAccessibleName = "icon label";
+const accessibleName = "Feed label";
+const avatarInitials = "AB";
+
+const textFeedItem = <UDExFeedItem text={text} href={href} target={target} details={details} accessible-name={accessibleName}></UDExFeedItem>
+const blogFeedItem = <UDExFeedItem text={text} href={href}><UDExAvatar slot="avatar" initials={avatarInitials}></UDExAvatar></UDExFeedItem>
+const eventFeedItem = <UDExFeedItem text={text} href={href} date={date} location={location}></UDExFeedItem>
+const iconFeedItem = <UDExFeedItem text={text} href={href} icon={icon} icon-accessible-name={iconAccessibleName}></UDExFeedItem>
+
+describe("Feed item", () => {
+  it("renders feed item", () => {
+    cy.mount(textFeedItem)
+    cy.get("[udex-feed-item]").shadow().find(".udex-feed-item").should("be.visible");
+  });
+
+  it("renders feed item with details", () => {
+    cy.mount(textFeedItem)
+    cy.get("[udex-feed-item]").shadow().find(".udex-feed-item__content").should("be.visible");
+    cy.get("[udex-feed-item]").shadow().find(".udex-feed-item__details").should("have.text", details);
+  });
+
+  it("renders feed item with link", () => {
+    cy.mount(textFeedItem)
+    cy.get("[udex-feed-item]").shadow().find(".udex-feed-item__content").should("be.visible");
+    cy.get("[udex-feed-item]").shadow().find("[udex-link]").should("have.attr", "href", href);
+    cy.get("[udex-feed-item]").shadow().find("[udex-link]").should("have.attr", "target", target);
+    cy.get("[udex-feed-item]").shadow().find("[udex-link]").should("have.attr", "accessible-name", accessibleName);
+    cy.get("[udex-feed-item]").shadow().find("[udex-link]").should("have.text", text);
+  });
+
+  it("renders feed item with avatar", () => {
+    cy.mount(blogFeedItem)
+    cy.get("[udex-feed-item]").find("[udex-avatar]").should("have.attr", "initials", avatarInitials);
+  });
+
+  it("renders feed item with date", () => {
+    cy.mount(eventFeedItem)
+    const dateElements = date.toLocaleString().split(" ");
+    cy.get("[udex-feed-item]").shadow().find(".udex-feed-item__date").should("have.attr", "aria-label", date);
+    cy.get("[udex-feed-item]").shadow().find(".udex-feed-item__day").should("have.text", dateElements[2]);
+    cy.get("[udex-feed-item]").shadow().find(".udex-feed-item__month").should("have.text", dateElements[1]);
+  });
+
+  it("renders feed item with location", () => {
+    cy.mount(eventFeedItem)
+    cy.get("[udex-feed-item]").shadow().find(".udex-feed-item__content").should("be.visible");
+    cy.get("[udex-feed-item]").shadow().find(".udex-feed-item__location").should("have.text", location);
+  });
+
+  it("renders feed item with icon", () => {
+    cy.mount(iconFeedItem)
+    cy.get("[udex-feed-item]").shadow().find("[ui5-icon]").should("have.attr", "name", icon);
+    cy.get("[udex-feed-item]").shadow().find("[ui5-icon]").should("have.attr", "accessible-name", iconAccessibleName);
+  });
+});
+
+describe("Feed item - link", () => {
+  beforeEach(() => {
+    cy.mount(textFeedItem)
+  });
+
+  it("click item emits \"item-click\" event", () => {
+    const stub = cy.stub();
+    cy.get("[udex-feed-item]").then($el => {
+      $el.get(0).addEventListener("item-click", stub);
+    });
+    cy.get("[udex-feed-item]").shadow().find("[udex-link]").click()
+      .then(() => {
+        expect(stub).to.have.been.called;
+      });
+  });
+});

package/cypress/specs/Footer.cy.tsx

@@ -7,6 +7,9 @@ const chineseLogoUrl = "./stories/footer/chinese-logo.svg";
 const chineseLogoLink = "https://www.sap.cn/index.html";
 const taglineUrl = "./stories/footer/tagline.svg";
 const chineseTaglineUrl = "./stories/footer/chinese-tagline.svg";
+const chineseSecurityNetworkNumber = "Custom number";
+const chineseIcpNumber = "Custom ICP";
+const chineseIcpNumberLink = "https://custom-url.com";
 const url = 'http://test.com';
 
 const defaultFooter = <UDExFooter
@@ -32,6 +35,29 @@ const defaultFooter = <UDExFooter
     <UDExSocialMediaButton slot="customSocialLinks" url={url}></UDExSocialMediaButton>
 </UDExFooter>
 
+const customChineseFooter = <UDExFooter
+  id="footer"
+  logoLink="#test"
+  logoTitle="SAP Title"
+  logoAriaLabel="SAP Homepage"
+  logoUrl='https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg'
+  contactNumbersList='[{"country":"France","number":"400-619-0727"},{"country":"United State","number":"1-800-872-1727"}]'
+  localCountryNumbersLink='#'
+  chatWithUsLink='#'
+  quickLinks={JSON.stringify(quickLinks)}
+  trendingLinks = {JSON.stringify(trendingLinks)}
+  aboutLinks = {JSON.stringify(aboutLinks)}
+  siteInformationLinks = {JSON.stringify(siteInformationLinks)}
+  socialLinks = {JSON.stringify(socialLinks)}
+  contactUsLink='#'
+  tagline-alt={taglineAlt}
+  tagline-url={taglineUrl}
+  chinese-security-network-number={chineseSecurityNetworkNumber}
+  chinese-icp-number={chineseIcpNumber}
+  chinese-icp-number-link={chineseIcpNumberLink}>
+    <UDExSocialMediaButton slot="customSocialLinks" url={url}></UDExSocialMediaButton>
+</UDExFooter>
+
 describe("Footer", () => {
   beforeEach(() => {
     cy.mount(defaultFooter)
@@ -342,8 +368,12 @@ describe("Footer", () => {
     })
   });
 
-  describe("Footer chinese", () => {
+});
+
+describe("Footer chinese", () => {
+  describe("default", () => {
     beforeEach(() => {
+      cy.mount(defaultFooter);
       cy.viewport(1920, 1080);
       setLanguage("zh_cn");
       cy.get("#footer").shadow().as("footer");
@@ -366,4 +396,18 @@ describe("Footer", () => {
       cy.get("@footer").find(".udex-footer__tagline-image-chinese").should("have.attr", "src", chineseTaglineUrl);
     });
   });
+
+  describe("custom", () => {
+    beforeEach(() => {
+      cy.mount(customChineseFooter);
+      cy.viewport(1920, 1080);
+      setLanguage("zh_cn");
+      cy.get("#footer").shadow().as("footer");
+    });
+  
+    it("renders custom chinese icp details", () => {
+      cy.get("@footer").find(".udex-footer__copyright-chinese-text").should("have.text", `${chineseIcpNumber} ${chineseSecurityNetworkNumber}`)
+      cy.get("@footer").find(".udex-footer__copyright-chinese-link").should("have.attr", "href", chineseIcpNumberLink)
+    });
+  });
 });

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

@@ -13,6 +13,8 @@ import UDExContactItem from "../../instrumented/ContactItem.js";
 import UDExCountrySelector from "../../instrumented/CountrySelector.js";
 import UDExDivider from "../../instrumented/Divider.js";
 import UDExEventRibbon from "../../instrumented/EventRibbon.js";
+import UDExFeed from "../../instrumented/Feed.js";
+import UDExFeedItem from "../../instrumented/FeedItem.js";
 import UDExFilterMenu from "../../instrumented/FilterMenu.js";
 import UDExFilterMenuGroupHeader from "../../instrumented/FilterMenuGroupHeader.js";
 import UDExFilterMenuItem from "../../instrumented/FilterMenuItem.js";
@@ -80,6 +82,8 @@ export {
   UDExCountrySelector,
   UDExDivider,
   UDExEventRibbon,
+  UDExFeed,
+  UDExFeedItem,
   UDExFilterMenu,
   UDExFilterMenuGroupHeader,
   UDExFilterMenuItem,

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

@@ -13,6 +13,8 @@ import UDExContactItem from "../../src/ContactItem.js";
 import UDExCountrySelector from "../../src/CountrySelector.js";
 import UDExDivider from "../../src/Divider.js";
 import UDExEventRibbon from "../../src/EventRibbon.js";
+import UDExFeed from "../../src/Feed.js";
+import UDExFeedItem from "../../src/FeedItem.js";
 import UDExFilterMenu from "../../src/FilterMenu.js";
 import UDExFilterMenuGroupHeader from "../../src/FilterMenuGroupHeader.js";
 import UDExFilterMenuItem from "../../src/FilterMenuItem.js";
@@ -80,6 +82,8 @@ export {
   UDExCountrySelector,
   UDExDivider,
   UDExEventRibbon,
+  UDExFeed,
+  UDExFeedItem,
   UDExFilterMenu,
   UDExFilterMenuGroupHeader,
   UDExFilterMenuItem,

package/dist/AssetsVariables.js

@@ -57,6 +57,10 @@ const variablesOverwrite = `
     ${getScopedVarName("--_ui5_input_focus_outline_color")}: var(--sapContent_FocusColor);
   }
 
+  [udex-feed] {
+    ${getScopedVarName("--_ui5_icon_transform_scale")}: none;
+  }
+
   .sapUiSizeCompact,
   .ui5-content-density-compact,
   [data-ui5-compact-size] {

package/dist/AssetsVariables.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetsVariables.js","sourceRoot":"","sources":["../src/AssetsVariables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qDAAqD,CAAC;AACvF,OAAO,0BAA0B,MAAM,uCAAuC,CAAC;AAE/E,MAAM,kBAAkB,GAAG;IACvB,0BAA0B,EAAE;;;;IAI5B,gBAAgB,CAAC,mCAAmC,CAAC;;;IAGrD,gBAAgB,CAAC,2BAA2B,CAAC;;;IAG7C,gBAAgB,CAAC,0BAA0B,CAAC;;;IAG5C,gBAAgB,CAAC,sCAAsC,CAAC;IACxD,gBAAgB,CAAC,kCAAkC,CAAC;;;IAGpD,gBAAgB,CAAC,uBAAuB,CAAC;IACzC,gBAAgB,CAAC,wBAAwB,CAAC;IAC1C,gBAAgB,CAAC,oCAAoC,CAAC;IACtD,gBAAgB,CAAC,oCAAoC,CAAC;IACtD,gBAAgB,CAAC,+BAA+B,CAAC;IACjD,gBAAgB,CAAC,2CAA2C,CAAC;IAC7D,gBAAgB,CAAC,8BAA8B,CAAC;IAChD,gBAAgB,CAAC,+BAA+B,CAAC;IACjD,gBAAgB,CAAC,iCAAiC,CAAC;IACnD,gBAAgB,CAAC,iCAAiC,CAAC;IACnD,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,+BAA+B,CAAC;IACjD,gBAAgB,CAAC,4CAA4C,CAAC;IAC9D,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,wCAAwC,CAAC;IAC1D,gBAAgB,CAAC,uCAAuC,CAAC;IACzD,gBAAgB,CAAC,6CAA6C,CAAC;IAC/D,gBAAgB,CAAC,oDAAoD,CAAC;IACtE,gBAAgB,CAAC,gDAAgD,CAAC;IAClE,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,oCAAoC,CAAC;IACtD,gBAAgB,CAAC,oCAAoC,CAAC;;;;MAIpD,gBAAgB,CAAC,uBAAuB,CAAC;;;;MAIzC,gBAAgB,CAAC,4CAA4C,CAAC;;;;MAI9D,gBAAgB,CAAC,2BAA2B,CAAC;MAC7C,gBAAgB,CAAC,kCAAkC,CAAC;MACpD,gBAAgB,CAAC,kCAAkC,CAAC;;;;;;;MAOpD,gBAAgB,CAAC,uBAAuB,CAAC;MACzC,gBAAgB,CAAC,wBAAwB,CAAC;MAC1C,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,2CAA2C,CAAC;MAC7D,gBAAgB,CAAC,8BAA8B,CAAC;MAChD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,iCAAiC,CAAC;MACnD,gBAAgB,CAAC,uCAAuC,CAAC;MACzD,gBAAgB,CAAC,iCAAiC,CAAC;MACnD,gBAAgB,CAAC,gCAAgC,CAAC;MAClD,gBAAgB,CAAC,gCAAgC,CAAC;MAClD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,oCAAoC,CAAC;;CAE3D,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScope.js\";\nimport getEffectiveScrollbarStyle from \"./utils/getEffectiveScrollbarStyle.js\";\n\nconst variablesOverwrite = `\n  ${getEffectiveScrollbarStyle()}\n  \n  :root {\n  /* Browser Scrollbar */\n  ${getScopedVarName(\"--browser_scrollbar_border_radius\")}: var(--udexRadiusM, 8px);\n\n  /* Tooltip */\n  ${getScopedVarName(\"--_ui5_popover_box_shadow\")}: 0px 0px 0px 1px var(--udexColorGrey4);\n\n  /* Tokenizer */\n  ${getScopedVarName(\"--_ui5_tokenizer_padding\")}: var(--udexSpacer12, 12px);\n\n  /* Carousel */\n  ${getScopedVarName(\"--ui5_carousel_active_dot_background\")}: var(--udexColorBlue8, #0057D2);\n  ${getScopedVarName(\"--ui5_carousel_active_dot_border\")}: 1px solid var(--udexColorBlue8, #0057D2);\n\n  /* Calendar & Date Picker */\n  ${getScopedVarName(\"--_ui5_calendar_width\")}: 371px;\n  ${getScopedVarName(\"--_ui5_calendar_height\")}: auto;\n  ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: var(--udexSpacer8, 8px);\n  ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: var(--udexSpacer8, 8px);\n  ${getScopedVarName(\"--_ui5_calendar_header_height\")}: 42px;\n  ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_width\")}: 42px;\n  ${getScopedVarName(\"--_ui5_day_picker_item_width\")}: 42px;\n  ${getScopedVarName(\"--_ui5_day_picker_item_height\")}: 42px;\n  ${getScopedVarName(\"--_ui5_daypicker_weekname_color\")}: var(--udexColorGrey6, #5B738B);\n  ${getScopedVarName(\"--_ui5_month_picker_item_height\")}: 36px;\n  ${getScopedVarName(\"--_ui5_monthpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n  ${getScopedVarName(\"--_ui5_year_picker_item_height\")}: 36px;\n  ${getScopedVarName(\"--_ui5_yearpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n  ${getScopedVarName(\"--_ui5_daypicker_daynames_container_height\")}: 42px;\n  ${getScopedVarName(\"--_ui5_daypicker_dayname_color\")}: var(--udexColorGrey6, #5B738B);\n  ${getScopedVarName(\"--_ui5_daypicker_item_now_border_color\")}: var(--udexColorPink8, #A100C2);\n  ${getScopedVarName(\"--_ui5_daypicker_item_weeekend_filter\")}: none;\n  ${getScopedVarName(\"--_ui5_daypicker_item_select_between_border\")}: 1px solid var(--udexColorBlue9, #0040B0);\n  ${getScopedVarName(\"--_ui5_calendar_header_middle_button_focus_outline\")}: 1px solid var(--udexColorBlue9, #0040B0);\n  ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_box_shadow\")}: none;\n  ${getScopedVarName(\"--_ui5_calendar_header_padding\")}: 0;\n  ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: 0;\n  ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: 0;\n  \n  /* Avatar */\n  [udex-avatar].dark {\n    ${getScopedVarName(\"--_ui5_avatar_outline\")}: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle)  var(--udexColorNeutralWhite, #FFFFFF);\n  }\n\n  [udex-search] {\n    ${getScopedVarName(\"--_ui5_button_pressed_focused_border_color\")}: transparent;\n  }\n  \n  [udex-upload] {\n    ${getScopedVarName(\"--_ui5_input_focus_offset\")}: 2px;\n    ${getScopedVarName(\"--_ui5_input_focus_border_radius\")}: 0.375rem;\n    ${getScopedVarName(\"--_ui5_input_focus_outline_color\")}: var(--sapContent_FocusColor);\n  }\n\n  .sapUiSizeCompact,\n  .ui5-content-density-compact,\n  [data-ui5-compact-size] {\n    /* Calendar & Date Picker */\n    ${getScopedVarName(\"--_ui5_calendar_width\")}: 371px;\n    ${getScopedVarName(\"--_ui5_calendar_height\")}: auto;\n    ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: var(--udexSpacer8, 8px);\n    ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: var(--udexSpacer8, 8px);\n    ${getScopedVarName(\"--_ui5_calendar_header_height\")}: 42px;\n    ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_width\")}: 42px;\n    ${getScopedVarName(\"--_ui5_day_picker_item_width\")}: 42px;\n    ${getScopedVarName(\"--_ui5_day_picker_item_height\")}: 42px;\n    ${getScopedVarName(\"--_ui5_daypicker_weekname_color\")}: var(--udexColorGrey6, #5B738B);\n    ${getScopedVarName(\"--_ui5_daypicker_item_weeekend_filter\")}: none;\n    ${getScopedVarName(\"--_ui5_month_picker_item_height\")}: 36px;\n    ${getScopedVarName(\"--_ui5_monthpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n    ${getScopedVarName(\"--_ui5_year_picker_item_height\")}: 36px;\n    ${getScopedVarName(\"--_ui5_yearpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n    ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: 0;\n    ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: 0;\n  }\n`;\n\nexport default variablesOverwrite;\n"]}
+{"version":3,"file":"AssetsVariables.js","sourceRoot":"","sources":["../src/AssetsVariables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qDAAqD,CAAC;AACvF,OAAO,0BAA0B,MAAM,uCAAuC,CAAC;AAE/E,MAAM,kBAAkB,GAAG;IACvB,0BAA0B,EAAE;;;;IAI5B,gBAAgB,CAAC,mCAAmC,CAAC;;;IAGrD,gBAAgB,CAAC,2BAA2B,CAAC;;;IAG7C,gBAAgB,CAAC,0BAA0B,CAAC;;;IAG5C,gBAAgB,CAAC,sCAAsC,CAAC;IACxD,gBAAgB,CAAC,kCAAkC,CAAC;;;IAGpD,gBAAgB,CAAC,uBAAuB,CAAC;IACzC,gBAAgB,CAAC,wBAAwB,CAAC;IAC1C,gBAAgB,CAAC,oCAAoC,CAAC;IACtD,gBAAgB,CAAC,oCAAoC,CAAC;IACtD,gBAAgB,CAAC,+BAA+B,CAAC;IACjD,gBAAgB,CAAC,2CAA2C,CAAC;IAC7D,gBAAgB,CAAC,8BAA8B,CAAC;IAChD,gBAAgB,CAAC,+BAA+B,CAAC;IACjD,gBAAgB,CAAC,iCAAiC,CAAC;IACnD,gBAAgB,CAAC,iCAAiC,CAAC;IACnD,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,+BAA+B,CAAC;IACjD,gBAAgB,CAAC,4CAA4C,CAAC;IAC9D,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,wCAAwC,CAAC;IAC1D,gBAAgB,CAAC,uCAAuC,CAAC;IACzD,gBAAgB,CAAC,6CAA6C,CAAC;IAC/D,gBAAgB,CAAC,oDAAoD,CAAC;IACtE,gBAAgB,CAAC,gDAAgD,CAAC;IAClE,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,oCAAoC,CAAC;IACtD,gBAAgB,CAAC,oCAAoC,CAAC;;;;MAIpD,gBAAgB,CAAC,uBAAuB,CAAC;;;;MAIzC,gBAAgB,CAAC,4CAA4C,CAAC;;;;MAI9D,gBAAgB,CAAC,2BAA2B,CAAC;MAC7C,gBAAgB,CAAC,kCAAkC,CAAC;MACpD,gBAAgB,CAAC,kCAAkC,CAAC;;;;MAIpD,gBAAgB,CAAC,6BAA6B,CAAC;;;;;;;MAO/C,gBAAgB,CAAC,uBAAuB,CAAC;MACzC,gBAAgB,CAAC,wBAAwB,CAAC;MAC1C,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,2CAA2C,CAAC;MAC7D,gBAAgB,CAAC,8BAA8B,CAAC;MAChD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,iCAAiC,CAAC;MACnD,gBAAgB,CAAC,uCAAuC,CAAC;MACzD,gBAAgB,CAAC,iCAAiC,CAAC;MACnD,gBAAgB,CAAC,gCAAgC,CAAC;MAClD,gBAAgB,CAAC,gCAAgC,CAAC;MAClD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,oCAAoC,CAAC;;CAE3D,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScope.js\";\nimport getEffectiveScrollbarStyle from \"./utils/getEffectiveScrollbarStyle.js\";\n\nconst variablesOverwrite = `\n  ${getEffectiveScrollbarStyle()}\n  \n  :root {\n  /* Browser Scrollbar */\n  ${getScopedVarName(\"--browser_scrollbar_border_radius\")}: var(--udexRadiusM, 8px);\n\n  /* Tooltip */\n  ${getScopedVarName(\"--_ui5_popover_box_shadow\")}: 0px 0px 0px 1px var(--udexColorGrey4);\n\n  /* Tokenizer */\n  ${getScopedVarName(\"--_ui5_tokenizer_padding\")}: var(--udexSpacer12, 12px);\n\n  /* Carousel */\n  ${getScopedVarName(\"--ui5_carousel_active_dot_background\")}: var(--udexColorBlue8, #0057D2);\n  ${getScopedVarName(\"--ui5_carousel_active_dot_border\")}: 1px solid var(--udexColorBlue8, #0057D2);\n\n  /* Calendar & Date Picker */\n  ${getScopedVarName(\"--_ui5_calendar_width\")}: 371px;\n  ${getScopedVarName(\"--_ui5_calendar_height\")}: auto;\n  ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: var(--udexSpacer8, 8px);\n  ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: var(--udexSpacer8, 8px);\n  ${getScopedVarName(\"--_ui5_calendar_header_height\")}: 42px;\n  ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_width\")}: 42px;\n  ${getScopedVarName(\"--_ui5_day_picker_item_width\")}: 42px;\n  ${getScopedVarName(\"--_ui5_day_picker_item_height\")}: 42px;\n  ${getScopedVarName(\"--_ui5_daypicker_weekname_color\")}: var(--udexColorGrey6, #5B738B);\n  ${getScopedVarName(\"--_ui5_month_picker_item_height\")}: 36px;\n  ${getScopedVarName(\"--_ui5_monthpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n  ${getScopedVarName(\"--_ui5_year_picker_item_height\")}: 36px;\n  ${getScopedVarName(\"--_ui5_yearpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n  ${getScopedVarName(\"--_ui5_daypicker_daynames_container_height\")}: 42px;\n  ${getScopedVarName(\"--_ui5_daypicker_dayname_color\")}: var(--udexColorGrey6, #5B738B);\n  ${getScopedVarName(\"--_ui5_daypicker_item_now_border_color\")}: var(--udexColorPink8, #A100C2);\n  ${getScopedVarName(\"--_ui5_daypicker_item_weeekend_filter\")}: none;\n  ${getScopedVarName(\"--_ui5_daypicker_item_select_between_border\")}: 1px solid var(--udexColorBlue9, #0040B0);\n  ${getScopedVarName(\"--_ui5_calendar_header_middle_button_focus_outline\")}: 1px solid var(--udexColorBlue9, #0040B0);\n  ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_box_shadow\")}: none;\n  ${getScopedVarName(\"--_ui5_calendar_header_padding\")}: 0;\n  ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: 0;\n  ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: 0;\n  \n  /* Avatar */\n  [udex-avatar].dark {\n    ${getScopedVarName(\"--_ui5_avatar_outline\")}: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle)  var(--udexColorNeutralWhite, #FFFFFF);\n  }\n\n  [udex-search] {\n    ${getScopedVarName(\"--_ui5_button_pressed_focused_border_color\")}: transparent;\n  }\n  \n  [udex-upload] {\n    ${getScopedVarName(\"--_ui5_input_focus_offset\")}: 2px;\n    ${getScopedVarName(\"--_ui5_input_focus_border_radius\")}: 0.375rem;\n    ${getScopedVarName(\"--_ui5_input_focus_outline_color\")}: var(--sapContent_FocusColor);\n  }\n\n  [udex-feed] {\n    ${getScopedVarName(\"--_ui5_icon_transform_scale\")}: none;\n  }\n\n  .sapUiSizeCompact,\n  .ui5-content-density-compact,\n  [data-ui5-compact-size] {\n    /* Calendar & Date Picker */\n    ${getScopedVarName(\"--_ui5_calendar_width\")}: 371px;\n    ${getScopedVarName(\"--_ui5_calendar_height\")}: auto;\n    ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: var(--udexSpacer8, 8px);\n    ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: var(--udexSpacer8, 8px);\n    ${getScopedVarName(\"--_ui5_calendar_header_height\")}: 42px;\n    ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_width\")}: 42px;\n    ${getScopedVarName(\"--_ui5_day_picker_item_width\")}: 42px;\n    ${getScopedVarName(\"--_ui5_day_picker_item_height\")}: 42px;\n    ${getScopedVarName(\"--_ui5_daypicker_weekname_color\")}: var(--udexColorGrey6, #5B738B);\n    ${getScopedVarName(\"--_ui5_daypicker_item_weeekend_filter\")}: none;\n    ${getScopedVarName(\"--_ui5_month_picker_item_height\")}: 36px;\n    ${getScopedVarName(\"--_ui5_monthpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n    ${getScopedVarName(\"--_ui5_year_picker_item_height\")}: 36px;\n    ${getScopedVarName(\"--_ui5_yearpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n    ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: 0;\n    ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: 0;\n  }\n`;\n\nexport default variablesOverwrite;\n"]}

package/dist/Feed.d.ts

@@ -0,0 +1,88 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import type UDExFeedItem from "./FeedItem.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-feed</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Feed.js";</code>
+ *
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-feed
+ * @public
+ */
+declare class UDExFeed extends UI5Element {
+    eventDetails: {
+        "button-click": void;
+    };
+    /**
+     * Slot for feed items.
+     *
+     * @slot items
+     * @public
+     */
+    items: Array<UDExFeedItem>;
+    /**
+     * Defines the UI5 icon name in the pictogram section.
+     *
+     * @default ""
+     * @public
+     */
+    icon?: string;
+    /**
+     * Defines the image URL in the pictogram section.
+     *
+     * @default ""
+     * @public
+     */
+    imageUrl?: string;
+    /**
+     * Defines the image aria label and alt in the pictogram section.
+     *
+     * @default ""
+     * @public
+     */
+    imageLabel?: string;
+    /**
+     * Defines the header text of the component.
+     *
+     * @default ""
+     * @public
+     */
+    header?: string;
+    /**
+     * Defines the CTA button label
+     *
+     * @default ""
+     * @public
+     */
+    button?: string;
+    /**
+     * Defines the CTA button design
+     *
+     * @default "UDExButtonDesign.Secondary"
+     * @public
+     */
+    buttonDesign: UDExButtonDesign;
+    /**
+     * Defines the accessible ARIA name of the component.
+     *
+     * @default undefined
+     * @public
+     */
+    accessibleName?: string;
+    get _showPictogram(): boolean;
+    get _showImage(): boolean;
+    get _imageLabel(): string;
+    handleCTAButtonClick(): void;
+}
+export default UDExFeed;

package/dist/Feed.js

@@ -0,0 +1,103 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import FeedItem from "./FeedItem.js";
+import FeedTemplate from "./FeedTemplate.js";
+// Styles
+import FeedCss from "./generated/themes/Feed.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-feed</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Feed.js";</code>
+ *
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-feed
+ * @public
+ */
+let UDExFeed = class UDExFeed extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the CTA button design
+         *
+         * @default "UDExButtonDesign.Secondary"
+         * @public
+         */
+        this.buttonDesign = UDExButtonDesign.Secondary;
+    }
+    get _showPictogram() {
+        return !!this.icon || !!this.imageUrl;
+    }
+    get _showImage() {
+        return !this.icon && !!this.imageUrl;
+    }
+    get _imageLabel() {
+        return this.imageLabel || "";
+    }
+    handleCTAButtonClick() {
+        this.fireDecoratorEvent("button-click");
+    }
+};
+__decorate([
+    slot({ type: HTMLElement, individualSlots: true })
+], UDExFeed.prototype, "items", void 0);
+__decorate([
+    property({ type: String })
+], UDExFeed.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], UDExFeed.prototype, "imageUrl", void 0);
+__decorate([
+    property({ type: String })
+], UDExFeed.prototype, "imageLabel", void 0);
+__decorate([
+    property({ type: String })
+], UDExFeed.prototype, "header", void 0);
+__decorate([
+    property({ type: String })
+], UDExFeed.prototype, "button", void 0);
+__decorate([
+    property()
+], UDExFeed.prototype, "buttonDesign", void 0);
+__decorate([
+    property()
+], UDExFeed.prototype, "accessibleName", void 0);
+UDExFeed = __decorate([
+    customElement({
+        tag: "udex-feed",
+        renderer: jsxRenderer,
+        styles: FeedCss,
+        template: FeedTemplate,
+        dependencies: [FeedItem],
+    })
+    /**
+     * Triggered when the user clicks on the CTA button
+     *
+     * @public
+     */
+    ,
+    event("button-click", { cancelable: true, bubbles: true })
+], UDExFeed);
+UDExFeed.define();
+export default UDExFeed;
+//# sourceMappingURL=Feed.js.map

package/dist/Feed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Feed.js","sourceRoot":"","sources":["../src/Feed.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AACvD,OAAO,QAAQ,MAAM,eAAe,CAAC;AAErC,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAE7C,SAAS;AACT,OAAO,OAAO,MAAM,gCAAgC,CAAC;AAErD;;;;;;;;;;;;;;;;;;GAkBG;AAgBH,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QA0DE;;;;;WAKG;QAED,iBAAY,GAAqB,gBAAgB,CAAC,SAAS,CAAC;IA0BhE,CAAC;IAfC,IAAI,cAAc;QAChB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;IACxC,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;IACvC,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC;IAC/B,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAC1C,CAAC;CACF,CAAA;AAhFG;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC;uCACrB;AAS5B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACX;AASd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACP;AASlB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACL;AASpB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACT;AAShB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACT;AAShB;IADD,QAAQ,EAAE;8CACmD;AAS5D;IADD,QAAQ,EAAE;gDACe;AA1EtB,QAAQ;IAfb,aAAa,CAAC;QACb,GAAG,EAAE,WAAW;QAChB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,OAAO;QACf,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,CAAC,QAAQ,CAAC;KACzB,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,cAAc,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;GAErD,QAAQ,CA2Fb;AAED,QAAQ,CAAC,MAAM,EAAE,CAAC;AAElB,eAAe,QAAQ,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\nimport FeedItem from \"./FeedItem.js\";\nimport type UDExFeedItem from \"./FeedItem.js\";\nimport FeedTemplate from \"./FeedTemplate.js\";\n\n// Styles\nimport FeedCss from \"./generated/themes/Feed.css.js\";\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-feed</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Feed.js\";</code>\n *\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-feed\n * @public\n */\n@customElement({\n  tag: \"udex-feed\",\n  renderer: jsxRenderer,\n  styles: FeedCss,\n  template: FeedTemplate,\n  dependencies: [FeedItem],\n})\n\n/**\n * Triggered when the user clicks on the CTA button\n *\n * @public\n */\n@event(\"button-click\", { cancelable: true, bubbles: true })\n\nclass UDExFeed extends UI5Element {\n  eventDetails!: {\n      \"button-click\": void\n    };\n  /**\n   * Slot for feed items.\n   *\n   * @slot items\n   * @public\n   */\n  @slot({ type: HTMLElement, individualSlots: true })\n    items!: Array<UDExFeedItem>;\n\n  /**\n   * Defines the UI5 icon name in the pictogram section.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    icon?: string;\n\n  /**\n   * Defines the image URL in the pictogram section.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    imageUrl?: string;\n\n  /**\n   * Defines the image aria label and alt in the pictogram section.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    imageLabel?: string;\n\n  /**\n   * Defines the header text of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    header?: string;\n\n  /**\n   * Defines the CTA button label\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    button?: string;\n\n  /**\n   * Defines the CTA button design\n   *\n   * @default \"UDExButtonDesign.Secondary\"\n   * @public\n   */\n  @property()\n    buttonDesign: UDExButtonDesign = UDExButtonDesign.Secondary;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default undefined\n   * @public\n   */\n  @property()\n    accessibleName?: string;\n\n  get _showPictogram(): boolean {\n    return !!this.icon || !!this.imageUrl;\n  }\n\n  get _showImage(): boolean {\n    return !this.icon && !!this.imageUrl;\n  }\n\n  get _imageLabel(): string {\n    return this.imageLabel || \"\";\n  }\n\n  handleCTAButtonClick() {\n    this.fireDecoratorEvent(\"button-click\");\n  }\n}\n\nUDExFeed.define();\n\nexport default UDExFeed;\n"]}

package/dist/FeedItem.d.ts

@@ -0,0 +1,114 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { UDExTarget } from "./types/common.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+type UDExFeedItemClickEventDetail = {
+    originalEvent: Event;
+    item: UDExFeedItem;
+};
+export type FeedDate = {
+    day: string;
+    month: string;
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-feed-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/FeedItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-feed-item
+ * @public
+ */
+declare class UDExFeedItem extends UI5Element {
+    eventDetails: {
+        "item-click": UDExFeedItemClickEventDetail;
+    };
+    /**
+     * Defines the link text
+     *
+     * @default undefined
+     * @public
+     */
+    text?: string;
+    /**
+     * Defines the link text URL
+     *
+     * @default ""
+     * @public
+     */
+    href: string;
+    /**
+     * Defines target for the link
+     *
+     * @default UDExTarget._self
+     * @public
+     */
+    target: UDExTarget;
+    /**
+     * Defines the link text details
+     *
+     * @default undefined
+     * @public
+     */
+    details?: string;
+    /**
+     * Defines the accessible ARIA name of the link.
+     *
+     * @default undefined
+     * @public
+     */
+    accessibleName?: string;
+    /**
+     * Defines the date of the event
+     *
+     * @default undefined
+     * @public
+     */
+    date?: string;
+    /**
+     * Defines the location of the event
+     *
+     * @default undefined
+     * @public
+     */
+    location?: string;
+    /**
+     * Defines the UI5 icon name
+     *
+     * @default undefined
+     * @public
+     */
+    icon?: string;
+    /**
+     * Defines the UI5 icon label
+     *
+     * @default undefined
+     * @public
+     */
+    iconAccessibleName?: string;
+    /**
+     * Receives the avatar
+     *
+     * @slot avatar
+     * @public
+     */
+    avatar: Array<HTMLElement>;
+    static i18nBundle: I18nBundle;
+    get _date(): FeedDate;
+    get _showAvatar(): boolean;
+    get _showIcon(): boolean;
+    get _showDate(): boolean;
+    get locationIconLabel(): string;
+    formatDate(d: string | undefined): FeedDate;
+    handleLinkClick(e: Event): void;
+}
+export default UDExFeedItem;
+export type { UDExFeedItemClickEventDetail };