@sapudex/web-components 2.24.0 → 2.25.0

package/src/ImageGridTableItem.ts

@@ -0,0 +1,148 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { isDesktop } from "@ui5/webcomponents-base/Device.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.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 jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { UDExTarget } from "./types/common.js";
+
+import ImageGridTableItemTemplate from "./ImageGridTableItemTemplate.js";
+
+// Styles
+import ImageGridTableItemCss from "./generated/themes/ImageGridTableItem.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-table-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridTableItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-image-grid-table-item",
+  renderer: jsxRenderer,
+  styles: ImageGridTableItemCss,
+  template: ImageGridTableItemTemplate,
+})
+
+/**
+ * Fired event when the user clicks on the item link.
+ *
+ * @public
+ */
+@event("item-click", { cancelable: true, bubbles: true })
+
+class UDExImageGridTableItem extends UI5Element {
+  eventDetails!: {
+    "item-click": void,
+  };
+
+  /**
+   * Defines the text content of the component.
+   *
+   * @slot content
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true })
+    content!: Array<HTMLElement>;
+
+  /**
+   * Defines the header text of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    headline?: string;
+
+  /**
+   * Defines the link label of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    linkLabel?: string;
+
+  /**
+   * Defines link URL
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    href?: string;
+
+  /**
+   * Defines the source URL of the image
+   *
+   * @default undefined
+   * @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 target for the mage grid table item.
+   *
+   * @public
+   */
+  @property({ type: String })
+    target: `${UDExTarget}` = UDExTarget._self;
+
+  /**
+   * Indicates whether the image grid table item is grayscale.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _grayscale = false;
+
+  onEnterDOM(): void {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+  }
+
+  fireLinkItemClickEvent(e: Event): void {
+    const executeEvent = this.fireDecoratorEvent("item-click");
+
+    if (!executeEvent) {
+      e.preventDefault();
+    }
+  }
+}
+
+UDExImageGridTableItem.define();
+
+export default UDExImageGridTableItem;

package/src/ImageGridTableItemTemplate.tsx

@@ -0,0 +1,48 @@
+import type ImageGridTableItem from "./ImageGridTableItem.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import UDExLink from "./Link.js";
+
+export default function ImageGridTableItemTemplate(this: ImageGridTableItem) {
+  const rootClass = "udex-image-grid-table-item";
+
+  const image = (
+    <img
+      class={`${rootClass}__image`}
+      src={this.src}
+      alt={this.alt}
+      title={this.tooltip}
+    />
+  );
+
+  return (
+    <div class={rootClass}>
+      {!this.linkLabel && this.href
+        ? <a
+          class={`${rootClass}__image-holder`}
+          onClick={this.fireLinkItemClickEvent}
+          href={this.href}
+          target={this.target}
+          title={this.tooltip}>
+          {image}
+        </a>
+        : <div class={`${rootClass}__image-holder`}>{image}</div>
+      }
+      {this.headline &&
+        <span class={`${rootClass}__headline`}>{this.headline}</span>
+      }
+      <slot></slot>
+      {this.linkLabel &&
+        <div class={`${rootClass}__link-holder`}>
+          <UDExLink
+            onClick={this.fireLinkItemClickEvent}
+            target={this.target}
+            class={`${rootClass}__link`}
+            endIcon={slimArrowRight}
+            href={this.href}>
+            {this.linkLabel}
+          </UDExLink>
+        </div>
+      }
+    </div>
+  );
+}

package/src/ImageGridTableTemplate.tsx

@@ -0,0 +1,9 @@
+import type ImageGridTable from "./ImageGridTable.js";
+
+export default function ImageGridTableTemplate(this: ImageGridTable) {
+  return (
+    <div class="udex-image-grid-table">
+      <slot></slot>
+    </div>
+  );
+}

package/src/ImageGridTicker.ts

@@ -15,6 +15,7 @@ import { BreakpointUtils } from "./utils/Breakpoints.js";
 import type UDExImageGridTickerItem from "./ImageGridTickerItem.js";
 import ImageGridTickerItem from "./ImageGridTickerItem.js";
 import ImageGridTickerTemplate from "./ImageGridTickerTemplate.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import ImageGridTickerCss from "./generated/themes/ImageGridTicker.css.js";
@@ -84,6 +85,7 @@ class UDExImageGridTicker extends UI5Element {
    */
   @property({ type: Boolean })
     grayscale?: boolean;
+
   /**
    * Indicates whether the image grid ticker is scrollable.
    *
@@ -344,8 +346,8 @@ class UDExImageGridTicker extends UI5Element {
 
   get playBtnTooltipText(): string {
     return this._isPaused
-      ? UDExImageGridTicker.i18nBundle.getText(PLAY_BUTTON_ACCESSIBLE_NAME)
-      : UDExImageGridTicker.i18nBundle.getText(PAUSE_BUTTON_ACCESSIBLE_NAME);
+      ? translate(UDExImageGridTicker, PLAY_BUTTON_ACCESSIBLE_NAME)
+      : translate(UDExImageGridTicker, PAUSE_BUTTON_ACCESSIBLE_NAME);
   }
 }
 

package/src/ImageGridTickerItem.ts

@@ -1,5 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { isDesktop } from "@ui5/webcomponents-base/Device.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.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";
@@ -32,7 +33,18 @@ import ImageGridTickerItemCss from "./generated/themes/ImageGridTickerItem.css.j
   template: ImageGridTickerItemTemplate,
 })
 
+/**
+ * Fired event when the user clicks on the item link.
+ *
+ * @public
+ */
+@event("item-click", { cancelable: true, bubbles: true })
+
 class UDExImageGridTickerItem extends UI5Element {
+  eventDetails!: {
+    "item-click": void,
+  };
+
   /**
    * Defines the source URL
    *
@@ -74,6 +86,14 @@ class UDExImageGridTickerItem extends UI5Element {
       this.setAttribute("desktop", "");
     }
   }
+
+  fireLinkItemClickEvent(e: Event): void {
+    const executeEvent = this.fireDecoratorEvent("item-click");
+
+    if (!executeEvent) {
+      e.preventDefault();
+    }
+  }
 }
 
 UDExImageGridTickerItem.define();

package/src/ImageGridTickerItemTemplate.tsx

@@ -16,6 +16,7 @@ export default function ImageGridTickerItemTemplate(this: ImageGridTickerItem) {
     <div class={rootClass}>
       {this.href && this.href.length > 0
         ? <a
+          onClick={this.fireLinkItemClickEvent}
           class={`${rootClass}__link`}
           href={this.href}
           title={this.tooltip}>

package/src/InputGroup.ts

@@ -14,6 +14,7 @@ import {
   VALUE_STATE_ERROR,
   VALUE_STATE_SUCCESS,
 } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import InputGroupCss from "./generated/themes/InputGroup.css.js";
@@ -114,8 +115,8 @@ class UDExInputGroup extends UI5Element {
 
   get valueStateTypeMappings(): Record<string, string> {
     return {
-      "Success": UDExInputGroup.i18nBundle.getText(VALUE_STATE_SUCCESS),
-      "Error": UDExInputGroup.i18nBundle.getText(VALUE_STATE_ERROR),
+      "Success": translate(UDExInputGroup, VALUE_STATE_SUCCESS),
+      "Error": translate(UDExInputGroup, VALUE_STATE_ERROR),
     };
   }
 

package/src/List.ts

@@ -16,6 +16,7 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { ARIA_LABEL_LIST_MULTISELECTABLE, ARIA_LABEL_LIST_SELECTABLE } from "./generated/i18n/i18n-defaults.js";
 import ListTemplate from "./generated/templates/ListTemplate.lit.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import ListCss from "./generated/themes/List.css.js";
@@ -456,7 +457,7 @@ class UDExList extends UI5Element {
       ? ARIA_LABEL_LIST_SELECTABLE
       : ARIA_LABEL_LIST_MULTISELECTABLE;
 
-    return this.accessibleName || UDExList.i18nBundle.getText(defaultText);
+    return this.accessibleName || translate(UDExList, defaultText);
   }
 
   get ariaLabelledBy(): string {

package/src/ListItem.ts

@@ -19,8 +19,9 @@ import UDExRadioButton from "./RadioButton.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
-  DELETE_BUTTON, EDIT_BUTTON, INDETERMINATE, SELECTED, UNSELECTED,
+  INDETERMINATE, SELECTED, UNSELECTED,
 } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 import ListItemTemplate from "./generated/templates/ListItemTemplate.lit.js";
 
@@ -389,17 +390,9 @@ class UDExListItem extends UDExListItemBase {
 
   get stateAccessibleName(): string {
     if (this.indeterminate) {
-      return UDExListItem.i18nBundle.getText(INDETERMINATE);
+      return translate(UDExListItem, INDETERMINATE);
     }
-    return `${this.selected ? UDExListItem.i18nBundle.getText(SELECTED) : UDExListItem.i18nBundle.getText(UNSELECTED)} `;
-  }
-
-  get editButtonAccessibleName(): string {
-    return UDExListItem.i18nBundle.getText(EDIT_BUTTON);
-  }
-
-  get deleteButtonAccessibleName(): string {
-    return UDExListItem.i18nBundle.getText(DELETE_BUTTON);
+    return `${this.selected ? translate(UDExListItem, SELECTED) : translate(UDExListItem, UNSELECTED)} `;
   }
 
   get itemDescribedBy(): string {

package/src/ListSelectAll.ts

@@ -10,6 +10,7 @@ import { SELECT_ALL } from "./generated/i18n/i18n-defaults.js";
 import ListSelectAllTemplate from "./generated/templates/ListSelectAllTemplate.lit.js";
 import UDExListItem from "./ListItem.js";
 import type { UDExListItemBaseEvents } from "./ListItemBase.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css.js";
@@ -95,7 +96,7 @@ class UDExListSelectAll extends UDExListGroupHeaderBase {
 
   get selectAllLabel(): string {
     const hasLabel = this.label !== "undefined" && this.label?.length > 0;
-    return hasLabel ? this.label : UDExListSelectAll.i18nBundle.getText(SELECT_ALL);
+    return hasLabel ? this.label : translate(UDExListSelectAll, SELECT_ALL);
   }
 
   get additionalClassName(): string {

package/src/MastheadCountrySelector.ts

@@ -18,6 +18,7 @@ import AnalyticsName from "./types/AnalyticsName.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import type UDExMastheadShell from "./MastheadShell.js";
 import { NO_MATCHES_FOUND, RESULT_RETURNED } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import MastheadCountrySelectorCss from "./generated/themes/MastheadCountrySelector.css.js";
@@ -509,11 +510,11 @@ class UDExMastheadCountrySelector extends UI5Element {
   }
 
   get noMatchesFoundText(): string {
-    return UDExMastheadCountrySelector.i18nBundle.getText(NO_MATCHES_FOUND);
+    return translate(UDExMastheadCountrySelector, NO_MATCHES_FOUND);
   }
 
   get resultReturnedText(): string {
-    return UDExMastheadCountrySelector.i18nBundle.getText(RESULT_RETURNED);
+    return translate(UDExMastheadCountrySelector, RESULT_RETURNED);
   }
 
   get items(): Array<UDExMastheadMenuItem> {

package/src/MastheadItem.ts

@@ -24,6 +24,7 @@ import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
@@ -638,7 +639,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get accessibleLabel(): string {
-    return this.accessibleName || this.innerText || (this.isProfileBtn ? UDExMastheadItem.i18nBundle.getText(PROFILE) : "");
+    return this.accessibleName || this.innerText || (this.isProfileBtn ? translate(UDExMastheadItem, PROFILE) : "");
   }
 
   get profileSlot(): UDExMastheadProfileMenu {
@@ -654,24 +655,24 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get openInNewWindowText(): string {
-    return UDExMastheadItem.i18nBundle.getText(OPENS_IN_A_NEW_WINDOW);
+    return translate(UDExMastheadItem, OPENS_IN_A_NEW_WINDOW);
   }
 
   get eventItemTitle(): string {
     if (this.isSearchBtn) {
-      return UDExMastheadItem.i18nBundle.getText(SEARCH);
+      return translate(UDExMastheadItem, SEARCH);
     }
     if (this.isCartBtn) {
-      return UDExMastheadItem.i18nBundle.getText(CART);
+      return translate(UDExMastheadItem, CART);
     }
     if (this.isProfileBtn) {
-      return UDExMastheadItem.i18nBundle.getText(PROFILE);
+      return translate(UDExMastheadItem, PROFILE);
     }
     if (this.isCountrySelectorBtn) {
-      return UDExMastheadItem.i18nBundle.getText(COUNTRY_SELECTOR);
+      return translate(UDExMastheadItem, COUNTRY_SELECTOR);
     }
     if (this.isSupportBtn) {
-      return UDExMastheadItem.i18nBundle.getText(SUPPORT);
+      return translate(UDExMastheadItem, SUPPORT);
     }
 
     return this.firstChild?.nodeValue?.trim() || "";

package/src/MastheadMenuItem.ts

@@ -12,6 +12,7 @@ import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import { OPENS_IN_A_NEW_WINDOW } from "./generated/i18n/i18n-defaults.js";
 import { UDExTarget } from "./types/common.js";
+import translate from "./utils/translate.js";
 
 import MastheadMenuItemTemplate from "./generated/templates/MastheadMenuItemTemplate.lit.js";
 
@@ -219,7 +220,7 @@ class UDExMastheadMenuItem extends UI5Element {
   }
 
   get openInNewWindowText(): string {
-    return UDExMastheadMenuItem.i18nBundle.getText(OPENS_IN_A_NEW_WINDOW);
+    return translate(UDExMastheadMenuItem, OPENS_IN_A_NEW_WINDOW);
   }
 
   get ariaDescribedby(): string | null {

package/src/MastheadMobileMenu.ts

@@ -16,6 +16,7 @@ import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenuTemplate.lit.js";
 import type UDExMastheadShell from "./MastheadShell.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js";
@@ -576,7 +577,7 @@ class UDExMastheadMobileMenu extends UI5Element {
   }
 
   get overviewLinkText(): string {
-    return UDExMastheadMobileMenu.i18nBundle.getText(OVERVIEW);
+    return translate(UDExMastheadMobileMenu, OVERVIEW);
   }
 
   get exploreItem(): UDExMastheadItem {

package/src/MastheadProfileMenu.ts

@@ -26,6 +26,7 @@ import UDExStatusBadgeValueState from "./types/StatusBadgeValueState.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import MastheadProfileMenuCss from "./generated/themes/MastheadProfileMenu.css.js";
@@ -398,23 +399,23 @@ class UDExMastheadProfileMenu extends UI5Element {
   }
 
   get btnBackText(): string {
-    return this._isMobileMode ? this.switcherAccountText : UDExMastheadProfileMenu.i18nBundle.getText(BACK);
+    return this._isMobileMode ? this.switcherAccountText : translate(UDExMastheadProfileMenu, BACK);
   }
 
   get listTitleText(): string {
-    return `${UDExMastheadProfileMenu.i18nBundle.getText(OTHER_IDENTITIES)} (${this.identitiesList.length})`;
+    return `${translate(UDExMastheadProfileMenu, OTHER_IDENTITIES)} (${this.identitiesList.length})`;
   }
 
   get addOrRemoveAccountText(): string {
-    return UDExMastheadProfileMenu.i18nBundle.getText(ADD_OR_REMOVE_ACCOUNT);
+    return translate(UDExMastheadProfileMenu, ADD_OR_REMOVE_ACCOUNT);
   }
 
   get switcherAccountText(): string {
-    return UDExMastheadProfileMenu.i18nBundle.getText(SWITCH_ACCOUNT);
+    return translate(UDExMastheadProfileMenu, SWITCH_ACCOUNT);
   }
 
   get logoutText(): string {
-    return UDExMastheadProfileMenu.i18nBundle.getText(LOGOUT);
+    return translate(UDExMastheadProfileMenu, LOGOUT);
   }
 
   get isAtMostBreakpointSizeM(): boolean {

package/src/MastheadShell.hbs

@@ -72,47 +72,56 @@
             </div>
         {{/if}}
         {{#if hasSearch}}
-          <div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon">
-            <udex-masthead-item
+            <div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon">
+                <udex-masthead-item
                     class="udex-masthead-shell__search-btn"
                     icon="search"
                     part="search-button"
                     @click="{{handleSearchClick}}"
-                    accessible-name="search">
-            </udex-masthead-item>
-          </div>
+                    accessible-name="{{openSearchButtonAccessibleNameText}}"
+                    icon-alt="{{openSearchButtonAccessibleNameText}}">
+                </udex-masthead-item>
+            </div>
+        {{/if}}
+        {{#if hasJoule}}
+            <div
+                class="udex-masthead-shell__joule udex-masthead-shell__item_icon"
+                @ui5-item-click="{{setSelectedItem}}"
+                @click="{{handleJouleClick}}">
+                <slot name="joule"></slot>
+            </div>
         {{/if}}
         {{#if hasCart}}
-          <div
-                  class="udex-masthead-shell__cart udex-masthead-shell__item_icon"
-                  @ui5-item-click="{{setSelectedItem}}"
-                  @click="{{handleCartClick}}">
-            <slot name="cart"></slot>
-          </div>
+            <div
+                class="udex-masthead-shell__cart udex-masthead-shell__item_icon"
+                @ui5-item-click="{{setSelectedItem}}"
+                @click="{{handleCartClick}}">
+                <slot name="cart"></slot>
+            </div>
         {{/if}}
         {{#if hasSupport}}
-          <div
-                  class="udex-masthead-shell__support udex-masthead-shell__item_icon"
-                  @ui5-item-click="{{setSelectedItem}}"
-                  @click="{{handleSupportClick}}">
-            <slot name="support"></slot>
-          </div>
+            <div
+                class="udex-masthead-shell__support udex-masthead-shell__item_icon"
+                @ui5-item-click="{{setSelectedItem}}"
+                @click="{{handleSupportClick}}">
+                <slot name="support"></slot>
+            </div>
         {{/if}}
         {{#if hasProfile}}
-          <div
-                  class="udex-masthead-shell__profile udex-masthead-shell__item_icon"
-                  @ui5-item-click="{{setSelectedItem}}"
-                  @click="{{handleProfileClick}}">
-            <slot name="profile"></slot>
-          </div>
+            <div
+                class="udex-masthead-shell__profile udex-masthead-shell__item_icon"
+                @ui5-item-click="{{setSelectedItem}}"
+                @click="{{handleProfileClick}}">
+                <slot name="profile"></slot>
+            </div>
         {{/if}}
         {{#if hasCountrySelector}}
-          <div
-                  class="udex-masthead-shell__country-selector udex-masthead-shell__item_icon"
-                  @ui5-item-click="{{setSelectedItem}}"
-                  @click="{{handleCountrySelectorClick}}">
-            <slot name="countrySelector"></slot>
-          </div>
+            <div
+                class="udex-masthead-shell__country-selector udex-masthead-shell__item_icon"
+                @ui5-item-click="{{setSelectedItem}}"
+                @click="{{handleCountrySelectorClick}}">
+                <slot name="countrySelector"></slot>
+            </div>
         {{/if}}
         {{#if hasMobileMenuButtons}}
             <udex-masthead-item