@sapudex/web-components 2.20.1 → 2.22.0

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

package/src/FeedTemplate.tsx

@@ -0,0 +1,66 @@
+import type UDExFeed from "./Feed.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
+
+export default function FeedTemplate(this: UDExFeed) {
+  const rootClass = "udex-feed";
+
+  return (
+    <div
+      role="region"
+      class={`${rootClass}__container`}
+      aria-label={this.accessibleName}>
+      {this._showPictogram &&
+        <div
+          part="image"
+          class={`${rootClass}__pictogram`}
+          title={this._imageLabel}>
+          {this.icon &&
+            <UI5Icon
+              class={`${rootClass}__icon`}
+              name={this.icon?.toLowerCase()}
+              mode={IconMode.Decorative}
+              accessibleName={this._imageLabel}>
+            </UI5Icon>}
+          {this._showImage &&
+            <img
+              src={this.imageUrl}
+              class={`${rootClass}__icon`}
+              aria-label={this._imageLabel}
+              alt={this._imageLabel} />}
+        </div>
+      }
+      <div part="content" class={`${rootClass}__content`}>
+        {this.header &&
+          <h3 part="header" class={`${rootClass}__header`}>{this.header}</h3>
+        }
+        {this.items.length > 0 &&
+          <div class={`${rootClass}__items`}>
+            {this.items.map(item =>
+              <slot name={item._individualSlot}></slot>
+            )}
+          </div>
+        }
+        {!!this.button && footerSection.call(this, rootClass)}
+      </div>
+    </div>
+  );
+}
+function footerSection(this: UDExFeed, rootClass: string) {
+  return (
+    <>
+      <div part="footer" class={`${rootClass}__footer`}>
+        <UDExButton class={`${rootClass}__btn`}
+          size={UDExButtonSize.Large}
+          design={this.buttonDesign}
+          onClick={this.handleCTAButtonClick}
+          accessibleRole={UDExButtonAccessibleRole.Button}>
+          {this.button}
+        </UDExButton>
+      </div>
+    </>
+  );
+}

package/src/FilterMenu.ts

@@ -97,6 +97,7 @@ type UDExFilterMenuResetClickEventDetail = {
  * Fired event when the user click on a reset button on the footer.
  *
  * @public
+ * @param {Array<UDExListItemBase>} restoredItems
  */
 @event("reset-click", { bubbles: true })
 
@@ -104,6 +105,7 @@ type UDExFilterMenuResetClickEventDetail = {
  * Fired event when the user click on a result button on the footer.
  *
  * @public
+ * @param {Array<UDExListItemBase>} selectedItems
  */
 @event("result-click", { bubbles: true })
 

package/src/Footer.ts

@@ -111,66 +111,91 @@ type DetailedEvents = "quick-links-click" | "trending-click" | "about-sap-click"
 /**
  * Triggered on click interaction with logo in footer
  * @public
+ * @param { MouseEvent | Event } originalEvent
  * @allowPreventDefault
  */
 @event("logo-click", { bubbles: true })
 /**
  * Triggered on click interaction with "Back to Top" button
  * @public
+ * @param { MouseEvent | Event } originalEvent
  * @allowPreventDefault
  */
 @event("back-to-top-click", { bubbles: true })
 /**
  * Triggered on click interaction with phone number link in footer
  * @public
+ * @param { MouseEvent | Event } originalEvent
  * @allowPreventDefault
  */
 @event("contact-phone-click", { bubbles: true })
 /**
  * Triggered on click interaction with local country numbers list link
  * @public
+ * @param { MouseEvent | Event } originalEvent
  * @allowPreventDefault
  */
 @event("contact-phone-local-numbers-click", { bubbles: true })
 /**
  * Triggered on click interaction with "Contact us by email" link
  * @public
+ * @param { MouseEvent | Event } originalEvent
  * @allowPreventDefault
  */
 @event("contact-email-click", { bubbles: true })
 /**
  * Triggered on click interaction with "Contact us by chat" link
  * @public
+ * @param { MouseEvent | Event } originalEvent
  * @allowPreventDefault
  */
 @event("contact-chat-click", { bubbles: true })
 /**
  * Triggered on click interaction with a link within "Quick Links" category
  * @public
+ * @param { MouseEvent | Event } originalEvent
+ * @param { HTMLElement } sourceNode
+ * @param { string | undefined } name
  * @allowPreventDefault
  */
 @event("quick-links-click", { bubbles: true })
 /**
  * Triggered on click interaction with a link within "Trending" category
  * @public
+ * @param { MouseEvent | Event } originalEvent
+ * @param { HTMLElement } sourceNode
+ * @param { string | undefined } name
+ * @param { string } [id]
  * @allowPreventDefault
  */
 @event("trending-click", { bubbles: true })
 /**
  * Triggered on click interaction with a link within "About SAP" category
  * @public
+ * @param { MouseEvent | Event } originalEvent
+ * @param { HTMLElement } sourceNode
+ * @param { string | undefined } name
+ * @param { string } [id]
  * @allowPreventDefault
  */
 @event("about-sap-click", { bubbles: true })
 /**
  * Triggered on click interaction with a link within "Site Information" category
  * @public
+ * @param { MouseEvent | Event } originalEvent
+ * @param { HTMLElement } sourceNode
+ * @param { string | undefined } name
+ * @param { string } [id]
  * @allowPreventDefault
  */
 @event("site-information-click", { bubbles: true })
 /**
  * Triggered on click interaction with any of the social media links within footer
  * @public
+ * @param { MouseEvent | Event } originalEvent
+ * @param { HTMLElement } sourceNode
+ * @param { string | undefined } name
+ * @param { string } [id]
  * @allowPreventDefault
  */
 @event("social-media-link-click", { bubbles: true })
@@ -178,6 +203,8 @@ type DetailedEvents = "quick-links-click" | "trending-click" | "about-sap-click"
 /**
  * Triggered when the user clicks on an accordion item.
  * @public
+ * @param { string | undefined } name
+ * @param { boolean } expanded
  */
 @event("accordion-item-click", { bubbles: true })
 
@@ -417,6 +444,22 @@ class UDExFooter extends UI5Element {
   @property({ type: String })
     chineseIcpNumberLink: string = chineseICPDefaultLink;
 
+  /**
+   * Defines text for the chinese ICP Number
+   *
+   * @public
+   */
+  @property({ type: String })
+    chineseIcpNumber!: string;
+
+  /**
+   * Defines text for the chinese security network number
+   *
+   * @public
+   */
+  @property({ type: String })
+    chineseSecurityNetworkNumber!: string;
+
   /**
    * Defines should render the mobile navigation.
    *
@@ -532,12 +575,12 @@ class UDExFooter extends UI5Element {
     return UDExFooter.i18nBundle.getText(COPYRIGHT, new Date().getFullYear());
   }
 
-  get chineseICPNumber(): string {
-    return `${UDExFooter.i18nBundle.getText(ICP_NUMBER)} `;
+  get chineseICPNumberText(): string {
+    return this.chineseIcpNumber ? `${this.chineseIcpNumber} ` : `${UDExFooter.i18nBundle.getText(ICP_NUMBER)} `;
   }
 
-  get chineseSecurityNetworkNumber(): string {
-    return UDExFooter.i18nBundle.getText(PUBLIC_SECURITY_NETWORK_NUMBER);
+  get chineseSecurityNetworkNumberText(): string {
+    return this.chineseSecurityNetworkNumber ?? UDExFooter.i18nBundle.getText(PUBLIC_SECURITY_NETWORK_NUMBER);
   }
 
   get isMobile(): boolean {