@sapudex/web-components 0.111.0 → 0.117.1

package/src/SecondaryNavigation.ts

@@ -1,4 +1,4 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import UI5Element, { ChangeInfo } 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";
@@ -6,17 +6,16 @@ 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 UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import {
   isLeft,
   isRight,
-  isUp,
-  isDown,
   isEscape,
 } 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 { MORE } from "./generated/i18n/i18n-defaults.js";
 
 import SecondaryNavigationTemplate from "./generated/templates/SecondaryNavigationTemplate.lit.js";
@@ -24,29 +23,20 @@ import SecondaryNavigationTemplate from "./generated/templates/SecondaryNavigati
 // Styles
 import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.js";
 
-const mobileMenuActiveClass = "udex-secondary-navigation__root_open";
-const rootClass = "udex-secondary-navigation__root";
+const canvasContentFont: string = "16px / 17.6px '72 Brand Variable'";
 const breakpointSizeS: number = 979;
 
-export enum Target {
-  _blank = "_blank",
-  _parent = "_parent",
-  _self = "_self",
-  _top = "_top",
-}
-
-export type NavItem = {
-  path: string;
-  mobileLinkTitle: string;
-  target: Target;
-  title: string;
-  active?: boolean;
-}
-
 export type SecondaryNavigationItemClickDetail = {
   originalEvent: Event,
-  clickedItem: HTMLElement;
+  clickedItem: UDExSecondaryNavigationItem;
   clickedIndex: number;
+};
+
+export type SecondaryNavigationSubItemClickDetail = {
+  originalEvent: Event,
+  clickedItem: {
+    items: Array<NavItem>
+  };
 }
 
 /**
@@ -71,7 +61,7 @@ export type SecondaryNavigationItemClickDetail = {
   renderer: litRender,
   styles: SecondaryNavigationCss,
   template: SecondaryNavigationTemplate,
-  dependencies: [UI5Icon],
+  dependencies: [UDExSecondaryNavigationItem],
 })
 
 /**
@@ -94,6 +84,23 @@ export type SecondaryNavigationItemClickDetail = {
   },
 })
 
+/**
+ * Fires when sub item is clicked
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event<SecondaryNavigationSubItemClickDetail>("sub-item-click", {
+  detail: {
+    originalEvent: {
+      type: Event,
+    },
+    clickedItem: {
+      type: HTMLElement,
+    },
+  },
+})
+
 class UDExSecondaryNavigation extends UI5Element {
   /**
    * Defines an aria label for the mobile menu opener
@@ -139,14 +146,23 @@ class UDExSecondaryNavigation extends UI5Element {
   @property()
     title!: string;
 
+  /**
+   * Defines the href of the title.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    titleHref!: string;
+
   @property({ type: Boolean, noAttribute: true })
-    _dropdownMoreIsOpen!: boolean;
+    _selectedMore!: boolean;
 
-  @property({ type: HTMLElement, defaultValue: [], noAttribute: true })
+  @property({ type: Object, multiple: true, noAttribute: true })
     _overflowItems!: Array<NavItem>;
 
-  @property({ type: HTMLElement, defaultValue: [], noAttribute: true })
-    _navItems!: Array<NavItem>;
+  @property({ type: Object, multiple: true, noAttribute: true })
+    _visibleItems!: Array<NavItem>;
 
   @property({ type: Boolean, noAttribute: true })
     _requestRender = false;
@@ -154,9 +170,10 @@ class UDExSecondaryNavigation extends UI5Element {
   @property({ type: Boolean, noAttribute: true })
     _mobileBtnExpanded = false;
 
-  _navigationList: Array<NavItem> | undefined;
-  _dropdown!: HTMLElement | null | undefined;
+  _navItems!: Array<NavItem>;
+  _showMoreButton: boolean;
   _rootHolder!: HTMLElement | null | undefined;
+  _clickedNavItem!: UDExSecondaryNavigationItem;
   _boundReflowItems: () => void;
 
   static i18nBundle: any;
@@ -167,6 +184,7 @@ class UDExSecondaryNavigation extends UI5Element {
 
   constructor() {
     super();
+    this._showMoreButton = true;
     this._boundReflowItems = this.reflowItems.bind(this);
   }
 
@@ -175,21 +193,21 @@ class UDExSecondaryNavigation extends UI5Element {
       this.setAttribute("desktop", "");
     }
 
-    if (this.isDesktopScreen) {
-      this.reflowItems();
-    }
-
-    ResizeHandler.register(this.rootHolder, this._boundReflowItems);
+    ResizeHandler.register(this, this._boundReflowItems);
   }
 
   onExitDOM(): void {
-    ResizeHandler.deregister(this.rootHolder, this._boundReflowItems);
+    ResizeHandler.deregister(this, this._boundReflowItems);
+  }
+
+  onInvalidation(changeInfo: ChangeInfo): void {
+    if (changeInfo.name === "navItems") {
+      this.reflowItems();
+    }
   }
 
   onAfterRendering(): void {
     this._rootHolder = this.rootHolder;
-    this._dropdown = this.getDropdown();
-
     this.handleOutsideClick();
   }
 
@@ -198,167 +216,108 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   reflowItems(): void {
-    const availableWidth = this.rootHolder.offsetWidth - this.heading.offsetWidth - (this.optionalButtons?.offsetWidth || 0);
+    const availableWidth = this.rootHolder.offsetWidth - this.heading?.offsetWidth - (this.optionalButtons?.offsetWidth || 0);
     const moreButtonWidth = this.getMoreButtonWidth();
     const itemsGap = 20;
-
-    const widths = this.navigationList.map(item => this.getItemWidth(item));
-
+    const widths = this.parsedItems.map(item => this.getItemWidth(item));
     const steps: Array<number> = [];
-    widths.forEach((itemWidth, index) => {
+
+    widths?.forEach((itemWidth, index) => {
       steps.push((steps.at(-1) || 0) + itemWidth + (index && itemsGap));
     });
 
     if ((steps.at(-1) || 0) <= availableWidth) {
-      this._navItems.splice(0, Infinity, ...this.navigationList);
+      this._visibleItems.splice(0, Infinity, ...this.parsedItems);
+      this._showMoreButton = false;
       this.refreshRendering();
       return;
     }
 
-    // @ts-ignore
-    const lastVisibleIndex: number = steps.findLastIndex((size: number) => size < (availableWidth - moreButtonWidth - 20));
-    this._navItems.splice(0, Infinity, ...this.navigationList.slice(0, lastVisibleIndex + 1));
-    this._overflowItems.splice(0, Infinity, ...this.navigationList.slice(lastVisibleIndex + 1));
-    this.refreshRendering();
-  }
-
-  handleKeyDown(e: KeyboardEvent) {
-    e.stopPropagation();
-    this.handleLeftArrow(e);
-    this.handleRightArrow(e);
-    this.handleEscapeKey(e);
-  }
-
-  handleEscapeKey(e: KeyboardEvent) {
-    if (isEscape(e)) {
-      if (!this.isDesktopScreen) {
-        this._rootHolder?.classList.remove(mobileMenuActiveClass);
-        this.getMobileButtonMenu().focus();
-      } else {
-        this.onCloseDropdown();
-        this.getMoreButton().focus();
-      }
+    if (this.parsedItems) {
+      // @ts-ignore
+      const lastVisibleIndex: number = steps.findLastIndex((size: number) => size < (availableWidth - moreButtonWidth - itemsGap));
+      this._visibleItems.splice(0, Infinity, ...this.parsedItems.slice(0, lastVisibleIndex + 1));
+      this._overflowItems.splice(0, Infinity, ...this.parsedItems.slice(lastVisibleIndex + 1));
+      this._showMoreButton = true;
+      this.refreshRendering();
     }
   }
 
-  handleKeyDownDropdown(e: KeyboardEvent) {
+  handleKeyDown(e: KeyboardEvent): void {
     e.stopPropagation();
-    this.handleUpArrow(e);
-    this.handleDownArrow(e);
-    this.handleEscapeKey(e);
-  }
-
-  handleLeftArrow(e: KeyboardEvent): void {
     if (isLeft(e)) {
       this.focusPrevNavItem(e);
     }
-  }
-
-  handleRightArrow(e: KeyboardEvent): void {
     if (isRight(e)) {
       this.focusNextNavItem(e);
     }
-  }
-
-  handleUpArrow(e: KeyboardEvent): void {
-    if (isUp(e)) {
-      this.focusPrevNavItem(e);
-    }
-  }
-
-  handleDownArrow(e: KeyboardEvent): void {
-    if (isDown(e)) {
-      this.focusNextNavItem(e);
+    if (isEscape(e)) {
+      (e.target as UDExSecondaryNavigationItem).closeDropdown();
     }
   }
 
-  handleOutsideClick(): void {
-    document.addEventListener("click", () => {
-      if (this._dropdown) {
-        this.onCloseDropdown();
-      }
-    });
-  }
-
-  handleMobileOpen(): void {
-    this._rootHolder?.classList.toggle(mobileMenuActiveClass);
-    this._mobileBtnExpanded = !this._mobileBtnExpanded;
-  }
-
-  handleToggleDropdown(): void {
-    this._dropdownMoreIsOpen = !this._dropdownMoreIsOpen;
-  }
-
   focusPrevNavItem(e: KeyboardEvent): void {
-    const el = e.target as HTMLElement;
-    const currentItem = el.parentElement as HTMLElement;
-    const currentSelectedIndex = this.getCurrentIndex(currentItem);
-    const lastItemIndex = this.navigationItems.length - 1;
+    const item = e.target as UDExSecondaryNavigationItem;
+    const currentSelectedIndex = this.getCurrentIndex(item);
+    const lastItemIndex = this.domNavItems.length - 1;
     const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
-    const listItem = this.getListItemByIndex(previousSelectIndex);
-    listItem?.focus();
+    this.domNavItems[previousSelectIndex]?.focus();
   }
 
   focusNextNavItem(e: KeyboardEvent): void {
-    const el = e.target as HTMLElement;
-    const currentItem = el.parentElement as HTMLElement;
-    const currentSelectedIndex = this.getCurrentIndex(currentItem);
-    const nextSelectIndex = currentSelectedIndex + 1 > this.navigationItems.length - 1 ? 0 : currentSelectedIndex + 1;
-    const listItem = this.getListItemByIndex(nextSelectIndex);
-    listItem?.focus();
-  }
-
-  onCloseDropdown(): void {
-    this._dropdownMoreIsOpen = false;
+    const item = e.target as UDExSecondaryNavigationItem;
+    const currentSelectedIndex = this.getCurrentIndex(item);
+    const nextSelectIndex = currentSelectedIndex + 1 > this.domNavItems.length - 1 ? 0 : currentSelectedIndex + 1;
+    this.domNavItems[nextSelectIndex].focus();
   }
 
   getItemWidth(item: NavItem): number {
     const canvas = document.createElement("canvas");
     const context = canvas.getContext("2d")!;
-    context.font = "16px / 17.6px '72 Brand Variable'";
+    context.font = canvasContentFont;
 
     return Math.ceil(context.measureText(item.title).width);
   }
 
-  getCurrentIndex(item: HTMLElement): number {
-    return this.navigationItems.indexOf(item);
-  }
-
-  getListItemByIndex(index: number): HTMLElement | null {
-    return this.navigationItems[index].querySelector(".udex-secondary-navigation__link-btn");
-  }
+  getMoreButtonWidth(): number {
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d")!;
+    context.font = canvasContentFont;
 
-  getDropdown(): HTMLElement {
-    return this.shadowRoot!.querySelector(".udex-secondary-navigation__dropdown")!;
+    return Math.ceil(context.measureText(this.moreButtonText).width);
   }
 
-  getMobileButtonMenu(): HTMLElement {
-    return this.shadowRoot?.querySelector(".udex-secondary-navigation__mobile-opener") as HTMLElement;
+  getCurrentIndex(item: UDExSecondaryNavigationItem): number {
+    return this.domNavItems.indexOf(item);
   }
 
-  getMoreButton(): HTMLElement {
-    return this.shadowRoot!.querySelector(".udex-secondary-navigation__list-item_more > button")!;
-  }
+  handleItemClick(e: CustomEvent): void {
+    const clickedItem = e.detail.item as UDExSecondaryNavigationItem;
+    const prevented = !this.fireEvent("item-click", {
+      originalEvent: e,
+      clickedItem,
+      clickedIndex: this.getCurrentIndex(clickedItem),
+    }, true);
 
-  getMoreButtonWidth(): number {
-    const canvas = document.createElement("canvas");
-    const context = canvas.getContext("2d")!;
-    context.font = "16px / 17.6px '72 Brand Variable'";
+    if (prevented) {
+      e.preventDefault();
+      return;
+    }
 
-    return Math.ceil(context.measureText("More").width) + 4 + 16;
-  }
+    this._clickedNavItem = clickedItem;
+    this.closePrevDropdown(clickedItem._id);
 
-  parseArrayFromString<T>(string: string): T[] {
-    return string ? JSON.parse(string) as T[] : [];
+    if (!clickedItem.hasNestedItems) {
+      this.setActiveItem(this.parsedItems, clickedItem);
+    }
   }
 
-  handleNavigationClick(e: MouseEvent) {
-    const target = e.target as HTMLElement;
-    const clickedIndex = this.domNavItems.indexOf(target);
-    const prevented = !this.fireEvent("item-click", {
+  handleSubItemClick(e: CustomEvent): void {
+    const item = e.detail.item as UDExSecondaryNavigationSubItem;
+    const { items } = item as NavItem;
+    const prevented = !this.fireEvent("sub-item-click", {
       originalEvent: e,
-      clickedItem: target,
-      clickedIndex,
+      clickedItem: item,
     }, true);
 
     if (prevented) {
@@ -366,21 +325,64 @@ class UDExSecondaryNavigation extends UI5Element {
       return;
     }
 
-    if (this.domNavItems.length > 0) {
-      this.navigationList.forEach(item => delete item.active);
-      this.navigationList[clickedIndex].active = true;
-      this.refreshRendering();
+    if (this.isMobileScreen && !items) {
+      this.mobileNav.closeDropdown();
+    }
+
+    if (!items) {
+      this.setActiveItem(this.parsedItems, item);
+      this._clickedNavItem?.closeDropdown();
     }
   }
 
-  get navigationItems(): Array<HTMLElement> {
-    return Array.from(this.shadowRoot!.querySelectorAll(".udex-secondary-navigation__link-btn-wrap"));
+  setActiveItem(navItems: Array<NavItem>, clickedItem: UDExSecondaryNavigationItemBase): void {
+    const updateNav = (items: Array<NavItem>, { title, path }: UDExSecondaryNavigationItemBase) => {
+      items.forEach(item => {
+        if (item.title === title && item.path === path) {
+          item.active = true;
+          return;
+        }
+        delete item.active;
+
+        if (item.items) {
+          updateNav(item.items, clickedItem);
+        }
+      });
+    };
+
+    updateNav(navItems, clickedItem);
+    this.navItems = JSON.stringify(navItems);
+  }
+
+  handleOutsideClick(): void {
+    document.addEventListener("click", (e: MouseEvent) => {
+      if (this.isMobileScreen && e.target !== this) {
+        this.mobileNav?.closeDropdown();
+        return;
+      }
+
+      const isClickedNavItem = e.composedPath().includes(this._clickedNavItem);
+      if (this.isDesktopScreen && !isClickedNavItem && this._clickedNavItem) {
+        this._clickedNavItem.closeDropdown();
+      }
+    });
+  }
+
+  closePrevDropdown(clickedItemId: string): void {
+    this.domNavItems.forEach(item => {
+      if (clickedItemId !== item._id) {
+        item.closeDropdown();
+      }
+    });
+  }
+
+  parseArrayFromString<T>(string: string): T[] {
+    return string ? JSON.parse(string) as T[] : [];
   }
 
-  get domNavItems(): Array<HTMLElement> {
-    const navigationItemsSelector = ".udex-secondary-navigation__item:not(.udex-secondary-navigation__link-btn-more), .udex-secondary-navigation__dropdown-item";
-    const domNavItems = this.shadowRoot?.querySelectorAll<HTMLElement>(navigationItemsSelector);
-    return domNavItems ? Array.from(domNavItems) : [];
+  get domNavItems(): Array<UDExSecondaryNavigationItem> {
+    const items = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationItem>("udex-secondary-navigation-item");
+    return items ? Array.from(items) : [];
   }
 
   get rootHolder(): HTMLElement {
@@ -391,55 +393,49 @@ class UDExSecondaryNavigation extends UI5Element {
     return (this.shadowRoot ? this.shadowRoot.querySelector<HTMLElement>(".udex-secondary-navigation__heading") : undefined)!;
   }
 
-  get optionalButtons() {
-    return this.shadowRoot?.querySelector<HTMLElement>(".udex-secondary-navigation__buttons");
+  get mobileNav(): UDExSecondaryNavigationItem {
+    return (this.shadowRoot ? this.shadowRoot.querySelector<UDExSecondaryNavigationItem>(".udex-secondary-navigation__mobile-nav") : undefined)!;
   }
 
-  get linksList() {
-    return this.shadowRoot?.querySelector<HTMLElement>(".udex-secondary-navigation__list");
+  get optionalButtons(): HTMLElement | null | undefined {
+    return this.shadowRoot?.querySelector<HTMLElement>(".udex-secondary-navigation__buttons");
   }
 
   get moreButtonText(): string {
     return UDExSecondaryNavigation.i18nBundle.getText(MORE) as string;
   }
 
-  get activeItemText(): string {
-    const activeItem = this.navigationList.find(item => item.active);
-    return activeItem ? activeItem?.title : "";
+  get parsedItems(): Array<NavItem> {
+    return this.parseArrayFromString<NavItem>(this.navItems);
   }
 
-  get moreClass(): string {
-    const rootClasses = "udex-secondary-navigation__list-item udex-secondary-navigation__list-item_more";
-    return this._dropdownMoreIsOpen ? `${rootClasses} udex-secondary-navigation__list-item_open` : `${rootClasses}`;
+  get visibleItems(): Array<NavItem> {
+    return this.isDesktopScreen ? this._visibleItems : this.parsedItems;
   }
 
-  get navigationList(): Array<NavItem> {
-    if (!this._navigationList) {
-      this._navigationList = this.parseArrayFromString<NavItem>(this.navItems);
-    }
-    return this._navigationList;
+  get hasBreadcrumbsSlot(): boolean {
+    return !!this.getSlottedNodes("breadcrumbs").length && this.isDesktopScreen;
   }
 
-  get items(): Array<NavItem> {
-    return this.isDesktopScreen ? this._navItems : this.navigationList;
+  get hasDesktopButtonsSlot(): boolean {
+    return this.hasButtons && this.isDesktopScreen;
   }
 
-  get moreIsActive(): boolean {
-    return this._overflowItems.some(item => item.active);
+  get hasMobileButtonsSlot(): boolean {
+    return this.hasButtons && this.isMobileScreen;
   }
 
-  get rootClass(): string {
-    const centeredClass = this.hasBreadcrumbsSlot ? "" : `${rootClass}_centered`;
-    return `${rootClass} ${centeredClass}`;
-  }
-
-  get hasBreadcrumbsSlot(): boolean {
-    return !!this.getSlottedNodes("breadcrumbs").length;
+  get hasButtons(): boolean {
+    return !!this.getSlottedNodes("buttons").length;
   }
 
   get isDesktopScreen(): boolean {
     return window.innerWidth > breakpointSizeS;
   }
+
+  get isMobileScreen(): boolean {
+    return window.innerWidth <= breakpointSizeS;
+  }
 }
 
 UDExSecondaryNavigation.define();

package/src/SecondaryNavigationItem.hbs

@@ -0,0 +1,63 @@
+{{#if isLink}}
+    <a
+        class="udex-secondary-navigation__item"
+        role="{{menuItemRole}}"
+        ?active="{{isActive}}"
+        href="{{path}}"
+        target="{{target}}"
+        @keydown="{{handleItemLinkKeyDown}}"
+        @click="{{onItemClick}}">
+        {{label}}
+    </a>
+{{else}}
+    <button
+        class="udex-secondary-navigation__item"
+        role="{{itemRole}}"
+        ?active="{{isActive}}"
+        aria-haspopup="{{hasNestedItems}}"
+        aria-expanded="{{isOpen}}"
+        aria-label="{{ariaLabel}}"
+        @keydown="{{handleItemButtonKeyDown}}"
+        @click="{{onItemClick}}">
+        <span class="udex-secondary-navigation__item-text-wrap">
+            {{label}}
+            {{#if _subTitle}}
+                <span
+                    class="udex-secondary-navigation__item-sub-title">
+                    {{_subTitle}}
+                </span>
+            {{/if}}
+            {{#if hasNestedItems}}
+                <ui5-icon
+                    class="udex-secondary-navigation__item-icon"
+                    name="slim-arrow-down">
+                </ui5-icon>
+            {{/if}}
+        </span>
+    </button>
+    {{#if isOpen}}
+        <div
+            class="udex-secondary-navigation__dropdown"
+            @keydown="{{handleSubItemKeyDown}}">
+            <ul role="menu"
+                class="udex-secondary-navigation__dropdown-list">
+                {{#each _processedItems}}
+                    <li role="none">
+                        <udex-secondary-navigation-sub-item
+                            index="{{@index}}"
+                            @ui5-sub-item-click="{{../onSubItemClick}}"
+                            @ui5-back-item-click="{{../onBackClick}}"
+                            is-back="{{this.isBack}}"
+                            label="{{this.title}}"
+                            .nestedItems="{{this.items}}"
+                            path="{{this.path}}"
+                            target="{{this.target}}"
+                            ?is-active="{{this.active}}">
+                        </udex-secondary-navigation-sub-item>
+                    </li>
+                {{/each}}
+            </ul>
+            <slot></slot>
+        </div>
+    {{/if}}
+{{/if}}