@sapudex/web-components 2.24.0 → 2.25.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.24.0",
+  "version": "2.25.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/Accordion.ts

@@ -13,6 +13,7 @@ import {
 import AccordionTemplate from "./AccordionTemplate.js";
 import type UDExAccordionItem from "./AccordionItem.js";
 import { COLLAPSE_ALL, EXPAND_ALL } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import AccordionCss from "./generated/themes/Accordion.css.js";
@@ -241,8 +242,8 @@ class UDExAccordion extends UI5Element {
 
   get toggleAllText(): string {
     return this._allExpanded
-      ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)
-      : UDExAccordion.i18nBundle.getText(EXPAND_ALL);
+      ? translate(UDExAccordion, COLLAPSE_ALL)
+      : translate(UDExAccordion, EXPAND_ALL);
   }
 
   get items(): {item: UDExAccordionItem}[] {

package/src/Avatar.ts

@@ -8,6 +8,8 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { ATTENTION_BADGE, AVATAR_TEXT, DISABLED } from "./generated/i18n/i18n-defaults.js";
 import type AvatarColorScheme from "@ui5/webcomponents/dist/types/AvatarColorScheme.js";
+import translate from "./utils/translate.js";
+
 // Template
 import AvatarTemplate from "./AvatarTemplate.js";
 
@@ -254,9 +256,9 @@ class UDExAvatar extends UI5Element {
   }
 
   get avatarAccessibleName(): string {
-    let accName = `${this.accessibleName ? this.accessibleName : `${UDExAvatar.i18nBundle.getText(AVATAR_TEXT)} ${this.initials}`}`;
-    accName += ` ${this.disabled ? UDExAvatar.i18nBundle.getText(DISABLED) : ""}`;
-    accName += ` ${this.showAttentionBadge ? UDExAvatar.i18nBundle.getText(ATTENTION_BADGE) : ""}`;
+    let accName = `${this.accessibleName ? this.accessibleName : `${translate(UDExAvatar, AVATAR_TEXT)} ${this.initials}`}`;
+    accName += ` ${this.disabled ? translate(UDExAvatar, DISABLED) : ""}`;
+    accName += ` ${this.showAttentionBadge ? translate(UDExAvatar, ATTENTION_BADGE) : ""}`;
     return accName;
   }
 }

package/src/Breadcrumbs.ts

@@ -23,6 +23,7 @@ import {
   BREADCRUMBS_ARIA_LABEL,
   BREADCRUMBS_OVERFLOW_ARIA_LABEL,
 } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import BreadcrumbsCss from "./generated/themes/Breadcrumbs.css.js";
@@ -322,15 +323,15 @@ class UDExBreadcrumbs extends UI5Element {
   }
 
   get _breadcrumbsAccessibleNameText(): string {
-    return UDExBreadcrumbs.i18nBundle.getText(BREADCRUMBS_ARIA_LABEL);
+    return translate(UDExBreadcrumbs, BREADCRUMBS_ARIA_LABEL);
   }
 
   get _dropdownArrowAccessibleNameText(): string {
-    return UDExBreadcrumbs.i18nBundle.getText(BREADCRUMBS_OVERFLOW_ARIA_LABEL);
+    return translate(UDExBreadcrumbs, BREADCRUMBS_OVERFLOW_ARIA_LABEL);
   }
 
   get _dropdownAccessibleNameText(): string {
-    return UDExBreadcrumbs.i18nBundle.getText(AVAILABLE_VALUES);
+    return translate(UDExBreadcrumbs, AVAILABLE_VALUES);
   }
 }
 

package/src/Button.ts

@@ -14,6 +14,7 @@ import UDExButtonDesign from "./types/ButtonDesign.js";
 
 // Styles
 import ButtonCss from "./generated/themes/Button.css.js";
+import translate from "./utils/translate.js";
 
 /**
  * @class
@@ -116,9 +117,9 @@ class UDExButton extends Button {
 
     let typeText;
     if (designValue) {
-      typeText = shouldReadDesign ? UDExButton.i18nBundle.getText(UDExButton.typeTextMappings()[designValue]) : "";
+      typeText = shouldReadDesign ? translate(UDExButton, UDExButton.typeTextMappings()[designValue]) : "";
     }
-    return `${typeText} ${this.toggled ? UDExButton.i18nBundle.getText(TOGGLED) : ""}`.trim();
+    return `${typeText} ${this.toggled ? translate(UDExButton, TOGGLED) : ""}`.trim();
   }
 
   get designValue(): string | null {

package/src/Carousel.ts

@@ -13,6 +13,7 @@ import redirectAttributes from "./utils/redirectAttributes.js";
 import type UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
 import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 import type Icon from "@ui5/webcomponents/dist/Icon.js";
+import translate from "./utils/translate.js";
 
 import CarouselTemplate from "./CarouselTemplate.js";
 
@@ -139,11 +140,11 @@ class UDExCarousel extends UI5Element {
   static i18nBundle: I18nBundle;
 
   get nextPageText(): string {
-    return UDExCarousel.i18nBundle.getText(CAROUSEL_NEXT_ARROW_TEXT);
+    return translate(UDExCarousel, CAROUSEL_NEXT_ARROW_TEXT);
   }
 
   get previousPageText(): string {
-    return UDExCarousel.i18nBundle.getText(CAROUSEL_PREVIOUS_ARROW_TEXT);
+    return translate(UDExCarousel, CAROUSEL_PREVIOUS_ARROW_TEXT);
   }
 
   get carouselClass(): string {
@@ -188,7 +189,6 @@ class UDExCarousel extends UI5Element {
     }
 
     this._carousel?._navButtonClick(e as unknown as UI5CustomEvent<Icon, "click">);
-    this._calculateDisabledButtonsState();
   }
 
   _nextButtonClick(e: UI5CustomEvent<UDExButton, "click">) {
@@ -197,7 +197,6 @@ class UDExCarousel extends UI5Element {
     }
 
     this._carousel?._navButtonClick(e as unknown as UI5CustomEvent<Icon, "click">);
-    this._calculateDisabledButtonsState();
   }
 
   _onkeydown(e: KeyboardEvent) {
@@ -206,6 +205,10 @@ class UDExCarousel extends UI5Element {
     }
   }
 
+  _handleNavigate(): void {
+    this._calculateDisabledButtonsState();
+  }
+
   onAfterRendering() {
     redirectAttributes(this, "carousel");
 

package/src/CarouselTemplate.tsx

@@ -18,7 +18,8 @@ export default function CarouselTemplate(this: Carousel) {
         hideNavigationArrows
         arrowsPlacement={CarouselArrowsPlacement.Navigation}
         accessibleName={this.accessibleName}
-        hidePageIndicator={this._hidePageIndicator}>
+        hidePageIndicator={this._hidePageIndicator}
+        onNavigate={this._handleNavigate}>
         {this.items.map(item =>
           <slot name={(item as SlottedChild)._individualSlot}></slot>
         )}

package/src/Checkbox.ts

@@ -11,6 +11,7 @@ import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delega
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
 import type Label from "@ui5/webcomponents/dist/Label.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import CheckboxCss from "./generated/themes/Checkbox.css.js";
@@ -89,8 +90,8 @@ class UDExCheckbox extends CheckBox {
 
   valueStateMappings(): Record<string, string> {
     return {
-      [UDExCheckboxValueState.Error]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_ERROR),
-      [UDExCheckboxValueState.Success]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_SUCCESS),
+      [UDExCheckboxValueState.Error]: translate(UDExCheckbox, VALUE_STATE_ERROR),
+      [UDExCheckboxValueState.Success]: translate(UDExCheckbox, VALUE_STATE_SUCCESS),
     };
   }
 

package/src/Contact.ts

@@ -12,6 +12,7 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 import i18n from "@ui5/webcomponents-base/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/i18nBundle.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import ContactCss from "./generated/themes/Contact.css.js";
@@ -175,19 +176,19 @@ class UDExContact extends UI5Element {
   }
 
   get _completeListTitle(): string {
-    return `${UDExContact.i18nBundle.getText(COMPLETE_LIST_OF)} `;
+    return `${translate(UDExContact, COMPLETE_LIST_OF)} `;
   }
 
   get _localCountryTitle(): string {
-    return UDExContact.i18nBundle.getText(LOCAL_COUNTRY_NAMES);
+    return translate(UDExContact, LOCAL_COUNTRY_NAMES);
   }
 
   get _numbersTitle(): string {
-    return UDExContact.i18nBundle.getText(CALL_US_TODAY);
+    return translate(UDExContact, CALL_US_TODAY);
   }
 
   get _contactUsTitle(): string {
-    return UDExContact.i18nBundle.getText(CONTACT_US);
+    return translate(UDExContact, CONTACT_US);
   }
 
   get _hasNumbersList(): boolean {

package/src/CountrySelector.ts

@@ -40,7 +40,7 @@ type UDExCountrySelectorChangeSearchEventDetail = {
  * <code>import "@sapudex/web-components/dist/CountrySelector.js";</code>
  *
  * @constructor
- * @extends UDExSearchableListBase
+ * @extends UDExSelectBase
  * @tagname udex-country-selector
  * @public
  */

package/src/DatePicker.ts

@@ -12,6 +12,7 @@ import { CALENDAR_ICON, DATEPICKER_DATE_DESCRIPTION } from "./generated/i18n/i18
 import type UDExTextField from "./TextField.js";
 import type UDExDropdown from "./Dropdown.js";
 import UDExValueState from "./types/common.js";
+import translate from "./utils/translate.js";
 
 // Template
 import DatePickerTemplate from "./DatePickerTemplate.js";
@@ -543,11 +544,11 @@ class UDExDatePicker extends DateComponentBase {
   }
 
   get accessibleIconName(): string {
-    return UDExDatePicker.i18nBundle.getText(CALENDAR_ICON);
+    return translate(UDExDatePicker, CALENDAR_ICON);
   }
 
   get dateAccessibleName(): string {
-    return this.accessibleName || UDExDatePicker.i18nBundle.getText(DATEPICKER_DATE_DESCRIPTION);
+    return this.accessibleName || translate(UDExDatePicker, DATEPICKER_DATE_DESCRIPTION);
   }
 
   get isRangeMode(): boolean {

package/src/EventRibbon.ts

@@ -3,7 +3,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type {
-  UDExEventRibbonColorSheme, UDExEventRibbonLink, UDExEventRibbonIcon, UDExEventRibbonLogo,
+  UDExEventRibbonColorScheme, UDExEventRibbonLink, UDExEventRibbonIcon, UDExEventRibbonLogo,
 } from "./types/EventRibbon.js";
 import { eventLogoText, UDExEventRibbonMode } from "./types/EventRibbon.js";
 import "@ui5/webcomponents-icons/add-calendar.js";
@@ -109,7 +109,7 @@ class UDExEventRibbon extends UI5Element {
    * @public
    */
   @property({ type: String })
-    backgroundColorScheme!: UDExEventRibbonColorSheme;
+    backgroundColorScheme!: UDExEventRibbonColorScheme;
 
   /**
    * Allows control over the background image source.

package/src/FeedItem.ts

@@ -9,6 +9,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import FeedItemTemplate from "./FeedItemTemplate.js";
 import { LOCATION } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import FeedItemCss from "./generated/themes/FeedItem.css.js";
@@ -170,7 +171,7 @@ class UDExFeedItem extends UI5Element {
   }
 
   get locationIconLabel(): string {
-    return UDExFeedItem.i18nBundle.getText(LOCATION);
+    return translate(UDExFeedItem, LOCATION);
   }
 
   formatDate(d: string | undefined): FeedDate {

package/src/FilterMenu.ts

@@ -33,6 +33,7 @@ import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import FilterMenuTemplate from "./generated/templates/FilterMenuTemplate.lit.js";
 import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
 import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import FilterMenuCss from "./generated/themes/FilterMenu.css.js";
@@ -550,19 +551,19 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   get getResultLabelText(): string {
-    return this.resultBtnLabel !== undefined && this.resultBtnLabel.length > 0 && this.resultBtnLabel ? this.resultBtnLabel : UDExFilterMenu.i18nBundle.getText(SHOW_RESULTS);
+    return this.resultBtnLabel !== undefined && this.resultBtnLabel.length > 0 && this.resultBtnLabel ? this.resultBtnLabel : translate(UDExFilterMenu, SHOW_RESULTS);
   }
 
   get getResetLabelText(): string {
-    return this.resetBtnLabel !== undefined && this.resetBtnLabel.length > 0 ? this.resetBtnLabel : UDExFilterMenu.i18nBundle.getText(RESET);
+    return this.resetBtnLabel !== undefined && this.resetBtnLabel.length > 0 ? this.resetBtnLabel : translate(UDExFilterMenu, RESET);
   }
 
   get _iconAccessibleNameText(): string {
-    return UDExFilterMenu.i18nBundle.getText(SELECT_OPTIONS);
+    return translate(UDExFilterMenu, SELECT_OPTIONS);
   }
 
   get triggerButtonAccessibleName(): string {
-    return this.accessibleName || UDExFilterMenu.i18nBundle.getText(SELECT_OPTIONS);
+    return this.accessibleName || translate(UDExFilterMenu, SELECT_OPTIONS);
   }
 
   get searchableList() {

package/src/Footer.ts

@@ -39,6 +39,7 @@ import {
   ICP_NUMBER,
   BACK_TO_TOP,
 } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import FooterCss from "./generated/themes/Footer.css.js";
@@ -529,58 +530,58 @@ class UDExFooter extends UI5Element {
   }
 
   get phoneNumberAccessibleName(): string {
-    return `${UDExFooter.i18nBundle.getText(PHONE_NUMBER)} `;
+    return `${translate(UDExFooter, PHONE_NUMBER)} `;
   }
 
   get contactUsAccessibleName(): string {
-    return UDExFooter.i18nBundle.getText(CONTACT_US);
+    return translate(UDExFooter, CONTACT_US);
   }
 
   get contactUsAccessibleLabel(): string {
     if (this.contactUsLink.includes("mailto:")) {
-      return `${this.contactUsAccessibleName} ${UDExFooter.i18nBundle.getText(EMAIL)}`;
+      return `${this.contactUsAccessibleName} ${translate(UDExFooter, EMAIL)}`;
     }
     return `${this.contactUsAccessibleName}`;
   }
 
   get chatWithUsAccessibleName(): string {
-    return UDExFooter.i18nBundle.getText(CHAT_WITH_US);
+    return translate(UDExFooter, CHAT_WITH_US);
   }
 
   get _quickLinksTitle(): string {
-    return this.quickLinksTitle || UDExFooter.i18nBundle.getText(QUICK_LINKS);
+    return this.quickLinksTitle || translate(UDExFooter, QUICK_LINKS);
   }
 
   get _trendingTitle(): string {
-    return this.trendingTitle || UDExFooter.i18nBundle.getText(TRENDING);
+    return this.trendingTitle || translate(UDExFooter, TRENDING);
   }
 
   get _aboutSapTitle(): string {
-    return this.aboutSapTitle || UDExFooter.i18nBundle.getText(ABOUT_SAP);
+    return this.aboutSapTitle || translate(UDExFooter, ABOUT_SAP);
   }
 
   get _siteInformationTitle(): string {
-    return this.siteInformationTitle || UDExFooter.i18nBundle.getText(SITE_INFORMATION);
+    return this.siteInformationTitle || translate(UDExFooter, SITE_INFORMATION);
   }
 
   get completeListTitle(): string {
-    return `${UDExFooter.i18nBundle.getText(SEE_COMPLETE_LIST)} `;
+    return `${translate(UDExFooter, SEE_COMPLETE_LIST)} `;
   }
 
   get localCountryTitle(): string {
-    return UDExFooter.i18nBundle.getText(LOCAL_COUNTRY_NAMES);
+    return translate(UDExFooter, LOCAL_COUNTRY_NAMES);
   }
 
   get copyrightText(): string {
-    return UDExFooter.i18nBundle.getText(COPYRIGHT, new Date().getFullYear());
+    return translate(UDExFooter, COPYRIGHT, new Date().getFullYear());
   }
 
   get chineseICPNumberText(): string {
-    return this.chineseIcpNumber ?? UDExFooter.i18nBundle.getText(ICP_NUMBER);
+    return this.chineseIcpNumber ?? translate(UDExFooter, ICP_NUMBER);
   }
 
   get chineseSecurityNetworkNumberText(): string {
-    return this.chineseSecurityNetworkNumber ? ` ${this.chineseSecurityNetworkNumber}` : ` ${UDExFooter.i18nBundle.getText(PUBLIC_SECURITY_NETWORK_NUMBER)}`;
+    return this.chineseSecurityNetworkNumber ? ` ${this.chineseSecurityNetworkNumber}` : ` ${translate(UDExFooter, PUBLIC_SECURITY_NETWORK_NUMBER)}`;
   }
 
   get isMobile(): boolean {
@@ -626,7 +627,7 @@ class UDExFooter extends UI5Element {
   }
 
   get backToTopTitle(): string {
-    return UDExFooter.i18nBundle.getText(BACK_TO_TOP);
+    return translate(UDExFooter, BACK_TO_TOP);
   }
 
   get hasSocialLinksSlot(): boolean {

package/src/ImageGridTable.ts

@@ -0,0 +1,151 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.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 type UDExImageGridTableItem from "./ImageGridTableItem.js";
+import ImageGridTableTemplate from "./ImageGridTableTemplate.js";
+import { Breakpoints } from "./utils/Breakpoints.js";
+
+// Styles
+import ImageGridTableCss from "./generated/themes/ImageGridTable.css.js";
+import property from "@ui5/webcomponents-base/decorators/property.js";
+
+export enum UDExImageGridTableVariable {
+  columns = "--udex-image-grid-table-columns",
+  gapDesktop = "--udex-image-grid-table-gap-xl-m",
+  gapMobile = "--udex-image-grid-table-gap-s",
+  minWidth = "--udex-image-grid-table-item-min-width",
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-table</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridTable.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-image-grid-table",
+  renderer: jsxRenderer,
+  styles: ImageGridTableCss,
+  template: ImageGridTableTemplate,
+})
+
+class UDExImageGridTable extends UI5Element {
+  /**
+   * Slot for image grid table items.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true })
+    items!: Array<UDExImageGridTableItem>;
+
+  /**
+   * 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;
+
+  _handleResizeBound: ResizeObserverCallback;
+
+  constructor() {
+    super();
+    this._handleResizeBound = this.handleResize.bind(this);
+  }
+
+  onAfterRendering(): void {
+    if (!this.isSmallComponentSize) {
+      this._renderGrid();
+    }
+  }
+
+  onBeforeRendering(): void {
+    if (this.grayscale) {
+      this._setGrayscaleMode();
+    }
+  }
+
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
+  handleResize(): void {
+    if (!this.isSmallComponentSize) {
+      this._renderGrid();
+    }
+  }
+
+  _renderGrid(): void {
+    const containerWidth = this.offsetWidth;
+    const itemCount = this.items.length;
+    const minWidth = this.itemMinWidth;
+    const gap = this.itemGap;
+
+    if (!containerWidth || itemCount === 0) {
+      return;
+    }
+
+    let columns = Math.floor((containerWidth - gap) / (minWidth + gap));
+    columns = Math.max(1, columns);
+
+    if (itemCount % columns === 1 && columns > 1) {
+      columns -= 1;
+    }
+
+    this.style.setProperty(
+      UDExImageGridTableVariable.columns,
+      String(columns),
+    );
+  }
+
+  _setGrayscaleMode(): void {
+    this.items.forEach(item => {
+      item._grayscale = true;
+    });
+  }
+
+  get itemMinWidth(): number {
+    const variableName = UDExImageGridTableVariable.minWidth;
+    return parseInt(this.getVariableValue(variableName));
+  }
+
+  get itemGap(): number {
+    const variableName = this.isSmallComponentSize
+      ? UDExImageGridTableVariable.gapMobile
+      : UDExImageGridTableVariable.gapDesktop;
+    return parseInt(this.getVariableValue(variableName));
+  }
+
+  get isSmallComponentSize(): boolean {
+    return this.offsetWidth <= Breakpoints.S.max;
+  }
+
+  getVariableValue(variableName: string): string {
+    return window.getComputedStyle(this).getPropertyValue(`${variableName}`);
+  }
+}
+
+UDExImageGridTable.define();
+
+export default UDExImageGridTable;