@sapudex/web-components 0.114.2 → 0.117.1

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
  *
@@ -64,187 +55,164 @@ let UDExSecondaryNavigation = UDExSecondaryNavigation_1 = class UDExSecondaryNav
         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._navigationList = undefined;
             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 - itemsGap));
-        this._navItems.splice(0, Infinity, ...this.navigationList.slice(0, lastVisibleIndex + 1));
-        this._overflowItems.splice(0, Infinity, ...this.navigationList.slice(lastVisibleIndex + 1));
-        this._showMoreButton = true;
-        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.toggleActiveClass();
-        this._mobileBtnExpanded = !this._mobileBtnExpanded;
-    }
-    handleToggleDropdown() {
-        this._dropdownMoreIsOpen = !this._dropdownMoreIsOpen;
-    }
-    toggleActiveClass() {
-        this._rootHolder?.classList.toggle(mobileMenuActiveClass);
-    }
     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.toggleActiveClass();
+        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);
@@ -252,48 +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 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 parsedItems() {
+        return this.parseArrayFromString(this.navItems);
     }
-    get items() {
-        return this.isDesktopScreen ? this._navItems : this.navigationList;
+    get visibleItems() {
+        return this.isDesktopScreen ? this._visibleItems : this.parsedItems;
     }
-    get moreIsActive() {
-        return this._overflowItems.some(item => item.active);
+    get hasBreadcrumbsSlot() {
+        return !!this.getSlottedNodes("breadcrumbs").length && this.isDesktopScreen;
     }
-    get rootClass() {
-        const centeredClass = this.hasBreadcrumbsSlot ? "" : `${rootClass}_centered`;
-        return `${rootClass} ${centeredClass}`;
+    get hasDesktopButtonsSlot() {
+        return this.hasButtons && this.isDesktopScreen;
     }
-    get hasBreadcrumbsSlot() {
-        return !!this.getSlottedNodes("breadcrumbs").length;
+    get hasMobileButtonsSlot() {
+        return this.hasButtons && this.isMobileScreen;
     }
-    get hasButtonsSlot() {
+    get hasButtons() {
         return !!this.getSlottedNodes("buttons").length;
     }
     get isDesktopScreen() {
         return window.innerWidth > breakpointSizeS;
     }
+    get isMobileScreen() {
+        return window.innerWidth <= breakpointSizeS;
+    }
 };
 __decorate([
     property({ type: String })
@@ -310,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);
@@ -331,7 +293,7 @@ UDExSecondaryNavigation = UDExSecondaryNavigation_1 = __decorate([
         renderer: litRender,
         styles: SecondaryNavigationCss,
         template: SecondaryNavigationTemplate,
-        dependencies: [UI5Icon],
+        dependencies: [UDExSecondaryNavigationItem],
     })
     /**
      * Fires when item is clicked
@@ -353,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;

package/dist/SecondaryNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryNavigation.js","sourceRoot":"","sources":["../src/SecondaryNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element, { ChangeInfo } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport {\n  isLeft,\n  isRight,\n  isUp,\n  isDown,\n  isEscape,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { MORE } from \"./generated/i18n/i18n-defaults.js\";\n\nimport SecondaryNavigationTemplate from \"./generated/templates/SecondaryNavigationTemplate.lit.js\";\n\n// Styles\nimport SecondaryNavigationCss from \"./generated/themes/SecondaryNavigation.css.js\";\n\nconst mobileMenuActiveClass = \"udex-secondary-navigation__root_open\";\nconst rootClass = \"udex-secondary-navigation__root\";\nconst breakpointSizeS: number = 979;\n\nexport enum Target {\n  _blank = \"_blank\",\n  _parent = \"_parent\",\n  _self = \"_self\",\n  _top = \"_top\",\n}\n\nexport type NavItem = {\n  path: string;\n  mobileLinkTitle: string;\n  target: Target;\n  title: string;\n  active?: boolean;\n}\n\nexport type SecondaryNavigationItemClickDetail = {\n  originalEvent: Event,\n  clickedItem: HTMLElement;\n  clickedIndex: number;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-secondary-navigation</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/SecondaryNavigation.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-secondary-navigation\",\n  renderer: litRender,\n  styles: SecondaryNavigationCss,\n  template: SecondaryNavigationTemplate,\n  dependencies: [UI5Icon],\n})\n\n/**\n * Fires when item is clicked\n *\n * @allowPreventDefault\n * @public\n */\n@event<SecondaryNavigationItemClickDetail>(\"item-click\", {\n  detail: {\n    originalEvent: {\n      type: Event,\n    },\n    clickedItem: {\n      type: HTMLElement,\n    },\n    clickedIndex: {\n      type: Integer,\n    },\n  },\n})\n\nclass UDExSecondaryNavigation extends UI5Element {\n  /**\n   * Defines an aria label for the mobile menu opener\n   *\n   * @public\n   */\n  @property({ type: String })\n    mobileMenuOpenerAriaLabel!: string;\n\n  /**\n   * List of the nav items\n   *\n   * @default \"[]\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"[]\" })\n    navItems!: string;\n\n  /**\n   * Slot for breadcrumbs.\n   *\n   * @slot breadcrumbs\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    breadcrumbs!: Array<HTMLElement>;\n\n  /**\n   * Slot for action buttons.\n   *\n   * @slot buttons\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    buttons!: Array<HTMLElement>;\n\n  /**\n   * Defines the title of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    title!: string;\n\n  @property({ type: Boolean, noAttribute: true })\n    _dropdownMoreIsOpen!: boolean;\n\n  @property({ type: HTMLElement, defaultValue: [], noAttribute: true })\n    _overflowItems!: Array<NavItem>;\n\n  @property({ type: HTMLElement, defaultValue: [], noAttribute: true })\n    _navItems!: Array<NavItem>;\n\n  @property({ type: Boolean, noAttribute: true })\n    _requestRender = false;\n\n  @property({ type: Boolean, noAttribute: true })\n    _mobileBtnExpanded = false;\n\n  _showMoreButton: boolean;\n  _navigationList: Array<NavItem> | undefined;\n  _dropdown!: HTMLElement | null | undefined;\n  _rootHolder!: HTMLElement | null | undefined;\n  _boundReflowItems: () => void;\n\n  static i18nBundle: any;\n\n  static async onDefine(): Promise<void> {\n    UDExSecondaryNavigation.i18nBundle = await getI18nBundle(\"udex-secondary-navigation\");\n  }\n\n  constructor() {\n    super();\n    this._showMoreButton = true;\n    this._boundReflowItems = this.reflowItems.bind(this);\n  }\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n\n    if (this.isDesktopScreen) {\n      this.reflowItems();\n    }\n\n    ResizeHandler.register(this.rootHolder, this._boundReflowItems);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this.rootHolder, this._boundReflowItems);\n  }\n\n  onInvalidation(changeInfo: ChangeInfo): void {\n    if (changeInfo.name === \"navItems\") {\n      this._navigationList = undefined;\n      this.reflowItems();\n    }\n  }\n\n  onAfterRendering(): void {\n    this._rootHolder = this.rootHolder;\n    this._dropdown = this.getDropdown();\n\n    this.handleOutsideClick();\n  }\n\n  refreshRendering(): void {\n    this._requestRender = !this._requestRender;\n  }\n\n  reflowItems(): void {\n    const availableWidth = this.rootHolder.offsetWidth - this.heading.offsetWidth - (this.optionalButtons?.offsetWidth || 0);\n    const moreButtonWidth = this.getMoreButtonWidth();\n    const itemsGap = 20;\n\n    const widths = this.navigationList.map(item => this.getItemWidth(item));\n\n    const steps: Array<number> = [];\n    widths.forEach((itemWidth, index) => {\n      steps.push((steps.at(-1) || 0) + itemWidth + (index && itemsGap));\n    });\n\n    if ((steps.at(-1) || 0) <= availableWidth) {\n      this._navItems.splice(0, Infinity, ...this.navigationList);\n      this._showMoreButton = false;\n      this.refreshRendering();\n      return;\n    }\n\n    // @ts-ignore\n    const lastVisibleIndex: number = steps.findLastIndex((size: number) => size < (availableWidth - moreButtonWidth - itemsGap));\n    this._navItems.splice(0, Infinity, ...this.navigationList.slice(0, lastVisibleIndex + 1));\n    this._overflowItems.splice(0, Infinity, ...this.navigationList.slice(lastVisibleIndex + 1));\n    this._showMoreButton = true;\n    this.refreshRendering();\n  }\n\n  handleKeyDown(e: KeyboardEvent) {\n    e.stopPropagation();\n    this.handleLeftArrow(e);\n    this.handleRightArrow(e);\n    this.handleEscapeKey(e);\n  }\n\n  handleEscapeKey(e: KeyboardEvent) {\n    if (isEscape(e)) {\n      if (!this.isDesktopScreen) {\n        this._rootHolder?.classList.remove(mobileMenuActiveClass);\n        this.getMobileButtonMenu().focus();\n      } else {\n        this.onCloseDropdown();\n        this.getMoreButton().focus();\n      }\n    }\n  }\n\n  handleKeyDownDropdown(e: KeyboardEvent) {\n    e.stopPropagation();\n    this.handleUpArrow(e);\n    this.handleDownArrow(e);\n    this.handleEscapeKey(e);\n  }\n\n  handleLeftArrow(e: KeyboardEvent): void {\n    if (isLeft(e)) {\n      this.focusPrevNavItem(e);\n    }\n  }\n\n  handleRightArrow(e: KeyboardEvent): void {\n    if (isRight(e)) {\n      this.focusNextNavItem(e);\n    }\n  }\n\n  handleUpArrow(e: KeyboardEvent): void {\n    if (isUp(e)) {\n      this.focusPrevNavItem(e);\n    }\n  }\n\n  handleDownArrow(e: KeyboardEvent): void {\n    if (isDown(e)) {\n      this.focusNextNavItem(e);\n    }\n  }\n\n  handleOutsideClick(): void {\n    document.addEventListener(\"click\", () => {\n      if (this._dropdown) {\n        this.onCloseDropdown();\n      }\n    });\n  }\n\n  handleMobileOpen(): void {\n    this.toggleActiveClass();\n    this._mobileBtnExpanded = !this._mobileBtnExpanded;\n  }\n\n  handleToggleDropdown(): void {\n    this._dropdownMoreIsOpen = !this._dropdownMoreIsOpen;\n  }\n\n  toggleActiveClass() {\n    this._rootHolder?.classList.toggle(mobileMenuActiveClass);\n  }\n\n  focusPrevNavItem(e: KeyboardEvent): void {\n    const el = e.target as HTMLElement;\n    const currentItem = el.parentElement as HTMLElement;\n    const currentSelectedIndex = this.getCurrentIndex(currentItem);\n    const lastItemIndex = this.navigationItems.length - 1;\n    const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;\n    const listItem = this.getListItemByIndex(previousSelectIndex);\n    listItem?.focus();\n  }\n\n  focusNextNavItem(e: KeyboardEvent): void {\n    const el = e.target as HTMLElement;\n    const currentItem = el.parentElement as HTMLElement;\n    const currentSelectedIndex = this.getCurrentIndex(currentItem);\n    const nextSelectIndex = currentSelectedIndex + 1 > this.navigationItems.length - 1 ? 0 : currentSelectedIndex + 1;\n    const listItem = this.getListItemByIndex(nextSelectIndex);\n    listItem?.focus();\n  }\n\n  onCloseDropdown(): void {\n    this._dropdownMoreIsOpen = false;\n  }\n\n  getItemWidth(item: NavItem): number {\n    const canvas = document.createElement(\"canvas\");\n    const context = canvas.getContext(\"2d\")!;\n    context.font = \"16px / 17.6px '72 Brand Variable'\";\n\n    return Math.ceil(context.measureText(item.title).width);\n  }\n\n  getCurrentIndex(item: HTMLElement): number {\n    return this.navigationItems.indexOf(item);\n  }\n\n  getListItemByIndex(index: number): HTMLElement | null {\n    return this.navigationItems[index].querySelector(\".udex-secondary-navigation__link-btn\");\n  }\n\n  getDropdown(): HTMLElement {\n    return this.shadowRoot!.querySelector(\".udex-secondary-navigation__dropdown\")!;\n  }\n\n  getMobileButtonMenu(): HTMLElement {\n    return this.shadowRoot?.querySelector(\".udex-secondary-navigation__mobile-opener\") as HTMLElement;\n  }\n\n  getMoreButton(): HTMLElement {\n    return this.shadowRoot!.querySelector(\".udex-secondary-navigation__list-item_more > button\")!;\n  }\n\n  getMoreButtonWidth(): number {\n    const canvas = document.createElement(\"canvas\");\n    const context = canvas.getContext(\"2d\")!;\n    context.font = \"16px / 17.6px '72 Brand Variable'\";\n\n    return Math.ceil(context.measureText(\"More\").width) + 4 + 16;\n  }\n\n  parseArrayFromString<T>(string: string): T[] {\n    return string ? JSON.parse(string) as T[] : [];\n  }\n\n  handleNavigationClick(e: MouseEvent) {\n    const target = e.target as HTMLElement;\n    const clickedIndex = this.domNavItems.indexOf(target);\n    const prevented = !this.fireEvent(\"item-click\", {\n      originalEvent: e,\n      clickedItem: target,\n      clickedIndex,\n    }, true);\n\n    if (prevented) {\n      e.preventDefault();\n      return;\n    }\n\n    if (this.domNavItems.length > 0) {\n      this.navigationList.forEach(item => delete item.active);\n      this.navigationList[clickedIndex].active = true;\n      this.refreshRendering();\n      this.toggleActiveClass();\n    }\n  }\n\n  get navigationItems(): Array<HTMLElement> {\n    return Array.from(this.shadowRoot!.querySelectorAll(\".udex-secondary-navigation__link-btn-wrap\"));\n  }\n\n  get domNavItems(): Array<HTMLElement> {\n    const navigationItemsSelector = \".udex-secondary-navigation__item:not(.udex-secondary-navigation__link-btn-more), .udex-secondary-navigation__dropdown-item\";\n    const domNavItems = this.shadowRoot?.querySelectorAll<HTMLElement>(navigationItemsSelector);\n    return domNavItems ? Array.from(domNavItems) : [];\n  }\n\n  get rootHolder(): HTMLElement {\n    return (this.shadowRoot ? this.shadowRoot.querySelector<HTMLElement>(\".udex-secondary-navigation__root\") : undefined)!;\n  }\n\n  get heading(): HTMLElement {\n    return (this.shadowRoot ? this.shadowRoot.querySelector<HTMLElement>(\".udex-secondary-navigation__heading\") : undefined)!;\n  }\n\n  get optionalButtons() {\n    return this.shadowRoot?.querySelector<HTMLElement>(\".udex-secondary-navigation__buttons\");\n  }\n\n  get linksList() {\n    return this.shadowRoot?.querySelector<HTMLElement>(\".udex-secondary-navigation__list\");\n  }\n\n  get moreButtonText(): string {\n    return UDExSecondaryNavigation.i18nBundle.getText(MORE) as string;\n  }\n\n  get activeItemText(): string {\n    const activeItem = this.navigationList.find(item => item.active);\n    return activeItem ? activeItem?.title : \"\";\n  }\n\n  get moreClass(): string {\n    const rootClasses = \"udex-secondary-navigation__list-item udex-secondary-navigation__list-item_more\";\n    return this._dropdownMoreIsOpen ? `${rootClasses} udex-secondary-navigation__list-item_open` : `${rootClasses}`;\n  }\n\n  get navigationList(): Array<NavItem> {\n    if (!this._navigationList) {\n      this._navigationList = this.parseArrayFromString<NavItem>(this.navItems);\n    }\n    return this._navigationList;\n  }\n\n  get items(): Array<NavItem> {\n    return this.isDesktopScreen ? this._navItems : this.navigationList;\n  }\n\n  get moreIsActive(): boolean {\n    return this._overflowItems.some(item => item.active);\n  }\n\n  get rootClass(): string {\n    const centeredClass = this.hasBreadcrumbsSlot ? \"\" : `${rootClass}_centered`;\n    return `${rootClass} ${centeredClass}`;\n  }\n\n  get hasBreadcrumbsSlot(): boolean {\n    return !!this.getSlottedNodes(\"breadcrumbs\").length;\n  }\n\n  get hasButtonsSlot(): boolean {\n    return !!this.getSlottedNodes(\"buttons\").length;\n  }\n\n  get isDesktopScreen(): boolean {\n    return window.innerWidth > breakpointSizeS;\n  }\n}\n\nUDExSecondaryNavigation.define();\n\nexport default UDExSecondaryNavigation;\n"]}
+{"version":3,"file":"SecondaryNavigation.js","sourceRoot":"","sources":["../src/SecondaryNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element, { ChangeInfo } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport {\n  isLeft,\n  isRight,\n  isEscape,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport UDExSecondaryNavigationItem from \"./SecondaryNavigationItem.js\";\nimport UDExSecondaryNavigationSubItem from \"./SecondaryNavigationSubItem.js\";\nimport UDExSecondaryNavigationItemBase, { NavItem } from \"./SecondaryNavigationItemBase.js\";\nimport { MORE } from \"./generated/i18n/i18n-defaults.js\";\n\nimport SecondaryNavigationTemplate from \"./generated/templates/SecondaryNavigationTemplate.lit.js\";\n\n// Styles\nimport SecondaryNavigationCss from \"./generated/themes/SecondaryNavigation.css.js\";\n\nconst canvasContentFont: string = \"16px / 17.6px '72 Brand Variable'\";\nconst breakpointSizeS: number = 979;\n\nexport type SecondaryNavigationItemClickDetail = {\n  originalEvent: Event,\n  clickedItem: UDExSecondaryNavigationItem;\n  clickedIndex: number;\n};\n\nexport type SecondaryNavigationSubItemClickDetail = {\n  originalEvent: Event,\n  clickedItem: {\n    items: Array<NavItem>\n  };\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-secondary-navigation</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/SecondaryNavigation.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-secondary-navigation\",\n  renderer: litRender,\n  styles: SecondaryNavigationCss,\n  template: SecondaryNavigationTemplate,\n  dependencies: [UDExSecondaryNavigationItem],\n})\n\n/**\n * Fires when item is clicked\n *\n * @allowPreventDefault\n * @public\n */\n@event<SecondaryNavigationItemClickDetail>(\"item-click\", {\n  detail: {\n    originalEvent: {\n      type: Event,\n    },\n    clickedItem: {\n      type: HTMLElement,\n    },\n    clickedIndex: {\n      type: Integer,\n    },\n  },\n})\n\n/**\n * Fires when sub item is clicked\n *\n * @allowPreventDefault\n * @public\n */\n@event<SecondaryNavigationSubItemClickDetail>(\"sub-item-click\", {\n  detail: {\n    originalEvent: {\n      type: Event,\n    },\n    clickedItem: {\n      type: HTMLElement,\n    },\n  },\n})\n\nclass UDExSecondaryNavigation extends UI5Element {\n  /**\n   * Defines an aria label for the mobile menu opener\n   *\n   * @public\n   */\n  @property({ type: String })\n    mobileMenuOpenerAriaLabel!: string;\n\n  /**\n   * List of the nav items\n   *\n   * @default \"[]\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"[]\" })\n    navItems!: string;\n\n  /**\n   * Slot for breadcrumbs.\n   *\n   * @slot breadcrumbs\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    breadcrumbs!: Array<HTMLElement>;\n\n  /**\n   * Slot for action buttons.\n   *\n   * @slot buttons\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    buttons!: Array<HTMLElement>;\n\n  /**\n   * Defines the title of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    title!: string;\n\n  /**\n   * Defines the href of the title.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    titleHref!: string;\n\n  @property({ type: Boolean, noAttribute: true })\n    _selectedMore!: boolean;\n\n  @property({ type: Object, multiple: true, noAttribute: true })\n    _overflowItems!: Array<NavItem>;\n\n  @property({ type: Object, multiple: true, noAttribute: true })\n    _visibleItems!: Array<NavItem>;\n\n  @property({ type: Boolean, noAttribute: true })\n    _requestRender = false;\n\n  @property({ type: Boolean, noAttribute: true })\n    _mobileBtnExpanded = false;\n\n  _navItems!: Array<NavItem>;\n  _showMoreButton: boolean;\n  _rootHolder!: HTMLElement | null | undefined;\n  _clickedNavItem!: UDExSecondaryNavigationItem;\n  _boundReflowItems: () => void;\n\n  static i18nBundle: any;\n\n  static async onDefine(): Promise<void> {\n    UDExSecondaryNavigation.i18nBundle = await getI18nBundle(\"udex-secondary-navigation\");\n  }\n\n  constructor() {\n    super();\n    this._showMoreButton = true;\n    this._boundReflowItems = this.reflowItems.bind(this);\n  }\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n\n    ResizeHandler.register(this, this._boundReflowItems);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._boundReflowItems);\n  }\n\n  onInvalidation(changeInfo: ChangeInfo): void {\n    if (changeInfo.name === \"navItems\") {\n      this.reflowItems();\n    }\n  }\n\n  onAfterRendering(): void {\n    this._rootHolder = this.rootHolder;\n    this.handleOutsideClick();\n  }\n\n  refreshRendering(): void {\n    this._requestRender = !this._requestRender;\n  }\n\n  reflowItems(): void {\n    const availableWidth = this.rootHolder.offsetWidth - this.heading?.offsetWidth - (this.optionalButtons?.offsetWidth || 0);\n    const moreButtonWidth = this.getMoreButtonWidth();\n    const itemsGap = 20;\n    const widths = this.parsedItems.map(item => this.getItemWidth(item));\n    const steps: Array<number> = [];\n\n    widths?.forEach((itemWidth, index) => {\n      steps.push((steps.at(-1) || 0) + itemWidth + (index && itemsGap));\n    });\n\n    if ((steps.at(-1) || 0) <= availableWidth) {\n      this._visibleItems.splice(0, Infinity, ...this.parsedItems);\n      this._showMoreButton = false;\n      this.refreshRendering();\n      return;\n    }\n\n    if (this.parsedItems) {\n      // @ts-ignore\n      const lastVisibleIndex: number = steps.findLastIndex((size: number) => size < (availableWidth - moreButtonWidth - itemsGap));\n      this._visibleItems.splice(0, Infinity, ...this.parsedItems.slice(0, lastVisibleIndex + 1));\n      this._overflowItems.splice(0, Infinity, ...this.parsedItems.slice(lastVisibleIndex + 1));\n      this._showMoreButton = true;\n      this.refreshRendering();\n    }\n  }\n\n  handleKeyDown(e: KeyboardEvent): void {\n    e.stopPropagation();\n    if (isLeft(e)) {\n      this.focusPrevNavItem(e);\n    }\n    if (isRight(e)) {\n      this.focusNextNavItem(e);\n    }\n    if (isEscape(e)) {\n      (e.target as UDExSecondaryNavigationItem).closeDropdown();\n    }\n  }\n\n  focusPrevNavItem(e: KeyboardEvent): void {\n    const item = e.target as UDExSecondaryNavigationItem;\n    const currentSelectedIndex = this.getCurrentIndex(item);\n    const lastItemIndex = this.domNavItems.length - 1;\n    const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;\n    this.domNavItems[previousSelectIndex]?.focus();\n  }\n\n  focusNextNavItem(e: KeyboardEvent): void {\n    const item = e.target as UDExSecondaryNavigationItem;\n    const currentSelectedIndex = this.getCurrentIndex(item);\n    const nextSelectIndex = currentSelectedIndex + 1 > this.domNavItems.length - 1 ? 0 : currentSelectedIndex + 1;\n    this.domNavItems[nextSelectIndex].focus();\n  }\n\n  getItemWidth(item: NavItem): number {\n    const canvas = document.createElement(\"canvas\");\n    const context = canvas.getContext(\"2d\")!;\n    context.font = canvasContentFont;\n\n    return Math.ceil(context.measureText(item.title).width);\n  }\n\n  getMoreButtonWidth(): number {\n    const canvas = document.createElement(\"canvas\");\n    const context = canvas.getContext(\"2d\")!;\n    context.font = canvasContentFont;\n\n    return Math.ceil(context.measureText(this.moreButtonText).width);\n  }\n\n  getCurrentIndex(item: UDExSecondaryNavigationItem): number {\n    return this.domNavItems.indexOf(item);\n  }\n\n  handleItemClick(e: CustomEvent): void {\n    const clickedItem = e.detail.item as UDExSecondaryNavigationItem;\n    const prevented = !this.fireEvent(\"item-click\", {\n      originalEvent: e,\n      clickedItem,\n      clickedIndex: this.getCurrentIndex(clickedItem),\n    }, true);\n\n    if (prevented) {\n      e.preventDefault();\n      return;\n    }\n\n    this._clickedNavItem = clickedItem;\n    this.closePrevDropdown(clickedItem._id);\n\n    if (!clickedItem.hasNestedItems) {\n      this.setActiveItem(this.parsedItems, clickedItem);\n    }\n  }\n\n  handleSubItemClick(e: CustomEvent): void {\n    const item = e.detail.item as UDExSecondaryNavigationSubItem;\n    const { items } = item as NavItem;\n    const prevented = !this.fireEvent(\"sub-item-click\", {\n      originalEvent: e,\n      clickedItem: item,\n    }, true);\n\n    if (prevented) {\n      e.preventDefault();\n      return;\n    }\n\n    if (this.isMobileScreen && !items) {\n      this.mobileNav.closeDropdown();\n    }\n\n    if (!items) {\n      this.setActiveItem(this.parsedItems, item);\n      this._clickedNavItem?.closeDropdown();\n    }\n  }\n\n  setActiveItem(navItems: Array<NavItem>, clickedItem: UDExSecondaryNavigationItemBase): void {\n    const updateNav = (items: Array<NavItem>, { title, path }: UDExSecondaryNavigationItemBase) => {\n      items.forEach(item => {\n        if (item.title === title && item.path === path) {\n          item.active = true;\n          return;\n        }\n        delete item.active;\n\n        if (item.items) {\n          updateNav(item.items, clickedItem);\n        }\n      });\n    };\n\n    updateNav(navItems, clickedItem);\n    this.navItems = JSON.stringify(navItems);\n  }\n\n  handleOutsideClick(): void {\n    document.addEventListener(\"click\", (e: MouseEvent) => {\n      if (this.isMobileScreen && e.target !== this) {\n        this.mobileNav?.closeDropdown();\n        return;\n      }\n\n      const isClickedNavItem = e.composedPath().includes(this._clickedNavItem);\n      if (this.isDesktopScreen && !isClickedNavItem && this._clickedNavItem) {\n        this._clickedNavItem.closeDropdown();\n      }\n    });\n  }\n\n  closePrevDropdown(clickedItemId: string): void {\n    this.domNavItems.forEach(item => {\n      if (clickedItemId !== item._id) {\n        item.closeDropdown();\n      }\n    });\n  }\n\n  parseArrayFromString<T>(string: string): T[] {\n    return string ? JSON.parse(string) as T[] : [];\n  }\n\n  get domNavItems(): Array<UDExSecondaryNavigationItem> {\n    const items = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationItem>(\"udex-secondary-navigation-item\");\n    return items ? Array.from(items) : [];\n  }\n\n  get rootHolder(): HTMLElement {\n    return (this.shadowRoot ? this.shadowRoot.querySelector<HTMLElement>(\".udex-secondary-navigation__root\") : undefined)!;\n  }\n\n  get heading(): HTMLElement {\n    return (this.shadowRoot ? this.shadowRoot.querySelector<HTMLElement>(\".udex-secondary-navigation__heading\") : undefined)!;\n  }\n\n  get mobileNav(): UDExSecondaryNavigationItem {\n    return (this.shadowRoot ? this.shadowRoot.querySelector<UDExSecondaryNavigationItem>(\".udex-secondary-navigation__mobile-nav\") : undefined)!;\n  }\n\n  get optionalButtons(): HTMLElement | null | undefined {\n    return this.shadowRoot?.querySelector<HTMLElement>(\".udex-secondary-navigation__buttons\");\n  }\n\n  get moreButtonText(): string {\n    return UDExSecondaryNavigation.i18nBundle.getText(MORE) as string;\n  }\n\n  get parsedItems(): Array<NavItem> {\n    return this.parseArrayFromString<NavItem>(this.navItems);\n  }\n\n  get visibleItems(): Array<NavItem> {\n    return this.isDesktopScreen ? this._visibleItems : this.parsedItems;\n  }\n\n  get hasBreadcrumbsSlot(): boolean {\n    return !!this.getSlottedNodes(\"breadcrumbs\").length && this.isDesktopScreen;\n  }\n\n  get hasDesktopButtonsSlot(): boolean {\n    return this.hasButtons && this.isDesktopScreen;\n  }\n\n  get hasMobileButtonsSlot(): boolean {\n    return this.hasButtons && this.isMobileScreen;\n  }\n\n  get hasButtons(): boolean {\n    return !!this.getSlottedNodes(\"buttons\").length;\n  }\n\n  get isDesktopScreen(): boolean {\n    return window.innerWidth > breakpointSizeS;\n  }\n\n  get isMobileScreen(): boolean {\n    return window.innerWidth <= breakpointSizeS;\n  }\n}\n\nUDExSecondaryNavigation.define();\n\nexport default UDExSecondaryNavigation;\n"]}

package/dist/SecondaryNavigationItem.d.ts

@@ -0,0 +1,101 @@
+import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
+import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+export declare const menuItemRole: string;
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-secondary-navigation-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/SecondaryNavigationItem.js";</code>
+ *
+ * @constructor
+ * @extends UDExSecondaryNavigationItemBase
+ * @tagname udex-secondary-navigation-item
+ * @private
+ */
+declare class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
+    /**
+     * Defines an aria label for item
+     *
+     * @public
+     */
+    ariaLabel: string;
+    /**
+     * Defines a role for item
+     *
+     * @public
+     */
+    role: string;
+    /**
+     * Defines the content of the item.
+     *
+     * @slot content
+     * @public
+     */
+    buttons: Array<HTMLElement>;
+    /**
+     * List of the sub items
+     *
+     * @default "[]"
+     * @public
+     */
+    subItems: Array<NavItem>;
+    /**
+     * Defines if dropdown is opened.
+     *
+     * @public
+     * @default false
+     */
+    isOpen: boolean;
+    /**
+     * Defines processed items.
+     *
+     * @private
+     * @default []
+     */
+    _processedItems: Array<NavItem>;
+    _dropdownHistory: Array<Array<NavItem>>;
+    _shouldFocusFirstSubItem: boolean;
+    _subTitle: string | undefined;
+    onAfterRendering(): void;
+    onBeforeRendering(): void;
+    onItemClick(): void;
+    onSubItemClick(e: Event): void;
+    onBackClick(): void;
+    toggleDropdown(): void;
+    closeDropdown(): void;
+    handleItemLinkKeyDown(e: KeyboardEvent): void;
+    handleItemButtonKeyDown(e: KeyboardEvent): void;
+    handleSubItemKeyDown(e: KeyboardEvent): void;
+    handleUpArrow(e: KeyboardEvent): void;
+    handleDownArrow(e: KeyboardEvent): void;
+    handleLeftArrow(e: KeyboardEvent): void;
+    handleRightArrow(e: KeyboardEvent): void;
+    handleEnterAndSpace(e: KeyboardEvent): void;
+    handleEscapeKey(): void;
+    setDropdownHistory(): void;
+    setPrevNestedItems(): void;
+    setNestedItems({ title, items }: NavItem): void;
+    setDropdownItems(): void;
+    onFirstSubItemFocus(): void;
+    onLastSubItemFocus(): void;
+    onShouldFocusFirstSubItem(): void;
+    get domNavItems(): Array<UDExSecondaryNavigationSubItem>;
+    get hasNestedItems(): boolean;
+    get isSubItemActive(): boolean;
+    get isActive(): boolean;
+    get subActiveItemTitle(): string | undefined;
+    get subActiveItem(): NavItem | undefined;
+    get isLink(): boolean;
+    get itemRole(): string;
+    get menuItemRole(): string;
+    get title(): string;
+}
+export default UDExSecondaryNavigationItem;