@sapudex/web-components 2.15.0 → 2.16.0

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 : "";
   }
 
   /**

package/src/HeroBannerTemplate.tsx

@@ -0,0 +1,101 @@
+import type HeroBanner from "./HeroBanner.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+
+export default function HeroBannerTemplate(this: HeroBanner) {
+  const rootClass = "udex-hero-banner";
+
+  return (
+    <div
+      className={this.heroBannerClasses}
+      part="wrapper"
+      style={{
+        backgroundColor: this.wrapperBackgroundColor,
+        ...(this.wrapperBackgroundImage ? { backgroundImage: this.wrapperBackgroundImage } : {})
+      }}>
+      {this.hasBackgroundVideo ? (
+        <div
+          className={`${rootClass}__background-video-wrapper`}
+          tabIndex={0}
+          onKeyDown={this._handleKeydown}>
+          <video
+            autoPlay={this.shouldVideoAutoplay}
+            muted
+            loop
+            playsInline
+            part="background-video"
+            className={`${rootClass}__background-video`}
+            aria-label={this.backgroundVideoLabel}>
+            <source src={this.backgroundVideo} type="video/mp4" />
+          </video>
+          <div className={`${rootClass}__background-video-overlay`}></div>
+          {this.hasBackgroundImage && (
+            <picture>
+              <img
+                loading={this.backgroundImageLoadingStrategy}
+                src={this.backgroundImage}
+                part="background-image"
+                className={`${rootClass}__background-image`}
+                alt={this.backgroundImageLabel}/>
+            </picture>
+          )}
+          <div className={`${rootClass}__content-container`}>
+            <slot
+              id={`${rootClass}__content`}
+              name="content"
+              part="content">
+            </slot>
+            <slot
+              id={`${rootClass}__additionalContent`}
+              name="additionalContent"
+              part="additionalContent">
+            </slot>
+          </div>
+          <button
+            className={`${rootClass}__media-button`}
+            aria-label="Play / Pause button"
+            role="button"
+            onClick={this._toggleMediaButton}>
+            <UI5Icon name={this.mediaButtonIconName}></UI5Icon>
+          </button>
+        </div>
+      ) : (
+        <div className={`${rootClass}__container`}>
+          {this.hasCustomBackgroundPicture ? (
+            <slot name="backgroundPicture"></slot>
+          ) : this.hasBackgroundImage ? (
+            <picture>
+              <img
+                loading={this.backgroundImageLoadingStrategy}
+                src={this.backgroundImage}
+                part="background-image"
+                className={`${rootClass}__background-image`}
+                alt={this.backgroundImageLabel}
+              />
+            </picture>
+          ) : null}
+          <div className={`${rootClass}__content-container`}>
+            <slot
+              id={`${rootClass}__content`}
+              name="content"
+              part="content">
+            </slot>
+            {this.hasAdditionalContent && (
+              <slot
+                id={`${rootClass}__additionalContent`}
+                name="additionalContent"
+                part="additionalContent">
+              </slot>
+            )}
+          </div>
+        </div>
+      )}
+      {this.hasMediaContent && (
+        <slot
+          id={`${rootClass}__mediaContent`}
+          name="mediaContent"
+          part="mediaContent">
+        </slot>
+      )}
+    </div>
+  );
+}

package/src/RatingBar.ts

@@ -1,13 +1,13 @@
 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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.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 { STARS } from "./generated/i18n/i18n-defaults.js";
 import "@ui5/webcomponents-icons/dist/favorite.js";
-import RatingBarTemplate from "./generated/templates/RatingBarTemplate.lit.js";
+import RatingBarTemplate from "./RatingBarTemplate.js";
 
 // Styles
 import RatingBarCss from "./generated/themes/RatingBar.css.js";
@@ -31,7 +31,7 @@ import RatingBarCss from "./generated/themes/RatingBar.css.js";
  */
 @customElement({
   tag: "udex-rating-bar",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: RatingBarCss,
   template: RatingBarTemplate,
   dependencies: [Icon],

package/src/RatingBarTemplate.tsx

@@ -0,0 +1,38 @@
+import type RatingBar from "./RatingBar.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import favorite from "@ui5/webcomponents-icons/dist/favorite.js";
+
+export default function RatingBarTemplate(this: RatingBar) {
+  const rootClass = "udex-rating-bar";
+
+  return (
+    <div className={`${rootClass}__container`}>
+      <div
+        aria-hidden="true"
+        className={`${rootClass}__rating`}>
+        {this.validatedRating}
+      </div>
+      <UI5Icon
+        aria-labelledby="ratingDescription"
+        name={favorite}
+        class={`${rootClass}__icon`}>
+      </UI5Icon>
+      <div className={`${rootClass}__track`}>
+        <div className={`${rootClass}__progress`}></div>
+      </div>
+      {this.showPercentage && (
+        <div
+          role="note"
+          className={`${rootClass}__percentage`}
+          aria-label={this.validatedPercentage}>
+          {this.validatedPercentage}
+        </div>
+      )}
+      <span
+        id="ratingDescription"
+        className="hidden-text">
+        {this._ratingDescription}
+      </span>
+    </div>
+  );
+}

package/src/StatusBadge.ts

@@ -1,7 +1,7 @@
 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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
@@ -20,7 +20,7 @@ import {
   STATUS_BADGE_WARNING_TITLE,
 } from "./generated/i18n/i18n-defaults.js";
 
-import StatusBadgeTemplate from "./generated/templates/StatusBadgeTemplate.lit.js";
+import StatusBadgeTemplate from "./StatusBadgeTemplate.js";
 
 // Styles
 import StatusBadgeCss from "./generated/themes/StatusBadge.css.js";
@@ -60,11 +60,12 @@ export enum BadgeSize {
  */
 @customElement({
   tag: "udex-status-badge",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: StatusBadgeCss,
   template: StatusBadgeTemplate,
   dependencies: [Icon],
 })
+
 class UDExStatusBadge extends UI5Element {
   /**
    * Defines the value state of the component.
@@ -107,7 +108,7 @@ class UDExStatusBadge extends UI5Element {
     return `${this.accessibleName ? this.accessibleName : UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_TEXT)}`;
   }
 
-  get ariaTitle() {
+  get ariaTitle(): string {
     switch (IconMapping[this.valueState]) {
     case IconMapping.Edit:
       return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_EDIT_TITLE);

package/src/StatusBadgeTemplate.tsx

@@ -0,0 +1,18 @@
+import type StatusBadge from "./StatusBadge.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+
+export default function StatusBadgeTemplate(this: StatusBadge) {
+  const rootClass = "udex-status-badge";
+
+  return (
+    <div
+      className={rootClass}
+      title={this.ariaTitle}>
+      <UI5Icon
+        class={`${rootClass}__icon`}
+        name={this.iconFieldName}
+        accessibleName={this.badgeAccessibleName}>
+      </UI5Icon>
+    </div>
+  );
+}