@sapudex/web-components 0.117.1 → 0.138.0

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

@@ -16,7 +16,9 @@ import {
   isUp,
   isDown,
   isEscape,
+  isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import List from "./List.js";
 import ListItemBase from "./ListItemBase.js";
 import "@ui5/webcomponents/dist/Icon.js";
@@ -30,6 +32,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";
 
@@ -92,7 +99,7 @@ export enum Mode {
  * For the <code>udex-search</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Search.js";</code>
+ * <code>import "@udex/web-components/dist/Search.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -316,6 +323,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 +475,29 @@ 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;
+
+  /**
+   * Defines the active (focus)
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    active!: boolean;
+  /**
+   * Defines is it the touch of the input field (only for mobile devices).
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _isTouched!: boolean;
+
   constructor() {
     super();
     this._handleResizeBound = this._handleResize.bind(this);
@@ -648,6 +723,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 +745,7 @@ class UDExSearch extends UI5Element {
     const dropdown = this.getPrefixPopover();
 
     dropdown.close();
+    this._prefixDropdownExpanded = false;
     this.handleAfterClosePrefixPopover();
   }
 
@@ -682,6 +759,9 @@ class UDExSearch extends UI5Element {
   }
 
   handleInputClick(): void {
+    if (!isDesktop()) {
+      this._isTouched = true;
+    }
     if (this.showPopoverWhenClickedIntoInput) {
       this.onOpenPopover();
     }
@@ -699,7 +779,7 @@ class UDExSearch extends UI5Element {
 
   handleAriaExpanded() {
     const value = this.open.toString();
-    this.shadowRoot?.querySelector("[udex-id='search-input']")?.setAttribute("aria-expanded", value);
+    this.getSearchInput()?.setAttribute("aria-expanded", value);
   }
 
   onOpenPopover(): void {
@@ -822,6 +902,7 @@ class UDExSearch extends UI5Element {
   }
 
   handleBlur(): void {
+    this._isTouched = false;
     if (this.value) {
       this.labelActiveClass = this._labelActiveClassName;
     } else {
@@ -917,6 +998,7 @@ class UDExSearch extends UI5Element {
   }
 
   handleFocus(): void {
+    this.active = true;
     this.isFocusedOnTextfield = true;
     this.focusClasses = this._focusActiveClassName;
     this.labelActiveClass = (this.value || !this.labelAnimationDisabled) ? this._labelActiveClassName : "";
@@ -924,24 +1006,39 @@ class UDExSearch extends UI5Element {
   }
 
   handleFocusout(): void {
+    this.active = false;
     this.isFocusedOnTextfield = false;
     this.focusClasses = "";
   }
 
   onReset(e: MouseEvent): void {
     e.stopPropagation();
+    this.handleReset();
+  }
+
+  handleReset(): void {
     this.value = "";
     this.showResetButton = false;
     this.onClosePopover();
-    this.handleBlur();
     this.fireEvent("handle-value-reset");
     this.Suggestion?.resetFocusState();
+    this.focus();
   }
 
   handleKeyDownReset(e: KeyboardEvent) {
     if (isTabPrevious(e) && this.open) {
       this.Suggestion?.handlePrevTabReset(e);
     }
+    if (isEnter(e) || isSpace(e)) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.handleReset();
+      this.getSearchInput()?.focus();
+    }
+  }
+
+  private getSearchInput(): HTMLInputElement {
+    return this.shadowRoot?.querySelector("[id='search-input']") as HTMLInputElement;
   }
 
   onVoice(e: MouseEvent): void {
@@ -965,7 +1062,7 @@ class UDExSearch extends UI5Element {
   onSpeechStart(): void {
     this.speechRecognition.onstart = () => {
       this.voiceActiveClass = this._voiceActiveClassName;
-      (this.shadowRoot?.querySelector("[id='search-input']") as HTMLInputElement)?.focus();
+      this.getSearchInput()?.focus();
     };
   }
 
@@ -1039,8 +1136,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 +1195,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,17 +1,19 @@
-<div class="udex-secondary-navigation__root">
+<div class="{{rootClass}}">
     {{#if hasBreadcrumbsSlot}}
         <div class="udex-secondary-navigation__breadcrumbs">
             <slot name="breadcrumbs"></slot>
         </div>
     {{/if}}
     <div class="udex-secondary-navigation__holder">
-        <div class="udex-secondary-navigation__heading">
-            {{#if titleHref.length}}
-                <a class="udex-secondary-navigation__title" href="{{titleHref}}">{{title}}</a>
-            {{else}}
-                <span class="udex-secondary-navigation__title">{{title}}</span>
-            {{/if}}
-        </div>
+        {{#if title.length}}
+            <div class="udex-secondary-navigation__heading">
+                {{#if titleHref.length}}
+                    <a class="udex-secondary-navigation__title" href="{{titleHref}}">{{title}}</a>
+                {{else}}
+                    <span class="udex-secondary-navigation__title">{{title}}</span>
+                {{/if}}
+            </div>
+        {{/if}}
         <div class="udex-secondary-navigation__wrap">
             <ul
                 role="menubar"
@@ -22,9 +24,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 +41,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 +60,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
@@ -216,7 +193,7 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   reflowItems(): void {
-    const availableWidth = this.rootHolder.offsetWidth - this.heading?.offsetWidth - (this.optionalButtons?.offsetWidth || 0);
+    const availableWidth = this.rootHolder.offsetWidth - (this.heading?.offsetWidth || 0) - (this.optionalButtons?.offsetWidth || 0);
     const moreButtonWidth = this.getMoreButtonWidth();
     const itemsGap = 20;
     const widths = this.parsedItems.map(item => this.getItemWidth(item));
@@ -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;
         }
@@ -355,17 +359,29 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   handleOutsideClick(): void {
-    document.addEventListener("click", (e: MouseEvent) => {
-      if (this.isMobileScreen && e.target !== this) {
-        this.mobileNav?.closeDropdown();
-        return;
-      }
+    document.addEventListener("mousedown", this.outsideClickListener);
+  }
 
-      const isClickedNavItem = e.composedPath().includes(this._clickedNavItem);
-      if (this.isDesktopScreen && !isClickedNavItem && this._clickedNavItem) {
-        this._clickedNavItem.closeDropdown();
-      }
-    });
+  outsideClickListener = (e: MouseEvent): void => {
+    if (this.isMobileScreen && e.target !== this) {
+      this.closeMobileDropdown();
+      return;
+    }
+
+    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 {
@@ -417,6 +433,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}}"