@sapudex/web-components 2.7.2 → 2.8.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/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/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;

package/dist/LinkListItem.js

@@ -0,0 +1,97 @@
+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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { UDExLinkListType } from "./LinkList.js";
+import LinkListItemTemplate from "./LinkListItemTemplate.js";
+import { UDExTarget } from "./types/common.js";
+// Styles
+import LinkListItemCss from "./generated/themes/LinkListItem.css.js";
+/**
+ * @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
+ */
+let UDExLinkListItem = class UDExLinkListItem extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines target for the item
+         * @default "_self"
+         * @public
+         */
+        this.target = UDExTarget._self;
+        /**
+         * Defines the type of the item.
+         * @default "link"
+         * @public
+         */
+        this.type = UDExLinkListType.Link;
+    }
+    fireItemClickEvent(e) {
+        this.fireDecoratorEvent("item-click", {
+            originalEvent: this.isLink ? e : e.detail.originalEvent,
+        });
+    }
+    get isLink() {
+        return this.type === UDExLinkListType.Link;
+    }
+};
+__decorate([
+    property()
+], UDExLinkListItem.prototype, "href", void 0);
+__decorate([
+    property()
+], UDExLinkListItem.prototype, "target", void 0);
+__decorate([
+    property()
+], UDExLinkListItem.prototype, "icon", void 0);
+__decorate([
+    property()
+], UDExLinkListItem.prototype, "type", void 0);
+__decorate([
+    property()
+], UDExLinkListItem.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], UDExLinkListItem.prototype, "_accessibleRole", void 0);
+__decorate([
+    property()
+], UDExLinkListItem.prototype, "label", void 0);
+UDExLinkListItem = __decorate([
+    customElement({
+        tag: "udex-link-list-item",
+        renderer: jsxRenderer,
+        styles: LinkListItemCss,
+        template: LinkListItemTemplate,
+    })
+    /**
+     * Triggered when the user clicks on an item.
+     * @public
+     */
+    ,
+    event("item-click", { bubbles: true })
+], UDExLinkListItem);
+UDExLinkListItem.define();
+export default UDExLinkListItem;
+//# sourceMappingURL=LinkListItem.js.map

package/dist/LinkListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkListItem.js","sourceRoot":"","sources":["../src/LinkListItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,SAAS;AACT,OAAO,eAAe,MAAM,wCAAwC,CAAC;AAMrE;;;;;;;;;;;;;;;;;GAiBG;AAcH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAaE;;;;WAIG;QAED,WAAM,GAAoB,UAAU,CAAC,KAAK,CAAC;QAW7C;;;;WAIG;QAED,SAAI,GAA0B,gBAAgB,CAAC,IAAI,CAAC;IAsCxD,CAAC;IATC,kBAAkB,CAAC,CAAc;QAC/B,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE;YACpC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa;SACxD,CAAC,CAAC;IACL,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,IAAI,KAAK,gBAAgB,CAAC,IAAI,CAAC;IAC7C,CAAC;CACF,CAAA;AA/DG;IADD,QAAQ,EAAE;8CACK;AAQd;IADD,QAAQ,EAAE;gDACkC;AAS3C;IADD,QAAQ,EAAE;8CACK;AAQd;IADD,QAAQ,EAAE;8CAC2C;AASpD;IADD,QAAQ,EAAE;wDACe;AASxB;IADD,QAAQ,EAAE;yDACgB;AASzB;IADD,QAAQ,EAAE;+CACM;AA/Db,gBAAgB;IAbrB,aAAa,CAAC;QACb,GAAG,EAAE,qBAAqB;QAC1B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,eAAe;QACvB,QAAQ,EAAE,oBAAoB;KAC/B,CAAC;IAEF;;;OAGG;;IACF,KAAK,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;GAEjC,gBAAgB,CA0ErB;AAED,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,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 event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { UDExLinkListType } from \"./LinkList.js\";\nimport LinkListItemTemplate from \"./LinkListItemTemplate.js\";\nimport { UDExTarget } from \"./types/common.js\";\n\n// Styles\nimport LinkListItemCss from \"./generated/themes/LinkListItem.css.js\";\n\ntype UDExListLinkItemClickEventDetail = {\n  originalEvent: Event,\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-link-list-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/LinkListItem.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-link-list-item\n * @public\n */\n@customElement({\n  tag: \"udex-link-list-item\",\n  renderer: jsxRenderer,\n  styles: LinkListItemCss,\n  template: LinkListItemTemplate,\n})\n\n/**\n * Triggered when the user clicks on an item.\n * @public\n */\n@event(\"item-click\", { bubbles: true })\n\nclass UDExLinkListItem extends UI5Element {\n  eventDetails!: {\n    \"item-click\": UDExListLinkItemClickEventDetail,\n  };\n\n  /**\n   * Defines the href for the item.\n   * @default undefined\n   * @public\n   */\n  @property()\n    href?: string;\n\n  /**\n   * Defines target for the item\n   * @default \"_self\"\n   * @public\n   */\n  @property()\n    target: `${UDExTarget}` = UDExTarget._self;\n\n  /**\n   * Defines the icon, displayed as graphical element within the component before the item's label.\n   *\n   * @default undefined\n   * @public\n   */\n  @property()\n    icon?: string;\n\n  /**\n   * Defines the type of the item.\n   * @default \"link\"\n   * @public\n   */\n  @property()\n    type: `${UDExLinkListType}` = UDExLinkListType.Link;\n\n  /**\n   * Defines the accessible aria-label 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   * @private\n   * @default \"listitem\"\n   *\n   */\n  @property()\n    _accessibleRole?: string;\n\n  /**\n   * Defines the label of the item.\n   *\n   * @default undefined\n   * @public\n   */\n  @property()\n    label?: string;\n\n  fireItemClickEvent(e: CustomEvent): void {\n    this.fireDecoratorEvent(\"item-click\", {\n      originalEvent: this.isLink ? e : e.detail.originalEvent,\n    });\n  }\n\n  get isLink(): boolean {\n    return this.type === UDExLinkListType.Link;\n  }\n}\n\nUDExLinkListItem.define();\n\nexport default UDExLinkListItem;\n"]}

package/dist/LinkListItemTemplate.d.ts

@@ -0,0 +1,2 @@
+import type LinkListItem from "./LinkListItem.js";
+export default function LinkListItemTemplate(this: LinkListItem): import("@ui5/webcomponents-base").JSX.Element;

package/dist/LinkListItemTemplate.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import { UDExLinkListType } from "./LinkList.js";
+import UDExDivider from "./Divider.js";
+import UDExLink from "./Link.js";
+import UDExTile from "./Tile.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+export default function LinkListItemTemplate() {
+    const isTileL = this.type === UDExLinkListType.TileL;
+    const rootClass = "udex-link-list-item";
+    const tileClass = isTileL ? `${rootClass}__tile-l` : `${rootClass}__tile-s`;
+    const iconClass = isTileL ? `${rootClass}__tile-icon-l` : `${rootClass}__tile-icon-s`;
+    const holderClass = isTileL ? `${rootClass}__tile-holder-l` : `${rootClass}__tile-holder-s`;
+    const textClass = isTileL ? `${rootClass}__tile-text-l` : `${rootClass}__tile-text-s`;
+    return (_jsxs("div", { className: rootClass, role: this._accessibleRole, children: [this.isLink && (_jsxs(_Fragment, { children: [_jsx(UDExLink, { class: `${rootClass}__link`, endIcon: slimArrowRight, accessibleName: this.accessibleName, href: this.href, target: this.target, onClick: this.fireItemClickEvent, children: this.label }), _jsx(UDExDivider, { class: `${rootClass}__divider` })] })), !this.isLink && (_jsx(UDExTile, { class: tileClass, href: this.href, target: this.target, accessibleName: this.accessibleName, "onui5-click": this.fireItemClickEvent, interactive: true, children: _jsxs("div", { class: holderClass, children: [this.icon && _jsx(UI5Icon, { class: iconClass, name: this.icon }), _jsx("span", { class: textClass, children: this.label })] }) }))] }));
+}
+//# sourceMappingURL=LinkListItemTemplate.js.map

package/dist/LinkListItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkListItemTemplate.js","sourceRoot":"","sources":["../src/LinkListItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAG/E,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,gBAAgB,CAAC,KAAK,CAAC;IACrD,MAAM,SAAS,GAAG,qBAAqB,CAAC;IACxC,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,UAAU,CAAC;IAC5E,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,eAAe,CAAC;IACtF,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,iBAAiB,CAAC,CAAC,CAAC,GAAG,SAAS,iBAAiB,CAAC;IAC5F,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,eAAe,CAAC;IAEtF,OAAO,CACL,eACE,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,CAAC,eAA2B,aACrC,IAAI,CAAC,MAAM,IAAI,CACd,8BACE,KAAC,QAAQ,IACP,KAAK,EAAE,GAAG,SAAS,QAAQ,EAC3B,OAAO,EAAE,cAAc,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,kBAAkB,YAC/B,IAAI,CAAC,KAAK,GACF,EACX,KAAC,WAAW,IAAC,KAAK,EAAE,GAAG,SAAS,WAAW,GAAgB,IAC1D,CACJ,EACA,CAAC,IAAI,CAAC,MAAM,IAAI,CACf,KAAC,QAAQ,IACP,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,cAAc,EAAE,IAAI,CAAC,cAAc,iBACtB,IAAI,CAAC,kBAAkB,EACpC,WAAW,kBACX,eAAK,KAAK,EAAE,WAAW,aACpB,IAAI,CAAC,IAAI,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EACpE,eAAM,KAAK,EAAE,SAAS,YAAG,IAAI,CAAC,KAAK,GAAQ,IACvC,GACG,CACZ,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type LinkListItem from \"./LinkListItem.js\";\nimport { UDExLinkListType } from \"./LinkList.js\";\nimport UDExDivider from \"./Divider.js\";\nimport UDExLink from \"./Link.js\";\nimport UDExTile from \"./Tile.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport type { AriaRole } from \"@ui5/webcomponents-base/dist/types.js\";\n\nexport default function LinkListItemTemplate(this: LinkListItem) {\n  const isTileL = this.type === UDExLinkListType.TileL;\n  const rootClass = \"udex-link-list-item\";\n  const tileClass = isTileL ? `${rootClass}__tile-l` : `${rootClass}__tile-s`;\n  const iconClass = isTileL ? `${rootClass}__tile-icon-l` : `${rootClass}__tile-icon-s`;\n  const holderClass = isTileL ? `${rootClass}__tile-holder-l` : `${rootClass}__tile-holder-s`;\n  const textClass = isTileL ? `${rootClass}__tile-text-l` : `${rootClass}__tile-text-s`;\n\n  return (\n    <div\n      className={rootClass}\n      role={this._accessibleRole as AriaRole}>\n      {this.isLink && (\n        <>\n          <UDExLink\n            class={`${rootClass}__link`}\n            endIcon={slimArrowRight}\n            accessibleName={this.accessibleName}\n            href={this.href}\n            target={this.target}\n            onClick={this.fireItemClickEvent}>\n            {this.label}\n          </UDExLink>\n          <UDExDivider class={`${rootClass}__divider`}></UDExDivider>\n        </>\n      )}\n      {!this.isLink && (\n        <UDExTile\n          class={tileClass}\n          href={this.href}\n          target={this.target}\n          accessibleName={this.accessibleName}\n          onui5-click={this.fireItemClickEvent}\n          interactive>\n          <div class={holderClass}>\n            {this.icon && <UI5Icon class={iconClass} name={this.icon}></UI5Icon>}\n            <span class={textClass}>{this.label}</span>\n          </div>\n        </UDExTile>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/LinkListTemplate.d.ts

@@ -0,0 +1,2 @@
+import type LinkList from "./LinkList.js";
+export default function LinkListTemplate(this: LinkList): import("@ui5/webcomponents-base").JSX.Element;

package/dist/LinkListTemplate.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+export default function LinkListTemplate() {
+    return (_jsx("div", { className: "udex-link-list", role: this.accessibleRole, "aria-label": this.accessibleName, children: _jsx("slot", {}) }));
+}
+//# sourceMappingURL=LinkListTemplate.js.map

package/dist/LinkListTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkListTemplate.js","sourceRoot":"","sources":["../src/LinkListTemplate.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACtC,OAAO,CACL,cACE,SAAS,EAAC,gBAAgB,EAC1B,IAAI,EAAE,IAAI,CAAC,cAA0B,gBACzB,IAAI,CAAC,cAAc,YAC/B,gBAAa,GACT,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type LinkList from \"./LinkList.js\";\nimport type { AriaRole } from \"@ui5/webcomponents-base/dist/types.js\";\n\nexport default function LinkListTemplate(this: LinkList) {\n  return (\n    <div\n      className=\"udex-link-list\"\n      role={this.accessibleRole as AriaRole}\n      aria-label={this.accessibleName}>\n      <slot></slot>\n    </div>\n  );\n}\n"]}

package/dist/Tile.d.ts

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 type UDExTileClickEventDetail = {
-    originalEvent: PointerEvent;
+    originalEvent: MouseEvent;
 };
 /**
  * @class
@@ -75,6 +75,6 @@ declare class UDExTile extends UI5Element {
     default: Node;
     onEnterDOM(): void;
     _onkeydown(e: KeyboardEvent): void;
-    _onclick(e: PointerEvent): void;
+    _onclick(e: MouseEvent): void;
 }
 export default UDExTile;

package/dist/Tile.js

@@ -8,11 +8,11 @@ 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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import TileTemplate from "./generated/templates/TileTemplate.lit.js";
+import TileTemplate from "./TileTemplate.js";
 // Styles
 import TileCss from "./generated/themes/Tile.css.js";
 /**
@@ -66,7 +66,7 @@ __decorate([
 UDExTile = __decorate([
     customElement({
         tag: "udex-tile",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: TileCss,
         template: TileTemplate,
     })