@sapudex/web-components 0.117.1 → 0.138.0

package/src/Footer.hbs

@@ -1,11 +1,10 @@
 <footer class="udex-footer">
   <div class="udex-footer__content">
     <div class="udex-footer__contact-social">
-      <div class="udex-footer__contact-wrapper">
         {{#if logoUrl}}
           <div class="udex-footer__logo">
             {{#if logoLink}}
-            <a href="{{parsedRef}}" @click="{{_onLogoClick}}">
+            <a href="{{parsedRef}}" @click="{{_onLogoClick}}" title="{{logoTitle}}" aria-label="{{logoAriaLabel}}">
               <img id="udex-footer__logo-image" src="{{logoUrl}}" class="udex-footer__logo-image" alt="{{logoAlt}}"/>
             </a>
             {{else}}
@@ -16,7 +15,6 @@
         {{#if isContactContainerVisible}}
         <div class="udex-footer__contact">
           {{#if contactNumbersArray.length}}
-          <div>
             <div class="udex-footer__numbers">
               <div class="udex-footer__icon-container">
                 <ui5-icon class="udex-footer__icon" name="headset"></ui5-icon>
@@ -43,10 +41,8 @@
                 {{/if}}
               </div>
             </div>
-          </div>
           {{/if}}
           {{#if contactUsLink}}
-          <div>
               <div class="udex-footer__contact-us">
                 <div class="udex-footer__icon-container">
                   <ui5-icon class="udex-footer__icon" name="email"></ui5-icon>
@@ -59,45 +55,17 @@
                   @click="{{_onContactEmailClick}}"
                 >{{contactUsAccessibleName}}</a>
               </div>
-          </div>
           {{/if}}
           {{#if chatWithUsLink}}
-          <div>
             <div class="udex-footer__chat-with-us">
               <div class="udex-footer__icon-container">
                 <ui5-icon class="udex-footer__icon" name="discussion-2"></ui5-icon>
               </div>
               <a href="{{chatWithUsLink}}" class="udex-footer__chat-with-us-link" @click="{{_onContactChatClick}}">{{chatWithUsAccessibleName}}</a>
             </div>
-          </div>
           {{/if}}
         </div>
         {{/if}}
-      </div>
-
-      {{#if socialLinksArray.length}}
-        <div class="udex-footer__social udex-footer__links-list--desktop">
-          <div class="udex-footer__social-container">
-            {{#each socialLinksArray}}
-              <div>
-                <a
-                  href="{{this.url}}"
-                  class="udex-footer__social-icon"
-                  data-name="{{this.name}}"
-                  @click="{{../_onSocialMediaLinkClick}}"
-                >
-                  <img
-                    alt="{{this.name}} {{../socialIconAccessibleName}}"
-                    title="{{this.name}}"
-                    src="{{this.iconUrl}}"
-                    loading="lazy"
-                  />
-                </a>
-              </div>
-            {{/each}}
-          </div>
-        </div>
-      {{/if}}
     </div>
 
     {{#if isContactContainerVisible}}
@@ -113,26 +81,26 @@
     <udex-divider class="udex-footer__divider"></udex-divider>
 
     {{#if socialLinksArray.length}}
-      <div class="udex-footer__social udex-footer__links-list--mobile">
         <div class="udex-footer__social-container">
           {{#each socialLinksArray}}
-            <div>
               <a
+                target="{{target}}"
                 href="{{this.url}}"
                 class="udex-footer__social-icon"
                 data-name="{{this.name}}"
+                data-id="{{this.id}}"
                 @click="{{../_onSocialMediaLinkClick}}"
               >
                 <img
+                  data-name="{{this.name}}"
+                  data-id="{{this.id}}"
                   alt="{{this.name}} {{../socialIconAccessibleName}}"
                   src="{{this.iconUrl}}"
                   loading="lazy"
                 />
               </a>
-            </div>
           {{/each}}
         </div>
-      </div>
     {{/if}}
   </div>
 
@@ -154,8 +122,10 @@
               {{#each ../quickLinksArray}}
                 <li>
                   <a
+                    target="{{target}}"
                     aria-describedby="udex-footer__quick-links"
                     href="{{this.url}}"
+                    data-id="{{this.id}}"
                     @click="{{../_onQuickLinksClick}}"
                   >{{this.title}}</a>
                 </li>
@@ -171,9 +141,11 @@
               {{#each trendingLinksArray}}
                 <li>
                   <a
+                    target="{{target}}"
                     aria-describedby="udex-footer__footer__trending"
                     href="{{this.url}}"
                     @click="{{../_onTrendingClick}}"
+                    data-id="{{this.id}}"
                   >{{this.title}}</a>
                 </li>
               {{/each}}
@@ -188,8 +160,10 @@
               {{#each aboutLinksArray}}
                 <li>
                   <a
+                    target="{{target}}"
                     aria-describedby="udex-footer__about"
                     href="{{this.url}}"
+                    data-id="{{this.id}}"
                     @click="{{../_onAboutSapClick}}"
                   >{{this.title}}</a>
                 </li>
@@ -205,8 +179,10 @@
               {{#each siteInformationLinksArray}}
                 <li>
                   <a
+                    target="{{target}}"
                     aria-describedby="udex-footer__site-information"
                     href="{{this.url}}"
+                    data-id="{{this.id}}"
                     @click="{{../_onSiteInformationClick}}"
                   >{{this.title}}</a>
                 </li>
@@ -227,7 +203,9 @@
                   {{#each quickLinksArray}}
                     <li>
                       <a
+                        target="{{target}}"
                         aria-describedby="udex-footer__quick-links"
+                        data-id="{{this.id}}"
                         href="{{this.url}}"
                         @click="{{../_onQuickLinksClick}}"
                       >{{this.title}}</a>
@@ -243,7 +221,9 @@
                   {{#each trendingLinksArray}}
                     <li>
                       <a
+                        target="{{target}}"
                         aria-describedby="udex-footer__footer__trending"
+                        data-id="{{this.id}}"
                         href="{{this.url}}"
                         @click="{{../_onTrendingClick}}"
                       >{{this.title}}</a>
@@ -259,7 +239,9 @@
                   {{#each aboutLinksArray}}
                     <li>
                       <a
+                        target="{{target}}"
                         aria-describedby="udex-footer__about"
+                        data-id="{{this.id}}"
                         href="{{this.url}}"
                         @click="{{../_onAboutSapClick}}"
                       >{{this.title}}</a>
@@ -275,7 +257,9 @@
                   {{#each siteInformationLinksArray}}
                     <li>
                       <a
+                        target="{{target}}"
                         aria-describedby="udex-footer__site-information"
+                        data-id="{{this.id}}"
                         href="{{this.url}}"
                         @click="{{../_onSiteInformationClick}}"
                       >{{this.title}}</a>

package/src/Footer.ts

@@ -36,14 +36,23 @@ import {
 
 const BreakpointSizeS: number = 979;
 
+export enum Target {
+  _blank = "_blank",
+  _parent = "_parent",
+  _self = "_self",
+  _top = "_top",
+}
+
 export type FooterLink = {
   title: string;
   url: string;
+  target: Target;
 };
 
 export type FooterSocialLink = {
   url: string;
   iconUrl: string;
+  target: Target;
 };
 
 export type FooterContactNumber = {
@@ -51,6 +60,17 @@ export type FooterContactNumber = {
   country: string;
 };
 
+export type FooterDetailedClickEvent = {
+  originalEvent: PointerEvent,
+  name: string;
+  id?: string;
+  sourceNode: HTMLElement;
+}
+
+export type FooterBaseEventEvent = {
+  originalEvent: PointerEvent,
+}
+
 export const FooterBaseEvent = {
   detail: {
     originalEvent: { type: PointerEvent },
@@ -61,6 +81,7 @@ export const FooterDetailedEvent = {
   detail: {
     originalEvent: { type: PointerEvent },
     name: { type: String },
+    id: { type: String },
     sourceNode: { type: HTMLElement },
   },
 };
@@ -76,7 +97,7 @@ export const FooterDetailedEvent = {
  * For the <code>udex-footer</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Footer.js";</code>
+ * <code>import "@udex/web-components/dist/Footer.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -96,71 +117,81 @@ export const FooterDetailedEvent = {
  * @public
  * @allowPreventDefault
  */
-@event("logo-click", FooterBaseEvent)
+@event<FooterBaseEventEvent>("logo-click", FooterBaseEvent)
 /**
  * Triggered on click interaction with "Back to Top" button
  * @public
  * @allowPreventDefault
  */
-@event("back-to-top-click", FooterBaseEvent)
+@event<FooterBaseEventEvent>("back-to-top-click", FooterBaseEvent)
 
 /**
  * Triggered on click interaction with phone number link in footer
  * @public
  * @allowPreventDefault
  */
-@event("contact-phone-click", FooterBaseEvent)
+@event<FooterBaseEventEvent>("contact-phone-click", FooterBaseEvent)
 /**
  * Triggered on click interaction with local country numbers list link
  * @public
  * @allowPreventDefault
  */
-@event("contact-phone-local-numbers-click", FooterBaseEvent)
+@event<FooterBaseEventEvent>("contact-phone-local-numbers-click", FooterBaseEvent)
 /**
  * Triggered on click interaction with "Contact us by email" link
  * @public
  * @allowPreventDefault
  */
-@event("contact-email-click", FooterBaseEvent)
+@event<FooterBaseEventEvent>("contact-email-click", FooterBaseEvent)
 /**
  * Triggered on click interaction with "Contact us by chat" link
  * @public
  * @allowPreventDefault
  */
-@event("contact-chat-click", FooterBaseEvent)
+@event<FooterBaseEventEvent>("contact-chat-click", FooterBaseEvent)
 
 /**
  * Triggered on click interaction with a link within "Quick Links" category
  * @public
  * @allowPreventDefault
  */
-@event("quick-links-click", FooterDetailedEvent)
+@event<FooterDetailedClickEvent>("quick-links-click", FooterDetailedEvent)
 /**
  * Triggered on click interaction with a link within "Trending" category
  * @public
  * @allowPreventDefault
  */
-@event("trending-click", FooterDetailedEvent)
+@event<FooterDetailedClickEvent>("trending-click", FooterDetailedEvent)
 /**
  * Triggered on click interaction with a link within "About SAP" category
  * @public
  * @allowPreventDefault
  */
-@event("about-sap-click", FooterDetailedEvent)
+@event<FooterDetailedClickEvent>("about-sap-click", FooterDetailedEvent)
 /**
  * Triggered on click interaction with a link within "Site Information" category
  * @public
  * @allowPreventDefault
  */
-@event("site-information-click", FooterDetailedEvent)
+@event<FooterDetailedClickEvent>("site-information-click", FooterDetailedEvent)
 
 /**
  * Triggered on click interaction with any of the social media links within footer
  * @public
  * @allowPreventDefault
  */
-@event("social-media-link-click", FooterDetailedEvent)
+@event<FooterDetailedClickEvent>("social-media-link-click", FooterDetailedEvent)
+
 class UDExFooter extends UI5Element {
+  /**
+   * Defines the Logo default title
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String, defaultValue: "" })
+    logoTitle!: string;
+
   /**
    * Defines the Logo URL
    *
@@ -269,6 +300,14 @@ class UDExFooter extends UI5Element {
   @property({ type: String, defaultValue: "" })
     logoAlt!: string;
 
+  /**
+   * Defines an aria label for the logo link
+   *
+   * @public
+   */
+  @property({ type: String })
+    logoAriaLabel!: string;
+
   /**
    * Defines should render the mobile navigation.
    *
@@ -295,7 +334,7 @@ class UDExFooter extends UI5Element {
     ResizeHandler.deregister(this, this._handleResizeBound);
   }
 
-  onEnterDOM() {
+  onEnterDOM(): void {
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
@@ -316,7 +355,7 @@ class UDExFooter extends UI5Element {
     return string ? JSON.parse(string) as T[] : [];
   }
 
-  get parsedRef() {
+  get parsedRef(): string | undefined {
     return (this.logoLink && this.logoLink.length > 0) ? this.logoLink : undefined;
   }
 
@@ -400,70 +439,53 @@ class UDExFooter extends UI5Element {
   }
 
   _onLogoClick(e: Event): void {
-    this.fireEvent("logo-click", { originalEvent: e }, true);
+    this.fireFooterBaseEvent(e, "logo-click");
   }
 
   _onContactPhoneClick(e: Event): void {
-    this.fireEvent("contact-phone-click", { originalEvent: e }, true);
+    this.fireFooterBaseEvent(e, "contact-phone-click");
   }
   _onContactPhoneLocalNumbersClick(e: Event): void {
-    this.fireEvent("contact-phone-local-numbers-click", { originalEvent: e }, true);
+    this.fireFooterBaseEvent(e, "contact-phone-local-numbers-click");
   }
   _onContactEmailClick(e: Event): void {
-    this.fireEvent("contact-email-click", { originalEvent: e }, true);
+    this.fireFooterBaseEvent(e, "contact-email-click");
   }
   _onContactChatClick(e: Event): void {
-    this.fireEvent("contact-chat-click", { originalEvent: e }, true);
+    this.fireFooterBaseEvent(e, "contact-chat-click");
   }
 
   _onQuickLinksClick(e: Event): void {
-    const sourceNode = e.composedPath()[0]as HTMLElement;
-
-    this.fireEvent("quick-links-click", {
-      name: sourceNode.innerText,
-      originalEvent: e,
-      sourceNode,
-    }, true);
+    this.fireFooterDetailedClickEvent(e, "quick-links-click");
   }
 
   _onTrendingClick(e: Event): void {
-    const sourceNode = e.composedPath()[0]as HTMLElement;
-
-    this.fireEvent("trending-click", {
-      name: sourceNode.innerText,
-      originalEvent: e,
-      sourceNode,
-    }, true);
+    this.fireFooterDetailedClickEvent(e, "trending-click");
   }
 
   _onAboutSapClick(e: Event): void {
-    const sourceNode = e.composedPath()[0]as HTMLElement;
-
-    this.fireEvent("about-sap-click", {
-      name: sourceNode.innerText,
-      originalEvent: e,
-      sourceNode,
-    }, true);
+    this.fireFooterDetailedClickEvent(e, "about-sap-click");
   }
 
   _onSiteInformationClick(e: Event): void {
-    const sourceNode = e.composedPath()[0]as HTMLElement;
-
-    this.fireEvent("site-information-click", {
-      name: sourceNode.innerText,
-      originalEvent: e,
-      sourceNode,
-    }, true);
+    this.fireFooterDetailedClickEvent(e, "site-information-click");
   }
 
   _onSocialMediaLinkClick(e: Event): void {
-    const nodes = e.composedPath() as HTMLElement[];
-    let sourceNode = nodes[0];
+    this.fireFooterDetailedClickEvent(e, "social-media-link-click");
+  }
+
+  fireFooterBaseEvent(e: Event, eventName: string): void {
+    this.fireEvent(eventName, { originalEvent: e }, true);
+  }
 
-    if (nodes[0] instanceof HTMLImageElement) { sourceNode = nodes[1]; }
+  fireFooterDetailedClickEvent(e: Event, eventName: string): void {
+    const sourceNode = e.composedPath()[0] as HTMLElement;
+    const { innerText, dataset: { id, name } } = sourceNode;
 
-    this.fireEvent("social-media-link-click", {
-      name: sourceNode?.dataset?.name,
+    this.fireEvent(eventName, {
+      ...(!!id?.length && { id }),
+      name: innerText.length ? innerText : name,
       originalEvent: e,
       sourceNode,
     }, true);

package/src/HeroBanner.hbs

@@ -1,30 +1,37 @@
 <div class="{{heroBannerClasses}}" part="wrapper" style="background-color: {{wrapperBackgroundColor}}">
-  <div class="udex-hero-banner__container">
-    {{#if hasCustomBackgroundPicture}}
-      <slot name="backgroundPicture"></slot>
-    {{else if hasBackgroundImage}}
-      <picture>
-        <img loading="{{backgroundImageLoadingStrategy}}" src="{{backgroundImage}}" part="background-image" class="udex-hero-banner__background-image" alt="{{backgroundImageLabel}}" />
-      </picture>
-    {{/if}}
-
-    {{#if hasBackgroundVideo}}
+  {{#if hasBackgroundVideo}}
     <div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown={{_handleKeydown}} >
         <video ?autoplay="{{shouldVideoAutoplay}}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="{{backgroundVideoLabel}}">
             <source src="{{backgroundVideo}}" type="video/mp4" />
         </video>
         <div class="udex-hero-banner__background-video-overlay"></div>
-        {{> hero-content}}
+        {{#if hasBackgroundImage}}
+          <picture>
+            <img loading="{{backgroundImageLoadingStrategy}}" src="{{backgroundImage}}" part="background-image" class="udex-hero-banner__background-image" alt="{{backgroundImageLabel}}" />
+          </picture>
+        {{/if}}
+        <div class="udex-hero-banner__content-container">
+            <slot id="udex-hero-banner__content" name="content" part="content"></slot>
+            <slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot>
+        </div>
         <button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click={{_toggleMediaButton}}>
             <ui5-icon name={{mediaButtonIconName}}></ui5-icon>
         </button>
     </div>
     {{else}}
-    <div class="udex-hero-banner__content-container">
-        {{> hero-content}}
+    <div class="udex-hero-banner__container">
+      {{#if hasCustomBackgroundPicture}}
+        <slot name="backgroundPicture"></slot>
+      {{else if hasBackgroundImage}}
+        <picture>
+          <img loading="{{backgroundImageLoadingStrategy}}" src="{{backgroundImage}}" part="background-image" class="udex-hero-banner__background-image" alt="{{backgroundImageLabel}}" />
+        </picture>
+      {{/if}}
+      <div class="udex-hero-banner__content-container">
+          {{> hero-content}}
+      </div>
     </div>
-    {{/if}}
-  </div>
+  {{/if}}
 </div>
 
 {{#*inline "hero-content"}}

package/src/HeroBanner.ts

@@ -187,6 +187,9 @@ class UDExHeroBanner extends UI5Element {
 
   onEnterDOM() {
     if (this.backgroundVideo) {
+      if (this.backgroundColor) {
+        this.style.setProperty("--udexHeroBannerBackgroundVideoColor", `${this.wrapperBackgroundColor}`);
+      }
       this._video?.addEventListener("play", () => {
         this._calculateMediaButtonState();
       });

package/src/Link.ts

@@ -25,7 +25,7 @@ export enum IconPlacement {
  * For the <code>udex-link</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Link.js";</code>
+ * <code>import "@udex/web-components/dist/Link.js";</code>
  *
  * @constructor
  * @author SAP SE