@sapudex/web-components 0.111.0 → 0.117.1

package/src/Footer.hbs

@@ -5,7 +5,7 @@
         {{#if logoUrl}}
           <div class="udex-footer__logo">
             {{#if logoLink}}
-            <a href="{{parsedRef}}">
+            <a href="{{parsedRef}}" @click="{{_onLogoClick}}">
               <img id="udex-footer__logo-image" src="{{logoUrl}}" class="udex-footer__logo-image" alt="{{logoAlt}}"/>
             </a>
             {{else}}
@@ -27,7 +27,7 @@
                     <div>
                       <span class="hidden" aria-hidden id="udex-footer__{{@index}}_phone-label">{{../phoneNumberAccessibleName}} {{this.country}} : {{this.number}}</span>
                       <p class="udex-footer__country">{{this.country}}</p>
-                      <a href="tel:{{this.number}}" class="udex-footer__number" aria-labelledby="udex-footer__{{@index}}_phone-label">
+                      <a href="tel:{{this.number}}" class="udex-footer__number" @click="{{../_onContactPhoneClick}}" aria-labelledby="udex-footer__{{@index}}_phone-label">
                         {{this.number}}
                       </a>
                     </div>
@@ -36,7 +36,7 @@
                 {{#if localCountryNumbersLink}}
                   <p class="udex-footer__remark">
                     {{completeListTitle}}
-                    <a href="{{this.localCountryNumbersLink}}">
+                    <a href="{{this.localCountryNumbersLink}}" @click="{{_onContactPhoneLocalNumbersClick}}">
                       {{localCountryTitle}}.
                     </a>
                   </p>
@@ -52,7 +52,12 @@
                   <ui5-icon class="udex-footer__icon" name="email"></ui5-icon>
                 </div>
                 <span class="hidden" aria-hidden id="udex-footer__contact-us-label">{{contactUsAccessibleLabel}}</span>
-                <a href="{{contactUsLink}}" class="udex-footer__contact-us-link"  aria-labelledby="udex-footer__contact-us-label">{{contactUsAccessibleName}}</a>
+                <a
+                  href="{{contactUsLink}}"
+                  class="udex-footer__contact-us-link"
+                  aria-labelledby="udex-footer__contact-us-label"
+                  @click="{{_onContactEmailClick}}"
+                >{{contactUsAccessibleName}}</a>
               </div>
           </div>
           {{/if}}
@@ -62,7 +67,7 @@
               <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">{{chatWithUsAccessibleName}}</a>
+              <a href="{{chatWithUsLink}}" class="udex-footer__chat-with-us-link" @click="{{_onContactChatClick}}">{{chatWithUsAccessibleName}}</a>
             </div>
           </div>
           {{/if}}
@@ -75,7 +80,12 @@
           <div class="udex-footer__social-container">
             {{#each socialLinksArray}}
               <div>
-                <a href="{{this.url}}" class="udex-footer__social-icon">
+                <a
+                  href="{{this.url}}"
+                  class="udex-footer__social-icon"
+                  data-name="{{this.name}}"
+                  @click="{{../_onSocialMediaLinkClick}}"
+                >
                   <img
                     alt="{{this.name}} {{../socialIconAccessibleName}}"
                     title="{{this.name}}"
@@ -107,7 +117,12 @@
         <div class="udex-footer__social-container">
           {{#each socialLinksArray}}
             <div>
-              <a href="{{this.url}}" class="udex-footer__social-icon">
+              <a
+                href="{{this.url}}"
+                class="udex-footer__social-icon"
+                data-name="{{this.name}}"
+                @click="{{../_onSocialMediaLinkClick}}"
+              >
                 <img
                   alt="{{this.name}} {{../socialIconAccessibleName}}"
                   src="{{this.iconUrl}}"
@@ -132,94 +147,142 @@
 </footer>
 
 {{#*inline "mobile-navigation"}}
-    <udex-accordion class="udex-footer__accordion">
-        {{#if quickLinksArray.length}}
-            <udex-accordion-item title="{{quickLinksTitle}}" class="udex-footer__action-item">
-              <ul class="udex-footer__links-list udex-footer__links-list--mobile">
-                {{#each ../quickLinksArray}}
-                  <li><a aria-describedby="udex-footer__quick-links" href="{{this.url}}">{{this.title}}</a></li>
-                {{/each}}
-              </ul>
-            </udex-accordion-item>
-            <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__quick-links">{{quickLinksTitle}}</h3>
-        {{/if}}
+  <udex-accordion class="udex-footer__accordion">
+      {{#if quickLinksArray.length}}
+          <udex-accordion-item title="{{quickLinksTitle}}" class="udex-footer__action-item">
+            <ul class="udex-footer__links-list udex-footer__links-list--mobile">
+              {{#each ../quickLinksArray}}
+                <li>
+                  <a
+                    aria-describedby="udex-footer__quick-links"
+                    href="{{this.url}}"
+                    @click="{{../_onQuickLinksClick}}"
+                  >{{this.title}}</a>
+                </li>
+              {{/each}}
+            </ul>
+          </udex-accordion-item>
+          <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__quick-links">{{quickLinksTitle}}</h3>
+      {{/if}}
 
-        {{#if trendingLinksArray.length}}
-            <udex-accordion-item title="{{trendingTitle}}" class="udex-footer__action-item">
-              <ul class="udex-footer__links-list udex-footer__links-list--mobile">
-                {{#each trendingLinksArray}}
-                  <li><a aria-describedby="udex-footer__trending" href="{{this.url}}">{{this.title}}</a></li>
-                {{/each}}
-              </ul>
-            </udex-accordion-item>
-            <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__trending">{{trendingTitle}}</h3>
-        {{/if}}
+      {{#if trendingLinksArray.length}}
+          <udex-accordion-item title="{{trendingTitle}}" class="udex-footer__action-item">
+            <ul class="udex-footer__links-list udex-footer__links-list--mobile">
+              {{#each trendingLinksArray}}
+                <li>
+                  <a
+                    aria-describedby="udex-footer__footer__trending"
+                    href="{{this.url}}"
+                    @click="{{../_onTrendingClick}}"
+                  >{{this.title}}</a>
+                </li>
+              {{/each}}
+            </ul>
+          </udex-accordion-item>
+          <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__trending">{{trendingTitle}}</h3>
+      {{/if}}
 
-        {{#if aboutLinksArray.length}}
-            <udex-accordion-item title="{{aboutSapTitle}}" class="udex-footer__action-item">
-              <ul class="udex-footer__links-list udex-footer__links-list--mobile">
-                {{#each aboutLinksArray}}
-                  <li><a aria-describedby="udex-footer__about" href="{{this.url}}">{{this.title}}</a></li>
-                {{/each}}
-              </ul>
-            </udex-accordion-item>
-            <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__about">{{aboutSapTitle}}</h3>
-        {{/if}}
+      {{#if aboutLinksArray.length}}
+          <udex-accordion-item title="{{aboutSapTitle}}" class="udex-footer__action-item">
+            <ul class="udex-footer__links-list udex-footer__links-list--mobile">
+              {{#each aboutLinksArray}}
+                <li>
+                  <a
+                    aria-describedby="udex-footer__about"
+                    href="{{this.url}}"
+                    @click="{{../_onAboutSapClick}}"
+                  >{{this.title}}</a>
+                </li>
+              {{/each}}
+            </ul>
+          </udex-accordion-item>
+          <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__about">{{aboutSapTitle}}</h3>
+      {{/if}}
 
-        {{#if siteInformationLinksArray.length}}
-            <udex-accordion-item title="{{siteInformationTitle}}" class="udex-footer__action-item">
-              <ul class="udex-footer__links-list udex-footer__links-list--mobile">
-                {{#each siteInformationLinksArray}}
-                  <li><a  aria-describedby="udex-footer__site-information" href="{{this.url}}">{{this.title}}</a></li>
-                {{/each}}
-              </ul>
-            </udex-accordion-item>
-            <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__site-information">{{siteInformationTitle}}</h3>
-        {{/if}}
-    </udex-accordion>
+      {{#if siteInformationLinksArray.length}}
+          <udex-accordion-item title="{{siteInformationTitle}}" class="udex-footer__action-item">
+            <ul class="udex-footer__links-list udex-footer__links-list--mobile">
+              {{#each siteInformationLinksArray}}
+                <li>
+                  <a
+                    aria-describedby="udex-footer__site-information"
+                    href="{{this.url}}"
+                    @click="{{../_onSiteInformationClick}}"
+                  >{{this.title}}</a>
+                </li>
+              {{/each}}
+            </ul>
+          </udex-accordion-item>
+          <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__site-information">{{siteInformationTitle}}</h3>
+      {{/if}}
+  </udex-accordion>
 {{/inline}}
 
 {{#*inline "desktop-navigation"}}
-    <div class="udex-footer__links">
-        {{#if quickLinksArray.length}}
-            <div class="udex-footer__links-group udex-footer__quick-links">
-                <h3 class="udex-footer__links-item" id="udex-footer__quick-links">{{quickLinksTitle}}</h3>
-                <ul class="udex-footer__links-list udex-footer__links-list--desktop">
-                    {{#each quickLinksArray}}
-                        <li><a aria-describedby="udex-footer__quick-links" href="{{this.url}}">{{this.title}}</a></li>
-                    {{/each}}
-                </ul>
-            </div>
-        {{/if}}
-        {{#if trendingLinksArray.length}}
-            <div class="udex-footer__links-group udex-footer__trending-links">
-                <h3 class="udex-footer__links-item" id="udex-footer__trending">{{trendingTitle}}</h3>
-                <ul class="udex-footer__links-list udex-footer__links-list--desktop">
-                    {{#each trendingLinksArray}}
-                        <li><a aria-describedby="udex-footer__trending" href="{{this.url}}">{{this.title}}</a></li>
-                    {{/each}}
-                </ul>
-            </div>
-        {{/if}}
-        {{#if aboutLinksArray.length}}
-            <div class="udex-footer__links-group udex-footer__about-links">
-                <h3 class="udex-footer__links-item" id="udex-footer__about">{{aboutSapTitle}}</h3>
-                <ul class="udex-footer__links-list udex-footer__links-list--desktop">
-                    {{#each aboutLinksArray}}
-                        <li><a aria-describedby="udex-footer__about" href="{{this.url}}">{{this.title}}</a></li>
-                    {{/each}}
-                </ul>
-            </div>
-        {{/if}}
-        {{#if siteInformationLinksArray.length}}
-            <div class="udex-footer__links-group udex-footer__site-information-links">
-                <h3 class="udex-footer__links-item" id="udex-footer__site-information">{{siteInformationTitle}}</h3>
-                <ul class="udex-footer__links-list udex-footer__links-list--desktop">
-                    {{#each siteInformationLinksArray}}
-                        <li><a aria-describedby="udex-footer__site-information" href="{{this.url}}">{{this.title}}</a></li>
-                    {{/each}}
-                </ul>
-            </div>
-        {{/if}}
-    </div>
+  <div class="udex-footer__links">
+      {{#if quickLinksArray.length}}
+          <div class="udex-footer__links-group udex-footer__quick-links">
+              <h3 class="udex-footer__links-item" id="udex-footer__quick-links">{{quickLinksTitle}}</h3>
+              <ul class="udex-footer__links-list udex-footer__links-list--desktop">
+                  {{#each quickLinksArray}}
+                    <li>
+                      <a
+                        aria-describedby="udex-footer__quick-links"
+                        href="{{this.url}}"
+                        @click="{{../_onQuickLinksClick}}"
+                      >{{this.title}}</a>
+                    </li>
+                  {{/each}}
+              </ul>
+          </div>
+      {{/if}}
+      {{#if trendingLinksArray.length}}
+          <div class="udex-footer__links-group udex-footer__trending-links">
+              <h3 class="udex-footer__links-item" id="udex-footer__trending">{{trendingTitle}}</h3>
+              <ul class="udex-footer__links-list udex-footer__links-list--desktop">
+                  {{#each trendingLinksArray}}
+                    <li>
+                      <a
+                        aria-describedby="udex-footer__footer__trending"
+                        href="{{this.url}}"
+                        @click="{{../_onTrendingClick}}"
+                      >{{this.title}}</a>
+                    </li>
+                  {{/each}}
+              </ul>
+          </div>
+      {{/if}}
+      {{#if aboutLinksArray.length}}
+          <div class="udex-footer__links-group udex-footer__about-links">
+              <h3 class="udex-footer__links-item" id="udex-footer__about">{{aboutSapTitle}}</h3>
+              <ul class="udex-footer__links-list udex-footer__links-list--desktop">
+                  {{#each aboutLinksArray}}
+                    <li>
+                      <a
+                        aria-describedby="udex-footer__about"
+                        href="{{this.url}}"
+                        @click="{{../_onAboutSapClick}}"
+                      >{{this.title}}</a>
+                    </li>
+                  {{/each}}
+              </ul>
+          </div>
+      {{/if}}
+      {{#if siteInformationLinksArray.length}}
+          <div class="udex-footer__links-group udex-footer__site-information-links">
+              <h3 class="udex-footer__links-item" id="udex-footer__site-information">{{siteInformationTitle}}</h3>
+              <ul class="udex-footer__links-list udex-footer__links-list--desktop">
+                  {{#each siteInformationLinksArray}}
+                    <li>
+                      <a
+                        aria-describedby="udex-footer__site-information"
+                        href="{{this.url}}"
+                        @click="{{../_onSiteInformationClick}}"
+                      >{{this.title}}</a>
+                    </li>
+                  {{/each}}
+              </ul>
+          </div>
+      {{/if}}
+  </div>
 {{/inline}}

package/src/Footer.ts

@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.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.js";
 import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 
 import "@ui5/webcomponents-icons/dist/headset.js";
@@ -49,6 +50,21 @@ export type FooterContactNumber = {
   number: string;
   country: string;
 };
+
+export const FooterBaseEvent = {
+  detail: {
+    originalEvent: { type: PointerEvent },
+  },
+};
+
+export const FooterDetailedEvent = {
+  detail: {
+    originalEvent: { type: PointerEvent },
+    name: { type: String },
+    sourceNode: { type: HTMLElement },
+  },
+};
+
 /**
  * @class
  *
@@ -75,6 +91,75 @@ export type FooterContactNumber = {
   template: FooterTemplate,
   dependencies: [UDExAccordionItem],
 })
+/**
+ * Triggered on click interaction with logo in footer
+ * @public
+ * @allowPreventDefault
+ */
+@event("logo-click", FooterBaseEvent)
+/**
+ * Triggered on click interaction with "Back to Top" button
+ * @public
+ * @allowPreventDefault
+ */
+@event("back-to-top-click", FooterBaseEvent)
+
+/**
+ * Triggered on click interaction with phone number link in footer
+ * @public
+ * @allowPreventDefault
+ */
+@event("contact-phone-click", FooterBaseEvent)
+/**
+ * Triggered on click interaction with local country numbers list link
+ * @public
+ * @allowPreventDefault
+ */
+@event("contact-phone-local-numbers-click", FooterBaseEvent)
+/**
+ * Triggered on click interaction with "Contact us by email" link
+ * @public
+ * @allowPreventDefault
+ */
+@event("contact-email-click", FooterBaseEvent)
+/**
+ * Triggered on click interaction with "Contact us by chat" link
+ * @public
+ * @allowPreventDefault
+ */
+@event("contact-chat-click", FooterBaseEvent)
+
+/**
+ * Triggered on click interaction with a link within "Quick Links" category
+ * @public
+ * @allowPreventDefault
+ */
+@event("quick-links-click", FooterDetailedEvent)
+/**
+ * Triggered on click interaction with a link within "Trending" category
+ * @public
+ * @allowPreventDefault
+ */
+@event("trending-click", FooterDetailedEvent)
+/**
+ * Triggered on click interaction with a link within "About SAP" category
+ * @public
+ * @allowPreventDefault
+ */
+@event("about-sap-click", FooterDetailedEvent)
+/**
+ * Triggered on click interaction with a link within "Site Information" category
+ * @public
+ * @allowPreventDefault
+ */
+@event("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)
 class UDExFooter extends UI5Element {
   /**
    * Defines the Logo URL
@@ -221,7 +306,9 @@ class UDExFooter extends UI5Element {
     this._shouldRenderMobileMenu = this.isMobile;
   }
 
-  onBackToTopClick(): void {
+  onBackToTopClick(e: Event): void {
+    this.fireEvent("back-to-top-click", { originalEvent: e }, true);
+
     window.scrollTo(0, 0);
   }
 
@@ -311,6 +398,76 @@ class UDExFooter extends UI5Element {
   get isMobile(): boolean {
     return window.innerWidth <= BreakpointSizeS;
   }
+
+  _onLogoClick(e: Event): void {
+    this.fireEvent("logo-click", { originalEvent: e }, true);
+  }
+
+  _onContactPhoneClick(e: Event): void {
+    this.fireEvent("contact-phone-click", { originalEvent: e }, true);
+  }
+  _onContactPhoneLocalNumbersClick(e: Event): void {
+    this.fireEvent("contact-phone-local-numbers-click", { originalEvent: e }, true);
+  }
+  _onContactEmailClick(e: Event): void {
+    this.fireEvent("contact-email-click", { originalEvent: e }, true);
+  }
+  _onContactChatClick(e: Event): void {
+    this.fireEvent("contact-chat-click", { originalEvent: e }, true);
+  }
+
+  _onQuickLinksClick(e: Event): void {
+    const sourceNode = e.composedPath()[0]as HTMLElement;
+
+    this.fireEvent("quick-links-click", {
+      name: sourceNode.innerText,
+      originalEvent: e,
+      sourceNode,
+    }, true);
+  }
+
+  _onTrendingClick(e: Event): void {
+    const sourceNode = e.composedPath()[0]as HTMLElement;
+
+    this.fireEvent("trending-click", {
+      name: sourceNode.innerText,
+      originalEvent: e,
+      sourceNode,
+    }, true);
+  }
+
+  _onAboutSapClick(e: Event): void {
+    const sourceNode = e.composedPath()[0]as HTMLElement;
+
+    this.fireEvent("about-sap-click", {
+      name: sourceNode.innerText,
+      originalEvent: e,
+      sourceNode,
+    }, true);
+  }
+
+  _onSiteInformationClick(e: Event): void {
+    const sourceNode = e.composedPath()[0]as HTMLElement;
+
+    this.fireEvent("site-information-click", {
+      name: sourceNode.innerText,
+      originalEvent: e,
+      sourceNode,
+    }, true);
+  }
+
+  _onSocialMediaLinkClick(e: Event): void {
+    const nodes = e.composedPath() as HTMLElement[];
+    let sourceNode = nodes[0];
+
+    if (nodes[0] instanceof HTMLImageElement) { sourceNode = nodes[1]; }
+
+    this.fireEvent("social-media-link-click", {
+      name: sourceNode?.dataset?.name,
+      originalEvent: e,
+      sourceNode,
+    }, true);
+  }
 }
 
 UDExFooter.define();

package/src/HeroBanner.hbs

@@ -1,27 +1,30 @@
 <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}}
+  <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}}
-  <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>
+    {{#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}}
+    <div class="udex-hero-banner__content-container">
+        {{> hero-content}}
+    </div>
+    {{/if}}
   </div>
-  {{else}}
-      {{> hero-content}}
-  {{/if}}
-
 </div>
 
 {{#*inline "hero-content"}}

package/src/InputGroup.hbs

@@ -0,0 +1,20 @@
+<div id="{{_id}}-input-group"
+    class="udex-input-group__container"
+    role="group"
+    aria-describedby="{{_id}}-valueStateDesc"
+>
+    <div class="udex-input-group__content">
+        {{#each _items}}
+            <div class="udex-input-group__item">
+                <slot name="{{this.item._individualSlot}}"></slot>
+            </div>
+        {{/each}}
+    </div>
+    {{#if valueStateText}}
+        <udex-status-message
+                supporting-text="{{valueStateText}}"
+                value-state="{{valueState}}">
+        </udex-status-message>
+        <span id="{{_id}}-valueStateDesc" class="hidden-text">{{valueStateText}}</span>
+    {{/if}}
+</div>