@sapudex/web-components 0.111.0 → 0.117.1

package/src/SearchSuggestions.hbs

@@ -5,82 +5,80 @@
     placement-type="Bottom"
     horizontal-align="Right"
     style="{{popoverStyles}}"
-    id="suggestions-popover"
+    id="{{getSuggestionsPopoverId}}"
     aria-orientation="vertical"
     accessible-name="{{suggestionsAccessibleName}}">
-    {{#if hasPopoverContent}}
+    {{#if showNoResultMessage}}
+        <span class="udex-search-suggestions__message">{{noResultMessage}}</span>
+    {{else}}
         <div role="tree">
             {{#if isShowSuggestedList}}
-                <div class="udex-search-suggestions__block">
+                <div class="udex-search-suggestions__block" role="treeitem">
                     {{#if suggestedHeading}}
                         <span class="udex-search-suggestions__heading" id="suggested-heading">{{suggestedHeading}}</span>
                     {{/if}}
-                    <ul class="udex-search-suggestions__list"
+                    <div class="udex-search-suggestions__list"
                         role="listbox"
                         aria-labelledby="suggested-heading"
                         tabindex="0"
                         @keydown="{{../handleKeyDownPopover}}">
                         {{#each suggestedList}}
-                            <li
-                                class="udex-search-suggestions__item"
-                                role="option"
+                            <ui5-button
                                 id="{{id}}"
+                                icon="{{icon}}"
+                                type="Button"
+                                design="Default"
+                                class="udex-search-suggestions__item-button"
+                                title="{{title}}"
+                                tabindex="-1"
+                                role="option"
+                                @click="{{handleSelectItem}}"
                             >
-                                <ui5-button
-                                    icon="{{icon}}"
-                                    type="Button"
-                                    design="Default"
-                                    class="udex-search-suggestions__item-button"
-                                    title="{{title}}"
-                                    tabindex="-1"
-                                    @click="{{handleSelectItem}}"
-                                >
-                                    {{{text}}}
-                                </ui5-button>
-                            </li>
+                                {{{text}}}
+                            </ui5-button>
                         {{/each}}
-                    </ul>
+                    </div>
                 </div>
             {{/if}}
             {{#if isShowRecommendedList}}
-                <div class="udex-search-suggestions__block">
+                <div class="udex-search-suggestions__block" role="treeitem">
                     {{#if recommendedHeading}}
                         <span class="udex-search-suggestions__heading" id="recommended-heading">{{recommendedHeading}}</span>
                     {{/if}}
-                    <ul class="udex-search-suggestions__list"
+                    <div class="udex-search-suggestions__list"
                         role="listbox"
                         aria-labelledby="recommended-heading"
                         tabindex="0"
                         @keydown="{{../handleKeyDownPopover}}">
                         {{#each recommendedList}}
-                            <li
-                                class="udex-search-suggestions__item"
-                                role="option"
-                                id="{{id}}">
-                                {{#if this.hasCustomIcon}}
-                                    <ui5-button
-                                        icon="{{icon}}"
-                                        type="Button"
-                                        design="Default"
-                                        class="udex-search-suggestions__item-button"
-                                        title="{{title}}"
-                                        @click="{{handleSelectItem}}">
-                                        {{{text}}}
-                                    </ui5-button>
-                                {{else}}
-                                    <ui5-button
-                                        type="Button"
-                                        design="Default"
-                                        class="udex-search-suggestions__item-button"
-                                        title="{{title}}"
-                                        tabindex="-1"
-                                        @click="{{handleSelectItem}}">
-                                        {{{text}}}
-                                    </ui5-button>
-                                {{/if}}
-                            </li>
+                            {{#if this.hasCustomIcon}}
+                                <ui5-button
+                                    id="{{id}}"
+                                    icon="{{icon}}"
+                                    type="Button"
+                                    design="Default"
+                                    class="udex-search-suggestions__item-button"
+                                    title="{{title}}"
+                                    tabindex="-1"
+                                    role="option"
+                                    @click="{{handleSelectItem}}">
+                                    {{{text}}}
+                                </ui5-button>
+                            {{else}}
+                                <ui5-button
+                                    id="{{id}}"
+                                    type="Button"
+                                    design="Default"
+                                    class="udex-search-suggestions__item-button"
+                                    title="{{title}}"
+                                    tabindex="-1"
+                                    role="option"
+                                    @click="{{handleSelectItem}}">
+                                    {{{text}}}
+                                </ui5-button>
+                            {{/if}}
                         {{/each}}
-                    </ul>
+                    </div>
                 </div>
             {{/if}}
         </div>

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,85 +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 _overflowItems.length}}
-                    <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}}
+                {{#if _showMoreButton}}
+                    <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>
-            <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}}