@sapudex/web-components 2.10.0 → 2.11.0

package/src/Footer.hbs

@@ -1,14 +1,17 @@
 <footer class="udex-footer">
   <div class="udex-footer__content">
     <div class="udex-footer__contact-social">
-        {{#if logoUrl}}
+        {{#if hasLogo}}
           <div class="udex-footer__logo">
-            {{#if logoLink}}
-            <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>
+            {{#if hasLogoLink}}
+              <a href="{{logoHref}}" @click="{{_onLogoClick}}" title="{{logoTitle}}" aria-label="{{logoAriaLabel}}">
+                <img id="udex-footer__logo-image" src="{{currentLogoUrl}}" class="{{logoClass}}" alt="{{logoAlt}}"/>
+              </a>
             {{else}}
-              <img id="udex-footer__logo-image" src="{{logoUrl}}" class="udex-footer__logo-image" alt="{{logoAlt}}"/>
+              <img id="udex-footer__logo-image" src="{{currentLogoUrl}}" class="{{logoClass}}" alt="{{logoAlt}}"/>
+            {{/if}}
+            {{#if hasTagline}}
+              <img id="udex-footer__tagline-image" src="{{currentTaglineUrl}}" class="{{taglineClass}}" alt="{{taglineAlt}}"/>
             {{/if}}
           </div>
         {{/if}}
@@ -83,40 +86,40 @@
     {{/if}}
 
     <udex-divider class="udex-footer__divider"></udex-divider>
+  </div>
 
-    <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}}
-              <udex-social-media-button
-                type="{{this.name}}"
-                url="{{this.url}}"
-                target="{{this.target}}"
-                accessible-name="{{this.accessibleName}}"
-                data-name="{{this.name}}"
-                data-id="{{this.id}}"
-                @ui5-click="{{../_onSocialMediaLinkClick}}"
-                ></udex-social-media-button>
-          {{/each}}
-        </div>
+  <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}}
+        <udex-social-media-button
+          type="{{this.name}}"
+          url="{{this.url}}"
+          target="{{this.target}}"
+          accessible-name="{{this.accessibleName}}"
+          data-name="{{this.name}}"
+          data-id="{{this.id}}"
+          @ui5-click="{{../_onSocialMediaLinkClick}}"
+        ></udex-social-media-button>
+      {{/each}}
+    </div>
+  {{/if}}
+
   <udex-button
     class="udex-footer__back-to-top-button"
     icon="back-to-top"

package/src/Footer.ts

@@ -199,7 +199,7 @@ class UDExFooter extends UI5Element {
    * @public
    */
   @property({ type: String })
-    logoTitle: string = "";
+    logoTitle?: string;
 
   /**
    * Defines the Logo URL
@@ -208,7 +208,7 @@ class UDExFooter extends UI5Element {
    * @public
    */
   @property({ type: String })
-    logoUrl: string = "";
+    logoUrl?: string;
 
   /**
    * Defines the optional component href link for the logo.
@@ -219,6 +219,51 @@ class UDExFooter extends UI5Element {
   @property({ type: String })
     logoLink: string = "";
 
+  /**
+   * Defines the tagline alt text.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    taglineAlt?: string;
+
+  /**
+   * Defines the tagline url.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    taglineUrl?: string;
+
+  /**
+   * Defines the chinese tagline url.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    chineseTaglineUrl?: string;
+
+  /**
+   * Defines the chinese logo url
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    chineseLogoUrl?: string;
+
+  /**
+   * Defines the optional component href link for the chinese logo.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    chineseLogoLink?: string;
+
   /**
    * List of the Quick links
    *
@@ -398,10 +443,6 @@ class UDExFooter extends UI5Element {
     window.scrollTo(0, 0);
   }
 
-  get parsedRef(): string | undefined {
-    return (this.logoLink && this.logoLink.length > 0) ? this.logoLink : undefined;
-  }
-
   get quickLinksArray(): FooterLink[] {
     return parseArrayFromString<FooterLink>(this.quickLinks);
   }
@@ -493,6 +534,40 @@ class UDExFooter extends UI5Element {
     return getLanguage()?.toLowerCase() === "zh_cn";
   }
 
+  get hasLogo(): boolean {
+    return !!(this.logoUrl || this.chineseLogoUrl);
+  }
+
+  get hasLogoLink(): boolean {
+    return !!(this.logoLink || this.chineseLogoLink);
+  }
+
+  get currentLogoUrl(): string | undefined {
+    return this.isChineseLang && this.chineseLogoUrl ? this.chineseLogoUrl : this.logoUrl;
+  }
+
+  get logoHref(): string {
+    return this.isChineseLang && this.chineseLogoLink ? this.chineseLogoLink : this.logoLink;
+  }
+
+  get hasTagline(): boolean {
+    return !!(this.taglineUrl || this.chineseTaglineUrl);
+  }
+
+  get currentTaglineUrl(): string | undefined {
+    return this.isChineseLang && this.chineseTaglineUrl ? this.chineseTaglineUrl : this.taglineUrl;
+  }
+
+  get taglineClass(): string {
+    const root = "udex-footer__tagline-image";
+    return this.isChineseLang && this.chineseTaglineUrl ? `${root}-chinese` : root;
+  }
+
+  get logoClass(): string {
+    const root = "udex-footer__logo-image";
+    return this.isChineseLang && this.chineseLogoUrl ? `${root}-chinese` : root;
+  }
+
   _onLogoClick(e: PointerEvent): void {
     this.fireFooterBaseEvent(e, "logo-click");
   }

package/src/HeroBanner.hbs

@@ -38,7 +38,6 @@
     <slot id="udex-hero-banner__content" name="content" part="content"></slot>
 
     {{#if hasAdditionalContent}}
-    <udex-media-player source="http://media.w3.org/2010/05/sintel/trailer.mp4"  aspect-ratio="16:9"></udex-media-player>
         <slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot>
     {{/if}}
 {{/inline}}

package/src/PromoTile.ts

@@ -0,0 +1,290 @@
+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 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 jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
+import PromoTileTemplate from "./PromoTileTemplate.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { PROMO_TILE, PROMO_TILE_ICON } from "./generated/i18n/i18n-defaults.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
+import type UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import { UDExPromoTileColorSheme, UDExPromoTileMode } from "./types/PromoTile.js";
+
+// Styles
+import PromoTileCss from "./generated/themes/PromoTile.css.js";
+
+export enum UDExOrientation {
+  Vertical = "Vertical",
+  Horizontal = "Horizontal",
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-promo-tile</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/PromoTile.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-promo-tile
+ * @public
+ */
+@customElement({
+  tag: "udex-promo-tile",
+  renderer: jsxRenderer,
+  styles: PromoTileCss,
+  template: PromoTileTemplate,
+})
+
+/**
+ * Triggered when the user clicks on the CTA button
+ *
+ * @public
+ */
+@event("button-click", { cancelable: true, bubbles: true })
+
+class UDExPromoTile extends UI5Element {
+  eventDetails!: {
+    "button-click": void,
+  };
+
+  /**
+   * Defines the text content of the Promo Tile.
+   *
+   * @slot content
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true })
+    content!: Array<HTMLElement>;
+
+  /**
+   * Defines the orientation of the Promo Tile component.
+   *
+   * @type {string}
+   * @defaultvalue "Vertical"
+   * @public
+   */
+  @property({ type: String })
+    orientation: `${UDExOrientation}` = UDExOrientation.Vertical;
+
+  /**
+   * Defines the UI5 icon name in the pictogram section.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    icon?: string;
+
+  /**
+   * Defines the image aria label and alt in the pictogram section.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    imageLabel?: string;
+
+  /**
+   * Defines the logo URL in the pictogram section.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    logoUrl?: string;
+
+  /**
+   * Defines the header text of the promo tile.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    header?: string;
+
+  /**
+   * Defines the eyebrow text of the promo tile.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    eyebrow?: string;
+
+  /**
+   * Defines the CTA button label
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    button?: string;
+
+  /**
+   * Defines the CTA button design
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    buttonDesign?: UDExButtonDesign;
+
+  /**
+   * Defines the color scheme of the Promo Tile.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    colorScheme?: UDExPromoTileColorSheme;
+
+  /**
+   * Defines the accessible name of the component.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    accessibleName?: string;
+
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
+  _handleResizeBound: ResizeObserverCallback;
+  _button: UDExButton | undefined;
+  _colorMode: UDExPromoTileMode = UDExPromoTileMode.light;
+  _lightModeColors: Array<number> = [1, 2];
+  _darkModeColors: Array<number> = [7, 8, 9, 10];
+
+  constructor() {
+    super();
+    this._handleResizeBound = this._handleResize.bind(this);
+  }
+
+  onEnterDOM(): void {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
+  onAfterRendering() {
+    this._button = this.getButton();
+    this.applyColorScheme();
+  }
+
+  _handleResize(): void {
+    if (this._button) {
+      this._button.size = this.isMobile ? UDExButtonSize.Medium : UDExButtonSize.Large;
+    }
+  }
+
+  getButton(): UDExButton | undefined {
+    return this.shadowRoot!.querySelector<UDExButton>(
+      "[udex-button]",
+    )!;
+  }
+
+  applyColorScheme(): void {
+    if (!this.colorScheme) {
+      return;
+    }
+
+    this._colorMode = this.checkColorMode(this.colorScheme);
+    const eyebrowColor = this.checkEyebrowColor(this.colorScheme);
+
+    if (this._colorMode === UDExPromoTileMode.dark) {
+      if (this._button) {
+        this._button.design = this.buttonDesign || UDExButtonDesign.Secondary;
+      }
+      this.style.setProperty("--udex-promo-tile-icon-fill-color", `var(--udexCoreTextLight)`);
+    }
+    this.style.setProperty("--udex-promo-tile-background", `var(--udexColor${this.colorScheme})`);
+    this.style.setProperty("--udex-promo-tile-eyebrow-color", `var(--udexColor${eyebrowColor})`);
+  }
+
+  getColorNumber(colorScheme: string): number {
+    const match = colorScheme.match(/\d+/);
+    return match ? parseInt(match[0]) : 0;
+  }
+
+  checkColorMode(colorScheme: string): UDExPromoTileMode {
+    const number = this.getColorNumber(colorScheme);
+
+    if (number && this._darkModeColors.includes(number)) {
+      return UDExPromoTileMode.dark;
+    }
+    return UDExPromoTileMode.light;
+  }
+
+  checkEyebrowColor(colorScheme: string): string {
+    const number = this.getColorNumber(colorScheme);
+    let color: string = UDExPromoTileColorSheme.Blue8;
+
+    if (number === 7) {
+      color = "NeutralWhite";
+    } else if (this._darkModeColors.includes(number)) {
+      color = colorScheme.replace(`${number}`, `${number - 7}`);
+    } else if (this._lightModeColors.includes(number)) {
+      color = colorScheme.replace(`${number}`, `${number + 7}`);
+    }
+    return color;
+  }
+
+  get isMobile(): boolean {
+    return BreakpointUtils.isAtMost("S");
+  }
+
+  get promoTileContainerText(): string {
+    return this.accessibleName || this.header || UDExPromoTile.i18nBundle.getText(PROMO_TILE);
+  }
+
+  get _showPictogram(): boolean {
+    return !!this.icon || !!this.logoUrl;
+  }
+
+  get _showLogo(): boolean {
+    return !this.icon && !!this.logoUrl;
+  }
+
+  get _imageLabel(): string {
+    return this.imageLabel || UDExPromoTile.i18nBundle.getText(PROMO_TILE_ICON);
+  }
+
+  handleCTAButtonClick(e: Event) {
+    e.preventDefault();
+    this.fireDecoratorEvent("button-click");
+  }
+}
+
+UDExPromoTile.define();
+
+export default UDExPromoTile;

package/src/PromoTileTemplate.tsx

@@ -0,0 +1,68 @@
+import type UDExPromoTile from "./PromoTile.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
+
+export default function PromoTileTemplate(this: UDExPromoTile) {
+  const rootClass = "udex-promo-tile";
+
+  return (
+    <div
+      role="region"
+      class={`${rootClass}__container ${rootClass}--${this.orientation?.toLowerCase()} ${rootClass}--${this._colorMode}`}
+      aria-label={this.promoTileContainerText}>
+      {this._showPictogram &&
+        <div
+          part="image"
+          class={{
+            "udex-promo-tile__pictogram": true,
+            "udex-promo-tile__pictogram--logo": this.logoUrl
+          }}
+          title={this._imageLabel}>
+          {this.icon &&
+            <UI5Icon
+              class={`${rootClass}__icon`}
+              name={this.icon?.toLowerCase()}
+              mode={IconMode.Decorative}
+              accessibleName={this._imageLabel}>
+            </UI5Icon>}
+          {this._showLogo &&
+            <img
+              src={this.logoUrl}
+              class={`${rootClass}__icon`}
+              aria-label={this._imageLabel}
+              alt={this._imageLabel} />}
+        </div>
+      }
+      <div part="content" class={`${rootClass}__content`}>
+        <div class={`${rootClass}__text`}>
+          {this.eyebrow &&
+            <div class={`${rootClass}__eyebrow eyebrow--l`}>{this.eyebrow}</div>
+          }
+          {this.header &&
+            <div part="header" class={`${rootClass}__header`}>{this.header}</div>
+          }
+          <slot></slot>
+        </div>
+        {!!this.button && footerSection.call(this, rootClass)}
+      </div>
+    </div>
+  );
+}
+function footerSection(this: UDExPromoTile, rootClass: string) {
+  return (
+    <>
+      <div part="footer" class={`${rootClass}__footer`}>
+        <UDExButton class={`${rootClass}__btn`}
+          size={UDExButtonSize.Large}
+          design={this.buttonDesign}
+          onClick={this.handleCTAButtonClick}
+          accessibleRole={UDExButtonAccessibleRole.Button}>
+          {this.button}
+        </UDExButton>
+      </div>
+    </>
+  );
+}

package/src/Quote.ts

@@ -20,6 +20,11 @@ export enum UDExMaskType {
   rectangle = "rectangle"
 }
 
+export enum UDExImagePlacement {
+  left = "left",
+  right = "right"
+}
+
 /**
  * @class
  *
@@ -82,7 +87,7 @@ class UDExQuote extends UI5Element {
     * @default "large"
   */
   @property()
-    imageSize: `${UDExSizeType}` = "large";
+    imageSize: `${UDExSizeType}` = UDExSizeType.large;
 
   /**
     * Defines text size
@@ -91,7 +96,7 @@ class UDExQuote extends UI5Element {
     * @default "large"
   */
   @property()
-    textSize: `${UDExSizeType}` = "large";
+    textSize: `${UDExSizeType}` = UDExSizeType.large;
 
   /**
     * Defines image mask
@@ -100,7 +105,16 @@ class UDExQuote extends UI5Element {
     * @default "avatar"
   */
   @property()
-    mask: `${UDExMaskType}` = "avatar";
+    mask: `${UDExMaskType}` = UDExMaskType.avatar;
+
+  /**
+   * Defines image placement
+   *
+   * @public
+   * @default "left"
+   */
+  @property()
+    imagePlacement: `${UDExImagePlacement}` = UDExImagePlacement.left;
 }
 
 UDExQuote.define();

package/src/Search.ts

@@ -801,6 +801,7 @@ class UDExSearch extends UI5Element {
   }
 
   handleSubmitValue(): void {
+    this.handleDebounce.cancel();
     this.onClosePopover();
     this.fireDecoratorEvent("submit-search-value", { value: this.value });
   }