@sapudex/web-components 0.114.2 → 0.117.1

package/src/Search.ts

@@ -43,6 +43,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 +134,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.
  *
@@ -841,16 +850,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 +872,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 +887,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 +1035,18 @@ class UDExSearch extends UI5Element {
     return !!this.recommendedList?.length;
   }
 
+  get hasPopoverContent(): boolean {
+    return !!(this.suggestedList?.length || this.recommendedList?.length);
+  }
+
+  get getAriaControls(): string {
+    return this.hasPopoverContent ? this.getSuggestionsPopoverId : "";
+  }
+
+  get getSuggestionsPopoverId(): string {
+    return SuggestionsPopoverId;
+  }
+
   get isShowSubmitButton(): boolean {
     return this.showSubmitButton;
   }

package/src/SearchSuggestions.hbs

@@ -5,7 +5,7 @@
     placement-type="Bottom"
     horizontal-align="Right"
     style="{{popoverStyles}}"
-    id="suggestions-popover"
+    id="{{getSuggestionsPopoverId}}"
     aria-orientation="vertical"
     accessible-name="{{suggestionsAccessibleName}}">
     {{#if showNoResultMessage}}

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/SecondaryNavigation.hbs

@@ -1,4 +1,4 @@
-<div class="{{rootClass}}">
+<div class="udex-secondary-navigation__root">
     {{#if hasBreadcrumbsSlot}}
         <div class="udex-secondary-navigation__breadcrumbs">
             <slot name="breadcrumbs"></slot>
@@ -6,87 +6,65 @@
     {{/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
+                            ?active="{{this.active}}"
+                            path="{{this.path}}"
+                            label="{{this.title}}"
+                            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
+                            @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}}"
+        @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}}