@sapudex/web-components 2.7.2 → 2.9.0

package/bundle.esm.js

@@ -48,6 +48,8 @@ import "./dist/Footer.js";
 import "./dist/HeroBanner.js";
 import "./dist/InputGroup.js";
 import "./dist/Link.js";
+import "./dist/LinkList.js";
+import "./dist/LinkListItem.js";
 import "./dist/List.js";
 import "./dist/ListGroupHeader.js";
 import "./dist/ListGroupHeaderBase.js";

package/cypress/specs/EventRibbon.cy.tsx

@@ -1,11 +1,12 @@
 import { UDExEventRibbon } from "../support/component-imports.js";
 import { eventLink } from "../fixtures/event-ribbon-links.js";
+import { UDExEventRibbonColorSheme } from "../../src/types/EventRibbon.js";
 
 const defaultEventRibbon = <UDExEventRibbon
   eventText="Get your free all-access pass to a network of latest innovations and insights"
   eventLogo="now"
   eventLink={JSON.stringify(eventLink)}
-  backgroundColorScheme="Blue1">
+  backgroundColorScheme={UDExEventRibbonColorSheme.Blue1}>
 </UDExEventRibbon>
 
 const linkIconEventRibbon = <UDExEventRibbon
@@ -13,7 +14,7 @@ const linkIconEventRibbon = <UDExEventRibbon
   eventText="Get your free all-access pass to a network of latest innovations and insights"
   eventLogo="now"
   eventLink={JSON.stringify(eventLink)}
-  backgroundColorScheme="Blue3">
+  backgroundColorScheme={UDExEventRibbonColorSheme.Blue3}>
 </UDExEventRibbon>
 
 const linkIconMediaEventRibbon = <UDExEventRibbon
@@ -21,7 +22,7 @@ const linkIconMediaEventRibbon = <UDExEventRibbon
   eventText="Get your free all-access pass to a network of latest innovations and insights"
   eventLogo="now"
   eventLink={JSON.stringify(eventLink)}
-  backgroundColorScheme="Blue3">
+  backgroundColorScheme={UDExEventRibbonColorSheme.Blue3}>
 </UDExEventRibbon>
 
 const darkEventRibbon = <UDExEventRibbon 
@@ -29,17 +30,25 @@ const darkEventRibbon = <UDExEventRibbon
   eventText="Get your free all-access pass to a network of latest innovations and insights"
   eventLogo="now"
   eventLink={JSON.stringify(eventLink)}
-  backgroundColorScheme="Raspberry2">
+  backgroundColorScheme={UDExEventRibbonColorSheme.Raspberry2}>
 </UDExEventRibbon>
 
 const imageEventRibbon = <UDExEventRibbon
   eventText="Get your free all-access pass to a network of latest innovations and insights"
   eventLogo="now"
   eventLink={JSON.stringify(eventLink)}
-  backgroundColorScheme="Blue1"
+  backgroundColorScheme={UDExEventRibbonColorSheme.Blue1}
   backgroundImage="https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg">
 </UDExEventRibbon>
 
+const customLogoEventRibbon = <UDExEventRibbon
+  eventText="Get your free all-access pass to a network of latest innovations and insights"
+  customEventLogo="https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg"
+  customEventLogoAltText="SAP Logo"
+  eventLink={JSON.stringify(eventLink)}
+  backgroundColorScheme={UDExEventRibbonColorSheme.Blue1}>
+</UDExEventRibbon>
+
 describe("EventRibbon", () => {
   it("is correctly rendered", () => {
     cy.mount(defaultEventRibbon)
@@ -107,4 +116,14 @@ describe("EventRibbon", () => {
     cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__container").should("have.attr", "href", "#");
     cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__container").should("have.attr", "title", "Learn more");
   });
-})
+
+  it("correctly renders custom logo image", () => {
+    cy.mount(customLogoEventRibbon)
+    cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__logo-img").should("have.attr", "src", "https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg");
+  });
+
+  it("correctly renders custom logo image alt text", () => {
+    cy.mount(customLogoEventRibbon)
+    cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__logo-img").should("have.attr", "alt", "SAP Logo");
+  });
+})

package/cypress/specs/LinkList.cy.tsx

@@ -0,0 +1,49 @@
+import { UDExLinkList, UDExLinkListItem } from "../support/component-imports.js";
+
+const linkList = <UDExLinkList
+  id="udex-link-list"
+  accessibleName="link list accessible name"
+  accessibleRole="link list role">
+  <UDExLinkListItem
+    icon="sap-icon://physical-activity"
+    href="www.sap.com"
+    label="CRM and customer experience"
+    target="_self">
+  </UDExLinkListItem>
+  <UDExLinkListItem
+    icon="sap-icon://ai"
+    href="https://www.sap.com/products/artificial-intelligence/blogs-resources.html"
+    label="AI"
+    target="_self"
+    accessible-role="listitem">
+  </UDExLinkListItem>
+  <UDExLinkListItem
+    icon="sap-icon://business-by-design"
+    href="https://www.sap.com/topics/business-transformation"
+    label="Business transformation"
+    target="_self">
+  </UDExLinkListItem>
+</UDExLinkList>
+
+
+describe("Link List component", () => {
+  beforeEach(() => {
+    cy.mount(linkList)
+  })
+
+  it("is correctly rendered", () => {
+    cy.get("[udex-link-list]").shadow().find(".udex-link-list").should("be.visible");
+  });
+
+  it("renders right amount of items", () => {
+    cy.get("[udex-link-list]").find("udex-link-list-item").should("have.length", 3);
+  });
+
+  it("renders", () => {
+    cy.get("[udex-link-list]").shadow().find(".udex-link-list").should("have.attr", "role", "link list role")
+  });
+
+  it("renders", () => {
+    cy.get("[udex-link-list]").shadow().find(".udex-link-list").should("have.attr", "aria-label", "link list accessible name")
+  });
+});

package/cypress/specs/LinkListItem.cy.tsx

@@ -0,0 +1,102 @@
+import { UDExLinkListItem } from "../support/component-imports.js";
+
+const linkBased = <UDExLinkListItem
+  id="linkBased"
+  href="www.sap.com"
+  label="CRM and customer experience"
+  target="_blank"
+  accessibleName="item accessible name">
+</UDExLinkListItem>
+
+const tileBased = <UDExLinkListItem
+  id="tileBased"
+  icon="sap-icon://physical-activity"
+  href="www.sap.com"
+  label="Supply chain management"
+  target="_blank"
+  type="TileS"
+  accessibleName="item accessible name">
+</UDExLinkListItem>
+
+describe("Link item component", () => {
+  beforeEach(() => {
+    cy.mount(linkBased)
+  })
+
+  it("link is correctly rendered", () => {
+    cy.get("#linkBased").shadow().find("[udex-link]").should("be.visible");
+  });
+
+  it("label is set correctly", () => {
+    cy.get("#linkBased").shadow().find("[udex-link]").should("have.text", "CRM and customer experience");
+  });
+
+  it("icon does not exist for link-based item", () => {
+    cy.get("#linkBased").shadow().find("[ui5-icon]").should("not.exist");
+  });
+
+  it("href attribute is set correctly", () => {
+    cy.get("#linkBased").shadow().find("[udex-link]").should("have.attr", "href", "www.sap.com");
+  });
+
+  it("accessibleName attribute is set correctly", () => {
+    cy.get("#linkBased").shadow().find("[udex-link]").should("have.attr", "accessible-name", "item accessible name");
+  });
+
+  it("target attribute is set correctly", () => {
+    cy.get("#linkBased").shadow().find("[udex-link]").should("have.attr", "target", "_blank");
+  });
+
+  it("click item emits \"item-click\" event", () => {
+    const stub = cy.stub();
+    cy.get("#linkBased").then($el => {
+      $el.get(0).addEventListener("item-click", stub);
+    });
+    cy.get("#linkBased").shadow().find("[udex-link]").click()
+      .then(() => {
+        expect(stub).to.have.been.called;
+      });
+  });
+
+  it("tests the \"item-click\" event is prevented when prevent default is called", () => {
+    cy.get("#linkBased").shadow().find("[udex-link]")
+      .then($link => {
+        $link.get(0).addEventListener("item-click", event => {
+          event.preventDefault();
+        });
+      });
+
+    cy.get("#linkBased").shadow().find("[udex-link]").click();
+    cy.url().should("not.include", "www.sap.com");
+  });
+});
+
+describe("Tile item component", () => {
+  beforeEach(() => {
+    cy.mount(tileBased)
+  })
+
+  it("tile is correctly rendered", () => {
+    cy.get("#tileBased").shadow().find("[udex-tile]").should("be.visible");
+  });
+
+  it("label is set correctly", () => {
+    cy.get("#tileBased").shadow().find("[udex-tile]").should("have.text", "Supply chain management");
+  });
+
+  it("icon is set correctly", () => {
+    cy.get("#tileBased").shadow().find("[ui5-icon]").should("exist");
+  });
+
+  it("href attribute is set correctly", () => {
+    cy.get("#tileBased").shadow().find("[udex-tile]").should("have.attr", "href", "www.sap.com");
+  });
+
+  it("accessibleName attribute is set correctly", () => {
+    cy.get("#tileBased").shadow().find("[udex-tile]").should("have.attr", "accessible-name", "item accessible name");
+  });
+
+  it("target attribute is set correctly", () => {
+    cy.get("#tileBased").shadow().find("[udex-tile]").should("have.attr", "target", "_blank");
+  });
+});

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

@@ -37,6 +37,8 @@ import UDExTableRow from "../../instrumented/TableRow.js";
 import UDExTableGroupRow from "../../instrumented/TableGroupRow.js";
 import UDExTableCell from "../../instrumented/TableCell.js";
 import UDExLink from "../../instrumented/Link.js";
+import UDExLinkList from "../../instrumented/LinkList.js";
+import UDExLinkListItem from "../../instrumented/LinkListItem.js";
 import UDExRatingIndicator from "../../instrumented/RatingIndicator.js";
 import UDExSelectBoxSelectAll from "../../instrumented/SelectBoxSelectAll.js";
 import UDExSelectBoxGroupHeader from "../../instrumented/SelectBoxGroupHeader.js";
@@ -61,6 +63,8 @@ export {
   UDExEventRibbon,
   UDExFooter,
   UDExLink,
+  UDExLinkList,
+  UDExLinkListItem,
   UDExListItem,
   UDExPhoneNumberField,
   UDExRatingBar,

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

@@ -37,6 +37,8 @@ import UDExTableRow from "../../src/TableRow.js";
 import UDExTableGroupRow from "../../src/TableGroupRow.js";
 import UDExTableCell from "../../src/TableCell.js";
 import UDExLink from "../../src/Link.js";
+import UDExLinkList from "../../src/LinkList.js";
+import UDExLinkListItem from "../../src/LinkListItem.js";
 import UDExRatingIndicator from "../../src/RatingIndicator.js";
 import UDExSelectBoxSelectAll from "../../src/SelectBoxSelectAll.js";
 import UDExSelectBoxGroupHeader from "../../src/SelectBoxGroupHeader.js";
@@ -61,6 +63,8 @@ export {
   UDExEventRibbon,
   UDExFooter,
   UDExLink,
+  UDExLinkList,
+  UDExLinkListItem,
   UDExListItem,
   UDExPhoneNumberField,
   UDExRatingBar,

package/dist/EventRibbon.d.ts

@@ -22,7 +22,21 @@ import "@ui5/webcomponents-icons/media-play.js";
  */
 declare class UDExEventRibbon extends UI5Element {
     /**
-     * Defines the text of the event logo.
+     * Defines the custom event logo image.
+     *
+     * @default ""
+     * @public
+     */
+    customEventLogo?: string;
+    /**
+     * Defines the alt text of the custom event logo image.
+     *
+     * @default ""
+     * @public
+     */
+    customEventLogoAltText?: string;
+    /**
+     * Defines the event logo image.
      *
      * @default ""
      * @public

package/dist/EventRibbon.js

@@ -62,7 +62,9 @@ let UDExEventRibbon = class UDExEventRibbon extends UI5Element {
         const backgroundColorHover = `var(--udex-event-ribbon-${this.mode}-${backgroundColorLowercase}-hover-background-color)`;
         this.style.setProperty("--udex-event-ribbon-background-color", backgroundColor);
         this.style.setProperty("--udex-event-ribbon-hover-background-color", backgroundColorHover);
-        this.style.setProperty("--udex-event-ribbon-background-image", `url("${this.backgroundImage}")`);
+        if (this.backgroundImage) {
+            this.style.setProperty("--udex-event-ribbon-background-image", `url("${this.backgroundImage}")`);
+        }
     }
     handleKeyDown(e) {
         if (isSpace(e) || isEnter(e)) {
@@ -71,12 +73,18 @@ let UDExEventRibbon = class UDExEventRibbon extends UI5Element {
         }
     }
     get eventLogoAlt() {
-        return eventLogoText[this.eventLogo];
+        return this.customEventLogoAltText || eventLogoText[this.eventLogo];
     }
     get eventLogoPath() {
-        return `https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/event-ribbon-logo-${this.eventLogo}.svg`;
+        return this.customEventLogo || `https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/event-ribbon-logo-${this.eventLogo}.svg`;
     }
 };
+__decorate([
+    property({ type: String })
+], UDExEventRibbon.prototype, "customEventLogo", void 0);
+__decorate([
+    property({ type: String })
+], UDExEventRibbon.prototype, "customEventLogoAltText", void 0);
 __decorate([
     property({ type: String })
 ], UDExEventRibbon.prototype, "eventLogo", void 0);

package/dist/EventRibbon.js.map

@@ -1 +1 @@
-{"version":3,"file":"EventRibbon.js","sourceRoot":"","sources":["../src/EventRibbon.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type {\n  UDExEventRibbonColorSheme, UDExEventRibbonLink, UDExEventRibbonIcon, UDExEventRibbonLogo,\n} from \"./types/EventRibbon.js\";\nimport { eventLogoText, UDExEventRibbonMode } from \"./types/EventRibbon.js\";\nimport \"@ui5/webcomponents-icons/add-calendar.js\";\nimport \"@ui5/webcomponents-icons/media-play.js\";\nimport EventRibbonTemplate from \"./EventRibbonTemplate.js\";\n\n// Styles\nimport EventRibbonCss from \"./generated/themes/EventRibbon.css.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.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-event-ribbon</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/EventRibbon.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-event-ribbon\",\n  renderer: jsxRenderer,\n  styles: EventRibbonCss,\n  template: EventRibbonTemplate,\n})\n\nclass UDExEventRibbon extends UI5Element {\n  /**\n   * Defines the text of the event logo.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    eventLogo!: `${UDExEventRibbonLogo}`;\n\n  /**\n   * Defines the link details of the event ribbon.\n   *\n   * @default \"{}\"\n   * @public\n   */\n  @property({ type: String })\n    eventLink: string = \"{}\";\n\n  /**\n   * Defines the icon displayed next to the link.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    eventLinkIcon!: `${UDExEventRibbonIcon}`;\n\n  /**\n   * Defines the text displayed in event ribbon.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    eventText!: string;\n\n  /**\n   * Defines whether event-ribbon uses dark or light theme.\n   *\n   * @default \"light\"\n   * @public\n   */\n  @property({ type: String })\n    mode: `${UDExEventRibbonMode}` = UDExEventRibbonMode.light;\n\n  /**\n   * Defines the solid background color.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property({ type: String })\n    backgroundColorScheme!: UDExEventRibbonColorSheme;\n\n  /**\n   * Allows control over the background image source.\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundImage?: string;\n\n  _eventLink!: UDExEventRibbonLink;\n\n  onBeforeRendering(): void {\n    this._eventLink = JSON.parse(this.eventLink);\n  }\n\n  onAfterRendering(): void {\n    this.applyColorScheme();\n  }\n\n  applyColorScheme(): void {\n    const backgroundColorLowercase = this.backgroundColorScheme.toLowerCase();\n    const backgroundColor: string = `var(--udex-event-ribbon-${this.mode}-${backgroundColorLowercase}-default-background-color)`;\n    const backgroundColorHover: string = `var(--udex-event-ribbon-${this.mode}-${backgroundColorLowercase}-hover-background-color)`;\n\n    this.style.setProperty(\"--udex-event-ribbon-background-color\", backgroundColor);\n    this.style.setProperty(\"--udex-event-ribbon-hover-background-color\", backgroundColorHover);\n\n    this.style.setProperty(\"--udex-event-ribbon-background-image\", `url(\"${this.backgroundImage}\")`);\n  }\n\n  handleKeyDown(e: KeyboardEvent): void {\n    if (isSpace(e) || isEnter(e)) {\n      e.preventDefault();\n      this.shadowRoot!.querySelector(\"a\")?.click();\n    }\n  }\n\n  get eventLogoAlt(): string {\n    return eventLogoText[this.eventLogo];\n  }\n\n  get eventLogoPath(): string {\n    return `https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/event-ribbon-logo-${this.eventLogo}.svg`;\n  }\n}\n\nUDExEventRibbon.define();\n\nexport default UDExEventRibbon;\n"]}
+{"version":3,"file":"EventRibbon.js","sourceRoot":"","sources":["../src/EventRibbon.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type {\n  UDExEventRibbonColorSheme, UDExEventRibbonLink, UDExEventRibbonIcon, UDExEventRibbonLogo,\n} from \"./types/EventRibbon.js\";\nimport { eventLogoText, UDExEventRibbonMode } from \"./types/EventRibbon.js\";\nimport \"@ui5/webcomponents-icons/add-calendar.js\";\nimport \"@ui5/webcomponents-icons/media-play.js\";\nimport EventRibbonTemplate from \"./EventRibbonTemplate.js\";\n\n// Styles\nimport EventRibbonCss from \"./generated/themes/EventRibbon.css.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.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-event-ribbon</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/EventRibbon.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-event-ribbon\",\n  renderer: jsxRenderer,\n  styles: EventRibbonCss,\n  template: EventRibbonTemplate,\n})\n\nclass UDExEventRibbon extends UI5Element {\n  /**\n   * Defines the custom event logo image.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    customEventLogo?: string;\n\n  /**\n   * Defines the alt text of the custom event logo image.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    customEventLogoAltText?: string;\n\n  /**\n   * Defines the event logo image.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    eventLogo!: `${UDExEventRibbonLogo}`;\n\n  /**\n   * Defines the link details of the event ribbon.\n   *\n   * @default \"{}\"\n   * @public\n   */\n  @property({ type: String })\n    eventLink: string = \"{}\";\n\n  /**\n   * Defines the icon displayed next to the link.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    eventLinkIcon!: `${UDExEventRibbonIcon}`;\n\n  /**\n   * Defines the text displayed in event ribbon.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    eventText!: string;\n\n  /**\n   * Defines whether event-ribbon uses dark or light theme.\n   *\n   * @default \"light\"\n   * @public\n   */\n  @property({ type: String })\n    mode: `${UDExEventRibbonMode}` = UDExEventRibbonMode.light;\n\n  /**\n   * Defines the solid background color.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property({ type: String })\n    backgroundColorScheme!: UDExEventRibbonColorSheme;\n\n  /**\n   * Allows control over the background image source.\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundImage?: string;\n\n  _eventLink!: UDExEventRibbonLink;\n\n  onBeforeRendering(): void {\n    this._eventLink = JSON.parse(this.eventLink);\n  }\n\n  onAfterRendering(): void {\n    this.applyColorScheme();\n  }\n\n  applyColorScheme(): void {\n    const backgroundColorLowercase = this.backgroundColorScheme.toLowerCase();\n    const backgroundColor: string = `var(--udex-event-ribbon-${this.mode}-${backgroundColorLowercase}-default-background-color)`;\n    const backgroundColorHover: string = `var(--udex-event-ribbon-${this.mode}-${backgroundColorLowercase}-hover-background-color)`;\n\n    this.style.setProperty(\"--udex-event-ribbon-background-color\", backgroundColor);\n    this.style.setProperty(\"--udex-event-ribbon-hover-background-color\", backgroundColorHover);\n    if (this.backgroundImage) {\n      this.style.setProperty(\"--udex-event-ribbon-background-image\", `url(\"${this.backgroundImage}\")`);\n    }\n  }\n\n  handleKeyDown(e: KeyboardEvent): void {\n    if (isSpace(e) || isEnter(e)) {\n      e.preventDefault();\n      this.shadowRoot!.querySelector(\"a\")?.click();\n    }\n  }\n\n  get eventLogoAlt(): string {\n    return this.customEventLogoAltText || eventLogoText[this.eventLogo];\n  }\n\n  get eventLogoPath(): string {\n    return this.customEventLogo || `https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/event-ribbon-logo-${this.eventLogo}.svg`;\n  }\n}\n\nUDExEventRibbon.define();\n\nexport default UDExEventRibbon;\n"]}

package/dist/EventRibbonTemplate.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 export default function EventRibbonTemplate() {
+    const rootClass = "udex-event-ribbon";
     const { text, target, url } = this._eventLink;
-    return (_jsxs("a", { onKeyDown: this.handleKeyDown, role: "banner", "aria-label": this.eventText, class: { "udex-event-ribbon__container": true, "udex-event-ribbon__container-with-background-image": this.backgroundImage }, target: target, href: url, title: text, children: [_jsx("div", { class: "udex-event-ribbon__logo", children: _jsx("img", { src: this.eventLogoPath, alt: this.eventLogoAlt }) }), this.eventText && _jsx("p", { class: "udex-event-ribbon__text", children: this.eventText }), _jsxs("div", { class: "udex-event-ribbon__link-container", children: [this.eventLinkIcon && _jsx(Icon, { name: this.eventLinkIcon }), _jsx("span", { children: text })] })] }));
+    return (_jsxs("a", { onKeyDown: this.handleKeyDown, role: "banner", "aria-label": this.eventText, class: {
+            [`${rootClass}__container`]: true,
+            [`${rootClass}__container-with-background-image`]: this.backgroundImage
+        }, target: target, href: url, title: text, children: [_jsx("div", { class: `${rootClass}__logo`, children: _jsx("img", { class: `${rootClass}__logo-img`, src: this.eventLogoPath, alt: this.eventLogoAlt }) }), this.eventText && _jsx("p", { class: `${rootClass}__text`, children: this.eventText }), _jsxs("div", { class: `${rootClass}__link-container`, children: [this.eventLinkIcon && _jsx(Icon, { name: this.eventLinkIcon }), _jsx("span", { class: `${rootClass}__link-text`, children: text })] })] }));
 }
 //# sourceMappingURL=EventRibbonTemplate.js.map

package/dist/EventRibbonTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"EventRibbonTemplate.js","sourceRoot":"","sources":["../src/EventRibbonTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AAGnD,MAAM,CAAC,OAAO,UAAU,mBAAmB;IACzC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC;IAC9C,OAAO,CACL,aAAG,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,EAAC,QAAQ,gBAAa,IAAI,CAAC,SAAS,EAAE,KAAK,EAAG,EAAE,8BAA8B,EAAE,IAAI,EAAE,oDAAoD,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,aAC9O,cAAK,KAAK,EAAC,yBAAyB,YAClC,cAAK,GAAG,EAAE,IAAI,CAAC,aAAa,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAG,GACnD,EACL,IAAI,CAAC,SAAS,IAAI,YAAG,KAAK,EAAC,yBAAyB,YAAE,IAAI,CAAC,SAAS,GAAK,EAC1E,eAAK,KAAK,EAAC,mCAAmC,aAC3C,IAAI,CAAC,aAAa,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,aAAa,GAAS,EAC9D,yBAAO,IAAI,GAAQ,IACf,IACJ,CACL,CAAC;AACJ,CAAC","sourcesContent":["import Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport type UDExEventRibbon from \"./EventRibbon.js\";\n\nexport default function EventRibbonTemplate(this: UDExEventRibbon) {\n  const { text, target, url } = this._eventLink;\n  return (\n    <a onKeyDown={this.handleKeyDown} role=\"banner\" aria-label={this.eventText} class= {{ \"udex-event-ribbon__container\": true, \"udex-event-ribbon__container-with-background-image\": this.backgroundImage }} target={target} href={url} title={text}>\n      <div class=\"udex-event-ribbon__logo\">\n        <img src={this.eventLogoPath} alt={this.eventLogoAlt}/>\n      </div>\n      {this.eventText && <p class=\"udex-event-ribbon__text\">{this.eventText}</p>}\n      <div class=\"udex-event-ribbon__link-container\">\n        {this.eventLinkIcon && <Icon name={this.eventLinkIcon}></Icon>}\n        <span>{text}</span>\n      </div>\n    </a>\n  );\n}\n"]}
+{"version":3,"file":"EventRibbonTemplate.js","sourceRoot":"","sources":["../src/EventRibbonTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AAGnD,MAAM,CAAC,OAAO,UAAU,mBAAmB;IACzC,MAAM,SAAS,GAAG,mBAAmB,CAAC;IACtC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC;IAC9C,OAAO,CACL,aACE,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,SAAS,EAC1B,KAAK,EAAE;YACL,CAAC,GAAG,SAAS,aAAa,CAAC,EAAE,IAAI;YACjC,CAAC,GAAG,SAAS,mCAAmC,CAAC,EAAE,IAAI,CAAC,eAAe;SACxE,EACD,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,IAAI,aACX,cAAK,KAAK,EAAE,GAAG,SAAS,QAAQ,YAC9B,cAAK,KAAK,EAAE,GAAG,SAAS,YAAY,EAAE,GAAG,EAAE,IAAI,CAAC,aAAa,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAG,GACpF,EACL,IAAI,CAAC,SAAS,IAAI,YAAG,KAAK,EAAE,GAAG,SAAS,QAAQ,YAAG,IAAI,CAAC,SAAS,GAAK,EACvE,eAAK,KAAK,EAAE,GAAG,SAAS,kBAAkB,aACvC,IAAI,CAAC,aAAa,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,aAAa,GAAS,EAC9D,eAAM,KAAK,EAAE,GAAG,SAAS,aAAa,YAAG,IAAI,GAAQ,IACjD,IACJ,CACL,CAAC;AACJ,CAAC","sourcesContent":["import Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport type UDExEventRibbon from \"./EventRibbon.js\";\n\nexport default function EventRibbonTemplate(this: UDExEventRibbon) {\n  const rootClass = \"udex-event-ribbon\";\n  const { text, target, url } = this._eventLink;\n  return (\n    <a\n      onKeyDown={this.handleKeyDown}\n      role=\"banner\"\n      aria-label={this.eventText}\n      class={{\n        [`${rootClass}__container`]: true,\n        [`${rootClass}__container-with-background-image`]: this.backgroundImage\n      }}\n      target={target}\n      href={url}\n      title={text}>\n      <div class={`${rootClass}__logo`}>\n        <img class={`${rootClass}__logo-img`} src={this.eventLogoPath} alt={this.eventLogoAlt}/>\n      </div>\n      {this.eventText && <p class={`${rootClass}__text`}>{this.eventText}</p>}\n      <div class={`${rootClass}__link-container`}>\n        {this.eventLinkIcon && <Icon name={this.eventLinkIcon}></Icon>}\n        <span class={`${rootClass}__link-text`}>{text}</span>\n      </div>\n    </a>\n  );\n}\n"]}

package/dist/LinkList.d.ts

@@ -0,0 +1,58 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type UDExLinkListItem from "./LinkListItem.js";
+export declare enum UDExLinkListType {
+    Link = "Link",
+    TileS = "TileS",
+    TileL = "TileL"
+}
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-link-list</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/LinkList.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-link-list
+ * @public
+ */
+declare class UDExLinkList extends UI5Element {
+    /**
+     * Defines the accessible ARIA name of the component.
+     *
+     * @default undefined
+     * @public
+     */
+    accessibleName?: string;
+    /**
+     * Defines the role of the item.
+     * @public
+     * @default "list"
+     *
+     */
+    accessibleRole: string;
+    /**
+     * Slot for list items.
+     *
+     * @slot items
+     * @public
+     */
+    items: Array<UDExLinkListItem>;
+    /**
+     * Defines the type of the item.
+     *
+     * @default "link-based"
+     * @public
+     */
+    type: `${UDExLinkListType}`;
+    onBeforeRendering(): void;
+    prepareListItems(): void;
+}
+export default UDExLinkList;

package/dist/LinkList.js

@@ -0,0 +1,89 @@
+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 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 LinkListTemplate from "./LinkListTemplate.js";
+// Styles
+import LinkListCss from "./generated/themes/LinkList.css.js";
+export var UDExLinkListType;
+(function (UDExLinkListType) {
+    UDExLinkListType["Link"] = "Link";
+    UDExLinkListType["TileS"] = "TileS";
+    UDExLinkListType["TileL"] = "TileL";
+})(UDExLinkListType || (UDExLinkListType = {}));
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-link-list</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/LinkList.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-link-list
+ * @public
+ */
+let UDExLinkList = class UDExLinkList extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the role of the item.
+         * @public
+         * @default "list"
+         *
+         */
+        this.accessibleRole = "list";
+        /**
+         * Defines the type of the item.
+         *
+         * @default "link-based"
+         * @public
+         */
+        this.type = UDExLinkListType.Link;
+    }
+    onBeforeRendering() {
+        this.prepareListItems();
+    }
+    prepareListItems() {
+        this.items.forEach(item => {
+            item.type = this.type;
+            item._accessibleRole = "listitem";
+        });
+    }
+};
+__decorate([
+    property()
+], UDExLinkList.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], UDExLinkList.prototype, "accessibleRole", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], UDExLinkList.prototype, "items", void 0);
+__decorate([
+    property()
+], UDExLinkList.prototype, "type", void 0);
+UDExLinkList = __decorate([
+    customElement({
+        tag: "udex-link-list",
+        renderer: jsxRenderer,
+        styles: LinkListCss,
+        template: LinkListTemplate,
+    })
+], UDExLinkList);
+UDExLinkList.define();
+export default UDExLinkList;
+//# sourceMappingURL=LinkList.js.map

package/dist/LinkList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkList.js","sourceRoot":"","sources":["../src/LinkList.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAE/E,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AAErD,SAAS;AACT,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAE7D,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IAC1B,iCAAa,CAAA;IACb,mCAAe,CAAA;IACf,mCAAe,CAAA;AACjB,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B;AACD;;;;;;;;;;;;;;;;;GAiBG;AAQH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAUE;;;;;WAKG;QAED,mBAAc,GAAG,MAAM,CAAC;QAW1B;;;;;WAKG;QAED,SAAI,GAA0B,gBAAgB,CAAC,IAAI,CAAC;IAYxD,CAAC;IAVC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACtB,IAAI,CAAC,eAAe,GAAG,UAAU,CAAC;QACpC,CAAC,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AAvCG;IADD,QAAQ,EAAE;oDACe;AASxB;IADD,QAAQ,EAAE;oDACe;AASxB;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;2CACX;AAShC;IADD,QAAQ,EAAE;0CAC2C;AAnClD,YAAY;IAPjB,aAAa,CAAC;QACb,GAAG,EAAE,gBAAgB;QACrB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,WAAW;QACnB,QAAQ,EAAE,gBAAgB;KAC3B,CAAC;GAEI,YAAY,CA+CjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.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 jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type UDExLinkListItem from \"./LinkListItem.js\";\nimport LinkListTemplate from \"./LinkListTemplate.js\";\n\n// Styles\nimport LinkListCss from \"./generated/themes/LinkList.css.js\";\n\nexport enum UDExLinkListType {\n  Link = \"Link\",\n  TileS = \"TileS\",\n  TileL = \"TileL\",\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-link-list</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/LinkList.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-link-list\n * @public\n */\n@customElement({\n  tag: \"udex-link-list\",\n  renderer: jsxRenderer,\n  styles: LinkListCss,\n  template: LinkListTemplate,\n})\n\nclass UDExLinkList extends UI5Element {\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default undefined\n   * @public\n   */\n  @property()\n    accessibleName?: string;\n\n  /**\n   * Defines the role of the item.\n   * @public\n   * @default \"list\"\n   *\n   */\n  @property()\n    accessibleRole = \"list\";\n\n  /**\n   * Slot for list items.\n   *\n   * @slot items\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    items!: Array<UDExLinkListItem>;\n\n  /**\n   * Defines the type of the item.\n   *\n   * @default \"link-based\"\n   * @public\n   */\n  @property()\n    type: `${UDExLinkListType}` = UDExLinkListType.Link;\n\n  onBeforeRendering(): void {\n    this.prepareListItems();\n  }\n\n  prepareListItems(): void {\n    this.items.forEach(item => {\n      item.type = this.type;\n      item._accessibleRole = \"listitem\";\n    });\n  }\n}\n\nUDExLinkList.define();\n\nexport default UDExLinkList;\n"]}

package/dist/LinkListItem.d.ts

@@ -0,0 +1,78 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { UDExLinkListType } from "./LinkList.js";
+import { UDExTarget } from "./types/common.js";
+type UDExListLinkItemClickEventDetail = {
+    originalEvent: Event;
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-link-list-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/LinkListItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-link-list-item
+ * @public
+ */
+declare class UDExLinkListItem extends UI5Element {
+    eventDetails: {
+        "item-click": UDExListLinkItemClickEventDetail;
+    };
+    /**
+     * Defines the href for the item.
+     * @default undefined
+     * @public
+     */
+    href?: string;
+    /**
+     * Defines target for the item
+     * @default "_self"
+     * @public
+     */
+    target: `${UDExTarget}`;
+    /**
+     * Defines the icon, displayed as graphical element within the component before the item's label.
+     *
+     * @default undefined
+     * @public
+     */
+    icon?: string;
+    /**
+     * Defines the type of the item.
+     * @default "link"
+     * @public
+     */
+    type: `${UDExLinkListType}`;
+    /**
+     * Defines the accessible aria-label of the component.
+     *
+     * @default undefined
+     * @public
+     */
+    accessibleName?: string;
+    /**
+     * Defines the role of the item.
+     * @private
+     * @default "listitem"
+     *
+     */
+    _accessibleRole?: string;
+    /**
+     * Defines the label of the item.
+     *
+     * @default undefined
+     * @public
+     */
+    label?: string;
+    fireItemClickEvent(e: CustomEvent): void;
+    get isLink(): boolean;
+}
+export default UDExLinkListItem;