@sapudex/web-components 0.225.0 → 2.0.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,21 @@
-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 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 +25,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 UDExSecondaryNavigationItemClickEventDetail = {
   originalEvent: Event,
   clickedItem: NavItem;
   clickedIndex: number;
@@ -60,21 +62,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": UDExSecondaryNavigationItemClickEventDetail,
+  };
   /**
    * Defines an aria label for the mobile menu opener
    *
@@ -89,8 +82,8 @@ class UDExSecondaryNavigation extends UI5Element {
    * @default "[]"
    * @public
    */
-  @property({ type: String, defaultValue: "[]" })
-    navItems!: string;
+  @property({ type: String })
+    navItems: string = "[]";
 
   /**
    * Slot for breadcrumbs.
@@ -111,22 +104,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 +131,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 +149,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 +193,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));
@@ -346,7 +336,7 @@ class UDExSecondaryNavigation extends UI5Element {
       items, target, path, title, active, mobileLinkTitle,
     }: NavItem,
   ): boolean {
-    return this.fireEvent("item-click", {
+    return this.fireDecoratorEvent("item-click", {
       originalEvent: e,
       clickedItem: {
         mobileLinkTitle: mobileLinkTitle || "",
@@ -357,7 +347,7 @@ class UDExSecondaryNavigation extends UI5Element {
         title,
       },
       clickedIndex: e.detail.index,
-    }, true);
+    });
   }
 
   setActiveItem(navItems: Array<NavItem>, clickedItem: UDExSecondaryNavigationItemBase): void {
@@ -383,7 +373,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;
@@ -398,7 +388,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();
@@ -426,7 +416,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)!;
   }
 
@@ -439,7 +429,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>

package/src/SecondaryNavigationItem.ts

@@ -1,10 +1,9 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import {
   isLeft,
   isRight,
@@ -17,9 +16,11 @@ import {
   isEnd, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
-import parseRelativeUnits, { RelativeValue } from "./utils/parseRelativeUnits.js";
+import type { RelativeValue } from "./utils/parseRelativeUnits.js";
+import parseRelativeUnits from "./utils/parseRelativeUnits.js";
 import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
-import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
+import type { NavItem } from "./SecondaryNavigationItemBase.js";
+import UDExSecondaryNavigationItemBase from "./SecondaryNavigationItemBase.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 
 import SecondaryNavigationItemTemplate from "./generated/templates/SecondaryNavigationItemTemplate.lit.js";
@@ -29,6 +30,16 @@ import SecondaryNavigationItemCss from "./generated/themes/SecondaryNavigationIt
 
 export const menuItemRole: string = "menuitem";
 
+type UDExSecondaryNavigationItemClickEventDetail = {
+  item: HTMLElement,
+  index: number,
+};
+
+type UDExSecondaryNavigationItemSubItemClickEventDetail = {
+  item: object,
+  index: number,
+}
+
 /**
  * @class
  *
@@ -61,12 +72,7 @@ export const menuItemRole: string = "menuitem";
  * @allowPreventDefault
  * @public
  */
-@event("nav-item-click", {
-  detail: {
-    item: { type: HTMLElement },
-    index: { type: Integer },
-  },
-})
+@event("nav-item-click", { bubbles: true })
 
 /**
  * Fires when dropdown item is clicked
@@ -74,14 +80,13 @@ export const menuItemRole: string = "menuitem";
  * @allowPreventDefault
  * @public
  */
-@event("sub-item-click", {
-  detail: {
-    item: { type: Object },
-    index: { type: Integer },
-  },
-})
+@event("sub-item-click", { bubbles: true })
 
 class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
+  eventDetails!: {
+    "nav-item-click": UDExSecondaryNavigationItemClickEventDetail,
+    "sub-item-click": UDExSecondaryNavigationItemSubItemClickEventDetail,
+  };
   /**
    * Defines an aria label for item
    *
@@ -113,8 +118,8 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
    * @default "[]"
    * @public
    */
-  @property({ type: Object, multiple: true })
-    subItems!: Array<NavItem>;
+  @property({ type: Object })
+    subItems: Array<NavItem> = [];
 
   /**
    * Defines if dropdown is opened.
@@ -130,7 +135,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
    *
    * @private
    */
-  @property({ validator: Integer })
+  @property({ type: Number })
     _navItemsLength!: number;
 
   /**
@@ -183,7 +188,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
       this.onShouldFocusFirstSubItem();
     }
 
-    this.fireEvent("sub-item-click", {
+    this.fireDecoratorEvent("sub-item-click", {
       item: clickedItem,
       index,
     });
@@ -208,8 +213,8 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   }
 
   handleItemLinkKeyDown(e: KeyboardEvent): void {
-    if (isEnter(e) || isSpace(e)) {
-      this.openDropdown();
+    if (isSpace(e)) {
+      this.fireNavItemClickEvent();
     }
   }
 
@@ -327,7 +332,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   }
 
   fireNavItemClickEvent(): void {
-    this.fireEvent("nav-item-click", {
+    this.fireDecoratorEvent("nav-item-click", {
       item: this,
       index: this.index,
     });

package/src/SecondaryNavigationItemBase.ts

@@ -3,15 +3,15 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { Target } from "./types/common.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 
 export type NavItem = {
   path?: string;
   mobileLinkTitle: string;
-  target?: Target;
+  target?: UDExTarget;
   title: string;
   active?: boolean;
   isBack?: boolean;
@@ -64,8 +64,8 @@ class UDExSecondaryNavigationItemBase extends UI5Element {
    *
    * @public
    */
-  @property({ type: Target, defaultValue: Target._self })
-    target!: Target;
+  @property()
+    target: UDExTarget = UDExTarget._self;
 
   /**
    * Defines subTitle for the item
@@ -88,7 +88,7 @@ class UDExSecondaryNavigationItemBase extends UI5Element {
    *
    * @public
    */
-  @property({ validator: Integer })
+  @property({ type: Number })
     index!: number;
 
   @property({ type: Boolean })

package/src/SecondaryNavigationSubItem.hbs

@@ -9,7 +9,8 @@
         class="udex-secondary-navigation__dropdown-item">
         <ui5-icon
             class="udex-secondary-navigation__dropdown-icon udex-secondary-navigation__dropdown-icon_back"
-            name="slim-arrow-left">
+            name="slim-arrow-left"
+            mode="Decorative">
         </ui5-icon>
         {{itemLabel}}
     </button>
@@ -29,7 +30,8 @@
             {{#if hasItems}}
                 <ui5-icon
                     class="udex-secondary-navigation__dropdown-icon"
-                    name="slim-arrow-right">
+                    name="slim-arrow-right"
+                    mode="Decorative">
                 </ui5-icon>
             {{/if}}
         </button>