@sapudex/web-components 2.20.1 → 2.21.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.20.1",
+  "version": "2.21.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1534,6 +1534,217 @@
             "events": []
           }
         },
+        {
+          "name": "udex-feed",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-feed</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Feed.js\";</code>\n---\n\n\n### **Events:**\n - **button-click** - Triggered when the user clicks on the CTA button\n\n### **Slots:**\n - **items** - Slot for feed items.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "icon",
+              "description": "Defines the UI5 icon name in the pictogram section.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "image-url",
+              "description": "Defines the image URL in the pictogram section.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "image-label",
+              "description": "Defines the image aria label and alt in the pictogram section.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "header",
+              "description": "Defines the header text of the component.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "button",
+              "description": "Defines the CTA button label",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "button-design",
+              "description": "Defines the CTA button design",
+              "value": {
+                "type": "UDExButtonDesign",
+                "default": "\"UDExButtonDesign.Secondary\""
+              }
+            },
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible ARIA name of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "slots": [{ "name": "items", "description": "Slot for feed items." }],
+          "events": [
+            {
+              "name": "button-click",
+              "description": "Triggered when the user clicks on the CTA button"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "icon",
+                "description": "Defines the UI5 icon name in the pictogram section.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "image-url",
+                "description": "Defines the image URL in the pictogram section.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "image-label",
+                "description": "Defines the image aria label and alt in the pictogram section.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "header",
+                "description": "Defines the header text of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "button",
+                "description": "Defines the CTA button label",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "button-design",
+                "description": "Defines the CTA button design",
+                "value": { "type": "UDExButtonDesign" }
+              },
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible ARIA name of the component.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": [
+              {
+                "name": "button-click",
+                "description": "Triggered when the user clicks on the CTA button"
+              }
+            ]
+          }
+        },
+        {
+          "name": "udex-feed-item",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-feed-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/FeedItem.js\";</code>\n---\n\n\n### **Events:**\n - **item-click** - Fires when item is clicked\n\n### **Slots:**\n - **avatar** - Receives the avatar",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "text",
+              "description": "Defines the link text",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "href",
+              "description": "Defines the link text URL",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "target",
+              "description": "Defines target for the link",
+              "value": { "type": "UDExTarget", "default": "UDExTarget._self" }
+            },
+            {
+              "name": "details",
+              "description": "Defines the link text details",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible ARIA name of the link.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "date",
+              "description": "Defines the date of the event",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "location",
+              "description": "Defines the location of the event",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "icon",
+              "description": "Defines the UI5 icon name",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "icon-accessible-name",
+              "description": "Defines the UI5 icon label",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "slots": [{ "name": "avatar", "description": "Receives the avatar" }],
+          "events": [
+            {
+              "name": "item-click",
+              "description": "Fires when item is clicked"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "text",
+                "description": "Defines the link text",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "href",
+                "description": "Defines the link text URL",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "target",
+                "description": "Defines target for the link",
+                "value": { "type": "UDExTarget" }
+              },
+              {
+                "name": "details",
+                "description": "Defines the link text details",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible ARIA name of the link.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "date",
+                "description": "Defines the date of the event",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "location",
+                "description": "Defines the location of the event",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "icon",
+                "description": "Defines the UI5 icon name",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "icon-accessible-name",
+                "description": "Defines the UI5 icon label",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": [
+              {
+                "name": "item-click",
+                "description": "Fires when item is clicked"
+              }
+            ]
+          }
+        },
         {
           "name": "udex-filter-menu",
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-filter-menu</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExFilterMenu.js\";</code>\n---\n\n\n### **Events:**\n - **reset-click** - Fired event when the user click on a reset button on the footer.\n- **result-click** - Fired event when the user click on a result button on the footer.\n- **select-all** - Fired event when the user click on Select All header item.\n- **before-open** - Fired before the dropdown pane is opened.\n- **after-open** - Fired after the dropdown pane is opened.\n- **before-close** - Fired before the dropdown pane is closed.\n- **after-close** - Fired after the dropdown pane is closed.\n- **selection-change** - \n- **submit-search** - Fired event when the user clicks on the submitted icon in the search.\n- **reset-search** - Fired event when the user clicks on the reset button in the search.\n- **change-search** - Fired event when the user submitted the value in the search.\n- **first-icon-click** - Fired event when the user clicks on the first icon.\n- **second-icon-click** - Fired event when the user clicks on the second icon.\n\n### **Methods:**\n - **close(): _void_** - Close the dropdown.\n- **resetSearch()** - Reset the search value.\n\n### **Slots:**\n - **default** - Slot for items.",
@@ -2532,6 +2743,16 @@
               "name": "chinese-icp-number-link",
               "description": "Defines a href for the chinese ICP Number link",
               "value": { "type": "string", "default": "chineseICPDefaultLink" }
+            },
+            {
+              "name": "chinese-icp-number",
+              "description": "Defines text for the chinese ICP Number",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "chinese-security-network-number",
+              "description": "Defines text for the chinese security network number",
+              "value": { "type": "string" }
             }
           ],
           "slots": [
@@ -2711,6 +2932,16 @@
                 "name": "chinese-icp-number-link",
                 "description": "Defines a href for the chinese ICP Number link",
                 "value": { "type": "string" }
+              },
+              {
+                "name": "chinese-icp-number",
+                "description": "Defines text for the chinese ICP Number",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "chinese-security-network-number",
+                "description": "Defines text for the chinese security network number",
+                "value": { "type": "string" }
               }
             ],
             "events": [

package/package.json

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

package/src/AssetsVariables.ts

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

package/src/Feed.ts

@@ -0,0 +1,144 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import FeedItem from "./FeedItem.js";
+import type UDExFeedItem from "./FeedItem.js";
+import FeedTemplate from "./FeedTemplate.js";
+
+// Styles
+import FeedCss from "./generated/themes/Feed.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-feed</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Feed.js";</code>
+ *
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-feed
+ * @public
+ */
+@customElement({
+  tag: "udex-feed",
+  renderer: jsxRenderer,
+  styles: FeedCss,
+  template: FeedTemplate,
+  dependencies: [FeedItem],
+})
+
+/**
+ * Triggered when the user clicks on the CTA button
+ *
+ * @public
+ */
+@event("button-click", { cancelable: true, bubbles: true })
+
+class UDExFeed extends UI5Element {
+  eventDetails!: {
+      "button-click": void
+    };
+  /**
+   * Slot for feed items.
+   *
+   * @slot items
+   * @public
+   */
+  @slot({ type: HTMLElement, individualSlots: true })
+    items!: Array<UDExFeedItem>;
+
+  /**
+   * Defines the UI5 icon name in the pictogram section.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    icon?: string;
+
+  /**
+   * Defines the image URL in the pictogram section.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    imageUrl?: string;
+
+  /**
+   * Defines the image aria label and alt in the pictogram section.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    imageLabel?: string;
+
+  /**
+   * Defines the header text of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    header?: string;
+
+  /**
+   * Defines the CTA button label
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    button?: string;
+
+  /**
+   * Defines the CTA button design
+   *
+   * @default "UDExButtonDesign.Secondary"
+   * @public
+   */
+  @property()
+    buttonDesign: UDExButtonDesign = UDExButtonDesign.Secondary;
+
+  /**
+   * Defines the accessible ARIA name of the component.
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    accessibleName?: string;
+
+  get _showPictogram(): boolean {
+    return !!this.icon || !!this.imageUrl;
+  }
+
+  get _showImage(): boolean {
+    return !this.icon && !!this.imageUrl;
+  }
+
+  get _imageLabel(): string {
+    return this.imageLabel || "";
+  }
+
+  handleCTAButtonClick() {
+    this.fireDecoratorEvent("button-click");
+  }
+}
+
+UDExFeed.define();
+
+export default UDExFeed;

package/src/FeedItem.ts

@@ -0,0 +1,198 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { UDExTarget } from "./types/common.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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import FeedItemTemplate from "./FeedItemTemplate.js";
+import { LOCATION } from "./generated/i18n/i18n-defaults.js";
+
+// Styles
+import FeedItemCss from "./generated/themes/FeedItem.css.js";
+
+type UDExFeedItemClickEventDetail = {
+  originalEvent: Event,
+  item: UDExFeedItem,
+}
+
+export type FeedDate = {
+  day: string;
+  month: string;
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-feed-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/FeedItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-feed-item
+ * @public
+ */
+@customElement({
+  tag: "udex-feed-item",
+  renderer: jsxRenderer,
+  styles: FeedItemCss,
+  template: FeedItemTemplate,
+})
+
+/**
+ * Fires when item is clicked
+ *
+ * @public
+ */
+@event("item-click", { bubbles: true, cancelable: true })
+
+class UDExFeedItem extends UI5Element {
+  eventDetails!: {
+      "item-click": UDExFeedItemClickEventDetail,
+    };
+
+  /**
+   * Defines the link text
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    text?: string;
+
+  /**
+   * Defines the link text URL
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    href!: string;
+
+  /**
+   * Defines target for the link
+   *
+   * @default UDExTarget._self
+   * @public
+   */
+  @property()
+    target: UDExTarget = UDExTarget._self;
+
+  /**
+   * Defines the link text details
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    details?: string;
+
+  /**
+   * Defines the accessible ARIA name of the link.
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    accessibleName?: string;
+
+  /**
+   * Defines the date of the event
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    date?: string;
+
+  /**
+   * Defines the location of the event
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    location?: string;
+
+  /**
+   * Defines the UI5 icon name
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    icon?: string;
+
+  /**
+   * Defines the UI5 icon label
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    iconAccessibleName?: string;
+
+  /**
+   * Receives the avatar
+   *
+   * @slot avatar
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    avatar!: Array<HTMLElement>;
+
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
+  get _date(): FeedDate {
+    return this.formatDate(this.date);
+  }
+
+  get _showAvatar(): boolean {
+    return !!this.avatar.length;
+  }
+
+  get _showIcon(): boolean {
+    return !!this.icon && !this._showAvatar;
+  }
+
+  get _showDate(): boolean {
+    return !!this.date && !this._showAvatar && !this._showIcon;
+  }
+
+  get locationIconLabel(): string {
+    return UDExFeedItem.i18nBundle.getText(LOCATION);
+  }
+
+  formatDate(d: string | undefined): FeedDate {
+    if (!d) {
+      return { day: "", month: "" };
+    }
+    const date = new Date(d);
+    const day = date.toLocaleString("default", { day: "2-digit" });
+    let month = date.toLocaleString("default", { month: "short" });
+    month = month.charAt(0).toUpperCase() + month.slice(1);
+    return { day, month };
+  }
+
+  handleLinkClick(e: Event): void {
+    this.fireDecoratorEvent("item-click", {
+      item: this,
+      originalEvent: e,
+    });
+  }
+}
+
+UDExFeedItem.define();
+
+export default UDExFeedItem;
+export type { UDExFeedItemClickEventDetail };

package/src/FeedItemTemplate.tsx

@@ -0,0 +1,60 @@
+import type FeedItem from "./FeedItem.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import IconDesign from "@ui5/webcomponents/dist/types/IconDesign.js";
+import UDExLink from "./Link.js";
+
+export default function FeedItemTemplate(this: FeedItem) {
+  const rootClass = "udex-feed-item";
+
+  return (
+    <div class={rootClass}>
+      {this._showAvatar &&
+        <slot name="avatar" slot="avatar" aria-hidden="true"></slot>
+      }
+      {this._showIcon &&
+        <UI5Icon
+          class={`${rootClass}__icon`}
+          name={this.icon?.toLowerCase()}
+          mode={IconMode.Decorative}
+          accessibleName={this.iconAccessibleName}>
+        </UI5Icon>
+      }
+      {this._showDate &&
+        <div class={`${rootClass}__date`}
+          aria-label={this.date}>
+          <span class={`${rootClass}__month`}>{this._date.month}</span>
+          <span class={`${rootClass}__day`}>{this._date.day}</span>
+        </div>
+      }
+      {(this.text || this.details || this.location) &&
+        <div class={`${rootClass}__content`}>
+          <UDExLink
+            class={`${rootClass}__link`}
+            accessibleName={this.accessibleName}
+            href={this.href}
+            target={this.target}
+            onClick={this.handleLinkClick}>
+            {this.text}
+          </UDExLink>
+          {this.details &&
+            <p class={`${rootClass}__details`}>
+              {this.details}
+            </p>
+          }
+          {this.location &&
+            <p class={`${rootClass}__location`}>
+              <UI5Icon
+                name="map"
+                mode={IconMode.Decorative}
+                design={IconDesign.Neutral}
+                accessibleName={this.locationIconLabel}>
+              </UI5Icon>
+              {this.location}
+            </p>
+          }
+        </div>
+      }
+    </div>
+  );
+}