@sapudex/web-components 2.17.1 → 2.19.0

package/src/FooterTemplate.tsx

@@ -16,6 +16,7 @@ import UDExAccordionItem from "./AccordionItem.js";
 import UDExButton from "./Button.js";
 import UDExButtonDesign from "./types/ButtonDesign.js";
 import UDExButtonSize from "./types/ButtonSize.js";
+import type { AriaRole } from "@ui5/webcomponents-base";
 
 export default function FooterTemplate(this: Footer) {
   const rootClass = "udex-footer";
@@ -178,7 +179,7 @@ export default function FooterTemplate(this: Footer) {
           <span className={`${rootClass}__copyright-text`}>{this.copyrightText}</span>
         </div>
 
-        {this.socialLinksArray.length > 0 && (
+        {(this.socialLinksArray.length > 0 || this.hasSocialLinksSlot) && (
           <ul className={`${rootClass}__social-container`}>
             {this.socialLinksArray.map((social, index) => (
               <UDExSocialMediaButton
@@ -193,6 +194,13 @@ export default function FooterTemplate(this: Footer) {
                 onui5-click={this._onSocialMediaLinkClick}>
               </UDExSocialMediaButton>
             ))}
+            {this.hasSocialLinksSlot && (
+              <>
+                {this.customSocialLinks.map(link =>
+                  <slot name={link._individualSlot}></slot>
+                )}
+              </>
+            )}
           </ul>
         )}
       </div>
@@ -203,8 +211,7 @@ export default function FooterTemplate(this: Footer) {
         onClick={this.onBackToTopClick}
         design={UDExButtonDesign.Tertiary}
         size={UDExButtonSize.Large}
-        tooltip={this.backToTopTitle}
-        accessibleName={this.backToTopTitle}>
+        tooltip={this.backToTopTitle}>
       </UDExButton>
     </footer>
   );
@@ -215,7 +222,7 @@ function mobileNavigation(this: Footer, rootClass: string) {
     <UDExAccordion class={`${rootClass}__accordion`}>
       {this.quickLinksArray.length > 0 && (
         <>
-          <UDExAccordionItem label={this._quickLinksTitle} class={`${rootClass}__action-item`}>
+          <UDExAccordionItem onAccordionItemClick={this.handleAccordionItemClick} 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}>
@@ -224,7 +231,8 @@ function mobileNavigation(this: Footer, rootClass: string) {
                     aria-describedby={`${rootClass}__quick-links`}
                     href={link.url}
                     data-id={link.id}
-                    onClick={this._onQuickLinksClick}>
+                    onClick={this._onQuickLinksClick}
+                    {...(link.role ? { "role": link.role as AriaRole } : {})}>
                     {link.title}
                   </a>
                 </li>
@@ -239,7 +247,7 @@ function mobileNavigation(this: Footer, rootClass: string) {
 
       {this.trendingLinksArray.length > 0 && (
         <>
-          <UDExAccordionItem label={this._trendingTitle} class={`${rootClass}__action-item`}>
+          <UDExAccordionItem onAccordionItemClick={this.handleAccordionItemClick} label={this._trendingTitle} class={`${rootClass}__action-item`}>
             <ul className={`${rootClass}__links-list ${rootClass}__links-list--mobile`}>
               {this.trendingLinksArray.map((link, index) => (
                 <li key={index}>
@@ -248,7 +256,8 @@ function mobileNavigation(this: Footer, rootClass: string) {
                     aria-describedby={`${rootClass}__footer__trending`}
                     href={link.url}
                     data-id={link.id}
-                    onClick={this._onTrendingClick}>
+                    onClick={this._onTrendingClick}
+                    {...(link.role ? { "role": link.role as AriaRole } : {})}>
                     {link.title}
                   </a>
                 </li>
@@ -263,7 +272,7 @@ function mobileNavigation(this: Footer, rootClass: string) {
 
       {this.aboutLinksArray.length > 0 && (
         <>
-          <UDExAccordionItem label={this._aboutSapTitle} class={`${rootClass}__action-item`}>
+          <UDExAccordionItem onAccordionItemClick={this.handleAccordionItemClick} label={this._aboutSapTitle} class={`${rootClass}__action-item`}>
             <ul className={`${rootClass}__links-list ${rootClass}__links-list--mobile`}>
               {this.aboutLinksArray.map((link, index) => (
                 <li key={index}>
@@ -272,7 +281,8 @@ function mobileNavigation(this: Footer, rootClass: string) {
                     aria-describedby={`${rootClass}__about`}
                     href={link.url}
                     data-id={link.id}
-                    onClick={this._onAboutSapClick}>
+                    onClick={this._onAboutSapClick}
+                    {...(link.role ? { "role": link.role as AriaRole } : {})}>
                     {link.title}
                   </a>
                 </li>
@@ -287,7 +297,7 @@ function mobileNavigation(this: Footer, rootClass: string) {
 
       {this.siteInformationLinksArray.length > 0 && (
         <>
-          <UDExAccordionItem label={this._siteInformationTitle} class={`${rootClass}__action-item`}>
+          <UDExAccordionItem onAccordionItemClick={this.handleAccordionItemClick} label={this._siteInformationTitle} class={`${rootClass}__action-item`}>
             <ul className={`${rootClass}__links-list rootClass__links-list--mobile`}>
               {this.siteInformationLinksArray.map((link, index) => (
                 <li key={index}>
@@ -296,7 +306,8 @@ function mobileNavigation(this: Footer, rootClass: string) {
                     aria-describedby={`${rootClass}__site-information`}
                     href={link.url}
                     data-id={link.id}
-                    onClick={this._onSiteInformationClick}>
+                    onClick={this._onSiteInformationClick}
+                    {...(link.role ? { "role": link.role as AriaRole } : {})}>
                     {link.title}
                   </a>
                 </li>
@@ -329,7 +340,8 @@ function desktopNavigation(this: Footer, rootClass: string) {
                     aria-describedby={`${rootClass}__quick-links`}
                     data-id={link.id}
                     href={link.url}
-                    onClick={this._onQuickLinksClick}>
+                    onClick={this._onQuickLinksClick}
+                    {...(link.role ? { "role": link.role as AriaRole } : {})}>
                     {link.title}
                   </a>
                 </li>
@@ -352,7 +364,8 @@ function desktopNavigation(this: Footer, rootClass: string) {
                     aria-describedby={`${rootClass}__footer__trending`}
                     data-id={link.id}
                     href={link.url}
-                    onClick={this._onTrendingClick}>
+                    onClick={this._onTrendingClick}
+                    {...(link.role ? { "role": link.role as AriaRole } : {})}>
                     {link.title}
                   </a>
                 </li>
@@ -375,7 +388,8 @@ function desktopNavigation(this: Footer, rootClass: string) {
                     aria-describedby={`${rootClass}__about`}
                     data-id={link.id}
                     href={link.url}
-                    onClick={this._onAboutSapClick}>
+                    onClick={this._onAboutSapClick}
+                    {...(link.role ? { "role": link.role as AriaRole } : {})}>
                     {link.title}
                   </a>
                 </li>
@@ -398,7 +412,8 @@ function desktopNavigation(this: Footer, rootClass: string) {
                     aria-describedby={`${rootClass}__site-information`}
                     data-id={link.id}
                     href={link.url}
-                    onClick={this._onSiteInformationClick}>
+                    onClick={this._onSiteInformationClick}
+                    {...(link.role ? { "role": link.role as AriaRole } : {})}>
                     {link.title}
                   </a>
                 </li>

package/src/ImageGridTicker.ts

@@ -0,0 +1,355 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.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/Device.js";
+import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
+import { PAUSE_BUTTON_ACCESSIBLE_NAME, PLAY_BUTTON_ACCESSIBLE_NAME } from "./generated/i18n/i18n-defaults.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
+import type UDExImageGridTickerItem from "./ImageGridTickerItem.js";
+import ImageGridTickerItem from "./ImageGridTickerItem.js";
+import ImageGridTickerTemplate from "./ImageGridTickerTemplate.js";
+
+// Styles
+import ImageGridTickerCss from "./generated/themes/ImageGridTicker.css.js";
+
+export enum UDExImageGridTickerVariable {
+  itemGaps = "--udex-image-grid-ticker-item-gaps",
+  itemWidth = "--udex-image-grid-ticker-item-width",
+}
+
+type UDExImageGridTickerPlayBtnClickEventDetail = {
+  isPaused: boolean;
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-ticker</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridTicker.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-image-grid-ticker",
+  renderer: jsxRenderer,
+  styles: ImageGridTickerCss,
+  template: ImageGridTickerTemplate,
+  dependencies: [ImageGridTickerItem],
+})
+
+/**
+ * Fired event when the user click on a play/paused button.
+ *
+ * @public
+ */
+@event("play-button-click", { bubbles: true })
+
+class UDExImageGridTicker extends UI5Element {
+  eventDetails!: {
+    "play-button-click": UDExImageGridTickerPlayBtnClickEventDetail;
+  };
+
+  /**
+   * Slot for image grid ticker items.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true, individualSlots: true })
+    items!: Array<UDExImageGridTickerItem>;
+
+  /**
+   * Grayscale mode enhances visual harmony and can be used for minimal,
+   * professional layouts or to de-emphasize logos.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    grayscale = false;
+
+  /**
+   * Indicates whether the image grid ticker is scrollable.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _isScrollable = false;
+
+  /**
+   * Indicates whether the screen size is small.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _isSmallScreen = false;
+
+  /**
+   * Indicates whether the animation is paused.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _isPaused = false;
+
+  /**
+   * Indicates focus in state.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _isFocusIn: boolean = false;
+
+  /**
+   * Indicates mobile view.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _isMobileView: boolean = false;
+
+  /**
+   * Defines direction of the component.
+   *
+   * @default undefined
+   * @private
+   */
+  @property({ type: String })
+    _direction!: string;
+
+  _isPlayBtnClicked: boolean = false;
+  _isMouseDown: boolean = false;
+  _handleResizeBound: ResizeObserverCallback;
+
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
+  constructor() {
+    super();
+    this._isMobileView = !this.isAtLeastBreakpointM;
+    this._handleResizeBound = this._handleResize.bind(this);
+  }
+
+  onAfterRendering(): void {
+    if (this._isMobileView) {
+      this._handleMobileView();
+      return;
+    }
+
+    this._handleDesktopView();
+  }
+
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._handleResizeBound);
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
+  _handleResize(): void {
+    this._isMobileView = !this.isAtLeastBreakpointM;
+    this._checkScrollable();
+  }
+
+  _checkScrollable(): void {
+    if (!this.grid || !this.track || this._isMobileView) {
+      this._isScrollable = false;
+      return;
+    }
+
+    const { width: itemWidth, gaps: itemGaps } = this.itemDimensions;
+    const totalItemWidth = itemWidth + itemGaps;
+    const totalWidth = this.items.length * totalItemWidth;
+
+    this._isScrollable = totalWidth > this.grid.offsetWidth;
+  }
+
+  _startAnimation(): void {
+    if (this._isScrollable && !this._isPlayBtnClicked && !this._isMobileView) {
+      this._isPaused = false;
+    }
+  }
+
+  _stopAnimation(): void {
+    if (this._isScrollable && !this._isMobileView) {
+      this._isPaused = true;
+    }
+  }
+
+  _toggleAnimation(): void {
+    this._isPlayBtnClicked = !this._isPlayBtnClicked;
+    if (this._isPaused) {
+      this._startAnimation();
+    } else {
+      this._stopAnimation();
+    }
+  }
+
+  _onFocusIn(): void {
+    if (this._isMouseDown || !this._isScrollable) {
+      return;
+    }
+
+    this._isFocusIn = true;
+    this._stopAnimation();
+
+    const focusedItem = this.trackItems[this.focusedIndex];
+    const isLastItem = this.focusedIndex === this.trackItems.length - 1;
+    const { right, left } = focusedItem.getBoundingClientRect();
+    const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+    const isPartiallyVisible = right > 0 && left < windowWidth;
+
+    if (isPartiallyVisible) {
+      focusedItem.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+    }
+
+    if (isLastItem) {
+      this._focusLastItem();
+    }
+  }
+
+  _onFocusOut(): void {
+    this._isFocusIn = false;
+    this._startAnimation();
+  }
+
+  _onKeyDown(e: KeyboardEvent): void {
+    if (isLeft(e) || isRight(e)) {
+      e.preventDefault();
+      const direction = (isLeft(e) && !this.isRtl) || (isRight(e) && this.isRtl) ? -1 : 1;
+      const index = this.focusedIndex + direction;
+
+      if (index >= 0 && index < this.trackItems.length) {
+        this._focusItem(this.trackItems[index]);
+      }
+    }
+  }
+
+  _onMouseDown(): void {
+    this._isMouseDown = true;
+  }
+
+  _onMouseUp(): void {
+    this._isMouseDown = false;
+  }
+
+  _focusLastItem(): void {
+    const lastItem = this.trackItems[this.items.length - 1];
+    this._focusItem(lastItem);
+    lastItem.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+    });
+  }
+
+  _handleMobileView(): void {
+    this._isScrollable = false;
+    this._stopAnimation();
+  }
+
+  _handleDesktopView(): void {
+    this._handleDirection();
+    this._checkScrollable();
+    if (this._isScrollable && !this._isPaused && !this._isMobileView) {
+      this._startAnimation();
+    } else {
+      this._stopAnimation();
+    }
+  }
+
+  _focusItem(item: HTMLElement): void {
+    const link = item.shadowRoot?.querySelector(".udex-image-grid-ticker-item__link") as HTMLElement;
+    link.focus();
+  }
+
+  _handleDirection(): void {
+    const directionStyles = window.getComputedStyle(this).getPropertyValue("direction");
+    this._direction = directionStyles || "ltr";
+  }
+
+  _onPlayButtonClick(): void {
+    this._toggleAnimation();
+    this._firePlayButtonClickEvent();
+  }
+
+  _firePlayButtonClickEvent(): void {
+    this.fireDecoratorEvent("play-button-click", {
+      isPaused: this._isPaused,
+    });
+  }
+
+  _getPropertyValues(variable: string): number {
+    const itemStyles = window.getComputedStyle(this.items[0]);
+    return parseInt(itemStyles.getPropertyValue(variable));
+  }
+
+  get itemDimensions(): { width: number; gaps: number } {
+    const width = this._getPropertyValues(UDExImageGridTickerVariable.itemWidth);
+    const gaps = this._getPropertyValues(UDExImageGridTickerVariable.itemGaps) * 2;
+    return { width, gaps };
+  }
+
+  get trackItems(): HTMLElement[] {
+    return Array.from(this.track.children) as HTMLElement[];
+  }
+
+  get focusedIndex(): number {
+    return this.trackItems.findIndex(item => item.matches(":focus"));
+  }
+
+  get isAtLeastBreakpointM(): boolean {
+    return BreakpointUtils.isAtLeast("M");
+  }
+
+  get track(): HTMLElement {
+    return this.shadowRoot?.querySelector(".udex-image-grid-ticker__track") as HTMLElement;
+  }
+
+  get grid(): HTMLElement {
+    return this.shadowRoot?.querySelector(".udex-image-grid-ticker") as HTMLElement;
+  }
+
+  get isRtl(): boolean {
+    return this._direction === "rtl";
+  }
+
+  get playBtnTooltipText(): string {
+    return this._isPaused
+      ? UDExImageGridTicker.i18nBundle.getText(PLAY_BUTTON_ACCESSIBLE_NAME)
+      : UDExImageGridTicker.i18nBundle.getText(PAUSE_BUTTON_ACCESSIBLE_NAME);
+  }
+}
+
+UDExImageGridTicker.define();
+
+export default UDExImageGridTicker;
+export type { UDExImageGridTickerPlayBtnClickEventDetail };

package/src/ImageGridTickerItem.ts

@@ -0,0 +1,81 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { isDesktop } from "@ui5/webcomponents-base/Device.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import ImageGridTickerItemTemplate from "./ImageGridTickerItemTemplate.js";
+
+// Styles
+import ImageGridTickerItemCss from "./generated/themes/ImageGridTickerItem.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-ticker-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridTickerItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-image-grid-ticker-item",
+  renderer: jsxRenderer,
+  styles: ImageGridTickerItemCss,
+  template: ImageGridTickerItemTemplate,
+})
+
+class UDExImageGridTickerItem extends UI5Element {
+  /**
+   * Defines the source URL
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    src!: string;
+
+  /**
+   * Defines image alt text
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    alt?: string;
+
+  /**
+   * Defines tooltip on hover
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    tooltip?: string;
+
+  /**
+   * Defines link URL
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    href?: string;
+
+  onEnterDOM(): void {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+  }
+}
+
+UDExImageGridTickerItem.define();
+
+export default UDExImageGridTickerItem;

package/src/ImageGridTickerItemTemplate.tsx

@@ -0,0 +1,28 @@
+import type ImageGridTickerItem from "./ImageGridTickerItem.js";
+
+export default function ImageGridTickerItemTemplate(this: ImageGridTickerItem) {
+  const rootClass = "udex-image-grid-ticker-item";
+  const img = (
+    <img
+      class={`${rootClass}__img`}
+      part="grid-image"
+      src={this.src}
+      alt={this.alt}
+      title={this.tooltip}
+    />
+  );
+
+  return (
+    <div class={rootClass}>
+      {this.href && this.href.length > 0
+        ? <a
+          class={`${rootClass}__link`}
+          href={this.href}
+          title={this.tooltip}>
+          {img}
+        </a>
+        : img
+      }
+    </div>
+  );
+}

package/src/ImageGridTickerTemplate.tsx

@@ -0,0 +1,50 @@
+import type ImageGridTicker from "./ImageGridTicker.js";
+import ImageGridTickerItem from "./ImageGridTickerItem.js";
+import UDExButton from "./Button.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import playIcon from "@ui5/webcomponents-icons/dist/play.js";
+import pauseIcon from "@ui5/webcomponents-icons/dist/pause.js";
+
+export default function ImageGridTickerTemplate(this: ImageGridTicker) {
+  const rootClass = "udex-image-grid-ticker";
+  const items = this._isScrollable && !this._isMobileView && !this._isFocusIn ? [...this.items, ...this.items] : this.items;
+  const btnIcon = this._isPaused ? playIcon : pauseIcon;
+
+  return (
+    <div class={rootClass}>
+      {this._isScrollable &&
+        <div className={`${rootClass}__play-button-holder`}>
+          <UDExButton
+            class={`${rootClass}__play-button`}
+            icon={btnIcon}
+            design={UDExButtonDesign.Invisible}
+            onClick={this._onPlayButtonClick}
+            tooltip={this.playBtnTooltipText}>
+          </UDExButton>
+        </div>
+      }
+      <div className={`${rootClass}__track-holder`}>
+        <div className={`${rootClass}__track-wrapper`}>
+          <div
+            className={`${rootClass}__track`}
+            onMouseEnter={this._stopAnimation}
+            onMouseLeave={this._startAnimation}
+            onFocusIn={this._onFocusIn}
+            onFocusOut={this._onFocusOut}
+            onKeyDown={this._onKeyDown}
+            onMouseDown={this._onMouseDown}
+            onMouseUp={this._onMouseUp}>
+            {items.map(item =>
+              <ImageGridTickerItem
+                src={item.src}
+                alt={item.alt}
+                tooltip={item.tooltip}
+                href={item.href}>
+              </ImageGridTickerItem>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}