@sapudex/web-components 0.114.2 → 0.127.6

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,25 @@
     <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
                 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>
 
@@ -156,6 +123,7 @@
                   <a
                     aria-describedby="udex-footer__quick-links"
                     href="{{this.url}}"
+                    data-id="{{this.id}}"
                     @click="{{../_onQuickLinksClick}}"
                   >{{this.title}}</a>
                 </li>
@@ -174,6 +142,7 @@
                     aria-describedby="udex-footer__footer__trending"
                     href="{{this.url}}"
                     @click="{{../_onTrendingClick}}"
+                    data-id="{{this.id}}"
                   >{{this.title}}</a>
                 </li>
               {{/each}}
@@ -190,6 +159,7 @@
                   <a
                     aria-describedby="udex-footer__about"
                     href="{{this.url}}"
+                    data-id="{{this.id}}"
                     @click="{{../_onAboutSapClick}}"
                   >{{this.title}}</a>
                 </li>
@@ -207,6 +177,7 @@
                   <a
                     aria-describedby="udex-footer__site-information"
                     href="{{this.url}}"
+                    data-id="{{this.id}}"
                     @click="{{../_onSiteInformationClick}}"
                   >{{this.title}}</a>
                 </li>
@@ -228,6 +199,7 @@
                     <li>
                       <a
                         aria-describedby="udex-footer__quick-links"
+                        data-id="{{this.id}}"
                         href="{{this.url}}"
                         @click="{{../_onQuickLinksClick}}"
                       >{{this.title}}</a>
@@ -244,6 +216,7 @@
                     <li>
                       <a
                         aria-describedby="udex-footer__footer__trending"
+                        data-id="{{this.id}}"
                         href="{{this.url}}"
                         @click="{{../_onTrendingClick}}"
                       >{{this.title}}</a>
@@ -260,6 +233,7 @@
                     <li>
                       <a
                         aria-describedby="udex-footer__about"
+                        data-id="{{this.id}}"
                         href="{{this.url}}"
                         @click="{{../_onAboutSapClick}}"
                       >{{this.title}}</a>
@@ -276,6 +250,7 @@
                     <li>
                       <a
                         aria-describedby="udex-footer__site-information"
+                        data-id="{{this.id}}"
                         href="{{this.url}}"
                         @click="{{../_onSiteInformationClick}}"
                       >{{this.title}}</a>

package/src/Footer.ts

@@ -51,6 +51,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 +72,7 @@ export const FooterDetailedEvent = {
   detail: {
     originalEvent: { type: PointerEvent },
     name: { type: String },
+    id: { type: String },
     sourceNode: { type: HTMLElement },
   },
 };
@@ -96,71 +108,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 +291,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 +325,7 @@ class UDExFooter extends UI5Element {
     ResizeHandler.deregister(this, this._handleResizeBound);
   }
 
-  onEnterDOM() {
+  onEnterDOM(): void {
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
@@ -316,7 +346,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 +430,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,27 +1,34 @@
 <div class="{{heroBannerClasses}}" part="wrapper" style="background-color: {{wrapperBackgroundColor}}">
-  {{#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}}
-  <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}}
-      <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}}
-      {{> hero-content}}
+    <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>
+        {{#if hasBackgroundImage}}
+          <picture>
+            <img loading="{{backgroundImageLoadingStrategy}}" src="{{backgroundImage}}" part="background-image" class="udex-hero-banner__background-image" alt="{{backgroundImageLabel}}" />
+          </picture>
+        {{/if}}
+        {{> hero-content}}
+        <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__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>
 
 {{#*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/InputGroup.ts

@@ -63,7 +63,7 @@ class UDExInputGroup extends UI5Element {
    * @public
    */
   @property({ type: String })
-  groupName?: string;
+    groupName?: string;
 
   /**
    * Defines the orientation of the component.
@@ -72,7 +72,7 @@ class UDExInputGroup extends UI5Element {
    * @public
    */
   @property({ type: Orientation, defaultValue: Orientation.Vertical })
-  orientation!: `${Orientation}`;
+    orientation!: `${Orientation}`;
 
   /**
    * Defines the value state of the component.
@@ -81,7 +81,7 @@ class UDExInputGroup extends UI5Element {
    * @public
    */
   @property({ type: GroupValueState, defaultValue: GroupValueState.Standard })
-  valueState!: `${GroupValueState}`;
+    valueState!: `${GroupValueState}`;
 
   /**
    * Defines supporting text under the Input Group.
@@ -90,7 +90,7 @@ class UDExInputGroup extends UI5Element {
    * @public
    */
   @property({ type: String })
-  supportingText!: string;
+    supportingText!: string;
 
   /**
    * Slot for input elements items.
@@ -98,7 +98,8 @@ class UDExInputGroup extends UI5Element {
    * @slot
    * @public
    */
-  @slot({ type: HTMLElement, "default": true, individualSlots: true }) items!: Array<UDExCheckbox | UDExRadioButton>;
+  @slot({ type: HTMLElement, "default": true, individualSlots: true })
+    items!: Array<UDExCheckbox | UDExRadioButton>;
 
   static i18nBundle: I18nBundle;