@sapudex/web-components 2.21.0 → 2.23.0

package/src/Footer.ts

@@ -111,66 +111,91 @@ type DetailedEvents = "quick-links-click" | "trending-click" | "about-sap-click"
 /**
  * Triggered on click interaction with logo in footer
  * @public
+ * @param { MouseEvent | Event } originalEvent
  * @allowPreventDefault
  */
 @event("logo-click", { bubbles: true })
 /**
  * Triggered on click interaction with "Back to Top" button
  * @public
+ * @param { MouseEvent | Event } originalEvent
  * @allowPreventDefault
  */
 @event("back-to-top-click", { bubbles: true })
 /**
  * Triggered on click interaction with phone number link in footer
  * @public
+ * @param { MouseEvent | Event } originalEvent
  * @allowPreventDefault
  */
 @event("contact-phone-click", { bubbles: true })
 /**
  * Triggered on click interaction with local country numbers list link
  * @public
+ * @param { MouseEvent | Event } originalEvent
  * @allowPreventDefault
  */
 @event("contact-phone-local-numbers-click", { bubbles: true })
 /**
  * Triggered on click interaction with "Contact us by email" link
  * @public
+ * @param { MouseEvent | Event } originalEvent
  * @allowPreventDefault
  */
 @event("contact-email-click", { bubbles: true })
 /**
  * Triggered on click interaction with "Contact us by chat" link
  * @public
+ * @param { MouseEvent | Event } originalEvent
  * @allowPreventDefault
  */
 @event("contact-chat-click", { bubbles: true })
 /**
  * Triggered on click interaction with a link within "Quick Links" category
  * @public
+ * @param { MouseEvent | Event } originalEvent
+ * @param { HTMLElement } sourceNode
+ * @param { string | undefined } name
  * @allowPreventDefault
  */
 @event("quick-links-click", { bubbles: true })
 /**
  * Triggered on click interaction with a link within "Trending" category
  * @public
+ * @param { MouseEvent | Event } originalEvent
+ * @param { HTMLElement } sourceNode
+ * @param { string | undefined } name
+ * @param { string } [id]
  * @allowPreventDefault
  */
 @event("trending-click", { bubbles: true })
 /**
  * Triggered on click interaction with a link within "About SAP" category
  * @public
+ * @param { MouseEvent | Event } originalEvent
+ * @param { HTMLElement } sourceNode
+ * @param { string | undefined } name
+ * @param { string } [id]
  * @allowPreventDefault
  */
 @event("about-sap-click", { bubbles: true })
 /**
  * Triggered on click interaction with a link within "Site Information" category
  * @public
+ * @param { MouseEvent | Event } originalEvent
+ * @param { HTMLElement } sourceNode
+ * @param { string | undefined } name
+ * @param { string } [id]
  * @allowPreventDefault
  */
 @event("site-information-click", { bubbles: true })
 /**
  * Triggered on click interaction with any of the social media links within footer
  * @public
+ * @param { MouseEvent | Event } originalEvent
+ * @param { HTMLElement } sourceNode
+ * @param { string | undefined } name
+ * @param { string } [id]
  * @allowPreventDefault
  */
 @event("social-media-link-click", { bubbles: true })
@@ -178,6 +203,8 @@ type DetailedEvents = "quick-links-click" | "trending-click" | "about-sap-click"
 /**
  * Triggered when the user clicks on an accordion item.
  * @public
+ * @param { string | undefined } name
+ * @param { boolean } expanded
  */
 @event("accordion-item-click", { bubbles: true })
 

package/src/ImageGridCloud.ts

@@ -0,0 +1,188 @@
+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 type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import ImageGridCloudTemplate from "./ImageGridCloudTemplate.js";
+import type UDExImageGridCloudItem from "./ImageGridCloudItem.js";
+
+// Styles
+import ImageGridCloudCss from "./generated/themes/ImageGridCloud.css.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
+
+export enum UDExImageGridCloudVariable {
+  itemGapL = "--udex-image-grid-cloud-item-gap-l",
+  itemGapS = "--udex-image-grid-cloud-item-gap-s",
+  itemWidthL = "--udex-image-grid-cloud-item-width-l",
+  itemWidthS = "--udex-image-grid-cloud-item-width-s",
+  itemBorderWidth = "--udex-image-grid-cloud-item-border-width",
+}
+
+export enum UDExImageGridCloudSize {
+  Small = "Small",
+  Large = "Large",
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-cloud</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridCloud.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-image-grid-cloud",
+  renderer: jsxRenderer,
+  styles: ImageGridCloudCss,
+  template: ImageGridCloudTemplate,
+})
+
+class UDExImageGridCloud extends UI5Element {
+  /**
+   * Grayscale mode enhances visual harmony and can be used for minimal,
+   * professional layouts or to de-emphasize logos.
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: Boolean })
+    grayscale?: boolean;
+
+  /**
+   * Defines the size of the items.
+   *
+   * @default "Large"
+   * @private
+   */
+  @property({ type: String })
+    size: `${UDExImageGridCloudSize}` = UDExImageGridCloudSize.Large;
+
+  /**
+   * Slot for image grid cloud items.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true })
+    items!: Array<UDExImageGridCloudItem>;
+
+  _rootId = "udex-image-grid-cloud";
+  _rowClassName = "udex-image-grid-cloud__row";
+  _container!: HTMLElement;
+  _items: Array<Element> = [];
+
+  _handleResizeBound: ResizeObserverCallback;
+
+  constructor() {
+    super();
+    this._handleResizeBound = this.handleResize.bind(this);
+  }
+
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
+  onAfterRendering() {
+    this._container = this.containerElement;
+    this._items = this.itemsElements;
+    this.renderLayout();
+  }
+
+  handleResize(): void {
+    this.renderLayout();
+  }
+
+  renderLayout() {
+    if (this.isContainerEmpty) {
+      return;
+    }
+
+    const ITEM_WIDTH = this.itemWidth + this.itemHorizontalBorderWidth;
+    const GAP = this.itemGap;
+
+    const existingRows = Array.from(this._container.querySelectorAll(`.${this._rowClassName}`));
+    existingRows.forEach(row => row.remove());
+
+    const containerWidth = this._container.clientWidth;
+    const itemsPerRow = Math.max(Math.floor((containerWidth + GAP) / (ITEM_WIDTH + GAP)) || 0, 1);
+
+    let index = 0;
+    let rowIndex = 0;
+
+    while (index < this._items.length) {
+      const count = rowIndex % 2 === 0 ? itemsPerRow : Math.max(itemsPerRow - 1, 1);
+      const row = document.createElement("div");
+      row.className = this._rowClassName;
+
+      for (let i = 0; i < count && index < this._items.length; i++, index++) {
+        row.appendChild(this._items[index]);
+      }
+
+      this._container.appendChild(row);
+      rowIndex++;
+    }
+  }
+
+  _getVariableValue(variableName: string): string {
+    return window.getComputedStyle(this).getPropertyValue(`${variableName}`);
+  }
+
+  get itemWidth(): number {
+    const variableName = this.isSmallSize || this.isMobile
+      ? UDExImageGridCloudVariable.itemWidthS
+      : UDExImageGridCloudVariable.itemWidthL;
+    return parseInt(this._getVariableValue(variableName));
+  }
+
+  get itemGap(): number {
+    const variableName = this.isSmallSize || this.isMobile
+      ? UDExImageGridCloudVariable.itemGapS
+      : UDExImageGridCloudVariable.itemGapL;
+    return parseInt(this._getVariableValue(variableName));
+  }
+
+  get itemHorizontalBorderWidth(): number {
+    const border = parseInt(this._getVariableValue(UDExImageGridCloudVariable.itemBorderWidth));
+    return border * 2;
+  }
+
+  get isSmallSize(): boolean {
+    return this.size === UDExImageGridCloudSize.Small;
+  }
+
+  get containerElement(): HTMLElement {
+    return this.shadowRoot!.getElementById(this._rootId)!;
+  }
+
+  get itemsElements(): Array<Element> {
+    return Array.from(this.containerElement.children);
+  }
+
+  get isMobile(): boolean {
+    return BreakpointUtils.isAtMost("S");
+  }
+
+  get isContainerEmpty(): boolean {
+    return !this._container || this._items.length === 0;
+  }
+}
+
+UDExImageGridCloud.define();
+
+export default UDExImageGridCloud;

package/src/ImageGridCloudItem.ts

@@ -0,0 +1,57 @@
+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 jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+
+import ImageGridCloudItemTemplate from "./ImageGridCloudItemTemplate.js";
+
+// Styles
+import ImageGridCloudItemCss from "./generated/themes/ImageGridCloudItem.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-cloud-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridCloudItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-image-grid-cloud-item",
+  renderer: jsxRenderer,
+  styles: ImageGridCloudItemCss,
+  template: ImageGridCloudItemTemplate,
+})
+
+class UDExImageGridCloudItem extends UI5Element {
+  /**
+   * Defines the source URL
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    src!: string;
+
+  /**
+   * Defines image alt text
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    alt!: string;
+}
+
+UDExImageGridCloudItem.define();
+
+export default UDExImageGridCloudItem;

package/src/ImageGridCloudItemTemplate.tsx

@@ -0,0 +1,11 @@
+import type ImageGridCloudItem from "./ImageGridCloudItem.js";
+
+export default function ImageGridCloudItemTemplate(this: ImageGridCloudItem) {
+  return (
+    <img
+      class="udex-image-grid-cloud-item-img"
+      src={this.src}
+      alt={this.alt}
+    />
+  );
+}

package/src/ImageGridCloudTemplate.tsx

@@ -0,0 +1,16 @@
+import type ImageGridCloud from "./ImageGridCloud.js";
+import UDExImageGridCloudItem from "./ImageGridCloudItem.js";
+
+export default function ImageGridCloudTemplate(this: ImageGridCloud) {
+  return (
+    <div id="udex-image-grid-cloud">
+      {this.items.map(({ src, alt }) =>
+        <UDExImageGridCloudItem
+          class="udex-image-grid-cloud__item"
+          src={src}
+          alt={alt}>
+        </UDExImageGridCloudItem>
+      )}
+    </div>
+  );
+}

package/src/ImageGridTicker.ts

@@ -57,6 +57,7 @@ type UDExImageGridTickerPlayBtnClickEventDetail = {
  * Fired event when the user click on a play/paused button.
  *
  * @public
+ * @param {boolean} isPaused - Indicates whether the animation is paused.
  */
 @event("play-button-click", { bubbles: true })
 
@@ -78,12 +79,11 @@ class UDExImageGridTicker extends UI5Element {
    * Grayscale mode enhances visual harmony and can be used for minimal,
    * professional layouts or to de-emphasize logos.
    *
-   * @default false
+   * @default undefined
    * @public
    */
   @property({ type: Boolean })
-    grayscale = false;
-
+    grayscale?: boolean;
   /**
    * Indicates whether the image grid ticker is scrollable.
    *

package/src/LinkListItem.ts

@@ -42,6 +42,7 @@ type UDExListLinkItemClickEventDetail = {
 /**
  * Triggered when the user clicks on an item.
  * @public
+ * @param {Event} originalEvent the original event object
  */
 @event("item-click", { bubbles: true })
 

package/src/List.ts

@@ -63,6 +63,9 @@ type UDExListSelectionChangeEventDetail = {
    * Fired when selection is changed by user interaction
    *
    * @public
+   * @param {Array<UDExListItemBase>} listItems All items inside the list
+   * @param {Array<UDExListItemBase>} selectedItems Currently selected items
+   * @param {HTMLElement} item The item that triggered the event
    */
 @event("selection-change", { bubbles: true })
 
@@ -232,7 +235,7 @@ class UDExList extends UI5Element {
 
     this.unsetTabIndexByIndex(items, currentSelectedIndex);
     this.setTabIndexByIndex(items, previousSelectIndex);
-    items[previousSelectIndex].focus();
+    setTimeout(() => { items[previousSelectIndex].focus(); }, 0);
   }
 
   handleDownArrow(e: KeyboardEvent): void {
@@ -264,7 +267,7 @@ class UDExList extends UI5Element {
 
     this.unsetTabIndexByIndex(items, currentSelectedIndex);
     this.setTabIndexByIndex(items, nextSelectIndex);
-    items[nextSelectIndex].focus();
+    setTimeout(() => { items[nextSelectIndex].focus(); }, 0);
   }
 
   handleHomeKey(e: KeyboardEvent): void {
@@ -316,7 +319,6 @@ class UDExList extends UI5Element {
 
   handleLetterKey(e: KeyboardEvent): void {
     const letterKey = e.key;
-    e.stopPropagation();
     e.preventDefault();
     this._focusHandler.focusMatchingListItem(letterKey);
   }

package/src/ListGroupHeader.ts

@@ -48,6 +48,7 @@ type UDExListGroupHeaderBaseHeaderPressEventDetail = {
    * Fired when selectable group header is pressed
    *
    * @public
+   * @param {HTMLElement} item The pressed group header item
    */
 @event("header-press", { bubbles: true })
 

package/src/ListGroupHeaderBase.ts

@@ -189,6 +189,10 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
     const controlledClassName = this.controlled ? `${listGroupHeaderClass}_controlled` : "";
     return `${listGroupHeaderClass} ${this._additionalClassName} ${controlledClassName}`;
   }
+
+  get listItem(): UDExListItemBase {
+    return this.shadowRoot!.querySelector<UDExListItemBase>("[udex-list-item]")!;
+  }
 }
 
 export default UDExListGroupHeaderBase;

package/src/ListItem.hbs

@@ -33,7 +33,6 @@
                 part="radio"
                 tabindex="-1"
                 accessible-name="radio {{stateAccessibleName}}"
-                ?aria-selected="{{selected}}"
                 ?checked="{{selected}}"
                 ?disabled="{{disabled}}">
             </udex-radio-button>

package/src/ListItem.ts

@@ -78,12 +78,14 @@ type UDExListItemItemPressEventDetail = {
  * Fired event when the user click on a list item.
  *
  * @public
+ * @param {boolean} selected Indicates whether the item is selected or not
  */
 @event("item-press", { bubbles: true })
 /**
  * Fired event when the user focuses on a list item.
  *
  * @public
+ * @param {HTMLElement} item The focused list item
  */
 @event("item-focus", { bubbles: true })
 

package/src/ListItemBase.ts

@@ -32,14 +32,20 @@ type UDExListItemBaseEventDetail = {
 
 /**
  * Fired event when the user click on a first icon.
- *
+ * @param { PointerEvent } originalEvent The original event object
+ * @param { HTMLElement } item The list item
  * @public
+ * @param { PointerEvent } originalEvent The original event object
+ * @param { HTMLElement } item The list item
  */
 @event("first-icon-click", { bubbles: true })
 /**
  * Fired event when the user click on a second icon.
- *
+ * @param { PointerEvent } originalEvent The original event object
+ * @param { HTMLElement } item The list item
  * @public
+ * @param { PointerEvent } originalEvent The original event object
+ * @param { HTMLElement } item The list item
  */
 @event("second-icon-click", { bubbles: true })
 
@@ -133,11 +139,23 @@ class UDExListItemBase extends UI5Element {
   @property()
     type: `${UDExListStyleType}` = UDExListStyleType.None;
 
+  /**
+   * Defines the icon of the component.
+   *
+   * @default ""
+   * @private
+   */
   @property({ type: String })
     _icon: string = "";
 
+  /**
+   * Defines the tab index of the component.
+   *
+   * @default ""
+   * @private
+   */
   @property({ type: String })
-    _tabIndex!: string;
+    _tabIndex: string = "";
 
   _fireIconClickEvent(e: PointerEvent): void {
     const target = e.target as HTMLElement;

package/src/ListSelectAll.ts

@@ -49,6 +49,7 @@ type UDExListSelectAllSelectAllEventDetail = {
    * Fired when the user clicks on the Select All header.
    *
    * @public
+   * @param {HTMLElement} item The select all item
    */
 @event("select-all", { bubbles: true })
 

package/src/MastheadCountrySelector.ts

@@ -88,6 +88,12 @@ type UDExMastheadCountrySelectorSearchEventDetail = {
  * Fires when region item is clicked
  *
  * @public
+ * @param {Event} originalEvent the original event object
+ * @param {Object} item the clicked region item
+ * @param {string} item.title the title of the region
+ * @param {Array} item.countries the countries of the region
+ * @param {AnalyticsName} analyticsName The analytics name for the event
+ * @param {HTMLElement} sourceNode The source node which triggered the event
  */
 @event("region-item-click", { bubbles: true })
 
@@ -95,6 +101,13 @@ type UDExMastheadCountrySelectorSearchEventDetail = {
  * Fires when region item is clicked
  *
  * @public
+ * @param {Event} originalEvent the original event object
+ * @param {Object} item the clicked country item
+ * @param {string} item.displayTitle the display title of the country
+ * @param {string} item.countryCode the country code of the country
+ * @param {string} item.url the url of the country
+ * @param {AnalyticsName} analyticsName The analytics name for the event
+ * @param {HTMLElement} sourceNode The source node which triggered the event
  */
 @event("country-item-click", { bubbles: true })
 
@@ -102,6 +115,8 @@ type UDExMastheadCountrySelectorSearchEventDetail = {
  * Fired event when the user typed to search field.
  *
  * @public
+ * @param {string} value The search value
+ * @param {AnalyticsName} analyticsName The analytics name for the event
  */
 @event("country-selector-search", { bubbles: true })
 

package/src/MastheadItem.ts

@@ -105,6 +105,10 @@ type UDExMastheadDropdownEventDetail = {
  *
  * @allowPreventDefault
  * @public
+ * @param {Event} originalEvent the original event object
+ * @param {UDExMastheadItem} item the clicked item
+ * @param {AnalyticsName} analyticsName the analytics name
+ * @param {HTMLElement} sourceNode the source node
  */
 @event("item-click", { bubbles: true })
 
@@ -113,6 +117,9 @@ type UDExMastheadDropdownEventDetail = {
  *
  * @allowPreventDefault
  * @public
+ * @param {string} title the title of the item
+ * @param {UDExMastheadDropdownItemAction} action the action that caused the event
+ * @param {AnalyticsName} analyticsName the analytics name
  */
 @event("dropdown-closed", { bubbles: true })
 
@@ -121,6 +128,9 @@ type UDExMastheadDropdownEventDetail = {
  *
  * @allowPreventDefault
  * @public
+ * @param {string} title the title of the item
+ * @param {UDExMastheadDropdownItemAction} action the action that caused the event
+ * @param {AnalyticsName} analyticsName the analytics name
  */
 @event("dropdown-opened", { bubbles: true })
 

package/src/MastheadMenu.ts

@@ -77,6 +77,12 @@ type UDExMastheadMenuMenuItemClickEventDetail = {
  *
  * @allowPreventDefault
  * @public
+ * @param {string} category The category of the clicked menu item
+ * @param {Array<string>} analyticsPath The analytics path for the clicked menu item
+ * @param {AnalyticsName} analyticsName The analytics name for the clicked menu item
+ * @param {PointerEvent} originalEvent The original event object
+ * @param {UDExMastheadMenuItem} item The clicked menu item
+ * @param {HTMLElement} sourceNode The source node of the clicked menu item
  */
 @event("menu-item-click", { bubbles: true })
 

package/src/MastheadMobileMenu.ts

@@ -70,6 +70,14 @@ type UDExMastheadMobileMenuExploreClickEventDetail = {
  *
  * @allowPreventDefault
  * @public
+ * @param {PointerEvent | KeyboardEvent} originalEvent The original event object
+ * @param {UDExMastheadMenuItem} item The clicked item
+ * @param {string} [category] The category of the clicked item
+ * @param {boolean} isMobile Indicates whether the click happened in mobile menu
+ * @param {boolean} isBack Indicates whether the clicked item is a back button
+ * @param {AnalyticsName} analyticsName The analytics name for the clicked item
+ * @param {Array<string>} analyticsPath The analytics path for the clicked item
+ * @param {HTMLElement} sourceNode The source node of the clicked item
  */
 @event("item-click", { cancelable: true, bubbles: false })
 
@@ -78,6 +86,9 @@ type UDExMastheadMobileMenuExploreClickEventDetail = {
  *
  * @allowPreventDefault
  * @public
+ * @param {PointerEvent | KeyboardEvent} originalEvent The original event object
+ * @param {AnalyticsName} analyticsName The analytics name for the clicked item
+ * @param {HTMLElement} sourceNode The source node of the clicked item
  */
 @event("explorer-menu-click", { bubbles: true })