@sapudex/web-components 0.114.2 → 0.127.6

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";
 
@@ -43,6 +48,8 @@ import retryUntilSuccessful from "./utils/retryUntilSuccessful.js";
 
 const SearchIcon: string = "sap-icon://search";
 
+const SuggestionsPopoverId: string = "suggestions-popover";
+
 type ListItem = {
   label: string;
   icon: string;
@@ -132,6 +139,13 @@ export enum Mode {
  * @public
  */
 @event("handle-value-reset")
+/**
+ * Fired event when the user presses escape in search field.
+ *
+ * @event sap.ui.webc.web-components.UDExSearch#handleCloseSearch
+ * @public
+ */
+@event("handle-close-search")
 /**
  * Fired event when the user clicks on the item inside the popover.
  *
@@ -307,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.
    *
@@ -414,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);
@@ -639,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");
@@ -660,6 +728,7 @@ class UDExSearch extends UI5Element {
     const dropdown = this.getPrefixPopover();
 
     dropdown.close();
+    this._prefixDropdownExpanded = false;
     this.handleAfterClosePrefixPopover();
   }
 
@@ -841,16 +910,17 @@ class UDExSearch extends UI5Element {
     this.handleEnterKey(e);
     this.handleTabKey(e);
     this.handleEscapeKey(e);
+    this.fireEvent("search-keydown", e);
   };
 
   handleEnterKey(e: KeyboardEvent) {
-    if (isEnter(e) && !this.open) {
-      e.preventDefault();
-      this.handleSubmitValue();
-    }
-    if (isEnter(e) && this.open) {
-      this.Suggestion?.onEnter(e);
-      this.fireDropdownItemClick(this.value);
+    if (isEnter(e)) {
+      if (!this.open) {
+        e.preventDefault();
+      } else {
+        this.Suggestion?.onEnter(e);
+        this.fireDropdownItemClick(this.value);
+      }
       this.handleSubmitValue();
     }
   }
@@ -862,9 +932,12 @@ class UDExSearch extends UI5Element {
   }
 
   handleEscapeKey(e: KeyboardEvent) {
-    if (isEscape(e) && this.open) {
-      this.Suggestion?.onEscape(e);
-      this.handleClassToRoot();
+    if (isEscape(e)) {
+      if (this.open) {
+        this.Suggestion?.onEscape(e);
+        this.handleClassToRoot();
+      }
+      this.fireEvent("handle-close-search");
     }
   }
 
@@ -874,12 +947,14 @@ class UDExSearch extends UI5Element {
       this.handlePrevTabKeyList(e);
       this.handleDownKeyList(e);
       this.handleUpKeyList(e);
+      this.handleEscapeKey(e);
     }
   }
 
   handleTabKeyList(e: KeyboardEvent) {
     if (isTabNext(e)) {
       this.Suggestion?.onKeyTabList(e);
+      this.handleClassToRoot();
     }
   }
 
@@ -1020,6 +1095,18 @@ class UDExSearch extends UI5Element {
     return !!this.recommendedList?.length;
   }
 
+  get hasPopoverContent(): boolean {
+    return !!(this.suggestedList?.length || this.recommendedList?.length);
+  }
+
+  get getAriaHasPopup(): string {
+    return this.showSuggestedPopover ? "dialog" : "false";
+  }
+
+  get getSuggestionsPopoverId(): string {
+    return SuggestionsPopoverId;
+  }
+
   get isShowSubmitButton(): boolean {
     return this.showSubmitButton;
   }
@@ -1071,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

@@ -5,8 +5,9 @@
     placement-type="Bottom"
     horizontal-align="Right"
     style="{{popoverStyles}}"
-    id="suggestions-popover"
+    id="{{getSuggestionsPopoverId}}"
     aria-orientation="vertical"
+    accessible-role="Dialog"
     accessible-name="{{suggestionsAccessibleName}}">
     {{#if showNoResultMessage}}
         <span class="udex-search-suggestions__message">{{noResultMessage}}</span>

package/src/SearchableListBase.hbs

@@ -45,6 +45,7 @@
                     </udex-list-select-all>
                 {{else}}
                     <udex-list-group-header
+                        role="list"
                         _additional-class-name="udex-searchable-list__header"
                         class="{{../groupClassName}}"
                         ?non-interactive="{{this.item.nonInteractive}}"
@@ -57,6 +58,7 @@
                         ?indeterminate="{{this.item.indeterminate}}">
                         {{#each this.groupItems}}
                             <udex-list-item
+                                role="none"
                                 data-token-id="{{this._id}}"
                                 ?controlled="{{this.controlled}}"
                                 mode="{{this.mode}}"

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

@@ -6,87 +6,69 @@
     {{/if}}
     <div class="udex-secondary-navigation__holder">
         <div class="udex-secondary-navigation__heading">
-            <div class="udex-secondary-navigation__text-wrap">
+            {{#if titleHref.length}}
+                <a class="udex-secondary-navigation__title" href="{{titleHref}}">{{title}}</a>
+            {{else}}
                 <span class="udex-secondary-navigation__title">{{title}}</span>
-                <span class="udex-secondary-navigation__active-title">{{activeItemText}}</span>
-            </div>
-            <button
-                class="udex-secondary-navigation__mobile-opener"
-                role="button"
-                aria-expanded="{{_mobileBtnExpanded}}"
-                aria-label="{{mobileMenuOpenerAriaLabel}}"
-                aria-haspopup="true"
-                @click="{{handleMobileOpen}}">
-                <ui5-icon class="udex-secondary-navigation__title-icon" name="slim-arrow-down"></ui5-icon>
-            </button>
+            {{/if}}
         </div>
         <div class="udex-secondary-navigation__wrap">
-            <ul role="menubar" class="udex-secondary-navigation__list" @keydown="{{handleKeyDown}}">
-                {{#each items}}
-                    <li role="none" class="udex-secondary-navigation__list-item udex-secondary-navigation__link-btn-wrap" ?active="{{this.active}}">
-                        {{#if this.path}}
-                            <a
-                                role="menuitem"
-                                class="udex-secondary-navigation__item udex-secondary-navigation__link-btn"
-                                href="{{this.path}}"
-                                target="{{this.target}}"
-                                @click="{{../handleNavigationClick}}">
-                                {{this.title}}
-                            </a>
-                        {{else}}
-                            <button role="menuitem" class="udex-secondary-navigation__item udex-secondary-navigation__link-btn" @click="{{../handleNavigationClick}}">
-                                {{this.title}}
-                            </button>
-                        {{/if}}
+            <ul
+                role="menubar"
+                class="udex-secondary-navigation__list"
+                @keydown="{{handleKeyDown}}">
+                {{#each visibleItems}}
+                    <li
+                        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}}"
+                            @ui5-nav-item-click="{{../handleItemClick}}">
+                        </udex-secondary-navigation-item>
                     </li>
                 {{/each}}
                 {{#if _showMoreButton}}
-                    <li role="none" class="{{moreClass}} udex-secondary-navigation__link-btn-wrap" ?active="{{moreIsActive}}">
-                        <button
-                            role="menuitem"
-                            @click="{{handleToggleDropdown}}"
-                            aria-expanded="{{_dropdownMoreIsOpen}}"
-                            aria-label="{{this.moreButtonText}}"
-                            aria-haspopup="true"
-                            class="udex-secondary-navigation__item udex-secondary-navigation__link-btn udex-secondary-navigation__link-btn-more">
-                            {{this.moreButtonText}}
-                            <ui5-icon
-                                class="udex-secondary-navigation__item-icon"
-                                name="slim-arrow-down">
-                            </ui5-icon>
-                        </button>
-                        {{#if _dropdownMoreIsOpen}}
-                            <div class="udex-secondary-navigation__dropdown">
-                                <ul role="menu" class="udex-secondary-navigation__dropdown-list" @keydown="{{handleKeyDownDropdown}}">
-                                    {{#each _overflowItems}}
-                                        <li role="none" ?active="{{this.active}}" class="udex-secondary-navigation__link-btn-wrap">
-                                            {{#if this.path}}
-                                                <a
-                                                    role="menuitem"
-                                                    href="{{this.path}}"
-                                                    target="{{this.target}}"
-                                                    class="udex-secondary-navigation__dropdown-item udex-secondary-navigation__link-btn"
-                                                    @click="{{../handleNavigationClick}}">
-                                                    {{this.title}}
-                                                </a>
-                                            {{else}}
-                                                <button role="menuitem" class="udex-secondary-navigation__dropdown-item" @click="{{../handleNavigationClick}}">
-                                                    {{this.title}}
-                                                </button>
-                                            {{/if}}
-                                        </li>
-                                    {{/each}}
-                                </ul>
-                            </div>
-                        {{/if}}
+                    <li
+                        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}}"
+                            .subItems="{{this._overflowItems}}">
+                        </udex-secondary-navigation-item>
                     </li>
                 {{/if}}
             </ul>
-            {{#if hasButtonsSlot}}
-                <div class="udex-secondary-navigation__buttons">
-                    <slot name="buttons"></slot>
-                </div>
+            {{#if hasDesktopButtonsSlot}}
+                {{>buttons}}
             {{/if}}
         </div>
     </div>
+    <udex-secondary-navigation-item
+        class="udex-secondary-navigation__mobile-nav"
+        role="button"
+        aria-label="{{mobileMenuOpenerAriaLabel}}"
+        label="{{title}}"
+        mobile-link-title="{{title}}"
+        @ui5-sub-item-click="{{handleSubItemClick}}"
+        .subItems="{{this.parsedItems}}">
+        {{#if hasMobileButtonsSlot}}
+            {{>buttons}}
+        {{/if}}
+    </udex-secondary-navigation-item>
 </div>
+
+{{#*inline "buttons"}}
+    <div class="udex-secondary-navigation__buttons">
+        <slot name="buttons"></slot>
+    </div>
+{{/inline}}