@sapudex/web-components 0.111.0 → 0.117.1

package/dist/SecondaryNavigation.d.ts

@@ -1,23 +1,17 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
-export declare enum Target {
-    _blank = "_blank",
-    _parent = "_parent",
-    _self = "_self",
-    _top = "_top"
-}
-export type NavItem = {
-    path: string;
-    mobileLinkTitle: string;
-    target: Target;
-    title: string;
-    active?: boolean;
-};
+import UI5Element, { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import UDExSecondaryNavigationItem from "./SecondaryNavigationItem.js";
+import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
 export type SecondaryNavigationItemClickDetail = {
     originalEvent: Event;
-    clickedItem: HTMLElement;
+    clickedItem: UDExSecondaryNavigationItem;
     clickedIndex: number;
 };
+export type SecondaryNavigationSubItemClickDetail = {
+    originalEvent: Event;
+    clickedItem: {
+        items: Array<NavItem>;
+    };
+};
 /**
  * @class
  *
@@ -70,59 +64,57 @@ declare class UDExSecondaryNavigation extends UI5Element {
      * @public
      */
     title: string;
-    _dropdownMoreIsOpen: boolean;
+    /**
+     * Defines the href of the title.
+     *
+     * @default ""
+     * @public
+     */
+    titleHref: string;
+    _selectedMore: boolean;
     _overflowItems: Array<NavItem>;
-    _navItems: Array<NavItem>;
+    _visibleItems: Array<NavItem>;
     _requestRender: boolean;
     _mobileBtnExpanded: boolean;
-    _navigationList: Array<NavItem> | undefined;
-    _dropdown: HTMLElement | null | undefined;
+    _navItems: Array<NavItem>;
+    _showMoreButton: boolean;
     _rootHolder: HTMLElement | null | undefined;
+    _clickedNavItem: UDExSecondaryNavigationItem;
     _boundReflowItems: () => void;
     static i18nBundle: any;
     static onDefine(): Promise<void>;
     constructor();
     onEnterDOM(): void;
     onExitDOM(): void;
+    onInvalidation(changeInfo: ChangeInfo): void;
     onAfterRendering(): void;
     refreshRendering(): void;
     reflowItems(): void;
     handleKeyDown(e: KeyboardEvent): void;
-    handleEscapeKey(e: KeyboardEvent): void;
-    handleKeyDownDropdown(e: KeyboardEvent): void;
-    handleLeftArrow(e: KeyboardEvent): void;
-    handleRightArrow(e: KeyboardEvent): void;
-    handleUpArrow(e: KeyboardEvent): void;
-    handleDownArrow(e: KeyboardEvent): void;
-    handleOutsideClick(): void;
-    handleMobileOpen(): void;
-    handleToggleDropdown(): void;
     focusPrevNavItem(e: KeyboardEvent): void;
     focusNextNavItem(e: KeyboardEvent): void;
-    onCloseDropdown(): void;
     getItemWidth(item: NavItem): number;
-    getCurrentIndex(item: HTMLElement): number;
-    getListItemByIndex(index: number): HTMLElement | null;
-    getDropdown(): HTMLElement;
-    getMobileButtonMenu(): HTMLElement;
-    getMoreButton(): HTMLElement;
     getMoreButtonWidth(): number;
+    getCurrentIndex(item: UDExSecondaryNavigationItem): number;
+    handleItemClick(e: CustomEvent): void;
+    handleSubItemClick(e: CustomEvent): void;
+    setActiveItem(navItems: Array<NavItem>, clickedItem: UDExSecondaryNavigationItemBase): void;
+    handleOutsideClick(): void;
+    closePrevDropdown(clickedItemId: string): void;
     parseArrayFromString<T>(string: string): T[];
-    handleNavigationClick(e: MouseEvent): void;
-    get navigationItems(): Array<HTMLElement>;
-    get domNavItems(): Array<HTMLElement>;
+    get domNavItems(): Array<UDExSecondaryNavigationItem>;
     get rootHolder(): HTMLElement;
     get heading(): HTMLElement;
+    get mobileNav(): UDExSecondaryNavigationItem;
     get optionalButtons(): HTMLElement | null | undefined;
-    get linksList(): HTMLElement | null | undefined;
     get moreButtonText(): string;
-    get activeItemText(): string;
-    get moreClass(): string;
-    get navigationList(): Array<NavItem>;
-    get items(): Array<NavItem>;
-    get moreIsActive(): boolean;
-    get rootClass(): string;
+    get parsedItems(): Array<NavItem>;
+    get visibleItems(): Array<NavItem>;
     get hasBreadcrumbsSlot(): boolean;
+    get hasDesktopButtonsSlot(): boolean;
+    get hasMobileButtonsSlot(): boolean;
+    get hasButtons(): boolean;
     get isDesktopScreen(): boolean;
+    get isMobileScreen(): boolean;
 }
 export default UDExSecondaryNavigation;

package/dist/SecondaryNavigation.js

@@ -13,25 +13,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 { isLeft, isRight, isEscape, } from "@ui5/webcomponents-base/dist/Keys.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import UDExSecondaryNavigationItem from "./SecondaryNavigationItem.js";
 import { MORE } from "./generated/i18n/i18n-defaults.js";
 import SecondaryNavigationTemplate from "./generated/templates/SecondaryNavigationTemplate.lit.js";
 // Styles
 import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.js";
-const mobileMenuActiveClass = "udex-secondary-navigation__root_open";
-const rootClass = "udex-secondary-navigation__root";
+const canvasContentFont = "16px / 17.6px '72 Brand Variable'";
 const breakpointSizeS = 979;
-export var Target;
-(function (Target) {
-    Target["_blank"] = "_blank";
-    Target["_parent"] = "_parent";
-    Target["_self"] = "_self";
-    Target["_top"] = "_top";
-})(Target || (Target = {}));
 /**
  * @class
  *
@@ -57,181 +48,171 @@ let UDExSecondaryNavigation = UDExSecondaryNavigation_1 = class UDExSecondaryNav
         super();
         this._requestRender = false;
         this._mobileBtnExpanded = false;
+        this._showMoreButton = true;
         this._boundReflowItems = this.reflowItems.bind(this);
     }
     onEnterDOM() {
         if (isDesktop()) {
             this.setAttribute("desktop", "");
         }
-        if (this.isDesktopScreen) {
-            this.reflowItems();
-        }
-        ResizeHandler.register(this.rootHolder, this._boundReflowItems);
+        ResizeHandler.register(this, this._boundReflowItems);
     }
     onExitDOM() {
-        ResizeHandler.deregister(this.rootHolder, this._boundReflowItems);
+        ResizeHandler.deregister(this, this._boundReflowItems);
+    }
+    onInvalidation(changeInfo) {
+        if (changeInfo.name === "navItems") {
+            this.reflowItems();
+        }
     }
     onAfterRendering() {
         this._rootHolder = this.rootHolder;
-        this._dropdown = this.getDropdown();
         this.handleOutsideClick();
     }
     refreshRendering() {
         this._requestRender = !this._requestRender;
     }
     reflowItems() {
-        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 = [];
-        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 = steps.findLastIndex((size) => 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) {
-        e.stopPropagation();
-        this.handleLeftArrow(e);
-        this.handleRightArrow(e);
-        this.handleEscapeKey(e);
-    }
-    handleEscapeKey(e) {
-        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 = steps.findLastIndex((size) => 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) {
+    handleKeyDown(e) {
         e.stopPropagation();
-        this.handleUpArrow(e);
-        this.handleDownArrow(e);
-        this.handleEscapeKey(e);
-    }
-    handleLeftArrow(e) {
         if (isLeft(e)) {
             this.focusPrevNavItem(e);
         }
-    }
-    handleRightArrow(e) {
         if (isRight(e)) {
             this.focusNextNavItem(e);
         }
-    }
-    handleUpArrow(e) {
-        if (isUp(e)) {
-            this.focusPrevNavItem(e);
-        }
-    }
-    handleDownArrow(e) {
-        if (isDown(e)) {
-            this.focusNextNavItem(e);
+        if (isEscape(e)) {
+            e.target.closeDropdown();
         }
     }
-    handleOutsideClick() {
-        document.addEventListener("click", () => {
-            if (this._dropdown) {
-                this.onCloseDropdown();
-            }
-        });
-    }
-    handleMobileOpen() {
-        this._rootHolder?.classList.toggle(mobileMenuActiveClass);
-        this._mobileBtnExpanded = !this._mobileBtnExpanded;
-    }
-    handleToggleDropdown() {
-        this._dropdownMoreIsOpen = !this._dropdownMoreIsOpen;
-    }
     focusPrevNavItem(e) {
-        const el = e.target;
-        const currentItem = el.parentElement;
-        const currentSelectedIndex = this.getCurrentIndex(currentItem);
-        const lastItemIndex = this.navigationItems.length - 1;
+        const item = e.target;
+        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) {
-        const el = e.target;
-        const currentItem = el.parentElement;
-        const currentSelectedIndex = this.getCurrentIndex(currentItem);
-        const nextSelectIndex = currentSelectedIndex + 1 > this.navigationItems.length - 1 ? 0 : currentSelectedIndex + 1;
-        const listItem = this.getListItemByIndex(nextSelectIndex);
-        listItem?.focus();
-    }
-    onCloseDropdown() {
-        this._dropdownMoreIsOpen = false;
+        const item = e.target;
+        const currentSelectedIndex = this.getCurrentIndex(item);
+        const nextSelectIndex = currentSelectedIndex + 1 > this.domNavItems.length - 1 ? 0 : currentSelectedIndex + 1;
+        this.domNavItems[nextSelectIndex].focus();
     }
     getItemWidth(item) {
         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) {
-        return this.navigationItems.indexOf(item);
-    }
-    getListItemByIndex(index) {
-        return this.navigationItems[index].querySelector(".udex-secondary-navigation__link-btn");
-    }
-    getDropdown() {
-        return this.shadowRoot.querySelector(".udex-secondary-navigation__dropdown");
-    }
-    getMobileButtonMenu() {
-        return this.shadowRoot?.querySelector(".udex-secondary-navigation__mobile-opener");
-    }
-    getMoreButton() {
-        return this.shadowRoot.querySelector(".udex-secondary-navigation__list-item_more > button");
-    }
     getMoreButtonWidth() {
         const canvas = document.createElement("canvas");
         const context = canvas.getContext("2d");
-        context.font = "16px / 17.6px '72 Brand Variable'";
-        return Math.ceil(context.measureText("More").width) + 4 + 16;
+        context.font = canvasContentFont;
+        return Math.ceil(context.measureText(this.moreButtonText).width);
     }
-    parseArrayFromString(string) {
-        return string ? JSON.parse(string) : [];
+    getCurrentIndex(item) {
+        return this.domNavItems.indexOf(item);
     }
-    handleNavigationClick(e) {
-        const target = e.target;
-        const clickedIndex = this.domNavItems.indexOf(target);
+    handleItemClick(e) {
+        const clickedItem = e.detail.item;
         const prevented = !this.fireEvent("item-click", {
             originalEvent: e,
-            clickedItem: target,
-            clickedIndex,
+            clickedItem,
+            clickedIndex: this.getCurrentIndex(clickedItem),
         }, true);
         if (prevented) {
             e.preventDefault();
             return;
         }
-        if (this.domNavItems.length > 0) {
-            this.navigationList.forEach(item => delete item.active);
-            this.navigationList[clickedIndex].active = true;
-            this.refreshRendering();
+        this._clickedNavItem = clickedItem;
+        this.closePrevDropdown(clickedItem._id);
+        if (!clickedItem.hasNestedItems) {
+            this.setActiveItem(this.parsedItems, clickedItem);
         }
     }
-    get navigationItems() {
-        return Array.from(this.shadowRoot.querySelectorAll(".udex-secondary-navigation__link-btn-wrap"));
+    handleSubItemClick(e) {
+        const item = e.detail.item;
+        const { items } = item;
+        const prevented = !this.fireEvent("sub-item-click", {
+            originalEvent: e,
+            clickedItem: item,
+        }, true);
+        if (prevented) {
+            e.preventDefault();
+            return;
+        }
+        if (this.isMobileScreen && !items) {
+            this.mobileNav.closeDropdown();
+        }
+        if (!items) {
+            this.setActiveItem(this.parsedItems, item);
+            this._clickedNavItem?.closeDropdown();
+        }
+    }
+    setActiveItem(navItems, clickedItem) {
+        const updateNav = (items, { title, path }) => {
+            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() {
+        document.addEventListener("click", (e) => {
+            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) {
+        this.domNavItems.forEach(item => {
+            if (clickedItemId !== item._id) {
+                item.closeDropdown();
+            }
+        });
+    }
+    parseArrayFromString(string) {
+        return string ? JSON.parse(string) : [];
     }
     get domNavItems() {
-        const navigationItemsSelector = ".udex-secondary-navigation__item:not(.udex-secondary-navigation__link-btn-more), .udex-secondary-navigation__dropdown-item";
-        const domNavItems = this.shadowRoot?.querySelectorAll(navigationItemsSelector);
-        return domNavItems ? Array.from(domNavItems) : [];
+        const items = this.shadowRoot?.querySelectorAll("udex-secondary-navigation-item");
+        return items ? Array.from(items) : [];
     }
     get rootHolder() {
         return (this.shadowRoot ? this.shadowRoot.querySelector(".udex-secondary-navigation__root") : undefined);
@@ -239,45 +220,39 @@ let UDExSecondaryNavigation = UDExSecondaryNavigation_1 = class UDExSecondaryNav
     get heading() {
         return (this.shadowRoot ? this.shadowRoot.querySelector(".udex-secondary-navigation__heading") : undefined);
     }
+    get mobileNav() {
+        return (this.shadowRoot ? this.shadowRoot.querySelector(".udex-secondary-navigation__mobile-nav") : undefined);
+    }
     get optionalButtons() {
         return this.shadowRoot?.querySelector(".udex-secondary-navigation__buttons");
     }
-    get linksList() {
-        return this.shadowRoot?.querySelector(".udex-secondary-navigation__list");
-    }
     get moreButtonText() {
         return UDExSecondaryNavigation_1.i18nBundle.getText(MORE);
     }
-    get activeItemText() {
-        const activeItem = this.navigationList.find(item => item.active);
-        return activeItem ? activeItem?.title : "";
+    get parsedItems() {
+        return this.parseArrayFromString(this.navItems);
     }
-    get moreClass() {
-        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 navigationList() {
-        if (!this._navigationList) {
-            this._navigationList = this.parseArrayFromString(this.navItems);
-        }
-        return this._navigationList;
+    get visibleItems() {
+        return this.isDesktopScreen ? this._visibleItems : this.parsedItems;
     }
-    get items() {
-        return this.isDesktopScreen ? this._navItems : this.navigationList;
+    get hasBreadcrumbsSlot() {
+        return !!this.getSlottedNodes("breadcrumbs").length && this.isDesktopScreen;
     }
-    get moreIsActive() {
-        return this._overflowItems.some(item => item.active);
+    get hasDesktopButtonsSlot() {
+        return this.hasButtons && this.isDesktopScreen;
     }
-    get rootClass() {
-        const centeredClass = this.hasBreadcrumbsSlot ? "" : `${rootClass}_centered`;
-        return `${rootClass} ${centeredClass}`;
+    get hasMobileButtonsSlot() {
+        return this.hasButtons && this.isMobileScreen;
     }
-    get hasBreadcrumbsSlot() {
-        return !!this.getSlottedNodes("breadcrumbs").length;
+    get hasButtons() {
+        return !!this.getSlottedNodes("buttons").length;
     }
     get isDesktopScreen() {
         return window.innerWidth > breakpointSizeS;
     }
+    get isMobileScreen() {
+        return window.innerWidth <= breakpointSizeS;
+    }
 };
 __decorate([
     property({ type: String })
@@ -294,15 +269,18 @@ __decorate([
 __decorate([
     property()
 ], UDExSecondaryNavigation.prototype, "title", void 0);
+__decorate([
+    property()
+], UDExSecondaryNavigation.prototype, "titleHref", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
-], UDExSecondaryNavigation.prototype, "_dropdownMoreIsOpen", void 0);
+], UDExSecondaryNavigation.prototype, "_selectedMore", void 0);
 __decorate([
-    property({ type: HTMLElement, defaultValue: [], noAttribute: true })
+    property({ type: Object, multiple: true, noAttribute: true })
 ], UDExSecondaryNavigation.prototype, "_overflowItems", void 0);
 __decorate([
-    property({ type: HTMLElement, defaultValue: [], noAttribute: true })
-], UDExSecondaryNavigation.prototype, "_navItems", void 0);
+    property({ type: Object, multiple: true, noAttribute: true })
+], UDExSecondaryNavigation.prototype, "_visibleItems", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], UDExSecondaryNavigation.prototype, "_requestRender", void 0);
@@ -315,7 +293,7 @@ UDExSecondaryNavigation = UDExSecondaryNavigation_1 = __decorate([
         renderer: litRender,
         styles: SecondaryNavigationCss,
         template: SecondaryNavigationTemplate,
-        dependencies: [UI5Icon],
+        dependencies: [UDExSecondaryNavigationItem],
     })
     /**
      * Fires when item is clicked
@@ -337,6 +315,23 @@ UDExSecondaryNavigation = UDExSecondaryNavigation_1 = __decorate([
             },
         },
     })
+    /**
+     * Fires when sub item is clicked
+     *
+     * @allowPreventDefault
+     * @public
+     */
+    ,
+    event("sub-item-click", {
+        detail: {
+            originalEvent: {
+                type: Event,
+            },
+            clickedItem: {
+                type: HTMLElement,
+            },
+        },
+    })
 ], UDExSecondaryNavigation);
 UDExSecondaryNavigation.define();
 export default UDExSecondaryNavigation;