@sapudex/web-components 2.7.2 → 2.9.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.7.2",
+  "version": "2.9.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1306,9 +1306,19 @@
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor 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",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "custom-event-logo",
+              "description": "Defines the custom event logo image.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "custom-event-logo-alt-text",
+              "description": "Defines the alt text of the custom event logo image.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
             {
               "name": "event-logo",
-              "description": "Defines the text of the event logo.",
+              "description": "Defines the event logo image.",
               "value": {
                 "type": "\"sapphire\" | \"sapphire-stacked\" | \"connect\" | \"connect-stacked\" | \"teched\" | \"teched-stacked\" | \"now\"",
                 "default": "\"\""
@@ -1357,9 +1367,19 @@
           "events": [],
           "js": {
             "properties": [
+              {
+                "name": "custom-event-logo",
+                "description": "Defines the custom event logo image.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "custom-event-logo-alt-text",
+                "description": "Defines the alt text of the custom event logo image.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "event-logo",
-                "description": "Defines the text of the event logo.",
+                "description": "Defines the event logo image.",
                 "value": {
                   "type": "\"sapphire\" | \"sapphire-stacked\" | \"connect\" | \"connect-stacked\" | \"teched\" | \"teched-stacked\" | \"now\""
                 }
@@ -2652,6 +2672,146 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
+        {
+          "name": "udex-link-list",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor 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\n\n### **Slots:**\n - **default** - Slot for list items.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible ARIA name of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-role",
+              "description": "Defines the role of the item.",
+              "value": { "type": "string", "default": "\"list\"" }
+            },
+            {
+              "name": "type",
+              "description": "Defines the type of the item.",
+              "value": {
+                "type": "\"Link\" | \"TileS\" | \"TileL\"",
+                "default": "\"link-based\""
+              }
+            }
+          ],
+          "slots": [
+            { "name": "default", "description": "Slot for list items." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible ARIA name of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-role",
+                "description": "Defines the role of the item.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "type",
+                "description": "Defines the type of the item.",
+                "value": { "type": "\"Link\" | \"TileS\" | \"TileL\"" }
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "udex-link-list-item",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor 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\n\n### **Events:**\n - **item-click** - Triggered when the user clicks on an item.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "href",
+              "description": "Defines the href for the item.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "target",
+              "description": "Defines target for the item",
+              "value": {
+                "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                "default": "\"_self\""
+              }
+            },
+            {
+              "name": "icon",
+              "description": "Defines the icon, displayed as graphical element within the component before the item's label.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "type",
+              "description": "Defines the type of the item.",
+              "value": {
+                "type": "\"Link\" | \"TileS\" | \"TileL\"",
+                "default": "\"link\""
+              }
+            },
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible aria-label of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "label",
+              "description": "Defines the label of the item.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "events": [
+            {
+              "name": "item-click",
+              "description": "Triggered when the user clicks on an item."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "href",
+                "description": "Defines the href for the item.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "target",
+                "description": "Defines target for the item",
+                "value": {
+                  "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
+                }
+              },
+              {
+                "name": "icon",
+                "description": "Defines the icon, displayed as graphical element within the component before the item's label.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "type",
+                "description": "Defines the type of the item.",
+                "value": { "type": "\"Link\" | \"TileS\" | \"TileL\"" }
+              },
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible aria-label of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "label",
+                "description": "Defines the label of the item.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": [
+              {
+                "name": "item-click",
+                "description": "Triggered when the user clicks on an item."
+              }
+            ]
+          }
+        },
         {
           "name": "udex-list",
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-list</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/List.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Slot for list items.",

package/package.json

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

package/src/EventRibbon.ts

@@ -40,7 +40,25 @@ import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 
 class UDExEventRibbon extends UI5Element {
   /**
-   * Defines the text of the event logo.
+   * Defines the custom event logo image.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    customEventLogo?: string;
+
+  /**
+   * Defines the alt text of the custom event logo image.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    customEventLogoAltText?: string;
+
+  /**
+   * Defines the event logo image.
    *
    * @default ""
    * @public
@@ -118,8 +136,9 @@ class UDExEventRibbon extends UI5Element {
 
     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: KeyboardEvent): void {
@@ -130,11 +149,11 @@ class UDExEventRibbon extends UI5Element {
   }
 
   get eventLogoAlt(): string {
-    return eventLogoText[this.eventLogo];
+    return this.customEventLogoAltText || eventLogoText[this.eventLogo];
   }
 
   get eventLogoPath(): string {
-    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`;
   }
 }
 

package/src/EventRibbonTemplate.tsx

@@ -2,16 +2,27 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import type UDExEventRibbon from "./EventRibbon.js";
 
 export default function EventRibbonTemplate(this: UDExEventRibbon) {
+  const rootClass = "udex-event-ribbon";
   const { text, target, url } = this._eventLink;
   return (
-    <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}>
-      <div class="udex-event-ribbon__logo">
-        <img src={this.eventLogoPath} alt={this.eventLogoAlt}/>
+    <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}>
+      <div class={`${rootClass}__logo`}>
+        <img class={`${rootClass}__logo-img`} src={this.eventLogoPath} alt={this.eventLogoAlt}/>
       </div>
-      {this.eventText && <p class="udex-event-ribbon__text">{this.eventText}</p>}
-      <div class="udex-event-ribbon__link-container">
+      {this.eventText && <p class={`${rootClass}__text`}>{this.eventText}</p>}
+      <div class={`${rootClass}__link-container`}>
         {this.eventLinkIcon && <Icon name={this.eventLinkIcon}></Icon>}
-        <span>{text}</span>
+        <span class={`${rootClass}__link-text`}>{text}</span>
       </div>
     </a>
   );

package/src/LinkList.ts

@@ -0,0 +1,93 @@
+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 type UDExLinkListItem from "./LinkListItem.js";
+import LinkListTemplate from "./LinkListTemplate.js";
+
+// Styles
+import LinkListCss from "./generated/themes/LinkList.css.js";
+
+export 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
+ */
+@customElement({
+  tag: "udex-link-list",
+  renderer: jsxRenderer,
+  styles: LinkListCss,
+  template: LinkListTemplate,
+})
+
+class UDExLinkList extends UI5Element {
+  /**
+   * Defines the accessible ARIA name of the component.
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    accessibleName?: string;
+
+  /**
+   * Defines the role of the item.
+   * @public
+   * @default "list"
+   *
+   */
+  @property()
+    accessibleRole = "list";
+
+  /**
+   * Slot for list items.
+   *
+   * @slot items
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true })
+    items!: Array<UDExLinkListItem>;
+
+  /**
+   * Defines the type of the item.
+   *
+   * @default "link-based"
+   * @public
+   */
+  @property()
+    type: `${UDExLinkListType}` = UDExLinkListType.Link;
+
+  onBeforeRendering(): void {
+    this.prepareListItems();
+  }
+
+  prepareListItems(): void {
+    this.items.forEach(item => {
+      item.type = this.type;
+      item._accessibleRole = "listitem";
+    });
+  }
+}
+
+UDExLinkList.define();
+
+export default UDExLinkList;

package/src/LinkListItem.ts

@@ -0,0 +1,126 @@
+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";
+
+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
+ */
+@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 })
+
+class UDExLinkListItem extends UI5Element {
+  eventDetails!: {
+    "item-click": UDExListLinkItemClickEventDetail,
+  };
+
+  /**
+   * Defines the href for the item.
+   * @default undefined
+   * @public
+   */
+  @property()
+    href?: string;
+
+  /**
+   * Defines target for the item
+   * @default "_self"
+   * @public
+   */
+  @property()
+    target: `${UDExTarget}` = UDExTarget._self;
+
+  /**
+   * Defines the icon, displayed as graphical element within the component before the item's label.
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    icon?: string;
+
+  /**
+   * Defines the type of the item.
+   * @default "link"
+   * @public
+   */
+  @property()
+    type: `${UDExLinkListType}` = UDExLinkListType.Link;
+
+  /**
+   * Defines the accessible aria-label of the component.
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    accessibleName?: string;
+
+  /**
+   * Defines the role of the item.
+   * @private
+   * @default "listitem"
+   *
+   */
+  @property()
+    _accessibleRole?: string;
+
+  /**
+   * Defines the label of the item.
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    label?: string;
+
+  fireItemClickEvent(e: CustomEvent): void {
+    this.fireDecoratorEvent("item-click", {
+      originalEvent: this.isLink ? e : e.detail.originalEvent,
+    });
+  }
+
+  get isLink(): boolean {
+    return this.type === UDExLinkListType.Link;
+  }
+}
+
+UDExLinkListItem.define();
+
+export default UDExLinkListItem;

package/src/LinkListItemTemplate.tsx

@@ -0,0 +1,52 @@
+import type LinkListItem from "./LinkListItem.js";
+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";
+import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
+
+export default function LinkListItemTemplate(this: LinkListItem) {
+  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 (
+    <div
+      className={rootClass}
+      role={this._accessibleRole as AriaRole}>
+      {this.isLink && (
+        <>
+          <UDExLink
+            class={`${rootClass}__link`}
+            endIcon={slimArrowRight}
+            accessibleName={this.accessibleName}
+            href={this.href}
+            target={this.target}
+            onClick={this.fireItemClickEvent}>
+            {this.label}
+          </UDExLink>
+          <UDExDivider class={`${rootClass}__divider`}></UDExDivider>
+        </>
+      )}
+      {!this.isLink && (
+        <UDExTile
+          class={tileClass}
+          href={this.href}
+          target={this.target}
+          accessibleName={this.accessibleName}
+          onui5-click={this.fireItemClickEvent}
+          interactive>
+          <div class={holderClass}>
+            {this.icon && <UI5Icon class={iconClass} name={this.icon}></UI5Icon>}
+            <span class={textClass}>{this.label}</span>
+          </div>
+        </UDExTile>
+      )}
+    </div>
+  );
+}

package/src/LinkListTemplate.tsx

@@ -0,0 +1,13 @@
+import type LinkList from "./LinkList.js";
+import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
+
+export default function LinkListTemplate(this: LinkList) {
+  return (
+    <div
+      className="udex-link-list"
+      role={this.accessibleRole as AriaRole}
+      aria-label={this.accessibleName}>
+      <slot></slot>
+    </div>
+  );
+}

package/src/Tile.ts

@@ -2,12 +2,12 @@ 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";
@@ -15,7 +15,7 @@ import TileCss from "./generated/themes/Tile.css.js";
 type AnchorNode = HTMLAnchorElement | undefined | null;
 
 type UDExTileClickEventDetail = {
-  originalEvent: PointerEvent,
+  originalEvent: MouseEvent,
 }
 /**
  * @class
@@ -27,7 +27,7 @@ type UDExTileClickEventDetail = {
  */
 @customElement({
   tag: "udex-tile",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: TileCss,
   template: TileTemplate,
 })
@@ -128,7 +128,7 @@ class UDExTile extends UI5Element {
     }
   }
 
-  _onclick(e: PointerEvent) {
+  _onclick(e: MouseEvent) {
     e.stopImmediatePropagation();
 
     if (this.interactive) {

package/src/TileTemplate.tsx

@@ -0,0 +1,31 @@
+import type Tile from "./Tile.js";
+
+export default function TileTemplate(this: Tile) {
+  const rootClass = "udex-tile";
+  const part = "tile";
+  return (
+    this.interactive ? (
+      <>
+        <span className="hidden" id="tileDescription">{this.accessibleName}</span>
+        <a
+          className={rootClass}
+          part={part}
+          href={this.href}
+          target={this.target}
+          role="link"
+          aria-describedby="tileDescription"
+          onKeyDown={this._onkeydown}
+          onClick={this._onclick}>
+          <slot></slot>
+        </a>
+      </>
+    ) : (
+      <div
+        className={rootClass}
+        part={part}
+        onClick={this._onclick}>
+        <slot></slot>
+      </div>
+    )
+  );
+}