@eui/ecl 22.0.0-alpha.45 → 22.0.0-alpha.46

package/docs/json/documentation.json

@@ -969,12 +969,12 @@
         },
         {
             "name": "EclMenuItem",
-            "id": "interface-EclMenuItem-3f0db6beeae4f21f699be9afa5bc6c72676e2d850124076ac93351fc2f221ad3c15131dc064c4f05e5d5e80b5d4b1281295f15b422c40832f56bbcefba4a7f17",
+            "id": "interface-EclMenuItem-038ddd566420e281249dfca3a6c6928695914e0974e185099601d5531b2e428d07710350bbce601a3e985dc8921b18d8f6510f82f2d7f7fc25f1fe2ec5403f61",
             "file": "packages/ecl/components/ecl-menu/models/ecl-menu-item.model.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { Signal, WritableSignal } from '@angular/core';\n\nexport interface EclMenuItem {\n    id?: Signal<string>;\n    label: Signal<string>;\n    isHovered?: WritableSignal<boolean>;\n    isCurrent?: WritableSignal<boolean>;\n    isExpanded?: WritableSignal<boolean>;\n    isVisible?: WritableSignal<boolean>;\n    hasChildren?: boolean;\n    children?: EclMenuItem[];\n}\n",
+            "sourceCode": "import { Signal, WritableSignal } from '@angular/core';\n\nexport interface EclMenuItem {\n    id?: Signal<string>;\n    label: Signal<string>;\n    isHovered?: WritableSignal<boolean>;\n    isCurrent?: WritableSignal<boolean>;\n    isExpanded?: WritableSignal<boolean>;\n    isVisible?: WritableSignal<boolean>;\n    hasChildren?: Signal<boolean>;\n    children?: Signal<EclMenuItem[]>;\n}\n",
             "displayName": "EclMenuItem",
             "properties": [
                 {
@@ -982,7 +982,7 @@
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "EclMenuItem[]",
+                    "type": "Signal<EclMenuItem[]>",
                     "indexKey": "",
                     "optional": true,
                     "description": "",
@@ -994,7 +994,7 @@
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "boolean",
+                    "type": "Signal<boolean>",
                     "indexKey": "",
                     "optional": true,
                     "description": "",
@@ -66110,7 +66110,7 @@
         },
         {
             "name": "EclMenuComponent",
-            "id": "component-EclMenuComponent-1be26f68226dd336abd2507c1f4c4575750683e5ac225e165d36ed645bbe4ec65b630bf3d7bcb1cafb5a0f6eac86058efcbfb5d6df2e838726ad524e612ddf4b",
+            "id": "component-EclMenuComponent-c44b0b6baa089c4bbf8b6873f1838c3b89c3bcf9ab1e00cdfaa2f3ced517dffe832485aeb553be9779f41e34b68c521f51566e20e0db0511437fe0ee3e879e83",
             "file": "packages/ecl/components/ecl-menu/ecl-menu/ecl-menu.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -67025,7 +67025,7 @@
             "description": "<p>The horizontal menu is used as a primary navigation and it can display up to 2 levels.\nIt directs users to the pages where they need to visit.</p>\n",
             "rawdescription": "\n\nThe horizontal menu is used as a primary navigation and it can display up to 2 levels.\nIt directs users to the pages where they need to visit.\n",
             "type": "component",
-            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { AfterContentInit, ChangeDetectorRef, Component, DOCUMENT, ElementRef, OnDestroy, OnInit, PLATFORM_ID, afterNextRender, computed, effect, inject, numberAttribute, output, input, signal, contentChildren, viewChild } from '@angular/core';\nimport { outputToObservable } from '@angular/core/rxjs-interop';\nimport { EuiAppShellService } from '@eui/core';\nimport { EUI_ECL_BUTTON, EclButtonComponent } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective, EclRtlService, KeyCode } from '@eui/ecl/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport type Hammer from 'hammerjs';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { EclMenuItemCaretEvent, EclMenuItemHoverEvent, EclMenuItemKeydownEvent, EclMenuItemSelectEvent } from '../events';\nimport { EclMenuItem } from '../models/ecl-menu-item.model';\nimport { EclMenuItemComponent } from './ecl-menu-item.component';\n\n/**\n * The horizontal menu is used as a primary navigation and it can display up to 2 levels.\n * It directs users to the pages where they need to visit.\n */\n@Component({\n    selector: 'ecl-menu',\n    templateUrl: './ecl-menu.component.html',\n    imports: [TranslatePipe, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON],\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n    host: {\n        role: 'navigation',\n        '[class]': 'cssClasses()',\n        '[class.ecl-menu--forced-mobile]': 'isTablet()',\n        '[class.ecl-menu--forced-close]': 'isMenuHidden()',\n        '[attr.data-expanded]': 'isHamburgerMenuOpened() ? \"\" : null',\n        '(document:click)': 'onDocumentClick($event)',\n        '(keydown.escape)': 'onEscapePress($event)',\n    },\n})\nexport class EclMenuComponent extends ECLBaseDirective implements OnInit, AfterContentInit, OnDestroy {\n\n    /**\n     * Adds some additional styling for the menu items' labels.\n     *  Depending on that value, the labels can drop on 2-3 lines, if they are longer.\n     */\n    readonly maxLines = input(0, { transform: numberAttribute });\n\n    readonly menuItemSelect = output<EclMenuItemSelectEvent>();\n    readonly openHamburgerMenu = output();\n    readonly closeHamburgerMenu = output();\n\n    readonly isHamburgerMenuOpened = signal(false);\n    readonly isMobileBreakpoint = signal(false);\n    readonly isTablet = signal(false);\n    readonly isMenuHidden = signal(false);\n    readonly hasOverflow = signal(false);\n    /** Controls the delayed application of CSS transition class (prevents Chrome flash on load) */\n    readonly hasTransition = signal(false);\n    /**\n     * Show/hide the specific class for the 'previous' and 'next' buttons.\n     */\n    readonly isPrevBtnCurrentClass = signal(false);\n    readonly menuListStyleRight = signal('auto');\n    readonly menuListStyleLeft = signal('auto');\n    readonly overlayStyleTop = signal<number | null>(null);\n    readonly innerStyleTop = signal<number | null>(null);\n\n    /**\n     * Represents the current viewport breakpoint states.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    breakpointsValue: any = {\n        isMobile: false,\n        isTablet: false,\n        isLtDesktop: false,\n        isDesktop: false,\n        isXL: false,\n        isXXL: false,\n    };\n\n    /**\n     * The main items of the menu.\n     */\n    protected readonly eclRootMenuItems = contentChildren(EclMenuItemComponent);\n    /**\n     * The element, that wraps the main menu items and the back and forth button.\n     */\n    protected readonly innerSection = viewChild<ElementRef>('innerSection');\n    /**\n     * The element that wraps the main menu items.\n     */\n    protected readonly itemsList = viewChild<ElementRef>('itemsList');\n    /**\n     * When there is an overflow of the menu, the 'previous' button to navigate back to first hidden items.\n     */\n    protected readonly btnPrevious = viewChild<EclButtonComponent>('btnPrevious');\n    /**\n     * When there is an overflow of the menu, the 'next' button to navigate to next hidden items.\n     */\n    protected readonly btnNext = viewChild<EclButtonComponent>('btnNext');\n    /**\n     * The button to open/close menu in mobile mode.\n     */\n    protected readonly openCloseButton = viewChild<EclButtonComponent>('openCloseButton');\n\n    protected readonly isShowPrevBtn = signal(false);\n    protected readonly isShowNextBtn = signal(false);\n\n    protected readonly cssClasses = computed<string>(() =>\n        [\n            super.getCssClasses('ecl-menu'),\n            this.hasTransition() ? 'ecl-menu--transition' : '',\n            this.isRtl() ? 'ecl-menu--rtl' : '',\n        ].join(' '));\n\n    /** Controls whether hover events should be processed (suppressed briefly after touch interactions) */\n    private ignoreHover = false;\n    private readonly isRtl = signal(false);\n    private currentItem: EclMenuItem;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private connectedItems = new WeakSet<EclMenuItemComponent>();\n    private totalItemsWidth = 0;\n    private offsetLeft = 0;\n    private lastVisibleItem: EclMenuItemComponent;\n    private hammertime: Hammer;\n    private resizeTimer: ReturnType<typeof setTimeout>;\n    private TIMEOUT_INTERVAL = 150;\n    private el = inject(ElementRef);\n    private eclRtlService = inject(EclRtlService);\n    private euiAppShellService = inject(EuiAppShellService);\n    private platformId = inject(PLATFORM_ID);\n    private document = inject<Document>(DOCUMENT);\n    private cdr = inject(ChangeDetectorRef);\n\n    constructor() {\n        super();\n        // Subscribe to each projected root menu item's events as the set of items changes.\n        effect(() => {\n            this.eclRootMenuItems().forEach((rootItem) => this.connectMenuItemEvents(rootItem));\n        });\n        afterNextRender(() => {\n            clearTimeout(this.resizeTimer);\n            this.observeElementSizeChanges();\n            this.resizeTimer = setTimeout(() => {\n                this.checkMenuItemsWidth();\n                this.checkMenuOverflow();\n            }, this.TIMEOUT_INTERVAL);\n            this.subscribeToAppShellBreakpoints();\n\n            // Delay transition class to prevent CSS transitions from playing on page load (Chrome fix)\n            setTimeout(() => {\n                this.hasTransition.set(true);\n            }, 500);\n        });\n    }\n\n    /**\n     * On outside click - close/hide any open menus.\n     * @param event\n     */\n    onDocumentClick(event: MouseEvent): void {\n        if (!this.isHamburgerMenuOpened()) return;\n\n        const target = event.target as HTMLElement;\n        if (!this.el.nativeElement.contains(target) ||\n            target.classList.contains('ecl-menu__overlay')) {\n            this.closeRootMenu();\n            this.onCloseHamburgerMenu();\n        }\n    }\n\n    /**\n     * On 'esc' key clicked - close/hide any open menus.\n     * @param event\n     */\n    onEscapePress(event: Event): void {\n        if (!this.isHamburgerMenuOpened()) return;\n\n        this.closeRootMenu();\n        this.onCloseHamburgerMenu();\n    }\n\n    ngOnInit(): void {\n        if (isPlatformBrowser(this.platformId)) {\n            this.handleRtlChangeState();\n            this.observeSwipeGestures();\n        }\n    }\n\n    ngAfterContentInit(): void {\n        // Event wiring for projected items is handled by an effect set up in the constructor.\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n\n        this.hammertime?.off('swipeleft');\n        this.hammertime?.off('swiperight');\n    }\n\n    /**\n     * Swipe left gesture handling\n     */\n    onSwipeLeft(): void {\n        if (this.isMobileBreakpoint() || this.isTablet()) {\n            this.onOpenHamburgerMenu();\n        }\n    }\n\n    /**\n     * Swipe right gesture handling\n     */\n    onSwipeRight(): void {\n        if (this.isMobileBreakpoint() || this.isTablet()) {\n            this.onCloseHamburgerMenu();\n        }\n    }\n\n    /**\n     * Manages state on open/close button click, used in mobile view.\n     */\n    onMenuOpenCloseClick(evt: MouseEvent): void {\n        if (this.isHamburgerMenuOpened()) {\n            this.onCloseHamburgerMenu();\n        } else {\n            this.onOpenHamburgerMenu();\n        }\n        evt.preventDefault();\n    }\n\n    /**\n     * Manages state on close button click, used in mobile view, in EU theme.\n     */\n    onMenuCloseClick(evt: MouseEvent): void {\n        this.onCloseHamburgerMenu();\n        this.closeRootMenu();\n        evt.preventDefault();\n    }\n\n    /**\n     * Manages state on back button click, used in mobile view.\n     */\n    onMenuBackClick(evt: MouseEvent): void {\n        this.closeRootMenu();\n        evt.preventDefault();\n    }\n\n    /**\n     * Manages state on 'previous' button click. Used in desktop view. Slides the items and shows the previous hidden items.\n     */\n    onPrevBtnClick(): void {\n        this.slideMenuInitialState();\n        this.refreshDisplay();\n    }\n\n    /**\n     * Manages state on 'next' button click. Used in desktop view. Slides the items and shows the next hidden items.\n     */\n    onNextBtnClick(): void {\n        this.isShowPrevBtn.set(true);\n        this.isShowNextBtn.set(false);\n\n        if (this.isRtl()) {\n            this.showNextSlideRtl();\n        } else {\n            this.showNextSlideLtr();\n        }\n\n        this.refreshDisplay();\n    }\n\n    /**\n     * Postions overlay, depending on parent header position.\n     * This method is called from parent header, which uses the menu for navigation.\n     * @param bottomSpaceY\n     */\n    positionMenuOverlay(bottomSpaceY: number): void {\n        if ((this.isMobileBreakpoint() || this.isTablet()) && bottomSpaceY) {\n            this.overlayStyleTop.set(bottomSpaceY);\n            this.innerStyleTop.set(bottomSpaceY);\n        } else {\n            this.overlayStyleTop.set(null);\n            this.innerStyleTop.set(null);\n        }\n    }\n\n    private observeElementSizeChanges(): void {\n        new ResizeObserver(() => {\n            clearTimeout(this.resizeTimer);\n            this.resizeTimer = setTimeout(() => {\n                // Scroll to top when menu is open during resize (e.g. orientation change)\n                if (this.isHamburgerMenuOpened()) {\n                    this.document.documentElement.scrollTop = 0;\n                    this.document.body.scrollTop = 0;\n                }\n\n                this.totalItemsWidth = 0;\n                this.checkMenuItemsWidth();\n                this.checkMenuOverflow();\n                this.cdr.detectChanges();\n\n                // Re-enable hover after resize completes\n                this.ignoreHover = false;\n            }, this.TIMEOUT_INTERVAL);\n        }).observe(this.innerSection().nativeElement);\n    }\n\n    private slideMenuInitialState(): void {\n        this.offsetLeft = 0;\n        if (this.isRtl()) {\n            this.menuListStyleRight.set('0px');\n            this.menuListStyleLeft.set('auto');\n        } else {\n            this.menuListStyleLeft.set('0px');\n            this.menuListStyleRight.set('auto');\n        }\n\n        this.isShowPrevBtn.set(false);\n        this.isShowNextBtn.set(true);\n    }\n\n    private showNextSlideLtr(): void {\n        const btnOffsetWidth = this.btnNext().el.nativeElement.offsetWidth;\n        this.offsetLeft =\n            this.lastVisibleItem.el.nativeElement.getBoundingClientRect().left -\n            this.itemsList().nativeElement.getBoundingClientRect().left -\n            btnOffsetWidth;\n\n        this.menuListStyleLeft.set(`-${this.offsetLeft}px`);\n        this.menuListStyleRight.set('auto');\n    }\n\n    private showNextSlideRtl(): void {\n        const btnOffsetWidth = this.btnNext().el.nativeElement.offsetWidth;\n        this.offsetLeft =\n            this.itemsList().nativeElement.getBoundingClientRect().right -\n            this.lastVisibleItem.el.nativeElement.getBoundingClientRect().right -\n            btnOffsetWidth;\n\n        this.menuListStyleRight.set(`-${this.offsetLeft}px`);\n        this.menuListStyleLeft.set('auto');\n    }\n\n    private refreshDisplay(): void {\n        this.eclRootMenuItems().forEach((item) => {\n            item.checkMenuItem(this.maxLines(), this.isMobileBreakpoint());\n            item.isVisible.set(!item.isVisible());\n        });\n    }\n\n    private checkMenuOverflow(): void {\n        this.hasOverflow.set(this.totalItemsWidth > this.innerSection().nativeElement.offsetWidth + 16);\n        if (!this.hasOverflow() || this.isMobileBreakpoint() || this.isTablet()) {\n            this.resetOverflowValues();\n            return;\n        }\n\n        this.setClassForPrevNextButtons();\n        this.resetVisibilityIndicator();\n\n        if (this.offsetLeft === 0) {\n            this.manageOverflowEnd();\n        } else {\n            this.manageOverflowBeginning();\n        }\n    }\n\n    /**\n     * Manage items visibility when using overlfow. For both rtl and ltr cases.\n     */\n    private manageOverflowBeginning(): void {\n        if (this.isRtl()) {\n            this.eclRootMenuItems()\n                .filter(\n                    (item) =>\n                        item.el.nativeElement.getBoundingClientRect().right <=\n                        this.innerSection().nativeElement.getBoundingClientRect().right,\n                )\n                .forEach((el) => el.isVisible.set(true));\n        } else {\n            this.eclRootMenuItems()\n                .filter(\n                    (item) =>\n                        item.el.nativeElement.getBoundingClientRect().left >= this.innerSection().nativeElement.getBoundingClientRect().left,\n                )\n                .forEach((el) => el.isVisible.set(true));\n        }\n    }\n\n    /**\n     * Manage items visibility when using overlfow, with the 'next' button. For both rtl and ltr cases.\n     */\n    private manageOverflowEnd(): void {\n        this.isShowNextBtn.set(true);\n        this.menuListStyleLeft.set('0px');\n        this.menuListStyleRight.set('auto');\n        if (this.isRtl()) {\n            for (const item of this.eclRootMenuItems()) {\n                if (item.el.nativeElement.getBoundingClientRect().left < this.itemsList().nativeElement.getBoundingClientRect().left) {\n                    this.lastVisibleItem = item;\n                    break;\n                }\n                item.isVisible.set(true);\n            }\n        } else {\n            for (const item of this.eclRootMenuItems()) {\n                if (item.el.nativeElement.getBoundingClientRect().right > this.itemsList().nativeElement.getBoundingClientRect().right) {\n                    this.lastVisibleItem = item;\n                    break;\n                }\n                item.isVisible.set(true);\n            }\n        }\n    }\n\n    private resetVisibilityIndicator(): void {\n        this.eclRootMenuItems().forEach((item) => item.isVisible.set(false));\n    }\n\n    private resetOverflowValues(): void {\n        this.isShowPrevBtn.set(false);\n        this.isShowNextBtn.set(false);\n        this.hasOverflow.set(false);\n        this.menuListStyleLeft.set('0px');\n        this.offsetLeft = 0;\n        this.totalItemsWidth = 0;\n        this.lastVisibleItem = null;\n    }\n\n    private setClassForPrevNextButtons(): void {\n        this.currentItem = this.eclRootMenuItems().find((item) => item.isCurrent());\n        if (this.currentItem) {\n            if ((this.currentItem as EclMenuItemComponent).isVisible()) {\n                this.isPrevBtnCurrentClass.set(true);\n            } else {\n                this.isPrevBtnCurrentClass.set(false);\n            }\n        }\n    }\n\n    private checkMenuItemsWidth(): void {\n        this.eclRootMenuItems().forEach((item) => {\n            item.checkMenuItem(this.maxLines(), this.isMobileBreakpoint());\n            this.totalItemsWidth += item.el.nativeElement.offsetWidth;\n        });\n    }\n\n    public get isMenuExpandedInMobile(): boolean {\n        return (this.isMobileBreakpoint() || this.isTablet()) && this.isAnyRootMenuItemExpanded();\n    }\n\n    private isAnyRootMenuItemExpanded(): boolean {\n        return this.eclRootMenuItems().some((item) => item.isExpanded());\n    }\n\n    private connectMenuItemEvents(item: EclMenuItemComponent): void {\n        if (this.connectedItems.has(item)) {\n            return;\n        }\n        this.connectedItems.add(item);\n        outputToObservable(item.menuItemSelect).pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onRootMenuItemSelected(evt);\n        });\n        outputToObservable(item.menuItemHover).pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onRootMenuItemHovered(evt);\n        });\n        outputToObservable(item.menuItemHoverOut).pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onRootMenuItemHoveredOut(evt);\n        });\n        outputToObservable(item.menuItemCaret).pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onRootMenuItemCaret(evt);\n        });\n        outputToObservable(item.menuMegaItemSelect).pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onMenuMegaItemSelected(item, evt);\n        });\n        outputToObservable(item.menuItemFocus).pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onRootMenuItemFocused(item);\n        });\n        outputToObservable(item.menuItemKeydown).pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onRootMenuItemKeydown(item, evt);\n        });\n        outputToObservable(item.menuMegaLastItemTab).pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.openCloseButton().onFocus();\n        });\n    }\n\n    private onRootMenuItemFocused(item: EclMenuItem): void {\n        const index = this.findIndexInArray(item);\n        if (!this.isMobileBreakpoint() && !this.isTablet()) {\n            this.closeRootMenu();\n        }\n        if (this.isMovePrevOverflow(index)){\n            this.onPrevBtnClick();\n        } else if (this.isMoveNextOverflow(index)){\n            this.onNextBtnClick();\n        }\n    }\n\n    private onRootMenuItemKeydown(item: EclMenuItemComponent, evt: EclMenuItemKeydownEvent): void {\n        switch (evt.domEvent.key) {\n            case KeyCode.ARROW_DOWN: {\n                this.onRootMenuItemEnter(item);\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                this.onNextMenuItemFocus(item);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                this.onPrevMenuItemFocus(item);\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                this.onPrevMenuItemFocus(item);\n                break;\n            }\n            case KeyCode.ENTER: {\n                this.onRootMenuItemEnter(item);\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                this.onRootMenuItemEscape(item, evt.domEvent);\n                break;\n            }\n            case KeyCode.TAB: {\n                if ((this.isMobileBreakpoint() || this.isTablet()) && this.isLastItem(item)) {\n                    evt.preventDefault();\n                    this.openCloseButton().onFocus();\n                }\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    private isLastItem(item: EclMenuItemComponent): boolean {\n        const items = this.eclRootMenuItems();\n        return items[items.length - 1] === item;\n    }\n\n    private onRootMenuItemEscape(item: EclMenuItem, evt: Event): void {\n        if (item.isHovered()) {\n            this.closeRootMenu();\n        }\n        evt.stopPropagation();\n    }\n\n    private onPrevMenuItemFocus(item: EclMenuItem): void {\n        const index = this.findIndexInArray(item);\n        if (index !== 0) {\n            this.getRootMenuItemsArray()[index - 1].onFocusFromNext();\n        }\n    }\n\n    private onNextMenuItemFocus(item: EclMenuItem): void {\n        const index = this.findIndexInArray(item);\n        if (index !== this.getRootMenuItemsArray().length - 1) {\n            this.getRootMenuItemsArray()[index + 1].onFocusFromPrev();\n        }\n    }\n\n    private findIndexInArray(item: EclMenuItem): number {\n        return this.getRootMenuItemsArray().findIndex(el => item === el);\n    }\n\n    private isMoveNextOverflow(index: number): boolean {\n        return !this.getRootMenuItemsArray()[index].isVisible() && this.isShowNextBtn();\n    }\n\n    private isMovePrevOverflow(index: number): boolean {\n        return !this.getRootMenuItemsArray()[index].isVisible() && this.isShowPrevBtn();\n    }\n\n    private onRootMenuItemSelected(evt: EclMenuItemSelectEvent): void {\n        const requestedRootMenuItem: EclMenuItem = evt.menuItem;\n\n        this.closeRootMenu();\n        this.deselectAllRootMenuItems();\n        this.deselectAllSubmenusItems();\n        this.selectMenuItem(requestedRootMenuItem);\n        this.onCloseHamburgerMenu();\n        if (this.hasOverflow) {\n            this.managePrevNextButtonsClassOnItemSelected();\n        }\n        this.sendMenuItemSelectEvent(evt);\n    }\n\n    private managePrevNextButtonsClassOnItemSelected(): void {\n        if (this.isShowNextBtn()) {\n            this.isPrevBtnCurrentClass.set(true);\n        } else {\n            this.isPrevBtnCurrentClass.set(false);\n        }\n    }\n\n    private onRootMenuItemHovered(evt: EclMenuItemHoverEvent): void {\n        if (this.ignoreHover) return;\n        this.openSubmenu(evt.menuItem);\n    }\n\n    private onRootMenuItemEnter(item: EclMenuItem): void {\n        if (this.isMobileBreakpoint() || this.isTablet()) {\n            this.closeRootMenuButOneItem(item);\n            this.toggleExpandedForMenuItem(item);\n        } else {\n            if (!item.isHovered()) {\n                this.openSubmenu(item);\n            } else {\n                this.closeRootMenu();\n            }\n        }\n    }\n\n    private openSubmenu(item: EclMenuItem): void {\n        if (item.isVisible()) {\n            if (!this.isMobileBreakpoint() && !this.isTablet() && (item as EclMenuItemComponent).submenu()) {\n                this.checkMegaMenu(item as EclMenuItemComponent);\n            }\n            item.isHovered.set(true);\n            this.closeRootMenuButOneItem(item);\n            this.showMenu();\n        }\n    }\n\n    private getRootMenuItemsArray(): readonly EclMenuItemComponent[] {\n        return this.eclRootMenuItems();\n    }\n\n    private checkMegaMenu(menuItem: EclMenuItemComponent): void {\n        if (menuItem.isFull()) {\n            if (this.isRtl()) {\n                menuItem.submenu().offsetRight.set(this.offsetLeft);\n            } else {\n                menuItem.submenu().offsetLeft.set(this.offsetLeft);\n            }\n            return;\n        }\n        this.checkEnoughSpaceForMegaMenu(menuItem);\n    }\n\n    private checkEnoughSpaceForMegaMenu(menuItem: EclMenuItemComponent): void {\n        const megaBounding = menuItem.submenu().el.nativeElement.getBoundingClientRect();\n        const containerBounding = this.innerSection().nativeElement.getBoundingClientRect();\n        const menuItemBounding = menuItem.el.nativeElement.getBoundingClientRect();\n\n        const megaWidth = megaBounding.width;\n        const containerWidth = containerBounding.width;\n        const menuItemPosition = menuItemBounding.left - containerBounding.left;\n\n        if (menuItemPosition + megaWidth > containerWidth) {\n            menuItem.submenu().isRtlDisplay.set(true);\n        } else {\n            menuItem.submenu().isRtlDisplay.set(false);\n        }\n    }\n\n    private onRootMenuItemHoveredOut(evt: EclMenuItemHoverEvent): void {\n        if (this.ignoreHover) return;\n        if (!this.isMobileBreakpoint()) {\n            this.closeRootMenu();\n        }\n    }\n\n    private onRootMenuItemCaret(evt: EclMenuItemCaretEvent): void {\n        const requestedRootMenuItem: EclMenuItem = evt.menuItem;\n\n        // Suppress hover events briefly after touch/caret interaction (prevents double-trigger on hybrid devices)\n        this.ignoreHover = true;\n\n        this.closeRootMenuButOneItem(requestedRootMenuItem);\n        this.toggleExpandedForMenuItem(requestedRootMenuItem);\n    }\n\n    private onMenuMegaItemSelected(rootMenuItem: EclMenuItem, evt: EclMenuItemSelectEvent): void {\n        const requestedSubmenuItem = evt.menuItem;\n\n        this.closeRootMenu();\n        this.deselectAllRootMenuItems();\n        this.deselectAllSubmenusItems();\n        this.selectMenuItem(rootMenuItem);\n        this.selectMenuItem(requestedSubmenuItem);\n        this.onCloseHamburgerMenu();\n        if (this.hasOverflow()) {\n            this.managePrevNextButtonsClassOnItemSelected();\n        }\n        this.sendMenuItemSelectEvent(evt);\n\n        this.hideMenu();\n    }\n\n    private deselectAllRootMenuItems(): void {\n        this.deselectMenuItems(this.eclRootMenuItems());\n    }\n\n    private deselectAllSubmenusItems(): void {\n        this.eclRootMenuItems().forEach((rootItem) => {\n            this.deselectMenuItems(rootItem.children);\n        });\n    }\n\n    private deselectMenuItems(items: ReadonlyArray<EclMenuItem>): void {\n        items.forEach((it) => {\n            it.isCurrent.set(false);\n        });\n    }\n\n    private selectMenuItem(item: EclMenuItem): void {\n        item.isCurrent.set(true);\n        this.currentItem = item;\n    }\n\n    private hideMenu(): void {\n        this.isMenuHidden.set(true);\n    }\n\n    private showMenu(): void {\n        this.isMenuHidden.set(false);\n    }\n\n    private closeRootMenu(): void {\n        this.eclRootMenuItems().forEach((it) => {\n            it.isExpanded.set(false);\n            it.isHovered.set(false);\n        });\n    }\n\n    private closeRootMenuButOneItem(item: EclMenuItem): void {\n        this.eclRootMenuItems()\n            .filter((it) => it !== item)\n            .forEach((it) => {\n                it.isExpanded.set(false);\n                it.isHovered.set(false);\n            });\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            if (rtlState !== undefined && this.isRtl() !== rtlState) {\n                this.isRtl.set(rtlState);\n                if (this.hasOverflow()) {\n                    this.slideMenuInitialState();\n                    setTimeout(() => this.checkMenuOverflow());\n                }\n            }\n        });\n    }\n\n    private toggleExpandedForMenuItem(item: EclMenuItem): void {\n        item.isExpanded.set(!item.isExpanded());\n    }\n\n    private onOpenHamburgerMenu(): void {\n        this.disableScroll();\n        this.isHamburgerMenuOpened.set(true);\n        this.openHamburgerMenu.emit();\n        this.focusOnFirstItem();\n    }\n\n    private onCloseHamburgerMenu(): void {\n        this.isHamburgerMenuOpened.set(false);\n        this.enableScroll();\n        this.closeHamburgerMenu.emit();\n    }\n\n    private disableScroll(): void {\n        this.document.body.classList.add('no-scroll');\n    }\n\n    private enableScroll(): void {\n        this.document.body.classList.remove('no-scroll');\n    }\n\n    private focusOnFirstItem(): void {\n        this.eclRootMenuItems()[0]?.onFocusFromPrev();\n    }\n\n    private sendMenuItemSelectEvent(evt: EclMenuItemSelectEvent): void {\n        this.menuItemSelect.emit(new EclMenuItemSelectEvent(evt.menuItem, evt.domEvent));\n    }\n\n    private observeSwipeGestures(): void {\n        // load hammerjs only on browser\n        if(isPlatformBrowser(this.platformId)) {\n            import('hammerjs').then((Hammer: Hammer) => {\n                this.hammertime = new Hammer.default(this.document, { inputClass: Hammer.TouchInput });\n                this.hammertime.on('swipeleft', this.onSwipeLeft.bind(this));\n                this.hammertime.on('swiperight', this.onSwipeRight.bind(this));\n            }).catch((error) => {\n                console.error('Error loading HammerJS', error);\n            });\n        }\n    }\n\n    private subscribeToAppShellBreakpoints(): void {\n        this.euiAppShellService.breakpoints$\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((bkps: any) => {\n                if (!bkps) return;\n\n                this.breakpointsValue = bkps;\n                this.isMobileBreakpoint.set(!!bkps.isMobile);\n                this.isTablet.set(!!bkps.isTablet || !!bkps.isLtLargeTablet);\n                this.cdr.detectChanges();\n\n                if (!this.isMobileBreakpoint() && !this.isTablet()) {\n                    this.overlayStyleTop.set(null);\n                    this.innerStyleTop.set(null);\n\n                    // Ensure hamburger menu is closed when switching to desktop\n                    if (this.isHamburgerMenuOpened()) {\n                        this.onCloseHamburgerMenu();\n                        this.closeRootMenu();\n                    }\n                }\n            });\n    }\n}\n",
+            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { AfterContentInit, ChangeDetectorRef, Component, DOCUMENT, ElementRef, OnDestroy, OnInit, PLATFORM_ID, afterNextRender, computed, effect, inject, numberAttribute, output, input, signal, contentChildren, viewChild } from '@angular/core';\nimport { outputToObservable } from '@angular/core/rxjs-interop';\nimport { EuiAppShellService } from '@eui/core';\nimport { EUI_ECL_BUTTON, EclButtonComponent } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective, EclRtlService, KeyCode } from '@eui/ecl/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport type Hammer from 'hammerjs';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { EclMenuItemCaretEvent, EclMenuItemHoverEvent, EclMenuItemKeydownEvent, EclMenuItemSelectEvent } from '../events';\nimport { EclMenuItem } from '../models/ecl-menu-item.model';\nimport { EclMenuItemComponent } from './ecl-menu-item.component';\n\n/**\n * The horizontal menu is used as a primary navigation and it can display up to 2 levels.\n * It directs users to the pages where they need to visit.\n */\n@Component({\n    selector: 'ecl-menu',\n    templateUrl: './ecl-menu.component.html',\n    imports: [TranslatePipe, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON],\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n    host: {\n        role: 'navigation',\n        '[class]': 'cssClasses()',\n        '[class.ecl-menu--forced-mobile]': 'isTablet()',\n        '[class.ecl-menu--forced-close]': 'isMenuHidden()',\n        '[attr.data-expanded]': 'isHamburgerMenuOpened() ? \"\" : null',\n        '(document:click)': 'onDocumentClick($event)',\n        '(keydown.escape)': 'onEscapePress($event)',\n    },\n})\nexport class EclMenuComponent extends ECLBaseDirective implements OnInit, AfterContentInit, OnDestroy {\n\n    /**\n     * Adds some additional styling for the menu items' labels.\n     *  Depending on that value, the labels can drop on 2-3 lines, if they are longer.\n     */\n    readonly maxLines = input(0, { transform: numberAttribute });\n\n    readonly menuItemSelect = output<EclMenuItemSelectEvent>();\n    readonly openHamburgerMenu = output();\n    readonly closeHamburgerMenu = output();\n\n    readonly isHamburgerMenuOpened = signal(false);\n    readonly isMobileBreakpoint = signal(false);\n    readonly isTablet = signal(false);\n    readonly isMenuHidden = signal(false);\n    readonly hasOverflow = signal(false);\n    /** Controls the delayed application of CSS transition class (prevents Chrome flash on load) */\n    readonly hasTransition = signal(false);\n    /**\n     * Show/hide the specific class for the 'previous' and 'next' buttons.\n     */\n    readonly isPrevBtnCurrentClass = signal(false);\n    readonly menuListStyleRight = signal('auto');\n    readonly menuListStyleLeft = signal('auto');\n    readonly overlayStyleTop = signal<number | null>(null);\n    readonly innerStyleTop = signal<number | null>(null);\n\n    /**\n     * Represents the current viewport breakpoint states.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    breakpointsValue: any = {\n        isMobile: false,\n        isTablet: false,\n        isLtDesktop: false,\n        isDesktop: false,\n        isXL: false,\n        isXXL: false,\n    };\n\n    /**\n     * The main items of the menu.\n     */\n    protected readonly eclRootMenuItems = contentChildren(EclMenuItemComponent);\n    /**\n     * The element, that wraps the main menu items and the back and forth button.\n     */\n    protected readonly innerSection = viewChild<ElementRef>('innerSection');\n    /**\n     * The element that wraps the main menu items.\n     */\n    protected readonly itemsList = viewChild<ElementRef>('itemsList');\n    /**\n     * When there is an overflow of the menu, the 'previous' button to navigate back to first hidden items.\n     */\n    protected readonly btnPrevious = viewChild<EclButtonComponent>('btnPrevious');\n    /**\n     * When there is an overflow of the menu, the 'next' button to navigate to next hidden items.\n     */\n    protected readonly btnNext = viewChild<EclButtonComponent>('btnNext');\n    /**\n     * The button to open/close menu in mobile mode.\n     */\n    protected readonly openCloseButton = viewChild<EclButtonComponent>('openCloseButton');\n\n    protected readonly isShowPrevBtn = signal(false);\n    protected readonly isShowNextBtn = signal(false);\n\n    protected readonly cssClasses = computed<string>(() =>\n        [\n            super.getCssClasses('ecl-menu'),\n            this.hasTransition() ? 'ecl-menu--transition' : '',\n            this.isRtl() ? 'ecl-menu--rtl' : '',\n        ].join(' '));\n\n    /** Controls whether hover events should be processed (suppressed briefly after touch interactions) */\n    private ignoreHover = false;\n    private readonly isRtl = signal(false);\n    private currentItem: EclMenuItem;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private connectedItems = new WeakSet<EclMenuItemComponent>();\n    private totalItemsWidth = 0;\n    private offsetLeft = 0;\n    private lastVisibleItem: EclMenuItemComponent;\n    private hammertime: Hammer;\n    private resizeTimer: ReturnType<typeof setTimeout>;\n    private TIMEOUT_INTERVAL = 150;\n    private el = inject(ElementRef);\n    private eclRtlService = inject(EclRtlService);\n    private euiAppShellService = inject(EuiAppShellService);\n    private platformId = inject(PLATFORM_ID);\n    private document = inject<Document>(DOCUMENT);\n    private cdr = inject(ChangeDetectorRef);\n\n    constructor() {\n        super();\n        // Subscribe to each projected root menu item's events as the set of items changes.\n        effect(() => {\n            this.eclRootMenuItems().forEach((rootItem) => this.connectMenuItemEvents(rootItem));\n        });\n        afterNextRender(() => {\n            clearTimeout(this.resizeTimer);\n            this.observeElementSizeChanges();\n            this.resizeTimer = setTimeout(() => {\n                this.checkMenuItemsWidth();\n                this.checkMenuOverflow();\n            }, this.TIMEOUT_INTERVAL);\n            this.subscribeToAppShellBreakpoints();\n\n            // Delay transition class to prevent CSS transitions from playing on page load (Chrome fix)\n            setTimeout(() => {\n                this.hasTransition.set(true);\n            }, 500);\n        });\n    }\n\n    /**\n     * On outside click - close/hide any open menus.\n     * @param event\n     */\n    onDocumentClick(event: MouseEvent): void {\n        if (!this.isHamburgerMenuOpened()) return;\n\n        const target = event.target as HTMLElement;\n        if (!this.el.nativeElement.contains(target) ||\n            target.classList.contains('ecl-menu__overlay')) {\n            this.closeRootMenu();\n            this.onCloseHamburgerMenu();\n        }\n    }\n\n    /**\n     * On 'esc' key clicked - close/hide any open menus.\n     * @param event\n     */\n    onEscapePress(event: Event): void {\n        if (!this.isHamburgerMenuOpened()) return;\n\n        this.closeRootMenu();\n        this.onCloseHamburgerMenu();\n    }\n\n    ngOnInit(): void {\n        if (isPlatformBrowser(this.platformId)) {\n            this.handleRtlChangeState();\n            this.observeSwipeGestures();\n        }\n    }\n\n    ngAfterContentInit(): void {\n        // Event wiring for projected items is handled by an effect set up in the constructor.\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n\n        this.hammertime?.off('swipeleft');\n        this.hammertime?.off('swiperight');\n    }\n\n    /**\n     * Swipe left gesture handling\n     */\n    onSwipeLeft(): void {\n        if (this.isMobileBreakpoint() || this.isTablet()) {\n            this.onOpenHamburgerMenu();\n        }\n    }\n\n    /**\n     * Swipe right gesture handling\n     */\n    onSwipeRight(): void {\n        if (this.isMobileBreakpoint() || this.isTablet()) {\n            this.onCloseHamburgerMenu();\n        }\n    }\n\n    /**\n     * Manages state on open/close button click, used in mobile view.\n     */\n    onMenuOpenCloseClick(evt: MouseEvent): void {\n        if (this.isHamburgerMenuOpened()) {\n            this.onCloseHamburgerMenu();\n        } else {\n            this.onOpenHamburgerMenu();\n        }\n        evt.preventDefault();\n    }\n\n    /**\n     * Manages state on close button click, used in mobile view, in EU theme.\n     */\n    onMenuCloseClick(evt: MouseEvent): void {\n        this.onCloseHamburgerMenu();\n        this.closeRootMenu();\n        evt.preventDefault();\n    }\n\n    /**\n     * Manages state on back button click, used in mobile view.\n     */\n    onMenuBackClick(evt: MouseEvent): void {\n        this.closeRootMenu();\n        evt.preventDefault();\n    }\n\n    /**\n     * Manages state on 'previous' button click. Used in desktop view. Slides the items and shows the previous hidden items.\n     */\n    onPrevBtnClick(): void {\n        this.slideMenuInitialState();\n        this.refreshDisplay();\n    }\n\n    /**\n     * Manages state on 'next' button click. Used in desktop view. Slides the items and shows the next hidden items.\n     */\n    onNextBtnClick(): void {\n        this.isShowPrevBtn.set(true);\n        this.isShowNextBtn.set(false);\n\n        if (this.isRtl()) {\n            this.showNextSlideRtl();\n        } else {\n            this.showNextSlideLtr();\n        }\n\n        this.refreshDisplay();\n    }\n\n    /**\n     * Postions overlay, depending on parent header position.\n     * This method is called from parent header, which uses the menu for navigation.\n     * @param bottomSpaceY\n     */\n    positionMenuOverlay(bottomSpaceY: number): void {\n        if ((this.isMobileBreakpoint() || this.isTablet()) && bottomSpaceY) {\n            this.overlayStyleTop.set(bottomSpaceY);\n            this.innerStyleTop.set(bottomSpaceY);\n        } else {\n            this.overlayStyleTop.set(null);\n            this.innerStyleTop.set(null);\n        }\n    }\n\n    private observeElementSizeChanges(): void {\n        new ResizeObserver(() => {\n            clearTimeout(this.resizeTimer);\n            this.resizeTimer = setTimeout(() => {\n                // Scroll to top when menu is open during resize (e.g. orientation change)\n                if (this.isHamburgerMenuOpened()) {\n                    this.document.documentElement.scrollTop = 0;\n                    this.document.body.scrollTop = 0;\n                }\n\n                this.totalItemsWidth = 0;\n                this.checkMenuItemsWidth();\n                this.checkMenuOverflow();\n                this.cdr.detectChanges();\n\n                // Re-enable hover after resize completes\n                this.ignoreHover = false;\n            }, this.TIMEOUT_INTERVAL);\n        }).observe(this.innerSection().nativeElement);\n    }\n\n    private slideMenuInitialState(): void {\n        this.offsetLeft = 0;\n        if (this.isRtl()) {\n            this.menuListStyleRight.set('0px');\n            this.menuListStyleLeft.set('auto');\n        } else {\n            this.menuListStyleLeft.set('0px');\n            this.menuListStyleRight.set('auto');\n        }\n\n        this.isShowPrevBtn.set(false);\n        this.isShowNextBtn.set(true);\n    }\n\n    private showNextSlideLtr(): void {\n        const btnOffsetWidth = this.btnNext().el.nativeElement.offsetWidth;\n        this.offsetLeft =\n            this.lastVisibleItem.el.nativeElement.getBoundingClientRect().left -\n            this.itemsList().nativeElement.getBoundingClientRect().left -\n            btnOffsetWidth;\n\n        this.menuListStyleLeft.set(`-${this.offsetLeft}px`);\n        this.menuListStyleRight.set('auto');\n    }\n\n    private showNextSlideRtl(): void {\n        const btnOffsetWidth = this.btnNext().el.nativeElement.offsetWidth;\n        this.offsetLeft =\n            this.itemsList().nativeElement.getBoundingClientRect().right -\n            this.lastVisibleItem.el.nativeElement.getBoundingClientRect().right -\n            btnOffsetWidth;\n\n        this.menuListStyleRight.set(`-${this.offsetLeft}px`);\n        this.menuListStyleLeft.set('auto');\n    }\n\n    private refreshDisplay(): void {\n        this.eclRootMenuItems().forEach((item) => {\n            item.checkMenuItem(this.maxLines(), this.isMobileBreakpoint());\n            item.isVisible.set(!item.isVisible());\n        });\n    }\n\n    private checkMenuOverflow(): void {\n        this.hasOverflow.set(this.totalItemsWidth > this.innerSection().nativeElement.offsetWidth + 16);\n        if (!this.hasOverflow() || this.isMobileBreakpoint() || this.isTablet()) {\n            this.resetOverflowValues();\n            return;\n        }\n\n        this.setClassForPrevNextButtons();\n        this.resetVisibilityIndicator();\n\n        if (this.offsetLeft === 0) {\n            this.manageOverflowEnd();\n        } else {\n            this.manageOverflowBeginning();\n        }\n    }\n\n    /**\n     * Manage items visibility when using overlfow. For both rtl and ltr cases.\n     */\n    private manageOverflowBeginning(): void {\n        if (this.isRtl()) {\n            this.eclRootMenuItems()\n                .filter(\n                    (item) =>\n                        item.el.nativeElement.getBoundingClientRect().right <=\n                        this.innerSection().nativeElement.getBoundingClientRect().right,\n                )\n                .forEach((el) => el.isVisible.set(true));\n        } else {\n            this.eclRootMenuItems()\n                .filter(\n                    (item) =>\n                        item.el.nativeElement.getBoundingClientRect().left >= this.innerSection().nativeElement.getBoundingClientRect().left,\n                )\n                .forEach((el) => el.isVisible.set(true));\n        }\n    }\n\n    /**\n     * Manage items visibility when using overlfow, with the 'next' button. For both rtl and ltr cases.\n     */\n    private manageOverflowEnd(): void {\n        this.isShowNextBtn.set(true);\n        this.menuListStyleLeft.set('0px');\n        this.menuListStyleRight.set('auto');\n        if (this.isRtl()) {\n            for (const item of this.eclRootMenuItems()) {\n                if (item.el.nativeElement.getBoundingClientRect().left < this.itemsList().nativeElement.getBoundingClientRect().left) {\n                    this.lastVisibleItem = item;\n                    break;\n                }\n                item.isVisible.set(true);\n            }\n        } else {\n            for (const item of this.eclRootMenuItems()) {\n                if (item.el.nativeElement.getBoundingClientRect().right > this.itemsList().nativeElement.getBoundingClientRect().right) {\n                    this.lastVisibleItem = item;\n                    break;\n                }\n                item.isVisible.set(true);\n            }\n        }\n    }\n\n    private resetVisibilityIndicator(): void {\n        this.eclRootMenuItems().forEach((item) => item.isVisible.set(false));\n    }\n\n    private resetOverflowValues(): void {\n        this.isShowPrevBtn.set(false);\n        this.isShowNextBtn.set(false);\n        this.hasOverflow.set(false);\n        this.menuListStyleLeft.set('0px');\n        this.offsetLeft = 0;\n        this.totalItemsWidth = 0;\n        this.lastVisibleItem = null;\n    }\n\n    private setClassForPrevNextButtons(): void {\n        this.currentItem = this.eclRootMenuItems().find((item) => item.isCurrent());\n        if (this.currentItem) {\n            if ((this.currentItem as EclMenuItemComponent).isVisible()) {\n                this.isPrevBtnCurrentClass.set(true);\n            } else {\n                this.isPrevBtnCurrentClass.set(false);\n            }\n        }\n    }\n\n    private checkMenuItemsWidth(): void {\n        this.eclRootMenuItems().forEach((item) => {\n            item.checkMenuItem(this.maxLines(), this.isMobileBreakpoint());\n            this.totalItemsWidth += item.el.nativeElement.offsetWidth;\n        });\n    }\n\n    public get isMenuExpandedInMobile(): boolean {\n        return (this.isMobileBreakpoint() || this.isTablet()) && this.isAnyRootMenuItemExpanded();\n    }\n\n    private isAnyRootMenuItemExpanded(): boolean {\n        return this.eclRootMenuItems().some((item) => item.isExpanded());\n    }\n\n    private connectMenuItemEvents(item: EclMenuItemComponent): void {\n        if (this.connectedItems.has(item)) {\n            return;\n        }\n        this.connectedItems.add(item);\n        outputToObservable(item.menuItemSelect).pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onRootMenuItemSelected(evt);\n        });\n        outputToObservable(item.menuItemHover).pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onRootMenuItemHovered(evt);\n        });\n        outputToObservable(item.menuItemHoverOut).pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onRootMenuItemHoveredOut(evt);\n        });\n        outputToObservable(item.menuItemCaret).pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onRootMenuItemCaret(evt);\n        });\n        outputToObservable(item.menuMegaItemSelect).pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onMenuMegaItemSelected(item, evt);\n        });\n        outputToObservable(item.menuItemFocus).pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onRootMenuItemFocused(item);\n        });\n        outputToObservable(item.menuItemKeydown).pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onRootMenuItemKeydown(item, evt);\n        });\n        outputToObservable(item.menuMegaLastItemTab).pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.openCloseButton().onFocus();\n        });\n    }\n\n    private onRootMenuItemFocused(item: EclMenuItem): void {\n        const index = this.findIndexInArray(item);\n        if (!this.isMobileBreakpoint() && !this.isTablet()) {\n            this.closeRootMenu();\n        }\n        if (this.isMovePrevOverflow(index)){\n            this.onPrevBtnClick();\n        } else if (this.isMoveNextOverflow(index)){\n            this.onNextBtnClick();\n        }\n    }\n\n    private onRootMenuItemKeydown(item: EclMenuItemComponent, evt: EclMenuItemKeydownEvent): void {\n        switch (evt.domEvent.key) {\n            // At the first-level row, arrows navigate through the items (ECL parity):\n            // ArrowRight/ArrowDown move forward, ArrowLeft/ArrowUp move backward.\n            // Opening a submenu via ArrowDown is handled on the caret button itself\n            // (onButtonKeydown), not here.\n            case KeyCode.ARROW_RIGHT:\n            case KeyCode.ARROW_DOWN: {\n                this.onNextMenuItemFocus(item);\n                break;\n            }\n            case KeyCode.ARROW_UP:\n            case KeyCode.ARROW_LEFT: {\n                this.onPrevMenuItemFocus(item);\n                break;\n            }\n            case KeyCode.SPACE:\n            case KeyCode.ENTER: {\n                this.onRootMenuItemEnter(item);\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                this.onRootMenuItemEscape(item, evt.domEvent);\n                break;\n            }\n            case KeyCode.TAB: {\n                if ((this.isMobileBreakpoint() || this.isTablet()) && this.isLastItem(item)) {\n                    evt.preventDefault();\n                    this.openCloseButton().onFocus();\n                }\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    private isLastItem(item: EclMenuItemComponent): boolean {\n        const items = this.eclRootMenuItems();\n        return items[items.length - 1] === item;\n    }\n\n    private onRootMenuItemEscape(item: EclMenuItem, evt: Event): void {\n        if (item.isHovered()) {\n            this.closeRootMenu();\n        }\n        evt.stopPropagation();\n    }\n\n    private onPrevMenuItemFocus(item: EclMenuItem): void {\n        const index = this.findIndexInArray(item);\n        if (index !== 0) {\n            this.getRootMenuItemsArray()[index - 1].onFocusFromNext();\n        }\n    }\n\n    private onNextMenuItemFocus(item: EclMenuItem): void {\n        const index = this.findIndexInArray(item);\n        if (index !== this.getRootMenuItemsArray().length - 1) {\n            this.getRootMenuItemsArray()[index + 1].onFocusFromPrev();\n        }\n    }\n\n    private findIndexInArray(item: EclMenuItem): number {\n        return this.getRootMenuItemsArray().findIndex(el => item === el);\n    }\n\n    private isMoveNextOverflow(index: number): boolean {\n        return !this.getRootMenuItemsArray()[index].isVisible() && this.isShowNextBtn();\n    }\n\n    private isMovePrevOverflow(index: number): boolean {\n        return !this.getRootMenuItemsArray()[index].isVisible() && this.isShowPrevBtn();\n    }\n\n    private onRootMenuItemSelected(evt: EclMenuItemSelectEvent): void {\n        const requestedRootMenuItem: EclMenuItem = evt.menuItem;\n\n        this.closeRootMenu();\n        this.deselectAllRootMenuItems();\n        this.deselectAllSubmenusItems();\n        this.selectMenuItem(requestedRootMenuItem);\n        this.onCloseHamburgerMenu();\n        if (this.hasOverflow()) {\n            this.managePrevNextButtonsClassOnItemSelected();\n        }\n        this.sendMenuItemSelectEvent(evt);\n    }\n\n    private managePrevNextButtonsClassOnItemSelected(): void {\n        if (this.isShowNextBtn()) {\n            this.isPrevBtnCurrentClass.set(true);\n        } else {\n            this.isPrevBtnCurrentClass.set(false);\n        }\n    }\n\n    private onRootMenuItemHovered(evt: EclMenuItemHoverEvent): void {\n        if (this.ignoreHover) return;\n        this.openSubmenu(evt.menuItem);\n    }\n\n    private onRootMenuItemEnter(item: EclMenuItem): void {\n        if (this.isMobileBreakpoint() || this.isTablet()) {\n            this.closeRootMenuButOneItem(item);\n            this.toggleExpandedForMenuItem(item);\n        } else {\n            if (!item.isHovered()) {\n                this.openSubmenu(item);\n            } else {\n                this.closeRootMenu();\n            }\n        }\n    }\n\n    private openSubmenu(item: EclMenuItem): void {\n        if (item.isVisible()) {\n            if (!this.isMobileBreakpoint() && !this.isTablet() && (item as EclMenuItemComponent).submenu()) {\n                this.checkMegaMenu(item as EclMenuItemComponent);\n            }\n            item.isHovered.set(true);\n            this.closeRootMenuButOneItem(item);\n            this.showMenu();\n        }\n    }\n\n    private getRootMenuItemsArray(): readonly EclMenuItemComponent[] {\n        return this.eclRootMenuItems();\n    }\n\n    private checkMegaMenu(menuItem: EclMenuItemComponent): void {\n        if (menuItem.isFull()) {\n            if (this.isRtl()) {\n                menuItem.submenu().offsetRight.set(this.offsetLeft);\n            } else {\n                menuItem.submenu().offsetLeft.set(this.offsetLeft);\n            }\n            return;\n        }\n        this.checkEnoughSpaceForMegaMenu(menuItem);\n    }\n\n    private checkEnoughSpaceForMegaMenu(menuItem: EclMenuItemComponent): void {\n        const megaBounding = menuItem.submenu().el.nativeElement.getBoundingClientRect();\n        const containerBounding = this.innerSection().nativeElement.getBoundingClientRect();\n        const menuItemBounding = menuItem.el.nativeElement.getBoundingClientRect();\n\n        const megaWidth = megaBounding.width;\n        const containerWidth = containerBounding.width;\n        const menuItemPosition = menuItemBounding.left - containerBounding.left;\n\n        if (menuItemPosition + megaWidth > containerWidth) {\n            menuItem.submenu().isRtlDisplay.set(true);\n        } else {\n            menuItem.submenu().isRtlDisplay.set(false);\n        }\n    }\n\n    private onRootMenuItemHoveredOut(evt: EclMenuItemHoverEvent): void {\n        if (this.ignoreHover) return;\n        if (!this.isMobileBreakpoint()) {\n            this.closeRootMenu();\n        }\n    }\n\n    private onRootMenuItemCaret(evt: EclMenuItemCaretEvent): void {\n        const requestedRootMenuItem: EclMenuItem = evt.menuItem;\n        // Desktop: the caret click is a click-to-open/close affordance (ECL parity with\n        // handleClickOnCaret). Toggle the submenu the same way Enter/Space does on desktop,\n        // without touching the mobile accordion state or suppressing hover.\n        if (!this.isMobileBreakpoint() && !this.isTablet()) {\n            if (!requestedRootMenuItem.isHovered()) {\n                this.openSubmenu(requestedRootMenuItem);\n            } else {\n                this.closeRootMenu();\n            }\n            return;\n        }\n\n        // Mobile/tablet: suppress hover events briefly after touch/caret interaction\n        // (prevents double-trigger on hybrid devices), then toggle the accordion.\n        this.ignoreHover = true;\n\n        this.closeRootMenuButOneItem(requestedRootMenuItem);\n        this.toggleExpandedForMenuItem(requestedRootMenuItem);\n    }\n\n    private onMenuMegaItemSelected(rootMenuItem: EclMenuItem, evt: EclMenuItemSelectEvent): void {\n        const requestedSubmenuItem = evt.menuItem;\n\n        this.closeRootMenu();\n        this.deselectAllRootMenuItems();\n        this.deselectAllSubmenusItems();\n        this.selectMenuItem(rootMenuItem);\n        this.selectMenuItem(requestedSubmenuItem);\n        this.onCloseHamburgerMenu();\n        if (this.hasOverflow()) {\n            this.managePrevNextButtonsClassOnItemSelected();\n        }\n        this.sendMenuItemSelectEvent(evt);\n\n        this.hideMenu();\n    }\n\n    private deselectAllRootMenuItems(): void {\n        this.deselectMenuItems(this.eclRootMenuItems());\n    }\n\n    private deselectAllSubmenusItems(): void {\n        this.eclRootMenuItems().forEach((rootItem) => {\n            this.deselectMenuItems(rootItem.children());\n        });\n    }\n\n    private deselectMenuItems(items: ReadonlyArray<EclMenuItem>): void {\n        items.forEach((it) => {\n            it.isCurrent.set(false);\n        });\n    }\n\n    private selectMenuItem(item: EclMenuItem): void {\n        item.isCurrent.set(true);\n        this.currentItem = item;\n    }\n\n    private hideMenu(): void {\n        this.isMenuHidden.set(true);\n    }\n\n    private showMenu(): void {\n        this.isMenuHidden.set(false);\n    }\n\n    private closeRootMenu(): void {\n        this.eclRootMenuItems().forEach((it) => {\n            it.isExpanded.set(false);\n            it.isHovered.set(false);\n        });\n    }\n\n    private closeRootMenuButOneItem(item: EclMenuItem): void {\n        this.eclRootMenuItems()\n            .filter((it) => it !== item)\n            .forEach((it) => {\n                it.isExpanded.set(false);\n                it.isHovered.set(false);\n            });\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            if (rtlState !== undefined && this.isRtl() !== rtlState) {\n                this.isRtl.set(rtlState);\n                if (this.hasOverflow()) {\n                    this.slideMenuInitialState();\n                    setTimeout(() => this.checkMenuOverflow());\n                }\n            }\n        });\n    }\n\n    private toggleExpandedForMenuItem(item: EclMenuItem): void {\n        item.isExpanded.set(!item.isExpanded());\n    }\n\n    private onOpenHamburgerMenu(): void {\n        this.disableScroll();\n        this.isHamburgerMenuOpened.set(true);\n        this.openHamburgerMenu.emit();\n        this.focusOnFirstItem();\n    }\n\n    private onCloseHamburgerMenu(): void {\n        this.isHamburgerMenuOpened.set(false);\n        this.enableScroll();\n        this.closeHamburgerMenu.emit();\n    }\n\n    private disableScroll(): void {\n        this.document.body.classList.add('no-scroll');\n    }\n\n    private enableScroll(): void {\n        this.document.body.classList.remove('no-scroll');\n    }\n\n    private focusOnFirstItem(): void {\n        this.eclRootMenuItems()[0]?.onFocusFromPrev();\n    }\n\n    private sendMenuItemSelectEvent(evt: EclMenuItemSelectEvent): void {\n        this.menuItemSelect.emit(new EclMenuItemSelectEvent(evt.menuItem, evt.domEvent));\n    }\n\n    private observeSwipeGestures(): void {\n        // load hammerjs only on browser\n        if(isPlatformBrowser(this.platformId)) {\n            import('hammerjs').then((Hammer: Hammer) => {\n                this.hammertime = new Hammer.default(this.document, { inputClass: Hammer.TouchInput });\n                this.hammertime.on('swipeleft', this.onSwipeLeft.bind(this));\n                this.hammertime.on('swiperight', this.onSwipeRight.bind(this));\n            }).catch((error) => {\n                console.error('Error loading HammerJS', error);\n            });\n        }\n    }\n\n    private subscribeToAppShellBreakpoints(): void {\n        this.euiAppShellService.breakpoints$\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((bkps: any) => {\n                if (!bkps) return;\n\n                this.breakpointsValue = bkps;\n                this.isMobileBreakpoint.set(!!bkps.isMobile);\n                this.isTablet.set(!!bkps.isTablet || !!bkps.isLtLargeTablet);\n                this.cdr.detectChanges();\n\n                if (!this.isMobileBreakpoint() && !this.isTablet()) {\n                    this.overlayStyleTop.set(null);\n                    this.innerStyleTop.set(null);\n\n                    // Ensure hamburger menu is closed when switching to desktop\n                    if (this.isHamburgerMenuOpened()) {\n                        this.onCloseHamburgerMenu();\n                        this.closeRootMenu();\n                    }\n                }\n            });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n            :host {\n                display: block;\n            }\n        \n",
@@ -67108,7 +67108,7 @@
         },
         {
             "name": "EclMenuItemComponent",
-            "id": "component-EclMenuItemComponent-2dddaee94d6d368f9ba8cee26c98de87fe654523bc53fdab11a0003fc6f6610dab0d34b6e3cfdf21ba1dc77ff570d9caf5df17d3b94bfea184e4a8cd8c6b596c",
+            "id": "component-EclMenuItemComponent-bf7fb5cc215964bf24b0fc0108e132d0b2cfe8ae25ae194dca2be309928c2ab302b876fe5ee2db45b6bc482dd00bf5131f8bef1e5af8c1a8e727daf51df1743a",
             "file": "packages/ecl/components/ecl-menu/ecl-menu/ecl-menu-item.component.ts",
             "encapsulation": [
                 "ViewEncapsulation.None"
@@ -67508,6 +67508,38 @@
                 }
             ],
             "propertiesClass": [
+                {
+                    "name": "ariaCurrent",
+                    "coverageIgnore": false,
+                    "defaultValue": "computed<string | null>(() => this.isCurrent() && !this.hasCurrentChild() ? 'page' : null)",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>&#39;aria-current&#39; is set to &#39;page&#39; only when this item itself is the current page, and not when it is\nmarked current merely because one of its children is the active item (in that case the child link\ncarries &#39;aria-current=&quot;page&quot;&#39;). Derived from live state so it stays correct whether &#39;isCurrent&#39; is set\nat render time or updated on selection.</p>\n",
+                    "line": 165,
+                    "rawdescription": "\n\n'aria-current' is set to 'page' only when this item itself is the current page, and not when it is\nmarked current merely because one of its children is the active item (in that case the child link\ncarries 'aria-current=\"page\"'). Derived from live state so it stays correct whether 'isCurrent' is set\nat render time or updated on selection.\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
+                {
+                    "name": "children",
+                    "coverageIgnore": false,
+                    "defaultValue": "computed<EclMenuItem[]>(() => this.hasChildren() ? this.submenu().eclMenuMegaItems() : [])",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 174,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
                 {
                     "name": "cssClasses",
                     "coverageIgnore": false,
@@ -67538,6 +67570,54 @@
                     "line": 67,
                     "rawdescription": "\n"
                 },
+                {
+                    "name": "hasChildren",
+                    "coverageIgnore": false,
+                    "defaultValue": "computed<boolean>(() => !!this.submenu())",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 172,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
+                {
+                    "name": "hasCurrentChild",
+                    "coverageIgnore": false,
+                    "defaultValue": "computed<boolean>(() => this.children().some((child) => child.isCurrent()))",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Whether any child (sub-item) is the current item.</p>\n",
+                    "line": 170,
+                    "rawdescription": "\n\nWhether any child (sub-item) is the current item.\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
+                {
+                    "name": "hasEclChildrenDataAttribute",
+                    "coverageIgnore": false,
+                    "defaultValue": "computed<boolean | undefined>(() => this.hasChildren() || undefined)",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 155,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
                 {
                     "name": "isCurrent",
                     "coverageIgnore": false,
@@ -67554,6 +67634,22 @@
                         148
                     ]
                 },
+                {
+                    "name": "isDataExpanded",
+                    "coverageIgnore": false,
+                    "defaultValue": "computed<boolean | null>(() => this.hasChildren() ? this.isHovered() : null)",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 157,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
                 {
                     "name": "isExpanded",
                     "coverageIgnore": false,
@@ -67573,7 +67669,7 @@
                 {
                     "name": "isFull",
                     "coverageIgnore": false,
-                    "defaultValue": "computed<boolean>(() => this.hasChildren && this.submenu().eclMenuMegaItems().length >= ColTrigger.COL3_TRIGGER)",
+                    "defaultValue": "computed<boolean>(() => this.hasChildren() && this.submenu().eclMenuMegaItems().length >= ColTrigger.COL3_TRIGGER)",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
@@ -67710,7 +67806,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 374,
+                    "line": 372,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThis method calculates height and width of an item, depending the maximum of lines(rows) allowed.\nDepends on the 'maxLines' property of the parent menu component.\n",
@@ -67718,8 +67814,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 13018,
-                                "end": 13026,
+                                "pos": 13616,
+                                "end": 13624,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -67732,8 +67828,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 13012,
-                                "end": 13017,
+                                "pos": 13610,
+                                "end": 13615,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -67744,8 +67840,8 @@
                         },
                         {
                             "name": {
-                                "pos": 13105,
-                                "end": 13123,
+                                "pos": 13703,
+                                "end": 13721,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -67758,8 +67854,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 13099,
-                                "end": 13104,
+                                "pos": 13697,
+                                "end": 13702,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -67770,8 +67866,8 @@
                         },
                         {
                             "tagName": {
-                                "pos": 13132,
-                                "end": 13139,
+                                "pos": 13730,
+                                "end": 13737,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -67789,7 +67885,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 188,
+                    "line": 176,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -67802,7 +67898,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 212,
+                    "line": 200,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -67824,7 +67920,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 280,
+                    "line": 275,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nManages the keyboard navigation when the current element is the button of the menu item.\n",
@@ -67832,8 +67928,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 9897,
-                                "end": 9900,
+                                "pos": 10305,
+                                "end": 10308,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -67846,8 +67942,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 9891,
-                                "end": 9896,
+                                "pos": 10299,
+                                "end": 10304,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -67865,7 +67961,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 260,
+                    "line": 255,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nManages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n the next root menu item.\n",
@@ -67878,7 +67974,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 272,
+                    "line": 267,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nManages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n the previous root menu item.\n",
@@ -67891,7 +67987,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 250,
+                    "line": 245,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nManages the state when the item is focused, when navigating with keyboard and the navigation is coming from the submenu.\n",
@@ -67913,16 +68009,16 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 243,
+                    "line": 236,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nWhen clicking the caret button, to expand item's children. Used in mobile view.\n",
-                    "description": "<p>When clicking the caret button, to expand item&#39;s children. Used in mobile view.</p>\n",
+                    "rawdescription": "\n\nWhen clicking the caret button, to expand/collapse item's children.\nUsed on both desktop (click-to-open/close affordance) and mobile view.\n\nThe caret is a toggle control, not a navigation control: prevent its default\naction and stop propagation so that, when the item also has an href/routerLink,\nclicking the caret toggles the submenu instead of navigating the link.\n",
+                    "description": "<p>When clicking the caret button, to expand/collapse item&#39;s children.\nUsed on both desktop (click-to-open/close affordance) and mobile view.</p>\n<p>The caret is a toggle control, not a navigation control: prevent its default\naction and stop propagation so that, when the item also has an href/routerLink,\nclicking the caret toggles the submenu instead of navigating the link.</p>\n",
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 8798,
-                                "end": 8801,
+                                "pos": 9145,
+                                "end": 9148,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -67935,8 +68031,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 8792,
-                                "end": 8797,
+                                "pos": 9139,
+                                "end": 9144,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -67963,7 +68059,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 231,
+                    "line": 219,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -67998,7 +68094,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 227,
+                    "line": 215,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -68033,7 +68129,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 217,
+                    "line": 205,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -68068,7 +68164,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 222,
+                    "line": 210,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -68103,7 +68199,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 330,
+                    "line": 328,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nManages the keyboard navigation when the current element is the <a> tag of the menu item.\n",
@@ -68111,8 +68207,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 11645,
-                                "end": 11648,
+                                "pos": 12243,
+                                "end": 12246,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -68125,8 +68221,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 11639,
-                                "end": 11644,
+                                "pos": 12237,
+                                "end": 12242,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -68205,7 +68301,7 @@
             "description": "<p>This component represents a root menu item. Adds styling and functionality to menu item.</p>\n",
             "rawdescription": "\n\nThis component represents a root menu item. Adds styling and functionality to menu item.\n",
             "type": "component",
-            "sourceCode": "import { NgTemplateOutlet } from '@angular/common';\nimport {\n    AfterContentInit,\n    afterNextRender,\n    Component,\n    ElementRef,\n    forwardRef,\n    inject,\n    OnDestroy,\n    Renderer2,\n    ViewEncapsulation,\n    DOCUMENT,\n    booleanAttribute,\n    computed,\n    input,\n    linkedSignal,\n    output,\n    signal,\n    contentChild,\n    viewChild,\n} from '@angular/core';\nimport { outputToObservable } from '@angular/core/rxjs-interop';\nimport { Params, QueryParamsHandling, RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EuiAppShellService } from '@eui/core';\nimport { EclButtonComponent, EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { ECLBaseDirective, KeyCode } from '@eui/ecl/core';\nimport { Subject } from 'rxjs';\nimport { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';\nimport { EclMenuMegaComponent } from '../ecl-menu-mega';\nimport {\n    EclMenuItemCaretEvent,\n    EclMenuItemFocusEvent,\n    EclMenuItemHoverEvent,\n    EclMenuItemHoverOutEvent,\n    EclMenuItemKeydownEvent,\n    EclMenuItemSelectEvent,\n} from '../events';\nimport { EclMenuItem } from '../models/ecl-menu-item.model';\n\nconst enum ColTrigger {\n    COL1_TRIGGER = 5,\n    COL2_TRIGGER = 9,\n    COL3_TRIGGER = 13,\n}\n\n/**\n * This component represents a root menu item. Adds styling and functionality to menu item.\n */\n@Component({\n    selector: 'ecl-menu-item',\n    templateUrl: './ecl-menu-item.component.html',\n    imports: [NgTemplateOutlet, RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        role: 'listitem',\n        '[class]': 'cssClasses()',\n        '[class.ecl-menu__item--has-children]': 'hasEclChildrenDataAttribute',\n        '[attr.aria-haspopup]': 'hasEclChildrenDataAttribute',\n        '[attr.data-expanded]': 'isDataExpanded',\n        '(mouseenter)': 'onItemMouseEnter($event)',\n        '(mouseleave)': 'onItemMouseLeave($event)',\n    },\n})\nexport class EclMenuItemComponent extends ECLBaseDirective implements EclMenuItem, AfterContentInit, OnDestroy {\n    el = inject(ElementRef);\n\n    readonly id = input<string>(undefined);\n    readonly label = input<string>(undefined);\n    /**\n     * When in mobile view, use this property to set aria-label for the toggle items button (to expand item's children).\n     */\n    readonly toggleAriaLabel = input<string>(undefined);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    readonly routerLink = input<string | any[]>(null);\n    readonly queryParams = input<Params | null>(null);\n    readonly queryParamsHandling = input<QueryParamsHandling>(null);\n    readonly href = input('');\n    readonly target = input('');\n    readonly isCurrentInput = input(false, { alias: 'isCurrent', transform: booleanAttribute });\n    readonly isCurrent = linkedSignal(() => this.isCurrentInput());\n    /**\n     * Custom attributes, to be added to the <a> tag of the menu item.\n     */\n    readonly linkExtraAttributes = input<Record<string, string>>(undefined);\n\n    readonly menuItemSelect = output<EclMenuItemSelectEvent>();\n    readonly menuItemCaret = output<EclMenuItemCaretEvent>();\n    /**\n     * Event that is emited on clicking the caret button to expand item's children in mobile mode.\n     */\n    readonly menuItemHover = output<EclMenuItemHoverEvent>();\n    readonly menuItemHoverOut = output<EclMenuItemHoverOutEvent>();\n    readonly menuMegaItemSelect = output<EclMenuItemSelectEvent>();\n    readonly menuItemFocus = output<EclMenuItemFocusEvent>();\n    readonly menuItemKeydown = output<EclMenuItemKeydownEvent>();\n    /**\n     * This event is emited when the keyboard nav reaches the last item in mobile view.\n     * Then the next focused element should be the 'close' btn.\n     */\n    readonly menuMegaLastItemTab = output<void>();\n\n    readonly isExpanded = signal(false);\n    readonly isHovered = signal(false);\n    /**\n     * Used when menu has overlay, to show if the item is currently displayed.\n     */\n    readonly isVisible = signal(true);\n    readonly isMobileBreakpoint = signal(false);\n\n    readonly submenu = contentChild(forwardRef(() => EclMenuMegaComponent));\n\n    /**\n     * Set to 'true', when item has more than 13 chidren and the overlay needs to use the full available space.\n     */\n    readonly isFull = computed<boolean>(() => this.hasChildren && this.submenu().eclMenuMegaItems().length >= ColTrigger.COL3_TRIGGER);\n\n    /**\n     * The default role of the item is 'listitem' and should not be changed.\n     */\n    protected readonly cssClasses = computed<string>(() =>\n        [\n            super.getCssClasses('ecl-menu__item'),\n            this.isCurrent() ? 'ecl-menu__item--current' : '',\n            this.isExpanded() ? 'ecl-menu__item--expanded' : '',\n            this.getClassDependingChildrenCnt(),\n        ]\n            .join(' ')\n            .trim());\n\n    /**\n     * The <a> element of the menu item, when there are no children.\n     */\n    protected readonly menuLink = viewChild<ElementRef<HTMLAnchorElement>>('menuLink');\n    /**\n     * The <button> element of the menu item, when item has children.\n     */\n    protected readonly menuButton = viewChild(EclButtonComponent);\n\n    private readonly doc = inject(DOCUMENT);\n    private readonly window = this.doc.defaultView; // Window | null\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private renderer = inject(Renderer2);\n    private appShell = inject(EuiAppShellService);\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n            this.setExtraAttributesForLink(this.menuLink()?.nativeElement, this.linkExtraAttributes());\n        });\n    }\n\n    get hasEclChildrenDataAttribute(): boolean {\n        return this.hasChildren || undefined;\n    }\n\n    get isDataExpanded(): boolean {\n        return this.hasChildren ? this.isHovered() : null;\n    }\n\n    /**\n     * 'aria-current' is set to 'page' only when this item itself is the current page, and not when it is\n     * marked current merely because one of its children is the active item (in that case the child link\n     * carries 'aria-current=\"page\"'). Derived from live state so it stays correct whether 'isCurrent' is set\n     * at render time or updated on selection.\n     */\n    get ariaCurrent(): string | null {\n        return this.isCurrent() && !this.hasCurrentChild ? 'page' : null;\n    }\n\n    /**\n     * Whether any child (sub-item) is the current item.\n     */\n    get hasCurrentChild(): boolean {\n        return this.children.some((child) => child.isCurrent());\n    }\n\n    get hasChildren(): boolean {\n        return !!this.submenu();\n    }\n\n    get children(): EclMenuItem[] {\n        return this.hasChildren ? this.submenu().eclMenuMegaItems() : [];\n    }\n\n    ngAfterContentInit(): void {\n        // Subscibe to submenu component events.\n        const submenu = this.submenu();\n        if (submenu) {\n            outputToObservable(submenu.menuItemSelect).pipe(takeUntil(this.destroy$)).subscribe((it: EclMenuItemSelectEvent) => {\n                this.menuMegaItemSelect.emit(new EclMenuItemSelectEvent(it.menuItem, it.domEvent));\n            });\n            outputToObservable(submenu.menuMegaItemParentFocus).pipe(takeUntil(this.destroy$)).subscribe(() => {\n                if (!this.isMobileBreakpoint()) {\n                    this.onFocusFromSubmenu();\n                }\n            });\n            outputToObservable(submenu.menuMegaLastItemTab).pipe(takeUntil(this.destroy$)).subscribe(() => {\n                if (this.isMobileBreakpoint()) {\n                    this.menuMegaLastItemTab.emit();\n                }\n            });\n\n            if (this.hasSubmenuAnySelections()) {\n                this.isCurrent.set(true);\n            }\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    onItemMouseEnter(evt: MouseEvent): void {\n        if (this.isMobileBreakpoint()) return;\n        this.menuItemHover.emit(new EclMenuItemHoverEvent(this, evt));\n    }\n\n    onItemMouseLeave(evt: MouseEvent): void {\n        if (this.isMobileBreakpoint()) return;\n        this.menuItemHoverOut.emit(new EclMenuItemHoverOutEvent(this, evt));\n    }\n\n    onItemFocus(evt: FocusEvent): void {\n        this.menuItemFocus.emit(new EclMenuItemFocusEvent(this, evt));\n    }\n\n    onItemClick(evt: Event): void {\n        this.menuItemSelect.emit(new EclMenuItemSelectEvent(this, evt));\n\n        if (!this.href()) {\n            evt.stopPropagation();\n        }\n    }\n\n    /**\n     * When clicking the caret button, to expand item's children. Used in mobile view.\n     * @param evt\n     */\n    onItemCaretClick(evt: MouseEvent): void {\n        this.menuItemCaret.emit(new EclMenuItemCaretEvent(this, evt));\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from the submenu.\n     */\n    onFocusFromSubmenu(): void {\n        this.onButtonFocus();\n        this.isHovered.set(false);\n        this.isExpanded.set(false);\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n     *  the next root menu item.\n     */\n    onFocusFromNext(): void {\n        if (this.menuButton()) {\n            this.onButtonFocus();\n        } else {\n            this.onLinkFocus();\n        }\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n     *  the previous root menu item.\n     */\n    onFocusFromPrev(): void {\n        this.onLinkFocus();\n    }\n\n    /**\n     * Manages the keyboard navigation when the current element is the button of the menu item.\n     * @param evt\n     */\n    onButtonKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                if (this.isHovered()) {\n                    this.selectFirstMegaMenuItem();\n                } else {\n                    this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                }\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.onLinkFocus();\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                evt.preventDefault();\n                this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                evt.preventDefault();\n                this.onLinkFocus();\n                break;\n            }\n            case KeyCode.TAB: {\n                this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ENTER: {\n                evt.preventDefault();\n                this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                evt.preventDefault();\n                this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * Manages the keyboard navigation when the current element is the <a> tag of the menu item.\n     * @param evt\n     */\n    onLinkKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                this.onLinkNextFocus(evt);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                evt.preventDefault();\n                this.onLinkNextFocus(evt);\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                evt.preventDefault();\n                this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ENTER: {\n                this.onItemClick(evt);\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                evt.preventDefault();\n                this.onLinkEscape(evt);\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * This method calculates height and width of an item, depending the maximum of lines(rows) allowed.\n     * Depends on the 'maxLines' property of the parent menu component.\n     * @param maxLines - property that sets the maximum possible lines in a menu item.\n     * @param isMobileBreakpoint\n     * @returns\n     */\n    checkMenuItem(maxLines: number, isMobileBreakpoint: boolean): void {\n        if (maxLines < 1) return;\n\n        const currentItem = this.el.nativeElement;\n        const currentLink = this.menuLink().nativeElement;\n        if (isMobileBreakpoint) {\n            this.renderer.setStyle(currentLink, 'width', '100%');\n            return;\n        }\n        this.renderer.setStyle(currentItem, 'alignItems', 'flex-start');\n        const linkStyle = this.window.getComputedStyle(currentLink);\n\n        const maxHeight = this.getMenuItemLinkMaxHeight(linkStyle, maxLines);\n\n        if (currentLink.offsetHeight > maxHeight) {\n            this.changeMenuItemLinkWidth(currentLink, maxLines, linkStyle);\n        }\n        this.renderer.removeStyle(currentItem, 'alignItems');\n    }\n\n    private onLinkEscape(evt: Event): void {\n        const menuButton = this.menuButton();\n        if (menuButton) {\n            menuButton.el.nativeElement.focus();\n            evt.stopPropagation();\n        } else {\n            this.menuLink().nativeElement.blur();\n        }\n    }\n\n    private selectFirstMegaMenuItem(): void {\n        this.submenu().selectFirstSubItem();\n    }\n\n    private onLinkFocus(): void {\n        this.menuLink().nativeElement.focus();\n    }\n\n    private onLinkNextFocus(evt: Event): void {\n        if (this.menuButton()) {\n            this.onButtonFocus();\n        } else {\n            this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n        }\n    }\n\n    private onButtonFocus(): void {\n        this.menuButton().el.nativeElement.focus();\n    }\n\n    private getMenuItemLinkMaxHeight(linkStyle: CSSStyleDeclaration, maxLines: number): number {\n        return parseInt(linkStyle.lineHeight, 10) * maxLines + parseInt(linkStyle.paddingTop, 10) + parseInt(linkStyle.paddingBottom, 10);\n    }\n\n    /**\n     * Calculates width of a menu item, depending on maximum lines of text allowed.\n     * @param currentLink\n     * @param maxLines\n     * @param linkStyle\n     * @returns\n     */\n    private changeMenuItemLinkWidth(currentLink: HTMLAnchorElement, maxLines: number, linkStyle: CSSStyleDeclaration): void {\n        this.renderer.setStyle(currentLink, 'white-space', 'nowrap');\n        const linkWidth = currentLink.offsetWidth;\n        if (maxLines === 1) {\n            this.renderer.setStyle(currentLink, 'width', `${linkWidth + parseInt(linkStyle.paddingLeft, 10) + parseInt(linkStyle.paddingRight, 10)}px`);\n            this.renderer.removeStyle(currentLink, 'white-space');\n            return;\n        }\n        const textSize = currentLink.text.length;\n        const letterWidth = Math.ceil(linkWidth / textSize);\n        const wordsArray = currentLink.text.trim().split(' ');\n        const goalWidth = Math.ceil(linkWidth / maxLines);\n        const firstWord = wordsArray[0];\n        let cnt = 1;\n        let wordWidth = Math.ceil((firstWord.length + 1) * letterWidth);\n        while (wordWidth < goalWidth) {\n            wordWidth += Math.ceil((wordsArray[cnt].length + 1) * letterWidth);\n            cnt++;\n        }\n        this.renderer.setStyle(currentLink, 'width', `${wordWidth + parseInt(linkStyle.paddingLeft, 10) + parseInt(linkStyle.paddingRight, 10)}px`);\n        this.renderer.removeStyle(currentLink, 'white-space');\n    }\n\n    private getClassDependingChildrenCnt(): string {\n        if (this.hasChildren) {\n            if (this.submenu().eclMenuMegaItems().length < ColTrigger.COL1_TRIGGER) {\n                return 'ecl-menu__item--col1';\n            } else if (this.submenu().eclMenuMegaItems().length < ColTrigger.COL2_TRIGGER) {\n                return 'ecl-menu__item--col2';\n            } else if (this.submenu().eclMenuMegaItems().length < ColTrigger.COL3_TRIGGER) {\n                return 'ecl-menu__item--col3';\n            } else {\n                return 'ecl-menu__item--full';\n            }\n        }\n        return '';\n    }\n\n    private hasSubmenuAnySelections(): boolean {\n        const submenu = this.submenu();\n        return submenu && !!submenu.eclMenuMegaItems().find((it) => it.isCurrent());\n    }\n\n    private setExtraAttributesForLink(link: HTMLElement, linkExtraAttributes: Record<string, string>): void {\n        if (linkExtraAttributes) {\n            Object.keys(linkExtraAttributes).forEach((key) => {\n                if (key !== 'href' && key !== 'routerLink') {\n                    this.renderer.setAttribute(link, key, linkExtraAttributes[key]);\n                }\n            });\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.appShell.getState<any>('breakpoints')\n            .pipe(\n                map(bp => !!(bp?.isMobile || bp?.isTablet || bp?.isLtLargeTablet)), // xs/sm/md/lg (< 1140px)\n                distinctUntilChanged(),\n                takeUntil(this.destroy$),\n            )\n            .subscribe((isMobile) => {\n                this.isMobileBreakpoint.set(isMobile);\n            });\n    }\n}\n",
+            "sourceCode": "import { NgTemplateOutlet } from '@angular/common';\nimport {\n    AfterContentInit,\n    afterNextRender,\n    Component,\n    ElementRef,\n    forwardRef,\n    inject,\n    OnDestroy,\n    Renderer2,\n    ViewEncapsulation,\n    DOCUMENT,\n    booleanAttribute,\n    computed,\n    input,\n    linkedSignal,\n    output,\n    signal,\n    contentChild,\n    viewChild,\n} from '@angular/core';\nimport { outputToObservable } from '@angular/core/rxjs-interop';\nimport { Params, QueryParamsHandling, RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EuiAppShellService } from '@eui/core';\nimport { EclButtonComponent, EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { ECLBaseDirective, KeyCode } from '@eui/ecl/core';\nimport { Subject } from 'rxjs';\nimport { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';\nimport { EclMenuMegaComponent } from '../ecl-menu-mega';\nimport {\n    EclMenuItemCaretEvent,\n    EclMenuItemFocusEvent,\n    EclMenuItemHoverEvent,\n    EclMenuItemHoverOutEvent,\n    EclMenuItemKeydownEvent,\n    EclMenuItemSelectEvent,\n} from '../events';\nimport { EclMenuItem } from '../models/ecl-menu-item.model';\n\nconst enum ColTrigger {\n    COL1_TRIGGER = 5,\n    COL2_TRIGGER = 9,\n    COL3_TRIGGER = 13,\n}\n\n/**\n * This component represents a root menu item. Adds styling and functionality to menu item.\n */\n@Component({\n    selector: 'ecl-menu-item',\n    templateUrl: './ecl-menu-item.component.html',\n    imports: [NgTemplateOutlet, RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        role: 'listitem',\n        '[class]': 'cssClasses()',\n        '[class.ecl-menu__item--has-children]': 'hasEclChildrenDataAttribute()',\n        '[attr.aria-haspopup]': 'hasEclChildrenDataAttribute()',\n        '[attr.data-expanded]': 'isDataExpanded()',\n        '(mouseenter)': 'onItemMouseEnter($event)',\n        '(mouseleave)': 'onItemMouseLeave($event)',\n    },\n})\nexport class EclMenuItemComponent extends ECLBaseDirective implements EclMenuItem, AfterContentInit, OnDestroy {\n    el = inject(ElementRef);\n\n    readonly id = input<string>(undefined);\n    readonly label = input<string>(undefined);\n    /**\n     * When in mobile view, use this property to set aria-label for the toggle items button (to expand item's children).\n     */\n    readonly toggleAriaLabel = input<string>(undefined);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    readonly routerLink = input<string | any[]>(null);\n    readonly queryParams = input<Params | null>(null);\n    readonly queryParamsHandling = input<QueryParamsHandling>(null);\n    readonly href = input('');\n    readonly target = input('');\n    readonly isCurrentInput = input(false, { alias: 'isCurrent', transform: booleanAttribute });\n    readonly isCurrent = linkedSignal(() => this.isCurrentInput());\n    /**\n     * Custom attributes, to be added to the <a> tag of the menu item.\n     */\n    readonly linkExtraAttributes = input<Record<string, string>>(undefined);\n\n    readonly menuItemSelect = output<EclMenuItemSelectEvent>();\n    readonly menuItemCaret = output<EclMenuItemCaretEvent>();\n    /**\n     * Event that is emited on clicking the caret button to expand item's children in mobile mode.\n     */\n    readonly menuItemHover = output<EclMenuItemHoverEvent>();\n    readonly menuItemHoverOut = output<EclMenuItemHoverOutEvent>();\n    readonly menuMegaItemSelect = output<EclMenuItemSelectEvent>();\n    readonly menuItemFocus = output<EclMenuItemFocusEvent>();\n    readonly menuItemKeydown = output<EclMenuItemKeydownEvent>();\n    /**\n     * This event is emited when the keyboard nav reaches the last item in mobile view.\n     * Then the next focused element should be the 'close' btn.\n     */\n    readonly menuMegaLastItemTab = output<void>();\n\n    readonly isExpanded = signal(false);\n    readonly isHovered = signal(false);\n    /**\n     * Used when menu has overlay, to show if the item is currently displayed.\n     */\n    readonly isVisible = signal(true);\n    readonly isMobileBreakpoint = signal(false);\n\n    readonly submenu = contentChild(forwardRef(() => EclMenuMegaComponent));\n\n    /**\n     * Set to 'true', when item has more than 13 chidren and the overlay needs to use the full available space.\n     */\n    readonly isFull = computed<boolean>(() => this.hasChildren() && this.submenu().eclMenuMegaItems().length >= ColTrigger.COL3_TRIGGER);\n\n    /**\n     * The default role of the item is 'listitem' and should not be changed.\n     */\n    protected readonly cssClasses = computed<string>(() =>\n        [\n            super.getCssClasses('ecl-menu__item'),\n            this.isCurrent() ? 'ecl-menu__item--current' : '',\n            this.isExpanded() ? 'ecl-menu__item--expanded' : '',\n            this.getClassDependingChildrenCnt(),\n        ]\n            .join(' ')\n            .trim());\n\n    /**\n     * The <a> element of the menu item, when there are no children.\n     */\n    protected readonly menuLink = viewChild<ElementRef<HTMLAnchorElement>>('menuLink');\n    /**\n     * The <button> element of the menu item, when item has children.\n     */\n    protected readonly menuButton = viewChild(EclButtonComponent);\n\n    private readonly doc = inject(DOCUMENT);\n    private readonly window = this.doc.defaultView; // Window | null\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private renderer = inject(Renderer2);\n    private appShell = inject(EuiAppShellService);\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n            this.setExtraAttributesForLink(this.menuLink()?.nativeElement, this.linkExtraAttributes());\n        });\n    }\n\n    readonly hasEclChildrenDataAttribute = computed<boolean | undefined>(() => this.hasChildren() || undefined);\n\n    readonly isDataExpanded = computed<boolean | null>(() => this.hasChildren() ? this.isHovered() : null);\n\n    /**\n     * 'aria-current' is set to 'page' only when this item itself is the current page, and not when it is\n     * marked current merely because one of its children is the active item (in that case the child link\n     * carries 'aria-current=\"page\"'). Derived from live state so it stays correct whether 'isCurrent' is set\n     * at render time or updated on selection.\n     */\n    readonly ariaCurrent = computed<string | null>(() => this.isCurrent() && !this.hasCurrentChild() ? 'page' : null);\n\n    /**\n     * Whether any child (sub-item) is the current item.\n     */\n    readonly hasCurrentChild = computed<boolean>(() => this.children().some((child) => child.isCurrent()));\n\n    readonly hasChildren = computed<boolean>(() => !!this.submenu());\n\n    readonly children = computed<EclMenuItem[]>(() => this.hasChildren() ? this.submenu().eclMenuMegaItems() : []);\n\n    ngAfterContentInit(): void {\n        // Subscibe to submenu component events.\n        const submenu = this.submenu();\n        if (submenu) {\n            outputToObservable(submenu.menuItemSelect).pipe(takeUntil(this.destroy$)).subscribe((it: EclMenuItemSelectEvent) => {\n                this.menuMegaItemSelect.emit(new EclMenuItemSelectEvent(it.menuItem, it.domEvent));\n            });\n            outputToObservable(submenu.menuMegaItemParentFocus).pipe(takeUntil(this.destroy$)).subscribe(() => {\n                if (!this.isMobileBreakpoint()) {\n                    this.onFocusFromSubmenu();\n                }\n            });\n            outputToObservable(submenu.menuMegaLastItemTab).pipe(takeUntil(this.destroy$)).subscribe(() => {\n                if (this.isMobileBreakpoint()) {\n                    this.menuMegaLastItemTab.emit();\n                }\n            });\n\n            if (this.hasSubmenuAnySelections()) {\n                this.isCurrent.set(true);\n            }\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    onItemMouseEnter(evt: MouseEvent): void {\n        if (this.isMobileBreakpoint()) return;\n        this.menuItemHover.emit(new EclMenuItemHoverEvent(this, evt));\n    }\n\n    onItemMouseLeave(evt: MouseEvent): void {\n        if (this.isMobileBreakpoint()) return;\n        this.menuItemHoverOut.emit(new EclMenuItemHoverOutEvent(this, evt));\n    }\n\n    onItemFocus(evt: FocusEvent): void {\n        this.menuItemFocus.emit(new EclMenuItemFocusEvent(this, evt));\n    }\n\n    onItemClick(evt: Event): void {\n        this.menuItemSelect.emit(new EclMenuItemSelectEvent(this, evt));\n\n        if (!this.href()) {\n            evt.stopPropagation();\n        }\n    }\n\n    /**\n     * When clicking the caret button, to expand/collapse item's children.\n     * Used on both desktop (click-to-open/close affordance) and mobile view.\n     *\n     * The caret is a toggle control, not a navigation control: prevent its default\n     * action and stop propagation so that, when the item also has an href/routerLink,\n     * clicking the caret toggles the submenu instead of navigating the link.\n     * @param evt\n     */\n    onItemCaretClick(evt: MouseEvent): void {\n        evt.preventDefault();\n        evt.stopPropagation();\n        this.menuItemCaret.emit(new EclMenuItemCaretEvent(this, evt));\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from the submenu.\n     */\n    onFocusFromSubmenu(): void {\n        this.onButtonFocus();\n        this.isHovered.set(false);\n        this.isExpanded.set(false);\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n     *  the next root menu item.\n     */\n    onFocusFromNext(): void {\n        if (this.menuButton()) {\n            this.onButtonFocus();\n        } else {\n            this.onLinkFocus();\n        }\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n     *  the previous root menu item.\n     */\n    onFocusFromPrev(): void {\n        this.onLinkFocus();\n    }\n\n    /**\n     * Manages the keyboard navigation when the current element is the button of the menu item.\n     * @param evt\n     */\n    onButtonKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                if (this.isHovered()) {\n                    this.selectFirstMegaMenuItem();\n                } else {\n                    this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                }\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.onLinkFocus();\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                evt.preventDefault();\n                this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                evt.preventDefault();\n                this.onLinkFocus();\n                break;\n            }\n            case KeyCode.TAB: {\n                this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ENTER:\n            case KeyCode.SPACE: {\n                // Space must behave like Enter: activate the caret/submenu toggle.\n                // preventDefault stops the page from scrolling on Space.\n                evt.preventDefault();\n                this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                evt.preventDefault();\n                this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * Manages the keyboard navigation when the current element is the <a> tag of the menu item.\n     * @param evt\n     */\n    onLinkKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                this.onLinkNextFocus(evt);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                evt.preventDefault();\n                this.onLinkNextFocus(evt);\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                evt.preventDefault();\n                this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ENTER: {\n                this.onItemClick(evt);\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                evt.preventDefault();\n                this.onLinkEscape(evt);\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * This method calculates height and width of an item, depending the maximum of lines(rows) allowed.\n     * Depends on the 'maxLines' property of the parent menu component.\n     * @param maxLines - property that sets the maximum possible lines in a menu item.\n     * @param isMobileBreakpoint\n     * @returns\n     */\n    checkMenuItem(maxLines: number, isMobileBreakpoint: boolean): void {\n        if (maxLines < 1) return;\n\n        const currentItem = this.el.nativeElement;\n        const currentLink = this.menuLink().nativeElement;\n        if (isMobileBreakpoint) {\n            this.renderer.setStyle(currentLink, 'width', '100%');\n            return;\n        }\n        this.renderer.setStyle(currentItem, 'alignItems', 'flex-start');\n        const linkStyle = this.window.getComputedStyle(currentLink);\n\n        const maxHeight = this.getMenuItemLinkMaxHeight(linkStyle, maxLines);\n\n        if (currentLink.offsetHeight > maxHeight) {\n            this.changeMenuItemLinkWidth(currentLink, maxLines, linkStyle);\n        }\n        this.renderer.removeStyle(currentItem, 'alignItems');\n    }\n\n    private onLinkEscape(evt: Event): void {\n        const menuButton = this.menuButton();\n        if (menuButton) {\n            menuButton.el.nativeElement.focus();\n            evt.stopPropagation();\n        } else {\n            this.menuLink().nativeElement.blur();\n        }\n    }\n\n    private selectFirstMegaMenuItem(): void {\n        this.submenu().selectFirstSubItem();\n    }\n\n    private onLinkFocus(): void {\n        this.menuLink().nativeElement.focus();\n    }\n\n    private onLinkNextFocus(evt: Event): void {\n        if (this.menuButton()) {\n            this.onButtonFocus();\n        } else {\n            this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n        }\n    }\n\n    private onButtonFocus(): void {\n        this.menuButton().el.nativeElement.focus();\n    }\n\n    private getMenuItemLinkMaxHeight(linkStyle: CSSStyleDeclaration, maxLines: number): number {\n        return parseInt(linkStyle.lineHeight, 10) * maxLines + parseInt(linkStyle.paddingTop, 10) + parseInt(linkStyle.paddingBottom, 10);\n    }\n\n    /**\n     * Calculates width of a menu item, depending on maximum lines of text allowed.\n     * @param currentLink\n     * @param maxLines\n     * @param linkStyle\n     * @returns\n     */\n    private changeMenuItemLinkWidth(currentLink: HTMLAnchorElement, maxLines: number, linkStyle: CSSStyleDeclaration): void {\n        this.renderer.setStyle(currentLink, 'white-space', 'nowrap');\n        const linkWidth = currentLink.offsetWidth;\n        if (maxLines === 1) {\n            this.renderer.setStyle(currentLink, 'width', `${linkWidth + parseInt(linkStyle.paddingLeft, 10) + parseInt(linkStyle.paddingRight, 10)}px`);\n            this.renderer.removeStyle(currentLink, 'white-space');\n            return;\n        }\n        const textSize = currentLink.text.length;\n        const letterWidth = Math.ceil(linkWidth / textSize);\n        const wordsArray = currentLink.text.trim().split(' ');\n        const goalWidth = Math.ceil(linkWidth / maxLines);\n        const firstWord = wordsArray[0];\n        let cnt = 1;\n        let wordWidth = Math.ceil((firstWord.length + 1) * letterWidth);\n        while (wordWidth < goalWidth) {\n            wordWidth += Math.ceil((wordsArray[cnt].length + 1) * letterWidth);\n            cnt++;\n        }\n        this.renderer.setStyle(currentLink, 'width', `${wordWidth + parseInt(linkStyle.paddingLeft, 10) + parseInt(linkStyle.paddingRight, 10)}px`);\n        this.renderer.removeStyle(currentLink, 'white-space');\n    }\n\n    private getClassDependingChildrenCnt(): string {\n        if (this.hasChildren()) {\n            if (this.submenu().eclMenuMegaItems().length < ColTrigger.COL1_TRIGGER) {\n                return 'ecl-menu__item--col1';\n            } else if (this.submenu().eclMenuMegaItems().length < ColTrigger.COL2_TRIGGER) {\n                return 'ecl-menu__item--col2';\n            } else if (this.submenu().eclMenuMegaItems().length < ColTrigger.COL3_TRIGGER) {\n                return 'ecl-menu__item--col3';\n            } else {\n                return 'ecl-menu__item--full';\n            }\n        }\n        return '';\n    }\n\n    private hasSubmenuAnySelections(): boolean {\n        const submenu = this.submenu();\n        return submenu && !!submenu.eclMenuMegaItems().find((it) => it.isCurrent());\n    }\n\n    private setExtraAttributesForLink(link: HTMLElement, linkExtraAttributes: Record<string, string>): void {\n        if (linkExtraAttributes) {\n            Object.keys(linkExtraAttributes).forEach((key) => {\n                if (key !== 'href' && key !== 'routerLink') {\n                    this.renderer.setAttribute(link, key, linkExtraAttributes[key]);\n                }\n            });\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.appShell.getState<any>('breakpoints')\n            .pipe(\n                map(bp => !!(bp?.isMobile || bp?.isTablet || bp?.isLtLargeTablet)), // xs/sm/md/lg (< 1140px)\n                distinctUntilChanged(),\n                takeUntil(this.destroy$),\n            )\n            .subscribe((isMobile) => {\n                this.isMobileBreakpoint.set(isMobile);\n            });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -68238,74 +68334,6 @@
                 "AfterContentInit",
                 "OnDestroy"
             ],
-            "accessors": {
-                "hasEclChildrenDataAttribute": {
-                    "name": "hasEclChildrenDataAttribute",
-                    "getSignature": {
-                        "name": "hasEclChildrenDataAttribute",
-                        "type": "boolean",
-                        "returnType": "boolean",
-                        "line": 155,
-                        "rawdescription": "\n",
-                        "description": ""
-                    }
-                },
-                "isDataExpanded": {
-                    "name": "isDataExpanded",
-                    "getSignature": {
-                        "name": "isDataExpanded",
-                        "type": "boolean",
-                        "returnType": "boolean",
-                        "line": 159,
-                        "rawdescription": "\n",
-                        "description": ""
-                    }
-                },
-                "ariaCurrent": {
-                    "name": "ariaCurrent",
-                    "getSignature": {
-                        "name": "ariaCurrent",
-                        "type": "unknown",
-                        "returnType": "string | null",
-                        "line": 169,
-                        "rawdescription": "\n\n'aria-current' is set to 'page' only when this item itself is the current page, and not when it is\nmarked current merely because one of its children is the active item (in that case the child link\ncarries 'aria-current=\"page\"'). Derived from live state so it stays correct whether 'isCurrent' is set\nat render time or updated on selection.\n",
-                        "description": "<p>&#39;aria-current&#39; is set to &#39;page&#39; only when this item itself is the current page, and not when it is\nmarked current merely because one of its children is the active item (in that case the child link\ncarries &#39;aria-current=&quot;page&quot;&#39;). Derived from live state so it stays correct whether &#39;isCurrent&#39; is set\nat render time or updated on selection.</p>\n"
-                    }
-                },
-                "hasCurrentChild": {
-                    "name": "hasCurrentChild",
-                    "getSignature": {
-                        "name": "hasCurrentChild",
-                        "type": "boolean",
-                        "returnType": "boolean",
-                        "line": 176,
-                        "rawdescription": "\n\nWhether any child (sub-item) is the current item.\n",
-                        "description": "<p>Whether any child (sub-item) is the current item.</p>\n"
-                    }
-                },
-                "hasChildren": {
-                    "name": "hasChildren",
-                    "getSignature": {
-                        "name": "hasChildren",
-                        "type": "boolean",
-                        "returnType": "boolean",
-                        "line": 180,
-                        "rawdescription": "\n",
-                        "description": ""
-                    }
-                },
-                "children": {
-                    "name": "children",
-                    "getSignature": {
-                        "name": "children",
-                        "type": "[]",
-                        "returnType": "EclMenuItem[]",
-                        "line": 184,
-                        "rawdescription": "\n",
-                        "description": ""
-                    }
-                }
-            },
             "relationships": {
                 "incoming": [],
                 "outgoing": [
@@ -68351,7 +68379,7 @@
                     }
                 ]
             },
-            "templateData": "@if (href()) {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [href]=\"href()\"\n        [target]=\"target()\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent()\"\n        [attr.aria-current]=\"ariaCurrent\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label() }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n} @else {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [attr.tabindex]=\"tabindex || 0\"\n        [routerLink]=\"routerLink()\"\n        [queryParams]=\"queryParams()\"\n        [queryParamsHandling]=\"queryParamsHandling()\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent()\"\n        [attr.aria-current]=\"ariaCurrent\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label() }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n}\n\n@if (hasChildren) {\n    @if (isMobileBreakpoint()) {\n        <button\n            eclButton\n            variant=\"tertiary\"\n            class=\"ecl-menu__button-caret ecl-button--neutral\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel() || 'Access item children'\"\n            (click)=\"onItemCaretClick($event)\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    } @else {\n        <button\n            eclButton\n            variant=\"tertiary\"\n            class=\"ecl-menu__button-caret ecl-button--neutral\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel() || 'Access item children'\"\n            [attr.data-expanded]=\"isDataExpanded\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    }\n}\n\n<ng-content select=\"ecl-menu-mega\"></ng-content>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n"
+            "templateData": "@if (href()) {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [href]=\"href()\"\n        [target]=\"target()\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent()\"\n        [attr.aria-current]=\"ariaCurrent()\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label() }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n} @else {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [attr.tabindex]=\"tabindex || 0\"\n        [routerLink]=\"routerLink()\"\n        [queryParams]=\"queryParams()\"\n        [queryParamsHandling]=\"queryParamsHandling()\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent()\"\n        [attr.aria-current]=\"ariaCurrent()\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label() }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n}\n\n@if (hasChildren()) {\n    @if (isMobileBreakpoint()) {\n        <button\n            eclButton\n            variant=\"tertiary\"\n            class=\"ecl-menu__button-caret ecl-button--neutral\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel() || 'Access item children'\"\n            (click)=\"onItemCaretClick($event)\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    } @else {\n        <button\n            eclButton\n            variant=\"tertiary\"\n            class=\"ecl-menu__button-caret ecl-button--neutral\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel() || 'Access item children'\"\n            [attr.aria-expanded]=\"isDataExpanded()\"\n            (click)=\"onItemCaretClick($event)\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    }\n}\n\n<ng-content select=\"ecl-menu-mega\"></ng-content>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n"
         },
         {
             "name": "EclMenuMegaComponent",
@@ -68722,7 +68750,7 @@
         },
         {
             "name": "EclMenuMegaItemComponent",
-            "id": "component-EclMenuMegaItemComponent-3df0320be5992238018852526a4f2497a7e3936f85ded1e9bf1efd3d4106e56a80c3f20a9c73c54cc9746eaa89cbc0513729434525706a82e7a4f8278fbd6647",
+            "id": "component-EclMenuMegaItemComponent-93753c7f17ccad475586c23c1ce5a01d59ea65cefabd1cb311b8a3104b837c2a4b9b99541a25adce9fbe8a61aa5cb41040fb9d43a15716e8f95f0055606abcc7",
             "file": "packages/ecl/components/ecl-menu/ecl-menu-mega/ecl-menu-mega-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -69029,10 +69057,10 @@
                 {
                     "name": "children",
                     "coverageIgnore": false,
-                    "defaultValue": "[]",
+                    "defaultValue": "signal<EclMenuItem[]>([])",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "EclMenuItem[]",
+                    "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
@@ -69045,7 +69073,7 @@
                 {
                     "name": "hasChildren",
                     "coverageIgnore": false,
-                    "defaultValue": "false",
+                    "defaultValue": "signal(false)",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
@@ -69231,8 +69259,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3480,
-                                "end": 3483,
+                                "pos": 3496,
+                                "end": 3499,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -69245,8 +69273,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3474,
-                                "end": 3479,
+                                "pos": 3490,
+                                "end": 3495,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -69348,7 +69376,7 @@
             "description": "<p>This component represents a sub-menu item, that is on the second level of the ecl-menu.\nAdds some custom styling and functionality.</p>\n",
             "rawdescription": "\n\nThis component represents a sub-menu item, that is on the second level of the ecl-menu.\nAdds some custom styling and functionality.\n",
             "type": "component",
-            "sourceCode": "import {\n    AfterViewInit,\n    Component,\n    ElementRef,\n    Renderer2,\n    booleanAttribute,\n    forwardRef,\n    inject,\n    input,\n    linkedSignal,\n    output,\n    signal,\n    contentChildren,\n    viewChild,\n} from '@angular/core';\nimport { Params, QueryParamsHandling, RouterLink } from '@angular/router';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { KeyCode } from '@eui/ecl/core';\nimport { EclLinkDirective } from '@eui/ecl/components/ecl-link';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { EclMenuItem } from '../models/ecl-menu-item.model';\nimport { EclMenuItemKeydownEvent, EclMenuItemSelectEvent } from '../events/ecl-menu-item.event';\n\n/**\n * This component represents a sub-menu item, that is on the second level of the ecl-menu.\n * Adds some custom styling and functionality.\n */\n@Component({\n    selector: 'ecl-menu-mega-item',\n    templateUrl: './ecl-menu-mega-item.component.html',\n    imports: [NgTemplateOutlet, RouterLink],\n    styles: [\n        `\n            :host {\n                display: list-item;\n            }\n        `,\n    ],\n    host: {\n        'class': 'ecl-menu__subitem',\n        role: 'listitem',\n        '[class.ecl-menu__subitem--current]': 'isCurrent()',\n        '[class.ecl-menu__see-all]': 'isSeeAll()',\n        '(click)': 'onHostClick($event)',\n    },\n})\nexport class EclMenuMegaItemComponent extends ECLBaseDirective implements EclMenuItem, AfterViewInit {\n\n    readonly id = input<string>(undefined);\n    readonly label = input<string>(undefined);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    readonly routerLink = input<string | any[]>(null);\n    readonly queryParams = input<Params | null>(null);\n    readonly queryParamsHandling = input<QueryParamsHandling>(null);\n    readonly href = input('');\n    readonly target = input('');\n    readonly isCurrentInput = input(false, { alias: 'isCurrent', transform: booleanAttribute });\n    readonly isCurrent = linkedSignal(() => this.isCurrentInput());\n    /**\n     * An additional item, that represents a link.\n     */\n    readonly isSeeAll = input(false, { transform: booleanAttribute });\n    readonly linkExtraAttributes = input<Record<string, string>>(undefined);\n\n    readonly menuItemSelect = output<EclMenuItemSelectEvent>();\n    readonly menuItemKeydown = output<EclMenuItemKeydownEvent>();\n\n    readonly hasChildren = false;\n    readonly isExpanded = signal(true);\n    readonly children: EclMenuItem[] = [];\n\n    /**\n     * The actual link of the menu item.\n     */\n    protected readonly megaMenuLink = viewChild<ElementRef>('megaMenuLink');\n    /**\n     * If menu item includes any icon, added by the user (for example for 'external' link).\n     */\n    protected readonly iconComponents = contentChildren(forwardRef(() => EclIconComponent));\n    /**\n     * If menu item includes any links, added by the user.\n     */\n    protected readonly links = contentChildren(forwardRef(() => EclLinkDirective));\n\n    private renderer = inject(Renderer2);\n\n    ngAfterViewInit(): void {\n        this.manageContentChildren();\n        this.setExtraAttributesForLink(this.megaMenuLink()?.nativeElement, this.linkExtraAttributes());\n    }\n\n    /**\n     * When the item is the current active item, the 'aria-current' attribute is set to 'page'.\n     */\n    get ariaCurrent(): string | null {\n        return this.isCurrent() ? 'page' : null;\n    }\n\n    /**\n     *\n     * @param evt This event is emited, when the menu item is clicked.\n     */\n    onItemClick(evt: Event): void {\n        this.menuItemSelect.emit(new EclMenuItemSelectEvent(this, evt as MouseEvent));\n\n        if (!this.href()) {\n            evt.preventDefault();\n        }\n    }\n\n    /**\n     * Focus should be set on the underlying <a> element.\n     */\n    onFocus(): void {\n        this.megaMenuLink().nativeElement.focus();\n    }\n\n    onKeydown(evt: Event): void {\n        if ((evt as KeyboardEvent).key === KeyCode.ENTER) {\n            this.onItemClick(evt);\n        }\n        this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n    }\n\n    protected onHostClick(evt: MouseEvent): void {\n        evt.stopPropagation();\n    }\n\n    /**\n     * Adds specific classes to content children (icons or links).\n     */\n    private manageContentChildren(): void {\n        if (this.iconComponents()) {\n            setTimeout(() => {\n                this.iconComponents().forEach((icn) => {\n                    icn.baseDirective.class.set('ecl-menu__sublink-icon');\n                });\n            });\n        }\n\n        if (this.links()) {\n            setTimeout(() => {\n                this.links().forEach((icn) => {\n                    icn.class.set(icn.class() ? icn.class() + ' ecl-menu__sublink' : 'ecl-menu__sublink');\n                });\n            });\n        }\n    }\n\n    private setExtraAttributesForLink(link: HTMLElement, linkExtraAttributes: Record<string, string>): void {\n        if (linkExtraAttributes) {\n            Object.keys(linkExtraAttributes).forEach((key) =>{\n                if (key !== 'href' && key !== 'routerLink') {\n                    this.renderer.setAttribute(link, key, linkExtraAttributes[key]);\n                }\n            });\n        }\n    }\n}\n",
+            "sourceCode": "import {\n    AfterViewInit,\n    Component,\n    ElementRef,\n    Renderer2,\n    booleanAttribute,\n    forwardRef,\n    inject,\n    input,\n    linkedSignal,\n    output,\n    signal,\n    contentChildren,\n    viewChild,\n} from '@angular/core';\nimport { Params, QueryParamsHandling, RouterLink } from '@angular/router';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { KeyCode } from '@eui/ecl/core';\nimport { EclLinkDirective } from '@eui/ecl/components/ecl-link';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { EclMenuItem } from '../models/ecl-menu-item.model';\nimport { EclMenuItemKeydownEvent, EclMenuItemSelectEvent } from '../events/ecl-menu-item.event';\n\n/**\n * This component represents a sub-menu item, that is on the second level of the ecl-menu.\n * Adds some custom styling and functionality.\n */\n@Component({\n    selector: 'ecl-menu-mega-item',\n    templateUrl: './ecl-menu-mega-item.component.html',\n    imports: [NgTemplateOutlet, RouterLink],\n    styles: [\n        `\n            :host {\n                display: list-item;\n            }\n        `,\n    ],\n    host: {\n        'class': 'ecl-menu__subitem',\n        role: 'listitem',\n        '[class.ecl-menu__subitem--current]': 'isCurrent()',\n        '[class.ecl-menu__see-all]': 'isSeeAll()',\n        '(click)': 'onHostClick($event)',\n    },\n})\nexport class EclMenuMegaItemComponent extends ECLBaseDirective implements EclMenuItem, AfterViewInit {\n\n    readonly id = input<string>(undefined);\n    readonly label = input<string>(undefined);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    readonly routerLink = input<string | any[]>(null);\n    readonly queryParams = input<Params | null>(null);\n    readonly queryParamsHandling = input<QueryParamsHandling>(null);\n    readonly href = input('');\n    readonly target = input('');\n    readonly isCurrentInput = input(false, { alias: 'isCurrent', transform: booleanAttribute });\n    readonly isCurrent = linkedSignal(() => this.isCurrentInput());\n    /**\n     * An additional item, that represents a link.\n     */\n    readonly isSeeAll = input(false, { transform: booleanAttribute });\n    readonly linkExtraAttributes = input<Record<string, string>>(undefined);\n\n    readonly menuItemSelect = output<EclMenuItemSelectEvent>();\n    readonly menuItemKeydown = output<EclMenuItemKeydownEvent>();\n\n    readonly hasChildren = signal(false);\n    readonly isExpanded = signal(true);\n    readonly children = signal<EclMenuItem[]>([]);\n\n    /**\n     * The actual link of the menu item.\n     */\n    protected readonly megaMenuLink = viewChild<ElementRef>('megaMenuLink');\n    /**\n     * If menu item includes any icon, added by the user (for example for 'external' link).\n     */\n    protected readonly iconComponents = contentChildren(forwardRef(() => EclIconComponent));\n    /**\n     * If menu item includes any links, added by the user.\n     */\n    protected readonly links = contentChildren(forwardRef(() => EclLinkDirective));\n\n    private renderer = inject(Renderer2);\n\n    ngAfterViewInit(): void {\n        this.manageContentChildren();\n        this.setExtraAttributesForLink(this.megaMenuLink()?.nativeElement, this.linkExtraAttributes());\n    }\n\n    /**\n     * When the item is the current active item, the 'aria-current' attribute is set to 'page'.\n     */\n    get ariaCurrent(): string | null {\n        return this.isCurrent() ? 'page' : null;\n    }\n\n    /**\n     *\n     * @param evt This event is emited, when the menu item is clicked.\n     */\n    onItemClick(evt: Event): void {\n        this.menuItemSelect.emit(new EclMenuItemSelectEvent(this, evt as MouseEvent));\n\n        if (!this.href()) {\n            evt.preventDefault();\n        }\n    }\n\n    /**\n     * Focus should be set on the underlying <a> element.\n     */\n    onFocus(): void {\n        this.megaMenuLink().nativeElement.focus();\n    }\n\n    onKeydown(evt: Event): void {\n        if ((evt as KeyboardEvent).key === KeyCode.ENTER) {\n            this.onItemClick(evt);\n        }\n        this.menuItemKeydown.emit(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n    }\n\n    protected onHostClick(evt: MouseEvent): void {\n        evt.stopPropagation();\n    }\n\n    /**\n     * Adds specific classes to content children (icons or links).\n     */\n    private manageContentChildren(): void {\n        if (this.iconComponents()) {\n            setTimeout(() => {\n                this.iconComponents().forEach((icn) => {\n                    icn.baseDirective.class.set('ecl-menu__sublink-icon');\n                });\n            });\n        }\n\n        if (this.links()) {\n            setTimeout(() => {\n                this.links().forEach((icn) => {\n                    icn.class.set(icn.class() ? icn.class() + ' ecl-menu__sublink' : 'ecl-menu__sublink');\n                });\n            });\n        }\n    }\n\n    private setExtraAttributesForLink(link: HTMLElement, linkExtraAttributes: Record<string, string>): void {\n        if (linkExtraAttributes) {\n            Object.keys(linkExtraAttributes).forEach((key) =>{\n                if (key !== 'href' && key !== 'routerLink') {\n                    this.renderer.setAttribute(link, key, linkExtraAttributes[key]);\n                }\n            });\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n            :host {\n                display: list-item;\n            }\n        \n",