@sapudex/web-components 0.226.0 → 2.1.0

package/src/SearchableListBase.ts

@@ -1,22 +1,44 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import {
   isDown, isUp,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { cleanLabel } from "./utils/listItemLabelUtils.js";
-import Search from "./Search.js";
-import UDExListItemBase from "./ListItemBase.js";
-import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
-import { ListMode } from "./types/List.js";
-import UDExFilterMenuItem from "./FilterMenuItem.js";
-import { ProcessedItem, SHOW_SEARCH_AFTER_COUNT } from "./types/SearchableListBase.js";
+import type Search from "./Search.js";
+import type UDExListItemBase from "./ListItemBase.js";
+import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
+import { UDExListMode } from "./types/List.js";
+import type UDExFilterMenuItem from "./FilterMenuItem.js";
+import type { UDExProcessedItem } from "./types/SearchableListBase.js";
+import { SHOW_SEARCH_AFTER_COUNT } from "./types/SearchableListBase.js";
 import { NO_MATCHES_FOUND } from "./generated/i18n/i18n-defaults.js";
 
+export type UDExItemFromList = UDExListItemBase | UDExListGroupHeaderBase | null | undefined;
+
+type UDExSearchableListBaseChangeSearchEventDetail = {
+  value: string,
+}
+
+type UDExSearchableListBaseSelectionChangeEventDetail = {
+  selectedItems: Array<UDExListItemBase>,
+  item: UDExItemFromList,
+}
+type UDExSearchableListBaseSubmitSearchEventDetail = {
+  selectedItems: Array<UDExListItemBase>
+}
+
+export type UDExSearchableListBaseEvents = {
+  "select-all": void,
+  "selection-change": UDExSearchableListBaseSelectionChangeEventDetail,
+  "submit-search": UDExSearchableListBaseSubmitSearchEventDetail,
+  "reset-search": void,
+  "change-search": UDExSearchableListBaseChangeSearchEventDetail,
+}
+
 /**
  * @class
  *
@@ -32,57 +54,40 @@ import { NO_MATCHES_FOUND } from "./generated/i18n/i18n-defaults.js";
 /**
  * Fired event when the user click on an item on the list.
  *
- * @event sap.ui.webc.web-components.UDExSearchableListBase#selectionChange
  * @public
  */
-@event("selection-change", {
-  detail: {
-    selectedItems: { type: Array },
-    item: { type: HTMLElement },
-  },
-})
+@event("selection-change", { bubbles: true })
 
 /**
  * Fired event when the user clicks on the Select All header.
  *
- * @event sap.ui.webc.web-components.UDExSearchableListBase#selectAll
  * @public
  */
-@event("select-all")
+@event("select-all", { bubbles: true })
 
 /**
  * Fired event when the user clicks on the submitted icon in the search.
  *
- * @event sap.ui.webc.web-components.UDExSearchableListBase#submitSearch
  * @public
  */
-@event("submit-search", {
-  detail: {
-    selectedItems: { type: Array },
-  },
-})
+@event("submit-search", { bubbles: true })
 
 /**
  * Fired event when the user clicks on the reset button in the search.
  *
- * @event sap.ui.webc.web-components.UDExSearchableListBase#resetSearch
  * @public
  */
-@event("reset-search")
+@event("reset-search", { bubbles: true })
 
 /**
  * Fired event when the user submitted the value in the search.
  *
- * @event sap.ui.webc.web-components.UDExSearchableListBase#changeSearch
  * @public
  */
-@event("change-search", {
-  detail: {
-    value: { type: String },
-  },
-})
+@event("change-search", { bubbles: true })
 
 class UDExSearchableListBase extends UI5Element {
+  eventDetails!: UDExSearchableListBaseEvents;
   /**
    * Defines if the component would display a loading indicator.
    *
@@ -98,8 +103,8 @@ class UDExSearchableListBase extends UI5Element {
    * @default 1000
    * @public
    */
-  @property({ type: Number, defaultValue: 1000, validator: Integer })
-    busyDelay?: number;
+  @property({ type: Number })
+    busyDelay: number = 1000;
 
   /**
    * Defines the "no result" text of the component.
@@ -143,8 +148,8 @@ class UDExSearchableListBase extends UI5Element {
    * @default "SingleSelect"
    * @public
    */
-  @property({ type: ListMode, defaultValue: ListMode.SingleSelect })
-    mode!: `${ListMode}`;
+  @property()
+    mode: `${UDExListMode}` = UDExListMode.SingleSelect;
 
   /**
    * Slot for items.
@@ -161,16 +166,17 @@ class UDExSearchableListBase extends UI5Element {
    * @default "list"
    * @public
    */
-  @property({ type: String, defaultValue: "list" })
-    defaultAccessibleRole!: string;
+  @property({ type: String })
+    defaultAccessibleRole: string = "list";
 
   @property({ type: Object })
-    _filteredItems!: Array<ProcessedItem>;
-
-  _shouldFilterItems?: boolean;
+    _filteredItems!: Array<UDExProcessedItem>;
 
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
+  _shouldFilterItems?: boolean;
+
   constructor() {
     super();
     this._shouldFilterItems = false;
@@ -265,7 +271,7 @@ class UDExSearchableListBase extends UI5Element {
     const searchValue: string = e.detail.value;
     this._shouldFilterItems = true;
     this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);
-    this.fireEvent("change-search", { value: searchValue });
+    this.fireDecoratorEvent("change-search", { value: searchValue });
   }
 
   onReset() {
@@ -274,11 +280,11 @@ class UDExSearchableListBase extends UI5Element {
 
   onResetSearch() {
     this.resetSearch();
-    this.fireEvent("reset-search");
+    this.fireDecoratorEvent("reset-search");
   }
 
   onSubmitSearch() {
-    this.fireEvent("submit-search", {
+    this.fireDecoratorEvent("submit-search", {
       selectedItems: this.selectedItems,
     });
   }
@@ -293,7 +299,7 @@ class UDExSearchableListBase extends UI5Element {
     this._filteredItems = this.filterItems(this.getProcessedItems(), "");
   }
 
-  filterItems(items: Array<ProcessedItem>, str: string): Array<ProcessedItem> {
+  filterItems(items: Array<UDExProcessedItem>, str: string): Array<UDExProcessedItem> {
     return items.filter(preparedItem => {
       const { isGroup, item } = preparedItem;
       if (isGroup) {
@@ -362,7 +368,7 @@ class UDExSearchableListBase extends UI5Element {
     return arr;
   }
 
-  getItemFromList(itemId:string) {
+  getItemFromList(itemId:string): UDExItemFromList {
     let menuItem = null;
 
     for (let i = 0; i < this.items.length; i++) {
@@ -385,7 +391,7 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   fireSelectionChange(itemId: string) {
-    this.fireEvent("selection-change", {
+    this.fireDecoratorEvent("selection-change", {
       selectedItems: this.selectedItems,
       item: this.getItemFromList(itemId),
     });
@@ -440,7 +446,7 @@ class UDExSearchableListBase extends UI5Element {
     return e.detail.item.getAttribute("data-token-id") as string;
   }
 
-  getProcessedItems(): Array<ProcessedItem> {
+  getProcessedItems(): Array<UDExProcessedItem> {
     return this.items.map(item => {
       if (item.isGroup) {
         const groupItems = (item as UDExListGroupHeaderBase).getItems();
@@ -457,7 +463,7 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   get getNoResultText(): string {
-    const hasTextProperty = this.noResultText !== "undefined" && this.noResultText.length > 0;
+    const hasTextProperty = this.noResultText !== undefined && this.noResultText.length > 0;
     return hasTextProperty ? this.noResultText : UDExSearchableListBase.i18nBundle.getText(NO_MATCHES_FOUND);
   }
 
@@ -470,20 +476,20 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   get modeMultiSelect(): boolean {
-    return this.mode === ListMode.MultiSelect;
+    return this.mode === UDExListMode.MultiSelect;
   }
 
   get modeSingleSelect(): boolean {
-    return this.mode === ListMode.SingleSelect;
+    return this.mode === UDExListMode.SingleSelect;
   }
 
   get modeRadioGroup(): boolean {
-    return this.mode === ListMode.RadioGroup;
+    return this.mode === UDExListMode.RadioGroup;
   }
 
   get isControlled(): boolean {
     const isGrouping = this.items.some(({ isGroup }) => isGroup);
-    return this.mode === ListMode.MultiSelect && isGrouping;
+    return this.mode === UDExListMode.MultiSelect && isGrouping;
   }
 
   get additionalClassName(): string {
@@ -508,8 +514,16 @@ class UDExSearchableListBase extends UI5Element {
     return this._filteredItems.some(element => element.isGroup) ? "group" : this.defaultAccessibleRole;
   }
 
-  static async onDefine(): Promise<void> {
-    UDExSearchableListBase.i18nBundle = await getI18nBundle("@sapudex/web-components");
+  get listItemRole(): string {
+    if (this.accessibleRoleForList === "list") {
+      return "listitem";
+    }
+
+    if (this.accessibleRoleForList === "listbox") {
+      return "option";
+    }
+
+    return "none";
   }
 }
 

package/src/SecondaryNavigation.hbs

@@ -5,12 +5,12 @@
         </div>
     {{/if}}
     <div class="udex-secondary-navigation__holder">
-        {{#if title.length}}
+        {{#if heading.length}}
             <div class="udex-secondary-navigation__heading">
-                {{#if titleHref.length}}
-                    <a class="udex-secondary-navigation__title" href="{{titleHref}}">{{title}}</a>
+                {{#if headingHref.length}}
+                    <a class="udex-secondary-navigation__title" href="{{headingHref}}">{{heading}}</a>
                 {{else}}
-                    <span class="udex-secondary-navigation__title">{{title}}</span>
+                    <span class="udex-secondary-navigation__title">{{heading}}</span>
                 {{/if}}
             </div>
         {{/if}}
@@ -63,7 +63,7 @@
         class="udex-secondary-navigation__mobile-nav"
         role="button"
         aria-label="{{mobileMenuOpenerAriaLabel}}"
-        label="{{title}}"
+        label="{{heading}}"
         mobile-link-title="{{title}}"
         @ui5-sub-item-click="{{handleSubItemClick}}"
         .subItems="{{this.parsedItems}}">

package/src/SecondaryNavigation.ts

@@ -1,19 +1,22 @@
-import UI5Element, { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import {
   isEscape, isLeft, isRight, isDown,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type { UDExSecondaryNavigationItemClickEventDetail, UDExSecondaryNavigationItemSubItemClickEventDetail } from "./SecondaryNavigationItem.js";
 import UDExSecondaryNavigationItem from "./SecondaryNavigationItem.js";
-import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
-import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
+import type UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
+import type { NavItem } from "./SecondaryNavigationItemBase.js";
+import type UDExSecondaryNavigationItemBase from "./SecondaryNavigationItemBase.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { MORE } from "./generated/i18n/i18n-defaults.js";
 import SecondaryNavigationTemplate from "./generated/templates/SecondaryNavigationTemplate.lit.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
@@ -23,7 +26,7 @@ import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.j
 const canvasContentFont: string = "16px / 17.6px '72 Brand Variable'";
 const rootClass = "udex-secondary-navigation__root";
 
-export type ItemClickDetail = {
+type UDExSecondaryNavigationClickEventDetail = {
   originalEvent: Event,
   clickedItem: NavItem;
   clickedIndex: number;
@@ -60,21 +63,12 @@ export type ItemClickDetail = {
  * @allowPreventDefault
  * @public
  */
-@event<ItemClickDetail>("item-click", {
-  detail: {
-    originalEvent: {
-      type: Event,
-    },
-    clickedItem: {
-      type: Object,
-    },
-    clickedIndex: {
-      type: Integer,
-    },
-  },
-})
+@event("item-click", { cancelable: true, bubbles: true })
 
 class UDExSecondaryNavigation extends UI5Element {
+  eventDetails!: {
+    "item-click": UDExSecondaryNavigationClickEventDetail,
+  };
   /**
    * Defines an aria label for the mobile menu opener
    *
@@ -89,8 +83,8 @@ class UDExSecondaryNavigation extends UI5Element {
    * @default "[]"
    * @public
    */
-  @property({ type: String, defaultValue: "[]" })
-    navItems!: string;
+  @property({ type: String })
+    navItems: string = "[]";
 
   /**
    * Slot for breadcrumbs.
@@ -111,22 +105,22 @@ class UDExSecondaryNavigation extends UI5Element {
     buttons!: Array<HTMLElement>;
 
   /**
-   * Defines the title of the component.
+   * Defines the heading of the component.
    *
    * @default ""
    * @public
    */
   @property()
-    title!: string;
+    heading: string = "";
 
   /**
-   * Defines the href of the title.
+   * Defines the href of the heading.
    *
    * @default ""
    * @public
    */
   @property()
-    titleHref!: string;
+    headingHref: string = "";
   /**
    * Defines the height of the dropdown opened on mobile screen.
    *
@@ -138,11 +132,11 @@ class UDExSecondaryNavigation extends UI5Element {
   @property({ type: Boolean, noAttribute: true })
     _selectedMore!: boolean;
 
-  @property({ type: Object, multiple: true, noAttribute: true })
-    _overflowItems!: Array<NavItem>;
+  @property({ type: Object, noAttribute: true })
+    _overflowItems: Array<NavItem> = [];
 
-  @property({ type: Object, multiple: true, noAttribute: true })
-    _visibleItems!: Array<NavItem>;
+  @property({ type: Object, noAttribute: true })
+    _visibleItems: Array<NavItem> = [];
 
   @property({ type: Boolean, noAttribute: true })
     _requestRender = false;
@@ -156,11 +150,8 @@ class UDExSecondaryNavigation extends UI5Element {
   _clickedNavItem!: UDExSecondaryNavigationItem;
   _boundReflowItems: () => void;
 
-  static i18nBundle: any;
-
-  static async onDefine(): Promise<void> {
-    UDExSecondaryNavigation.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
 
   constructor() {
     super();
@@ -203,7 +194,7 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   reflowItems(): void {
-    const availableWidth = this.rootHolder.offsetWidth - (this.heading?.offsetWidth || 0) - (this.optionalButtons?.offsetWidth || 0);
+    const availableWidth = this.rootHolder.offsetWidth - (this.headingHolder?.offsetWidth || 0) - (this.optionalButtons?.offsetWidth || 0);
     const moreButtonWidth = this.getMoreButtonWidth();
     const itemsGap = 20;
     const widths = this.parsedItems.map(item => this.getItemWidth(item));
@@ -292,14 +283,14 @@ class UDExSecondaryNavigation extends UI5Element {
     return this.domNavItems.indexOf(item);
   }
 
-  handleItemClick(e: CustomEvent): void {
-    const { index, item: detailItem, originalEvent: actualOriginalEvent } = e.detail;
-    const clickedItem = detailItem as UDExSecondaryNavigationItem;
+  handleItemClick(e: CustomEvent<UDExSecondaryNavigationItemClickEventDetail>): void {
+    const { index, item, originalEvent: actualOriginalEvent } = e.detail;
+    const clickedItem = item as UDExSecondaryNavigationItem;
     const {
       path, target, title, active, subItems, _id, mobileLinkTitle,
     } = clickedItem;
 
-    const prevented = !this.fireEventItemClick(actualOriginalEvent as Event, index as number, {
+    const prevented = !this.fireEventItemClick(actualOriginalEvent, index, {
       path,
       target,
       title,
@@ -321,11 +312,11 @@ class UDExSecondaryNavigation extends UI5Element {
     }
   }
 
-  handleSubItemClick(e: CustomEvent): void {
+  handleSubItemClick(e: CustomEvent<UDExSecondaryNavigationItemSubItemClickEventDetail>): void {
     const { originalEvent: actualOriginalEvent, index } = e.detail;
     const item = e.detail.item as UDExSecondaryNavigationSubItem;
     const { items } = item as NavItem;
-    const prevented = !this.fireEventItemClick(actualOriginalEvent as Event, index as number, item);
+    const prevented = !this.fireEventItemClick(actualOriginalEvent, index, item);
 
     if (prevented) {
       e.preventDefault();
@@ -343,13 +334,13 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   fireEventItemClick(
-    e: Event,
+    e: PointerEvent | KeyboardEvent,
     clickedIndex: number,
     {
       items, target, path, title, active, mobileLinkTitle,
     }: NavItem,
   ): boolean {
-    return this.fireEvent("item-click", {
+    return this.fireDecoratorEvent("item-click", {
       originalEvent: e,
       clickedItem: {
         mobileLinkTitle: mobileLinkTitle || "",
@@ -360,7 +351,7 @@ class UDExSecondaryNavigation extends UI5Element {
         title,
       },
       clickedIndex,
-    }, true);
+    });
   }
 
   setActiveItem(navItems: Array<NavItem>, clickedItem: UDExSecondaryNavigationItemBase): void {
@@ -386,7 +377,7 @@ class UDExSecondaryNavigation extends UI5Element {
     document.addEventListener("mousedown", this.outsideClickListener);
   }
 
-  outsideClickListener = (e: Event): void => {
+  outsideClickListener = (e: MouseEvent): void => {
     if (this.isMobileScreen && e.target !== this) {
       this.closeMobileDropdown();
       return;
@@ -401,7 +392,7 @@ class UDExSecondaryNavigation extends UI5Element {
     this.mobileNav?.closeDropdown();
   }
 
-  handleDesktopDropdown(e: Event): void {
+  handleDesktopDropdown(e: MouseEvent): void {
     const isClickedNavItem = e.composedPath().includes(this._clickedNavItem);
     if (!isClickedNavItem && this._clickedNavItem) {
       this._clickedNavItem.closeDropdown();
@@ -429,7 +420,7 @@ class UDExSecondaryNavigation extends UI5Element {
     return (this.shadowRoot ? this.shadowRoot.querySelector<HTMLElement>(".udex-secondary-navigation__root") : undefined)!;
   }
 
-  get heading(): HTMLElement {
+  get headingHolder(): HTMLElement {
     return (this.shadowRoot ? this.shadowRoot.querySelector<HTMLElement>(".udex-secondary-navigation__heading") : undefined)!;
   }
 
@@ -442,7 +433,7 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   get moreButtonText(): string {
-    return UDExSecondaryNavigation.i18nBundle.getText(MORE) as string;
+    return UDExSecondaryNavigation.i18nBundle.getText(MORE);
   }
 
   get parsedItems(): Array<NavItem> {

package/src/SecondaryNavigationItem.hbs

@@ -32,7 +32,8 @@
             {{#if hasNestedItems}}
                 <ui5-icon
                     class="udex-secondary-navigation__item-icon"
-                    name="slim-arrow-down">
+                    name="slim-arrow-down"
+                    mode="Decorative">
                 </ui5-icon>
             {{/if}}
         </span>
@@ -47,7 +48,7 @@
                     <li role="none">
                         <udex-secondary-navigation-sub-item
                             index="{{@index}}"
-                            @ui5-sub-item-click="{{../onSubItemClick}}"
+                            @ui5-sub-item-click="{{../handleSubItemClick}}"
                             @ui5-back-item-click="{{../onBackClick}}"
                             is-back="{{this.isBack}}"
                             label="{{this.title}}"