@sapudex/web-components 2.32.1 → 2.34.0

package/src/BreadcrumbsPopoverTemplate.tsx

@@ -4,6 +4,10 @@ import UDExLink from "./Link.js";
 import { Placement, HorizontalAlign } from "./types/Dropdown.js";
 
 export default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {
+  const focusableCount = this._dropdownItems.filter(i => !i._isCurrentPageItem).length;
+  const ofText = this._ofText;
+  let focusablePos = 0;
+
   return (
     <UDExDropdown
       id={`udex-${this._id}-breadcrumbs__popover`}
@@ -15,47 +19,55 @@ export default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {
       onKeyDown={this._handleKeydown}
       onClose={this._afterDropdownClose}
       onOpen={this._afterDropdownOpen}>
-      <div className={`${this._rootClass}__popover-content`}>
-        {this._dropdownItems.map((item, index) => (
-          item.icon ? (
-            <UDExLink
-              key={index}
-              data-index={index}
-              id={`${item._id}-li`}
-              onClick={this._onDropdownLinkPress}
-              href={item.href}
-              target={item.target}
-              class={`${this._rootClass}__item ${this._rootClass}__item--with-icon ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}
-              icon={item.icon}
-              accessibleName={item.textContent ?? undefined}
-              data-ui5-stable={item.stableDomRef}>
-              {item.textContent}
-            </UDExLink>
-          ) : item._isCurrentPageItem ? (
-            <span
-              key={index}
-              id={`${item._id}-li`}
-              className={`${this._rootClass}__item ${this._rootClass}__item--current ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}
-              accessible-name={item.accessibleName}
-              data-ui5-stable={item.stableDomRef}>
-              {item.textContent}
-            </span>
-          ) : (
-            <UDExLink
-              key={index}
-              data-index={index}
-              id={`${item._id}-li`}
-              onClick={this._onDropdownLinkPress}
-              href={item.href}
-              target={item.target}
-              class={`${this._rootClass}__item ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}
-              accessibleName={item.accessibleName}
-              data-ui5-stable={item.stableDomRef}>
-              {item.textContent}
-            </UDExLink>
-          )
-        ))}
-      </div>
+      <nav className={`${this._rootClass}__popover-content`} aria-label={this._breadcrumbsAccessibleNameText}>
+        <ol>
+          {this._dropdownItems.map((item, index) => {
+            if (!item._isCurrentPageItem) { focusablePos++; }
+            const posLabel = `${item.accessibleName || item.textContent || ""}, ${focusablePos} ${ofText} ${focusableCount}`;
+            return item._isCurrentPageItem ? (
+              <li key={index} aria-hidden="true">
+                <span
+                  id={`${item._id}-li`}
+                  className={`${this._rootClass}__item ${this._rootClass}__item--current ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}
+                  aria-current="page"
+                  accessible-name={item.accessibleName}
+                  data-ui5-stable={item.stableDomRef}>
+                  {item.textContent}
+                </span>
+              </li>
+            ) : (
+              <li key={index}>
+                {item.icon ? (
+                  <UDExLink
+                    data-index={index}
+                    id={`${item._id}-li`}
+                    onClick={this._onDropdownLinkPress}
+                    href={item.href}
+                    target={item.target}
+                    class={`${this._rootClass}__item ${this._rootClass}__item--with-icon ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}
+                    icon={item.icon}
+                    accessibleName={posLabel}
+                    data-ui5-stable={item.stableDomRef}>
+                    {item.textContent}
+                  </UDExLink>
+                ) : (
+                  <UDExLink
+                    data-index={index}
+                    id={`${item._id}-li`}
+                    onClick={this._onDropdownLinkPress}
+                    href={item.href}
+                    target={item.target}
+                    class={`${this._rootClass}__item ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}
+                    accessibleName={posLabel}
+                    data-ui5-stable={item.stableDomRef}>
+                    {item.textContent}
+                  </UDExLink>
+                )}
+              </li>
+            );
+          })}
+        </ol>
+      </nav>
     </UDExDropdown>
   );
 }

package/src/BreadcrumbsTemplate.tsx

@@ -20,30 +20,44 @@ export default function BreadcrumbsTemplate(this: Breadcrumbs) {
               onClick={this._toggleDropdown}
               accessibleName={this._dropdownArrowAccessibleNameText}
               accessibleRole={UDExButtonAccessibleRole.Button}
-              icon={slimArrowDown}
-              aria-haspopup="true">
+              accessibilityAttributes={this._triggerAccessibilityAttributes}
+              icon={slimArrowDown}>
             </UDExLink>
           </li>
           {this._linksData.map(linkData =>
-            <li
-              class={`${this._rootClass}__link-wrapper ui5-breadcrumbs-link-wrapper`}
-              id={`${linkData._id}-link-wrapper`}>
-              {!linkData._isCurrentPageItem && (
-                <>
-                  <span className={`${this._rootClass}__separator`} aria-hidden="true"></span>
-                  <UDExLink
-                    onClick={this._onLinkPress}
-                    id={`${linkData._id}-link`}
-                    class={`${rootClass}__item ${this._rootClass}__item--visible`}
-                    href={linkData.href}
-                    target={linkData.target}
-                    accessibleName={linkData._accessibleNameText}
-                    data-ui5-stable={linkData.stableDomRef}>
-                    {linkData.innerText}
-                  </UDExLink>
-                </>
-              )}
-            </li>
+            (linkData._isCurrentPageItem && !this.showCurrentPage ? null : (
+              <li
+                role={linkData._isCurrentPageItem ? "presentation" : undefined}
+                class={`${this._rootClass}__link-wrapper ui5-breadcrumbs-link-wrapper`}
+                id={`${linkData._id}-link-wrapper`}>
+                {linkData._isCurrentPageItem ? (
+                  <>
+                    <span className={`${this._rootClass}__separator`} aria-hidden="true"></span>
+                    <span
+                      id={`${linkData._id}-link`}
+                      class={`${rootClass}__item ${this._rootClass}__item--visible ${this._rootClass}__item--current-page`}
+                      aria-current="page"
+                      data-ui5-stable={linkData.stableDomRef}>
+                      {linkData.textContent}
+                    </span>
+                  </>
+                ) : (
+                  <>
+                    <span className={`${this._rootClass}__separator`} aria-hidden="true"></span>
+                    <UDExLink
+                      onClick={this._onLinkPress}
+                      id={`${linkData._id}-link`}
+                      class={`${rootClass}__item ${this._rootClass}__item--visible`}
+                      href={linkData.href}
+                      target={linkData.target}
+                      accessibleName={linkData._accessibleNameText}
+                      data-ui5-stable={linkData.stableDomRef}>
+                      {linkData.textContent}
+                    </UDExLink>
+                  </>
+                )}
+              </li>
+            ))
           )}
         </ol>
       </nav>

package/src/ListItem.hbs

@@ -89,26 +89,54 @@
                         <span class="udex-list__supporting-text" part="supporting">{{supportingText}}</span>
                     {{/if}}
                     <slot part="content"></slot>
+                    {{#if hasRating}}
+                        <udex-rating-indicator
+                            aria-label="{{ratingAriaLabel}}"
+                            value="{{rating}}"
+                            rating-count="{{ratingCount}}"
+                            total-count="{{totalCount}}"
+                            max="{{ratingMax}}"
+                            display="{{_displayRating}}"
+                            disabled
+                            readonly>
+                        </udex-rating-indicator>
+                    {{/if}}
                 </div>
                 {{#if additionalText}}<div class="udex-list__add-text" part="additional-text">{{additionalText}}</div>{{/if}}
-                {{#if hasFirstIcon}}
-                  <slot name="firstIcon" @click={{_fireIconClickEvent}}></slot>
-                {{/if}}
-                {{#if hasSecondIcon}}
-                  <slot name="secondIcon" @click={{_fireIconClickEvent}}></slot>
-                {{/if}}
+                <div class="udex-list__btn-wrap">
+                    {{#if hasFirstIcon}}
+                        <slot name="firstIcon" @click={{_fireIconClickEvent}}></slot>
+                    {{/if}}
+                    {{#if hasSecondIcon}}
+                        <slot name="secondIcon" @click={{_fireIconClickEvent}}></slot>
+                    {{/if}}
+                </div>
             {{else}}
                 <div class="udex-list__text-holder">
                     <slot part="content"></slot>
                     {{#if supportingText}}<span class="udex-list__supporting-text" part="supporting">{{supportingText}}</span>{{/if}}
+                    {{#if hasRating}}
+                        <udex-rating-indicator
+                            aria-label="{{ratingAriaLabel}}"
+                            value="{{rating}}"
+                            rating-count="{{ratingCount}}"
+                            total-count="{{totalCount}}"
+                            max="{{ratingMax}}"
+                            display="{{_displayRating}}"
+                            disabled
+                            readonly>
+                        </udex-rating-indicator>
+                    {{/if}}
                 </div>
                 {{#if additionalText}}<div class="udex-list__add-text" part="additional-text">{{additionalText}}</div>{{/if}}
-                {{#if hasFirstIcon}}
-                    <slot name="firstIcon" @click={{_fireIconClickEvent}}></slot>
-                {{/if}}
-                {{#if hasSecondIcon}}
-                    <slot name="secondIcon" @click={{_fireIconClickEvent}}></slot>
-                {{/if}}
+                <div class="udex-list__btn-wrap">
+                    {{#if hasFirstIcon}}
+                        <slot name="firstIcon" @click={{_fireIconClickEvent}}></slot>
+                    {{/if}}
+                    {{#if hasSecondIcon}}
+                        <slot name="secondIcon" @click={{_fireIconClickEvent}}></slot>
+                    {{/if}}
+                </div>
             {{/if}}
             {{#if collapsible}}
               <div class="udex-list__group-heading__icon-wrapper">
@@ -126,7 +154,7 @@
               </div>
             {{/if}}
         </div>
-      <div class="hidden" id="{{this._id}}-invisibleText">{{accessibleListItemName}}</div>
-      <div class="hidden" id="{{this._id}}-invisibleText-describedby">{{itemState}}</div>
+        <div class="hidden" id="{{this._id}}-invisibleText">{{accessibleListItemName}}</div>
+        <div class="hidden" id="{{this._id}}-invisibleText-describedby">{{itemState}}</div>
     </div>
 {{/inline}}

package/src/ListItem.ts

@@ -13,13 +13,14 @@ import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import UDExAvatar, { UDExAvatarShape, UDExAvatarSize } from "./Avatar.js";
 import UDExButton from "./Button.js";
 import UDExStatusBadge from "./StatusBadge.js";
+import UDExRatingIndicator, { UDExDisplayType } from "./RatingIndicator.js";
 import type UDExStatusBadgeValueState from "./types/StatusBadgeValueState.js";
 import { UDExListItemSize, UDExListMode, UDExAdditionalTextState } from "./types/List.js";
 import UDExRadioButton from "./RadioButton.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
-  INDETERMINATE, SELECTED, UNSELECTED,
+  INDETERMINATE, SELECTED, UNSELECTED, RATING_INDICATOR_TEXT, RATING_COUNT_TITLE, TOTAL,
 } from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
 
@@ -71,6 +72,7 @@ type UDExListItemItemPressEventDetail = {
     UDExRadioButton,
     UDExCheckbox,
     UDExStatusBadge,
+    UDExRatingIndicator,
     Icon,
   ],
 })
@@ -235,6 +237,8 @@ class UDExListItem extends UDExListItemBase {
   @property({ type: String })
     _additionalClassName!: string;
 
+  _displayRating: UDExDisplayType = UDExDisplayType.Desktop;
+
   deactivate: () => void;
 
   @i18n("@sapudex/web-components")
@@ -402,6 +406,13 @@ class UDExListItem extends UDExListItemBase {
   get itemState(): string {
     return this.selected ? "Selected" : "Not selected";
   }
+
+  get ratingAriaLabel(): string {
+    const ratingText = this.ratingCount ? `${translate(UDExListItem, RATING_COUNT_TITLE)} ${this.ratingCount}` : "";
+    const totalText = this.totalCount ? `${translate(UDExListItem, TOTAL)} ${this.totalCount}` : "";
+    const ratingTitleText = translate(UDExListItem, RATING_INDICATOR_TEXT);
+    return [...[ratingText, totalText].filter(Boolean), `${ratingTitleText} ${this.rating} of ${this.ratingMax}`].join(", ");
+  }
 }
 
 UDExListItem.define();

package/src/ListItemBase.ts

@@ -70,6 +70,42 @@ type UDExListItemBaseAccordionClickEventDetail = {
 class UDExListItemBase extends UI5Element {
   eventDetails!: UDExListItemBaseEvents;
 
+  /**
+   * Defines the number of displayed rating symbols.
+   *
+   * @default 5
+   * @public
+   */
+  @property({ type: Number })
+    ratingMax: number = 5;
+
+  /**
+   * Defines the value of the rating.
+   * Use for rating indicator to represent aggregated review scores within list items
+   *
+   * @public
+   */
+  @property({ type: String })
+    rating?: string;
+
+  /**
+   * Defines the number of the rating.
+   * Use for the rating indicator
+   *
+   * @public
+   */
+  @property({ type: String })
+    ratingCount?: string;
+
+  /**
+   * The number of total votes.
+   * Use for the rating indicator
+   *
+   * @public
+   */
+  @property({ type: String })
+    totalCount?: string;
+
   /**
    * Defines the <code>label</code> for the item.
    *
@@ -313,6 +349,10 @@ class UDExListItemBase extends UI5Element {
   get expanded(): boolean {
     return !this.collapsed;
   }
+
+  get hasRating(): boolean {
+    return !!this.rating;
+  }
 }
 
 export default UDExListItemBase;

package/src/MastheadItem.ts

@@ -44,8 +44,9 @@ export interface IMastheadItem {
 
 export type CategoryItem = {
   title: string;
-  url: string;
+  url?: string;
   externalLink: boolean;
+  subItems?: CategoryItem[];
 };
 
 export type SubMenuLinkItem = {

package/src/MastheadMenu.hbs

@@ -77,6 +77,41 @@
             <li>
                 {{#if this.isDivider}}
                     <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
+                {{else if this.subItems}}
+                    {{#if this.url}}
+                        <udex-masthead-menu-item
+                            part="menu-item"
+                            accessible-role="link"
+                            exportparts="menu-item"
+                            @click="{{../../../handleMenuItemClick}}"
+                            url="{{this.url}}"
+                            label="{{this.title}}"
+                            class="udex-masthead-menu__sub-category">
+                        </udex-masthead-menu-item>
+                    {{else}}
+                        <span class="udex-masthead-menu__sub-category">{{this.title}}</span>
+                    {{/if}}
+                    <ul class="udex-masthead-menu__sub-list" aria-label="{{this.title}}">
+                        {{#each this.subItems}}
+                            <li>
+                                {{#if this.isDivider}}
+                                    <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
+                                {{else}}
+                                    <udex-masthead-menu-item
+                                        part="menu-item"
+                                        accessible-role="link"
+                                        exportparts="menu-item"
+                                        exportparts="badge"
+                                        @click="{{../../../../handleMenuItemClick}}"
+                                        badge="{{this.badge}}"
+                                        ?external-link="{{this.externalLink}}"
+                                        url="{{this.url}}"
+                                        label="{{this.title}}">
+                                    </udex-masthead-menu-item>
+                                {{/if}}
+                            </li>
+                        {{/each}}
+                    </ul>
                 {{else}}
                     <udex-masthead-menu-item
                         part="menu-item"

package/src/MastheadMenu.ts

@@ -29,9 +29,10 @@ const rowClass = "udex-masthead-menu_with-one-column";
 
 export type Item = {
   title: string;
-  url: string;
+  url?: string;
   externalLink: boolean;
   isDivider?: boolean;
+  subItems?: Item[];
 };
 
 export type SubMenuLinkItem = {

package/src/MastheadMobileMenu.hbs

@@ -205,17 +205,48 @@
         </li>
     {{/if}}
     {{#each _category.items}}
-        {{#if this.url}}
+        {{#if this.subItems}}
             <li class="udex-masthead-mobile-menu__list-item" role="none">
-                <udex-masthead-menu-item
-                    part="menu-item"
-                    @click="{{../handleMobileCategoryItemEvent}}"
-                    label="{{this.title}}"
-                    url="{{this.url}}"
-                    third-level
-                    has-border>
-                </udex-masthead-menu-item>
+                {{#if this.url}}
+                    <udex-masthead-menu-item
+                        part="menu-item"
+                        @click="{{../handleMobileCategoryItemEvent}}"
+                        label="{{this.title}}"
+                        url="{{this.url}}"
+                        class="udex-masthead-mobile-menu__sub-category"
+                        third-level>
+                    </udex-masthead-menu-item>
+                {{else}}
+                    <span class="udex-masthead-mobile-menu__sub-category">{{this.title}}</span>
+                {{/if}}
+                <ul class="udex-masthead-mobile-menu__sub-list" aria-label="{{this.title}}">
+                    {{#each this.subItems}}
+                        {{#if this.url}}
+                            <li class="udex-masthead-mobile-menu__list-item" role="none">
+                                <udex-masthead-menu-item
+                                    part="menu-item"
+                                    @click="{{../../handleMobileCategoryItemEvent}}"
+                                    label="{{this.title}}"
+                                    url="{{this.url}}"
+                                    third-level>
+                                </udex-masthead-menu-item>
+                            </li>
+                        {{/if}}
+                    {{/each}}
+                </ul>
             </li>
+        {{else}}
+            {{#if this.url}}
+                <li class="udex-masthead-mobile-menu__list-item" role="none">
+                    <udex-masthead-menu-item
+                        part="menu-item"
+                        @click="{{../handleMobileCategoryItemEvent}}"
+                        label="{{this.title}}"
+                        url="{{this.url}}"
+                        third-level>
+                    </udex-masthead-menu-item>
+                </li>
+            {{/if}}
         {{/if}}
     {{/each}}
 {{/inline}}

package/src/SearchableListBase.hbs

@@ -62,6 +62,10 @@
                                 ?divider="{{this.divider}}"
                                 ?disabled="{{this.disabled}}"
                                 ?selected="{{this.selected}}"
+                                rating="{{this.rating}}"
+                                total-count="{{this.totalCount}}"
+                                rating-count="{{this.ratingCount}}"
+                                rating-max="{{this.ratingMax}}"
                                 label="{{this.label}}">
                                 {{{this.innerHTML}}}
                             </udex-list-item>
@@ -99,6 +103,10 @@
                                 ?divider="{{this.divider}}"
                                 ?disabled="{{this.disabled}}"
                                 ?selected="{{this.selected}}"
+                                rating="{{this.rating}}"
+                                total-count="{{this.totalCount}}"
+                                rating-count="{{this.ratingCount}}"
+                                rating-max="{{this.ratingMax}}"
                                 label="{{this.label}}">
                                 {{{this.innerHTML}}}
                             </udex-list-item>
@@ -118,6 +126,10 @@
                     ?controlled="{{this.controlled}}"
                     ?divider="{{this.divider}}"
                     ?selected="{{this.item.selected}}"
+                    rating="{{this.item.rating}}"
+                    total-count="{{this.item.totalCount}}"
+                    rating-count="{{this.item.ratingCount}}"
+                    rating-max="{{this.item.ratingMax}}"
                     label="{{this.item.label}}"
                     accessible-role="{{../listItemRole}}">
                     {{{this.item.innerHTML}}}

package/src/SearchableListBase.ts

@@ -14,8 +14,9 @@ import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import type UDExList from "./List.js";
 import type UDExListItem from "./ListItem.js";
 import type UDExFilterMenuItem from "./FilterMenuItem.js";
+import type UDExSelectBoxItem from "./SelectBoxItem.js";
 import { SHOW_SEARCH_AFTER_COUNT, UDExPopoverPart } from "./types/SearchableListBase.js";
-import { NO_MATCHES_FOUND, RESULT_RETURNED } from "./generated/i18n/i18n-defaults.js";
+import { NO_MATCHES_FOUND, RESULT_RETURNED, STARS } from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
 
 export type UDExItemFromList = UDExListItemBase | UDExListGroupHeaderBase | null | undefined;
@@ -403,6 +404,10 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   checkAndUpdateLabel(item: UDExListItemBase | UDExListGroupHeaderBase, str: string): boolean {
+    if (item.ratingCount) {
+      return this.isIncludes(item.ratingCount, str);
+    }
+
     if (!item.label) {
       console.warn("A label property is required for the item");
       return false;
@@ -597,7 +602,7 @@ class UDExSearchableListBase extends UI5Element {
     content.style.maxHeight = this.height || "";
   }
 
-  _setItemsModeAndControl(items: Array<UDExFilterMenuItem>) {
+  _setItemsModeAndControl(items: Array<UDExFilterMenuItem | UDExSelectBoxItem>) {
     items.forEach(item => {
       item.mode = this.mode;
       item.controlled = this.isControlled;
@@ -617,6 +622,10 @@ class UDExSearchableListBase extends UI5Element {
     return translate(UDExSearchableListBase, RESULT_RETURNED);
   }
 
+  get startsText(): string {
+    return translate(UDExSearchableListBase, STARS);
+  }
+
   get isListEmpty(): boolean {
     return this._filteredItems.length === 0;
   }

package/src/SecondaryNavigation.hbs

@@ -10,6 +10,7 @@
                 {{#if headingHref.length}}
                     <a
                         class="udex-secondary-navigation__title"
+                        tabindex="0"
                         @click="{{handleHeadingClick}}"
                         href="{{headingHref}}">
                         {{heading}}
@@ -19,14 +20,12 @@
                 {{/if}}
             </div>
         {{/if}}
-        <div class="udex-secondary-navigation__wrap">
+        <nav class="udex-secondary-navigation__wrap">
             <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}}"
@@ -44,7 +43,6 @@
                 {{/each}}
                 {{#if _showMoreButton}}
                     <li
-                        role="none"
                         class="udex-secondary-navigation__list-item">
                         <udex-secondary-navigation-item
                             _nav-items-length="{{visibleItems.length}}"
@@ -60,7 +58,7 @@
             {{#if hasDesktopButtonsSlot}}
                 {{>buttons}}
             {{/if}}
-        </div>
+        </nav>
     </div>
     <udex-secondary-navigation-item
         @keydown="{{handleKeyDown}}"
@@ -75,7 +73,9 @@
         _is-mobile-menu-opener
         .subItems="{{this.parsedItems}}">
         {{#if hasMobileButtonsSlot}}
-            {{>buttons}}
+            <div class="udex-secondary-navigation__buttons" @click="{{handleMobileButtonsClick}}">
+                <slot name="buttons"></slot>
+            </div>
         {{/if}}
     </udex-secondary-navigation-item>
 </div>