@sapudex/web-components 2.15.0 → 2.16.1

package/src/Footer.ts

@@ -1,13 +1,14 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.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 type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExAccordionItem from "./AccordionItem.js";
 import UDExButton from "./Button.js";
@@ -19,14 +20,7 @@ import type { UDExSocialMediaButtonType } from "./types/SocialMediaButtonType.js
 import type { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
-
-// Template
-import FooterTemplate from "./generated/templates/FooterTemplate.lit.js";
-
-// Styles
-import FooterCss from "./generated/themes/Footer.css.js";
-import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import FooterTemplate from "./FooterTemplate.js";
 import {
   ABOUT_SAP,
   CHAT_WITH_US,
@@ -42,15 +36,14 @@ import {
   PUBLIC_SECURITY_NETWORK_NUMBER,
   ICP_NUMBER,
 } from "./generated/i18n/i18n-defaults.js";
-import "@ui5/webcomponents-icons/dist/headset.js";
-import "@ui5/webcomponents-icons/dist/email.js";
-import "@ui5/webcomponents-icons/dist/back-to-top.js";
-import "@ui5/webcomponents-icons/dist/discussion-2.js";
-import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+
+// Styles
+import FooterCss from "./generated/themes/Footer.css.js";
 
 export const chineseICPDefaultLink = "https://beian.miit.gov.cn/";
 
 export type FooterLink = {
+  id: string;
   title: string;
   url: string;
   target: UDExTarget;
@@ -70,14 +63,14 @@ export type FooterContactNumber = {
 };
 
 type UDExFooterDetailedClickEventDetail = {
-  originalEvent: PointerEvent,
+  originalEvent: MouseEvent,
   name: string | undefined;
   id?: string;
   sourceNode: HTMLElement;
 }
 
 type UDExFooterBaseEventDetail = {
-  originalEvent: PointerEvent,
+  originalEvent: MouseEvent | Event,
 }
 
 type BaseEvents = "contact-chat-click" | "contact-phone-local-numbers-click" | "contact-email-click" | "contact-phone-click" | "logo-click" | "back-to-top-click";
@@ -106,7 +99,7 @@ type DetailedEvents = "quick-links-click" | "trending-click" | "about-sap-click"
 @customElement({
   languageAware: true,
   tag: "udex-footer",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [FooterCss],
   template: FooterTemplate,
   dependencies: [UDExAccordion, UDExAccordionItem, Icon, UDExButton, UDExDivider, UDExLink, UDExSocialMediaButton],
@@ -437,7 +430,7 @@ class UDExFooter extends UI5Element {
     this._shouldRenderMobileMenu = this.isMobile;
   }
 
-  onBackToTopClick(e: PointerEvent): void {
+  onBackToTopClick(e: Event): void {
     this.fireFooterBaseEvent(e, "back-to-top-click");
 
     window.scrollTo(0, 0);
@@ -490,19 +483,19 @@ class UDExFooter extends UI5Element {
     return UDExFooter.i18nBundle.getText(CHAT_WITH_US);
   }
 
-  get _quickLinksTitle() {
+  get _quickLinksTitle(): string {
     return this.quickLinksTitle || UDExFooter.i18nBundle.getText(QUICK_LINKS);
   }
 
-  get _trendingTitle() {
+  get _trendingTitle(): string {
     return this.trendingTitle || UDExFooter.i18nBundle.getText(TRENDING);
   }
 
-  get _aboutSapTitle() {
+  get _aboutSapTitle(): string {
     return this.aboutSapTitle || UDExFooter.i18nBundle.getText(ABOUT_SAP);
   }
 
-  get _siteInformationTitle() {
+  get _siteInformationTitle(): string {
     return this.siteInformationTitle || UDExFooter.i18nBundle.getText(SITE_INFORMATION);
   }
 
@@ -568,48 +561,48 @@ class UDExFooter extends UI5Element {
     return this.isChineseLang && this.chineseLogoUrl ? `${root}-chinese` : root;
   }
 
-  _onLogoClick(e: PointerEvent): void {
+  _onLogoClick(e: MouseEvent): void {
     this.fireFooterBaseEvent(e, "logo-click");
   }
 
-  _onContactPhoneClick(e: PointerEvent): void {
+  _onContactPhoneClick(e: MouseEvent): void {
     this.fireFooterBaseEvent(e, "contact-phone-click");
   }
-  _onContactPhoneLocalNumbersClick(e: PointerEvent): void {
+  _onContactPhoneLocalNumbersClick(e: Event): void {
     this.fireFooterBaseEvent(e, "contact-phone-local-numbers-click");
   }
-  _onContactEmailClick(e: PointerEvent): void {
+  _onContactEmailClick(e: MouseEvent): void {
     this.fireFooterBaseEvent(e, "contact-email-click");
   }
-  _onContactChatClick(e: PointerEvent): void {
+  _onContactChatClick(e: MouseEvent): void {
     this.fireFooterBaseEvent(e, "contact-chat-click");
   }
 
-  _onQuickLinksClick(e: PointerEvent): void {
+  _onQuickLinksClick(e: MouseEvent): void {
     this.fireFooterDetailedClickEvent(e, "quick-links-click");
   }
 
-  _onTrendingClick(e: PointerEvent): void {
+  _onTrendingClick(e: MouseEvent): void {
     this.fireFooterDetailedClickEvent(e, "trending-click");
   }
 
-  _onAboutSapClick(e: PointerEvent): void {
+  _onAboutSapClick(e: MouseEvent): void {
     this.fireFooterDetailedClickEvent(e, "about-sap-click");
   }
 
-  _onSiteInformationClick(e: PointerEvent): void {
+  _onSiteInformationClick(e: MouseEvent): void {
     this.fireFooterDetailedClickEvent(e, "site-information-click");
   }
 
-  _onSocialMediaLinkClick(e: PointerEvent): void {
+  _onSocialMediaLinkClick(e: MouseEvent): void {
     this.fireFooterDetailedClickEvent(e, "social-media-link-click");
   }
 
-  fireFooterBaseEvent(e: PointerEvent, eventName: BaseEvents): void {
+  fireFooterBaseEvent(e: MouseEvent | Event, eventName: BaseEvents): void {
     this.fireDecoratorEvent(eventName, { originalEvent: e });
   }
 
-  fireFooterDetailedClickEvent(e: PointerEvent, eventName: DetailedEvents): void {
+  fireFooterDetailedClickEvent(e: MouseEvent, eventName: DetailedEvents): void {
     const sourceNode = e.composedPath()[0] as HTMLElement;
     const { innerText, dataset: { id, name } } = sourceNode;
 

package/src/FooterTemplate.tsx

@@ -0,0 +1,410 @@
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import UI5LinkDesign from "@ui5/webcomponents/dist/types/LinkDesign.js";
+
+import headset from "@ui5/webcomponents-icons/dist/headset.js";
+import email from "@ui5/webcomponents-icons/dist/email.js";
+import backToTop from "@ui5/webcomponents-icons/dist/back-to-top.js";
+import discussion from "@ui5/webcomponents-icons/dist/discussion-2.js";
+
+import type Footer from "./Footer.js";
+import UDExLink from "./Link.js";
+import UDExDivider from "./Divider.js";
+import UDExSocialMediaButton from "./SocialMediaButton.js";
+import UDExAccordion from "./Accordion.js";
+import UDExAccordionItem from "./AccordionItem.js";
+import UDExButton from "./Button.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+
+export default function FooterTemplate(this: Footer) {
+  const rootClass = "udex-footer";
+
+  return (
+    <footer className={rootClass}>
+      <div className={`${rootClass}__content`}>
+        <div className={`${rootClass}__contact-social`}>
+          {this.hasLogo && (
+            <div className={`${rootClass}__logo`}>
+              {this.hasLogoLink ? (
+                <a
+                  href={this.logoHref}
+                  onClick={this._onLogoClick}
+                  title={this.logoTitle}
+                  aria-label={this.logoAriaLabel}>
+                  <img
+                    id={`${rootClass}__logo-image`}
+                    src={this.currentLogoUrl}
+                    className={this.logoClass}
+                    alt={this.logoAlt}
+                  />
+                </a>
+              ) : (
+                <img
+                  id={`${rootClass}__logo-image`}
+                  src={this.currentLogoUrl}
+                  className={this.logoClass}
+                  alt={this.logoAlt}
+                />
+              )}
+              {this.hasTagline && (
+                <img
+                  id={`${rootClass}__tagline-image`}
+                  src={this.currentTaglineUrl}
+                  className={this.taglineClass}
+                  alt={this.taglineAlt}
+                />
+              )}
+            </div>
+          )}
+          {this.isContactContainerVisible && (
+            <div className={`${rootClass}__contact`}>
+              {this.contactNumbersArray.length > 0 && (
+                <div className={`${rootClass}__numbers`}>
+                  <div className={`${rootClass}__icon-container`}>
+                    <UI5Icon
+                      class={`${rootClass}__icon`}
+                      name={headset}
+                      mode={IconMode.Decorative}
+                    ></UI5Icon>
+                  </div>
+                  <div>
+                    <div className={`${rootClass}__numbers-wrapper`}>
+                      {this.contactNumbersArray.map((contact, index) => (
+                        <div key={index}>
+                          <span
+                            className="hidden"
+                            aria-hidden
+                            id={`${rootClass}__${index}_phone-label`}>
+                            {`${this.phoneNumberAccessibleName} ${contact.country} : ${contact.number}`}
+                          </span>
+                          <p className={`${rootClass}__country`}>{contact.country}</p>
+                          <a
+                            href={`tel:${contact.number}`}
+                            className={`${rootClass}__number`}
+                            onClick={this._onContactPhoneClick}
+                            aria-labelledby={`${rootClass}__${index}_phone-label`}>
+                            {contact.number}
+                          </a>
+                        </div>
+                      ))}
+                    </div>
+                    {this.localCountryNumbersLink && (
+                      <p className={`${rootClass}__remark`}>
+                        {this.completeListTitle}
+                        <UDExLink
+                          class={`${rootClass}__remark-link`}
+                          onClick={this._onContactPhoneLocalNumbersClick}
+                          href={this.localCountryNumbersLink}
+                          design={UI5LinkDesign.Subtle}>
+                          {this.localCountryTitle}.
+                        </UDExLink>
+                      </p>
+                    )}
+                  </div>
+                </div>
+              )}
+              {this.contactUsLink && (
+                <div className={`${rootClass}__contact-us`}>
+                  <div className={`${rootClass}__icon-container`}>
+                    <UI5Icon
+                      class={`${rootClass}__icon`}
+                      name={email}
+                      mode={IconMode.Decorative}>
+                    </UI5Icon>
+                  </div>
+                  <span
+                    className="hidden"
+                    aria-hidden
+                    id={`${rootClass}__contact-us-label`}>
+                    {this.contactUsAccessibleLabel}
+                  </span>
+                  <a
+                    href={this.contactUsLink}
+                    className={`${rootClass}__contact-us-link`}
+                    aria-labelledby={`${rootClass}__contact-us-label`}
+                    onClick={this._onContactEmailClick}>
+                    {this.contactUsAccessibleName}
+                  </a>
+                </div>
+              )}
+              {this.chatWithUsLink && (
+                <div className={`${rootClass}__chat-with-us`}>
+                  <div className={`${rootClass}__icon-container`}>
+                    <UI5Icon
+                      class={`${rootClass}__icon`}
+                      name={discussion}
+                      mode={IconMode.Decorative}>
+                    </UI5Icon>
+                  </div>
+                  <a
+                    href={this.chatWithUsLink}
+                    className={`${rootClass}__chat-with-us-link`}
+                    onClick={this._onContactChatClick}>
+                    {this.chatWithUsAccessibleName}
+                  </a>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {this.isContactContainerVisible && (
+          <UDExDivider class={`${rootClass}__divider`}></UDExDivider>
+        )}
+
+        {this._shouldRenderMobileMenu ? (
+          mobileNavigation.call(this, rootClass)
+        ) : (
+          desktopNavigation.call(this, rootClass)
+        )}
+
+        <UDExDivider class={`${rootClass}__divider`}></UDExDivider>
+      </div>
+
+      <div className={`${rootClass}__copyright`}>
+        {this.isChineseLang && (
+          <span className={`${rootClass}__copyright-chinese-text`}>
+            <a
+              href={this.chineseIcpNumberLink}
+              title={this.chineseICPNumber}
+              className={`${rootClass}__copyright-chinese-link`}
+              target="_blank"
+              rel="noopener noreferrer">
+              {this.chineseICPNumber}
+            </a>
+            {this.chineseSecurityNetworkNumber}
+          </span>
+        )}
+        <span className={`${rootClass}__copyright-text`}>{this.copyrightText}</span>
+      </div>
+
+      {this.socialLinksArray.length > 0 && (
+        <div className={`${rootClass}__social-container`}>
+          {this.socialLinksArray.map((social, index) => (
+            <UDExSocialMediaButton
+              key={index}
+              type={social.name}
+              url={social.url}
+              target={social.target}
+              accessible-name={social.accessibleName}
+              data-name={social.name}
+              data-id={social.id}
+              onui5-click={this._onSocialMediaLinkClick}>
+            </UDExSocialMediaButton>
+          ))}
+        </div>
+      )}
+
+      <UDExButton
+        class={`${rootClass}__back-to-top-button`}
+        icon={backToTop}
+        onClick={this.onBackToTopClick}
+        design={UDExButtonDesign.Tertiary}
+        size={UDExButtonSize.Large}
+        accessibleName="back to top">
+      </UDExButton>
+    </footer>
+  );
+}
+
+function mobileNavigation(this: Footer, rootClass: string) {
+  return (
+    <UDExAccordion class={`${rootClass}__accordion`}>
+      {this.quickLinksArray.length > 0 && (
+        <>
+          <UDExAccordionItem label={this._quickLinksTitle} class={`${rootClass}__action-item`}>
+            <ul className={`${rootClass}__links-list udex-footer__links-list--mobile`}>
+              {this.quickLinksArray.map((link, index) => (
+                <li key={index}>
+                  <a
+                    target={link.target}
+                    aria-describedby={`${rootClass}__quick-links`}
+                    href={link.url}
+                    data-id={link.id}
+                    onClick={this._onQuickLinksClick}>
+                    {link.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+            <h3 className={`${rootClass}__links-item hidden`} aria-hidden="true" id={`${rootClass}__quick-links`}>
+              {this._quickLinksTitle}
+            </h3>
+          </UDExAccordionItem>
+        </>
+      )}
+
+      {this.trendingLinksArray.length > 0 && (
+        <>
+          <UDExAccordionItem label={this._trendingTitle} class={`${rootClass}__action-item`}>
+            <ul className={`${rootClass}__links-list ${rootClass}__links-list--mobile`}>
+              {this.trendingLinksArray.map((link, index) => (
+                <li key={index}>
+                  <a
+                    target={link.target}
+                    aria-describedby={`${rootClass}__footer__trending`}
+                    href={link.url}
+                    data-id={link.id}
+                    onClick={this._onTrendingClick}>
+                    {link.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+            <h3 className={`${rootClass}__links-item hidden`} aria-hidden="true" id={`${rootClass}__trending`}>
+              {this._trendingTitle}
+            </h3>
+          </UDExAccordionItem>
+        </>
+      )}
+
+      {this.aboutLinksArray.length > 0 && (
+        <>
+          <UDExAccordionItem label={this._aboutSapTitle} class={`${rootClass}__action-item`}>
+            <ul className={`${rootClass}__links-list ${rootClass}__links-list--mobile`}>
+              {this.aboutLinksArray.map((link, index) => (
+                <li key={index}>
+                  <a
+                    target={link.target}
+                    aria-describedby={`${rootClass}__about`}
+                    href={link.url}
+                    data-id={link.id}
+                    onClick={this._onAboutSapClick}>
+                    {link.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+            <h3 className={`${rootClass}__links-item hidden`} aria-hidden="true" id={`${rootClass}__about`}>
+              {this._aboutSapTitle}
+            </h3>
+          </UDExAccordionItem>
+        </>
+      )}
+
+      {this.siteInformationLinksArray.length > 0 && (
+        <>
+          <UDExAccordionItem label={this._siteInformationTitle} class={`${rootClass}__action-item`}>
+            <ul className={`${rootClass}__links-list rootClass__links-list--mobile`}>
+              {this.siteInformationLinksArray.map((link, index) => (
+                <li key={index}>
+                  <a
+                    target={link.target}
+                    aria-describedby={`${rootClass}__site-information`}
+                    href={link.url}
+                    data-id={link.id}
+                    onClick={this._onSiteInformationClick}>
+                    {link.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+            <h3 className={`${rootClass}__links-item hidden`} aria-hidden="true" id={`${rootClass}__site-information`}>
+              {this._siteInformationTitle}
+            </h3>
+          </UDExAccordionItem>
+        </>
+      )}
+    </UDExAccordion>
+  );
+}
+
+function desktopNavigation(this: Footer, rootClass: string) {
+  return (
+    <div className={`${rootClass}__links`}>
+      {this.quickLinksArray.length > 0 && (
+        <div className={`${rootClass}__links-group ${rootClass}__quick-links`}>
+          <h3 className={`${rootClass}__links-item`} id={`${rootClass}__quick-links`}>
+            {this._quickLinksTitle}
+          </h3>
+          <nav aria-labelledby={`${rootClass}__quick-links`}>
+            <ul className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>
+              {this.quickLinksArray.map((link, index) => (
+                <li key={index}>
+                  <a
+                    target={link.target}
+                    aria-describedby={`${rootClass}__quick-links`}
+                    data-id={link.id}
+                    href={link.url}
+                    onClick={this._onQuickLinksClick}>
+                    {link.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      )}
+      {this.trendingLinksArray.length > 0 && (
+        <div className={`${rootClass}__links-group ${rootClass}__trending-links`}>
+          <h3 className={`${rootClass}__links-item`} id={`${rootClass}__trending`}>
+            {this._trendingTitle}
+          </h3>
+          <nav aria-labelledby={`${rootClass}__trending`}>
+            <ul className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>
+              {this.trendingLinksArray.map((link, index) => (
+                <li key={index}>
+                  <a
+                    target={link.target}
+                    aria-describedby={`${rootClass}__footer__trending`}
+                    data-id={link.id}
+                    href={link.url}
+                    onClick={this._onTrendingClick}>
+                    {link.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      )}
+      {this.aboutLinksArray.length > 0 && (
+        <div className={`${rootClass}__links-group ${rootClass}__about-links`}>
+          <h3 className={`${rootClass}__links-item`} id={`${rootClass}__about`}>
+            {this._aboutSapTitle}
+          </h3>
+          <nav aria-labelledby={`${rootClass}__about`}>
+            <ul className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>
+              {this.aboutLinksArray.map((link, index) => (
+                <li key={index}>
+                  <a
+                    target={link.target}
+                    aria-describedby={`${rootClass}__about`}
+                    data-id={link.id}
+                    href={link.url}
+                    onClick={this._onAboutSapClick}>
+                    {link.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      )}
+      {this.siteInformationLinksArray.length > 0 && (
+        <div className={`${rootClass}__links-group ${rootClass}__site-information-links`}>
+          <h3 className={`${rootClass}__links-item`} id={`${rootClass}__site-information`}>
+            {this._siteInformationTitle}
+          </h3>
+          <nav aria-labelledby={`${rootClass}__site-information`}>
+            <ul className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>
+              {this.siteInformationLinksArray.map((link, index) => (
+                <li key={index}>
+                  <a
+                    target={link.target}
+                    aria-describedby={`${rootClass}__site-information`}
+                    data-id={link.id}
+                    href={link.url}
+                    onClick={this._onSiteInformationClick}>
+                    {link.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/HeroBanner.ts

@@ -2,12 +2,12 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/media-play.js";
 import "@ui5/webcomponents-icons/dist/media-pause.js";
-import HeroBannerTemplate from "./generated/templates/HeroBannerTemplate.lit.js";
+import HeroBannerTemplate from "./HeroBannerTemplate.js";
 
 // Styles
 import HeroBannerCss from "./generated/themes/HeroBanner.css.js";
@@ -27,7 +27,7 @@ export enum UDExImageLoadingStrategies {
  */
 @customElement({
   tag: "udex-hero-banner",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: HeroBannerCss,
   template: HeroBannerTemplate,
   dependencies: [Icon],
@@ -148,7 +148,7 @@ class UDExHeroBanner extends UI5Element {
   }
 
   get wrapperBackgroundImage(): string {
-    return this.backgroundGradient ? `background-image:${this.backgroundGradient}` : "";
+    return this.backgroundGradient ? this.backgroundGradient : "";
   }
 
   /**