@sapudex/web-components 2.7.1 → 2.8.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.1",
+  "version": "2.8.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2652,6 +2652,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.1",
+  "version": "2.8.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

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/MastheadMenu.hbs

@@ -21,17 +21,29 @@
 
 {{#*inline "header"}}
     <div class="udex-masthead-menu__header">
-        <udex-masthead-menu-item
-            part="menu-item"
-            exportparts="menu-item"
-            id="category-{{categoryId}}"
-            @click="{{../../handleMenuItemClick}}"
-            url="{{this.url}}"
-            label="{{this.category}}"
-            ?icon-end="{{this.url}}"
-            type="Heading"
-            has-border>
-        </udex-masthead-menu-item>
+        {{#if this.url}}
+            <udex-masthead-menu-item
+                id="category-{{categoryId}}"
+                type="Heading"
+                part="menu-item"
+                exportparts="menu-item"
+                accessible-role="link"
+                @click="{{../../handleMenuItemClick}}"
+                url="{{this.url}}"
+                label="{{this.category}}"
+                icon-end
+                has-border>
+            </udex-masthead-menu-item>
+        {{else}}
+            <udex-masthead-menu-item
+                id="category-{{categoryId}}"
+                type="Heading"
+                part="menu-item"
+                exportparts="menu-item"
+                label="{{this.category}}"
+                has-border>
+            </udex-masthead-menu-item>
+        {{/if}}
     </div>
 {{/inline}}
 
@@ -47,13 +59,14 @@
                 {{else}}
                     <udex-masthead-menu-item
                         part="menu-item"
+                        accessible-role="link"
                         exportparts="menu-item"
+                        exportparts="badge"
                         @click="{{../../../handleMenuItemClick}}"
                         badge="{{this.badge}}"
                         ?external-link="{{this.externalLink}}"
                         url="{{this.url}}"
-                        label="{{this.title}}"
-                        exportparts="badge">
+                        label="{{this.title}}">
                     </udex-masthead-menu-item>
                 {{/if}}
             </li>

package/src/MastheadMobileMenu.hbs

@@ -133,7 +133,7 @@
         </li>
     {{/if}}
     {{#each _categories}}
-        {{#if this.items}}
+        {{#if this.items.length}}
             {{#if this.category}}
                 <li class="udex-masthead-mobile-menu__list-item" role="none">
                     <udex-masthead-menu-item
@@ -164,15 +164,30 @@
                 {{/each}}
             {{/if}}
         {{else}}
-            <udex-masthead-menu-item
-                id="{{@index}}"
-                @click="{{../handleMobileItemEvent}}"
-                label="{{this.category}}"
-                part="menu-item"
-                type="Button"
-                second-level
-                has-border>
-            </udex-masthead-menu-item>
+            <li class="udex-masthead-mobile-menu__list-item" role="none">
+                {{#if this.url}}
+                    <udex-masthead-menu-item
+                        id="{{@index}}"
+                        @click="{{../handleMobileItemEvent}}"
+                        label="{{this.category}}"
+                        url="{{this.url}}"
+                        part="menu-item"
+                        type="Link"
+                        second-level
+                        has-border>
+                    </udex-masthead-menu-item>
+                {{else}}
+                    <udex-masthead-menu-item
+                        id="{{@index}}"
+                        @click="{{../handleMobileItemEvent}}"
+                        label="{{this.category}}"
+                        part="menu-item"
+                        type="Button"
+                        second-level
+                        has-border>
+                    </udex-masthead-menu-item>
+                {{/if}}
+              </li>
         {{/if}}
     {{/each}}
 {{/inline}}

package/src/MastheadMobileMenu.ts

@@ -203,6 +203,7 @@ class UDExMastheadMobileMenu extends UI5Element {
 
   handleRightArrow(e: KeyboardEvent) {
     if (isRight(e)) {
+      e.preventDefault();
       this.handleDirection();
       if (this.isRtlDirection) {
         this.moveToBackWithKeyboard(e);
@@ -214,6 +215,7 @@ class UDExMastheadMobileMenu extends UI5Element {
 
   handleLeftArrow(e: KeyboardEvent) {
     if (isLeft(e)) {
+      e.preventDefault();
       this.handleDirection();
       if (this.isRtlDirection) {
         this.moveToNextLevelWithKeyboard(e);

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>
+    )
+  );
+}