@sapudex/web-components 0.143.0 → 0.172.0

package/src/Footer.hbs

@@ -80,6 +80,22 @@
 
     <udex-divider class="udex-footer__divider"></udex-divider>
 
+    <div class="udex-footer__copyright">
+        {{#if isChineseLang}}
+            <span class="udex-footer__copyright-chinese-text">
+                <a
+                    href="{{chineseIcpNumberLink}}"
+                    title="{{chineseICPNumber}}"
+                    class="udex-footer__copyright-chinese-link"
+                    target="_blank">
+                    {{chineseICPNumber}}
+                </a>
+                {{chineseSecurityNetworkNumber}}
+            </span>
+        {{/if}}
+        <span class="udex-footer__copyright-text">{{copyrightText}}</span>
+    </div>
+
     {{#if socialLinksArray.length}}
         <div class="udex-footer__social-container">
           {{#each socialLinksArray}}
@@ -117,7 +133,7 @@
 {{#*inline "mobile-navigation"}}
   <udex-accordion class="udex-footer__accordion">
       {{#if quickLinksArray.length}}
-          <udex-accordion-item title="{{quickLinksTitle}}" class="udex-footer__action-item">
+          <udex-accordion-item title="{{_quickLinksTitle}}" class="udex-footer__action-item">
             <ul class="udex-footer__links-list udex-footer__links-list--mobile">
               {{#each ../quickLinksArray}}
                 <li>
@@ -132,11 +148,11 @@
               {{/each}}
             </ul>
           </udex-accordion-item>
-          <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__quick-links">{{quickLinksTitle}}</h3>
+          <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">
+          <udex-accordion-item title="{{_trendingTitle}}" class="udex-footer__action-item">
             <ul class="udex-footer__links-list udex-footer__links-list--mobile">
               {{#each trendingLinksArray}}
                 <li>
@@ -151,11 +167,11 @@
               {{/each}}
             </ul>
           </udex-accordion-item>
-          <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__trending">{{trendingTitle}}</h3>
+          <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">
+          <udex-accordion-item title="{{_aboutSapTitle}}" class="udex-footer__action-item">
             <ul class="udex-footer__links-list udex-footer__links-list--mobile">
               {{#each aboutLinksArray}}
                 <li>
@@ -170,11 +186,11 @@
               {{/each}}
             </ul>
           </udex-accordion-item>
-          <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__about">{{aboutSapTitle}}</h3>
+          <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">
+          <udex-accordion-item title="{{_siteInformationTitle}}" class="udex-footer__action-item">
             <ul class="udex-footer__links-list udex-footer__links-list--mobile">
               {{#each siteInformationLinksArray}}
                 <li>
@@ -189,7 +205,7 @@
               {{/each}}
             </ul>
           </udex-accordion-item>
-          <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__site-information">{{siteInformationTitle}}</h3>
+          <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__site-information">{{_siteInformationTitle}}</h3>
       {{/if}}
   </udex-accordion>
 {{/inline}}
@@ -198,26 +214,29 @@
   <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
-                        target="{{target}}"
-                        aria-describedby="udex-footer__quick-links"
-                        data-id="{{this.id}}"
-                        href="{{this.url}}"
-                        @click="{{../_onQuickLinksClick}}"
-                      >{{this.title}}</a>
-                    </li>
-                  {{/each}}
-              </ul>
+              <h3 class="udex-footer__links-item" id="udex-footer__quick-links">{{_quickLinksTitle}}</h3>
+              <nav aria-labelledby="udex-footer__quick-links">
+                  <ul class="udex-footer__links-list udex-footer__links-list--desktop">
+                      {{#each quickLinksArray}}
+                          <li>
+                              <a
+                                  target="{{target}}"
+                                  aria-describedby="udex-footer__quick-links"
+                                  data-id="{{this.id}}"
+                                  href="{{this.url}}"
+                                  @click="{{../_onQuickLinksClick}}"
+                              >{{this.title}}</a>
+                          </li>
+                      {{/each}}
+                  </ul>
+              </nav>
           </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">
+              <h3 class="udex-footer__links-item" id="udex-footer__trending">{{_trendingTitle}}</h3>
+              <nav aria-labelledby="udex-footer__trending">
+                <ul class="udex-footer__links-list udex-footer__links-list--desktop">
                   {{#each trendingLinksArray}}
                     <li>
                       <a
@@ -230,12 +249,14 @@
                     </li>
                   {{/each}}
               </ul>
+              </nav>
           </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">
+              <h3 class="udex-footer__links-item" id="udex-footer__about">{{_aboutSapTitle}}</h3>
+              <nav aria-labelledby="udex-footer__about">
+                <ul class="udex-footer__links-list udex-footer__links-list--desktop">
                   {{#each aboutLinksArray}}
                     <li>
                       <a
@@ -248,12 +269,14 @@
                     </li>
                   {{/each}}
               </ul>
+              </nav>
           </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">
+              <h3 class="udex-footer__links-item" id="udex-footer__site-information">{{_siteInformationTitle}}</h3>
+              <nav aria-labelledby="udex-footer__site-information">
+                <ul class="udex-footer__links-list udex-footer__links-list--desktop">
                   {{#each siteInformationLinksArray}}
                     <li>
                       <a
@@ -266,6 +289,7 @@
                     </li>
                   {{/each}}
               </ul>
+              </nav>
           </div>
       {{/if}}
   </div>

package/src/Footer.ts

@@ -13,6 +13,7 @@ import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
 
 // Template
 import FooterTemplate from "./generated/templates/FooterTemplate.lit.js";
@@ -32,9 +33,13 @@ import {
   SITE_INFORMATION,
   SOCIAL_LINK_ICON,
   TRENDING,
+  COPYRIGHT,
+  PUBLIC_SECURITY_NETWORK_NUMBER,
+  ICP_NUMBER,
 } from "./generated/i18n/i18n-defaults.js";
 
 const BreakpointSizeS: number = 979;
+export const chineseICPDefaultLink = "https://beian.miit.gov.cn/";
 
 export enum Target {
   _blank = "_blank",
@@ -61,25 +66,25 @@ export type FooterContactNumber = {
 };
 
 export type FooterDetailedClickEvent = {
-  originalEvent: PointerEvent,
+  originalEvent: Event,
   name: string;
   id?: string;
   sourceNode: HTMLElement;
 }
 
 export type FooterBaseEventEvent = {
-  originalEvent: PointerEvent,
+  originalEvent: Event,
 }
 
 export const FooterBaseEvent = {
   detail: {
-    originalEvent: { type: PointerEvent },
+    originalEvent: { type: Event },
   },
 };
 
 export const FooterDetailedEvent = {
   detail: {
-    originalEvent: { type: PointerEvent },
+    originalEvent: { type: Event },
     name: { type: String },
     id: { type: String },
     sourceNode: { type: HTMLElement },
@@ -106,6 +111,7 @@ export const FooterDetailedEvent = {
  * @public
  */
 @customElement({
+  languageAware: true,
   tag: "udex-footer",
   renderer: litRender,
   styles: [FooterCss],
@@ -124,7 +130,6 @@ export const FooterDetailedEvent = {
  * @allowPreventDefault
  */
 @event<FooterBaseEventEvent>("back-to-top-click", FooterBaseEvent)
-
 /**
  * Triggered on click interaction with phone number link in footer
  * @public
@@ -149,7 +154,6 @@ export const FooterDetailedEvent = {
  * @allowPreventDefault
  */
 @event<FooterBaseEventEvent>("contact-chat-click", FooterBaseEvent)
-
 /**
  * Triggered on click interaction with a link within "Quick Links" category
  * @public
@@ -174,7 +178,6 @@ export const FooterDetailedEvent = {
  * @allowPreventDefault
  */
 @event<FooterDetailedClickEvent>("site-information-click", FooterDetailedEvent)
-
 /**
  * Triggered on click interaction with any of the social media links within footer
  * @public
@@ -308,6 +311,46 @@ class UDExFooter extends UI5Element {
   @property({ type: String })
     logoAriaLabel!: string;
 
+  /**
+   * Defines an quick links column title
+   *
+   * @public
+   */
+  @property({ type: String })
+    quickLinksTitle?: string;
+
+  /**
+   * Defines a trending column title
+   *
+   * @public
+   */
+  @property({ type: String })
+    trendingTitle?: string;
+
+  /**
+   * Defines an "about Sap" column title
+   *
+   * @public
+   */
+  @property({ type: String })
+    aboutSapTitle?: string;
+
+  /**
+   * Defines a site information column title
+   *
+   * @public
+   */
+  @property({ type: String })
+    siteInformationTitle?: string;
+
+  /**
+   * Defines a href for the chinese ICP Number link
+   *
+   * @public
+   */
+  @property({ type: String, defaultValue: chineseICPDefaultLink })
+    chineseIcpNumberLink!: string;
+
   /**
    * Defines should render the mobile navigation.
    *
@@ -387,57 +430,73 @@ class UDExFooter extends UI5Element {
     return !!this.contactNumbersArray.length || !!this.contactUsLink || !!this.chatWithUsLink;
   }
 
-  get socialIconAccessibleName() {
+  get socialIconAccessibleName(): string {
     return ` ${UDExFooter.i18nBundle.getText(SOCIAL_LINK_ICON)}`;
   }
 
-  get phoneNumberAccessibleName() {
+  get phoneNumberAccessibleName(): string {
     return `${UDExFooter.i18nBundle.getText(PHONE_NUMBER)} `;
   }
 
-  get contactUsAccessibleName() {
+  get contactUsAccessibleName(): string {
     return UDExFooter.i18nBundle.getText(CONTACT_US);
   }
 
-  get contactUsAccessibleLabel() {
+  get contactUsAccessibleLabel(): string {
     if (this.contactUsLink.includes("mailto:")) {
       return `${this.contactUsAccessibleName} ${UDExFooter.i18nBundle.getText(EMAIL)}`;
     }
     return `${this.contactUsAccessibleName}`;
   }
 
-  get chatWithUsAccessibleName() {
+  get chatWithUsAccessibleName(): string {
     return UDExFooter.i18nBundle.getText(CHAT_WITH_US);
   }
 
-  get quickLinksTitle() {
-    return UDExFooter.i18nBundle.getText(QUICK_LINKS);
+  get _quickLinksTitle() {
+    return this.quickLinksTitle || UDExFooter.i18nBundle.getText(QUICK_LINKS);
   }
 
-  get trendingTitle() {
-    return UDExFooter.i18nBundle.getText(TRENDING);
+  get _trendingTitle() {
+    return this.trendingTitle || UDExFooter.i18nBundle.getText(TRENDING);
   }
 
-  get aboutSapTitle() {
-    return UDExFooter.i18nBundle.getText(ABOUT_SAP);
+  get _aboutSapTitle() {
+    return this.aboutSapTitle || UDExFooter.i18nBundle.getText(ABOUT_SAP);
   }
 
-  get siteInformationTitle() {
-    return UDExFooter.i18nBundle.getText(SITE_INFORMATION);
+  get _siteInformationTitle() {
+    return this.siteInformationTitle || UDExFooter.i18nBundle.getText(SITE_INFORMATION);
   }
 
-  get completeListTitle() {
+  get completeListTitle(): string {
     return `${UDExFooter.i18nBundle.getText(SEE_COMPLETE_LIST)} `;
   }
 
-  get localCountryTitle() {
+  get localCountryTitle(): string {
     return UDExFooter.i18nBundle.getText(LOCAL_COUNTRY_NAMES);
   }
 
+  get copyrightText(): string {
+    return UDExFooter.i18nBundle.getText(COPYRIGHT, new Date().getFullYear());
+  }
+
+  get chineseICPNumber(): string {
+    return `${UDExFooter.i18nBundle.getText(ICP_NUMBER)} `;
+  }
+
+  get chineseSecurityNetworkNumber(): string {
+    return UDExFooter.i18nBundle.getText(PUBLIC_SECURITY_NETWORK_NUMBER);
+  }
+
   get isMobile(): boolean {
     return window.innerWidth <= BreakpointSizeS;
   }
 
+  get isChineseLang(): boolean {
+    return getLanguage()?.toLowerCase() === "zh_cn";
+  }
+
   _onLogoClick(e: Event): void {
     this.fireFooterBaseEvent(e, "logo-click");
   }

package/src/Link.ts

@@ -8,11 +8,7 @@ import LinkTemplate from "./generated/templates/LinkTemplate.lit.js";
 
 // Styles
 import LinkCss from "./generated/themes/Link.css.js";
-
-export enum IconPlacement {
-  start = "start",
-  end = "end"
-}
+import IconPlacement from "./types/IconPlacement.js";
 
 /**
  * @class
@@ -53,17 +49,17 @@ class UDExLink extends Link {
      * Used as the label for background image.
      *
      * @public
-     * @default "end"
+     * @default "End"
     */
-    @property({ type: IconPlacement, defaultValue: IconPlacement.end })
+    @property({ type: IconPlacement, defaultValue: IconPlacement.End })
       iconPlacement?: `${IconPlacement}`;
 
     get startIcon() {
-      return this.icon && this.iconPlacement === IconPlacement.start;
+      return this.icon && this.iconPlacement === IconPlacement.Start;
     }
 
     get endIcon() {
-      return this.icon && this.iconPlacement === IconPlacement.end;
+      return this.icon && this.iconPlacement === IconPlacement.End;
     }
 
     get linkClass() {

package/src/List.hbs

@@ -6,8 +6,8 @@
         @keydown="{{handleKeyDown}}"
         style="height: {{holderHeight}}">
         <div class="udex-list__scroll-container">
-            <span id="{{_id}}-mode-label" class="udex-list__hidden-text">{{ariaLabelModeText}}</span>
             {{> headerText}}
+            <span id="{{_id}}-mode-label" class="udex-list__hidden-text">{{ariaLabelModeText}}</span>
             <ul
                 id="udex-list"
                 class="udex-list"
@@ -32,6 +32,6 @@
 {{/if}}
 {{#*inline "headerText"}}
     {{#if headerText}}
-        <header class="udex-list__header-text" part="header">{{headerText}}</header>
+        <header class="udex-list__header-text" part="header" id="{{_id}}-mode-label">{{headerText}}</header>
     {{/if}}
 {{/inline}}