@eui/ecl 22.0.0-alpha.7 → 22.0.0-alpha.9

package/docs/json/documentation.json

@@ -5407,13 +5407,13 @@
         },
         {
             "name": "EclInpageNavigationSectionEnterEvent",
-            "id": "class-EclInpageNavigationSectionEnterEvent-5daafc90fdb4dbac03101fb1ec926edaec22dde8c7ba4699dcece0f2c2d48f01b9c51ed69bb59e72fd63be3a46eae2803257a7e8309d6a6dc7f5932d3148a469",
+            "id": "class-EclInpageNavigationSectionEnterEvent-906af88767bb0883baf4a3fa0272ddc605be045eba82e54505a7ed5052ca75dd4912d410edb6b1ebd61164ec4f483083128aa648e00be47dbc4458c5d1e5365f",
             "file": "packages/ecl/components/ecl-inpage-navigation/ecl-inpage-navigation.component.ts",
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';\nimport { ScrollDispatcher, ViewportRuler } from '@angular/cdk/scrolling';\nimport { isPlatformBrowser } from '@angular/common';\nimport { AfterViewInit, ChangeDetectorRef, Component, DOCUMENT, DoCheck, ElementRef, IterableDiffer, IterableDiffers, NgZone, OnDestroy, OnInit, PLATFORM_ID, afterNextRender, contentChild, contentChildren, inject, input, numberAttribute, output, viewChild } from '@angular/core';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_STICKY_CONTAINER } from '@eui/ecl/components/ecl-sticky-container';\nimport { ECLBaseDirective, EclBaseEvent, EclRtlService, EclThemeService } from '@eui/ecl/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { EclInpageNavigationItemComponent } from './ecl-inpage-navigation-item.component';\nimport { EclInpageNavigationListDirective } from './ecl-inpage-navigation-list.directive';\nimport { EclInpageNavigationService } from './services/ecl-inpage-navigation.service';\n\nexport class EclInpageNavigationSectionEnterEvent extends EclBaseEvent {\n    constructor(public sectionId: string) {\n        super();\n    }\n}\n\n/**\n * The in-page navigation is a vertical menu containing (anchored) links to H2-headings on long content pages.\n * It gives the user an overview of the page contents and has a fixed position (does not move while scrolling) at either the left\n * side of a page on desktop or top-bar on mobile. This component helps users scan of the page quickly contents and may potentially\n * reduce vertical scrolling, allowing users to easily jump straight to the segment of the page.\n */\n@Component({\n    selector: 'ecl-inpage-navigation',\n    templateUrl: './ecl-inpage-navigation.component.html',\n    imports: [TranslatePipe, ...EUI_ECL_STICKY_CONTAINER, ...EUI_ECL_ICON],\n    styles: [\n        `\n            @media (min-width: 996px) {\n                .ecl-inpage-navigation__list {\n                    display: block !important;\n                }\n            }\n        `,\n    ],\n})\nexport class EclInpageNavigationComponent extends ECLBaseDirective implements OnInit, AfterViewInit, OnDestroy, DoCheck {\n    eclThemeService = inject(EclThemeService);\n\n    readonly eclTitle = input<string>(undefined);\n    /**\n     * Used to calculate component's position.\n     */\n    readonly marginTop = input<number>(undefined);\n    readonly marginBottom = input<number>(undefined);\n    /**\n     * Sets the offset from the top of the page (for example if there is a toolbar or header). Used to calculate scrolling behaviour.\n     */\n    readonly offsetTop = input<number, unknown>(undefined, { transform: numberAttribute });\n    readonly togglerButton = viewChild<ElementRef<HTMLButtonElement>>('togglerButton');\n    readonly toggleWrapper = viewChild<ElementRef<HTMLDivElement>>('toggleWrapper');\n    readonly navTittle = viewChild<ElementRef<HTMLDivElement>>('navTittle');\n    /**\n     * This event will be emitted, when onscroll a new section becomes active.\n     */\n    readonly sectionEnter = output<EclInpageNavigationSectionEnterEvent>();\n\n    readonly eclNavigationLinkItems = contentChildren(EclInpageNavigationItemComponent, { descendants: true });\n    readonly eclNavigationList = contentChild(EclInpageNavigationListDirective);\n\n    /**\n     * Used for the mobile view, where user can select a section from the dropdown.\n     */\n    isButtonExpanded = false;\n    currentSectionElement: HTMLElement | null = null;\n    public isRtl = false;\n    public listMaxHeight: number;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private differ: IterableDiffer<EclInpageNavigationItemComponent>;\n    private isMobileBreakpoint = false;\n    private MIN_DISTANCE_TOP = 10;\n    /**\n     * Extra spacing (px) kept between the sticky toggler and the target heading when scrolling to a section on mobile,\n     * so the heading is not flush against the toggler. Mirrors the spacing buffer used by the vanilla ECL\n     * `scroll-margin-top` rule (trigger height + spacing).\n     */\n    private readonly MOBILE_SCROLL_SPACING = 16;\n    private readonly ICON_SIZE_EC_THEME = '2xs';\n    private readonly ICON_SIZE_EU_THEME = 's';\n    private readonly TABLET_BREAKPOINT = 996;\n    private intersectionObserver: IntersectionObserver;\n    private eclRtlService = inject(EclRtlService);\n    private differs = inject(IterableDiffers);\n    private scrollDispatcher: ScrollDispatcher = inject(ScrollDispatcher);\n    private zone = inject(NgZone);\n    private cdkBreakpointObserver = inject(BreakpointObserver);\n    private viewportRuler = inject(ViewportRuler);\n    private eclInpageNavigationService = inject(EclInpageNavigationService);\n    private cdr = inject(ChangeDetectorRef);\n    private readonly platformId = inject(PLATFORM_ID);\n    private readonly doc = inject(DOCUMENT);\n    private readonly win = this.doc.defaultView; // Window | null\n    private readonly isBrowser = isPlatformBrowser(this.platformId);\n\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.zone.run(() => this.setListHeight());\n        });\n    }\n\n    ngOnInit(): void {\n        this.handleRtlChangeState();\n    }\n\n    ngAfterViewInit() {\n        if (!this.isBrowser) return;\n\n        this.subscribeToCDKScrollEvent();\n        this.observeBreakpointChanges();\n        this.viewportRuler.change(300)\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(() => this.zone.run(() => this.setListHeight()));\n\n        const togglerButton = this.togglerButton();\n        if (typeof IntersectionObserver !== 'undefined' && togglerButton?.nativeElement) {\n            this.intersectionObserver = new IntersectionObserver(() => this.setListHeight());\n            this.intersectionObserver.observe(togglerButton.nativeElement);\n        }\n    }\n\n    get hasNavigationList(): boolean {\n        return !!this.eclNavigationList();\n    }\n\n    get currentNavigationLinkItem(): EclInpageNavigationItemComponent {\n        return this.eclNavigationLinkItems().find((item) => item.sectionElement === this.currentSectionElement);\n    }\n\n    /**\n     * the size of the arrow-down icon, used in mobile view. There are different sizes for EC and EU themes.\n     */\n    get sizeIcon(): string {\n        if (this.eclThemeService.isECTheme()) {\n            return this.ICON_SIZE_EC_THEME;\n        } else {\n            return this.ICON_SIZE_EU_THEME;\n        }\n    }\n\n    get hasActiveSection(): boolean {\n        return !!this.currentSectionElement;\n    }\n\n    ngDoCheck(): void {\n        const diff = this.differ.diff(this.eclNavigationLinkItems());\n        if (diff) {\n            diff.forEachItem((item) => {\n                this.connectItemEvents(item.item);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n        const togglerButton = this.togglerButton();\n        if (this.intersectionObserver && togglerButton?.nativeElement) {\n            this.intersectionObserver.unobserve(togglerButton.nativeElement);\n            this.intersectionObserver.disconnect();\n        }\n    }\n\n    /**\n     * On mobile view - handle the dropdown toggle.\n     */\n    onExpandButtonClick(): void {\n        this.setButtonExpanded(!this.isButtonExpanded);\n    }\n\n    /**\n     * Single entry point for changing the dropdown expanded state. Keeps the local flag (used for the button's\n     * aria-expanded) and the shared service state (that drives the list's visibility class) in sync.\n     */\n    private setButtonExpanded(isExpanded: boolean): void {\n        this.isButtonExpanded = isExpanded;\n        this.eclInpageNavigationService.eclInpageNavigationToggle(isExpanded);\n    }\n\n    /**\n     * Dropdown keyboard navigation on mobile view.\n     * @param evt\n     */\n    onExpandButtonKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case 'Tab':\n                this.onExpandButtonTab(evt);\n                break;\n            case 'ArrowDown':\n                this.onExpandButtonArrowDown(evt);\n                break;\n            default:\n                break;\n        }\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            this.isRtl = rtlState;\n        });\n    }\n\n    /**\n     * Set the height of the list with the navigation items in px. So in case the full list cannot be displayed, a scroll will appear.\n     */\n    private setListHeight(): void {\n        if (!this.isBrowser) return;\n        const eclNavigationList = this.eclNavigationList();\n        if (!eclNavigationList) return;\n        if (!this.win) return;\n\n        const viewportHeight = this.win.innerHeight;\n        const viewportWidth = this.win.innerWidth;\n        let topPosition = 0;\n\n        if (viewportWidth < this.TABLET_BREAKPOINT) {\n            const toggleWrapper = this.toggleWrapper()?.nativeElement;\n            if (toggleWrapper) {\n                const styles = this.win.getComputedStyle(toggleWrapper);\n                topPosition =\n                    toggleWrapper.getBoundingClientRect().bottom +\n                    parseFloat(styles.marginBottom || '0');\n            }\n        } else if (this.eclTitle()) {\n            const titleEl = this.navTittle()?.nativeElement;\n            if (titleEl) topPosition = titleEl.getBoundingClientRect().bottom;\n        } else {\n            const listEl = eclNavigationList?.el?.nativeElement;\n            if (listEl) topPosition = listEl.getBoundingClientRect().top;\n        }\n\n        const availableSpace = viewportHeight - topPosition;\n        if (availableSpace > 0) {\n            this.listMaxHeight = availableSpace;\n            eclNavigationList.maxHeight.set(this.listMaxHeight);\n        }\n    }\n\n    private onExpandButtonArrowDown(evt: Event): void {\n        evt.preventDefault();\n        this.setButtonExpanded(true);\n        this.eclNavigationLinkItems().at(0).onFocus();\n    }\n\n    private onExpandButtonTab(evt: Event): void {\n        if ((evt as KeyboardEvent).shiftKey) {\n            evt.preventDefault();\n            this.eclNavigationLinkItems().at(this.eclNavigationLinkItems().length - 1).onFocus();\n        }\n    }\n\n    private connectItemEvents(item: EclInpageNavigationItemComponent): void {\n        item.itemArrowDown.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemArrowDown(item);\n        });\n\n        item.itemArrowUp.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemArrowUp(item);\n        });\n\n        item.itemTab.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onItemTab(item, evt);\n        });\n\n        item.itemEnter.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemEnter(item);\n        });\n\n        item.itemClick.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.selectNavigationItem(item.sectionElement);\n            if (item.sectionElement) {\n                this.scrollToSection(item.sectionElement);\n                item.sectionElement.focus();\n            }\n            this.setButtonExpanded(false);\n        });\n    }\n\n    private onItemEnter(item: EclInpageNavigationItemComponent): void {\n        this.selectNavigationItem(item.sectionElement);\n        if (item.sectionElement) {\n            this.scrollToSection(item.sectionElement);\n            if (item.sectionElement.tabIndex === -1) {\n                item.sectionElement.tabIndex = 0;\n                item.sectionElement.focus();\n                item.sectionElement.tabIndex = -1;\n            }\n        }\n        this.setButtonExpanded(false);\n    }\n\n    /**\n     * Scrolls the target section into view. On desktop this is a plain scrollIntoView() (unchanged behaviour). On\n     * mobile the in-page navigation toggler is sticky at the top, so a top-aligned scroll would hide the heading\n     * underneath it; we therefore set `scroll-margin-top` on the target (sticky toggler height + spacing buffer) and\n     * let scrollIntoView() honour it. Using scroll-margin-top instead of a manual window.scrollTo() keeps this working\n     * regardless of which element is the actual scroll container (window or a nested scrollable wrapper).\n     */\n    private scrollToSection(sectionElement: HTMLElement): void {\n        if (!this.isBrowser) return;\n        const offset = this.getMobileScrollOffset();\n        sectionElement.style.scrollMarginTop = offset > 0 ? `${offset}px` : '';\n        sectionElement.scrollIntoView();\n    }\n\n    /**\n     * The offset (px) applied on mobile so that a scrolled-to heading clears the sticky toggler: the toggler height\n     * plus a spacing buffer. Returns 0 on desktop (no sticky toggler). Shared by the scroll logic and the scroll-spy\n     * so the heading lands exactly where the spy expects it, keeping the active item in sync after a click.\n     */\n    private getMobileScrollOffset(): number {\n        if (!this.isMobileBreakpoint) return 0;\n        const toggleWrapper = this.toggleWrapper()?.nativeElement;\n        if (!toggleWrapper) return 0;\n        return toggleWrapper.getBoundingClientRect().height + this.MOBILE_SCROLL_SPACING;\n    }\n\n    private onItemArrowDown(item: EclInpageNavigationItemComponent): void {\n        const index = this.eclNavigationLinkItems().indexOf(item);\n        const eclNavigationLinkItems = this.eclNavigationLinkItems();\n        if (index !== eclNavigationLinkItems.length - 1) {\n            eclNavigationLinkItems.at(index + 1).onFocus();\n        }\n    }\n\n    private onItemArrowUp(item: EclInpageNavigationItemComponent): void {\n        const index = this.eclNavigationLinkItems().indexOf(item);\n        if (index !== 0) {\n            this.eclNavigationLinkItems().at(index - 1).onFocus();\n        } else {\n            const togglerButton = this.togglerButton();\n            if (this.isMobileBreakpoint && togglerButton) {\n                this.setButtonExpanded(false);\n                togglerButton.nativeElement.focus();\n            }\n        }\n    }\n\n    private onItemTab(item: EclInpageNavigationItemComponent, evt: Event): void {\n        if (this.isMobileBreakpoint) {\n            if (!(evt as KeyboardEvent).shiftKey) {\n                const index = this.eclNavigationLinkItems().indexOf(item);\n                if (index === this.eclNavigationLinkItems().length - 1) {\n                    evt.preventDefault();\n                    this.togglerButton().nativeElement.focus();\n                }\n            }\n        }\n    }\n\n    private subscribeToCDKScrollEvent(): void {\n        if (!this.isBrowser) return;\n\n        this.scrollDispatcher\n            .scrolled()\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(() => {\n                this.zone.run(() => {\n                    const ids = this.eclNavigationLinkItems().map((item) => item.sectionId());\n\n                    const sectionElements = ids\n                        .map((id) => this.doc.querySelector<HTMLElement>(`#${id}`))\n                        .filter((el): el is HTMLElement => !!el);\n\n                    this.handleNavigationLinksHighlight(sectionElements);\n                    this.setListHeight();\n                });\n            });\n    }\n\n    private selectNavigationItem(itemElement: HTMLElement): void {\n        this.eclNavigationLinkItems().forEach((it) => {\n            it.isActive.set(it.sectionElement === itemElement);\n        });\n        this.cdr.markForCheck();\n    }\n\n    private handleNavigationLinksHighlight(sectionElements: HTMLElement[]): void {\n        const currentSectionElement = this.findActiveSectionElement(sectionElements);\n\n        if (currentSectionElement !== this.currentSectionElement) {\n            this.currentSectionElement = currentSectionElement ?? undefined as HTMLElement | null;\n            if (currentSectionElement) this.selectNavigationItem(currentSectionElement);\n\n            const sectionId = this.currentNavigationLinkItem?.sectionId();\n            this.sectionEnter.emit(new EclInpageNavigationSectionEnterEvent(sectionId));\n        }\n    }\n\n    private findActiveSectionElement(sectionElements: HTMLElement[]): HTMLElement | null {\n        if (!this.isBrowser || !this.win) return null;\n\n        let currentSection: HTMLElement | null = null;\n        // On mobile the heading is scrolled to sit just below the sticky toggler, so the spy must use that same\n        // offset; otherwise it would highlight the previous section. On desktop keep the original threshold.\n        const offset = this.isMobileBreakpoint\n            ? this.getMobileScrollOffset()\n            : this.MIN_DISTANCE_TOP + (this.offsetTop() ?? 0);\n\n        const isNearBottom =\n            this.win.innerHeight + this.win.scrollY >=\n            this.doc.documentElement.scrollHeight - 10;\n\n        for (const sectionElement of sectionElements) {\n            const rect = sectionElement.getBoundingClientRect();\n            const isAboveOffset = rect.top <= offset;\n            const isVisibleInViewport = rect.top < this.win.innerHeight;\n\n            if (isAboveOffset || (isVisibleInViewport && isNearBottom)) {\n                currentSection = sectionElement;\n            }\n        }\n\n        return currentSection;\n    }\n\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe([Breakpoints.Handset, Breakpoints.Tablet, Breakpoints.Small])\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((result) => {\n                this.isMobileBreakpoint = result.matches;\n            });\n    }\n}\n",
+            "sourceCode": "import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';\nimport { ScrollDispatcher, ViewportRuler } from '@angular/cdk/scrolling';\nimport { isPlatformBrowser } from '@angular/common';\nimport { AfterViewInit, ChangeDetectorRef, Component, DOCUMENT, DoCheck, ElementRef, IterableDiffer, IterableDiffers, NgZone, OnDestroy, OnInit, PLATFORM_ID, afterNextRender, contentChild, contentChildren, inject, input, numberAttribute, output, viewChild } from '@angular/core';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_STICKY_CONTAINER } from '@eui/ecl/components/ecl-sticky-container';\nimport { ECLBaseDirective, EclBaseEvent, EclRtlService, EclThemeService } from '@eui/ecl/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { EclInpageNavigationItemComponent } from './ecl-inpage-navigation-item.component';\nimport { EclInpageNavigationListDirective } from './ecl-inpage-navigation-list.directive';\nimport { EclInpageNavigationService } from './services/ecl-inpage-navigation.service';\n\nexport class EclInpageNavigationSectionEnterEvent extends EclBaseEvent {\n    constructor(public sectionId: string) {\n        super();\n    }\n}\n\n/**\n * The in-page navigation is a vertical menu containing (anchored) links to H2-headings on long content pages.\n * It gives the user an overview of the page contents and has a fixed position (does not move while scrolling) at either the left\n * side of a page on desktop or top-bar on mobile. This component helps users scan of the page quickly contents and may potentially\n * reduce vertical scrolling, allowing users to easily jump straight to the segment of the page.\n */\n@Component({\n    selector: 'ecl-inpage-navigation',\n    templateUrl: './ecl-inpage-navigation.component.html',\n    imports: [TranslatePipe, ...EUI_ECL_STICKY_CONTAINER, ...EUI_ECL_ICON],\n    styles: [\n        `\n            @media (min-width: 996px) {\n                .ecl-inpage-navigation__list {\n                    display: block !important;\n                }\n            }\n        `,\n    ],\n})\nexport class EclInpageNavigationComponent extends ECLBaseDirective implements OnInit, AfterViewInit, OnDestroy, DoCheck {\n    eclThemeService = inject(EclThemeService);\n\n    readonly eclTitle = input<string>(undefined);\n    /**\n     * Used to calculate component's position.\n     */\n    readonly marginTop = input<number>(undefined);\n    readonly marginBottom = input<number>(undefined);\n    /**\n     * Sets the offset from the top of the page (for example if there is a toolbar or header). Used to calculate scrolling behaviour.\n     */\n    readonly offsetTop = input<number, unknown>(undefined, { transform: numberAttribute });\n    readonly togglerButton = viewChild<ElementRef<HTMLButtonElement>>('togglerButton');\n    readonly toggleWrapper = viewChild<ElementRef<HTMLDivElement>>('toggleWrapper');\n    readonly navTittle = viewChild<ElementRef<HTMLDivElement>>('navTittle');\n    /**\n     * This event will be emitted, when onscroll a new section becomes active.\n     */\n    readonly sectionEnter = output<EclInpageNavigationSectionEnterEvent>();\n\n    readonly eclNavigationLinkItems = contentChildren(EclInpageNavigationItemComponent, { descendants: true });\n    readonly eclNavigationList = contentChild(EclInpageNavigationListDirective);\n\n    /**\n     * Used for the mobile view, where user can select a section from the dropdown.\n     */\n    isButtonExpanded = false;\n    currentSectionElement: HTMLElement | null = null;\n    public isRtl = false;\n    public listMaxHeight: number;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private differ: IterableDiffer<EclInpageNavigationItemComponent>;\n    private isMobileBreakpoint = false;\n    private MIN_DISTANCE_TOP = 10;\n    /**\n     * Extra spacing (px) kept between the sticky toggler and the target heading when scrolling to a section on mobile,\n     * so the heading is not flush against the toggler. Mirrors the spacing buffer used by the vanilla ECL\n     * `scroll-margin-top` rule (trigger height + spacing).\n     */\n    private readonly MOBILE_SCROLL_SPACING = 16;\n    private readonly ICON_SIZE_EC_THEME = '2xs';\n    private readonly ICON_SIZE_EU_THEME = 's';\n    private readonly TABLET_BREAKPOINT = 996;\n    private intersectionObserver: IntersectionObserver;\n    private eclRtlService = inject(EclRtlService);\n    private differs = inject(IterableDiffers);\n    private scrollDispatcher: ScrollDispatcher = inject(ScrollDispatcher);\n    private zone = inject(NgZone);\n    private cdkBreakpointObserver = inject(BreakpointObserver);\n    private viewportRuler = inject(ViewportRuler);\n    private eclInpageNavigationService = inject(EclInpageNavigationService);\n    private cdr = inject(ChangeDetectorRef);\n    private readonly platformId = inject(PLATFORM_ID);\n    private readonly doc = inject(DOCUMENT);\n    private readonly win = this.doc.defaultView; // Window | null\n    private readonly isBrowser = isPlatformBrowser(this.platformId);\n\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.zone.run(() => this.setListHeight());\n        });\n    }\n\n    ngOnInit(): void {\n        this.handleRtlChangeState();\n    }\n\n    ngAfterViewInit() {\n        if (!this.isBrowser) return;\n\n        this.subscribeToCDKScrollEvent();\n        this.observeBreakpointChanges();\n        this.viewportRuler.change(300)\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(() => this.zone.run(() => this.setListHeight()));\n\n        const togglerButton = this.togglerButton();\n        if (typeof IntersectionObserver !== 'undefined' && togglerButton?.nativeElement) {\n            this.intersectionObserver = new IntersectionObserver(() => this.setListHeight());\n            this.intersectionObserver.observe(togglerButton.nativeElement);\n        }\n    }\n\n    get hasNavigationList(): boolean {\n        return !!this.eclNavigationList();\n    }\n\n    get currentNavigationLinkItem(): EclInpageNavigationItemComponent {\n        return this.eclNavigationLinkItems().find((item) => item.sectionElement === this.currentSectionElement);\n    }\n\n    /**\n     * the size of the arrow-down icon, used in mobile view. There are different sizes for EC and EU themes.\n     */\n    get sizeIcon(): string {\n        if (this.eclThemeService.isECTheme()) {\n            return this.ICON_SIZE_EC_THEME;\n        } else {\n            return this.ICON_SIZE_EU_THEME;\n        }\n    }\n\n    get hasActiveSection(): boolean {\n        return !!this.currentSectionElement;\n    }\n\n    ngDoCheck(): void {\n        const diff = this.differ.diff(this.eclNavigationLinkItems());\n        if (diff) {\n            diff.forEachItem((item) => {\n                this.connectItemEvents(item.item);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n        const togglerButton = this.togglerButton();\n        if (this.intersectionObserver && togglerButton?.nativeElement) {\n            this.intersectionObserver.unobserve(togglerButton.nativeElement);\n            this.intersectionObserver.disconnect();\n        }\n    }\n\n    /**\n     * On mobile view - handle the dropdown toggle.\n     */\n    onExpandButtonClick(): void {\n        this.setButtonExpanded(!this.isButtonExpanded);\n    }\n\n    /**\n     * Single entry point for changing the dropdown expanded state. Keeps the local flag (used for the button's\n     * aria-expanded) and the shared service state (that drives the list's visibility class) in sync.\n     */\n    private setButtonExpanded(isExpanded: boolean): void {\n        this.isButtonExpanded = isExpanded;\n        this.eclInpageNavigationService.eclInpageNavigationToggle(isExpanded);\n    }\n\n    /**\n     * Dropdown keyboard navigation on mobile view.\n     * @param evt\n     */\n    onExpandButtonKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case 'Tab':\n                this.onExpandButtonTab(evt);\n                break;\n            case 'ArrowDown':\n                this.onExpandButtonArrowDown(evt);\n                break;\n            default:\n                break;\n        }\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            this.isRtl = rtlState;\n        });\n    }\n\n    /**\n     * Set the height of the list with the navigation items in px. So in case the full list cannot be displayed, a scroll will appear.\n     */\n    private setListHeight(): void {\n        if (!this.isBrowser) return;\n        const eclNavigationList = this.eclNavigationList();\n        if (!eclNavigationList) return;\n        if (!this.win) return;\n\n        const viewportHeight = this.win.innerHeight;\n        const viewportWidth = this.win.innerWidth;\n        let topPosition = 0;\n\n        if (viewportWidth < this.TABLET_BREAKPOINT) {\n            const toggleWrapper = this.toggleWrapper()?.nativeElement;\n            if (toggleWrapper) {\n                const styles = this.win.getComputedStyle(toggleWrapper);\n                topPosition =\n                    toggleWrapper.getBoundingClientRect().bottom +\n                    parseFloat(styles.marginBottom || '0');\n            }\n        } else if (this.eclTitle()) {\n            const titleEl = this.navTittle()?.nativeElement;\n            if (titleEl) topPosition = titleEl.getBoundingClientRect().bottom;\n        } else {\n            const listEl = eclNavigationList?.el?.nativeElement;\n            if (listEl) topPosition = listEl.getBoundingClientRect().top;\n        }\n\n        const availableSpace = viewportHeight - topPosition;\n        if (availableSpace > 0) {\n            this.listMaxHeight = availableSpace;\n            eclNavigationList.maxHeight.set(this.listMaxHeight);\n        }\n    }\n\n    private onExpandButtonArrowDown(evt: Event): void {\n        evt.preventDefault();\n        this.setButtonExpanded(true);\n        this.eclNavigationLinkItems().at(0).onFocus();\n    }\n\n    private onExpandButtonTab(evt: Event): void {\n        if ((evt as KeyboardEvent).shiftKey) {\n            evt.preventDefault();\n            this.eclNavigationLinkItems().at(this.eclNavigationLinkItems().length - 1).onFocus();\n        }\n    }\n\n    private connectItemEvents(item: EclInpageNavigationItemComponent): void {\n        item.itemArrowDown.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemArrowDown(item);\n        });\n\n        item.itemArrowUp.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemArrowUp(item);\n        });\n\n        item.itemTab.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onItemTab(item, evt);\n        });\n\n        item.itemEnter.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemEnter(item);\n        });\n\n        item.itemClick.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.selectNavigationItem(item.sectionElement);\n            if (item.sectionElement) {\n                this.scrollToSection(item.sectionElement);\n                item.sectionElement.focus();\n            }\n            this.setButtonExpanded(false);\n        });\n    }\n\n    private onItemEnter(item: EclInpageNavigationItemComponent): void {\n        this.selectNavigationItem(item.sectionElement);\n        if (item.sectionElement) {\n            this.scrollToSection(item.sectionElement);\n            if (item.sectionElement.tabIndex === -1) {\n                item.sectionElement.tabIndex = 0;\n                item.sectionElement.focus();\n                item.sectionElement.tabIndex = -1;\n            }\n        }\n        this.setButtonExpanded(false);\n    }\n\n    /**\n     * Scrolls the target section into view. On desktop this is a plain scrollIntoView() (unchanged behaviour). On\n     * mobile the in-page navigation toggler is sticky at the top, so a top-aligned scroll would hide the heading\n     * underneath it; we therefore set `scroll-margin-top` on the target (sticky toggler height + spacing buffer) and\n     * let scrollIntoView() honour it. Using scroll-margin-top instead of a manual window.scrollTo() keeps this working\n     * regardless of which element is the actual scroll container (window or a nested scrollable wrapper).\n     */\n    private scrollToSection(sectionElement: HTMLElement): void {\n        if (!this.isBrowser) return;\n        const offset = this.getMobileScrollOffset();\n        sectionElement.style.scrollMarginTop = offset > 0 ? `${offset}px` : '';\n        sectionElement.scrollIntoView();\n    }\n\n    /**\n     * The offset (px) applied on mobile so that a scrolled-to heading clears the sticky toggler: the toggler height\n     * plus a spacing buffer. Returns 0 on desktop (no sticky toggler). Shared by the scroll logic and the scroll-spy\n     * so the heading lands exactly where the spy expects it, keeping the active item in sync after a click.\n     */\n    private getMobileScrollOffset(): number {\n        if (!this.isMobileBreakpoint) return 0;\n        const toggleWrapper = this.toggleWrapper()?.nativeElement;\n        if (!toggleWrapper) return 0;\n        return toggleWrapper.getBoundingClientRect().height + this.MOBILE_SCROLL_SPACING;\n    }\n\n    private onItemArrowDown(item: EclInpageNavigationItemComponent): void {\n        const index = this.eclNavigationLinkItems().indexOf(item);\n        const eclNavigationLinkItems = this.eclNavigationLinkItems();\n        if (index !== eclNavigationLinkItems.length - 1) {\n            eclNavigationLinkItems.at(index + 1).onFocus();\n        }\n    }\n\n    private onItemArrowUp(item: EclInpageNavigationItemComponent): void {\n        const index = this.eclNavigationLinkItems().indexOf(item);\n        if (index !== 0) {\n            this.eclNavigationLinkItems().at(index - 1).onFocus();\n        } else {\n            const togglerButton = this.togglerButton();\n            if (this.isMobileBreakpoint && togglerButton) {\n                this.setButtonExpanded(false);\n                togglerButton.nativeElement.focus();\n            }\n        }\n    }\n\n    private onItemTab(item: EclInpageNavigationItemComponent, evt: Event): void {\n        if (this.isMobileBreakpoint) {\n            if (!(evt as KeyboardEvent).shiftKey) {\n                const index = this.eclNavigationLinkItems().indexOf(item);\n                if (index === this.eclNavigationLinkItems().length - 1) {\n                    evt.preventDefault();\n                    this.togglerButton().nativeElement.focus();\n                }\n            }\n        }\n    }\n\n    private subscribeToCDKScrollEvent(): void {\n        if (!this.isBrowser) return;\n\n        this.scrollDispatcher\n            .scrolled()\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(() => {\n                this.zone.run(() => {\n                    const ids = this.eclNavigationLinkItems().map((item) => item.sectionId());\n\n                    const sectionElements = ids\n                        .map((id) => this.doc.querySelector<HTMLElement>(`#${id}`))\n                        .filter((el): el is HTMLElement => !!el);\n\n                    this.handleNavigationLinksHighlight(sectionElements);\n                    this.setListHeight();\n                });\n            });\n    }\n\n    private selectNavigationItem(itemElement: HTMLElement): void {\n        this.eclNavigationLinkItems().forEach((it) => {\n            it.isActive.set(it.sectionElement === itemElement);\n        });\n        this.cdr.markForCheck();\n    }\n\n    private handleNavigationLinksHighlight(sectionElements: HTMLElement[]): void {\n        const currentSectionElement = this.findActiveSectionElement(sectionElements);\n\n        if (currentSectionElement !== this.currentSectionElement) {\n            this.currentSectionElement = currentSectionElement ?? undefined as HTMLElement | null;\n            if (currentSectionElement) this.selectNavigationItem(currentSectionElement);\n\n            const sectionId = this.currentNavigationLinkItem?.sectionId();\n            this.sectionEnter.emit(new EclInpageNavigationSectionEnterEvent(sectionId));\n        }\n    }\n\n    private findActiveSectionElement(sectionElements: HTMLElement[]): HTMLElement | null {\n        if (!this.isBrowser || !this.win) return null;\n\n        let currentSection: HTMLElement | null = null;\n        // On mobile the heading is scrolled to sit just below the sticky toggler, so the spy must use that same\n        // offset; otherwise it would highlight the previous section. The extra MIN_DISTANCE_TOP is a cushion so a\n        // heading that lands right on the boundary (sub-pixel rounding) is still treated as \"reached\". On desktop\n        // keep the original threshold.\n        const offset = this.isMobileBreakpoint\n            ? this.getMobileScrollOffset() + this.MIN_DISTANCE_TOP\n            : this.MIN_DISTANCE_TOP + (this.offsetTop() ?? 0);\n\n        const isNearBottom =\n            this.win.innerHeight + this.win.scrollY >=\n            this.doc.documentElement.scrollHeight - 10;\n\n        for (const sectionElement of sectionElements) {\n            const rect = sectionElement.getBoundingClientRect();\n            const isAboveOffset = rect.top <= offset;\n            const isVisibleInViewport = rect.top < this.win.innerHeight;\n\n            if (isAboveOffset || (isVisibleInViewport && isNearBottom)) {\n                currentSection = sectionElement;\n            }\n        }\n\n        return currentSection;\n    }\n\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe([Breakpoints.Handset, Breakpoints.Tablet, Breakpoints.Small])\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((result) => {\n                this.isMobileBreakpoint = result.matches;\n            });\n    }\n}\n",
             "displayName": "EclInpageNavigationSectionEnterEvent",
             "constructorObj": {
                 "name": "constructor",
@@ -24999,12 +24999,12 @@
         },
         {
             "name": "EclMegaMenuContainerDirective",
-            "id": "directive-EclMegaMenuContainerDirective-1e5d3c093e2b8e37b451626dfb7a379b4bee63ab33c5637064bd25d153eb43349c2863da225fe5d8ae25978b71cad22ae01f4d93dbacd512bad964aabc3c262a",
+            "id": "directive-EclMegaMenuContainerDirective-22c6911e935dac97d20ff07f3836e767527e534fdde634b561ceca8e3d6c6fb9e8c04a7344bf6b5b9bd44c71d0947370ff25f8765bb908e3060ce255b398676f",
             "file": "packages/ecl/components/ecl-mega-menu/directives/ecl-mega-menu-container.directive.ts",
             "type": "directive",
             "description": "<p>Directive that adds specific class to the mega-menu container.</p>\n",
             "rawdescription": "\n\nDirective that adds specific class to the mega-menu container.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that adds specific class to the mega-menu container.\n */\n@Directive({\n     \n    selector: 'div[eclMegaMenuContainer]',\n})\n\nexport class EclMegaMenuContainerDirective extends ECLBaseDirective {\n\n    @HostBinding('class.ecl') hasClass = true;\n}\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that adds specific class to the mega-menu container.\n */\n@Directive({\n    selector: 'div[eclMegaMenuContainer]',\n    host: {\n        class: 'ecl',\n    },\n})\n\nexport class EclMegaMenuContainerDirective extends ECLBaseDirective {\n}\n",
             "selector": "div[eclMegaMenuContainer]",
             "providers": [],
             "hostDirectives": [],
@@ -25057,46 +25057,9 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl",
-                    "actualName": "hasClass",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 14,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "hasClass",
-                    "coverageIgnore": false,
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 14,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "getCssClasses",
@@ -25140,8 +25103,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 180,
+                    "pos": 94,
+                    "end": 167,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -25165,12 +25128,12 @@
         },
         {
             "name": "EclMegaMenuFeaturedImageDirective",
-            "id": "directive-EclMegaMenuFeaturedImageDirective-7360f4dbf768522edcfd43953e3e42e787ddf9fe181363fed08235b9734661e9e7e8d0464ec6348524ff5781a1457c239339fae9edae146b7c4be9425f4c1471",
+            "id": "directive-EclMegaMenuFeaturedImageDirective-ba38ee88ef7cb65e7a7680d7cc622ba992dd904ac7f0f272600f3cbdb9ee72e8aff4d4f96f0df076b708c33c90b403c8354677f2d6c9f5355286a3afaf0fb06a",
             "file": "packages/ecl/components/ecl-mega-menu/directives/ecl-mega-menu-featured-picture.directive.ts",
             "type": "directive",
             "description": "<p>Directive that adds specific class to the mega-menu featured image.</p>\n",
             "rawdescription": "\n\nDirective that adds specific class to the mega-menu featured image.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that adds specific class to the mega-menu featured picture.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedPicture]',\n})\nexport class EclMegaMenuFeaturedPictureDirective extends ECLBaseDirective {\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-picture ecl-mega-menu__featured-picture')].join(' ').trim();\n    }\n}\n\n/**\n * Directive that adds specific class to the mega-menu featured image.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedImage]',\n})\nexport class EclMegaMenuFeaturedImageDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-mega-menu__featured-image') cmpClass = true;\n}\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that adds specific class to the mega-menu featured picture.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedPicture]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclMegaMenuFeaturedPictureDirective extends ECLBaseDirective {\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-picture ecl-mega-menu__featured-picture')].join(' ').trim();\n    }\n}\n\n/**\n * Directive that adds specific class to the mega-menu featured image.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedImage]',\n    host: {\n        class: 'ecl-mega-menu__featured-image',\n    },\n})\nexport class EclMegaMenuFeaturedImageDirective extends ECLBaseDirective {\n}\n",
             "selector": "[eclMegaMenuFeaturedImage]",
             "providers": [],
             "hostDirectives": [],
@@ -25223,46 +25186,9 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-mega-menu__featured-image",
-                    "actualName": "cmpClass",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 24,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "cmpClass",
-                    "coverageIgnore": false,
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 24,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-mega-menu__featured-image'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "getCssClasses",
@@ -25306,8 +25232,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 494,
-                    "end": 572,
+                    "pos": 507,
+                    "end": 585,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -25331,12 +25257,12 @@
         },
         {
             "name": "EclMegaMenuFeaturedListDirective",
-            "id": "directive-EclMegaMenuFeaturedListDirective-8c5a53f3bf58dcf67627aae2b9411f4caaf0ebe7ab2df1e1c8b00aa9e08d190b8306b8eb1a79fd61fc62324fdc39f48fb604c316b58c75f9a4ad2c65be26dd6a",
+            "id": "directive-EclMegaMenuFeaturedListDirective-e6dcc6add426bd26cffc669cd287c91721bddaef3eea809b9f5180cbadd117aabb1eb6506c3e8081640d4173c08818444474ba0a9110da3dbc4c5b52c6d081d3",
             "file": "packages/ecl/components/ecl-mega-menu/directives/ecl-mega-menu-featured-list.directive.ts",
             "type": "directive",
             "description": "<p>Directive that adds specific class to the mega-menu featured list.</p>\n",
             "rawdescription": "\n\nDirective that adds specific class to the mega-menu featured list.\n",
-            "sourceCode": "import { Directive, HostBinding, ElementRef, inject, Input, booleanAttribute } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that adds specific class to the mega-menu featured list.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedList]',\n})\nexport class EclMegaMenuFeaturedListDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-mega-menu__featured-list') cmpClass = true;\n}\n\n/**\n * Directive that adds specific class to a mega-menu featured list item.\n * Also has method that returns item height.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedListItem]',\n})\nexport class EclMegaMenuFeaturedListItemDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-mega-menu__featured-list__item') cmpClass = true;\n\n    @HostBinding('class.ecl-mega-menu__featured-list__item--image-only')\n    @Input({ transform: booleanAttribute }) isImageOnly = false;\n\n    @HostBinding('class.ecl-mega-menu__featured-list__item--combo')\n    @Input({ transform: booleanAttribute }) isCombo = false;\n\n    private el = inject(ElementRef);\n\n    getEclMegaMenuFeaturedItemHeight(): number {\n        const computedStyle = window.getComputedStyle(this.el.nativeElement);\n        return this.el.nativeElement.scrollHeight + parseFloat(computedStyle.marginBottom) + parseFloat(computedStyle.marginTop);\n    }\n}\n\n@Directive({\n    selector: '[eclMegaMenuFeaturedListItemDescription]',\n})\nexport class EclMegaMenuFeaturedListItemDescriptionDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-mega-menu__featured-list__item-description') cmpClass = true;\n}\n",
+            "sourceCode": "import { Directive, ElementRef, inject, input, booleanAttribute } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that adds specific class to the mega-menu featured list.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedList]',\n    host: {\n        class: 'ecl-mega-menu__featured-list',\n    },\n})\nexport class EclMegaMenuFeaturedListDirective extends ECLBaseDirective {\n}\n\n/**\n * Directive that adds specific class to a mega-menu featured list item.\n * Also has method that returns item height.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedListItem]',\n    host: {\n        class: 'ecl-mega-menu__featured-list__item',\n        '[class.ecl-mega-menu__featured-list__item--image-only]': 'isImageOnly()',\n        '[class.ecl-mega-menu__featured-list__item--combo]': 'isCombo()',\n    },\n})\nexport class EclMegaMenuFeaturedListItemDirective extends ECLBaseDirective {\n    readonly isImageOnly = input(false, { transform: booleanAttribute });\n\n    readonly isCombo = input(false, { transform: booleanAttribute });\n\n    private el = inject(ElementRef);\n\n    getEclMegaMenuFeaturedItemHeight(): number {\n        const computedStyle = window.getComputedStyle(this.el.nativeElement);\n        return this.el.nativeElement.scrollHeight + parseFloat(computedStyle.marginBottom) + parseFloat(computedStyle.marginTop);\n    }\n}\n\n@Directive({\n    selector: '[eclMegaMenuFeaturedListItemDescription]',\n    host: {\n        class: 'ecl-mega-menu__featured-list__item-description',\n    },\n})\nexport class EclMegaMenuFeaturedListItemDescriptionDirective extends ECLBaseDirective {\n}\n",
             "selector": "[eclMegaMenuFeaturedList]",
             "providers": [],
             "hostDirectives": [],
@@ -25389,46 +25315,9 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-mega-menu__featured-list",
-                    "actualName": "cmpClass",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 11,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "cmpClass",
-                    "coverageIgnore": false,
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 11,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-mega-menu__featured-list'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "getCssClasses",
@@ -25472,8 +25361,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 152,
-                    "end": 229,
+                    "pos": 139,
+                    "end": 216,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -25497,12 +25386,12 @@
         },
         {
             "name": "EclMegaMenuFeaturedListItemDescriptionDirective",
-            "id": "directive-EclMegaMenuFeaturedListItemDescriptionDirective-8c5a53f3bf58dcf67627aae2b9411f4caaf0ebe7ab2df1e1c8b00aa9e08d190b8306b8eb1a79fd61fc62324fdc39f48fb604c316b58c75f9a4ad2c65be26dd6a",
+            "id": "directive-EclMegaMenuFeaturedListItemDescriptionDirective-e6dcc6add426bd26cffc669cd287c91721bddaef3eea809b9f5180cbadd117aabb1eb6506c3e8081640d4173c08818444474ba0a9110da3dbc4c5b52c6d081d3",
             "file": "packages/ecl/components/ecl-mega-menu/directives/ecl-mega-menu-featured-list.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { Directive, HostBinding, ElementRef, inject, Input, booleanAttribute } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that adds specific class to the mega-menu featured list.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedList]',\n})\nexport class EclMegaMenuFeaturedListDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-mega-menu__featured-list') cmpClass = true;\n}\n\n/**\n * Directive that adds specific class to a mega-menu featured list item.\n * Also has method that returns item height.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedListItem]',\n})\nexport class EclMegaMenuFeaturedListItemDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-mega-menu__featured-list__item') cmpClass = true;\n\n    @HostBinding('class.ecl-mega-menu__featured-list__item--image-only')\n    @Input({ transform: booleanAttribute }) isImageOnly = false;\n\n    @HostBinding('class.ecl-mega-menu__featured-list__item--combo')\n    @Input({ transform: booleanAttribute }) isCombo = false;\n\n    private el = inject(ElementRef);\n\n    getEclMegaMenuFeaturedItemHeight(): number {\n        const computedStyle = window.getComputedStyle(this.el.nativeElement);\n        return this.el.nativeElement.scrollHeight + parseFloat(computedStyle.marginBottom) + parseFloat(computedStyle.marginTop);\n    }\n}\n\n@Directive({\n    selector: '[eclMegaMenuFeaturedListItemDescription]',\n})\nexport class EclMegaMenuFeaturedListItemDescriptionDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-mega-menu__featured-list__item-description') cmpClass = true;\n}\n",
+            "sourceCode": "import { Directive, ElementRef, inject, input, booleanAttribute } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that adds specific class to the mega-menu featured list.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedList]',\n    host: {\n        class: 'ecl-mega-menu__featured-list',\n    },\n})\nexport class EclMegaMenuFeaturedListDirective extends ECLBaseDirective {\n}\n\n/**\n * Directive that adds specific class to a mega-menu featured list item.\n * Also has method that returns item height.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedListItem]',\n    host: {\n        class: 'ecl-mega-menu__featured-list__item',\n        '[class.ecl-mega-menu__featured-list__item--image-only]': 'isImageOnly()',\n        '[class.ecl-mega-menu__featured-list__item--combo]': 'isCombo()',\n    },\n})\nexport class EclMegaMenuFeaturedListItemDirective extends ECLBaseDirective {\n    readonly isImageOnly = input(false, { transform: booleanAttribute });\n\n    readonly isCombo = input(false, { transform: booleanAttribute });\n\n    private el = inject(ElementRef);\n\n    getEclMegaMenuFeaturedItemHeight(): number {\n        const computedStyle = window.getComputedStyle(this.el.nativeElement);\n        return this.el.nativeElement.scrollHeight + parseFloat(computedStyle.marginBottom) + parseFloat(computedStyle.marginTop);\n    }\n}\n\n@Directive({\n    selector: '[eclMegaMenuFeaturedListItemDescription]',\n    host: {\n        class: 'ecl-mega-menu__featured-list__item-description',\n    },\n})\nexport class EclMegaMenuFeaturedListItemDescriptionDirective extends ECLBaseDirective {\n}\n",
             "selector": "[eclMegaMenuFeaturedListItemDescription]",
             "providers": [],
             "hostDirectives": [],
@@ -25555,46 +25444,9 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-mega-menu__featured-list__item-description",
-                    "actualName": "cmpClass",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 42,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "cmpClass",
-                    "coverageIgnore": false,
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 42,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-mega-menu__featured-list__item-description'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "getCssClasses",
@@ -25651,42 +25503,50 @@
         },
         {
             "name": "EclMegaMenuFeaturedListItemDirective",
-            "id": "directive-EclMegaMenuFeaturedListItemDirective-8c5a53f3bf58dcf67627aae2b9411f4caaf0ebe7ab2df1e1c8b00aa9e08d190b8306b8eb1a79fd61fc62324fdc39f48fb604c316b58c75f9a4ad2c65be26dd6a",
+            "id": "directive-EclMegaMenuFeaturedListItemDirective-e6dcc6add426bd26cffc669cd287c91721bddaef3eea809b9f5180cbadd117aabb1eb6506c3e8081640d4173c08818444474ba0a9110da3dbc4c5b52c6d081d3",
             "file": "packages/ecl/components/ecl-mega-menu/directives/ecl-mega-menu-featured-list.directive.ts",
             "type": "directive",
             "description": "<p>Directive that adds specific class to a mega-menu featured list item.\nAlso has method that returns item height.</p>\n",
             "rawdescription": "\n\nDirective that adds specific class to a mega-menu featured list item.\nAlso has method that returns item height.\n",
-            "sourceCode": "import { Directive, HostBinding, ElementRef, inject, Input, booleanAttribute } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that adds specific class to the mega-menu featured list.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedList]',\n})\nexport class EclMegaMenuFeaturedListDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-mega-menu__featured-list') cmpClass = true;\n}\n\n/**\n * Directive that adds specific class to a mega-menu featured list item.\n * Also has method that returns item height.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedListItem]',\n})\nexport class EclMegaMenuFeaturedListItemDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-mega-menu__featured-list__item') cmpClass = true;\n\n    @HostBinding('class.ecl-mega-menu__featured-list__item--image-only')\n    @Input({ transform: booleanAttribute }) isImageOnly = false;\n\n    @HostBinding('class.ecl-mega-menu__featured-list__item--combo')\n    @Input({ transform: booleanAttribute }) isCombo = false;\n\n    private el = inject(ElementRef);\n\n    getEclMegaMenuFeaturedItemHeight(): number {\n        const computedStyle = window.getComputedStyle(this.el.nativeElement);\n        return this.el.nativeElement.scrollHeight + parseFloat(computedStyle.marginBottom) + parseFloat(computedStyle.marginTop);\n    }\n}\n\n@Directive({\n    selector: '[eclMegaMenuFeaturedListItemDescription]',\n})\nexport class EclMegaMenuFeaturedListItemDescriptionDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-mega-menu__featured-list__item-description') cmpClass = true;\n}\n",
+            "sourceCode": "import { Directive, ElementRef, inject, input, booleanAttribute } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that adds specific class to the mega-menu featured list.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedList]',\n    host: {\n        class: 'ecl-mega-menu__featured-list',\n    },\n})\nexport class EclMegaMenuFeaturedListDirective extends ECLBaseDirective {\n}\n\n/**\n * Directive that adds specific class to a mega-menu featured list item.\n * Also has method that returns item height.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedListItem]',\n    host: {\n        class: 'ecl-mega-menu__featured-list__item',\n        '[class.ecl-mega-menu__featured-list__item--image-only]': 'isImageOnly()',\n        '[class.ecl-mega-menu__featured-list__item--combo]': 'isCombo()',\n    },\n})\nexport class EclMegaMenuFeaturedListItemDirective extends ECLBaseDirective {\n    readonly isImageOnly = input(false, { transform: booleanAttribute });\n\n    readonly isCombo = input(false, { transform: booleanAttribute });\n\n    private el = inject(ElementRef);\n\n    getEclMegaMenuFeaturedItemHeight(): number {\n        const computedStyle = window.getComputedStyle(this.el.nativeElement);\n        return this.el.nativeElement.scrollHeight + parseFloat(computedStyle.marginBottom) + parseFloat(computedStyle.marginTop);\n    }\n}\n\n@Directive({\n    selector: '[eclMegaMenuFeaturedListItemDescription]',\n    host: {\n        class: 'ecl-mega-menu__featured-list__item-description',\n    },\n})\nexport class EclMegaMenuFeaturedListItemDescriptionDirective extends ECLBaseDirective {\n}\n",
             "selector": "[eclMegaMenuFeaturedListItem]",
             "providers": [],
             "hostDirectives": [],
             "standalone": false,
             "inputsClass": [
                 {
-                    "coverageIgnore": false,
-                    "required": false,
                     "name": "isCombo",
+                    "coverageIgnore": false,
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 28,
                     "type": "boolean",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 31,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
-                    "coverageIgnore": false,
-                    "required": false,
                     "name": "isImageOnly",
+                    "coverageIgnore": false,
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 25,
                     "type": "boolean",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 29,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
                     "coverageIgnore": false,
@@ -25735,46 +25595,9 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-mega-menu__featured-list__item",
-                    "actualName": "cmpClass",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 22,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "cmpClass",
-                    "coverageIgnore": false,
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 22,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-mega-menu__featured-list__item'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "getEclMegaMenuFeaturedItemHeight",
@@ -25783,7 +25606,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 32,
+                    "line": 35,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -25831,8 +25654,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 437,
-                    "end": 562,
+                    "pos": 418,
+                    "end": 543,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -25856,12 +25679,12 @@
         },
         {
             "name": "EclMegaMenuFeaturedPictureDirective",
-            "id": "directive-EclMegaMenuFeaturedPictureDirective-7360f4dbf768522edcfd43953e3e42e787ddf9fe181363fed08235b9734661e9e7e8d0464ec6348524ff5781a1457c239339fae9edae146b7c4be9425f4c1471",
+            "id": "directive-EclMegaMenuFeaturedPictureDirective-ba38ee88ef7cb65e7a7680d7cc622ba992dd904ac7f0f272600f3cbdb9ee72e8aff4d4f96f0df076b708c33c90b403c8354677f2d6c9f5355286a3afaf0fb06a",
             "file": "packages/ecl/components/ecl-mega-menu/directives/ecl-mega-menu-featured-picture.directive.ts",
             "type": "directive",
             "description": "<p>Directive that adds specific class to the mega-menu featured picture.</p>\n",
             "rawdescription": "\n\nDirective that adds specific class to the mega-menu featured picture.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that adds specific class to the mega-menu featured picture.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedPicture]',\n})\nexport class EclMegaMenuFeaturedPictureDirective extends ECLBaseDirective {\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-picture ecl-mega-menu__featured-picture')].join(' ').trim();\n    }\n}\n\n/**\n * Directive that adds specific class to the mega-menu featured image.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedImage]',\n})\nexport class EclMegaMenuFeaturedImageDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-mega-menu__featured-image') cmpClass = true;\n}\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that adds specific class to the mega-menu featured picture.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedPicture]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclMegaMenuFeaturedPictureDirective extends ECLBaseDirective {\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-picture ecl-mega-menu__featured-picture')].join(' ').trim();\n    }\n}\n\n/**\n * Directive that adds specific class to the mega-menu featured image.\n */\n@Directive({\n    selector: '[eclMegaMenuFeaturedImage]',\n    host: {\n        class: 'ecl-mega-menu__featured-image',\n    },\n})\nexport class EclMegaMenuFeaturedImageDirective extends ECLBaseDirective {\n}\n",
             "selector": "[eclMegaMenuFeaturedPicture]",
             "providers": [],
             "hostDirectives": [],
@@ -25914,20 +25737,7 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 12,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [],
             "methodsClass": [
@@ -25973,8 +25783,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 187,
+                    "pos": 94,
+                    "end": 174,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -25993,7 +25803,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 12,
+                        "line": 14,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -26011,12 +25821,12 @@
         },
         {
             "name": "EclMegaMenuListDirective",
-            "id": "directive-EclMegaMenuListDirective-02469b11ffd64d49ecd3a01aba8e2d5bc27d5e6a3c139bd7261cc1f0148c8e1c6e35c2987e9829efbe4d088d62862ad081d63d5ccb1dbc35aab8d1ab646e7bc6",
+            "id": "directive-EclMegaMenuListDirective-77213061afcb1f49414790da69d7b7992f3b21c97c9304055a0fb9b584252f05f352f85411151061cb3c36136d74ab16d680fc3a8d9fca8461076c60f1b0ddb3",
             "file": "packages/ecl/components/ecl-mega-menu/directives/ecl-mega-menu-list.directive.ts",
             "type": "directive",
             "description": "<p>Directive that adds specific class to the mega-menu list.</p>\n",
             "rawdescription": "\n\nDirective that adds specific class to the mega-menu list.\n",
-            "sourceCode": "import { Directive, DoCheck, ElementRef, EventEmitter, HostBinding, IterableDiffer, IterableDiffers, OnDestroy, Output, afterNextRender, forwardRef, inject, signal, contentChildren, contentChild } from '@angular/core';\nimport { EuiAppShellService } from '@eui/core';\nimport { ECLBaseDirective, KeyCode } from '@eui/ecl/core';\nimport { distinctUntilChanged, map, Subject, takeUntil } from 'rxjs';\nimport { EclMegaMenuSubitemComponent } from '../ecl-mega-menu-subitem/ecl-mega-menu-subitem.component';\n\n/**\n * Directive that adds specific class to the mega-menu list.\n */\n@Directive({\n    selector: 'ul[eclMegaMenuList]',\n})\nexport class EclMegaMenuListDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-mega-menu__list') cmpClass = true;\n}\n\n/**\n * Directive that adds specific class to the mega-menu spacer.\n */\n@Directive({\n    selector: 'li[eclMegaMenuSpacer]',\n})\nexport class EclMegaMenuSpacerDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-mega-menu__spacer') cmpClass = true;\n}\n\n/**\n * Directive that adds specific classes and functionality to the mega-menu sublist.\n */\n@Directive({\n    selector: 'ul[eclMegaMenuSublist]',\n    host: {\n        '[style.height.px]': 'styleHeight()',\n    },\n})\nexport class EclMegaMenuSublistDirective extends ECLBaseDirective implements OnDestroy, DoCheck {\n    el = inject(ElementRef);\n\n    @HostBinding('class.ecl-mega-menu__sublist') cmpClass = true;\n    @HostBinding('class.ecl-mega-menu__sublist--scrollable') isScrollable = false;\n    @HostBinding('style.top.px') styleTop: number | null = null;\n    styleHeight = signal<number | null>(null);\n\n    readonly submenuItems = contentChildren(forwardRef(() => EclMegaMenuSubitemComponent));\n    readonly spacer = contentChild(forwardRef(() => EclMegaMenuSpacerDirective));\n    @Output() megaMenuSubItemClicked = new EventEmitter();\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private differ: IterableDiffer<EclMegaMenuSubitemComponent>;\n    private isMobileBreakpoint = false;\n    private differs = inject(IterableDiffers);\n    private appShell = inject(EuiAppShellService);\n\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n        });\n    }\n\n    ngDoCheck(): void {\n        // When a new item is added -> subscribe to item's events.\n        const diff = this.differ.diff(this.submenuItems());\n        if (diff) {\n            diff.forEachItem((item) => {\n                this.connectMegaMenuItemEvents(item.item);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * When parent mega-menu item is clicked.\n     * @param isExpanded - 'true', if parent item is expanded, 'false' if item is collapsed.\n     */\n    onParentMegaMenuItemClick(isExpanded: boolean): void {\n        if (!isExpanded) {\n            this.submenuItems().forEach(item => {\n                if (item.isExpanded) {\n                    item.onSubMenuItemCollapse();\n                }\n            });\n        }\n    }\n\n    private connectMegaMenuItemEvents(item: EclMegaMenuSubitemComponent): void {\n        item.megaMenuSubItemClicked.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onMegaMenuSubItemClicked(item);\n        });\n\n        item.megaMenuSubItemKeydown.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onMegaMenuSubItemKeydown(item, evt);\n        });\n    }\n\n    private onMegaMenuSubItemClicked(item: EclMegaMenuSubitemComponent): void {\n        this.submenuItems().filter(subItem => subItem !== item).forEach(el => {\n            el.onSubMenuItemCollapse();\n            if (this.isMobileBreakpoint && item.hasChildren) {\n                el.onHide();\n            }\n        });\n        this.megaMenuSubItemClicked.emit();\n    }\n\n    private onMegaMenuSubItemKeydown(item: EclMegaMenuSubitemComponent, evt: KeyboardEvent): void {\n\n        const itemIndex = this.submenuItems().findIndex(elem => elem === item);\n        switch (evt.key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                this.focusOnNextSibling(itemIndex);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.focusOnPrevSibling(itemIndex);\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    private focusOnPrevSibling(index: number): void {\n        if (index > 0) {\n            this.submenuItems().at(index - 1).onFocus();\n        }\n    }\n\n    private focusOnNextSibling(index: number): void {\n        if (index < this.submenuItems().length - 1) {\n            this.submenuItems().at(index + 1).onFocus();\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.appShell.getState<any>('breakpoints')\n            .pipe(\n                map(bp => !!bp?.isLtLargeTablet),  // xs/sm/md/lg  => <= 996px boundary\n                distinctUntilChanged(),\n                takeUntil(this.destroy$),\n            )\n            .subscribe((isMobile) => {\n                const wasMobile = this.isMobileBreakpoint;\n                this.isMobileBreakpoint = isMobile;\n\n                // Reset height/position values when switching between breakpoints\n                // to avoid stale pixel values from the previous layout mode\n                if (wasMobile !== isMobile) {\n                    this.styleHeight.set(null);\n                    this.styleTop = null;\n                    this.isScrollable = false;\n                }\n            });\n    }\n}\n",
+            "sourceCode": "import { Directive, DoCheck, ElementRef, EventEmitter, IterableDiffer, IterableDiffers, OnDestroy, Output, afterNextRender, forwardRef, inject, signal, contentChildren, contentChild } from '@angular/core';\nimport { EuiAppShellService } from '@eui/core';\nimport { ECLBaseDirective, KeyCode } from '@eui/ecl/core';\nimport { distinctUntilChanged, map, Subject, takeUntil } from 'rxjs';\nimport { EclMegaMenuSubitemComponent } from '../ecl-mega-menu-subitem/ecl-mega-menu-subitem.component';\n\n/**\n * Directive that adds specific class to the mega-menu list.\n */\n@Directive({\n    selector: 'ul[eclMegaMenuList]',\n    host: {\n        class: 'ecl-mega-menu__list',\n    },\n})\nexport class EclMegaMenuListDirective extends ECLBaseDirective {\n}\n\n/**\n * Directive that adds specific class to the mega-menu spacer.\n */\n@Directive({\n    selector: 'li[eclMegaMenuSpacer]',\n    host: {\n        class: 'ecl-mega-menu__spacer',\n    },\n})\nexport class EclMegaMenuSpacerDirective extends ECLBaseDirective {\n}\n\n/**\n * Directive that adds specific classes and functionality to the mega-menu sublist.\n */\n@Directive({\n    selector: 'ul[eclMegaMenuSublist]',\n    host: {\n        class: 'ecl-mega-menu__sublist',\n        '[class.ecl-mega-menu__sublist--scrollable]': 'isScrollable',\n        '[style.top.px]': 'styleTop',\n        '[style.height.px]': 'styleHeight()',\n    },\n})\nexport class EclMegaMenuSublistDirective extends ECLBaseDirective implements OnDestroy, DoCheck {\n    el = inject(ElementRef);\n\n    isScrollable = false;\n    styleTop: number | null = null;\n    styleHeight = signal<number | null>(null);\n\n    readonly submenuItems = contentChildren(forwardRef(() => EclMegaMenuSubitemComponent));\n    readonly spacer = contentChild(forwardRef(() => EclMegaMenuSpacerDirective));\n    @Output() megaMenuSubItemClicked = new EventEmitter();\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private differ: IterableDiffer<EclMegaMenuSubitemComponent>;\n    private isMobileBreakpoint = false;\n    private differs = inject(IterableDiffers);\n    private appShell = inject(EuiAppShellService);\n\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n        });\n    }\n\n    ngDoCheck(): void {\n        // When a new item is added -> subscribe to item's events.\n        const diff = this.differ.diff(this.submenuItems());\n        if (diff) {\n            diff.forEachItem((item) => {\n                this.connectMegaMenuItemEvents(item.item);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * When parent mega-menu item is clicked.\n     * @param isExpanded - 'true', if parent item is expanded, 'false' if item is collapsed.\n     */\n    onParentMegaMenuItemClick(isExpanded: boolean): void {\n        if (!isExpanded) {\n            this.submenuItems().forEach(item => {\n                if (item.isExpanded) {\n                    item.onSubMenuItemCollapse();\n                }\n            });\n        }\n    }\n\n    private connectMegaMenuItemEvents(item: EclMegaMenuSubitemComponent): void {\n        item.megaMenuSubItemClicked.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onMegaMenuSubItemClicked(item);\n        });\n\n        item.megaMenuSubItemKeydown.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onMegaMenuSubItemKeydown(item, evt);\n        });\n    }\n\n    private onMegaMenuSubItemClicked(item: EclMegaMenuSubitemComponent): void {\n        this.submenuItems().filter(subItem => subItem !== item).forEach(el => {\n            el.onSubMenuItemCollapse();\n            if (this.isMobileBreakpoint && item.hasChildren) {\n                el.onHide();\n            }\n        });\n        this.megaMenuSubItemClicked.emit();\n    }\n\n    private onMegaMenuSubItemKeydown(item: EclMegaMenuSubitemComponent, evt: KeyboardEvent): void {\n\n        const itemIndex = this.submenuItems().findIndex(elem => elem === item);\n        switch (evt.key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                this.focusOnNextSibling(itemIndex);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.focusOnPrevSibling(itemIndex);\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    private focusOnPrevSibling(index: number): void {\n        if (index > 0) {\n            this.submenuItems().at(index - 1).onFocus();\n        }\n    }\n\n    private focusOnNextSibling(index: number): void {\n        if (index < this.submenuItems().length - 1) {\n            this.submenuItems().at(index + 1).onFocus();\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.appShell.getState<any>('breakpoints')\n            .pipe(\n                map(bp => !!bp?.isLtLargeTablet),  // xs/sm/md/lg  => <= 996px boundary\n                distinctUntilChanged(),\n                takeUntil(this.destroy$),\n            )\n            .subscribe((isMobile) => {\n                const wasMobile = this.isMobileBreakpoint;\n                this.isMobileBreakpoint = isMobile;\n\n                // Reset height/position values when switching between breakpoints\n                // to avoid stale pixel values from the previous layout mode\n                if (wasMobile !== isMobile) {\n                    this.styleHeight.set(null);\n                    this.styleTop = null;\n                    this.isScrollable = false;\n                }\n            });\n    }\n}\n",
             "selector": "ul[eclMegaMenuList]",
             "providers": [],
             "hostDirectives": [],
@@ -26069,46 +25879,9 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-mega-menu__list",
-                    "actualName": "cmpClass",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 14,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "cmpClass",
-                    "coverageIgnore": false,
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 14,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-mega-menu__list'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "getCssClasses",
@@ -26152,8 +25925,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 501,
-                    "end": 569,
+                    "pos": 488,
+                    "end": 556,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -26177,12 +25950,12 @@
         },
         {
             "name": "EclMegaMenuSpacerDirective",
-            "id": "directive-EclMegaMenuSpacerDirective-02469b11ffd64d49ecd3a01aba8e2d5bc27d5e6a3c139bd7261cc1f0148c8e1c6e35c2987e9829efbe4d088d62862ad081d63d5ccb1dbc35aab8d1ab646e7bc6",
+            "id": "directive-EclMegaMenuSpacerDirective-77213061afcb1f49414790da69d7b7992f3b21c97c9304055a0fb9b584252f05f352f85411151061cb3c36136d74ab16d680fc3a8d9fca8461076c60f1b0ddb3",
             "file": "packages/ecl/components/ecl-mega-menu/directives/ecl-mega-menu-list.directive.ts",
             "type": "directive",
             "description": "<p>Directive that adds specific class to the mega-menu spacer.</p>\n",
             "rawdescription": "\n\nDirective that adds specific class to the mega-menu spacer.\n",
-            "sourceCode": "import { Directive, DoCheck, ElementRef, EventEmitter, HostBinding, IterableDiffer, IterableDiffers, OnDestroy, Output, afterNextRender, forwardRef, inject, signal, contentChildren, contentChild } from '@angular/core';\nimport { EuiAppShellService } from '@eui/core';\nimport { ECLBaseDirective, KeyCode } from '@eui/ecl/core';\nimport { distinctUntilChanged, map, Subject, takeUntil } from 'rxjs';\nimport { EclMegaMenuSubitemComponent } from '../ecl-mega-menu-subitem/ecl-mega-menu-subitem.component';\n\n/**\n * Directive that adds specific class to the mega-menu list.\n */\n@Directive({\n    selector: 'ul[eclMegaMenuList]',\n})\nexport class EclMegaMenuListDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-mega-menu__list') cmpClass = true;\n}\n\n/**\n * Directive that adds specific class to the mega-menu spacer.\n */\n@Directive({\n    selector: 'li[eclMegaMenuSpacer]',\n})\nexport class EclMegaMenuSpacerDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-mega-menu__spacer') cmpClass = true;\n}\n\n/**\n * Directive that adds specific classes and functionality to the mega-menu sublist.\n */\n@Directive({\n    selector: 'ul[eclMegaMenuSublist]',\n    host: {\n        '[style.height.px]': 'styleHeight()',\n    },\n})\nexport class EclMegaMenuSublistDirective extends ECLBaseDirective implements OnDestroy, DoCheck {\n    el = inject(ElementRef);\n\n    @HostBinding('class.ecl-mega-menu__sublist') cmpClass = true;\n    @HostBinding('class.ecl-mega-menu__sublist--scrollable') isScrollable = false;\n    @HostBinding('style.top.px') styleTop: number | null = null;\n    styleHeight = signal<number | null>(null);\n\n    readonly submenuItems = contentChildren(forwardRef(() => EclMegaMenuSubitemComponent));\n    readonly spacer = contentChild(forwardRef(() => EclMegaMenuSpacerDirective));\n    @Output() megaMenuSubItemClicked = new EventEmitter();\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private differ: IterableDiffer<EclMegaMenuSubitemComponent>;\n    private isMobileBreakpoint = false;\n    private differs = inject(IterableDiffers);\n    private appShell = inject(EuiAppShellService);\n\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n        });\n    }\n\n    ngDoCheck(): void {\n        // When a new item is added -> subscribe to item's events.\n        const diff = this.differ.diff(this.submenuItems());\n        if (diff) {\n            diff.forEachItem((item) => {\n                this.connectMegaMenuItemEvents(item.item);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * When parent mega-menu item is clicked.\n     * @param isExpanded - 'true', if parent item is expanded, 'false' if item is collapsed.\n     */\n    onParentMegaMenuItemClick(isExpanded: boolean): void {\n        if (!isExpanded) {\n            this.submenuItems().forEach(item => {\n                if (item.isExpanded) {\n                    item.onSubMenuItemCollapse();\n                }\n            });\n        }\n    }\n\n    private connectMegaMenuItemEvents(item: EclMegaMenuSubitemComponent): void {\n        item.megaMenuSubItemClicked.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onMegaMenuSubItemClicked(item);\n        });\n\n        item.megaMenuSubItemKeydown.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onMegaMenuSubItemKeydown(item, evt);\n        });\n    }\n\n    private onMegaMenuSubItemClicked(item: EclMegaMenuSubitemComponent): void {\n        this.submenuItems().filter(subItem => subItem !== item).forEach(el => {\n            el.onSubMenuItemCollapse();\n            if (this.isMobileBreakpoint && item.hasChildren) {\n                el.onHide();\n            }\n        });\n        this.megaMenuSubItemClicked.emit();\n    }\n\n    private onMegaMenuSubItemKeydown(item: EclMegaMenuSubitemComponent, evt: KeyboardEvent): void {\n\n        const itemIndex = this.submenuItems().findIndex(elem => elem === item);\n        switch (evt.key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                this.focusOnNextSibling(itemIndex);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.focusOnPrevSibling(itemIndex);\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    private focusOnPrevSibling(index: number): void {\n        if (index > 0) {\n            this.submenuItems().at(index - 1).onFocus();\n        }\n    }\n\n    private focusOnNextSibling(index: number): void {\n        if (index < this.submenuItems().length - 1) {\n            this.submenuItems().at(index + 1).onFocus();\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.appShell.getState<any>('breakpoints')\n            .pipe(\n                map(bp => !!bp?.isLtLargeTablet),  // xs/sm/md/lg  => <= 996px boundary\n                distinctUntilChanged(),\n                takeUntil(this.destroy$),\n            )\n            .subscribe((isMobile) => {\n                const wasMobile = this.isMobileBreakpoint;\n                this.isMobileBreakpoint = isMobile;\n\n                // Reset height/position values when switching between breakpoints\n                // to avoid stale pixel values from the previous layout mode\n                if (wasMobile !== isMobile) {\n                    this.styleHeight.set(null);\n                    this.styleTop = null;\n                    this.isScrollable = false;\n                }\n            });\n    }\n}\n",
+            "sourceCode": "import { Directive, DoCheck, ElementRef, EventEmitter, IterableDiffer, IterableDiffers, OnDestroy, Output, afterNextRender, forwardRef, inject, signal, contentChildren, contentChild } from '@angular/core';\nimport { EuiAppShellService } from '@eui/core';\nimport { ECLBaseDirective, KeyCode } from '@eui/ecl/core';\nimport { distinctUntilChanged, map, Subject, takeUntil } from 'rxjs';\nimport { EclMegaMenuSubitemComponent } from '../ecl-mega-menu-subitem/ecl-mega-menu-subitem.component';\n\n/**\n * Directive that adds specific class to the mega-menu list.\n */\n@Directive({\n    selector: 'ul[eclMegaMenuList]',\n    host: {\n        class: 'ecl-mega-menu__list',\n    },\n})\nexport class EclMegaMenuListDirective extends ECLBaseDirective {\n}\n\n/**\n * Directive that adds specific class to the mega-menu spacer.\n */\n@Directive({\n    selector: 'li[eclMegaMenuSpacer]',\n    host: {\n        class: 'ecl-mega-menu__spacer',\n    },\n})\nexport class EclMegaMenuSpacerDirective extends ECLBaseDirective {\n}\n\n/**\n * Directive that adds specific classes and functionality to the mega-menu sublist.\n */\n@Directive({\n    selector: 'ul[eclMegaMenuSublist]',\n    host: {\n        class: 'ecl-mega-menu__sublist',\n        '[class.ecl-mega-menu__sublist--scrollable]': 'isScrollable',\n        '[style.top.px]': 'styleTop',\n        '[style.height.px]': 'styleHeight()',\n    },\n})\nexport class EclMegaMenuSublistDirective extends ECLBaseDirective implements OnDestroy, DoCheck {\n    el = inject(ElementRef);\n\n    isScrollable = false;\n    styleTop: number | null = null;\n    styleHeight = signal<number | null>(null);\n\n    readonly submenuItems = contentChildren(forwardRef(() => EclMegaMenuSubitemComponent));\n    readonly spacer = contentChild(forwardRef(() => EclMegaMenuSpacerDirective));\n    @Output() megaMenuSubItemClicked = new EventEmitter();\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private differ: IterableDiffer<EclMegaMenuSubitemComponent>;\n    private isMobileBreakpoint = false;\n    private differs = inject(IterableDiffers);\n    private appShell = inject(EuiAppShellService);\n\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n        });\n    }\n\n    ngDoCheck(): void {\n        // When a new item is added -> subscribe to item's events.\n        const diff = this.differ.diff(this.submenuItems());\n        if (diff) {\n            diff.forEachItem((item) => {\n                this.connectMegaMenuItemEvents(item.item);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * When parent mega-menu item is clicked.\n     * @param isExpanded - 'true', if parent item is expanded, 'false' if item is collapsed.\n     */\n    onParentMegaMenuItemClick(isExpanded: boolean): void {\n        if (!isExpanded) {\n            this.submenuItems().forEach(item => {\n                if (item.isExpanded) {\n                    item.onSubMenuItemCollapse();\n                }\n            });\n        }\n    }\n\n    private connectMegaMenuItemEvents(item: EclMegaMenuSubitemComponent): void {\n        item.megaMenuSubItemClicked.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onMegaMenuSubItemClicked(item);\n        });\n\n        item.megaMenuSubItemKeydown.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onMegaMenuSubItemKeydown(item, evt);\n        });\n    }\n\n    private onMegaMenuSubItemClicked(item: EclMegaMenuSubitemComponent): void {\n        this.submenuItems().filter(subItem => subItem !== item).forEach(el => {\n            el.onSubMenuItemCollapse();\n            if (this.isMobileBreakpoint && item.hasChildren) {\n                el.onHide();\n            }\n        });\n        this.megaMenuSubItemClicked.emit();\n    }\n\n    private onMegaMenuSubItemKeydown(item: EclMegaMenuSubitemComponent, evt: KeyboardEvent): void {\n\n        const itemIndex = this.submenuItems().findIndex(elem => elem === item);\n        switch (evt.key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                this.focusOnNextSibling(itemIndex);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.focusOnPrevSibling(itemIndex);\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    private focusOnPrevSibling(index: number): void {\n        if (index > 0) {\n            this.submenuItems().at(index - 1).onFocus();\n        }\n    }\n\n    private focusOnNextSibling(index: number): void {\n        if (index < this.submenuItems().length - 1) {\n            this.submenuItems().at(index + 1).onFocus();\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.appShell.getState<any>('breakpoints')\n            .pipe(\n                map(bp => !!bp?.isLtLargeTablet),  // xs/sm/md/lg  => <= 996px boundary\n                distinctUntilChanged(),\n                takeUntil(this.destroy$),\n            )\n            .subscribe((isMobile) => {\n                const wasMobile = this.isMobileBreakpoint;\n                this.isMobileBreakpoint = isMobile;\n\n                // Reset height/position values when switching between breakpoints\n                // to avoid stale pixel values from the previous layout mode\n                if (wasMobile !== isMobile) {\n                    this.styleHeight.set(null);\n                    this.styleTop = null;\n                    this.isScrollable = false;\n                }\n            });\n    }\n}\n",
             "selector": "li[eclMegaMenuSpacer]",
             "providers": [],
             "hostDirectives": [],
@@ -26235,46 +26008,9 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-mega-menu__spacer",
-                    "actualName": "cmpClass",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 24,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "cmpClass",
-                    "coverageIgnore": false,
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 24,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-mega-menu__spacer'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "getCssClasses",
@@ -26318,8 +26054,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 754,
-                    "end": 824,
+                    "pos": 735,
+                    "end": 805,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -26343,12 +26079,12 @@
         },
         {
             "name": "EclMegaMenuSublistDirective",
-            "id": "directive-EclMegaMenuSublistDirective-02469b11ffd64d49ecd3a01aba8e2d5bc27d5e6a3c139bd7261cc1f0148c8e1c6e35c2987e9829efbe4d088d62862ad081d63d5ccb1dbc35aab8d1ab646e7bc6",
+            "id": "directive-EclMegaMenuSublistDirective-77213061afcb1f49414790da69d7b7992f3b21c97c9304055a0fb9b584252f05f352f85411151061cb3c36136d74ab16d680fc3a8d9fca8461076c60f1b0ddb3",
             "file": "packages/ecl/components/ecl-mega-menu/directives/ecl-mega-menu-list.directive.ts",
             "type": "directive",
             "description": "<p>Directive that adds specific classes and functionality to the mega-menu sublist.</p>\n",
             "rawdescription": "\n\nDirective that adds specific classes and functionality to the mega-menu sublist.\n",
-            "sourceCode": "import { Directive, DoCheck, ElementRef, EventEmitter, HostBinding, IterableDiffer, IterableDiffers, OnDestroy, Output, afterNextRender, forwardRef, inject, signal, contentChildren, contentChild } from '@angular/core';\nimport { EuiAppShellService } from '@eui/core';\nimport { ECLBaseDirective, KeyCode } from '@eui/ecl/core';\nimport { distinctUntilChanged, map, Subject, takeUntil } from 'rxjs';\nimport { EclMegaMenuSubitemComponent } from '../ecl-mega-menu-subitem/ecl-mega-menu-subitem.component';\n\n/**\n * Directive that adds specific class to the mega-menu list.\n */\n@Directive({\n    selector: 'ul[eclMegaMenuList]',\n})\nexport class EclMegaMenuListDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-mega-menu__list') cmpClass = true;\n}\n\n/**\n * Directive that adds specific class to the mega-menu spacer.\n */\n@Directive({\n    selector: 'li[eclMegaMenuSpacer]',\n})\nexport class EclMegaMenuSpacerDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-mega-menu__spacer') cmpClass = true;\n}\n\n/**\n * Directive that adds specific classes and functionality to the mega-menu sublist.\n */\n@Directive({\n    selector: 'ul[eclMegaMenuSublist]',\n    host: {\n        '[style.height.px]': 'styleHeight()',\n    },\n})\nexport class EclMegaMenuSublistDirective extends ECLBaseDirective implements OnDestroy, DoCheck {\n    el = inject(ElementRef);\n\n    @HostBinding('class.ecl-mega-menu__sublist') cmpClass = true;\n    @HostBinding('class.ecl-mega-menu__sublist--scrollable') isScrollable = false;\n    @HostBinding('style.top.px') styleTop: number | null = null;\n    styleHeight = signal<number | null>(null);\n\n    readonly submenuItems = contentChildren(forwardRef(() => EclMegaMenuSubitemComponent));\n    readonly spacer = contentChild(forwardRef(() => EclMegaMenuSpacerDirective));\n    @Output() megaMenuSubItemClicked = new EventEmitter();\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private differ: IterableDiffer<EclMegaMenuSubitemComponent>;\n    private isMobileBreakpoint = false;\n    private differs = inject(IterableDiffers);\n    private appShell = inject(EuiAppShellService);\n\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n        });\n    }\n\n    ngDoCheck(): void {\n        // When a new item is added -> subscribe to item's events.\n        const diff = this.differ.diff(this.submenuItems());\n        if (diff) {\n            diff.forEachItem((item) => {\n                this.connectMegaMenuItemEvents(item.item);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * When parent mega-menu item is clicked.\n     * @param isExpanded - 'true', if parent item is expanded, 'false' if item is collapsed.\n     */\n    onParentMegaMenuItemClick(isExpanded: boolean): void {\n        if (!isExpanded) {\n            this.submenuItems().forEach(item => {\n                if (item.isExpanded) {\n                    item.onSubMenuItemCollapse();\n                }\n            });\n        }\n    }\n\n    private connectMegaMenuItemEvents(item: EclMegaMenuSubitemComponent): void {\n        item.megaMenuSubItemClicked.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onMegaMenuSubItemClicked(item);\n        });\n\n        item.megaMenuSubItemKeydown.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onMegaMenuSubItemKeydown(item, evt);\n        });\n    }\n\n    private onMegaMenuSubItemClicked(item: EclMegaMenuSubitemComponent): void {\n        this.submenuItems().filter(subItem => subItem !== item).forEach(el => {\n            el.onSubMenuItemCollapse();\n            if (this.isMobileBreakpoint && item.hasChildren) {\n                el.onHide();\n            }\n        });\n        this.megaMenuSubItemClicked.emit();\n    }\n\n    private onMegaMenuSubItemKeydown(item: EclMegaMenuSubitemComponent, evt: KeyboardEvent): void {\n\n        const itemIndex = this.submenuItems().findIndex(elem => elem === item);\n        switch (evt.key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                this.focusOnNextSibling(itemIndex);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.focusOnPrevSibling(itemIndex);\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    private focusOnPrevSibling(index: number): void {\n        if (index > 0) {\n            this.submenuItems().at(index - 1).onFocus();\n        }\n    }\n\n    private focusOnNextSibling(index: number): void {\n        if (index < this.submenuItems().length - 1) {\n            this.submenuItems().at(index + 1).onFocus();\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.appShell.getState<any>('breakpoints')\n            .pipe(\n                map(bp => !!bp?.isLtLargeTablet),  // xs/sm/md/lg  => <= 996px boundary\n                distinctUntilChanged(),\n                takeUntil(this.destroy$),\n            )\n            .subscribe((isMobile) => {\n                const wasMobile = this.isMobileBreakpoint;\n                this.isMobileBreakpoint = isMobile;\n\n                // Reset height/position values when switching between breakpoints\n                // to avoid stale pixel values from the previous layout mode\n                if (wasMobile !== isMobile) {\n                    this.styleHeight.set(null);\n                    this.styleTop = null;\n                    this.isScrollable = false;\n                }\n            });\n    }\n}\n",
+            "sourceCode": "import { Directive, DoCheck, ElementRef, EventEmitter, IterableDiffer, IterableDiffers, OnDestroy, Output, afterNextRender, forwardRef, inject, signal, contentChildren, contentChild } from '@angular/core';\nimport { EuiAppShellService } from '@eui/core';\nimport { ECLBaseDirective, KeyCode } from '@eui/ecl/core';\nimport { distinctUntilChanged, map, Subject, takeUntil } from 'rxjs';\nimport { EclMegaMenuSubitemComponent } from '../ecl-mega-menu-subitem/ecl-mega-menu-subitem.component';\n\n/**\n * Directive that adds specific class to the mega-menu list.\n */\n@Directive({\n    selector: 'ul[eclMegaMenuList]',\n    host: {\n        class: 'ecl-mega-menu__list',\n    },\n})\nexport class EclMegaMenuListDirective extends ECLBaseDirective {\n}\n\n/**\n * Directive that adds specific class to the mega-menu spacer.\n */\n@Directive({\n    selector: 'li[eclMegaMenuSpacer]',\n    host: {\n        class: 'ecl-mega-menu__spacer',\n    },\n})\nexport class EclMegaMenuSpacerDirective extends ECLBaseDirective {\n}\n\n/**\n * Directive that adds specific classes and functionality to the mega-menu sublist.\n */\n@Directive({\n    selector: 'ul[eclMegaMenuSublist]',\n    host: {\n        class: 'ecl-mega-menu__sublist',\n        '[class.ecl-mega-menu__sublist--scrollable]': 'isScrollable',\n        '[style.top.px]': 'styleTop',\n        '[style.height.px]': 'styleHeight()',\n    },\n})\nexport class EclMegaMenuSublistDirective extends ECLBaseDirective implements OnDestroy, DoCheck {\n    el = inject(ElementRef);\n\n    isScrollable = false;\n    styleTop: number | null = null;\n    styleHeight = signal<number | null>(null);\n\n    readonly submenuItems = contentChildren(forwardRef(() => EclMegaMenuSubitemComponent));\n    readonly spacer = contentChild(forwardRef(() => EclMegaMenuSpacerDirective));\n    @Output() megaMenuSubItemClicked = new EventEmitter();\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private differ: IterableDiffer<EclMegaMenuSubitemComponent>;\n    private isMobileBreakpoint = false;\n    private differs = inject(IterableDiffers);\n    private appShell = inject(EuiAppShellService);\n\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n        });\n    }\n\n    ngDoCheck(): void {\n        // When a new item is added -> subscribe to item's events.\n        const diff = this.differ.diff(this.submenuItems());\n        if (diff) {\n            diff.forEachItem((item) => {\n                this.connectMegaMenuItemEvents(item.item);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * When parent mega-menu item is clicked.\n     * @param isExpanded - 'true', if parent item is expanded, 'false' if item is collapsed.\n     */\n    onParentMegaMenuItemClick(isExpanded: boolean): void {\n        if (!isExpanded) {\n            this.submenuItems().forEach(item => {\n                if (item.isExpanded) {\n                    item.onSubMenuItemCollapse();\n                }\n            });\n        }\n    }\n\n    private connectMegaMenuItemEvents(item: EclMegaMenuSubitemComponent): void {\n        item.megaMenuSubItemClicked.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onMegaMenuSubItemClicked(item);\n        });\n\n        item.megaMenuSubItemKeydown.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onMegaMenuSubItemKeydown(item, evt);\n        });\n    }\n\n    private onMegaMenuSubItemClicked(item: EclMegaMenuSubitemComponent): void {\n        this.submenuItems().filter(subItem => subItem !== item).forEach(el => {\n            el.onSubMenuItemCollapse();\n            if (this.isMobileBreakpoint && item.hasChildren) {\n                el.onHide();\n            }\n        });\n        this.megaMenuSubItemClicked.emit();\n    }\n\n    private onMegaMenuSubItemKeydown(item: EclMegaMenuSubitemComponent, evt: KeyboardEvent): void {\n\n        const itemIndex = this.submenuItems().findIndex(elem => elem === item);\n        switch (evt.key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                this.focusOnNextSibling(itemIndex);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.focusOnPrevSibling(itemIndex);\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    private focusOnPrevSibling(index: number): void {\n        if (index > 0) {\n            this.submenuItems().at(index - 1).onFocus();\n        }\n    }\n\n    private focusOnNextSibling(index: number): void {\n        if (index < this.submenuItems().length - 1) {\n            this.submenuItems().at(index + 1).onFocus();\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.appShell.getState<any>('breakpoints')\n            .pipe(\n                map(bp => !!bp?.isLtLargeTablet),  // xs/sm/md/lg  => <= 996px boundary\n                distinctUntilChanged(),\n                takeUntil(this.destroy$),\n            )\n            .subscribe((isMobile) => {\n                const wasMobile = this.isMobileBreakpoint;\n                this.isMobileBreakpoint = isMobile;\n\n                // Reset height/position values when switching between breakpoints\n                // to avoid stale pixel values from the previous layout mode\n                if (wasMobile !== isMobile) {\n                    this.styleHeight.set(null);\n                    this.styleTop = null;\n                    this.isScrollable = false;\n                }\n            });\n    }\n}\n",
             "selector": "ul[eclMegaMenuSublist]",
             "providers": [],
             "hostDirectives": [],
@@ -26405,77 +26141,15 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 46,
+                    "line": 52,
                     "type": "EventEmitter"
                 }
             ],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-mega-menu__sublist",
-                    "actualName": "cmpClass",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 39,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-mega-menu__sublist--scrollable",
-                    "actualName": "isScrollable",
-                    "defaultValue": "false",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 40,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "style.top.px",
-                    "actualName": "styleTop",
-                    "defaultValue": "null",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 41,
-                    "type": "number | null",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [
-                {
-                    "name": "cmpClass",
-                    "coverageIgnore": false,
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 39,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-mega-menu__sublist'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                },
                 {
                     "name": "el",
                     "coverageIgnore": false,
@@ -26486,7 +26160,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 37,
+                    "line": 44,
                     "rawdescription": "\n"
                 },
                 {
@@ -26499,17 +26173,8 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 40,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-mega-menu__sublist--scrollable'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "line": 46,
+                    "rawdescription": "\n"
                 },
                 {
                     "name": "spacer",
@@ -26521,7 +26186,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 45,
+                    "line": 51,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -26537,7 +26202,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 42,
+                    "line": 48,
                     "rawdescription": "\n"
                 },
                 {
@@ -26550,17 +26215,8 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 41,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'style.top.px'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "line": 47,
+                    "rawdescription": "\n"
                 },
                 {
                     "name": "submenuItems",
@@ -26572,7 +26228,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 44,
+                    "line": 50,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -26587,7 +26243,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 61,
+                    "line": 67,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -26600,7 +26256,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 71,
+                    "line": 77,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -26622,7 +26278,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 80,
+                    "line": 86,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWhen parent mega-menu item is clicked.\n",
@@ -26630,8 +26286,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 2783,
-                                "end": 2793,
+                                "pos": 2755,
+                                "end": 2765,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -26644,8 +26300,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 2777,
-                                "end": 2782,
+                                "pos": 2749,
+                                "end": 2754,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -26698,8 +26354,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 1015,
-                    "end": 1106,
+                    "pos": 990,
+                    "end": 1081,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -26721,7 +26377,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 51,
+                "line": 57,
                 "rawdescription": "\n"
             },
             "relationships": {
@@ -57699,7 +57355,7 @@
         },
         {
             "name": "EclInpageNavigationComponent",
-            "id": "component-EclInpageNavigationComponent-5daafc90fdb4dbac03101fb1ec926edaec22dde8c7ba4699dcece0f2c2d48f01b9c51ed69bb59e72fd63be3a46eae2803257a7e8309d6a6dc7f5932d3148a469",
+            "id": "component-EclInpageNavigationComponent-906af88767bb0883baf4a3fa0272ddc605be045eba82e54505a7ed5052ca75dd4912d410edb6b1ebd61164ec4f483083128aa648e00be47dbc4458c5d1e5365f",
             "file": "packages/ecl/components/ecl-inpage-navigation/ecl-inpage-navigation.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -58176,7 +57832,7 @@
             "description": "<p>The in-page navigation is a vertical menu containing (anchored) links to H2-headings on long content pages.\nIt gives the user an overview of the page contents and has a fixed position (does not move while scrolling) at either the left\nside of a page on desktop or top-bar on mobile. This component helps users scan of the page quickly contents and may potentially\nreduce vertical scrolling, allowing users to easily jump straight to the segment of the page.</p>\n",
             "rawdescription": "\n\nThe in-page navigation is a vertical menu containing (anchored) links to H2-headings on long content pages.\nIt gives the user an overview of the page contents and has a fixed position (does not move while scrolling) at either the left\nside of a page on desktop or top-bar on mobile. This component helps users scan of the page quickly contents and may potentially\nreduce vertical scrolling, allowing users to easily jump straight to the segment of the page.\n",
             "type": "component",
-            "sourceCode": "import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';\nimport { ScrollDispatcher, ViewportRuler } from '@angular/cdk/scrolling';\nimport { isPlatformBrowser } from '@angular/common';\nimport { AfterViewInit, ChangeDetectorRef, Component, DOCUMENT, DoCheck, ElementRef, IterableDiffer, IterableDiffers, NgZone, OnDestroy, OnInit, PLATFORM_ID, afterNextRender, contentChild, contentChildren, inject, input, numberAttribute, output, viewChild } from '@angular/core';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_STICKY_CONTAINER } from '@eui/ecl/components/ecl-sticky-container';\nimport { ECLBaseDirective, EclBaseEvent, EclRtlService, EclThemeService } from '@eui/ecl/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { EclInpageNavigationItemComponent } from './ecl-inpage-navigation-item.component';\nimport { EclInpageNavigationListDirective } from './ecl-inpage-navigation-list.directive';\nimport { EclInpageNavigationService } from './services/ecl-inpage-navigation.service';\n\nexport class EclInpageNavigationSectionEnterEvent extends EclBaseEvent {\n    constructor(public sectionId: string) {\n        super();\n    }\n}\n\n/**\n * The in-page navigation is a vertical menu containing (anchored) links to H2-headings on long content pages.\n * It gives the user an overview of the page contents and has a fixed position (does not move while scrolling) at either the left\n * side of a page on desktop or top-bar on mobile. This component helps users scan of the page quickly contents and may potentially\n * reduce vertical scrolling, allowing users to easily jump straight to the segment of the page.\n */\n@Component({\n    selector: 'ecl-inpage-navigation',\n    templateUrl: './ecl-inpage-navigation.component.html',\n    imports: [TranslatePipe, ...EUI_ECL_STICKY_CONTAINER, ...EUI_ECL_ICON],\n    styles: [\n        `\n            @media (min-width: 996px) {\n                .ecl-inpage-navigation__list {\n                    display: block !important;\n                }\n            }\n        `,\n    ],\n})\nexport class EclInpageNavigationComponent extends ECLBaseDirective implements OnInit, AfterViewInit, OnDestroy, DoCheck {\n    eclThemeService = inject(EclThemeService);\n\n    readonly eclTitle = input<string>(undefined);\n    /**\n     * Used to calculate component's position.\n     */\n    readonly marginTop = input<number>(undefined);\n    readonly marginBottom = input<number>(undefined);\n    /**\n     * Sets the offset from the top of the page (for example if there is a toolbar or header). Used to calculate scrolling behaviour.\n     */\n    readonly offsetTop = input<number, unknown>(undefined, { transform: numberAttribute });\n    readonly togglerButton = viewChild<ElementRef<HTMLButtonElement>>('togglerButton');\n    readonly toggleWrapper = viewChild<ElementRef<HTMLDivElement>>('toggleWrapper');\n    readonly navTittle = viewChild<ElementRef<HTMLDivElement>>('navTittle');\n    /**\n     * This event will be emitted, when onscroll a new section becomes active.\n     */\n    readonly sectionEnter = output<EclInpageNavigationSectionEnterEvent>();\n\n    readonly eclNavigationLinkItems = contentChildren(EclInpageNavigationItemComponent, { descendants: true });\n    readonly eclNavigationList = contentChild(EclInpageNavigationListDirective);\n\n    /**\n     * Used for the mobile view, where user can select a section from the dropdown.\n     */\n    isButtonExpanded = false;\n    currentSectionElement: HTMLElement | null = null;\n    public isRtl = false;\n    public listMaxHeight: number;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private differ: IterableDiffer<EclInpageNavigationItemComponent>;\n    private isMobileBreakpoint = false;\n    private MIN_DISTANCE_TOP = 10;\n    /**\n     * Extra spacing (px) kept between the sticky toggler and the target heading when scrolling to a section on mobile,\n     * so the heading is not flush against the toggler. Mirrors the spacing buffer used by the vanilla ECL\n     * `scroll-margin-top` rule (trigger height + spacing).\n     */\n    private readonly MOBILE_SCROLL_SPACING = 16;\n    private readonly ICON_SIZE_EC_THEME = '2xs';\n    private readonly ICON_SIZE_EU_THEME = 's';\n    private readonly TABLET_BREAKPOINT = 996;\n    private intersectionObserver: IntersectionObserver;\n    private eclRtlService = inject(EclRtlService);\n    private differs = inject(IterableDiffers);\n    private scrollDispatcher: ScrollDispatcher = inject(ScrollDispatcher);\n    private zone = inject(NgZone);\n    private cdkBreakpointObserver = inject(BreakpointObserver);\n    private viewportRuler = inject(ViewportRuler);\n    private eclInpageNavigationService = inject(EclInpageNavigationService);\n    private cdr = inject(ChangeDetectorRef);\n    private readonly platformId = inject(PLATFORM_ID);\n    private readonly doc = inject(DOCUMENT);\n    private readonly win = this.doc.defaultView; // Window | null\n    private readonly isBrowser = isPlatformBrowser(this.platformId);\n\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.zone.run(() => this.setListHeight());\n        });\n    }\n\n    ngOnInit(): void {\n        this.handleRtlChangeState();\n    }\n\n    ngAfterViewInit() {\n        if (!this.isBrowser) return;\n\n        this.subscribeToCDKScrollEvent();\n        this.observeBreakpointChanges();\n        this.viewportRuler.change(300)\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(() => this.zone.run(() => this.setListHeight()));\n\n        const togglerButton = this.togglerButton();\n        if (typeof IntersectionObserver !== 'undefined' && togglerButton?.nativeElement) {\n            this.intersectionObserver = new IntersectionObserver(() => this.setListHeight());\n            this.intersectionObserver.observe(togglerButton.nativeElement);\n        }\n    }\n\n    get hasNavigationList(): boolean {\n        return !!this.eclNavigationList();\n    }\n\n    get currentNavigationLinkItem(): EclInpageNavigationItemComponent {\n        return this.eclNavigationLinkItems().find((item) => item.sectionElement === this.currentSectionElement);\n    }\n\n    /**\n     * the size of the arrow-down icon, used in mobile view. There are different sizes for EC and EU themes.\n     */\n    get sizeIcon(): string {\n        if (this.eclThemeService.isECTheme()) {\n            return this.ICON_SIZE_EC_THEME;\n        } else {\n            return this.ICON_SIZE_EU_THEME;\n        }\n    }\n\n    get hasActiveSection(): boolean {\n        return !!this.currentSectionElement;\n    }\n\n    ngDoCheck(): void {\n        const diff = this.differ.diff(this.eclNavigationLinkItems());\n        if (diff) {\n            diff.forEachItem((item) => {\n                this.connectItemEvents(item.item);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n        const togglerButton = this.togglerButton();\n        if (this.intersectionObserver && togglerButton?.nativeElement) {\n            this.intersectionObserver.unobserve(togglerButton.nativeElement);\n            this.intersectionObserver.disconnect();\n        }\n    }\n\n    /**\n     * On mobile view - handle the dropdown toggle.\n     */\n    onExpandButtonClick(): void {\n        this.setButtonExpanded(!this.isButtonExpanded);\n    }\n\n    /**\n     * Single entry point for changing the dropdown expanded state. Keeps the local flag (used for the button's\n     * aria-expanded) and the shared service state (that drives the list's visibility class) in sync.\n     */\n    private setButtonExpanded(isExpanded: boolean): void {\n        this.isButtonExpanded = isExpanded;\n        this.eclInpageNavigationService.eclInpageNavigationToggle(isExpanded);\n    }\n\n    /**\n     * Dropdown keyboard navigation on mobile view.\n     * @param evt\n     */\n    onExpandButtonKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case 'Tab':\n                this.onExpandButtonTab(evt);\n                break;\n            case 'ArrowDown':\n                this.onExpandButtonArrowDown(evt);\n                break;\n            default:\n                break;\n        }\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            this.isRtl = rtlState;\n        });\n    }\n\n    /**\n     * Set the height of the list with the navigation items in px. So in case the full list cannot be displayed, a scroll will appear.\n     */\n    private setListHeight(): void {\n        if (!this.isBrowser) return;\n        const eclNavigationList = this.eclNavigationList();\n        if (!eclNavigationList) return;\n        if (!this.win) return;\n\n        const viewportHeight = this.win.innerHeight;\n        const viewportWidth = this.win.innerWidth;\n        let topPosition = 0;\n\n        if (viewportWidth < this.TABLET_BREAKPOINT) {\n            const toggleWrapper = this.toggleWrapper()?.nativeElement;\n            if (toggleWrapper) {\n                const styles = this.win.getComputedStyle(toggleWrapper);\n                topPosition =\n                    toggleWrapper.getBoundingClientRect().bottom +\n                    parseFloat(styles.marginBottom || '0');\n            }\n        } else if (this.eclTitle()) {\n            const titleEl = this.navTittle()?.nativeElement;\n            if (titleEl) topPosition = titleEl.getBoundingClientRect().bottom;\n        } else {\n            const listEl = eclNavigationList?.el?.nativeElement;\n            if (listEl) topPosition = listEl.getBoundingClientRect().top;\n        }\n\n        const availableSpace = viewportHeight - topPosition;\n        if (availableSpace > 0) {\n            this.listMaxHeight = availableSpace;\n            eclNavigationList.maxHeight.set(this.listMaxHeight);\n        }\n    }\n\n    private onExpandButtonArrowDown(evt: Event): void {\n        evt.preventDefault();\n        this.setButtonExpanded(true);\n        this.eclNavigationLinkItems().at(0).onFocus();\n    }\n\n    private onExpandButtonTab(evt: Event): void {\n        if ((evt as KeyboardEvent).shiftKey) {\n            evt.preventDefault();\n            this.eclNavigationLinkItems().at(this.eclNavigationLinkItems().length - 1).onFocus();\n        }\n    }\n\n    private connectItemEvents(item: EclInpageNavigationItemComponent): void {\n        item.itemArrowDown.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemArrowDown(item);\n        });\n\n        item.itemArrowUp.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemArrowUp(item);\n        });\n\n        item.itemTab.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onItemTab(item, evt);\n        });\n\n        item.itemEnter.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemEnter(item);\n        });\n\n        item.itemClick.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.selectNavigationItem(item.sectionElement);\n            if (item.sectionElement) {\n                this.scrollToSection(item.sectionElement);\n                item.sectionElement.focus();\n            }\n            this.setButtonExpanded(false);\n        });\n    }\n\n    private onItemEnter(item: EclInpageNavigationItemComponent): void {\n        this.selectNavigationItem(item.sectionElement);\n        if (item.sectionElement) {\n            this.scrollToSection(item.sectionElement);\n            if (item.sectionElement.tabIndex === -1) {\n                item.sectionElement.tabIndex = 0;\n                item.sectionElement.focus();\n                item.sectionElement.tabIndex = -1;\n            }\n        }\n        this.setButtonExpanded(false);\n    }\n\n    /**\n     * Scrolls the target section into view. On desktop this is a plain scrollIntoView() (unchanged behaviour). On\n     * mobile the in-page navigation toggler is sticky at the top, so a top-aligned scroll would hide the heading\n     * underneath it; we therefore set `scroll-margin-top` on the target (sticky toggler height + spacing buffer) and\n     * let scrollIntoView() honour it. Using scroll-margin-top instead of a manual window.scrollTo() keeps this working\n     * regardless of which element is the actual scroll container (window or a nested scrollable wrapper).\n     */\n    private scrollToSection(sectionElement: HTMLElement): void {\n        if (!this.isBrowser) return;\n        const offset = this.getMobileScrollOffset();\n        sectionElement.style.scrollMarginTop = offset > 0 ? `${offset}px` : '';\n        sectionElement.scrollIntoView();\n    }\n\n    /**\n     * The offset (px) applied on mobile so that a scrolled-to heading clears the sticky toggler: the toggler height\n     * plus a spacing buffer. Returns 0 on desktop (no sticky toggler). Shared by the scroll logic and the scroll-spy\n     * so the heading lands exactly where the spy expects it, keeping the active item in sync after a click.\n     */\n    private getMobileScrollOffset(): number {\n        if (!this.isMobileBreakpoint) return 0;\n        const toggleWrapper = this.toggleWrapper()?.nativeElement;\n        if (!toggleWrapper) return 0;\n        return toggleWrapper.getBoundingClientRect().height + this.MOBILE_SCROLL_SPACING;\n    }\n\n    private onItemArrowDown(item: EclInpageNavigationItemComponent): void {\n        const index = this.eclNavigationLinkItems().indexOf(item);\n        const eclNavigationLinkItems = this.eclNavigationLinkItems();\n        if (index !== eclNavigationLinkItems.length - 1) {\n            eclNavigationLinkItems.at(index + 1).onFocus();\n        }\n    }\n\n    private onItemArrowUp(item: EclInpageNavigationItemComponent): void {\n        const index = this.eclNavigationLinkItems().indexOf(item);\n        if (index !== 0) {\n            this.eclNavigationLinkItems().at(index - 1).onFocus();\n        } else {\n            const togglerButton = this.togglerButton();\n            if (this.isMobileBreakpoint && togglerButton) {\n                this.setButtonExpanded(false);\n                togglerButton.nativeElement.focus();\n            }\n        }\n    }\n\n    private onItemTab(item: EclInpageNavigationItemComponent, evt: Event): void {\n        if (this.isMobileBreakpoint) {\n            if (!(evt as KeyboardEvent).shiftKey) {\n                const index = this.eclNavigationLinkItems().indexOf(item);\n                if (index === this.eclNavigationLinkItems().length - 1) {\n                    evt.preventDefault();\n                    this.togglerButton().nativeElement.focus();\n                }\n            }\n        }\n    }\n\n    private subscribeToCDKScrollEvent(): void {\n        if (!this.isBrowser) return;\n\n        this.scrollDispatcher\n            .scrolled()\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(() => {\n                this.zone.run(() => {\n                    const ids = this.eclNavigationLinkItems().map((item) => item.sectionId());\n\n                    const sectionElements = ids\n                        .map((id) => this.doc.querySelector<HTMLElement>(`#${id}`))\n                        .filter((el): el is HTMLElement => !!el);\n\n                    this.handleNavigationLinksHighlight(sectionElements);\n                    this.setListHeight();\n                });\n            });\n    }\n\n    private selectNavigationItem(itemElement: HTMLElement): void {\n        this.eclNavigationLinkItems().forEach((it) => {\n            it.isActive.set(it.sectionElement === itemElement);\n        });\n        this.cdr.markForCheck();\n    }\n\n    private handleNavigationLinksHighlight(sectionElements: HTMLElement[]): void {\n        const currentSectionElement = this.findActiveSectionElement(sectionElements);\n\n        if (currentSectionElement !== this.currentSectionElement) {\n            this.currentSectionElement = currentSectionElement ?? undefined as HTMLElement | null;\n            if (currentSectionElement) this.selectNavigationItem(currentSectionElement);\n\n            const sectionId = this.currentNavigationLinkItem?.sectionId();\n            this.sectionEnter.emit(new EclInpageNavigationSectionEnterEvent(sectionId));\n        }\n    }\n\n    private findActiveSectionElement(sectionElements: HTMLElement[]): HTMLElement | null {\n        if (!this.isBrowser || !this.win) return null;\n\n        let currentSection: HTMLElement | null = null;\n        // On mobile the heading is scrolled to sit just below the sticky toggler, so the spy must use that same\n        // offset; otherwise it would highlight the previous section. On desktop keep the original threshold.\n        const offset = this.isMobileBreakpoint\n            ? this.getMobileScrollOffset()\n            : this.MIN_DISTANCE_TOP + (this.offsetTop() ?? 0);\n\n        const isNearBottom =\n            this.win.innerHeight + this.win.scrollY >=\n            this.doc.documentElement.scrollHeight - 10;\n\n        for (const sectionElement of sectionElements) {\n            const rect = sectionElement.getBoundingClientRect();\n            const isAboveOffset = rect.top <= offset;\n            const isVisibleInViewport = rect.top < this.win.innerHeight;\n\n            if (isAboveOffset || (isVisibleInViewport && isNearBottom)) {\n                currentSection = sectionElement;\n            }\n        }\n\n        return currentSection;\n    }\n\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe([Breakpoints.Handset, Breakpoints.Tablet, Breakpoints.Small])\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((result) => {\n                this.isMobileBreakpoint = result.matches;\n            });\n    }\n}\n",
+            "sourceCode": "import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';\nimport { ScrollDispatcher, ViewportRuler } from '@angular/cdk/scrolling';\nimport { isPlatformBrowser } from '@angular/common';\nimport { AfterViewInit, ChangeDetectorRef, Component, DOCUMENT, DoCheck, ElementRef, IterableDiffer, IterableDiffers, NgZone, OnDestroy, OnInit, PLATFORM_ID, afterNextRender, contentChild, contentChildren, inject, input, numberAttribute, output, viewChild } from '@angular/core';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_STICKY_CONTAINER } from '@eui/ecl/components/ecl-sticky-container';\nimport { ECLBaseDirective, EclBaseEvent, EclRtlService, EclThemeService } from '@eui/ecl/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { EclInpageNavigationItemComponent } from './ecl-inpage-navigation-item.component';\nimport { EclInpageNavigationListDirective } from './ecl-inpage-navigation-list.directive';\nimport { EclInpageNavigationService } from './services/ecl-inpage-navigation.service';\n\nexport class EclInpageNavigationSectionEnterEvent extends EclBaseEvent {\n    constructor(public sectionId: string) {\n        super();\n    }\n}\n\n/**\n * The in-page navigation is a vertical menu containing (anchored) links to H2-headings on long content pages.\n * It gives the user an overview of the page contents and has a fixed position (does not move while scrolling) at either the left\n * side of a page on desktop or top-bar on mobile. This component helps users scan of the page quickly contents and may potentially\n * reduce vertical scrolling, allowing users to easily jump straight to the segment of the page.\n */\n@Component({\n    selector: 'ecl-inpage-navigation',\n    templateUrl: './ecl-inpage-navigation.component.html',\n    imports: [TranslatePipe, ...EUI_ECL_STICKY_CONTAINER, ...EUI_ECL_ICON],\n    styles: [\n        `\n            @media (min-width: 996px) {\n                .ecl-inpage-navigation__list {\n                    display: block !important;\n                }\n            }\n        `,\n    ],\n})\nexport class EclInpageNavigationComponent extends ECLBaseDirective implements OnInit, AfterViewInit, OnDestroy, DoCheck {\n    eclThemeService = inject(EclThemeService);\n\n    readonly eclTitle = input<string>(undefined);\n    /**\n     * Used to calculate component's position.\n     */\n    readonly marginTop = input<number>(undefined);\n    readonly marginBottom = input<number>(undefined);\n    /**\n     * Sets the offset from the top of the page (for example if there is a toolbar or header). Used to calculate scrolling behaviour.\n     */\n    readonly offsetTop = input<number, unknown>(undefined, { transform: numberAttribute });\n    readonly togglerButton = viewChild<ElementRef<HTMLButtonElement>>('togglerButton');\n    readonly toggleWrapper = viewChild<ElementRef<HTMLDivElement>>('toggleWrapper');\n    readonly navTittle = viewChild<ElementRef<HTMLDivElement>>('navTittle');\n    /**\n     * This event will be emitted, when onscroll a new section becomes active.\n     */\n    readonly sectionEnter = output<EclInpageNavigationSectionEnterEvent>();\n\n    readonly eclNavigationLinkItems = contentChildren(EclInpageNavigationItemComponent, { descendants: true });\n    readonly eclNavigationList = contentChild(EclInpageNavigationListDirective);\n\n    /**\n     * Used for the mobile view, where user can select a section from the dropdown.\n     */\n    isButtonExpanded = false;\n    currentSectionElement: HTMLElement | null = null;\n    public isRtl = false;\n    public listMaxHeight: number;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private differ: IterableDiffer<EclInpageNavigationItemComponent>;\n    private isMobileBreakpoint = false;\n    private MIN_DISTANCE_TOP = 10;\n    /**\n     * Extra spacing (px) kept between the sticky toggler and the target heading when scrolling to a section on mobile,\n     * so the heading is not flush against the toggler. Mirrors the spacing buffer used by the vanilla ECL\n     * `scroll-margin-top` rule (trigger height + spacing).\n     */\n    private readonly MOBILE_SCROLL_SPACING = 16;\n    private readonly ICON_SIZE_EC_THEME = '2xs';\n    private readonly ICON_SIZE_EU_THEME = 's';\n    private readonly TABLET_BREAKPOINT = 996;\n    private intersectionObserver: IntersectionObserver;\n    private eclRtlService = inject(EclRtlService);\n    private differs = inject(IterableDiffers);\n    private scrollDispatcher: ScrollDispatcher = inject(ScrollDispatcher);\n    private zone = inject(NgZone);\n    private cdkBreakpointObserver = inject(BreakpointObserver);\n    private viewportRuler = inject(ViewportRuler);\n    private eclInpageNavigationService = inject(EclInpageNavigationService);\n    private cdr = inject(ChangeDetectorRef);\n    private readonly platformId = inject(PLATFORM_ID);\n    private readonly doc = inject(DOCUMENT);\n    private readonly win = this.doc.defaultView; // Window | null\n    private readonly isBrowser = isPlatformBrowser(this.platformId);\n\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.zone.run(() => this.setListHeight());\n        });\n    }\n\n    ngOnInit(): void {\n        this.handleRtlChangeState();\n    }\n\n    ngAfterViewInit() {\n        if (!this.isBrowser) return;\n\n        this.subscribeToCDKScrollEvent();\n        this.observeBreakpointChanges();\n        this.viewportRuler.change(300)\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(() => this.zone.run(() => this.setListHeight()));\n\n        const togglerButton = this.togglerButton();\n        if (typeof IntersectionObserver !== 'undefined' && togglerButton?.nativeElement) {\n            this.intersectionObserver = new IntersectionObserver(() => this.setListHeight());\n            this.intersectionObserver.observe(togglerButton.nativeElement);\n        }\n    }\n\n    get hasNavigationList(): boolean {\n        return !!this.eclNavigationList();\n    }\n\n    get currentNavigationLinkItem(): EclInpageNavigationItemComponent {\n        return this.eclNavigationLinkItems().find((item) => item.sectionElement === this.currentSectionElement);\n    }\n\n    /**\n     * the size of the arrow-down icon, used in mobile view. There are different sizes for EC and EU themes.\n     */\n    get sizeIcon(): string {\n        if (this.eclThemeService.isECTheme()) {\n            return this.ICON_SIZE_EC_THEME;\n        } else {\n            return this.ICON_SIZE_EU_THEME;\n        }\n    }\n\n    get hasActiveSection(): boolean {\n        return !!this.currentSectionElement;\n    }\n\n    ngDoCheck(): void {\n        const diff = this.differ.diff(this.eclNavigationLinkItems());\n        if (diff) {\n            diff.forEachItem((item) => {\n                this.connectItemEvents(item.item);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n        const togglerButton = this.togglerButton();\n        if (this.intersectionObserver && togglerButton?.nativeElement) {\n            this.intersectionObserver.unobserve(togglerButton.nativeElement);\n            this.intersectionObserver.disconnect();\n        }\n    }\n\n    /**\n     * On mobile view - handle the dropdown toggle.\n     */\n    onExpandButtonClick(): void {\n        this.setButtonExpanded(!this.isButtonExpanded);\n    }\n\n    /**\n     * Single entry point for changing the dropdown expanded state. Keeps the local flag (used for the button's\n     * aria-expanded) and the shared service state (that drives the list's visibility class) in sync.\n     */\n    private setButtonExpanded(isExpanded: boolean): void {\n        this.isButtonExpanded = isExpanded;\n        this.eclInpageNavigationService.eclInpageNavigationToggle(isExpanded);\n    }\n\n    /**\n     * Dropdown keyboard navigation on mobile view.\n     * @param evt\n     */\n    onExpandButtonKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case 'Tab':\n                this.onExpandButtonTab(evt);\n                break;\n            case 'ArrowDown':\n                this.onExpandButtonArrowDown(evt);\n                break;\n            default:\n                break;\n        }\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            this.isRtl = rtlState;\n        });\n    }\n\n    /**\n     * Set the height of the list with the navigation items in px. So in case the full list cannot be displayed, a scroll will appear.\n     */\n    private setListHeight(): void {\n        if (!this.isBrowser) return;\n        const eclNavigationList = this.eclNavigationList();\n        if (!eclNavigationList) return;\n        if (!this.win) return;\n\n        const viewportHeight = this.win.innerHeight;\n        const viewportWidth = this.win.innerWidth;\n        let topPosition = 0;\n\n        if (viewportWidth < this.TABLET_BREAKPOINT) {\n            const toggleWrapper = this.toggleWrapper()?.nativeElement;\n            if (toggleWrapper) {\n                const styles = this.win.getComputedStyle(toggleWrapper);\n                topPosition =\n                    toggleWrapper.getBoundingClientRect().bottom +\n                    parseFloat(styles.marginBottom || '0');\n            }\n        } else if (this.eclTitle()) {\n            const titleEl = this.navTittle()?.nativeElement;\n            if (titleEl) topPosition = titleEl.getBoundingClientRect().bottom;\n        } else {\n            const listEl = eclNavigationList?.el?.nativeElement;\n            if (listEl) topPosition = listEl.getBoundingClientRect().top;\n        }\n\n        const availableSpace = viewportHeight - topPosition;\n        if (availableSpace > 0) {\n            this.listMaxHeight = availableSpace;\n            eclNavigationList.maxHeight.set(this.listMaxHeight);\n        }\n    }\n\n    private onExpandButtonArrowDown(evt: Event): void {\n        evt.preventDefault();\n        this.setButtonExpanded(true);\n        this.eclNavigationLinkItems().at(0).onFocus();\n    }\n\n    private onExpandButtonTab(evt: Event): void {\n        if ((evt as KeyboardEvent).shiftKey) {\n            evt.preventDefault();\n            this.eclNavigationLinkItems().at(this.eclNavigationLinkItems().length - 1).onFocus();\n        }\n    }\n\n    private connectItemEvents(item: EclInpageNavigationItemComponent): void {\n        item.itemArrowDown.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemArrowDown(item);\n        });\n\n        item.itemArrowUp.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemArrowUp(item);\n        });\n\n        item.itemTab.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onItemTab(item, evt);\n        });\n\n        item.itemEnter.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemEnter(item);\n        });\n\n        item.itemClick.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.selectNavigationItem(item.sectionElement);\n            if (item.sectionElement) {\n                this.scrollToSection(item.sectionElement);\n                item.sectionElement.focus();\n            }\n            this.setButtonExpanded(false);\n        });\n    }\n\n    private onItemEnter(item: EclInpageNavigationItemComponent): void {\n        this.selectNavigationItem(item.sectionElement);\n        if (item.sectionElement) {\n            this.scrollToSection(item.sectionElement);\n            if (item.sectionElement.tabIndex === -1) {\n                item.sectionElement.tabIndex = 0;\n                item.sectionElement.focus();\n                item.sectionElement.tabIndex = -1;\n            }\n        }\n        this.setButtonExpanded(false);\n    }\n\n    /**\n     * Scrolls the target section into view. On desktop this is a plain scrollIntoView() (unchanged behaviour). On\n     * mobile the in-page navigation toggler is sticky at the top, so a top-aligned scroll would hide the heading\n     * underneath it; we therefore set `scroll-margin-top` on the target (sticky toggler height + spacing buffer) and\n     * let scrollIntoView() honour it. Using scroll-margin-top instead of a manual window.scrollTo() keeps this working\n     * regardless of which element is the actual scroll container (window or a nested scrollable wrapper).\n     */\n    private scrollToSection(sectionElement: HTMLElement): void {\n        if (!this.isBrowser) return;\n        const offset = this.getMobileScrollOffset();\n        sectionElement.style.scrollMarginTop = offset > 0 ? `${offset}px` : '';\n        sectionElement.scrollIntoView();\n    }\n\n    /**\n     * The offset (px) applied on mobile so that a scrolled-to heading clears the sticky toggler: the toggler height\n     * plus a spacing buffer. Returns 0 on desktop (no sticky toggler). Shared by the scroll logic and the scroll-spy\n     * so the heading lands exactly where the spy expects it, keeping the active item in sync after a click.\n     */\n    private getMobileScrollOffset(): number {\n        if (!this.isMobileBreakpoint) return 0;\n        const toggleWrapper = this.toggleWrapper()?.nativeElement;\n        if (!toggleWrapper) return 0;\n        return toggleWrapper.getBoundingClientRect().height + this.MOBILE_SCROLL_SPACING;\n    }\n\n    private onItemArrowDown(item: EclInpageNavigationItemComponent): void {\n        const index = this.eclNavigationLinkItems().indexOf(item);\n        const eclNavigationLinkItems = this.eclNavigationLinkItems();\n        if (index !== eclNavigationLinkItems.length - 1) {\n            eclNavigationLinkItems.at(index + 1).onFocus();\n        }\n    }\n\n    private onItemArrowUp(item: EclInpageNavigationItemComponent): void {\n        const index = this.eclNavigationLinkItems().indexOf(item);\n        if (index !== 0) {\n            this.eclNavigationLinkItems().at(index - 1).onFocus();\n        } else {\n            const togglerButton = this.togglerButton();\n            if (this.isMobileBreakpoint && togglerButton) {\n                this.setButtonExpanded(false);\n                togglerButton.nativeElement.focus();\n            }\n        }\n    }\n\n    private onItemTab(item: EclInpageNavigationItemComponent, evt: Event): void {\n        if (this.isMobileBreakpoint) {\n            if (!(evt as KeyboardEvent).shiftKey) {\n                const index = this.eclNavigationLinkItems().indexOf(item);\n                if (index === this.eclNavigationLinkItems().length - 1) {\n                    evt.preventDefault();\n                    this.togglerButton().nativeElement.focus();\n                }\n            }\n        }\n    }\n\n    private subscribeToCDKScrollEvent(): void {\n        if (!this.isBrowser) return;\n\n        this.scrollDispatcher\n            .scrolled()\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(() => {\n                this.zone.run(() => {\n                    const ids = this.eclNavigationLinkItems().map((item) => item.sectionId());\n\n                    const sectionElements = ids\n                        .map((id) => this.doc.querySelector<HTMLElement>(`#${id}`))\n                        .filter((el): el is HTMLElement => !!el);\n\n                    this.handleNavigationLinksHighlight(sectionElements);\n                    this.setListHeight();\n                });\n            });\n    }\n\n    private selectNavigationItem(itemElement: HTMLElement): void {\n        this.eclNavigationLinkItems().forEach((it) => {\n            it.isActive.set(it.sectionElement === itemElement);\n        });\n        this.cdr.markForCheck();\n    }\n\n    private handleNavigationLinksHighlight(sectionElements: HTMLElement[]): void {\n        const currentSectionElement = this.findActiveSectionElement(sectionElements);\n\n        if (currentSectionElement !== this.currentSectionElement) {\n            this.currentSectionElement = currentSectionElement ?? undefined as HTMLElement | null;\n            if (currentSectionElement) this.selectNavigationItem(currentSectionElement);\n\n            const sectionId = this.currentNavigationLinkItem?.sectionId();\n            this.sectionEnter.emit(new EclInpageNavigationSectionEnterEvent(sectionId));\n        }\n    }\n\n    private findActiveSectionElement(sectionElements: HTMLElement[]): HTMLElement | null {\n        if (!this.isBrowser || !this.win) return null;\n\n        let currentSection: HTMLElement | null = null;\n        // On mobile the heading is scrolled to sit just below the sticky toggler, so the spy must use that same\n        // offset; otherwise it would highlight the previous section. The extra MIN_DISTANCE_TOP is a cushion so a\n        // heading that lands right on the boundary (sub-pixel rounding) is still treated as \"reached\". On desktop\n        // keep the original threshold.\n        const offset = this.isMobileBreakpoint\n            ? this.getMobileScrollOffset() + this.MIN_DISTANCE_TOP\n            : this.MIN_DISTANCE_TOP + (this.offsetTop() ?? 0);\n\n        const isNearBottom =\n            this.win.innerHeight + this.win.scrollY >=\n            this.doc.documentElement.scrollHeight - 10;\n\n        for (const sectionElement of sectionElements) {\n            const rect = sectionElement.getBoundingClientRect();\n            const isAboveOffset = rect.top <= offset;\n            const isVisibleInViewport = rect.top < this.win.innerHeight;\n\n            if (isAboveOffset || (isVisibleInViewport && isNearBottom)) {\n                currentSection = sectionElement;\n            }\n        }\n\n        return currentSection;\n    }\n\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe([Breakpoints.Handset, Breakpoints.Tablet, Breakpoints.Small])\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((result) => {\n                this.isMobileBreakpoint = result.matches;\n            });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n            @media (min-width: 996px) {\n                .ecl-inpage-navigation__list {\n                    display: block !important;\n                }\n            }\n        \n",
@@ -60558,10 +60214,11 @@
         },
         {
             "name": "EclMegaMenuComponent",
-            "id": "component-EclMegaMenuComponent-9247a57b9fb88d15221371775a1774c85157f41a7fb4a0e7c951085c6fc8037d6767959ec08dd2f3676758096cf5f3595b548aaeb217f761550382da0a56135c",
+            "id": "component-EclMegaMenuComponent-9b62a890775e692b1eb7f0c733b0a94e63ac8865f168eedc15c7b67ed0233589618a08c53d63f8818b5c5bddb11fa80bd61a72da708369552349c854df10855b",
             "file": "packages/ecl/components/ecl-mega-menu/ecl-mega-menu.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -60642,7 +60299,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The event that is emitted, when a menu item is selected.</p>\n",
-                    "line": 69,
+                    "line": 67,
                     "rawdescription": "\n\nThe event that is emitted, when a menu item is selected.\n",
                     "modifierKind": [
                         148
@@ -60661,7 +60318,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Represents the current viewport breakpoint states.</p>\n",
-                    "line": 117,
+                    "line": 115,
                     "rawdescription": "\n\nRepresents the current viewport breakpoint states.\n",
                     "modifierKind": [
                         125
@@ -60677,7 +60334,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Adds the relative class to the component, when a submenu is opened and this submenu has a featured component child</p>\n",
-                    "line": 112,
+                    "line": 110,
                     "rawdescription": "\nAdds the relative class to the component, when a submenu is opened and this submenu has a featured component child"
                 },
                 {
@@ -60689,7 +60346,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 109,
+                    "line": 107,
                     "rawdescription": "\n"
                 },
                 {
@@ -60702,7 +60359,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 53,
+                    "line": 58,
                     "rawdescription": "\n"
                 },
                 {
@@ -60715,7 +60372,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>If the menu is in mobile mode.</p>\n",
-                    "line": 75,
+                    "line": 73,
                     "rawdescription": "\n\nIf the menu is in mobile mode.\n"
                 },
                 {
@@ -60728,7 +60385,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>If the menu is expanded in mobile mode.</p>\n",
-                    "line": 79,
+                    "line": 77,
                     "rawdescription": "\n\nIf the menu is expanded in mobile mode.\n"
                 },
                 {
@@ -60741,7 +60398,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>When a menu item is expanded and has only one panel (one sub-level).</p>\n",
-                    "line": 83,
+                    "line": 81,
                     "rawdescription": "\n\nWhen a menu item is expanded and has only one panel (one sub-level).\n"
                 },
                 {
@@ -60754,7 +60411,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>If the menu is open, when in mobile mode.</p>\n",
-                    "line": 87,
+                    "line": 85,
                     "rawdescription": "\n\nIf the menu is open, when in mobile mode.\n"
                 },
                 {
@@ -60767,7 +60424,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Used in mobile mode - when the start panel is open (i.e. the hamburger button is clicked).</p>\n",
-                    "line": 91,
+                    "line": 89,
                     "rawdescription": "\n\nUsed in mobile mode - when the start panel is open (i.e. the hamburger button is clicked).\n"
                 },
                 {
@@ -60780,7 +60437,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>If a menu item is expanded and has two panels/levels displayed.</p>\n",
-                    "line": 95,
+                    "line": 93,
                     "rawdescription": "\n\nIf a menu item is expanded and has two panels/levels displayed.\n"
                 },
                 {
@@ -60793,7 +60450,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 70,
+                    "line": 68,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -60808,30 +60465,8 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Used to position the overlay, when a menu item is expanded.</p>\n",
-                    "line": 108,
+                    "line": 106,
                     "rawdescription": "\n\nUsed to position the overlay, when a menu item is expanded.\n"
-                },
-                {
-                    "name": "role",
-                    "coverageIgnore": false,
-                    "defaultValue": "'navigation'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "<p>The &#39;role&#39; attribute of the component is set to &#39;navigation&#39;. should not be changed.</p>\n",
-                    "line": 64,
-                    "rawdescription": "\n\nThe 'role' attribute of the component is set to 'navigation'. should not be changed.\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.role'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
                 }
             ],
             "methodsClass": [
@@ -60842,7 +60477,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 151,
+                    "line": 150,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -60855,7 +60490,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 161,
+                    "line": 160,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -60868,20 +60503,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 170,
+                    "line": 168,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWhen clicking outside the menu - close any expanded item.\n",
-                    "description": "<p>When clicking outside the menu - close any expanded item.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'eclClickOutside'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "description": "<p>When clicking outside the menu - close any expanded item.</p>\n"
                 },
                 {
                     "name": "onMegaMenuBack",
@@ -60890,7 +60516,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 223,
+                    "line": 221,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed for mobile menu - when user clicks on 'Back' button. Returns to the previous state.\n",
@@ -60903,7 +60529,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 200,
+                    "line": 198,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -60916,7 +60542,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 176,
+                    "line": 174,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -60938,7 +60564,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 231,
+                    "line": 229,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -60999,58 +60625,8 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.data-expanded",
-                    "actualName": "expandedAttr",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 57,
-                    "type": "\"true\" | null",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.role",
-                    "actualName": "role",
-                    "defaultValue": "'navigation'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nThe 'role' attribute of the component is set to 'navigation'. should not be changed.\n",
-                    "description": "<p>The &#39;role&#39; attribute of the component is set to &#39;navigation&#39;. should not be changed.</p>\n",
-                    "line": 64,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 41,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
-            "hostListeners": [
-                {
-                    "coverageIgnore": false,
-                    "name": "eclClickOutside",
-                    "args": [],
-                    "argsDecorator": [],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nWhen clicking outside the menu - close any expanded item.\n",
-                    "description": "<p>When clicking outside the menu - close any expanded item.</p>\n",
-                    "line": 170
-                }
-            ],
+            "hostBindings": [],
+            "hostListeners": [],
             "standalone": false,
             "imports": [
                 {
@@ -61067,14 +60643,14 @@
             "description": "<p>The &#39;eclMegaMenu&#39; is an advanced navigation component designed for complex sites with deep hierarchies.\nIt can provide descriptive text for first level items, accommodate up to three levels of navigation,\nand additionally allows a featured column that can be used to either promote parent-page specific or site-wide pages,\nhidden deep into the lower levels of the hierarchy.</p>\n",
             "rawdescription": "\n\nThe 'eclMegaMenu' is an advanced navigation component designed for complex sites with deep hierarchies.\nIt can provide descriptive text for first level items, accommodate up to three levels of navigation,\nand additionally allows a featured column that can be used to either promote parent-page specific or site-wide pages,\nhidden deep into the lower levels of the hierarchy.\n",
             "type": "component",
-            "sourceCode": "import { Component, DOCUMENT, DoCheck, ElementRef, HostBinding, HostListener, IterableDiffer, IterableDiffers, OnDestroy, Renderer2, afterNextRender, forwardRef, inject, output, contentChildren } from '@angular/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { auditTime, fromEvent, Subject, takeUntil } from 'rxjs';\nimport { ECLClickOutsideDirective, EclRtlService } from '@eui/ecl/core';\nimport { EuiAppShellService } from '@eui/core';\nimport { KeyCode } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclMegaMenuItem } from './models/ecl-mega-menu-item.model';\nimport { EclMegaMenuDataService } from './services/ecl-mega-menu-data.service';\nimport { EclMegaMenuItemComponent } from './ecl-mega-menu-item/ecl-mega-menu-item.component';\nimport { EclHeaderMenuComunicationService } from '@eui/ecl/shared';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n/**\n * The 'eclMegaMenu' is an advanced navigation component designed for complex sites with deep hierarchies.\n * It can provide descriptive text for first level items, accommodate up to three levels of navigation,\n * and additionally allows a featured column that can be used to either promote parent-page specific or site-wide pages,\n * hidden deep into the lower levels of the hierarchy.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'nav[eclMegaMenu]',\n    templateUrl: './ecl-mega-menu.component.html',\n    imports: [TranslatePipe, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON],\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n        {\n            directive: ECLClickOutsideDirective,\n\n            outputs: ['eclClickOutside'],\n        },\n    ],\n})\n\nexport class EclMegaMenuComponent extends ECLBaseDirective implements DoCheck, OnDestroy {\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-mega-menu'),\n            this.isTwoPanels ? 'ecl-mega-menu--two-panels' : '',\n            this.isOnePanel ? 'ecl-mega-menu--one-panel' : '',\n            this.isRtl ? 'ecl-mega-menu--rtl' : '',\n            this.isTablet ? 'ecl-mega-menu--forced-mobile' : '',\n            this.isStartPanel ? 'ecl-mega-menu--start-panel' : '',\n            this.hasSecondaryFeatured ? 'ecl-mega-menu--has-secondary-featured' : '',\n        ].join(' ');\n    }\n\n    isExpanded = false;\n    private readonly document = inject<Document>(DOCUMENT);\n\n    @HostBinding('attr.data-expanded')\n    get expandedAttr() {\n        return this.isExpanded ? 'true' : null;\n    }\n\n    /**\n     * The 'role' attribute of the component is set to 'navigation'. should not be changed.\n     */\n    @HostBinding('attr.role') role = 'navigation';\n\n    /**\n     * The event that is emitted, when a menu item is selected.\n     */\n    readonly megaMenuItemSelect = output<EclMegaMenuItem>();\n    readonly menuItems = contentChildren(forwardRef(() => EclMegaMenuItemComponent), { descendants: true });\n\n    /**\n     * If the menu is in mobile mode.\n     */\n    isMobileBreakpoint = false;\n    /**\n     * If the menu is expanded in mobile mode.\n     */\n    isMobileExpanded = false;\n    /**\n     * When a menu item is expanded and has only one panel (one sub-level).\n     */\n    isOnePanel = false;\n    /**\n     * If the menu is open, when in mobile mode.\n     */\n    isOpenMobile = false; // used for mobile only\n    /**\n     * Used in mobile mode - when the start panel is open (i.e. the hamburger button is clicked).\n     */\n    isStartPanel = false;\n    /**\n     * If a menu item is expanded and has two panels/levels displayed.\n     */\n    isTwoPanels = false;\n\n    /**\n     * Returns true when the viewport is below the ECL desktop breakpoint (1140px).\n     * This covers both mobile (xs/sm) and tablet (md/lg) ranges where the menu\n     * should behave in mobile/hamburger mode, matching ECL's breakpointDesktop = 1140.\n     */\n    get isMobileOrTablet(): boolean {\n        return this.isMobileBreakpoint || this.isTablet;\n    }\n    /**\n     * Used to position the overlay, when a menu item is expanded.\n     */\n    overlayStyleTop: number;\n    innerStyleTop: number;\n\n    /** Adds the relative class to the component, when a submenu is opened and this submenu has a featured component child */\n    hasSecondaryFeatured = false;\n\n    /**\n     * Represents the current viewport breakpoint states.\n     */\n    public breakpointsValue: any = {\n        isMobile: false,\n        isTablet: false,\n        isLtDesktop: false,\n        isDesktop: false,\n        isXL: false,\n        isXXL: false,\n    };\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private differ: IterableDiffer<EclMegaMenuItemComponent>;\n    private isRtl = false;\n    private isTablet = false;\n    private parentHeaderBottomSpaceY: number;\n    private differs = inject(IterableDiffers);\n    private eclRtlService = inject(EclRtlService);\n    private euiAppShellService = inject(EuiAppShellService);\n    private eclHeaderMenuComunicationService = inject(EclHeaderMenuComunicationService);\n    private eclMegaMenuDataService = inject(EclMegaMenuDataService);\n    private el = inject(ElementRef);\n    private renderer = inject(Renderer2);\n    private readonly window = this.document.defaultView;\n\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.subscribeToAppShellBreakpoints();\n            this.handleRtlChangeState();\n            this.subscribeToEvents();\n            this.observeResizeWindow();\n        });\n    }\n\n    ngDoCheck(): void {\n        // For each added menu item - subscribe to item events.\n        const diff = this.differ.diff(this.menuItems());\n        if (diff) {\n            diff.forEachItem((item) => {\n                this.connectMegaMenuItemEvents(item.item);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * When clicking outside the menu - close any expanded item.\n     */\n    @HostListener('eclClickOutside')\n    onClickOutsideMegaMenu(): void {\n        if (this.isExpanded) {\n            this.closeMenuAndAnyOpenSubMenu();\n        }\n    }\n\n    onMegaMenuMobileOpen(): void {\n        if (this.isOpenMobile) {\n            this.onMegaMenuMobileClose();\n        } else {\n            this.disableScroll();\n            this.isExpanded = true;\n            this.isOnePanel = false;\n            this.isTwoPanels = false;\n\n            if (this.isMobileOrTablet) {\n                this.isStartPanel = true;\n                this.isMobileExpanded = true;\n            }\n            this.isOpenMobile = true;\n\n            this.eclHeaderMenuComunicationService.updateOpen(true);\n\n            // Focus first element\n            if (this.menuItems().length > 0) {\n                this.menuItems().at(0)!.onFocus();\n            }\n        }\n    }\n\n    onMegaMenuMobileClose(): void {\n        this.enableScroll();\n\n        // Collapse any expanded menu item (and its sub-items) so that\n        // reopening the menu always shows the top-level list cleanly.\n        const expandedItem = this.menuItems()?.find(item => item.isExpanded);\n        if (expandedItem) {\n            expandedItem.onMegaMenuItemCollapse();\n        }\n\n        this.hasSecondaryFeatured = false;\n        this.collapseMenu();\n\n        if (this.isMobileOrTablet) {\n            this.isStartPanel = false;\n            this.isMobileExpanded = false;\n        }\n        this.isOpenMobile = false;\n    }\n\n    /**\n     * Used for mobile menu - when user clicks on 'Back' button. Returns to the previous state.\n     */\n    onMegaMenuBack(): void {\n        if (this.isOnePanel) {\n            this.onMegaMenuBackToStartPanel();\n        } else if (this.isTwoPanels) {\n            this.onMegaMenuBackToOnePanel();\n        }\n    }\n\n    positionMenuOverlay(parentHeaderBottomSpaceY): void {\n        this.parentHeaderBottomSpaceY = parentHeaderBottomSpaceY;\n        if (this.isMobileOrTablet && parentHeaderBottomSpaceY) {\n            this.overlayStyleTop = parentHeaderBottomSpaceY;\n            this.innerStyleTop = parentHeaderBottomSpaceY;\n        } else {\n            if (this.parentHeaderBottomSpaceY) {\n                this.overlayStyleTop = parentHeaderBottomSpaceY;\n            } else {\n                const menuBottomY = this.el.nativeElement.getBoundingClientRect().bottom;\n                this.overlayStyleTop = menuBottomY;\n            }\n        }\n    }\n\n    private onMegaMenuBackToOnePanel(): void {\n\n        this.isStartPanel = false;\n        this.isTwoPanels = false;\n        this.isOnePanel = true;\n        const currentItem = this.menuItems().find(item => item.isExpanded);\n        const currentSubItem = currentItem.eclMegaMenuSublist().submenuItems().find(item => item.isExpanded);\n        this.hasSecondaryFeatured = false;\n        if (this.isMobileOrTablet) {\n            currentItem.eclMegaMenuSublist().submenuItems().filter(item => !item.isExpanded).forEach(el => {\n                el.onShow();\n            });\n        }\n        currentSubItem.isCurrent = false;\n        currentSubItem.isExpanded = false;\n    }\n\n    private onMegaMenuBackToStartPanel(): void {\n        this.isOnePanel = false;\n        this.isStartPanel = true;\n        const currentItem = this.menuItems().find(item => item.isExpanded);\n        currentItem.isCurrent = false;\n        currentItem.isExpanded = false;\n        this.eclHeaderMenuComunicationService.updateExpanded(false);\n    }\n\n    private subscribeToEvents(): void {\n\n        this.eclMegaMenuDataService.eclSubItemExpanded$.pipe(takeUntil(this.destroy$)).subscribe(isExpanded => {\n            this.isTwoPanels = isExpanded;\n            this.isOnePanel = !isExpanded;\n            this.isStartPanel = false;\n        });\n\n        this.eclMegaMenuDataService.eclSubItemClicked$.pipe(takeUntil(this.destroy$)).subscribe(item => {\n            this.onSubMenuItemClicked(item);\n            this.megaMenuItemSelect.emit(item);\n        });\n\n        this.eclMegaMenuDataService.eclSubItemEscape$.pipe(takeUntil(this.destroy$)).subscribe(item => {\n            this.closeMenuAndAnyOpenSubMenu();\n        });\n    }\n\n    private connectMegaMenuItemEvents(item: EclMegaMenuItemComponent): void {\n        item.megaMenuItemClicked.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onMegaMenuItemClicked(item);\n        });\n\n        item.megaMenuItemKeydown.pipe(takeUntil(this.destroy$)).subscribe((evt: KeyboardEvent) => {\n            this.onMegaMenuItemKeydown(item, evt);\n        });\n    }\n\n    private onMegaMenuItemClicked(item: EclMegaMenuItemComponent): void {\n        this.hasSecondaryFeatured = false;\n        this.menuItems().filter(megaItem => megaItem !== item).forEach(item => item.onMegaMenuItemCollapse());\n        if (item.hasChildren) {\n            if (item.isExpanded) {\n                if (this.isMobileOrTablet) {\n                    this.isOnePanel = true;\n                    this.isTwoPanels = false;\n                    this.isStartPanel = false;\n                } else {\n                    if (item.eclMegaMenuSublist()?.submenuItems().at(0)!.hasChildren) {\n                        this.isOnePanel = false;\n                        this.isTwoPanels = true;\n                    } else {\n                        this.isOnePanel = true;\n                        this.isTwoPanels = false;\n                    }\n                }\n                this.positionMenuOverlay(this.parentHeaderBottomSpaceY);\n                this.isExpanded = true;\n                this.disableScroll();\n            } else {\n                this.collapseMenu();\n            }\n        } else {\n            this.collapseMenu();\n        }\n        this.megaMenuItemSelect.emit(item as unknown as EclMegaMenuItem);\n    }\n\n    private onMegaMenuItemKeydown(item: EclMegaMenuItemComponent, evt: KeyboardEvent): void {\n\n        const itemIndex = this.menuItems().findIndex(elem => elem === item);\n        switch (evt.key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                this.focusOnPrevSibling(itemIndex);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.focusOnNextSibling(itemIndex);\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                evt.preventDefault();\n                this.focusOnPrevSibling(itemIndex);\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                evt.preventDefault();\n                this.focusOnNextSibling(itemIndex);\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                this.closeMenuAndAnyOpenSubMenu();\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    private onSubMenuItemClicked(item: EclMegaMenuItem): void {\n        if (item.isExpanded && item.hasFeatured) {\n            this.hasSecondaryFeatured = true;\n        } else {\n            this.hasSecondaryFeatured = false;\n        }\n        if (!item.hasChildren) {\n            this.closeMenuAndAnyOpenSubMenu();\n        }\n    }\n\n    private closeMenuAndAnyOpenSubMenu(): void {\n        if (this.isExpanded) {\n            const expandedItem = this.menuItems().find(item => item.isExpanded);\n            if (expandedItem !== undefined) {\n                expandedItem.onMegaMenuItemCollapse();\n            }\n            this.collapseMenu();\n        }\n    }\n\n    private collapseMenu(): void {\n        this.isExpanded = false;\n        this.isTwoPanels = false;\n        this.isOnePanel = false;\n        this.enableScroll();\n        this.eclHeaderMenuComunicationService.updateExpanded(false);\n    }\n\n    private focusOnPrevSibling(index: number): void {\n        if (index > 0) {\n            this.menuItems().at(index-1).onFocus();\n        }\n    }\n\n    private focusOnNextSibling(index: number): void {\n        if (index < this.menuItems().length - 1) {\n            this.menuItems().at(index+1).onFocus();\n        }\n    }\n\n    private subscribeToAppShellBreakpoints(): void {\n        this.euiAppShellService.breakpoints$\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((bkps: any) => {\n                this.breakpointsValue = bkps ?? this.breakpointsValue;\n\n                if (typeof bkps?.isMobile !== 'undefined' || typeof bkps?.isTablet !== 'undefined') {\n                    this.isMobileBreakpoint = !!bkps.isMobile;\n                    // ECL uses breakpointDesktop = 1140px. Everything below that threshold\n                    // (md: 768-995px AND lg: 996-1139px) must use mobile/hamburger behavior.\n                    // isLtLargeTablet covers xs/sm/md/lg (i.e. < 1140px).\n                    this.isTablet = !!(bkps.isLtLargeTablet && !bkps.isMobile);\n                    return;\n                }\n\n                if (typeof bkps?.width === 'number') {\n                    const w = bkps.width;\n                    this.isMobileBreakpoint = w <= 415;\n                    this.isTablet = w > 415 && w < 1140;\n                    return;\n                }\n\n                if (bkps && typeof bkps === 'object') {\n                    this.isMobileBreakpoint = !!(bkps.Handset || bkps.Small || bkps.mobile);\n                    this.isTablet = !!(bkps.Tablet || bkps.tablet);\n                    return;\n                }\n            });\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            if (rtlState !== undefined) {\n                this.isRtl = rtlState;\n            }\n        });\n    }\n\n    private disableScroll(): void {\n        this.renderer.addClass(this.document.body, 'ecl-mega-menu-prevent-scroll');\n    }\n\n    private enableScroll(): void {\n        this.renderer.removeClass(this.document.body, 'ecl-mega-menu-prevent-scroll');\n    }\n\n    /**\n     * On resize - reposition the overlay and recalculate inner top when the menu is expanded.\n     * Mirrors ECL's handleResize behavior that calls positionMenuOverlay() on every resize.\n     */\n    private observeResizeWindow(): void {\n        if (this.window) {\n            fromEvent(this.window, 'resize').pipe(\n                auditTime(200),\n                takeUntil(this.destroy$),\n            ).subscribe(() => {\n                if (this.isExpanded) {\n                    this.positionMenuOverlay(this.parentHeaderBottomSpaceY);\n                }\n            });\n        }\n    }\n}\n",
+            "sourceCode": "import { Component, DOCUMENT, DoCheck, ElementRef, IterableDiffer, IterableDiffers, OnDestroy, Renderer2, afterNextRender, forwardRef, inject, output, contentChildren } from '@angular/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { auditTime, fromEvent, Subject, takeUntil } from 'rxjs';\nimport { ECLClickOutsideDirective, EclRtlService } from '@eui/ecl/core';\nimport { EuiAppShellService } from '@eui/core';\nimport { KeyCode } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclMegaMenuItem } from './models/ecl-mega-menu-item.model';\nimport { EclMegaMenuDataService } from './services/ecl-mega-menu-data.service';\nimport { EclMegaMenuItemComponent } from './ecl-mega-menu-item/ecl-mega-menu-item.component';\nimport { EclHeaderMenuComunicationService } from '@eui/ecl/shared';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n/**\n * The 'eclMegaMenu' is an advanced navigation component designed for complex sites with deep hierarchies.\n * It can provide descriptive text for first level items, accommodate up to three levels of navigation,\n * and additionally allows a featured column that can be used to either promote parent-page specific or site-wide pages,\n * hidden deep into the lower levels of the hierarchy.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'nav[eclMegaMenu]',\n    templateUrl: './ecl-mega-menu.component.html',\n    imports: [TranslatePipe, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON],\n    host: {\n        role: 'navigation',\n        '[class]': 'cssClasses',\n        '[attr.data-expanded]': 'expandedAttr',\n        '(eclClickOutside)': 'onClickOutsideMegaMenu()',\n    },\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n        {\n            directive: ECLClickOutsideDirective,\n\n            outputs: ['eclClickOutside'],\n        },\n    ],\n})\n\nexport class EclMegaMenuComponent extends ECLBaseDirective implements DoCheck, OnDestroy {\n\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-mega-menu'),\n            this.isTwoPanels ? 'ecl-mega-menu--two-panels' : '',\n            this.isOnePanel ? 'ecl-mega-menu--one-panel' : '',\n            this.isRtl ? 'ecl-mega-menu--rtl' : '',\n            this.isTablet ? 'ecl-mega-menu--forced-mobile' : '',\n            this.isStartPanel ? 'ecl-mega-menu--start-panel' : '',\n            this.hasSecondaryFeatured ? 'ecl-mega-menu--has-secondary-featured' : '',\n        ].join(' ');\n    }\n\n    isExpanded = false;\n\n    get expandedAttr() {\n        return this.isExpanded ? 'true' : null;\n    }\n\n    /**\n     * The event that is emitted, when a menu item is selected.\n     */\n    readonly megaMenuItemSelect = output<EclMegaMenuItem>();\n    readonly menuItems = contentChildren(forwardRef(() => EclMegaMenuItemComponent), { descendants: true });\n\n    /**\n     * If the menu is in mobile mode.\n     */\n    isMobileBreakpoint = false;\n    /**\n     * If the menu is expanded in mobile mode.\n     */\n    isMobileExpanded = false;\n    /**\n     * When a menu item is expanded and has only one panel (one sub-level).\n     */\n    isOnePanel = false;\n    /**\n     * If the menu is open, when in mobile mode.\n     */\n    isOpenMobile = false; // used for mobile only\n    /**\n     * Used in mobile mode - when the start panel is open (i.e. the hamburger button is clicked).\n     */\n    isStartPanel = false;\n    /**\n     * If a menu item is expanded and has two panels/levels displayed.\n     */\n    isTwoPanels = false;\n\n    /**\n     * Returns true when the viewport is below the ECL desktop breakpoint (1140px).\n     * This covers both mobile (xs/sm) and tablet (md/lg) ranges where the menu\n     * should behave in mobile/hamburger mode, matching ECL's breakpointDesktop = 1140.\n     */\n    get isMobileOrTablet(): boolean {\n        return this.isMobileBreakpoint || this.isTablet;\n    }\n    /**\n     * Used to position the overlay, when a menu item is expanded.\n     */\n    overlayStyleTop: number;\n    innerStyleTop: number;\n\n    /** Adds the relative class to the component, when a submenu is opened and this submenu has a featured component child */\n    hasSecondaryFeatured = false;\n\n    /**\n     * Represents the current viewport breakpoint states.\n     */\n    public breakpointsValue: any = {\n        isMobile: false,\n        isTablet: false,\n        isLtDesktop: false,\n        isDesktop: false,\n        isXL: false,\n        isXXL: false,\n    };\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private differ: IterableDiffer<EclMegaMenuItemComponent>;\n    private isRtl = false;\n    private isTablet = false;\n    private parentHeaderBottomSpaceY: number;\n    private differs = inject(IterableDiffers);\n    private eclRtlService = inject(EclRtlService);\n    private euiAppShellService = inject(EuiAppShellService);\n    private eclHeaderMenuComunicationService = inject(EclHeaderMenuComunicationService);\n    private eclMegaMenuDataService = inject(EclMegaMenuDataService);\n    private el = inject(ElementRef);\n    private renderer = inject(Renderer2);\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly window = this.document.defaultView;\n\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.subscribeToAppShellBreakpoints();\n            this.handleRtlChangeState();\n            this.subscribeToEvents();\n            this.observeResizeWindow();\n        });\n    }\n\n    ngDoCheck(): void {\n        // For each added menu item - subscribe to item events.\n        const diff = this.differ.diff(this.menuItems());\n        if (diff) {\n            diff.forEachItem((item) => {\n                this.connectMegaMenuItemEvents(item.item);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * When clicking outside the menu - close any expanded item.\n     */\n    onClickOutsideMegaMenu(): void {\n        if (this.isExpanded) {\n            this.closeMenuAndAnyOpenSubMenu();\n        }\n    }\n\n    onMegaMenuMobileOpen(): void {\n        if (this.isOpenMobile) {\n            this.onMegaMenuMobileClose();\n        } else {\n            this.disableScroll();\n            this.isExpanded = true;\n            this.isOnePanel = false;\n            this.isTwoPanels = false;\n\n            if (this.isMobileOrTablet) {\n                this.isStartPanel = true;\n                this.isMobileExpanded = true;\n            }\n            this.isOpenMobile = true;\n\n            this.eclHeaderMenuComunicationService.updateOpen(true);\n\n            // Focus first element\n            if (this.menuItems().length > 0) {\n                this.menuItems().at(0)!.onFocus();\n            }\n        }\n    }\n\n    onMegaMenuMobileClose(): void {\n        this.enableScroll();\n\n        // Collapse any expanded menu item (and its sub-items) so that\n        // reopening the menu always shows the top-level list cleanly.\n        const expandedItem = this.menuItems()?.find(item => item.isExpanded);\n        if (expandedItem) {\n            expandedItem.onMegaMenuItemCollapse();\n        }\n\n        this.hasSecondaryFeatured = false;\n        this.collapseMenu();\n\n        if (this.isMobileOrTablet) {\n            this.isStartPanel = false;\n            this.isMobileExpanded = false;\n        }\n        this.isOpenMobile = false;\n    }\n\n    /**\n     * Used for mobile menu - when user clicks on 'Back' button. Returns to the previous state.\n     */\n    onMegaMenuBack(): void {\n        if (this.isOnePanel) {\n            this.onMegaMenuBackToStartPanel();\n        } else if (this.isTwoPanels) {\n            this.onMegaMenuBackToOnePanel();\n        }\n    }\n\n    positionMenuOverlay(parentHeaderBottomSpaceY): void {\n        this.parentHeaderBottomSpaceY = parentHeaderBottomSpaceY;\n        if (this.isMobileOrTablet && parentHeaderBottomSpaceY) {\n            this.overlayStyleTop = parentHeaderBottomSpaceY;\n            this.innerStyleTop = parentHeaderBottomSpaceY;\n        } else {\n            if (this.parentHeaderBottomSpaceY) {\n                this.overlayStyleTop = parentHeaderBottomSpaceY;\n            } else {\n                const menuBottomY = this.el.nativeElement.getBoundingClientRect().bottom;\n                this.overlayStyleTop = menuBottomY;\n            }\n        }\n    }\n\n    private onMegaMenuBackToOnePanel(): void {\n\n        this.isStartPanel = false;\n        this.isTwoPanels = false;\n        this.isOnePanel = true;\n        const currentItem = this.menuItems().find(item => item.isExpanded);\n        const currentSubItem = currentItem.eclMegaMenuSublist().submenuItems().find(item => item.isExpanded);\n        this.hasSecondaryFeatured = false;\n        if (this.isMobileOrTablet) {\n            currentItem.eclMegaMenuSublist().submenuItems().filter(item => !item.isExpanded).forEach(el => {\n                el.onShow();\n            });\n        }\n        currentSubItem.isCurrent = false;\n        currentSubItem.isExpanded = false;\n    }\n\n    private onMegaMenuBackToStartPanel(): void {\n        this.isOnePanel = false;\n        this.isStartPanel = true;\n        const currentItem = this.menuItems().find(item => item.isExpanded);\n        currentItem.isCurrent = false;\n        currentItem.isExpanded = false;\n        this.eclHeaderMenuComunicationService.updateExpanded(false);\n    }\n\n    private subscribeToEvents(): void {\n\n        this.eclMegaMenuDataService.eclSubItemExpanded$.pipe(takeUntil(this.destroy$)).subscribe(isExpanded => {\n            this.isTwoPanels = isExpanded;\n            this.isOnePanel = !isExpanded;\n            this.isStartPanel = false;\n        });\n\n        this.eclMegaMenuDataService.eclSubItemClicked$.pipe(takeUntil(this.destroy$)).subscribe(item => {\n            this.onSubMenuItemClicked(item);\n            this.megaMenuItemSelect.emit(item);\n        });\n\n        this.eclMegaMenuDataService.eclSubItemEscape$.pipe(takeUntil(this.destroy$)).subscribe(item => {\n            this.closeMenuAndAnyOpenSubMenu();\n        });\n    }\n\n    private connectMegaMenuItemEvents(item: EclMegaMenuItemComponent): void {\n        item.megaMenuItemClicked.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onMegaMenuItemClicked(item);\n        });\n\n        item.megaMenuItemKeydown.pipe(takeUntil(this.destroy$)).subscribe((evt: KeyboardEvent) => {\n            this.onMegaMenuItemKeydown(item, evt);\n        });\n    }\n\n    private onMegaMenuItemClicked(item: EclMegaMenuItemComponent): void {\n        this.hasSecondaryFeatured = false;\n        this.menuItems().filter(megaItem => megaItem !== item).forEach(item => item.onMegaMenuItemCollapse());\n        if (item.hasChildren) {\n            if (item.isExpanded) {\n                if (this.isMobileOrTablet) {\n                    this.isOnePanel = true;\n                    this.isTwoPanels = false;\n                    this.isStartPanel = false;\n                } else {\n                    if (item.eclMegaMenuSublist()?.submenuItems().at(0)!.hasChildren) {\n                        this.isOnePanel = false;\n                        this.isTwoPanels = true;\n                    } else {\n                        this.isOnePanel = true;\n                        this.isTwoPanels = false;\n                    }\n                }\n                this.positionMenuOverlay(this.parentHeaderBottomSpaceY);\n                this.isExpanded = true;\n                this.disableScroll();\n            } else {\n                this.collapseMenu();\n            }\n        } else {\n            this.collapseMenu();\n        }\n        this.megaMenuItemSelect.emit(item as unknown as EclMegaMenuItem);\n    }\n\n    private onMegaMenuItemKeydown(item: EclMegaMenuItemComponent, evt: KeyboardEvent): void {\n\n        const itemIndex = this.menuItems().findIndex(elem => elem === item);\n        switch (evt.key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                this.focusOnNextSibling(itemIndex);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.focusOnPrevSibling(itemIndex);\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                evt.preventDefault();\n                this.focusOnPrevSibling(itemIndex);\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                evt.preventDefault();\n                this.focusOnNextSibling(itemIndex);\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                this.closeMenuAndAnyOpenSubMenu();\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    private onSubMenuItemClicked(item: EclMegaMenuItem): void {\n        if (item.isExpanded && item.hasFeatured) {\n            this.hasSecondaryFeatured = true;\n        } else {\n            this.hasSecondaryFeatured = false;\n        }\n        if (!item.hasChildren) {\n            this.closeMenuAndAnyOpenSubMenu();\n        }\n    }\n\n    private closeMenuAndAnyOpenSubMenu(): void {\n        if (this.isExpanded) {\n            const expandedItem = this.menuItems().find(item => item.isExpanded);\n            if (expandedItem !== undefined) {\n                expandedItem.onMegaMenuItemCollapse();\n            }\n            this.collapseMenu();\n        }\n    }\n\n    private collapseMenu(): void {\n        this.isExpanded = false;\n        this.isTwoPanels = false;\n        this.isOnePanel = false;\n        this.enableScroll();\n        this.eclHeaderMenuComunicationService.updateExpanded(false);\n    }\n\n    private focusOnPrevSibling(index: number): void {\n        if (index > 0) {\n            this.menuItems().at(index-1).onFocus();\n        }\n    }\n\n    private focusOnNextSibling(index: number): void {\n        if (index < this.menuItems().length - 1) {\n            this.menuItems().at(index+1).onFocus();\n        }\n    }\n\n    private subscribeToAppShellBreakpoints(): void {\n        this.euiAppShellService.breakpoints$\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((bkps: any) => {\n                this.breakpointsValue = bkps ?? this.breakpointsValue;\n\n                if (typeof bkps?.isMobile !== 'undefined' || typeof bkps?.isTablet !== 'undefined') {\n                    this.isMobileBreakpoint = !!bkps.isMobile;\n                    // ECL uses breakpointDesktop = 1140px. Everything below that threshold\n                    // (md: 768-995px AND lg: 996-1139px) must use mobile/hamburger behavior.\n                    // isLtLargeTablet covers xs/sm/md/lg (i.e. < 1140px).\n                    this.isTablet = !!(bkps.isLtLargeTablet && !bkps.isMobile);\n                    return;\n                }\n\n                if (typeof bkps?.width === 'number') {\n                    const w = bkps.width;\n                    this.isMobileBreakpoint = w <= 415;\n                    this.isTablet = w > 415 && w < 1140;\n                    return;\n                }\n\n                if (bkps && typeof bkps === 'object') {\n                    this.isMobileBreakpoint = !!(bkps.Handset || bkps.Small || bkps.mobile);\n                    this.isTablet = !!(bkps.Tablet || bkps.tablet);\n                    return;\n                }\n            });\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            if (rtlState !== undefined) {\n                this.isRtl = rtlState;\n            }\n        });\n    }\n\n    private disableScroll(): void {\n        this.renderer.addClass(this.document.body, 'ecl-mega-menu-prevent-scroll');\n    }\n\n    private enableScroll(): void {\n        this.renderer.removeClass(this.document.body, 'ecl-mega-menu-prevent-scroll');\n    }\n\n    /**\n     * On resize - reposition the overlay and recalculate inner top when the menu is expanded.\n     * Mirrors ECL's handleResize behavior that calls positionMenuOverlay() on every resize.\n     */\n    private observeResizeWindow(): void {\n        if (this.window) {\n            fromEvent(this.window, 'resize').pipe(\n                auditTime(200),\n                takeUntil(this.destroy$),\n            ).subscribe(() => {\n                if (this.isExpanded) {\n                    this.positionMenuOverlay(this.parentHeaderBottomSpaceY);\n                }\n            });\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 986,
-                    "end": 1380,
+                    "pos": 959,
+                    "end": 1353,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -61089,7 +60665,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 138,
+                "line": 137,
                 "rawdescription": "\n"
             },
             "extends": [
@@ -61106,7 +60682,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 41,
+                        "line": 46,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -61117,7 +60693,7 @@
                         "name": "expandedAttr",
                         "type": "",
                         "returnType": "",
-                        "line": 57,
+                        "line": 60,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -61128,7 +60704,7 @@
                         "name": "isMobileOrTablet",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 102,
+                        "line": 100,
                         "rawdescription": "\n\nReturns true when the viewport is below the ECL desktop breakpoint (1140px).\nThis covers both mobile (xs/sm) and tablet (md/lg) ranges where the menu\nshould behave in mobile/hamburger mode, matching ECL's breakpointDesktop = 1140.\n",
                         "description": "<p>Returns true when the viewport is below the ECL desktop breakpoint (1140px).\nThis covers both mobile (xs/sm) and tablet (md/lg) ranges where the menu\nshould behave in mobile/hamburger mode, matching ECL&#39;s breakpointDesktop = 1140.</p>\n"
                     }
@@ -61171,10 +60747,11 @@
         },
         {
             "name": "EclMegaMenuFeaturedComponent",
-            "id": "component-EclMegaMenuFeaturedComponent-51504f98754ee92df020c127688c9b55858249e11427bf6f60056addad4576f10a588d7869d15b4b8076b56783af523130b384118b702f61316264a78e75cfa9",
+            "id": "component-EclMegaMenuFeaturedComponent-22e2894b38e6769578bb5e8fdeada1673f26651dbd80cc52876f3496645a6bab413d2a1a7092974c632fed220f6b6c5b41a977f39dd031af593016d2c43148bf",
             "file": "packages/ecl/components/ecl-mega-menu/ecl-mega-menu-featured/ecl-mega-menu-featured.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -61189,15 +60766,21 @@
             "hostDirectives": [],
             "inputsClass": [
                 {
-                    "coverageIgnore": false,
                     "name": "title",
+                    "coverageIgnore": false,
+                    "defaultValue": "undefined",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 20,
                     "type": "string",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 23,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
                     "name": "titleId",
@@ -61209,7 +60792,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 21,
+                    "line": 24,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -61262,28 +60845,6 @@
             ],
             "outputsClass": [],
             "propertiesClass": [
-                {
-                    "name": "cmpClass",
-                    "coverageIgnore": false,
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 18,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-mega-menu__featured'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                },
                 {
                     "name": "eclMegaMenuFeaturedStyleHeight",
                     "coverageIgnore": false,
@@ -61294,17 +60855,8 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 19,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'style.height.px'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "line": 22,
+                    "rawdescription": "\n"
                 },
                 {
                     "name": "featuredItems",
@@ -61316,7 +60868,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 23,
+                    "line": 26,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -61332,7 +60884,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 22,
+                    "line": 25,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -61348,7 +60900,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 17,
+                    "line": 21,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -61363,7 +60915,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 31,
+                    "line": 34,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalculates and returns the height of the component. The total height of all the list items.\n",
@@ -61371,8 +60923,8 @@
                     "jsdoctags": [
                         {
                             "tagName": {
-                                "pos": 1500,
-                                "end": 1507,
+                                "pos": 1524,
+                                "end": 1531,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -61390,7 +60942,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 24,
+                    "line": 27,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -61438,48 +60990,21 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-mega-menu__featured",
-                    "actualName": "cmpClass",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 18,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "style.height.px",
-                    "actualName": "eclMegaMenuFeaturedStyleHeight",
-                    "defaultValue": "null",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 19,
-                    "type": "number | null",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [],
             "description": "<p>This component represents the featured items panel.</p>\n",
             "rawdescription": "\n\nThis component represents the featured items panel.\n",
             "type": "component",
-            "sourceCode": "import { Component, ElementRef, HostBinding, Input, forwardRef, AfterContentInit, input, viewChild, contentChildren } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclLinkDirective } from '@eui/ecl/components/ecl-link';\nimport { EclMegaMenuFeaturedListItemDirective } from '../directives/ecl-mega-menu-featured-list.directive';\n\n/**\n * This component represents the featured items panel.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[eclMegaMenuFeatured]',\n    templateUrl: './ecl-mega-menu-featured.component.html',\n})\n\nexport class EclMegaMenuFeaturedComponent extends ECLBaseDirective implements AfterContentInit {\n\n    readonly megaMenuFeaturedScrollable = viewChild<ElementRef>('megaMenuFeaturedScrollable');\n    @HostBinding('class.ecl-mega-menu__featured') cmpClass = true;\n    @HostBinding('style.height.px') eclMegaMenuFeaturedStyleHeight: number | null = null;\n    @Input() title: string;\n    readonly titleId = input<string>(undefined);\n    readonly links = contentChildren(forwardRef(() => EclLinkDirective), { descendants: true });\n    readonly featuredItems = contentChildren(forwardRef(() => EclMegaMenuFeaturedListItemDirective), { descendants: true });\n    ngAfterContentInit(): void {\n        this.links()?.forEach(link => link.class = 'ecl-mega-menu__featured-link');\n    }\n    /**\n     * Calculates and returns the height of the component. The total height of all the list items.\n     * @returns the height of the component\n     */\n    getEclMegaMenuFeaturedHeight(): number {\n        let result = 0;\n        this.featuredItems()?.forEach(el => result += el.getEclMegaMenuFeaturedItemHeight());\n        return result;\n    }\n}\n",
+            "sourceCode": "import { Component, ElementRef, forwardRef, AfterContentInit, input, viewChild, contentChildren } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclLinkDirective } from '@eui/ecl/components/ecl-link';\nimport { EclMegaMenuFeaturedListItemDirective } from '../directives/ecl-mega-menu-featured-list.directive';\n\n/**\n * This component represents the featured items panel.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[eclMegaMenuFeatured]',\n    templateUrl: './ecl-mega-menu-featured.component.html',\n    host: {\n        class: 'ecl-mega-menu__featured',\n        '[style.height.px]': 'eclMegaMenuFeaturedStyleHeight',\n    },\n})\n\nexport class EclMegaMenuFeaturedComponent extends ECLBaseDirective implements AfterContentInit {\n\n    readonly megaMenuFeaturedScrollable = viewChild<ElementRef>('megaMenuFeaturedScrollable');\n    eclMegaMenuFeaturedStyleHeight: number | null = null;\n    readonly title = input<string>(undefined);\n    readonly titleId = input<string>(undefined);\n    readonly links = contentChildren(forwardRef(() => EclLinkDirective), { descendants: true });\n    readonly featuredItems = contentChildren(forwardRef(() => EclMegaMenuFeaturedListItemDirective), { descendants: true });\n    ngAfterContentInit(): void {\n        this.links()?.forEach(link => link.class = 'ecl-mega-menu__featured-link');\n    }\n    /**\n     * Calculates and returns the height of the component. The total height of all the list items.\n     * @returns the height of the component\n     */\n    getEclMegaMenuFeaturedHeight(): number {\n        let result = 0;\n        this.featuredItems()?.forEach(el => result += el.getEclMegaMenuFeaturedItemHeight());\n        return result;\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 364,
-                    "end": 426,
+                    "pos": 344,
+                    "end": 406,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -61507,11 +61032,11 @@
                     }
                 ]
             },
-            "templateData": "<div class=\"ecl-mega-menu__featured-scrollable\" #megaMenuFeaturedScrollable>\n    <ng-content select=\"[eclMegaMenuFeaturedPicture]\"></ng-content>\n    @if(title) {\n    <span class=\"ecl-mega-menu__featured-title\" id=\"{{titleId()}}\">{{ title }}</span>\n    }\n    <ng-content select=\"[eclMegaMenuFeaturedList]\"></ng-content>\n</div>"
+            "templateData": "<div class=\"ecl-mega-menu__featured-scrollable\" #megaMenuFeaturedScrollable>\n    <ng-content select=\"[eclMegaMenuFeaturedPicture]\"></ng-content>\n    @if(title()) {\n    <span class=\"ecl-mega-menu__featured-title\" id=\"{{titleId()}}\">{{ title() }}</span>\n    }\n    <ng-content select=\"[eclMegaMenuFeaturedList]\"></ng-content>\n</div>"
         },
         {
             "name": "EclMegaMenuInfoComponent",
-            "id": "component-EclMegaMenuInfoComponent-8b82c8ac032a76ebd7ae30c797f606763622e04f7be1905ee6b55bd2b5a8abf78ea6049a604bfd5777e68e4fdec747fee490d68112c443e331fe4217a5bac6a8",
+            "id": "component-EclMegaMenuInfoComponent-86c6229a159ff6b054705c59fc1bf92f306623386ea4b3f6328a97bd5ecf34066ec7c91f06b1f24ba00e7b5269f51a5b896c7d494ce7bd63d513cc68566ee570",
             "file": "packages/ecl/components/ecl-mega-menu/ecl-mega-menu-info/ecl-mega-menu-info.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -61539,7 +61064,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 44,
+                    "line": 45,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -61556,7 +61081,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 45,
+                    "line": 46,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -61619,17 +61144,8 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Sets the height of the component.</p>\n",
-                    "line": 38,
-                    "rawdescription": "\n\nSets the height of the component.\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'style.height.px'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "line": 39,
+                    "rawdescription": "\n\nSets the height of the component.\n"
                 },
                 {
                     "name": "eclMegaMenuInfoStyleOpacity",
@@ -61641,7 +61157,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Sets the opacity of the component.</p>\n",
-                    "line": 42,
+                    "line": 43,
                     "rawdescription": "\n\nSets the opacity of the component.\n"
                 },
                 {
@@ -61654,7 +61170,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 21,
+                    "line": 23,
                     "rawdescription": "\n"
                 },
                 {
@@ -61667,7 +61183,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>When the info panel contains link.</p>\n",
-                    "line": 55,
+                    "line": 56,
                     "rawdescription": "\n\nWhen the info panel contains link.\n",
                     "modifierKind": [
                         148
@@ -61682,7 +61198,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 79,
+                    "line": 80,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to calculate the height of the parent element.\n",
@@ -61690,8 +61206,8 @@
                     "jsdoctags": [
                         {
                             "tagName": {
-                                "pos": 2687,
-                                "end": 2694,
+                                "pos": 2708,
+                                "end": 2715,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -61709,7 +61225,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 58,
+                    "line": 59,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -61722,7 +61238,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 70,
+                    "line": 71,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -61770,47 +61286,21 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies custom styles for info component.\n",
-                    "description": "<p>Applies custom styles for info component.</p>\n",
-                    "line": 27,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "style.height.px",
-                    "actualName": "eclMegaMenuInfoStyleHeight",
-                    "defaultValue": "null",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nSets the height of the component.\n",
-                    "description": "<p>Sets the height of the component.</p>\n",
-                    "line": 38,
-                    "type": "number | null",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [],
             "description": "<p>Component for displaying some custom information for the current menu item.</p>\n",
             "rawdescription": "\n\nComponent for displaying some custom information for the current menu item.\n",
             "type": "component",
-            "sourceCode": "import { AfterViewInit, Component, ElementRef, HostBinding, OnDestroy, PLATFORM_ID, forwardRef, inject, signal, input, contentChild } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclLinkDirective } from '@eui/ecl/components/ecl-link';\nimport { EclMegaMenuDataService } from '../services/ecl-mega-menu-data.service';\nimport { isPlatformBrowser, DOCUMENT } from '@angular/common';\nimport { Subject, fromEvent, auditTime, takeUntil } from 'rxjs';\n\n/**\n * Component for displaying some custom information for the current menu item.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[eclMegaMenuInfo]',\n    templateUrl: './ecl-mega-menu-info.component.html',\n    host: {\n        '[style.opacity]': 'eclMegaMenuInfoStyleOpacity()',\n    },\n})\n\nexport class EclMegaMenuInfoComponent extends ECLBaseDirective implements AfterViewInit, OnDestroy {\n    el = inject(ElementRef);\n\n    /**\n     * Applies custom styles for info component.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-mega-menu__info'),\n            this.linkItem() ? 'ecl-mega-menu__info--has-link' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n    /**\n     * Sets the height of the component.\n     */\n    @HostBinding('style.height.px') eclMegaMenuInfoStyleHeight: number | null = null;\n    /**\n     * Sets the opacity of the component.\n     */\n    eclMegaMenuInfoStyleOpacity = signal<number | null>(null);\n\n    readonly title = input<string>(undefined);    \n    readonly titleId = input<string>(undefined);\n\n    private platformId = inject(PLATFORM_ID);\n    private readonly doc = inject(DOCUMENT);\n    private readonly window = this.doc.defaultView;\n    private destroy$ = new Subject<void>();\n\n    /**\n     * When the info panel contains link.\n     */\n    readonly linkItem = contentChild(forwardRef(() => EclLinkDirective));\n    private eclMegaMenuDataService = inject(EclMegaMenuDataService);\n\n    ngAfterViewInit(): void {\n        if (isPlatformBrowser(this.platformId)) {\n            // Sets class of the sub link, if any.\n            if (this.linkItem()) {\n                setTimeout(() => this.linkItem().class = 'ecl-mega-menu__info-link');\n            }\n            // Emits the bottom value of the element. Needed to calculate the size of the sublist. (for the same parent menu item)\n            this.publishSize();\n            this.observeResize();\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n\n    /**\n     * Used to calculate the height of the parent element.\n     * @returns the height of the component.\n     */\n    getInfoPanelScrollHeight() : number {\n        return this.el.nativeElement.scrollHeight;\n    }\n\n    /**\n     * Used to calulate the size of the info panel.\n     */\n    private publishSize(): void {\n        const bottomY = this.el.nativeElement.getBoundingClientRect().bottom;\n        this.eclMegaMenuDataService.updateEclMegaMenuInfoSize(bottomY);\n    }\n\n    /**\n     * Re-publishes the info panel size on window resize so that dependent\n     * components (e.g. sublist positioning) recalculate with current dimensions.\n     */\n    private observeResize(): void {\n        if (this.window) {\n            fromEvent(this.window, 'resize').pipe(\n                auditTime(100),\n                takeUntil(this.destroy$),\n            ).subscribe(() => {\n                this.publishSize();\n            });\n        }\n    }\n}\n",
+            "sourceCode": "import { AfterViewInit, Component, ElementRef, OnDestroy, PLATFORM_ID, forwardRef, inject, signal, input, contentChild } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclLinkDirective } from '@eui/ecl/components/ecl-link';\nimport { EclMegaMenuDataService } from '../services/ecl-mega-menu-data.service';\nimport { isPlatformBrowser, DOCUMENT } from '@angular/common';\nimport { Subject, fromEvent, auditTime, takeUntil } from 'rxjs';\n\n/**\n * Component for displaying some custom information for the current menu item.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[eclMegaMenuInfo]',\n    templateUrl: './ecl-mega-menu-info.component.html',\n    host: {\n        '[class]': 'cssClasses',\n        '[style.height.px]': 'eclMegaMenuInfoStyleHeight',\n        '[style.opacity]': 'eclMegaMenuInfoStyleOpacity()',\n    },\n})\n\nexport class EclMegaMenuInfoComponent extends ECLBaseDirective implements AfterViewInit, OnDestroy {\n    el = inject(ElementRef);\n\n    /**\n     * Applies custom styles for info component.\n     */\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-mega-menu__info'),\n            this.linkItem() ? 'ecl-mega-menu__info--has-link' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n    /**\n     * Sets the height of the component.\n     */\n    eclMegaMenuInfoStyleHeight: number | null = null;\n    /**\n     * Sets the opacity of the component.\n     */\n    eclMegaMenuInfoStyleOpacity = signal<number | null>(null);\n\n    readonly title = input<string>(undefined);    \n    readonly titleId = input<string>(undefined);\n\n    private platformId = inject(PLATFORM_ID);\n    private readonly doc = inject(DOCUMENT);\n    private readonly window = this.doc.defaultView;\n    private destroy$ = new Subject<void>();\n\n    /**\n     * When the info panel contains link.\n     */\n    readonly linkItem = contentChild(forwardRef(() => EclLinkDirective));\n    private eclMegaMenuDataService = inject(EclMegaMenuDataService);\n\n    ngAfterViewInit(): void {\n        if (isPlatformBrowser(this.platformId)) {\n            // Sets class of the sub link, if any.\n            if (this.linkItem()) {\n                setTimeout(() => this.linkItem().class = 'ecl-mega-menu__info-link');\n            }\n            // Emits the bottom value of the element. Needed to calculate the size of the sublist. (for the same parent menu item)\n            this.publishSize();\n            this.observeResize();\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n\n    /**\n     * Used to calculate the height of the parent element.\n     * @returns the height of the component.\n     */\n    getInfoPanelScrollHeight() : number {\n        return this.el.nativeElement.scrollHeight;\n    }\n\n    /**\n     * Used to calulate the size of the info panel.\n     */\n    private publishSize(): void {\n        const bottomY = this.el.nativeElement.getBoundingClientRect().bottom;\n        this.eclMegaMenuDataService.updateEclMegaMenuInfoSize(bottomY);\n    }\n\n    /**\n     * Re-publishes the info panel size on window resize so that dependent\n     * components (e.g. sublist positioning) recalculate with current dimensions.\n     */\n    private observeResize(): void {\n        if (this.window) {\n            fromEvent(this.window, 'resize').pipe(\n                auditTime(100),\n                takeUntil(this.destroy$),\n            ).subscribe(() => {\n                this.publishSize();\n            });\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 481,
-                    "end": 567,
+                    "pos": 468,
+                    "end": 554,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -61833,7 +61323,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 27,
+                        "line": 28,
                         "rawdescription": "\n\nApplies custom styles for info component.\n",
                         "description": "<p>Applies custom styles for info component.</p>\n"
                     }
@@ -61860,10 +61350,11 @@
         },
         {
             "name": "EclMegaMenuItemComponent",
-            "id": "component-EclMegaMenuItemComponent-28149eb09235eba181b303bb0bcf470178d3263c130b525c6984ad6d91ca7537bb320ddcefa1b9b9318799ae46fed57c53edb70a9394d86344539c367da524a4",
+            "id": "component-EclMegaMenuItemComponent-05018beb3c87a63b8fc2e806c581b7f8ac8ce09503da22c6234ceee275a5f6b5f60d064448f4b07fa67640b848de4e90019f1b0b5e2780b0de71dc41e3375a72",
             "file": "packages/ecl/components/ecl-mega-menu/ecl-mega-menu-item/ecl-mega-menu-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -61885,7 +61376,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 74,
+                    "line": 84,
                     "type": "string",
                     "decorators": []
                 },
@@ -61899,7 +61390,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>This property should be used, when user wants the menu sub-items to use the maximum space available.\nFor example, if we have 10 sub-items, normally they will appear in one column only. If isOneLevelOnly is used, the sub-items\nwill take 2, 3, 4 columns, depending on presence of other sub-components.</p>\n",
-                    "line": 81,
+                    "line": 91,
                     "rawdescription": "\n\nThis property should be used, when user wants the menu sub-items to use the maximum space available.\nFor example, if we have 10 sub-items, normally they will appear in one column only. If isOneLevelOnly is used, the sub-items\nwill take 2, 3, 4 columns, depending on presence of other sub-components.\n",
                     "required": false
                 },
@@ -61913,7 +61404,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 68,
+                    "line": 78,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -61930,7 +61421,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 69,
+                    "line": 79,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -61947,7 +61438,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Used in case user wants to set some custom attributes for the anchr tag.</p>\n",
-                    "line": 85,
+                    "line": 95,
                     "rawdescription": "\n\nUsed in case user wants to set some custom attributes for the anchr tag.\n",
                     "modifierKind": [
                         148
@@ -61964,7 +61455,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 72,
+                    "line": 82,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -61981,7 +61472,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 73,
+                    "line": 83,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -61998,7 +61489,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 71,
+                    "line": 81,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -62015,7 +61506,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 75,
+                    "line": 85,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -62073,7 +61564,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 87,
+                    "line": 97,
                     "type": "EventEmitter"
                 },
                 {
@@ -62082,7 +61573,7 @@
                     "defaultValue": "new EventEmitter<KeyboardEvent>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 88,
+                    "line": 98,
                     "type": "EventEmitter"
                 }
             ],
@@ -62097,7 +61588,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 124,
+                    "line": 134,
                     "rawdescription": "\n"
                 },
                 {
@@ -62110,7 +61601,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Component, that consist of some custom info, text or whatever. When the menu item has no children, but still some\n sub container is displayed.</p>\n",
-                    "line": 122,
+                    "line": 132,
                     "rawdescription": "\n\nComponent, that consist of some custom info, text or whatever. When the menu item has no children, but still some\n sub container is displayed.\n",
                     "modifierKind": [
                         148
@@ -62126,7 +61617,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 117,
+                    "line": 127,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -62142,7 +61633,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Element, that would contain some info about the current item or it&#39;s children. First in the container.</p>\n",
-                    "line": 108,
+                    "line": 118,
                     "rawdescription": "\n\nElement, that would contain some info about the current item or it's children. First in the container.\n",
                     "modifierKind": [
                         148
@@ -62158,7 +61649,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The wrapper around the subitems, if any.</p>\n",
-                    "line": 92,
+                    "line": 102,
                     "rawdescription": "\n\nThe wrapper around the subitems, if any.\n",
                     "modifierKind": [
                         148
@@ -62174,7 +61665,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Element, that holds the sub items of the current menu items.</p>\n",
-                    "line": 112,
+                    "line": 122,
                     "rawdescription": "\n\nElement, that holds the sub items of the current menu items.\n",
                     "modifierKind": [
                         148
@@ -62190,7 +61681,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 115,
+                    "line": 125,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -62206,31 +61697,9 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 44,
+                    "line": 47,
                     "rawdescription": "\n"
                 },
-                {
-                    "name": "hasPopup",
-                    "coverageIgnore": false,
-                    "defaultValue": "this.hasChildren ? true : null",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 66,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.aria-haspopup'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                },
                 {
                     "name": "isCurrent",
                     "coverageIgnore": false,
@@ -62241,7 +61710,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 125,
+                    "line": 135,
                     "rawdescription": "\n"
                 },
                 {
@@ -62254,7 +61723,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 65,
+                    "line": 67,
                     "rawdescription": "\n"
                 },
                 {
@@ -62267,7 +61736,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 126,
+                    "line": 136,
                     "rawdescription": "\n"
                 },
                 {
@@ -62280,7 +61749,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>This elemend hold some extra content, different from subitems. For example just some text or some custom links, etc.</p>\n",
-                    "line": 96,
+                    "line": 106,
                     "rawdescription": "\n\nThis elemend hold some extra content, different from subitems. For example just some text or some custom links, etc.\n",
                     "modifierKind": [
                         148
@@ -62296,7 +61765,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 127,
+                    "line": 137,
                     "rawdescription": "\n"
                 },
                 {
@@ -62309,7 +61778,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 128,
+                    "line": 138,
                     "rawdescription": "\n"
                 },
                 {
@@ -62322,7 +61791,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Element, tat is rendered if the menu item has children.</p>\n",
-                    "line": 104,
+                    "line": 114,
                     "rawdescription": "\n\nElement, tat is rendered if the menu item has children.\n",
                     "modifierKind": [
                         148
@@ -62338,7 +61807,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Actual link of the menu item. If the menu has no children, but redirects/loads another page.</p>\n",
-                    "line": 100,
+                    "line": 110,
                     "rawdescription": "\n\nActual link of the menu item. If the menu has no children, but redirects/loads another page.\n",
                     "modifierKind": [
                         148
@@ -62354,7 +61823,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 45,
+                    "line": 48,
                     "rawdescription": "\n"
                 },
                 {
@@ -62367,7 +61836,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 129,
+                    "line": 139,
                     "rawdescription": "\n"
                 },
                 {
@@ -62380,7 +61849,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 130,
+                    "line": 140,
                     "rawdescription": "\n"
                 }
             ],
@@ -62392,7 +61861,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 157,
+                    "line": 167,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -62405,7 +61874,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 176,
+                    "line": 186,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -62418,7 +61887,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 204,
+                    "line": 214,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet the focus on the sub element - link or button.\n",
@@ -62440,7 +61909,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 255,
+                    "line": 265,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -62466,7 +61935,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 217,
+                    "line": 227,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nManage styling and functionality for children and siblings, when item is clicked.\n",
@@ -62479,7 +61948,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 245,
+                    "line": 255,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nManage styling and functionality when item is collapsed.\n",
@@ -62527,33 +61996,7 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.aria-haspopup",
-                    "actualName": "hasPopup",
-                    "defaultValue": "this.hasChildren ? true : null",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 66,
-                    "type": "boolean | null",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nReturns current menu item classes, depending on item's state (it's properties' values).\n",
-                    "description": "<p>Returns current menu item classes, depending on item&#39;s state (it&#39;s properties&#39; values).</p>\n",
-                    "line": 51,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [
@@ -62576,14 +62019,14 @@
             "description": "<p>This component represents a mega menu item. Adds functionality and styling, according to ECL standards.</p>\n",
             "rawdescription": "\n\nThis component represents a mega menu item. Adds functionality and styling, according to ECL standards.\n",
             "type": "component",
-            "sourceCode": "import {\n    AfterContentInit,\n    afterNextRender, booleanAttribute,\n    Component,\n    ElementRef, EventEmitter,\n    forwardRef,\n    HostBinding,\n    inject,\n    Input, OnDestroy, Output,\n    DOCUMENT,\n    Renderer2,\n    input,\n    signal,\n    viewChild,\n    contentChild,\n    contentChildren,\n} from '@angular/core';\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 { EclLinkDirective, EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { ECLBaseDirective, KeyCode } from '@eui/ecl/core';\nimport { EclHeaderMenuComunicationService } from '@eui/ecl/shared';\nimport { distinctUntilChanged, map, Subject, auditTime, fromEvent, takeUntil } from 'rxjs';\nimport { EclMegaMenuContainerDirective } from '../directives/ecl-mega-menu-container.directive';\nimport { EclMegaMenuSublistDirective } from '../directives/ecl-mega-menu-list.directive';\nimport { EclMegaMenuFeaturedComponent } from '../ecl-mega-menu-featured/ecl-mega-menu-featured.component';\nimport { EclMegaMenuInfoComponent } from '../ecl-mega-menu-info/ecl-mega-menu-info.component';\nimport { EclMegaMenuDataService } from '../services/ecl-mega-menu-data.service';\nimport { EclMegaMenuService } from '../services/ecl-mega-menu.service';\n\n/**\n * This component represents a mega menu item. Adds functionality and styling, according to ECL standards.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'li[eclMegaMenuItem]',\n    templateUrl: './ecl-mega-menu-item.component.html',\n    imports: [RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK],\n})\n\nexport class EclMegaMenuItemComponent extends ECLBaseDirective implements AfterContentInit, OnDestroy {\n    el = inject(ElementRef);\n    renderer = inject(Renderer2);\n\n    /**\n     * Returns current menu item classes, depending on item's state (it's properties' values).\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-mega-menu__item'),\n            this.eclMegaMenuSublist() ? 'ecl-mega-menu__item--has-children' : '',\n            this.eclMegaMenuContainer() ? 'ecl-mega-menu__item--has-container' : '',\n            this.isCurrent ? 'ecl-mega-menu__item--current' : '',\n            this.isExpanded ? 'ecl-mega-menu__item--expanded' : '',\n            this.isPromotional() ? 'ecl-mega-menu__item--promotional' : '',\n            this.isOneLevelOnly() ? 'ecl-mega-menu__item--one-level-only' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    isExpanded = false;\n    @HostBinding('attr.aria-haspopup') hasPopup = this.hasChildren ? true : null;\n\n    readonly isPromotional = input(false, { transform: booleanAttribute });\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    @Input() href = '';\n    readonly target = input('');\n    /**\n     * This property should be used, when user wants the menu sub-items to use the maximum space available.\n     * For example, if we have 10 sub-items, normally they will appear in one column only. If isOneLevelOnly is used, the sub-items\n     * will take 2, 3, 4 columns, depending on presence of other sub-components.\n     */\n    isOneLevelOnly = input(false, { transform: booleanAttribute });\n    /**\n     * Used in case user wants to set some custom attributes for the anchr tag.\n     */\n    readonly linkExtraAttributes = input<Record<string, string>>(undefined);\n\n    @Output() megaMenuItemClicked = new EventEmitter();\n    @Output() megaMenuItemKeydown = new EventEmitter<KeyboardEvent>();\n    /**\n     * The wrapper around the subitems, if any.\n     */\n    readonly eclMegaMenuMega = viewChild<ElementRef>('eclMegaMenuMega');\n    /**\n     * This elemend hold some extra content, different from subitems. For example just some text or some custom links, etc.\n     */\n    readonly mainPanel = viewChild<ElementRef>('mainPanel');\n    /**\n     * Actual link of the menu item. If the menu has no children, but redirects/loads another page.\n     */\n    readonly menuLink = viewChild(EclLinkDirective);\n    /**\n     * Element, tat is rendered if the menu item has children.\n     */\n    readonly menuBtn = viewChild<EclButtonComponent>('menuBtn');\n    /**\n     * Element, that would contain some info about the current item or it's children. First in the container.\n     */\n    readonly eclMegaMenuInfo = contentChild(forwardRef(() => EclMegaMenuInfoComponent));\n    /**\n     * Element, that holds the sub items of the current menu items.\n     */\n    readonly eclMegaMenuSublist = contentChild(forwardRef(() => EclMegaMenuSublistDirective));\n\n    // Get all the sublists including childrens's sublist, to detect if it's only one level submenu.\n    readonly eclMegaMenuSublists = contentChildren(forwardRef(() => EclMegaMenuSublistDirective), { descendants: true });\n\n    readonly eclMegaMenuFeatured = contentChild(forwardRef(() => EclMegaMenuFeaturedComponent), { descendants: false });\n    /**\n     * Component, that consist of some custom info, text or whatever. When the menu item has no children, but still some\n     *  sub container is displayed.\n     */\n    readonly eclMegaMenuContainer = contentChild(forwardRef(() => EclMegaMenuContainerDirective));\n\n    containerStyleHeight: number | null = null;\n    isCurrent = false;\n    isMobileBreakpoint = false;\n    megaMenuMegaStyleHeight = signal<number | null>(null);\n    megaMenuMegaStyleOpacity = signal<number | null>(null);\n    wrapperStyleHeight: number | null = null;\n    wrapperStyleTop: number | null = null;\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private isLarge = false;\n    private eclMegaMenuDataService = inject(EclMegaMenuDataService);\n    private eclHeaderMenuComunicationService = inject(EclHeaderMenuComunicationService);\n    private eclMegaMenuService = inject(EclMegaMenuService);\n    private readonly doc = inject(DOCUMENT);\n    private readonly window = this.doc.defaultView; // Window | null\n    private appShellService = inject(EuiAppShellService);\n\n    constructor() {\n        super();\n\n        afterNextRender(() => {\n            this.eclMegaMenuDataService.eclMegaMenuInfoBottomYSubject$.pipe(takeUntil(this.destroy$)).subscribe(value => {\n                this.calculateSublistStyle(value);\n            });\n            const menuLink = this.menuLink();\n            if (menuLink) {\n                this.eclMegaMenuService.setExtraAttributesForLink(menuLink.el.nativeElement, this.linkExtraAttributes());\n            }\n            this.observeBreakpointChanges();\n            this.observeResizeWindow();\n        });\n    }\n\n    ngAfterContentInit(): void {\n        this.eclMegaMenuSublist()?.megaMenuSubItemClicked.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            if (!this.isExpanded) {\n                return;\n            }\n            if (!this.isMobileBreakpoint) {\n                // Only hide/show the level-2 panel when switching sub-items\n                const expandedSubItem = this.eclMegaMenuSublist().submenuItems().find(\n                    item => item.hasChildren && item.isExpanded\n                );\n                const megaMenuLevel2 = expandedSubItem.megaMenuLevel2();\n                if (expandedSubItem && megaMenuLevel2) {\n                    megaMenuLevel2.nativeElement.style.opacity = '0';\n                }\n            }\n            setTimeout(() => this.checkDropdownHeight(false), 100);\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    get hasNoInfo(): boolean {\n        return !this.eclMegaMenuInfo();\n    }\n\n    get hasChildren(): boolean {\n        return !!this.eclMegaMenuSublist() || !!this.eclMegaMenuContainer();\n    }\n\n    get hasSublist(): boolean {\n        return !!this.eclMegaMenuSublist();\n    }\n\n    get hasFeatured(): boolean {\n        return !!this.eclMegaMenuFeatured();\n    }\n\n    get hasContainer(): boolean {\n        return !!this.eclMegaMenuContainer();\n    }\n\n    /**\n     * Set the focus on the sub element - link or button.\n     */\n    onFocus(): void {\n        const menuLink = this.menuLink();\n        const menuBtn = this.menuBtn();\n        if (menuLink) {\n            menuLink.onFocus();\n        } else if (menuBtn) {\n            menuBtn.onFocus();\n        }\n    }\n\n    /**\n     * Manage styling and functionality for children and siblings, when item is clicked.\n     */\n    onMegaMenuItemClick(): void {\n        if (this.hasChildren) {\n            this.isCurrent = !this.isCurrent;\n            this.isExpanded = !this.isExpanded;\n            const eclMegaMenuSublist = this.eclMegaMenuSublist();\n            if (eclMegaMenuSublist) {\n                eclMegaMenuSublist.onParentMegaMenuItemClick(this.isExpanded);\n            }\n            if (this.isExpanded) {\n                this.eclHeaderMenuComunicationService.updateExpanded(this.isExpanded);\n                this.hidePanels();\n                setTimeout(() => {\n                    this.checkDropdownHeight();\n                    this.calculateWrapperStyle();\n                }, 100);\n            } else {\n                this.eclHeaderMenuComunicationService.updateExpanded(this.isExpanded);\n                this.resetComputedHeights();\n            }\n        } else {\n            this.eclHeaderMenuComunicationService.updateExpanded(this.isExpanded);\n        }\n        this.megaMenuItemClicked.emit();\n    }\n\n    /**\n     * Manage styling and functionality when item is collapsed.\n     */\n    onMegaMenuItemCollapse(): void {\n        this.isCurrent = false;\n        this.isExpanded = false;\n        const eclMegaMenuSublist = this.eclMegaMenuSublist();\n        if (eclMegaMenuSublist) {\n            eclMegaMenuSublist.onParentMegaMenuItemClick(this.isExpanded);\n        }\n        this.resetComputedHeights();\n    }\n\n    onKeydown(evt: Event): void {\n        if (evt instanceof KeyboardEvent) {\n            if ((evt as KeyboardEvent).key === KeyCode.TAB && !(evt as KeyboardEvent).shiftKey) {\n                // if menu is open, navigate to children\n            } else {\n                this.megaMenuItemKeydown.emit(evt as KeyboardEvent);\n            }\n        }\n    }\n\n    /**\n     * On resize - calculate the size of the dropdown and wrapper (if item is expanded).\n     */\n    private observeResizeWindow(): void {\n        if (this.window) {\n            fromEvent(this.window, 'resize').pipe(\n                auditTime(50),\n                takeUntil(this.destroy$)).subscribe(() => {\n                setTimeout(() => {\n                    if (this.isExpanded) {\n                        this.checkDropdownHeight();\n                        this.calculateWrapperStyle();\n                    } else {\n                        // Even when not expanded, reset computed heights on resize\n                        // so stale desktop values don't persist into tablet/mobile layout\n                        this.resetComputedHeights();\n                    }\n                });\n            });\n        }\n    }\n\n    private calculateSublistStyle(bottomInfo: number): void {\n        const eclMegaMenuSublist = this.eclMegaMenuSublist();\n        if (this.isMobileBreakpoint && eclMegaMenuSublist) {\n            const availableHeight = this.window.innerHeight - bottomInfo - 16;\n            eclMegaMenuSublist.styleTop = availableHeight;\n        }\n    }\n\n    private calculateWrapperStyle(): void {\n        if (!this.isMobileBreakpoint) {\n            const height = this.el.nativeElement.getBoundingClientRect().height;\n            this.wrapperStyleTop = height;\n        }\n    }\n\n    private resetWrapperStyle(): void {\n        if (this.isMobileBreakpoint) {\n            this.wrapperStyleHeight = null;\n            this.wrapperStyleTop = null;\n        }\n    }\n\n    /**\n     * Resets all computed pixel heights on the info panel, mega panel, and wrapper.\n     * Called when the viewport changes breakpoint so that stale desktop values\n     * (e.g. info height of 227px) don't persist into tablet/mobile layout where\n     * the elements should flow naturally.\n     */\n    private resetComputedHeights(): void {\n        const eclMegaMenuInfo = this.eclMegaMenuInfo();\n        if (eclMegaMenuInfo) {\n            eclMegaMenuInfo.eclMegaMenuInfoStyleHeight = null;\n            eclMegaMenuInfo.eclMegaMenuInfoStyleOpacity.set(null);\n        }\n        this.megaMenuMegaStyleHeight.set(null);\n        this.megaMenuMegaStyleOpacity.set(null);\n        this.wrapperStyleHeight = null;\n        this.wrapperStyleTop = null;\n        this.containerStyleHeight = null;\n\n        // Reset featured panel height\n        const eclMegaMenuFeatured = this.eclMegaMenuFeatured();\n        if (eclMegaMenuFeatured) {\n            eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = null;\n        }\n\n        // Reset sublist and sub-items heights\n        const eclMegaMenuSublist = this.eclMegaMenuSublist();\n        if (eclMegaMenuSublist) {\n            eclMegaMenuSublist.styleHeight.set(null);\n            eclMegaMenuSublist.styleTop = null;\n            eclMegaMenuSublist.isScrollable = false;\n\n            // Reset level-2 heights on each subitem\n            eclMegaMenuSublist.submenuItems()?.forEach(subItem => {\n                subItem.level2StyleHeight = null;\n                const eclMegaMenuFeatured = subItem.eclMegaMenuFeatured();\n                if (eclMegaMenuFeatured) {\n                    eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = null;\n                }\n            });\n        }\n    }\n\n    private hidePanels(): void {\n        if (this.isMobileBreakpoint) {\n            return;\n        }\n        if (this.eclMegaMenuMega()) {\n            this.megaMenuMegaStyleOpacity.set(0);\n        }\n        const eclMegaMenuInfo = this.eclMegaMenuInfo();\n        if (eclMegaMenuInfo) {\n            eclMegaMenuInfo.eclMegaMenuInfoStyleOpacity.set(0);\n        }\n    }\n\n    /**\n     * On mobile, calculate the height of the mega panel (level 1).\n     * - If the item has a featured panel: set height on the mega div (.ecl-mega-menu__mega--has-featured)\n     * - If no featured, panel 1: height is set on the sublist\n     * - If no featured, panel 2: height is set on the level-2 div\n     */\n    private calculateMobileHeight(): void {\n        const eclMegaMenuMega = this.eclMegaMenuMega();\n        if (!this.isMobileBreakpoint || !eclMegaMenuMega) {\n            return;\n        }\n        const eclMegaMenuSublistValue = this.eclMegaMenuSublist();\n        if (this.hasFeatured) {\n            // Has featured → set height on the mega div, no scrollable on sublist\n            const megaRect = eclMegaMenuMega.nativeElement.getBoundingClientRect();\n            const megaTop = megaRect.top;\n            this.megaMenuMegaStyleHeight.set(this.window.innerHeight - megaTop);\n            const eclMegaMenuSublist = this.eclMegaMenuSublist();\n            if (eclMegaMenuSublist) {\n                eclMegaMenuSublist.isScrollable = false;\n                eclMegaMenuSublist.styleHeight.set(null);\n            }\n        } else if (eclMegaMenuSublistValue) {\n            this.megaMenuMegaStyleHeight.set(null);\n\n            // Check if a sub-item with children is expanded (panel 2)\n            const expandedSubItem = eclMegaMenuSublistValue.submenuItems().find(\n                item => item.hasChildren && item.isExpanded\n            );\n\n            const megaMenuLevel2 = expandedSubItem.megaMenuLevel2();\n            if (expandedSubItem && megaMenuLevel2) {\n                // No featured, panel 2 → set height on the level-2 div\n                const subMegaRect = megaMenuLevel2.nativeElement.getBoundingClientRect();\n                const subMegaTop = subMegaRect.top;\n                expandedSubItem.level2StyleHeight = this.window.innerHeight - subMegaTop;\n                // Clear sublist height and scrollable since panel 2 is now showing\n                eclMegaMenuSublistValue.isScrollable = false;\n                eclMegaMenuSublistValue.styleHeight.set(null);\n            } else {\n                // No featured, panel 1 → set height on the sublist\n                const sublistRect = eclMegaMenuSublistValue.el.nativeElement.getBoundingClientRect();\n                const sublistTop = sublistRect.top;\n                eclMegaMenuSublistValue.styleHeight.set(this.window.innerHeight - sublistTop);\n                eclMegaMenuSublistValue.isScrollable = true;\n            }\n        } else {\n            this.megaMenuMegaStyleHeight.set(null);\n        }\n    }\n\n    private checkDropdownHeight(hide = true): void {\n        if (this.isMobileBreakpoint) {\n            this.calculateMobileHeight();\n            return;\n        }\n\n        if (hide) {\n            this.hidePanels();\n        }\n        let infoPanelHeight = 0;\n        const eclMegaMenuInfo = this.eclMegaMenuInfo();\n        if (eclMegaMenuInfo) {\n            eclMegaMenuInfo.eclMegaMenuInfoStyleHeight = null;\n        }\n\n        const heights = [];\n        let height = 0;\n        let itemsHeight = 0;\n        let subItemsHeight = 0;\n        let featuredHeight = 0;\n        let featuredHeight2 = 0;\n\n        if (this.hasContainer) {\n            const viewportHeight = this.window.innerHeight;\n            const mainTop = this.mainPanel().nativeElement.getBoundingClientRect().top;\n            this.containerStyleHeight = viewportHeight - mainTop;\n        } else {\n            if (eclMegaMenuInfo) {\n                infoPanelHeight = eclMegaMenuInfo.getInfoPanelScrollHeight() + 16;\n                if (this.isLarge) {\n                    heights.push(infoPanelHeight);\n                } else {\n                    subItemsHeight = infoPanelHeight;\n                    featuredHeight = infoPanelHeight;\n                }\n                eclMegaMenuInfo.eclMegaMenuInfoStyleOpacity.set(1);\n            }\n\n            const eclMegaMenuMega = this.eclMegaMenuMega();\n            if (eclMegaMenuMega) {\n                const eclMegaMenuSublist = this.eclMegaMenuSublist();\n                if (eclMegaMenuSublist && eclMegaMenuSublist.submenuItems().length > 0) {\n                    if (this.isOneLevelOnly()) {\n                        itemsHeight = eclMegaMenuSublist.el.nativeElement.offsetHeight;\n                    } else {\n                        eclMegaMenuSublist.submenuItems().forEach((item) => {\n                            itemsHeight += item.getMegaMenuSubItemHeight();\n                        });\n                        if (eclMegaMenuSublist.spacer()) {\n                            itemsHeight += 25;\n                        }\n                    }\n                    heights.push(itemsHeight);\n                }\n                const expandedSubItem = eclMegaMenuSublist.submenuItems().find(item => item.hasChildren && item.isExpanded);\n                const eclMegaMenuFeatured = expandedSubItem.eclMegaMenuFeatured();\n                if (expandedSubItem !== undefined) {\n                    expandedSubItem.submenu().submenuItems().forEach(item => {\n                        subItemsHeight += item.getMegaMenuSubItemHeight();\n                    });\n                    heights.push(subItemsHeight);\n                    if (eclMegaMenuFeatured) {\n                        featuredHeight += eclMegaMenuFeatured.getEclMegaMenuFeaturedHeight();\n                        featuredHeight += 5;\n                        heights.push(featuredHeight);\n                    }\n                }\n\n                const eclMegaMenuFeaturedValue = this.eclMegaMenuFeatured();\n                if (eclMegaMenuFeaturedValue) {\n                    featuredHeight2 = eclMegaMenuFeaturedValue.getEclMegaMenuFeaturedHeight();\n                    heights.push(featuredHeight2);\n                }\n                const maxHeight = Math.max(...heights);\n                const containerBounding = this.el.nativeElement.getBoundingClientRect();\n                const containerBottom = containerBounding.bottom;\n                // By requirements, limit the height to the 70% of the available space.\n                const availableHeight = (this.window.innerHeight - containerBottom) * 0.9;\n                if (maxHeight > availableHeight) {\n                    height = availableHeight;\n                } else {\n                    height = maxHeight;\n                }\n\n                this.wrapperStyleHeight = eclMegaMenuMega && eclMegaMenuInfo && !this.isLarge ?\n                    height + infoPanelHeight :  height;\n                if (this.wrapperStyleHeight > availableHeight) this.wrapperStyleHeight = availableHeight;\n                if (eclMegaMenuMega && this.isLarge) {\n                    this.megaMenuMegaStyleHeight.set(height);\n                } else if (eclMegaMenuMega && eclMegaMenuInfo) {\n                    this.megaMenuMegaStyleHeight.set(this.wrapperStyleHeight - infoPanelHeight);\n                }\n                if (eclMegaMenuInfo && this.isLarge) {\n                    eclMegaMenuInfo.eclMegaMenuInfoStyleHeight = height;\n                }\n\n                if (expandedSubItem !== undefined) {\n                    if (this.isLarge) {\n                        expandedSubItem.level2StyleHeight = height;\n                    } else {\n                        expandedSubItem.level2StyleHeight = height - infoPanelHeight;\n                    }\n\n                    const megaMenuLevel2 = expandedSubItem.megaMenuLevel2();\n                    if (megaMenuLevel2) {\n                        megaMenuLevel2.nativeElement.style.opacity = '1';\n                    }\n\n                    if (eclMegaMenuFeatured) {\n                        if (this.isLarge) {\n                            eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = height;\n                        } else {\n                            eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = height - infoPanelHeight;\n                        }\n                    }\n                }\n                if (eclMegaMenuFeaturedValue) {\n                    if (this.isLarge) {\n                        eclMegaMenuFeaturedValue.eclMegaMenuFeaturedStyleHeight = height;\n                    } else {\n                        eclMegaMenuFeaturedValue.eclMegaMenuFeaturedStyleHeight = this.wrapperStyleHeight - infoPanelHeight;\n                    }\n                }\n                this.megaMenuMegaStyleOpacity.set(1);\n            }\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.appShellService.state$\n            .pipe(\n                map((state) => {\n                    const w = state.windowWidth ?? 0;\n                    const bp = state.breakpoints;\n                    return {\n                        // ECL uses breakpointDesktop = 1140px. Everything below that\n                        // (xs/sm/md/lg) must use mobile behavior. isLtLargeTablet covers this range.\n                        isMobile: !!(bp?.isLtLargeTablet),\n                        isLarge: w >= 1368,\n                    };\n                }),\n                distinctUntilChanged(\n                    (a, b) => a.isMobile === b.isMobile && a.isLarge === b.isLarge\n                ),\n                takeUntil(this.destroy$),\n            )\n            .subscribe(({ isMobile, isLarge }) => {\n                const wasMobile = this.isMobileBreakpoint;\n                const wasLarge = this.isLarge;\n                this.isMobileBreakpoint = isMobile;\n                this.isLarge = isLarge;\n                this.resetWrapperStyle();\n\n                // When breakpoint changes, reset all computed heights so they don't\n                // carry over stale pixel values from the previous layout mode.\n                if (wasMobile !== isMobile || wasLarge !== isLarge) {\n                    this.resetComputedHeights();\n\n                    // If transitioning between mobile/desktop while expanded,\n                    // recalculate with new layout dimensions\n                    if (this.isExpanded) {\n                        setTimeout(() => {\n                            this.checkDropdownHeight();\n                            this.calculateWrapperStyle();\n                        }, 100);\n                    }\n                }\n            });\n    }\n}\n",
+            "sourceCode": "import {\n    AfterContentInit,\n    afterNextRender, booleanAttribute,\n    Component,\n    ElementRef, EventEmitter,\n    forwardRef,\n    inject,\n    Input, OnDestroy, Output,\n    DOCUMENT,\n    Renderer2,\n    input,\n    signal,\n    viewChild,\n    contentChild,\n    contentChildren,\n} from '@angular/core';\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 { EclLinkDirective, EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { ECLBaseDirective, KeyCode } from '@eui/ecl/core';\nimport { EclHeaderMenuComunicationService } from '@eui/ecl/shared';\nimport { distinctUntilChanged, map, Subject, auditTime, fromEvent, takeUntil } from 'rxjs';\nimport { EclMegaMenuContainerDirective } from '../directives/ecl-mega-menu-container.directive';\nimport { EclMegaMenuSublistDirective } from '../directives/ecl-mega-menu-list.directive';\nimport { EclMegaMenuFeaturedComponent } from '../ecl-mega-menu-featured/ecl-mega-menu-featured.component';\nimport { EclMegaMenuInfoComponent } from '../ecl-mega-menu-info/ecl-mega-menu-info.component';\nimport { EclMegaMenuDataService } from '../services/ecl-mega-menu-data.service';\nimport { EclMegaMenuService } from '../services/ecl-mega-menu.service';\n\n/**\n * This component represents a mega menu item. Adds functionality and styling, according to ECL standards.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'li[eclMegaMenuItem]',\n    templateUrl: './ecl-mega-menu-item.component.html',\n    imports: [RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK],\n    host: {\n        '[class]': 'cssClasses',\n        '[attr.aria-haspopup]': 'hasPopup',\n    },\n})\n\nexport class EclMegaMenuItemComponent extends ECLBaseDirective implements AfterContentInit, OnDestroy {\n    el = inject(ElementRef);\n    renderer = inject(Renderer2);\n\n    /**\n     * Returns current menu item classes, depending on item's state (it's properties' values).\n     */\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-mega-menu__item'),\n            this.eclMegaMenuSublist() ? 'ecl-mega-menu__item--has-children' : '',\n            this.eclMegaMenuContainer() ? 'ecl-mega-menu__item--has-container' : '',\n            this.isCurrent ? 'ecl-mega-menu__item--current' : '',\n            this.isExpanded ? 'ecl-mega-menu__item--expanded' : '',\n            this.isPromotional() ? 'ecl-mega-menu__item--promotional' : '',\n            this.isOneLevelOnly() ? 'ecl-mega-menu__item--one-level-only' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    isExpanded = false;\n\n    /**\n     * Reflects whether this item has a submenu/container. Evaluated lazily during\n     * change detection (not at construction) so the content-query signals are\n     * resolved before it is read.\n     */\n    get hasPopup(): true | null {\n        return this.hasChildren ? true : null;\n    }\n\n    readonly isPromotional = input(false, { transform: booleanAttribute });\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    @Input() href = '';\n    readonly target = input('');\n    /**\n     * This property should be used, when user wants the menu sub-items to use the maximum space available.\n     * For example, if we have 10 sub-items, normally they will appear in one column only. If isOneLevelOnly is used, the sub-items\n     * will take 2, 3, 4 columns, depending on presence of other sub-components.\n     */\n    isOneLevelOnly = input(false, { transform: booleanAttribute });\n    /**\n     * Used in case user wants to set some custom attributes for the anchr tag.\n     */\n    readonly linkExtraAttributes = input<Record<string, string>>(undefined);\n\n    @Output() megaMenuItemClicked = new EventEmitter();\n    @Output() megaMenuItemKeydown = new EventEmitter<KeyboardEvent>();\n    /**\n     * The wrapper around the subitems, if any.\n     */\n    readonly eclMegaMenuMega = viewChild<ElementRef>('eclMegaMenuMega');\n    /**\n     * This elemend hold some extra content, different from subitems. For example just some text or some custom links, etc.\n     */\n    readonly mainPanel = viewChild<ElementRef>('mainPanel');\n    /**\n     * Actual link of the menu item. If the menu has no children, but redirects/loads another page.\n     */\n    readonly menuLink = viewChild(EclLinkDirective);\n    /**\n     * Element, tat is rendered if the menu item has children.\n     */\n    readonly menuBtn = viewChild<EclButtonComponent>('menuBtn');\n    /**\n     * Element, that would contain some info about the current item or it's children. First in the container.\n     */\n    readonly eclMegaMenuInfo = contentChild(forwardRef(() => EclMegaMenuInfoComponent));\n    /**\n     * Element, that holds the sub items of the current menu items.\n     */\n    readonly eclMegaMenuSublist = contentChild(forwardRef(() => EclMegaMenuSublistDirective));\n\n    // Get all the sublists including childrens's sublist, to detect if it's only one level submenu.\n    readonly eclMegaMenuSublists = contentChildren(forwardRef(() => EclMegaMenuSublistDirective), { descendants: true });\n\n    readonly eclMegaMenuFeatured = contentChild(forwardRef(() => EclMegaMenuFeaturedComponent), { descendants: false });\n    /**\n     * Component, that consist of some custom info, text or whatever. When the menu item has no children, but still some\n     *  sub container is displayed.\n     */\n    readonly eclMegaMenuContainer = contentChild(forwardRef(() => EclMegaMenuContainerDirective));\n\n    containerStyleHeight: number | null = null;\n    isCurrent = false;\n    isMobileBreakpoint = false;\n    megaMenuMegaStyleHeight = signal<number | null>(null);\n    megaMenuMegaStyleOpacity = signal<number | null>(null);\n    wrapperStyleHeight: number | null = null;\n    wrapperStyleTop: number | null = null;\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private isLarge = false;\n    private eclMegaMenuDataService = inject(EclMegaMenuDataService);\n    private eclHeaderMenuComunicationService = inject(EclHeaderMenuComunicationService);\n    private eclMegaMenuService = inject(EclMegaMenuService);\n    private readonly doc = inject(DOCUMENT);\n    private readonly window = this.doc.defaultView; // Window | null\n    private appShellService = inject(EuiAppShellService);\n\n    constructor() {\n        super();\n\n        afterNextRender(() => {\n            this.eclMegaMenuDataService.eclMegaMenuInfoBottomYSubject$.pipe(takeUntil(this.destroy$)).subscribe(value => {\n                this.calculateSublistStyle(value);\n            });\n            const menuLink = this.menuLink();\n            if (menuLink) {\n                this.eclMegaMenuService.setExtraAttributesForLink(menuLink.el.nativeElement, this.linkExtraAttributes());\n            }\n            this.observeBreakpointChanges();\n            this.observeResizeWindow();\n        });\n    }\n\n    ngAfterContentInit(): void {\n        this.eclMegaMenuSublist()?.megaMenuSubItemClicked.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            if (!this.isExpanded) {\n                return;\n            }\n            if (!this.isMobileBreakpoint) {\n                // Only hide/show the level-2 panel when switching sub-items\n                const expandedSubItem = this.eclMegaMenuSublist().submenuItems().find(\n                    item => item.hasChildren && item.isExpanded\n                );\n                const megaMenuLevel2 = expandedSubItem?.megaMenuLevel2();\n                if (expandedSubItem && megaMenuLevel2) {\n                    megaMenuLevel2.nativeElement.style.opacity = '0';\n                }\n            }\n            setTimeout(() => this.checkDropdownHeight(false), 100);\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    get hasNoInfo(): boolean {\n        return !this.eclMegaMenuInfo();\n    }\n\n    get hasChildren(): boolean {\n        return !!this.eclMegaMenuSublist() || !!this.eclMegaMenuContainer();\n    }\n\n    get hasSublist(): boolean {\n        return !!this.eclMegaMenuSublist();\n    }\n\n    get hasFeatured(): boolean {\n        return !!this.eclMegaMenuFeatured();\n    }\n\n    get hasContainer(): boolean {\n        return !!this.eclMegaMenuContainer();\n    }\n\n    /**\n     * Set the focus on the sub element - link or button.\n     */\n    onFocus(): void {\n        const menuLink = this.menuLink();\n        const menuBtn = this.menuBtn();\n        if (menuLink) {\n            menuLink.onFocus();\n        } else if (menuBtn) {\n            menuBtn.onFocus();\n        }\n    }\n\n    /**\n     * Manage styling and functionality for children and siblings, when item is clicked.\n     */\n    onMegaMenuItemClick(): void {\n        if (this.hasChildren) {\n            this.isCurrent = !this.isCurrent;\n            this.isExpanded = !this.isExpanded;\n            const eclMegaMenuSublist = this.eclMegaMenuSublist();\n            if (eclMegaMenuSublist) {\n                eclMegaMenuSublist.onParentMegaMenuItemClick(this.isExpanded);\n            }\n            if (this.isExpanded) {\n                this.eclHeaderMenuComunicationService.updateExpanded(this.isExpanded);\n                this.hidePanels();\n                setTimeout(() => {\n                    this.checkDropdownHeight();\n                    this.calculateWrapperStyle();\n                }, 100);\n            } else {\n                this.eclHeaderMenuComunicationService.updateExpanded(this.isExpanded);\n                this.resetComputedHeights();\n            }\n        } else {\n            this.eclHeaderMenuComunicationService.updateExpanded(this.isExpanded);\n        }\n        this.megaMenuItemClicked.emit();\n    }\n\n    /**\n     * Manage styling and functionality when item is collapsed.\n     */\n    onMegaMenuItemCollapse(): void {\n        this.isCurrent = false;\n        this.isExpanded = false;\n        const eclMegaMenuSublist = this.eclMegaMenuSublist();\n        if (eclMegaMenuSublist) {\n            eclMegaMenuSublist.onParentMegaMenuItemClick(this.isExpanded);\n        }\n        this.resetComputedHeights();\n    }\n\n    onKeydown(evt: Event): void {\n        if (evt instanceof KeyboardEvent) {\n            if ((evt as KeyboardEvent).key === KeyCode.TAB && !(evt as KeyboardEvent).shiftKey) {\n                // if menu is open, navigate to children\n            } else {\n                this.megaMenuItemKeydown.emit(evt as KeyboardEvent);\n            }\n        }\n    }\n\n    /**\n     * On resize - calculate the size of the dropdown and wrapper (if item is expanded).\n     */\n    private observeResizeWindow(): void {\n        if (this.window) {\n            fromEvent(this.window, 'resize').pipe(\n                auditTime(50),\n                takeUntil(this.destroy$)).subscribe(() => {\n                setTimeout(() => {\n                    if (this.isExpanded) {\n                        this.checkDropdownHeight();\n                        this.calculateWrapperStyle();\n                    } else {\n                        // Even when not expanded, reset computed heights on resize\n                        // so stale desktop values don't persist into tablet/mobile layout\n                        this.resetComputedHeights();\n                    }\n                });\n            });\n        }\n    }\n\n    private calculateSublistStyle(bottomInfo: number): void {\n        const eclMegaMenuSublist = this.eclMegaMenuSublist();\n        if (this.isMobileBreakpoint && eclMegaMenuSublist) {\n            const availableHeight = this.window.innerHeight - bottomInfo - 16;\n            eclMegaMenuSublist.styleTop = availableHeight;\n        }\n    }\n\n    private calculateWrapperStyle(): void {\n        if (!this.isMobileBreakpoint) {\n            const height = this.el.nativeElement.getBoundingClientRect().height;\n            this.wrapperStyleTop = height;\n        }\n    }\n\n    private resetWrapperStyle(): void {\n        if (this.isMobileBreakpoint) {\n            this.wrapperStyleHeight = null;\n            this.wrapperStyleTop = null;\n        }\n    }\n\n    /**\n     * Resets all computed pixel heights on the info panel, mega panel, and wrapper.\n     * Called when the viewport changes breakpoint so that stale desktop values\n     * (e.g. info height of 227px) don't persist into tablet/mobile layout where\n     * the elements should flow naturally.\n     */\n    private resetComputedHeights(): void {\n        const eclMegaMenuInfo = this.eclMegaMenuInfo();\n        if (eclMegaMenuInfo) {\n            eclMegaMenuInfo.eclMegaMenuInfoStyleHeight = null;\n            eclMegaMenuInfo.eclMegaMenuInfoStyleOpacity.set(null);\n        }\n        this.megaMenuMegaStyleHeight.set(null);\n        this.megaMenuMegaStyleOpacity.set(null);\n        this.wrapperStyleHeight = null;\n        this.wrapperStyleTop = null;\n        this.containerStyleHeight = null;\n\n        // Reset featured panel height\n        const eclMegaMenuFeatured = this.eclMegaMenuFeatured();\n        if (eclMegaMenuFeatured) {\n            eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = null;\n        }\n\n        // Reset sublist and sub-items heights\n        const eclMegaMenuSublist = this.eclMegaMenuSublist();\n        if (eclMegaMenuSublist) {\n            eclMegaMenuSublist.styleHeight.set(null);\n            eclMegaMenuSublist.styleTop = null;\n            eclMegaMenuSublist.isScrollable = false;\n\n            // Reset level-2 heights on each subitem\n            eclMegaMenuSublist.submenuItems()?.forEach(subItem => {\n                subItem.level2StyleHeight = null;\n                const eclMegaMenuFeatured = subItem.eclMegaMenuFeatured();\n                if (eclMegaMenuFeatured) {\n                    eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = null;\n                }\n            });\n        }\n    }\n\n    private hidePanels(): void {\n        if (this.isMobileBreakpoint) {\n            return;\n        }\n        if (this.eclMegaMenuMega()) {\n            this.megaMenuMegaStyleOpacity.set(0);\n        }\n        const eclMegaMenuInfo = this.eclMegaMenuInfo();\n        if (eclMegaMenuInfo) {\n            eclMegaMenuInfo.eclMegaMenuInfoStyleOpacity.set(0);\n        }\n    }\n\n    /**\n     * On mobile, calculate the height of the mega panel (level 1).\n     * - If the item has a featured panel: set height on the mega div (.ecl-mega-menu__mega--has-featured)\n     * - If no featured, panel 1: height is set on the sublist\n     * - If no featured, panel 2: height is set on the level-2 div\n     */\n    private calculateMobileHeight(): void {\n        const eclMegaMenuMega = this.eclMegaMenuMega();\n        if (!this.isMobileBreakpoint || !eclMegaMenuMega) {\n            return;\n        }\n        const eclMegaMenuSublistValue = this.eclMegaMenuSublist();\n        if (this.hasFeatured) {\n            // Has featured → set height on the mega div, no scrollable on sublist\n            const megaRect = eclMegaMenuMega.nativeElement.getBoundingClientRect();\n            const megaTop = megaRect.top;\n            this.megaMenuMegaStyleHeight.set(this.window.innerHeight - megaTop);\n            const eclMegaMenuSublist = this.eclMegaMenuSublist();\n            if (eclMegaMenuSublist) {\n                eclMegaMenuSublist.isScrollable = false;\n                eclMegaMenuSublist.styleHeight.set(null);\n            }\n        } else if (eclMegaMenuSublistValue) {\n            this.megaMenuMegaStyleHeight.set(null);\n\n            // Check if a sub-item with children is expanded (panel 2)\n            const expandedSubItem = eclMegaMenuSublistValue.submenuItems().find(\n                item => item.hasChildren && item.isExpanded\n            );\n\n            const megaMenuLevel2 = expandedSubItem?.megaMenuLevel2();\n            if (expandedSubItem && megaMenuLevel2) {\n                // No featured, panel 2 → set height on the level-2 div\n                const subMegaRect = megaMenuLevel2.nativeElement.getBoundingClientRect();\n                const subMegaTop = subMegaRect.top;\n                expandedSubItem.level2StyleHeight = this.window.innerHeight - subMegaTop;\n                // Clear sublist height and scrollable since panel 2 is now showing\n                eclMegaMenuSublistValue.isScrollable = false;\n                eclMegaMenuSublistValue.styleHeight.set(null);\n            } else {\n                // No featured, panel 1 → set height on the sublist\n                const sublistRect = eclMegaMenuSublistValue.el.nativeElement.getBoundingClientRect();\n                const sublistTop = sublistRect.top;\n                eclMegaMenuSublistValue.styleHeight.set(this.window.innerHeight - sublistTop);\n                eclMegaMenuSublistValue.isScrollable = true;\n            }\n        } else {\n            this.megaMenuMegaStyleHeight.set(null);\n        }\n    }\n\n    private checkDropdownHeight(hide = true): void {\n        if (this.isMobileBreakpoint) {\n            this.calculateMobileHeight();\n            return;\n        }\n\n        if (hide) {\n            this.hidePanels();\n        }\n        let infoPanelHeight = 0;\n        const eclMegaMenuInfo = this.eclMegaMenuInfo();\n        if (eclMegaMenuInfo) {\n            eclMegaMenuInfo.eclMegaMenuInfoStyleHeight = null;\n        }\n\n        const heights = [];\n        let height = 0;\n        let itemsHeight = 0;\n        let subItemsHeight = 0;\n        let featuredHeight = 0;\n        let featuredHeight2 = 0;\n\n        if (this.hasContainer) {\n            const viewportHeight = this.window.innerHeight;\n            const mainTop = this.mainPanel().nativeElement.getBoundingClientRect().top;\n            this.containerStyleHeight = viewportHeight - mainTop;\n        } else {\n            if (eclMegaMenuInfo) {\n                infoPanelHeight = eclMegaMenuInfo.getInfoPanelScrollHeight() + 16;\n                if (this.isLarge) {\n                    heights.push(infoPanelHeight);\n                } else {\n                    subItemsHeight = infoPanelHeight;\n                    featuredHeight = infoPanelHeight;\n                }\n                eclMegaMenuInfo.eclMegaMenuInfoStyleOpacity.set(1);\n            }\n\n            const eclMegaMenuMega = this.eclMegaMenuMega();\n            if (eclMegaMenuMega) {\n                const eclMegaMenuSublist = this.eclMegaMenuSublist();\n                if (eclMegaMenuSublist && eclMegaMenuSublist.submenuItems().length > 0) {\n                    if (this.isOneLevelOnly()) {\n                        itemsHeight = eclMegaMenuSublist.el.nativeElement.offsetHeight;\n                    } else {\n                        eclMegaMenuSublist.submenuItems().forEach((item) => {\n                            itemsHeight += item.getMegaMenuSubItemHeight();\n                        });\n                        if (eclMegaMenuSublist.spacer()) {\n                            itemsHeight += 25;\n                        }\n                    }\n                    heights.push(itemsHeight);\n                }\n                const expandedSubItem = eclMegaMenuSublist.submenuItems().find(item => item.hasChildren && item.isExpanded);\n                if (expandedSubItem !== undefined) {\n                    const eclMegaMenuFeatured = expandedSubItem.eclMegaMenuFeatured();\n                    expandedSubItem.submenu().submenuItems().forEach(item => {\n                        subItemsHeight += item.getMegaMenuSubItemHeight();\n                    });\n                    heights.push(subItemsHeight);\n                    if (eclMegaMenuFeatured) {\n                        featuredHeight += eclMegaMenuFeatured.getEclMegaMenuFeaturedHeight();\n                        featuredHeight += 5;\n                        heights.push(featuredHeight);\n                    }\n                }\n\n                const eclMegaMenuFeaturedValue = this.eclMegaMenuFeatured();\n                if (eclMegaMenuFeaturedValue) {\n                    featuredHeight2 = eclMegaMenuFeaturedValue.getEclMegaMenuFeaturedHeight();\n                    heights.push(featuredHeight2);\n                }\n                const maxHeight = Math.max(...heights);\n                const containerBounding = this.el.nativeElement.getBoundingClientRect();\n                const containerBottom = containerBounding.bottom;\n                // By requirements, limit the height to the 70% of the available space.\n                const availableHeight = (this.window.innerHeight - containerBottom) * 0.9;\n                if (maxHeight > availableHeight) {\n                    height = availableHeight;\n                } else {\n                    height = maxHeight;\n                }\n\n                this.wrapperStyleHeight = eclMegaMenuMega && eclMegaMenuInfo && !this.isLarge ?\n                    height + infoPanelHeight :  height;\n                if (this.wrapperStyleHeight > availableHeight) this.wrapperStyleHeight = availableHeight;\n                if (eclMegaMenuMega && this.isLarge) {\n                    this.megaMenuMegaStyleHeight.set(height);\n                } else if (eclMegaMenuMega && eclMegaMenuInfo) {\n                    this.megaMenuMegaStyleHeight.set(this.wrapperStyleHeight - infoPanelHeight);\n                }\n                if (eclMegaMenuInfo && this.isLarge) {\n                    eclMegaMenuInfo.eclMegaMenuInfoStyleHeight = height;\n                }\n\n                if (expandedSubItem !== undefined) {\n                    if (this.isLarge) {\n                        expandedSubItem.level2StyleHeight = height;\n                    } else {\n                        expandedSubItem.level2StyleHeight = height - infoPanelHeight;\n                    }\n\n                    const megaMenuLevel2 = expandedSubItem.megaMenuLevel2();\n                    if (megaMenuLevel2) {\n                        megaMenuLevel2.nativeElement.style.opacity = '1';\n                    }\n\n                    const expandedSubItemFeatured = expandedSubItem.eclMegaMenuFeatured();\n                    if (expandedSubItemFeatured) {\n                        if (this.isLarge) {\n                            expandedSubItemFeatured.eclMegaMenuFeaturedStyleHeight = height;\n                        } else {\n                            expandedSubItemFeatured.eclMegaMenuFeaturedStyleHeight = height - infoPanelHeight;\n                        }\n                    }\n                }\n                if (eclMegaMenuFeaturedValue) {\n                    if (this.isLarge) {\n                        eclMegaMenuFeaturedValue.eclMegaMenuFeaturedStyleHeight = height;\n                    } else {\n                        eclMegaMenuFeaturedValue.eclMegaMenuFeaturedStyleHeight = this.wrapperStyleHeight - infoPanelHeight;\n                    }\n                }\n                this.megaMenuMegaStyleOpacity.set(1);\n            }\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.appShellService.state$\n            .pipe(\n                map((state) => {\n                    const w = state.windowWidth ?? 0;\n                    const bp = state.breakpoints;\n                    return {\n                        // ECL uses breakpointDesktop = 1140px. Everything below that\n                        // (xs/sm/md/lg) must use mobile behavior. isLtLargeTablet covers this range.\n                        isMobile: !!(bp?.isLtLargeTablet),\n                        isLarge: w >= 1368,\n                    };\n                }),\n                distinctUntilChanged(\n                    (a, b) => a.isMobile === b.isMobile && a.isLarge === b.isLarge\n                ),\n                takeUntil(this.destroy$),\n            )\n            .subscribe(({ isMobile, isLarge }) => {\n                const wasMobile = this.isMobileBreakpoint;\n                const wasLarge = this.isLarge;\n                this.isMobileBreakpoint = isMobile;\n                this.isLarge = isLarge;\n                this.resetWrapperStyle();\n\n                // When breakpoint changes, reset all computed heights so they don't\n                // carry over stale pixel values from the previous layout mode.\n                if (wasMobile !== isMobile || wasLarge !== isLarge) {\n                    this.resetComputedHeights();\n\n                    // If transitioning between mobile/desktop while expanded,\n                    // recalculate with new layout dimensions\n                    if (this.isExpanded) {\n                        setTimeout(() => {\n                            this.checkDropdownHeight();\n                            this.calculateWrapperStyle();\n                        }, 100);\n                    }\n                }\n            });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 1450,
-                    "end": 1564,
+                    "pos": 1433,
+                    "end": 1547,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -62598,7 +62041,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 139,
+                "line": 149,
                 "rawdescription": "\n"
             },
             "extends": [
@@ -62615,18 +62058,29 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 51,
+                        "line": 53,
                         "rawdescription": "\n\nReturns current menu item classes, depending on item's state (it's properties' values).\n",
                         "description": "<p>Returns current menu item classes, depending on item&#39;s state (it&#39;s properties&#39; values).</p>\n"
                     }
                 },
+                "hasPopup": {
+                    "name": "hasPopup",
+                    "getSignature": {
+                        "name": "hasPopup",
+                        "type": "unknown",
+                        "returnType": "unknown | null",
+                        "line": 74,
+                        "rawdescription": "\n\nReflects whether this item has a submenu/container. Evaluated lazily during\nchange detection (not at construction) so the content-query signals are\nresolved before it is read.\n",
+                        "description": "<p>Reflects whether this item has a submenu/container. Evaluated lazily during\nchange detection (not at construction) so the content-query signals are\nresolved before it is read.</p>\n"
+                    }
+                },
                 "hasNoInfo": {
                     "name": "hasNoInfo",
                     "getSignature": {
                         "name": "hasNoInfo",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 181,
+                        "line": 191,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -62637,7 +62091,7 @@
                         "name": "hasChildren",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 185,
+                        "line": 195,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -62648,7 +62102,7 @@
                         "name": "hasSublist",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 189,
+                        "line": 199,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -62659,7 +62113,7 @@
                         "name": "hasFeatured",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 193,
+                        "line": 203,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -62670,7 +62124,7 @@
                         "name": "hasContainer",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 197,
+                        "line": 207,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -62717,10 +62171,11 @@
         },
         {
             "name": "EclMegaMenuSubitemComponent",
-            "id": "component-EclMegaMenuSubitemComponent-08488f72c8cb6e97ce7de77625b9a572632d348721012d4f2fb1749bfa5b1bc8f74ffa3d044880291e39358f4560843dfa9269de7376207a3a2572ced00c5510",
+            "id": "component-EclMegaMenuSubitemComponent-e7d3f7421346151c385486f2f0113ce4498ea66e5b043956ac5e5410948d7b43f5512184fd3d33e2534207f9d0cc51fad37f88ffc6a03e266058da9e4a86f430",
             "file": "packages/ecl/components/ecl-mega-menu/ecl-mega-menu-subitem/ecl-mega-menu-subitem.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -62742,7 +62197,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 59,
+                    "line": 63,
                     "type": "string",
                     "decorators": []
                 },
@@ -62754,7 +62209,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 46,
+                    "line": 50,
                     "type": "string",
                     "decorators": []
                 },
@@ -62768,7 +62223,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Sets id for the button element.</p>\n",
-                    "line": 45,
+                    "line": 49,
                     "rawdescription": "\n\nSets id for the button element.\n",
                     "modifierKind": [
                         148
@@ -62785,7 +62240,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>If the link is external, this will be the title of the external icon.</p>\n",
-                    "line": 54,
+                    "line": 58,
                     "rawdescription": "\n\nIf the link is external, this will be the title of the external icon.\n",
                     "modifierKind": [
                         148
@@ -62802,7 +62257,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>If the link redirects to external page. Adds an &#39;external&#39; icon.</p>\n",
-                    "line": 50,
+                    "line": 54,
                     "rawdescription": "\n\nIf the link redirects to external page. Adds an 'external' icon.\n",
                     "modifierKind": [
                         148
@@ -62819,7 +62274,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Used for the &#39;View all&#39; link.</p>\n",
-                    "line": 64,
+                    "line": 68,
                     "rawdescription": "\n\nUsed for the 'View all' link.\n",
                     "modifierKind": [
                         148
@@ -62836,7 +62291,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Adds custom attributes to an anchor element.</p>\n",
-                    "line": 68,
+                    "line": 72,
                     "rawdescription": "\n\nAdds custom attributes to an anchor element.\n",
                     "modifierKind": [
                         148
@@ -62853,7 +62308,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 57,
+                    "line": 61,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -62870,7 +62325,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 58,
+                    "line": 62,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -62887,7 +62342,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 56,
+                    "line": 60,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -62904,7 +62359,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 60,
+                    "line": 64,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -62962,7 +62417,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 92,
+                    "line": 96,
                     "type": "EventEmitter"
                 },
                 {
@@ -62971,7 +62426,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 93,
+                    "line": 97,
                     "type": "EventEmitter"
                 }
             ],
@@ -62986,16 +62441,9 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 102,
+                    "line": 106,
                     "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'style.display'"
-                        }
-                    ],
                     "modifierKind": [
-                        171,
                         124
                     ]
                 },
@@ -63009,7 +62457,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The component for the featured items.</p>\n",
-                    "line": 90,
+                    "line": 94,
                     "rawdescription": "\n\nThe component for the featured items.\n",
                     "modifierKind": [
                         148
@@ -63025,7 +62473,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 95,
+                    "line": 99,
                     "rawdescription": "\n"
                 },
                 {
@@ -63038,7 +62486,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 28,
+                    "line": 32,
                     "rawdescription": "\n"
                 },
                 {
@@ -63051,7 +62499,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 96,
+                    "line": 100,
                     "rawdescription": "\n"
                 },
                 {
@@ -63064,7 +62512,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Used to set the height of the second level subitems container.</p>\n",
-                    "line": 100,
+                    "line": 104,
                     "rawdescription": "\n\nUsed to set the height of the second level subitems container.\n"
                 },
                 {
@@ -63077,7 +62525,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Wrapper div element of the second level sub-items.</p>\n",
-                    "line": 73,
+                    "line": 77,
                     "rawdescription": "\n\nWrapper div element of the second level sub-items.\n",
                     "modifierKind": [
                         148
@@ -63093,7 +62541,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The directive of the submenu lits.</p>\n",
-                    "line": 86,
+                    "line": 90,
                     "rawdescription": "\n\nThe directive of the submenu lits.\n",
                     "modifierKind": [
                         148
@@ -63109,7 +62557,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The button element, if it exists. Item can have either link or button.</p>\n",
-                    "line": 81,
+                    "line": 85,
                     "rawdescription": "\n\nThe button element, if it exists. Item can have either link or button.\n",
                     "modifierKind": [
                         148
@@ -63125,7 +62573,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The link element, if it exists. Item can have either link or button.</p>\n",
-                    "line": 77,
+                    "line": 81,
                     "rawdescription": "\n\nThe link element, if it exists. Item can have either link or button.\n",
                     "modifierKind": [
                         148
@@ -63140,7 +62588,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 155,
+                    "line": 159,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -63153,7 +62601,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 162,
+                    "line": 166,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nShow or hide the subitems.\n",
@@ -63166,7 +62614,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 137,
+                    "line": 141,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets focus on either link or button element.\n",
@@ -63179,7 +62627,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 147,
+                    "line": 151,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -63201,7 +62649,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 178,
+                    "line": 182,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -63227,7 +62675,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 173,
+                    "line": 177,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nIf link is clicked -> emit event and close all opened menus and submenus.\n",
@@ -63240,7 +62688,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 151,
+                    "line": 155,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -63253,7 +62701,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 190,
+                    "line": 194,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -63266,7 +62714,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 199,
+                    "line": 203,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -63314,33 +62762,7 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 30,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "style.display",
-                    "actualName": "display",
-                    "defaultValue": "''",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 102,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [
@@ -63366,14 +62788,14 @@
             "description": "<p>This component represents a sub-item in the mega-menu component. Applies styling and functionality.</p>\n",
             "rawdescription": "\n\nThis component represents a sub-item in the mega-menu component. Applies styling and functionality.\n",
             "type": "component",
-            "sourceCode": "import { NgTemplateOutlet } from '@angular/common';\nimport { afterNextRender, booleanAttribute, Component, DOCUMENT, ElementRef, EventEmitter, forwardRef, HostBinding, inject, Input, Output, input, viewChild, contentChild } from '@angular/core';\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 { EclLinkDirective, EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { ECLBaseDirective, KeyCode } from '@eui/ecl/core';\nimport { distinctUntilChanged, map, Subject, takeUntil } from 'rxjs';\nimport { EclMegaMenuSublistDirective } from '../directives/ecl-mega-menu-list.directive';\nimport { EclMegaMenuFeaturedComponent } from '../ecl-mega-menu-featured/ecl-mega-menu-featured.component';\nimport { EclMegaMenuItem } from '../models/ecl-mega-menu-item.model';\nimport { EclMegaMenuDataService } from '../services/ecl-mega-menu-data.service';\nimport { EclMegaMenuService } from '../services/ecl-mega-menu.service';\n\n/**\n * This component represents a sub-item in the mega-menu component. Applies styling and functionality.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'li[eclMegaMenuSubitem]',\n    templateUrl: './ecl-mega-menu-subitem.component.html',\n    imports: [NgTemplateOutlet, RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK],\n})\n\nexport class EclMegaMenuSubitemComponent extends ECLBaseDirective implements EclMegaMenuItem {\n\n    isExpanded = false;\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-mega-menu__subitem'),\n            this.isCurrent ? 'ecl-mega-menu__subitem--current' : '',\n            this.isExpanded ? 'ecl-mega-menu__subitem--expanded' : '',\n            this.isSeeAll() ? 'ecl-mega-menu__see-all' : '',\n            this.isParentLink ? 'ecl-mega-menu__parent-link' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    /**\n     * Sets id for the button element.\n     */\n    readonly buttonId = input<string>(undefined);\n    @Input() label = '';\n    /**\n     * If the link redirects to external page. Adds an 'external' icon.\n     */\n    readonly isExternal = input(false, { transform: booleanAttribute });\n    /**\n     * If the link is external, this will be the title of the external icon.\n     */\n    readonly externalIconTitle = 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    @Input() href = '';\n    readonly target = input('');\n    /**\n     * Used for the 'View all' link.\n     */\n    readonly isSeeAll = input(false, { transform: booleanAttribute });\n    /**\n     * Adds custom attributes to an anchor element.\n     */\n    readonly linkExtraAttributes = input<Record<string, string>>(undefined);\n\n    /**\n     * Wrapper div element of the second level sub-items.\n     */\n    readonly megaMenuLevel2 = viewChild<ElementRef>('megaMenuLevel2');\n    /**\n     * The link element, if it exists. Item can have either link or button.\n     */\n    readonly subMenuItemLink = viewChild(EclLinkDirective);\n    /**\n     * The button element, if it exists. Item can have either link or button.\n     */\n    readonly subMenuItemBtn = viewChild<EclButtonComponent>('subMenuItemBtn');\n\n    /**\n     * The directive of the submenu lits.\n     */\n    readonly submenu = contentChild(forwardRef(() => EclMegaMenuSublistDirective));\n    /**\n     * The component for the featured items.\n     */\n    readonly eclMegaMenuFeatured = contentChild(forwardRef(() => EclMegaMenuFeaturedComponent));\n\n    @Output() megaMenuSubItemClicked = new EventEmitter();\n    @Output() megaMenuSubItemKeydown = new EventEmitter();\n\n    isCurrent = false;\n    isMobileBreakpoint = false;\n    /**\n     * Used to set the height of the second level subitems container.\n     */\n    level2StyleHeight: number | null = null;\n\n    @HostBinding('style.display') protected display = '';\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private isParentLink = false;\n    private eclMegaMenuDataService = inject(EclMegaMenuDataService);\n    private el = inject(ElementRef);\n    private eclMegaMenuService = inject(EclMegaMenuService);\n    private readonly doc = inject(DOCUMENT);\n    private readonly window = this.doc.defaultView; // Window | null\n    private appShell = inject(EuiAppShellService);\n\n    constructor() {\n        super();\n        const eclMegaMenuService = this.eclMegaMenuService;\n\n        afterNextRender(() => {\n            const subMenuItemLink = this.subMenuItemLink();\n            if (subMenuItemLink) {\n                eclMegaMenuService.setExtraAttributesForLink(subMenuItemLink.el.nativeElement, this.linkExtraAttributes());\n            }\n            this.observeBreakpointChanges();\n        });\n    }\n\n    get hasChildren(): boolean {\n        return !!this.submenu();\n    }\n\n    get hasFeatured(): boolean {\n        return !!this.eclMegaMenuFeatured();\n    }\n\n    /**\n     * Sets focus on either link or button element.\n     */\n    onFocus(): void{\n        const subMenuItemLink = this.subMenuItemLink();\n        const subMenuItemBtn = this.subMenuItemBtn();\n        if (subMenuItemLink) {\n            subMenuItemLink.onFocus();\n        } else if (subMenuItemBtn) {\n            subMenuItemBtn.onFocus();\n        }\n    }\n\n    onHide(): void {\n        this.display = 'none';\n    }\n\n    onShow(): void {\n        this.display = '';\n    }\n\n    getMegaMenuSubItemHeight(): number {\n        return this.el.nativeElement.getBoundingClientRect().height;\n    }\n\n    /**\n     * Show or hide the subitems.\n     */\n    onButtonClick(): void {\n        this.isCurrent = !this.isCurrent;\n        this.isExpanded = !this.isExpanded;\n        this.eclMegaMenuDataService.eclSubItemToggle(this.isExpanded);\n        this.eclMegaMenuDataService.eclSubItemClick(this);\n        this.megaMenuSubItemClicked.emit();\n    }\n\n    /**\n     * If link is clicked -> emit event and close all opened menus and submenus.\n     */\n    onLinkClick(): void {\n        this.eclMegaMenuDataService.eclSubItemClick(this);\n        this.megaMenuSubItemClicked.emit();\n    }\n\n    onKeydown(evt: Event): void {\n        if (evt instanceof KeyboardEvent) {\n            if (!((evt as KeyboardEvent).key === KeyCode.TAB)) {\n                if ((evt as KeyboardEvent).key === KeyCode.ESCAPE) {\n                    this.eclMegaMenuDataService.eclSubItemEscapeEvent(true);\n                } else {\n                    this.megaMenuSubItemKeydown.emit(evt as KeyboardEvent);\n                }\n            }\n        }\n    }\n\n    onSubMenuItemCollapse(): void {\n        if (this.isExpanded) {\n            this.eclMegaMenuDataService.eclSubItemToggle(false);\n            this.isCurrent = false;\n            this.isExpanded = false;\n            this.isParentLink = false;\n        }\n    }\n\n    onSubMenuItemExpand(): void {\n        this.isCurrent = true;\n        this.isExpanded = true;\n        this.eclMegaMenuDataService.eclSubItemToggle(this.isExpanded);\n    }\n\n    private observeBreakpointChanges(): void {\n        this.appShell.getState<any>('breakpoints')\n            .pipe(\n                // ECL uses breakpointDesktop = 1140px. isLtLargeTablet covers xs/sm/md/lg (< 1140px).\n                map(bp => !!(bp?.isLtLargeTablet)),\n                distinctUntilChanged(),\n                takeUntil(this.destroy$),\n            )\n            .subscribe((isMobile) => {\n                const wasMobile = this.isMobileBreakpoint;\n                this.isMobileBreakpoint = isMobile;\n\n                // Reset computed heights when switching breakpoints\n                if (wasMobile !== isMobile) {\n                    this.level2StyleHeight = null;\n                    const eclMegaMenuFeatured = this.eclMegaMenuFeatured();\n                    if (eclMegaMenuFeatured) {\n                        eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = null;\n                    }\n                }\n            });\n    }\n}\n",
+            "sourceCode": "import { NgTemplateOutlet } from '@angular/common';\nimport { afterNextRender, booleanAttribute, Component, DOCUMENT, ElementRef, EventEmitter, forwardRef, inject, Input, Output, input, viewChild, contentChild } from '@angular/core';\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 { EclLinkDirective, EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { ECLBaseDirective, KeyCode } from '@eui/ecl/core';\nimport { distinctUntilChanged, map, Subject, takeUntil } from 'rxjs';\nimport { EclMegaMenuSublistDirective } from '../directives/ecl-mega-menu-list.directive';\nimport { EclMegaMenuFeaturedComponent } from '../ecl-mega-menu-featured/ecl-mega-menu-featured.component';\nimport { EclMegaMenuItem } from '../models/ecl-mega-menu-item.model';\nimport { EclMegaMenuDataService } from '../services/ecl-mega-menu-data.service';\nimport { EclMegaMenuService } from '../services/ecl-mega-menu.service';\n\n/**\n * This component represents a sub-item in the mega-menu component. Applies styling and functionality.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'li[eclMegaMenuSubitem]',\n    templateUrl: './ecl-mega-menu-subitem.component.html',\n    imports: [NgTemplateOutlet, RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK],\n    host: {\n        '[class]': 'cssClasses',\n        '[style.display]': 'display',\n    },\n})\n\nexport class EclMegaMenuSubitemComponent extends ECLBaseDirective implements EclMegaMenuItem {\n\n    isExpanded = false;\n\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-mega-menu__subitem'),\n            this.isCurrent ? 'ecl-mega-menu__subitem--current' : '',\n            this.isExpanded ? 'ecl-mega-menu__subitem--expanded' : '',\n            this.isSeeAll() ? 'ecl-mega-menu__see-all' : '',\n            this.isParentLink ? 'ecl-mega-menu__parent-link' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    /**\n     * Sets id for the button element.\n     */\n    readonly buttonId = input<string>(undefined);\n    @Input() label = '';\n    /**\n     * If the link redirects to external page. Adds an 'external' icon.\n     */\n    readonly isExternal = input(false, { transform: booleanAttribute });\n    /**\n     * If the link is external, this will be the title of the external icon.\n     */\n    readonly externalIconTitle = 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    @Input() href = '';\n    readonly target = input('');\n    /**\n     * Used for the 'View all' link.\n     */\n    readonly isSeeAll = input(false, { transform: booleanAttribute });\n    /**\n     * Adds custom attributes to an anchor element.\n     */\n    readonly linkExtraAttributes = input<Record<string, string>>(undefined);\n\n    /**\n     * Wrapper div element of the second level sub-items.\n     */\n    readonly megaMenuLevel2 = viewChild<ElementRef>('megaMenuLevel2');\n    /**\n     * The link element, if it exists. Item can have either link or button.\n     */\n    readonly subMenuItemLink = viewChild(EclLinkDirective);\n    /**\n     * The button element, if it exists. Item can have either link or button.\n     */\n    readonly subMenuItemBtn = viewChild<EclButtonComponent>('subMenuItemBtn');\n\n    /**\n     * The directive of the submenu lits.\n     */\n    readonly submenu = contentChild(forwardRef(() => EclMegaMenuSublistDirective));\n    /**\n     * The component for the featured items.\n     */\n    readonly eclMegaMenuFeatured = contentChild(forwardRef(() => EclMegaMenuFeaturedComponent));\n\n    @Output() megaMenuSubItemClicked = new EventEmitter();\n    @Output() megaMenuSubItemKeydown = new EventEmitter();\n\n    isCurrent = false;\n    isMobileBreakpoint = false;\n    /**\n     * Used to set the height of the second level subitems container.\n     */\n    level2StyleHeight: number | null = null;\n\n    protected display = '';\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private isParentLink = false;\n    private eclMegaMenuDataService = inject(EclMegaMenuDataService);\n    private el = inject(ElementRef);\n    private eclMegaMenuService = inject(EclMegaMenuService);\n    private readonly doc = inject(DOCUMENT);\n    private readonly window = this.doc.defaultView; // Window | null\n    private appShell = inject(EuiAppShellService);\n\n    constructor() {\n        super();\n        const eclMegaMenuService = this.eclMegaMenuService;\n\n        afterNextRender(() => {\n            const subMenuItemLink = this.subMenuItemLink();\n            if (subMenuItemLink) {\n                eclMegaMenuService.setExtraAttributesForLink(subMenuItemLink.el.nativeElement, this.linkExtraAttributes());\n            }\n            this.observeBreakpointChanges();\n        });\n    }\n\n    get hasChildren(): boolean {\n        return !!this.submenu();\n    }\n\n    get hasFeatured(): boolean {\n        return !!this.eclMegaMenuFeatured();\n    }\n\n    /**\n     * Sets focus on either link or button element.\n     */\n    onFocus(): void{\n        const subMenuItemLink = this.subMenuItemLink();\n        const subMenuItemBtn = this.subMenuItemBtn();\n        if (subMenuItemLink) {\n            subMenuItemLink.onFocus();\n        } else if (subMenuItemBtn) {\n            subMenuItemBtn.onFocus();\n        }\n    }\n\n    onHide(): void {\n        this.display = 'none';\n    }\n\n    onShow(): void {\n        this.display = '';\n    }\n\n    getMegaMenuSubItemHeight(): number {\n        return this.el.nativeElement.getBoundingClientRect().height;\n    }\n\n    /**\n     * Show or hide the subitems.\n     */\n    onButtonClick(): void {\n        this.isCurrent = !this.isCurrent;\n        this.isExpanded = !this.isExpanded;\n        this.eclMegaMenuDataService.eclSubItemToggle(this.isExpanded);\n        this.eclMegaMenuDataService.eclSubItemClick(this);\n        this.megaMenuSubItemClicked.emit();\n    }\n\n    /**\n     * If link is clicked -> emit event and close all opened menus and submenus.\n     */\n    onLinkClick(): void {\n        this.eclMegaMenuDataService.eclSubItemClick(this);\n        this.megaMenuSubItemClicked.emit();\n    }\n\n    onKeydown(evt: Event): void {\n        if (evt instanceof KeyboardEvent) {\n            if (!((evt as KeyboardEvent).key === KeyCode.TAB)) {\n                if ((evt as KeyboardEvent).key === KeyCode.ESCAPE) {\n                    this.eclMegaMenuDataService.eclSubItemEscapeEvent(true);\n                } else {\n                    this.megaMenuSubItemKeydown.emit(evt as KeyboardEvent);\n                }\n            }\n        }\n    }\n\n    onSubMenuItemCollapse(): void {\n        if (this.isExpanded) {\n            this.eclMegaMenuDataService.eclSubItemToggle(false);\n            this.isCurrent = false;\n            this.isExpanded = false;\n            this.isParentLink = false;\n        }\n    }\n\n    onSubMenuItemExpand(): void {\n        this.isCurrent = true;\n        this.isExpanded = true;\n        this.eclMegaMenuDataService.eclSubItemToggle(this.isExpanded);\n    }\n\n    private observeBreakpointChanges(): void {\n        this.appShell.getState<any>('breakpoints')\n            .pipe(\n                // ECL uses breakpointDesktop = 1140px. isLtLargeTablet covers xs/sm/md/lg (< 1140px).\n                map(bp => !!(bp?.isLtLargeTablet)),\n                distinctUntilChanged(),\n                takeUntil(this.destroy$),\n            )\n            .subscribe((isMobile) => {\n                const wasMobile = this.isMobileBreakpoint;\n                this.isMobileBreakpoint = isMobile;\n\n                // Reset computed heights when switching breakpoints\n                if (wasMobile !== isMobile) {\n                    this.level2StyleHeight = null;\n                    const eclMegaMenuFeatured = this.eclMegaMenuFeatured();\n                    if (eclMegaMenuFeatured) {\n                        eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = null;\n                    }\n                }\n            });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 1164,
-                    "end": 1274,
+                    "pos": 1151,
+                    "end": 1261,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -63388,7 +62810,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 111,
+                "line": 115,
                 "rawdescription": "\n"
             },
             "extends": [
@@ -63404,7 +62826,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 30,
+                        "line": 34,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -63415,7 +62837,7 @@
                         "name": "hasChildren",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 126,
+                        "line": 130,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -63426,7 +62848,7 @@
                         "name": "hasFeatured",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 130,
+                        "line": 134,
                         "rawdescription": "\n",
                         "description": ""
                     }