@sapudex/web-components 0.117.1 → 0.127.6

package/src/Review.hbs

@@ -0,0 +1,44 @@
+{{#if isEmpty}}
+    <div class="udex-review__empty-container">
+        <slot class="udex-review__default-text" name="defaultText"></slot>
+        <slot name="reviewButton"></slot>
+    </div>
+{{else}}
+    {{#if withoutBreakdown}}
+        <div class="udex-review__container-without-breakdown">
+            {{> noBreakdown}}
+        </div>
+    {{else}}
+        <div class="udex-review__container">
+            <div class="udex-review__content">
+                <div class="udex-review__rating-info">
+                    <div aria-level="2" role="heading" aria-hidden="true" class="udex-review__rating">{{validatedRating}}</div>
+                    <ui5-icon aria-labelledby="ratingDescription" role="img" name="favorite" class="udex-review__icon"></ui5-icon>
+                </div>
+                <div class="udex-review__reviews-text">{{reviewsText}}</div>
+                <slot name="reviewButton"></slot>
+            </div>
+            <div class="udex-review__additional-content">
+                {{#each validatedRatingBars}}
+                    <slot name="{{this._individualSlot}}"></slot>
+                {{/each}}
+            </div>
+        </div>
+        <span id="ratingDescription" class="hidden-text">{{_ratingDescription}}</span>
+    {{/if}}
+{{/if}}
+
+
+{{#*inline "noBreakdown"}}
+    <div class="udex-review__content-without-breakdown">
+        <div aria-level="2" role="heading" aria-hidden="true" class="udex-review__rating">{{validatedRating}}</div>
+        <div class="udex-review__rating-info-without-breakdown">
+            <udex-rating-indicator readonly value="{{validatedRating}}" max="{{_maxRating}}"></udex-rating-indicator>
+            <div class="udex-review__reviews-text">{{reviewsText}}</div>
+        </div>
+    </div>
+    <div class="udex-review__additional-content-without-breakdown">
+        <slot class="udex-review__default-text" name="defaultText"></slot>
+        <slot name="reviewButton"></slot>
+    </div>
+{{/inline}}

package/src/Review.ts

@@ -0,0 +1,140 @@
+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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import Float from "@ui5/webcomponents-base/dist/types/Float.js";
+import { REVIEWS, STARS } from "./generated/i18n/i18n-defaults.js";
+import UDExRatingBar from "./RatingBar.js";
+import UDExRatingIndicator from "./RatingIndicator.js";
+import UDExButton from "./Button.js";
+import "@ui5/webcomponents-icons/dist/favorite.js";
+import ReviewTemplate from "./generated/templates/ReviewTemplate.lit.js";
+
+// Styles
+import ReviewCss from "./generated/themes/Review.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-review</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/Review.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-review",
+  renderer: litRender,
+  styles: ReviewCss,
+  template: ReviewTemplate,
+  dependencies: [UDExRatingBar, UDExRatingIndicator, Icon],
+})
+
+class UDExReview extends UI5Element {
+  /**
+   * Defines the rating.
+   *
+   * @default 0
+   * @public
+   */
+  @property({ type: Number, defaultValue: 0, validator: Float })
+    rating!: number;
+
+  /**
+   * Defines the total number of reviews.
+   *
+   * @default 0
+   * @public
+   */
+  @property({ type: Number, defaultValue: 0, validator: Integer })
+    reviews!: number;
+
+  /**
+   * Slot for a button for writing a review.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    reviewButton!: UDExButton;
+
+  /**
+   * Slot for the default text when there are no reviews or rating.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    defaultText!: HTMLElement;
+
+  /**
+   * Slot for rating bars.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true, individualSlots: true })
+    bars!: Array<UDExRatingBar>;
+
+  static i18nBundle: I18nBundle;
+  _minRating: number = 0;
+  _maxRating: number = 5;
+  _maxRatingBars: number = 5;
+
+  static async onDefine() {
+    UDExReview.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+  }
+
+  get reviewsText(): string {
+    return `${this.reviews} ${UDExReview.i18nBundle.getText(REVIEWS)}`;
+  }
+
+  get withoutBreakdown(): boolean {
+    return this.bars.length === 0;
+  }
+
+  get isEmpty(): boolean {
+    return this.reviews === 0 && this.rating === 0;
+  }
+
+  get validatedRating(): number {
+    if (this.rating > this._maxRating) {
+      console.warn("UDEx Review: The rating shouldn't be more than 5.");
+      return this._maxRating;
+    }
+    if (this.rating < this._minRating) {
+      console.warn("UDEx Review: The rating shouldn't be less than 0.");
+      return this._minRating;
+    }
+    return this.rating;
+  }
+
+  get validatedRatingBars(): Array<UDExRatingBar> {
+    if (this.bars.length > this._maxRatingBars) {
+      console.warn("UDEx Review: There shouldn't be more than 5 RatingBars.");
+      return this.bars.slice(-this._maxRatingBars);
+    }
+
+    return this.bars;
+  }
+
+  get _ratingDescription(): string {
+    return `${this.validatedRating} ${UDExRatingBar.i18nBundle.getText(STARS)}`;
+  }
+}
+
+UDExReview.define();
+
+export default UDExReview;

package/src/Search.hbs

@@ -2,6 +2,8 @@
     {{#if isShowSearchHomePrefix}}
         <div class="udex-search__prefix">
             <button type="button"
+                    role="combobox"
+                    aria-expanded="{{_prefixDropdownExpanded}}"
                     aria-haspopup="true"
                     aria-controls="udex-search-prefix"
                     class="udex-search__prefix-button"
@@ -14,7 +16,7 @@
                 class="udex-search__prefix-popover"
                 hide-arrow
                 placement-type="Bottom"
-	            horizontal-align="Left"
+	              horizontal-align="Left"
                 style="{{prefixPopoverStyles}}"
                 @after-close="{{handleAfterClosePrefixPopover}}">
                 <slot></slot>
@@ -29,10 +31,8 @@
                 name="search"
                 class="udex-search__field"
                 autocomplete="off"
-                role="combobox"
-                aria-controls="{{getAriaControls}}"
-                aria-expanded="false"
-                aria-haspopup="{{showSuggestedPopover}}"
+                aria-autocomplete="list"
+                aria-haspopup="{{getAriaHasPopup}}"
                 aria-label="Search"
                 placeholder="{{label}}"
                 .value="{{value}}"
@@ -55,11 +55,9 @@
                 name="search"
                 class="udex-search__field"
                 autocomplete="off"
-                role="combobox"
+                aria-autocomplete="list"
                 aria-label="{{accInfo.ariaLabel}}"
-                aria-controls="{{getAriaControls}}"
-                aria-expanded="false"
-                aria-haspopup="{{showSuggestedPopover}}"
+                aria-haspopup="{{getAriaHasPopup}}"
                 .value="{{value}}"
                 @input="{{handleSearchChange}}"
                 @keydown="{{handleKeyDown}}"
@@ -75,11 +73,17 @@
                     id="reset-button"
                     class="udex-search__button udex-search__reset-button"
                     design="Default"
-                    icon="decline"
-                    tooltip="Reset Button"
+                    tooltip="{{tooltipInfo.tooltipResetButton}}"
                     @click="{{onReset}}"
                     @keydown="{{handleKeyDownReset}}"
-                ></ui5-button>
+                >
+                    <ui5-icon
+                        class="udex-search__button-icon"
+                        accessible-name="{{accInfo.accessibleNameResetIcon}}"
+                        accessible-role="presentation"
+                        name="decline">
+                    </ui5-icon>
+                </ui5-button>
             {{/if}}
             {{#if isVoiceButton}}
                 <ui5-button
@@ -87,7 +91,7 @@
                     class="udex-search__button udex-search__voice-button {{voiceActiveClass}}"
                     design="Default"
                     icon="microphone"
-                    tooltip="Voice Button"
+                    tooltip="{{tooltipInfo.tooltipVoiceButton}}"
                     @click="{{onVoice}}"
                 ></ui5-button>
             {{/if}}
@@ -95,6 +99,7 @@
                 {{#if nonInteractiveSubmitButton}}
                     <ui5-icon
                         class="udex-search__icon"
+                        accessible-name="{{accInfo.accessibleNameSearchIcon}}"
                         name="search">
                     </ui5-icon>
                 {{else}}
@@ -103,7 +108,7 @@
                         class="udex-search__button udex-search__submit-button {{searchButtonActiveClass}}"
                         design="Default"
                         icon="search"
-                        tooltip="Submit Button"
+                        tooltip="{{tooltipInfo.tooltipSubmitButton}}"
                         @click="{{onSubmit}}"
                     ></ui5-button>
                 {{/if}}

package/src/Search.ts

@@ -30,6 +30,11 @@ import {
   RECOMMENDED_TEXT,
   AVAILABLE_VALUES,
   NO_MATCHES_FOUND,
+  ACCESSIBLE_NAME_RESET_ICON,
+  ACCESSIBLE_NAME_SEARCH_ICON,
+  TOOLTIP_RESET_BUTTON,
+  TOOLTIP_VOICE_BUTTON,
+  TOOLTIP_SUBMIT_BUTTON,
 } from "./generated/i18n/i18n-defaults.js";
 import type SearchInputSuggestion from "./features/SearchSuggestionsPopover.js";
 
@@ -316,6 +321,51 @@ class UDExSearch extends UI5Element {
   @property()
     accessibleName!: string;
 
+  /**
+   * Defines the accessible ARIA name of the reset icon.
+   *
+   * @default "Clear"
+   * @public
+   */
+  @property({ type: String })
+    accessibleNameResetIcon!: string;
+
+  /**
+   * Defines the accessible ARIA name of the search icon (applied just when "nonInteractiveSubmitButton" is active).
+   *
+   * @default "Search"
+   * @public
+   */
+  @property({ type: String })
+    accessibleNameSearchIcon!: string;
+
+  /**
+   * Defines the tooltip of the clear button.
+   *
+   * @default "Clear"
+   * @public
+   */
+  @property({ type: String })
+    tooltipResetButton!: string;
+
+  /**
+   * Defines the tooltip of the voice button.
+   *
+   * @default "Voice"
+   * @public
+   */
+  @property({ type: String })
+    tooltipVoiceButton!: string;
+
+  /**
+   * Defines the tooltip of the submit button.
+   *
+   * @default "Search"
+   * @public
+   */
+  @property({ type: String })
+    tooltipSubmitButton!: string;
+
   /**
    * Defines the text if the suggestion list doesn't return results.
    *
@@ -423,6 +473,14 @@ class UDExSearch extends UI5Element {
   @slot({ type: HTMLElement, "default": true })
     dropdownPrefix!: Array<List>;
 
+  /**
+   * Defines the open button icon
+   *
+   * @private
+   */
+  @property({ type: Boolean, noAttribute: true })
+    _prefixDropdownExpanded!: boolean;
+
   constructor() {
     super();
     this._handleResizeBound = this._handleResize.bind(this);
@@ -648,6 +706,7 @@ class UDExSearch extends UI5Element {
       const dropdown = this.getPrefixPopover();
       const button = this.getPrefixButton();
 
+      this._prefixDropdownExpanded = true;
       dropdown.showAt(this.getPrefixButton());
       dropdown.style.width = `${button.offsetWidth + 1}px`;
       button.classList.add("udex-search__prefix-button--active");
@@ -669,6 +728,7 @@ class UDExSearch extends UI5Element {
     const dropdown = this.getPrefixPopover();
 
     dropdown.close();
+    this._prefixDropdownExpanded = false;
     this.handleAfterClosePrefixPopover();
   }
 
@@ -1039,8 +1099,8 @@ class UDExSearch extends UI5Element {
     return !!(this.suggestedList?.length || this.recommendedList?.length);
   }
 
-  get getAriaControls(): string {
-    return this.hasPopoverContent ? this.getSuggestionsPopoverId : "";
+  get getAriaHasPopup(): string {
+    return this.showSuggestedPopover ? "dialog" : "false";
   }
 
   get getSuggestionsPopoverId(): string {
@@ -1098,6 +1158,16 @@ class UDExSearch extends UI5Element {
   get accInfo() {
     return {
       "ariaLabel": this.accessibleName || undefined,
+      "accessibleNameResetIcon": this.accessibleNameResetIcon || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_RESET_ICON) as string,
+      "accessibleNameSearchIcon": this.accessibleNameSearchIcon || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_SEARCH_ICON) as string,
+    };
+  }
+
+  get tooltipInfo() {
+    return {
+      "tooltipResetButton": this.tooltipResetButton || UDExSearch.i18nBundle.getText(TOOLTIP_RESET_BUTTON) as string,
+      "tooltipVoiceButton": this.tooltipVoiceButton || UDExSearch.i18nBundle.getText(TOOLTIP_VOICE_BUTTON) as string,
+      "tooltipSubmitButton": this.tooltipSubmitButton || UDExSearch.i18nBundle.getText(TOOLTIP_SUBMIT_BUTTON) as string,
     };
   }
 

package/src/SearchSuggestions.hbs

@@ -7,6 +7,7 @@
     style="{{popoverStyles}}"
     id="{{getSuggestionsPopoverId}}"
     aria-orientation="vertical"
+    accessible-role="Dialog"
     accessible-name="{{suggestionsAccessibleName}}">
     {{#if showNoResultMessage}}
         <span class="udex-search-suggestions__message">{{noResultMessage}}</span>

package/src/SearchableListBase.ts

@@ -16,7 +16,7 @@ import { NO_MATCHES_FOUND } from "./generated/i18n/i18n-defaults.js";
  * @class
  *
  * A class to serve as a foundation
- * for the <code>UDExFilterMenu</code> and <code>UDExSelectBox</code> classes.
+ * for the <code>UDExFilterMenu</code> , <code>UDExSelectBox</code> and <code>UDExCountrySelector/code> classes.
  *
  * @constructor
  * @author SAP SE

package/src/SecondaryNavigation.hbs

@@ -1,4 +1,4 @@
-<div class="udex-secondary-navigation__root">
+<div class="{{rootClass}}">
     {{#if hasBreadcrumbsSlot}}
         <div class="udex-secondary-navigation__breadcrumbs">
             <slot name="breadcrumbs"></slot>
@@ -22,9 +22,11 @@
                         role="none"
                         class="udex-secondary-navigation__list-item">
                         <udex-secondary-navigation-item
+                            index="{{@index}}"
                             ?active="{{this.active}}"
                             path="{{this.path}}"
                             label="{{this.title}}"
+                            mobile-link-title="{{this.mobileLinkTitle}}"
                             target="{{this.target}}"
                             .subItems="{{this.items}}"
                             @ui5-sub-item-click="{{../handleSubItemClick}}"
@@ -37,6 +39,7 @@
                         role="none"
                         class="udex-secondary-navigation__list-item">
                         <udex-secondary-navigation-item
+                            index="{{visibleItems.length}}"
                             @ui5-sub-item-click="{{../handleSubItemClick}}"
                             @ui5-nav-item-click="{{../handleItemClick}}"
                             label="{{this.moreButtonText}}"
@@ -55,6 +58,7 @@
         role="button"
         aria-label="{{mobileMenuOpenerAriaLabel}}"
         label="{{title}}"
+        mobile-link-title="{{title}}"
         @ui5-sub-item-click="{{handleSubItemClick}}"
         .subItems="{{this.parsedItems}}">
         {{#if hasMobileButtonsSlot}}

package/src/SecondaryNavigation.ts

@@ -24,21 +24,15 @@ import SecondaryNavigationTemplate from "./generated/templates/SecondaryNavigati
 import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.js";
 
 const canvasContentFont: string = "16px / 17.6px '72 Brand Variable'";
-const breakpointSizeS: number = 979;
+const rootClass = "udex-secondary-navigation__root";
+export const breakpointSizeS: number = 979;
 
-export type SecondaryNavigationItemClickDetail = {
+export type ItemClickDetail = {
   originalEvent: Event,
-  clickedItem: UDExSecondaryNavigationItem;
+  clickedItem: NavItem;
   clickedIndex: number;
 };
 
-export type SecondaryNavigationSubItemClickDetail = {
-  originalEvent: Event,
-  clickedItem: {
-    items: Array<NavItem>
-  };
-}
-
 /**
  * @class
  *
@@ -70,13 +64,13 @@ export type SecondaryNavigationSubItemClickDetail = {
  * @allowPreventDefault
  * @public
  */
-@event<SecondaryNavigationItemClickDetail>("item-click", {
+@event<ItemClickDetail>("item-click", {
   detail: {
     originalEvent: {
       type: Event,
     },
     clickedItem: {
-      type: HTMLElement,
+      type: Object,
     },
     clickedIndex: {
       type: Integer,
@@ -84,23 +78,6 @@ export type SecondaryNavigationSubItemClickDetail = {
   },
 })
 
-/**
- * Fires when sub item is clicked
- *
- * @allowPreventDefault
- * @public
- */
-@event<SecondaryNavigationSubItemClickDetail>("sub-item-click", {
-  detail: {
-    originalEvent: {
-      type: Event,
-    },
-    clickedItem: {
-      type: HTMLElement,
-    },
-  },
-})
-
 class UDExSecondaryNavigation extends UI5Element {
   /**
    * Defines an aria label for the mobile menu opener
@@ -272,32 +249,42 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   getItemWidth(item: NavItem): number {
-    const canvas = document.createElement("canvas");
-    const context = canvas.getContext("2d")!;
+    const context = this.getCanvasContext();
     context.font = canvasContentFont;
 
     return Math.ceil(context.measureText(item.title).width);
   }
 
   getMoreButtonWidth(): number {
-    const canvas = document.createElement("canvas");
-    const context = canvas.getContext("2d")!;
+    const context = this.getCanvasContext();
     context.font = canvasContentFont;
 
     return Math.ceil(context.measureText(this.moreButtonText).width);
   }
 
+  getCanvasContext(): CanvasRenderingContext2D {
+    const canvas = document.createElement("canvas");
+    return canvas.getContext("2d")!;
+  }
+
   getCurrentIndex(item: UDExSecondaryNavigationItem): number {
     return this.domNavItems.indexOf(item);
   }
 
   handleItemClick(e: CustomEvent): void {
     const clickedItem = e.detail.item as UDExSecondaryNavigationItem;
-    const prevented = !this.fireEvent("item-click", {
-      originalEvent: e,
-      clickedItem,
-      clickedIndex: this.getCurrentIndex(clickedItem),
-    }, true);
+    const {
+      path, target, title, active, subItems, _id, mobileLinkTitle,
+    } = clickedItem;
+
+    const prevented = !this.fireEventItemClick(e, {
+      path,
+      target,
+      title,
+      active,
+      mobileLinkTitle,
+      items: subItems,
+    });
 
     if (prevented) {
       e.preventDefault();
@@ -305,9 +292,9 @@ class UDExSecondaryNavigation extends UI5Element {
     }
 
     this._clickedNavItem = clickedItem;
-    this.closePrevDropdown(clickedItem._id);
+    this.closePrevDropdown(_id);
 
-    if (!clickedItem.hasNestedItems) {
+    if (!subItems.length) {
       this.setActiveItem(this.parsedItems, clickedItem);
     }
   }
@@ -315,10 +302,7 @@ class UDExSecondaryNavigation extends UI5Element {
   handleSubItemClick(e: CustomEvent): void {
     const item = e.detail.item as UDExSecondaryNavigationSubItem;
     const { items } = item as NavItem;
-    const prevented = !this.fireEvent("sub-item-click", {
-      originalEvent: e,
-      clickedItem: item,
-    }, true);
+    const prevented = !this.fireEventItemClick(e, item);
 
     if (prevented) {
       e.preventDefault();
@@ -335,10 +319,30 @@ class UDExSecondaryNavigation extends UI5Element {
     }
   }
 
+  fireEventItemClick(
+    e: CustomEvent,
+    {
+      items, target, path, title, active, mobileLinkTitle,
+    }: NavItem,
+  ): boolean {
+    return this.fireEvent("item-click", {
+      originalEvent: e,
+      clickedItem: {
+        mobileLinkTitle: mobileLinkTitle || "",
+        path: path || "",
+        active: active || false,
+        items: items || [],
+        target,
+        title,
+      },
+      clickedIndex: e.detail.index,
+    }, true);
+  }
+
   setActiveItem(navItems: Array<NavItem>, clickedItem: UDExSecondaryNavigationItemBase): void {
     const updateNav = (items: Array<NavItem>, { title, path }: UDExSecondaryNavigationItemBase) => {
       items.forEach(item => {
-        if (item.title === title && item.path === path) {
+        if (item.title === title && (item.path === path || !item.path)) {
           item.active = true;
           return;
         }
@@ -357,17 +361,27 @@ class UDExSecondaryNavigation extends UI5Element {
   handleOutsideClick(): void {
     document.addEventListener("click", (e: MouseEvent) => {
       if (this.isMobileScreen && e.target !== this) {
-        this.mobileNav?.closeDropdown();
+        this.closeMobileDropdown();
         return;
       }
 
-      const isClickedNavItem = e.composedPath().includes(this._clickedNavItem);
-      if (this.isDesktopScreen && !isClickedNavItem && this._clickedNavItem) {
-        this._clickedNavItem.closeDropdown();
+      if (this.isDesktopScreen) {
+        this.handleDesktopDropdown(e);
       }
     });
   }
 
+  closeMobileDropdown(): void {
+    this.mobileNav?.closeDropdown();
+  }
+
+  handleDesktopDropdown(e: MouseEvent): void {
+    const isClickedNavItem = e.composedPath().includes(this._clickedNavItem);
+    if (!isClickedNavItem && this._clickedNavItem) {
+      this._clickedNavItem.closeDropdown();
+    }
+  }
+
   closePrevDropdown(clickedItemId: string): void {
     this.domNavItems.forEach(item => {
       if (clickedItemId !== item._id) {
@@ -417,6 +431,10 @@ class UDExSecondaryNavigation extends UI5Element {
     return !!this.getSlottedNodes("breadcrumbs").length && this.isDesktopScreen;
   }
 
+  get rootClass(): string {
+    return `${rootClass} ${this.hasBreadcrumbsSlot ? "" : `${rootClass}_centered`}`.trim();
+  }
+
   get hasDesktopButtonsSlot(): boolean {
     return this.hasButtons && this.isDesktopScreen;
   }

package/src/SecondaryNavigationItem.hbs

@@ -7,7 +7,7 @@
         target="{{target}}"
         @keydown="{{handleItemLinkKeyDown}}"
         @click="{{onItemClick}}">
-        {{label}}
+        {{itemLabel}}
     </a>
 {{else}}
     <button
@@ -20,7 +20,7 @@
         @keydown="{{handleItemButtonKeyDown}}"
         @click="{{onItemClick}}">
         <span class="udex-secondary-navigation__item-text-wrap">
-            {{label}}
+            {{itemLabel}}
             {{#if _subTitle}}
                 <span
                     class="udex-secondary-navigation__item-sub-title">
@@ -49,6 +49,7 @@
                             @ui5-back-item-click="{{../onBackClick}}"
                             is-back="{{this.isBack}}"
                             label="{{this.title}}"
+                            mobile-link-title="{{this.mobileLinkTitle}}"
                             .nestedItems="{{this.items}}"
                             path="{{this.path}}"
                             target="{{this.target}}"