@eui/ecl 21.2.5 → 21.2.6-snapshot-1780324384500

package/docs/json/documentation.json

@@ -46654,7 +46654,7 @@
         },
         {
             "name": "EclMegaMenuComponent",
-            "id": "component-EclMegaMenuComponent-9303e56306ff8cf501c1bfe5e8c0788b23c72408ba23e7a88d135542a3df25c0e6d9e4bfb2a1f7aba89d8a920a19a66a635a9e8d7eaa2b3b18714908ef91d558",
+            "id": "component-EclMegaMenuComponent-08c1f9fb061f05be1b760ec50495380da294712df23fc21b855999250da86c15439f50be43e8b32710494bca3d75d2dbe69ab203d1bed970e625e3c980314ed4",
             "file": "packages/ecl/components/ecl-mega-menu/ecl-mega-menu.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -46740,7 +46740,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Represents the current viewport breakpoint states.</p>\n",
-                    "line": 108,
+                    "line": 117,
                     "rawdescription": "\n\nRepresents the current viewport breakpoint states.\n",
                     "modifierKind": [
                         125
@@ -46755,7 +46755,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": 103,
+                    "line": 112,
                     "rawdescription": "\nAdds the relative class to the component, when a submenu is opened and this submenu has a featured component child"
                 },
                 {
@@ -46766,7 +46766,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 100
+                    "line": 109
                 },
                 {
                     "name": "isExpanded",
@@ -46878,7 +46878,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Used to position the overlay, when a menu item is expanded.</p>\n",
-                    "line": 99,
+                    "line": 108,
                     "rawdescription": "\n\nUsed to position the overlay, when a menu item is expanded.\n"
                 },
                 {
@@ -46910,7 +46910,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 140,
+                    "line": 149,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -46920,7 +46920,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 150,
+                    "line": 159,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -46930,7 +46930,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 159,
+                    "line": 168,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWhen clicking outside the menu - close any expanded item.\n",
@@ -46951,7 +46951,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 212,
+                    "line": 221,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed for mobile menu - when user clicks on 'Back' button. Returns to the previous state.\n",
@@ -46963,7 +46963,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 189,
+                    "line": 198,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -46973,7 +46973,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 165,
+                    "line": 174,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -46992,7 +46992,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 220,
+                    "line": 229,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -47085,7 +47085,7 @@
                     "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": 159
+                    "line": 168
                 }
             ],
             "standalone": false,
@@ -47104,7 +47104,7 @@
             "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, ContentChildren, DOCUMENT, DoCheck, ElementRef, EventEmitter, HostBinding, HostListener, IterableDiffer, IterableDiffers, OnDestroy, Output, QueryList, Renderer2, afterNextRender, forwardRef, inject } from '@angular/core';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { 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: [TranslateModule, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON],\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n        {\n            directive: ECLClickOutsideDirective,\n            // eslint-disable-next-line @angular-eslint/no-outputs-metadata-property\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    @Output() megaMenuItemSelect = new EventEmitter<EclMegaMenuItem>();\n    @ContentChildren(forwardRef(() => EclMegaMenuItemComponent), { descendants: true }) menuItems: QueryList<EclMegaMenuItemComponent>;\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     * 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\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.subscribeToAppShellBreakpoints();\n            this.handleRtlChangeState();\n            this.subscribeToEvents();\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.isMobileBreakpoint) {\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.first.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.isMobileBreakpoint) {\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.isMobileBreakpoint && 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.isMobileBreakpoint) {\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.isMobileBreakpoint) {\n                    this.isOnePanel = true;\n                    this.isTwoPanels = false;\n                    this.isStartPanel = false;\n                } else {\n                    if (item.eclMegaMenuSublist?.submenuItems.first.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);\n    }\n\n    private onMegaMenuItemKeydown(item: EclMegaMenuItemComponent, evt: KeyboardEvent): void {\n\n        const itemIndex = this.menuItems.toArray().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.get(index-1).onFocus();\n        }\n    }\n\n    private focusOnNextSibling(index: number): void {\n        if (index < this.menuItems.length - 1) {\n            this.menuItems.get(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                    this.isTablet = !!bkps.isTablet;\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",
+            "sourceCode": "import { Component, ContentChildren, DOCUMENT, DoCheck, ElementRef, EventEmitter, HostBinding, HostListener, IterableDiffer, IterableDiffers, OnDestroy, Output, QueryList, Renderer2, afterNextRender, forwardRef, inject } from '@angular/core';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { 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: [TranslateModule, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON],\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n        {\n            directive: ECLClickOutsideDirective,\n            // eslint-disable-next-line @angular-eslint/no-outputs-metadata-property\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    @Output() megaMenuItemSelect = new EventEmitter<EclMegaMenuItem>();\n    @ContentChildren(forwardRef(() => EclMegaMenuItemComponent), { descendants: true }) menuItems: QueryList<EclMegaMenuItemComponent>;\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\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.subscribeToAppShellBreakpoints();\n            this.handleRtlChangeState();\n            this.subscribeToEvents();\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.first.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.first.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);\n    }\n\n    private onMegaMenuItemKeydown(item: EclMegaMenuItemComponent, evt: KeyboardEvent): void {\n\n        const itemIndex = this.menuItems.toArray().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.get(index-1).onFocus();\n        }\n    }\n\n    private focusOnNextSibling(index: number): void {\n        if (index < this.menuItems.length - 1) {\n            this.menuItems.get(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",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -47114,7 +47114,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 128
+                "line": 137
             },
             "extends": [
                 "ECLBaseDirective"
@@ -47141,6 +47141,17 @@
                         "returnType": "",
                         "line": 57
                     }
+                },
+                "isMobileOrTablet": {
+                    "name": "isMobileOrTablet",
+                    "getSignature": {
+                        "name": "isMobileOrTablet",
+                        "type": "boolean",
+                        "returnType": "boolean",
+                        "line": 102,
+                        "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"
+                    }
                 }
             },
             "templateData": "<div class=\"ecl-mega-menu__overlay\" [style.top.px]=\"overlayStyleTop\"></div>\n<div class=\"ecl-container ecl-mega-menu__container\">\n    <button class=\"ecl-button ecl-button--tertiary ecl-mega-menu__open ecl-button--icon-only\"\n        type=\"button\" [attr.aria-expanded]=\"isMobileExpanded\" (click)=\"onMegaMenuMobileOpen()\">\n        <ecl-icon icon=\"hamburger\" size=\"m\"></ecl-icon>\n        <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        <span class=\"ecl-button__label\">{{ (isOpenMobile ? 'ecl.common.CLOSE' : 'ecl.menu.MENU') | translate }}</span>\n    </button>\n    <section class=\"ecl-mega-menu__inner\" [class.ecl-mega-menu__inner--expanded]=\"!isStartPanel && isExpanded\"\n        aria-label=\"ecl mega menu\" [style.top.px]=\"innerStyleTop\">\n        <header class=\"ecl-mega-menu__inner-header\">\n            <button eclButton variant=\"tertiary\" eclStyle=\"neutral\" class=\"ecl-mega-menu__back\" type=\"submit\" (click)=\"onMegaMenuBack()\">\n                <ecl-icon icon=\"corner-arrow\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>Back</span>\n            </button>\n        </header>\n        <ng-content></ng-content>\n    </section>\n</div>"
@@ -47695,7 +47706,7 @@
         },
         {
             "name": "EclMegaMenuItemComponent",
-            "id": "component-EclMegaMenuItemComponent-a39395260be2d811359428ee22b3abdfd12b3046a8d1bb2a6b7648a18654f4a7c04d96d624b5b5d8eaeb825034b3ecd7ec79ccd42dead27b56fa74f6fbee1fbf",
+            "id": "component-EclMegaMenuItemComponent-fe4261c8eb1c136dc94e1b4a113f034c43def434cac934ea92588b7832823be91620dd2c06ca03812f3d4cb22b48ed09467786fab43f6fc4b9f3adb933eeba3d",
             "file": "packages/ecl/components/ecl-mega-menu/ecl-mega-menu-item/ecl-mega-menu-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -48329,7 +48340,7 @@
             "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, ContentChild,\n    ContentChildren,\n    ElementRef, EventEmitter,\n    forwardRef,\n    HostBinding,\n    inject,\n    Input, OnDestroy, Output,\n    ViewChild,\n    DOCUMENT,\n    QueryList,\n    Renderer2,\n    input,\n    signal,\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    @Input({ transform: booleanAttribute }) isPromotional = false;\n    @Input() label: string;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    @Input() routerLink: string | any[] = null;\n    @Input() queryParams: Params | null = null;\n    @Input() queryParamsHandling: QueryParamsHandling = null;\n    @Input() href = '';\n    @Input() target = '';\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    @Input() linkExtraAttributes: { [key: string]: string };\n\n    @Output() megaMenuItemClicked = new EventEmitter();\n    @Output() megaMenuItemKeydown = new EventEmitter<KeyboardEvent>();\n    /**\n     * The wrapper around the subitems, if any.\n     */\n    @ViewChild('eclMegaMenuMega') eclMegaMenuMega: ElementRef;\n    /**\n     * This elemend hold some extra content, different from subitems. For example just some text or some custom links, etc.\n     */\n    @ViewChild('mainPanel') mainPanel: ElementRef;\n    /**\n     * Actual link of the menu item. If the menu has no children, but redirects/loads another page.\n     */\n    @ViewChild(EclLinkDirective) menuLink: EclLinkDirective;\n    /**\n     * Element, tat is rendered if the menu item has children.\n     */\n    @ViewChild('menuBtn') menuBtn: EclButtonComponent;\n    /**\n     * Element, that would contain some info about the current item or it's children. First in the container.\n     */\n    @ContentChild(forwardRef(() => EclMegaMenuInfoComponent)) eclMegaMenuInfo: EclMegaMenuInfoComponent;\n    /**\n     * Element, that holds the sub items of the current menu items.\n     */\n    @ContentChild(forwardRef(() => EclMegaMenuSublistDirective)) eclMegaMenuSublist: EclMegaMenuSublistDirective;\n\n    // Get all the sublists including childrens's sublist, to detect if it's only one level submenu.\n    @ContentChildren(forwardRef(() => EclMegaMenuSublistDirective), { descendants: true }) eclMegaMenuSublists: QueryList<EclMegaMenuFeaturedComponent>;\n\n    @ContentChild(forwardRef(() => EclMegaMenuFeaturedComponent), { descendants: false }) eclMegaMenuFeatured: EclMegaMenuFeaturedComponent;\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    @ContentChild(forwardRef(() => EclMegaMenuContainerDirective)) eclMegaMenuContainer: 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            if (this.menuLink) {\n                this.eclMegaMenuService.setExtraAttributesForLink(this.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.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                if (expandedSubItem && expandedSubItem.megaMenuLevel2) {\n                    expandedSubItem.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        if (this.menuLink) {\n            this.menuLink.onFocus();\n        } else if (this.menuBtn) {\n            this.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            if (this.eclMegaMenuSublist) {\n                this.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            }\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        if (this.eclMegaMenuSublist) {\n            this.eclMegaMenuSublist.onParentMegaMenuItemClick(this.isExpanded);\n        }\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                        }\n                    });\n                });\n        }\n    }\n\n    private calculateSublistStyle(bottomInfo: number): void {\n        if (this.isMobileBreakpoint) {\n            const availableHeight = this.window.innerHeight - bottomInfo - 16;\n            this.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    private hidePanels(): void {\n        if (this.isMobileBreakpoint) {\n            return;\n        }\n        if (this.eclMegaMenuMega) {\n            this.megaMenuMegaStyleOpacity.set(0);\n        }\n        if (this.eclMegaMenuInfo) {\n            this.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        if (!this.isMobileBreakpoint || !this.eclMegaMenuMega) {\n            return;\n        }\n        if (this.hasFeatured) {\n            // Has featured → set height on the mega div, no scrollable on sublist\n            const megaRect = this.eclMegaMenuMega.nativeElement.getBoundingClientRect();\n            const megaTop = megaRect.top;\n            this.megaMenuMegaStyleHeight.set(this.window.innerHeight - megaTop);\n            if (this.eclMegaMenuSublist) {\n                this.eclMegaMenuSublist.isScrollable = false;\n                this.eclMegaMenuSublist.styleHeight.set(null);\n            }\n        } else if (this.eclMegaMenuSublist) {\n            this.megaMenuMegaStyleHeight.set(null);\n\n            // Check if a sub-item with children is expanded (panel 2)\n            const expandedSubItem = this.eclMegaMenuSublist.submenuItems.find(\n                item => item.hasChildren && item.isExpanded\n            );\n\n            if (expandedSubItem && expandedSubItem.megaMenuLevel2) {\n                // No featured, panel 2 → set height on the level-2 div\n                const subMegaRect = expandedSubItem.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                this.eclMegaMenuSublist.isScrollable = false;\n                this.eclMegaMenuSublist.styleHeight.set(null);\n            } else {\n                // No featured, panel 1 → set height on the sublist\n                const sublistRect = this.eclMegaMenuSublist.el.nativeElement.getBoundingClientRect();\n                const sublistTop = sublistRect.top;\n                this.eclMegaMenuSublist.styleHeight.set(this.window.innerHeight - sublistTop);\n                this.eclMegaMenuSublist.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        if (this.eclMegaMenuInfo) {\n            this.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 (this.eclMegaMenuInfo) {\n                infoPanelHeight = this.eclMegaMenuInfo.getInfoPanelScrollHeight() + 16;\n                if (this.isLarge) {\n                    heights.push(infoPanelHeight);\n                } else {\n                    subItemsHeight = infoPanelHeight;\n                    featuredHeight = infoPanelHeight;\n                }\n                this.eclMegaMenuInfo.eclMegaMenuInfoStyleOpacity.set(1);\n            }\n\n            if (this.eclMegaMenuMega) {\n                if (this.eclMegaMenuSublist && this.eclMegaMenuSublist.submenuItems.length > 0) {\n                    if (this.isOneLevelOnly()) {\n                        itemsHeight = this.eclMegaMenuSublist.el.nativeElement.offsetHeight;\n                    } else {\n                        this.eclMegaMenuSublist.submenuItems.forEach((item) => {\n                            itemsHeight += item.getMegaMenuSubItemHeight();\n                        });\n                        if (this.eclMegaMenuSublist.spacer) {\n                            itemsHeight += 25;\n                        }\n                    }\n                    heights.push(itemsHeight);\n                }\n                const expandedSubItem = this.eclMegaMenuSublist.submenuItems.find(item => item.hasChildren && item.isExpanded);\n                if (expandedSubItem !== undefined) {\n                    expandedSubItem.submenu.submenuItems.forEach(item => {\n                        subItemsHeight += item.getMegaMenuSubItemHeight();\n                    });\n                    heights.push(subItemsHeight);\n                    if (expandedSubItem.eclMegaMenuFeatured) {\n                        featuredHeight += expandedSubItem.eclMegaMenuFeatured.getEclMegaMenuFeaturedHeight();\n                        featuredHeight += 5;\n                        heights.push(featuredHeight);\n                    }\n                }\n\n                if (this.eclMegaMenuFeatured) {\n                    featuredHeight2 = this.eclMegaMenuFeatured.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 = this.eclMegaMenuMega && this.eclMegaMenuInfo && !this.isLarge ? \n                    height + infoPanelHeight :  height;\n                if (this.wrapperStyleHeight > availableHeight) this.wrapperStyleHeight = availableHeight;\n                if (this.eclMegaMenuMega && this.isLarge) {\n                    this.megaMenuMegaStyleHeight.set(height);\n                } else if (this.eclMegaMenuMega && this.eclMegaMenuInfo) {\n                    this.megaMenuMegaStyleHeight.set(this.wrapperStyleHeight - infoPanelHeight);\n                }\n                if (this.eclMegaMenuInfo && this.isLarge) {\n                    this.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                    if (expandedSubItem.megaMenuLevel2) {\n                        expandedSubItem.megaMenuLevel2.nativeElement.style.opacity = '1';\n                    }\n\n                    if (expandedSubItem.eclMegaMenuFeatured) {\n                        if (this.isLarge) {\n                            expandedSubItem.eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = height;\n                        } else {\n                            expandedSubItem.eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = height - infoPanelHeight;\n                        }\n                    }\n                }\n                if (this.eclMegaMenuFeatured) {\n                    if (this.isLarge) {\n                        this.eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = height;\n                    } else {\n                        this.eclMegaMenuFeatured.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                        isMobile: !!(bp?.isMobile || bp?.isTablet),\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                this.isMobileBreakpoint = isMobile;\n                this.isLarge = isLarge;\n                this.resetWrapperStyle();\n            });\n    }\n}\n",
+            "sourceCode": "import {\n    AfterContentInit,\n    afterNextRender, booleanAttribute,\n    Component, ContentChild,\n    ContentChildren,\n    ElementRef, EventEmitter,\n    forwardRef,\n    HostBinding,\n    inject,\n    Input, OnDestroy, Output,\n    ViewChild,\n    DOCUMENT,\n    QueryList,\n    Renderer2,\n    input,\n    signal,\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    @Input({ transform: booleanAttribute }) isPromotional = false;\n    @Input() label: string;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    @Input() routerLink: string | any[] = null;\n    @Input() queryParams: Params | null = null;\n    @Input() queryParamsHandling: QueryParamsHandling = null;\n    @Input() href = '';\n    @Input() target = '';\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    @Input() linkExtraAttributes: { [key: string]: string };\n\n    @Output() megaMenuItemClicked = new EventEmitter();\n    @Output() megaMenuItemKeydown = new EventEmitter<KeyboardEvent>();\n    /**\n     * The wrapper around the subitems, if any.\n     */\n    @ViewChild('eclMegaMenuMega') eclMegaMenuMega: ElementRef;\n    /**\n     * This elemend hold some extra content, different from subitems. For example just some text or some custom links, etc.\n     */\n    @ViewChild('mainPanel') mainPanel: ElementRef;\n    /**\n     * Actual link of the menu item. If the menu has no children, but redirects/loads another page.\n     */\n    @ViewChild(EclLinkDirective) menuLink: EclLinkDirective;\n    /**\n     * Element, tat is rendered if the menu item has children.\n     */\n    @ViewChild('menuBtn') menuBtn: EclButtonComponent;\n    /**\n     * Element, that would contain some info about the current item or it's children. First in the container.\n     */\n    @ContentChild(forwardRef(() => EclMegaMenuInfoComponent)) eclMegaMenuInfo: EclMegaMenuInfoComponent;\n    /**\n     * Element, that holds the sub items of the current menu items.\n     */\n    @ContentChild(forwardRef(() => EclMegaMenuSublistDirective)) eclMegaMenuSublist: EclMegaMenuSublistDirective;\n\n    // Get all the sublists including childrens's sublist, to detect if it's only one level submenu.\n    @ContentChildren(forwardRef(() => EclMegaMenuSublistDirective), { descendants: true }) eclMegaMenuSublists: QueryList<EclMegaMenuFeaturedComponent>;\n\n    @ContentChild(forwardRef(() => EclMegaMenuFeaturedComponent), { descendants: false }) eclMegaMenuFeatured: EclMegaMenuFeaturedComponent;\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    @ContentChild(forwardRef(() => EclMegaMenuContainerDirective)) eclMegaMenuContainer: 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            if (this.menuLink) {\n                this.eclMegaMenuService.setExtraAttributesForLink(this.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.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                if (expandedSubItem && expandedSubItem.megaMenuLevel2) {\n                    expandedSubItem.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        if (this.menuLink) {\n            this.menuLink.onFocus();\n        } else if (this.menuBtn) {\n            this.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            if (this.eclMegaMenuSublist) {\n                this.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            }\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        if (this.eclMegaMenuSublist) {\n            this.eclMegaMenuSublist.onParentMegaMenuItemClick(this.isExpanded);\n        }\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                        }\n                    });\n                });\n        }\n    }\n\n    private calculateSublistStyle(bottomInfo: number): void {\n        if (this.isMobileBreakpoint) {\n            const availableHeight = this.window.innerHeight - bottomInfo - 16;\n            this.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    private hidePanels(): void {\n        if (this.isMobileBreakpoint) {\n            return;\n        }\n        if (this.eclMegaMenuMega) {\n            this.megaMenuMegaStyleOpacity.set(0);\n        }\n        if (this.eclMegaMenuInfo) {\n            this.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        if (!this.isMobileBreakpoint || !this.eclMegaMenuMega) {\n            return;\n        }\n        if (this.hasFeatured) {\n            // Has featured → set height on the mega div, no scrollable on sublist\n            const megaRect = this.eclMegaMenuMega.nativeElement.getBoundingClientRect();\n            const megaTop = megaRect.top;\n            this.megaMenuMegaStyleHeight.set(this.window.innerHeight - megaTop);\n            if (this.eclMegaMenuSublist) {\n                this.eclMegaMenuSublist.isScrollable = false;\n                this.eclMegaMenuSublist.styleHeight.set(null);\n            }\n        } else if (this.eclMegaMenuSublist) {\n            this.megaMenuMegaStyleHeight.set(null);\n\n            // Check if a sub-item with children is expanded (panel 2)\n            const expandedSubItem = this.eclMegaMenuSublist.submenuItems.find(\n                item => item.hasChildren && item.isExpanded\n            );\n\n            if (expandedSubItem && expandedSubItem.megaMenuLevel2) {\n                // No featured, panel 2 → set height on the level-2 div\n                const subMegaRect = expandedSubItem.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                this.eclMegaMenuSublist.isScrollable = false;\n                this.eclMegaMenuSublist.styleHeight.set(null);\n            } else {\n                // No featured, panel 1 → set height on the sublist\n                const sublistRect = this.eclMegaMenuSublist.el.nativeElement.getBoundingClientRect();\n                const sublistTop = sublistRect.top;\n                this.eclMegaMenuSublist.styleHeight.set(this.window.innerHeight - sublistTop);\n                this.eclMegaMenuSublist.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        if (this.eclMegaMenuInfo) {\n            this.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 (this.eclMegaMenuInfo) {\n                infoPanelHeight = this.eclMegaMenuInfo.getInfoPanelScrollHeight() + 16;\n                if (this.isLarge) {\n                    heights.push(infoPanelHeight);\n                } else {\n                    subItemsHeight = infoPanelHeight;\n                    featuredHeight = infoPanelHeight;\n                }\n                this.eclMegaMenuInfo.eclMegaMenuInfoStyleOpacity.set(1);\n            }\n\n            if (this.eclMegaMenuMega) {\n                if (this.eclMegaMenuSublist && this.eclMegaMenuSublist.submenuItems.length > 0) {\n                    if (this.isOneLevelOnly()) {\n                        itemsHeight = this.eclMegaMenuSublist.el.nativeElement.offsetHeight;\n                    } else {\n                        this.eclMegaMenuSublist.submenuItems.forEach((item) => {\n                            itemsHeight += item.getMegaMenuSubItemHeight();\n                        });\n                        if (this.eclMegaMenuSublist.spacer) {\n                            itemsHeight += 25;\n                        }\n                    }\n                    heights.push(itemsHeight);\n                }\n                const expandedSubItem = this.eclMegaMenuSublist.submenuItems.find(item => item.hasChildren && item.isExpanded);\n                if (expandedSubItem !== undefined) {\n                    expandedSubItem.submenu.submenuItems.forEach(item => {\n                        subItemsHeight += item.getMegaMenuSubItemHeight();\n                    });\n                    heights.push(subItemsHeight);\n                    if (expandedSubItem.eclMegaMenuFeatured) {\n                        featuredHeight += expandedSubItem.eclMegaMenuFeatured.getEclMegaMenuFeaturedHeight();\n                        featuredHeight += 5;\n                        heights.push(featuredHeight);\n                    }\n                }\n\n                if (this.eclMegaMenuFeatured) {\n                    featuredHeight2 = this.eclMegaMenuFeatured.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 = this.eclMegaMenuMega && this.eclMegaMenuInfo && !this.isLarge ? \n                    height + infoPanelHeight :  height;\n                if (this.wrapperStyleHeight > availableHeight) this.wrapperStyleHeight = availableHeight;\n                if (this.eclMegaMenuMega && this.isLarge) {\n                    this.megaMenuMegaStyleHeight.set(height);\n                } else if (this.eclMegaMenuMega && this.eclMegaMenuInfo) {\n                    this.megaMenuMegaStyleHeight.set(this.wrapperStyleHeight - infoPanelHeight);\n                }\n                if (this.eclMegaMenuInfo && this.isLarge) {\n                    this.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                    if (expandedSubItem.megaMenuLevel2) {\n                        expandedSubItem.megaMenuLevel2.nativeElement.style.opacity = '1';\n                    }\n\n                    if (expandedSubItem.eclMegaMenuFeatured) {\n                        if (this.isLarge) {\n                            expandedSubItem.eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = height;\n                        } else {\n                            expandedSubItem.eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = height - infoPanelHeight;\n                        }\n                    }\n                }\n                if (this.eclMegaMenuFeatured) {\n                    if (this.isLarge) {\n                        this.eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = height;\n                    } else {\n                        this.eclMegaMenuFeatured.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                this.isMobileBreakpoint = isMobile;\n                this.isLarge = isLarge;\n                this.resetWrapperStyle();\n            });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -48410,7 +48421,7 @@
         },
         {
             "name": "EclMegaMenuSubitemComponent",
-            "id": "component-EclMegaMenuSubitemComponent-d48b21a4440fd165ea0517b55f1ffe496aaae92014f29e5ad80659ea70cb0e6db676c3cf794362cc6b1212f7f820905add6de37e3f25d405382a11a7f9fb223a",
+            "id": "component-EclMegaMenuSubitemComponent-c3228ca76c7ff0383d6b5e3dde4d61423c308b3eb3685481e47f74cf068d7347eba5a37db2498af325d548d42a7b26ffd0ff021031e6a0c80a9060ee0d41e285",
             "file": "packages/ecl/components/ecl-mega-menu/ecl-mega-menu-subitem/ecl-mega-menu-subitem.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -48956,7 +48967,7 @@
             "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, ContentChild, DOCUMENT, ElementRef, EventEmitter, forwardRef, HostBinding, inject, Input, Output, ViewChild } 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    @Input() buttonId: string;\n    @Input() label = '';\n    /**\n     * If the link redirects to external page. Adds an 'external' icon.\n     */\n    @Input({ transform: booleanAttribute }) isExternal = false;\n    /**\n     * If the link is external, this will be the title of the external icon.\n     */\n    @Input() externalIconTitle: string;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    @Input() routerLink: string | any[] = null;\n    @Input() queryParams: Params | null = null;\n    @Input() queryParamsHandling: QueryParamsHandling = null;\n    @Input() href = '';\n    @Input() target = '';\n    /**\n     * Used for the 'View all' link.\n     */\n    @Input({ transform: booleanAttribute }) isSeeAll = false;\n    /**\n     * Adds custom attributes to an anchor element.\n     */\n    @Input() linkExtraAttributes: { [key: string]: string };\n\n    /**\n     * Wrapper div element of the second level sub-items.\n     */\n    @ViewChild('megaMenuLevel2') megaMenuLevel2: ElementRef;\n    /**\n     * The link element, if it exists. Item can have either link or button.\n     */\n    @ViewChild(EclLinkDirective) subMenuItemLink: EclLinkDirective;\n    /**\n     * The button element, if it exists. Item can have either link or button.\n     */\n    @ViewChild('subMenuItemBtn') subMenuItemBtn: EclButtonComponent;\n\n    /**\n     * The directive of the submenu lits.\n     */\n    @ContentChild(forwardRef(() => EclMegaMenuSublistDirective)) submenu?: EclMegaMenuSublistDirective;\n    /**\n     * The component for the featured items.\n     */\n    @ContentChild(forwardRef(() => EclMegaMenuFeaturedComponent)) eclMegaMenuFeatured: 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            if (this.subMenuItemLink) {\n                eclMegaMenuService.setExtraAttributesForLink(this.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        if (this.subMenuItemLink) {\n            this.subMenuItemLink.onFocus();\n        } else if (this.subMenuItemBtn) {\n            this.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                map(bp => !!(bp?.isMobile || bp?.isTablet)), // xs/sm/md  ( < 996 )\n                distinctUntilChanged(),\n                takeUntil(this.destroy$),\n            )\n            .subscribe((isMobile) => {\n                this.isMobileBreakpoint = isMobile;\n            });\n    }\n}\n",
+            "sourceCode": "import { NgTemplateOutlet } from '@angular/common';\nimport { afterNextRender, booleanAttribute, Component, ContentChild, DOCUMENT, ElementRef, EventEmitter, forwardRef, HostBinding, inject, Input, Output, ViewChild } 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    @Input() buttonId: string;\n    @Input() label = '';\n    /**\n     * If the link redirects to external page. Adds an 'external' icon.\n     */\n    @Input({ transform: booleanAttribute }) isExternal = false;\n    /**\n     * If the link is external, this will be the title of the external icon.\n     */\n    @Input() externalIconTitle: string;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    @Input() routerLink: string | any[] = null;\n    @Input() queryParams: Params | null = null;\n    @Input() queryParamsHandling: QueryParamsHandling = null;\n    @Input() href = '';\n    @Input() target = '';\n    /**\n     * Used for the 'View all' link.\n     */\n    @Input({ transform: booleanAttribute }) isSeeAll = false;\n    /**\n     * Adds custom attributes to an anchor element.\n     */\n    @Input() linkExtraAttributes: { [key: string]: string };\n\n    /**\n     * Wrapper div element of the second level sub-items.\n     */\n    @ViewChild('megaMenuLevel2') megaMenuLevel2: ElementRef;\n    /**\n     * The link element, if it exists. Item can have either link or button.\n     */\n    @ViewChild(EclLinkDirective) subMenuItemLink: EclLinkDirective;\n    /**\n     * The button element, if it exists. Item can have either link or button.\n     */\n    @ViewChild('subMenuItemBtn') subMenuItemBtn: EclButtonComponent;\n\n    /**\n     * The directive of the submenu lits.\n     */\n    @ContentChild(forwardRef(() => EclMegaMenuSublistDirective)) submenu?: EclMegaMenuSublistDirective;\n    /**\n     * The component for the featured items.\n     */\n    @ContentChild(forwardRef(() => EclMegaMenuFeaturedComponent)) eclMegaMenuFeatured: 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            if (this.subMenuItemLink) {\n                eclMegaMenuService.setExtraAttributesForLink(this.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        if (this.subMenuItemLink) {\n            this.subMenuItemLink.onFocus();\n        } else if (this.subMenuItemBtn) {\n            this.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                this.isMobileBreakpoint = isMobile;\n            });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -62400,7 +62411,7 @@
                     }
                 }
             },
-            "templateData": "<ng-content select=\"[eclSiteFooterCoowner]\"></ng-content>\n<div class=\"ecl-site-footer__main\">\n    <div class=\"ecl-container ecl-site-footer__container\">\n        @if(eclThemeService.isEC$ | async) {\n        @if (isCore) {\n        <div class=\"ecl-site-footer__row ecl-site-footer__row--specific\">\n            <div class=\"ecl-site-footer__section ecl-site-footer__section--site-info\"><a\n                    href=\"https://commission.europa.eu/index_{{languageCode}}\" eclLink isInverted variant=\"standalone\"\n                    eclSiteFooterLogoLink>\n                    <picture class=\"ecl-picture ecl-site-footer__picture\"><img class=\"ecl-site-footer__logo-image\"\n                            src=\"assets/images/ecl/logo/negative/logo-ec--{{logoLanguageCode}}.svg\"\n                            alt=\"European Commission\"></picture>\n                </a>\n                <div class=\"ecl-site-footer__description\"><ng-container *ngTemplateOutlet=\"content\"></ng-container>\n                </div>\n            </div>\n            <div eclSiteFooterCore [languageCode]=\"languageCode\"></div>\n        </div>\n        <div eclSiteFooterRowCommon [isCore]=\"isCore\" [languageCode]=\"languageCode\" [a11yStatementRef]=\"a11yStatementRef\"></div>\n        } @else {\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        <div eclSiteFooterRowCommon [isCore]=\"isCore\" [languageCode]=\"languageCode\" [a11yStatementRef]=\"a11yStatementRef\"></div>\n        }\n        }\n        @if(eclThemeService.isEU$ | async) {\n        <ecl-site-footer-fixed-content-eu [isCore]=\"isCore\" [languageCode]=\"languageCode\"\n            [ecLogoLanguageCode]=\"languageCode\" [content]=\"content\" [a11yStatementRef]=\"a11yStatementRef\">\n        </ecl-site-footer-fixed-content-eu>\n        }\n\n        <ng-template #content>\n            <ng-content></ng-content>\n        </ng-template>\n    </div>\n</div>"
+            "templateData": "<ng-content select=\"[eclSiteFooterCoowner]\"></ng-content>\n<div class=\"ecl-site-footer__main\">\n    <div class=\"ecl-container ecl-site-footer__container\">\n        @if(eclThemeService.isEC$ | async) {\n        @if (isCore) {\n        <div class=\"ecl-site-footer__row ecl-site-footer__row--specific\">\n            <div class=\"ecl-site-footer__section ecl-site-footer__section--site-info\"><a\n                    href=\"https://commission.europa.eu/index_{{languageCode}}\" eclLink isInverted variant=\"standalone\"\n                    eclSiteFooterLogoLink>\n                    <picture class=\"ecl-picture ecl-site-footer__picture\"><img class=\"ecl-site-footer__logo-image\"\n                            src=\"assets/images/ecl/logo/ec/negative/logo-ec--{{logoLanguageCode}}.svg\"\n                            alt=\"European Commission\"></picture>\n                </a>\n                <div class=\"ecl-site-footer__description\"><ng-container *ngTemplateOutlet=\"content\"></ng-container>\n                </div>\n            </div>\n            <div eclSiteFooterCore [languageCode]=\"languageCode\"></div>\n        </div>\n        <div eclSiteFooterRowCommon [isCore]=\"isCore\" [languageCode]=\"languageCode\" [a11yStatementRef]=\"a11yStatementRef\"></div>\n        } @else {\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        <div eclSiteFooterRowCommon [isCore]=\"isCore\" [languageCode]=\"languageCode\" [a11yStatementRef]=\"a11yStatementRef\"></div>\n        }\n        }\n        @if(eclThemeService.isEU$ | async) {\n        <ecl-site-footer-fixed-content-eu [isCore]=\"isCore\" [languageCode]=\"languageCode\"\n            [ecLogoLanguageCode]=\"languageCode\" [content]=\"content\" [a11yStatementRef]=\"a11yStatementRef\">\n        </ecl-site-footer-fixed-content-eu>\n        }\n\n        <ng-template #content>\n            <ng-content></ng-content>\n        </ng-template>\n    </div>\n</div>"
         },
         {
             "name": "EclSiteFooterCoownerComponent",
@@ -62921,7 +62932,7 @@
             "extends": [
                 "ECLBaseDirective"
             ],
-            "templateData": "@if(isCore){\n    <div eclSiteFooterRow>\n        <div eclSiteFooterColumn>\n            <div eclSiteFooterSection>\n                <a\n                    eclLink\n                    href=\"https://european-union.europa.eu/index_{{ ecLogoLanguageCode }}\"\n                    variant=\"standalone\"\n                    eclSiteFooterLogoLink\n                    [attr.aria-label]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n                    <picture eclSiteFooterPicture [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n                        <source\n                            srcset=\"./assets/images/ecl/logo/standard-version/positive/logo-eu--{{ ecLogoLanguageCode }}.svg\"\n                            media=\"(min-width: 996px)\" />\n                        <img\n                            eclSiteFooterLogoImage\n                            src=\"./assets/images/ecl/logo/condensed-version/positive/logo-eu--{{ ecLogoLanguageCode }}.svg\"\n                            alt=\"European Union logo\" />\n                    </picture>\n                </a>\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </div>\n        </div>\n\n        <div eclSiteFooterColumn>\n            <div eclSiteFooterSection>\n                <div eclSiteFooterTitle isSeparator>\n                    {{ 'ecl.footer.CONTACT-EU' | translate }}\n                </div>\n                <ul eclSiteFooterList>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.STRATEGY' | translate\"\n                            variant=\"standalone\"\n                            href=\"tel:0080067891011\">\n                            {{ 'ecl.footer.CALL-US' | translate }} 00 800 6 7 8 9 10 11\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.USE-OTHER-TELEPHONE-OPTIONS' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/contact-eu/call-us_{{ languageCode }}\">\n                            {{ 'ecl.footer.USE-OTHER-TELEPHONE-OPTIONS' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.WRITE-TO-US' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/contact-eu/write-us_{{ languageCode }}\">\n                            {{ 'ecl.footer.WRITE-TO-US' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.MEET-US' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/contact-eu/meet-us_{{ languageCode }}\">\n                            {{ 'ecl.footer.MEET-US' | translate }}\n                        </a>\n                    </li>\n                </ul>\n            </div>\n            <div eclSiteFooterSection>\n                <div eclSiteFooterTitle isSeparator>\n                    {{ 'ecl.footer.SOCIAL-MEDIA' | translate }}\n                </div>\n                <ul eclSiteFooterList>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.SEARCH-FOR-EU-SOCIAL-MEDIA' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/contact-eu/social-media-channels_{{ languageCode }}\">\n                            {{ 'ecl.footer.SEARCH-FOR-EU-SOCIAL-MEDIA' | translate }}\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div eclSiteFooterColumn>\n            <div eclSiteFooterSection>\n                <div eclSiteFooterTitle isSeparator>\n                    {{ 'ecl.footer.LEGAL' | translate }}\n                </div>\n                <ul eclSiteFooterList>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.LANGUAGES' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/languages-our-websites_{{ languageCode }}\">\n                            {{ 'ecl.footer.LANGUAGES' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.PRIVACY-POLICY' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/privacy-policy_{{ languageCode }}\">\n                            {{ 'ecl.footer.PRIVACY-POLICY' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.LEGAL-NOTICE' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/legal-notice_{{ languageCode }}\">\n                            {{ 'ecl.footer.LEGAL-NOTICE' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.COOKIES' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/cookies_{{ languageCode }}\">\n                            {{ 'ecl.footer.COOKIES' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.ACCESSIBILITY' | translate\"\n                            variant=\"standalone\"\n                            href=\"{{ a11yStatementRef }}\">\n                            {{ 'ecl.footer.ACCESSIBILITY' | translate }}\n                        </a>\n                    </li>\n                </ul>\n            </div>\n            <div eclSiteFooterSection>\n                <div eclSiteFooterTitle isSeparator>\n                    {{ 'ecl.footer.EU-INSTITUTIONS-AND-BODIES' | translate }}\n                </div>\n                <ul eclSiteFooterList>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.SEARCH-EU-INSTITUTIONS-AND-BODIES' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/institutions-law-budget/institutions-and-bodies/search-all-eu-institutions-and-bodies_{{\n                                languageCode }}\">\n                            {{ 'ecl.footer.SEARCH-EU-INSTITUTIONS-AND-BODIES' | translate }}\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </div>\n}\n@if(!isCore){\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n    <div eclSiteFooterRow>\n        <div eclSiteFooterColumn>\n            <div eclSiteFooterSection>\n                <a\n                    eclLink\n                    href=\"https://european-union.europa.eu/index_{{ ecLogoLanguageCode }}\"\n                    variant=\"standalone\"\n                    class=\"ecl-site-footer__logo-link\"\n                    [attr.aria-label]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n                    <picture eclSiteFooterPicture [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n                        <source\n                            srcset=\"./assets/images/ecl/logo/standard-version/positive/logo-eu--{{ ecLogoLanguageCode }}.svg\"\n                            media=\"(min-width: 996px)\" />\n                        <img\n                            eclSiteFooterLogoImage\n                            src=\"./assets/images/ecl/logo/condensed-version/positive/logo-eu--{{ ecLogoLanguageCode }}.svg\"\n                            alt=\"European Union logo\" />\n                    </picture>\n                </a>\n                <ul eclSiteFooterList>\n                    <li eclSiteFooterListItem>\n                        <a href=\"https://european-union.europa.eu/index_{{ ecLogoLanguageCode }}\" eclLink variant=\"standalone\" class=\"ecl-site-footer__link\">\n                            {{ 'ecl.footer.DISCOVER-MORE-ON' | translate }} europa.eu</a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n\n        <div eclSiteFooterColumn>\n            <div eclSiteFooterSection>\n                <div eclSiteFooterTitle isSeparator>\n                    {{ 'ecl.footer.CONTACT-EU' | translate }}\n                </div>\n                <ul eclSiteFooterList>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.STRATEGY' | translate\"\n                            variant=\"standalone\"\n                            href=\"tel:0080067891011\">\n                            {{ 'ecl.footer.CALL-US' | translate }} 00 800 6 7 8 9 10 11\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.USE-OTHER-TELEPHONE-OPTIONS' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/contact-eu/call-us_{{ languageCode }}\">\n                            {{ 'ecl.footer.USE-OTHER-TELEPHONE-OPTIONS' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.WRITE-TO-US' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/contact-eu/write-us_{{ languageCode }}\">\n                            {{ 'ecl.footer.WRITE-TO-US' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.MEET-US' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/contact-eu/meet-us_{{ languageCode }}\">\n                            {{ 'ecl.footer.MEET-US' | translate }}\n                        </a>\n                    </li>\n                </ul>\n            </div>\n            <div eclSiteFooterSection>\n                <div eclSiteFooterTitle isSeparator>\n                    {{ 'ecl.footer.SOCIAL-MEDIA' | translate }}\n                </div>\n                <ul eclSiteFooterList>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.SEARCH-FOR-EU-SOCIAL-MEDIA' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/contact-eu/social-media-channels_{{ languageCode }}\">\n                            {{ 'ecl.footer.SEARCH-FOR-EU-SOCIAL-MEDIA' | translate }}\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div eclSiteFooterColumn>\n            <div eclSiteFooterSection>\n                <div eclSiteFooterTitle isSeparator>\n                    {{ 'ecl.footer.LEGAL' | translate }}\n                </div>\n                <ul eclSiteFooterList>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.LANGUAGES' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/languages-our-websites_{{ languageCode }}\">\n                            {{ 'ecl.footer.LANGUAGES' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.PRIVACY-POLICY' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/privacy-policy_{{ languageCode }}\">\n                            {{ 'ecl.footer.PRIVACY-POLICY' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.LEGAL-NOTICE' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/legal-notice_{{ languageCode }}\">\n                            {{ 'ecl.footer.LEGAL-NOTICE' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.COOKIES' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/cookies_{{ languageCode }}\">\n                            {{ 'ecl.footer.COOKIES' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.ACCESSIBILITY' | translate\"\n                            variant=\"standalone\"\n                            href=\"{{ a11yStatementRef }}\">\n                            {{ 'ecl.footer.ACCESSIBILITY' | translate }}\n                        </a>\n                    </li>\n                </ul>\n            </div>\n            <div eclSiteFooterSection>\n                <div eclSiteFooterTitle isSeparator>\n                    {{ 'ecl.footer.EU-INSTITUTIONS-AND-BODIES' | translate }}\n                </div>\n                <ul eclSiteFooterList>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.SEARCH-EU-INSTITUTIONS-AND-BODIES' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/institutions-law-budget/institutions-and-bodies/search-all-eu-institutions-and-bodies_{{ languageCode }}\">\n                            {{ 'ecl.footer.SEARCH-EU-INSTITUTIONS-AND-BODIES' | translate }}\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </div>\n}\n"
+            "templateData": "@if(isCore){\n    <div eclSiteFooterRow>\n        <div eclSiteFooterColumn>\n            <div eclSiteFooterSection>\n                <a\n                    eclLink\n                    href=\"https://european-union.europa.eu/index_{{ ecLogoLanguageCode }}\"\n                    variant=\"standalone\"\n                    eclSiteFooterLogoLink\n                    [attr.aria-label]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n                    <picture eclSiteFooterPicture [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n                        <source\n                            srcset=\"./assets/images/ecl/logo/eu/standard-version/positive/logo-eu--{{ ecLogoLanguageCode }}.svg\"\n                            media=\"(min-width: 996px)\" />\n                        <img\n                            eclSiteFooterLogoImage\n                            src=\"./assets/images/ecl/logo/eu/condensed-version/positive/logo-eu--{{ ecLogoLanguageCode }}.svg\"\n                            alt=\"European Union logo\" />\n                    </picture>\n                </a>\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </div>\n        </div>\n\n        <div eclSiteFooterColumn>\n            <div eclSiteFooterSection>\n                <div eclSiteFooterTitle isSeparator>\n                    {{ 'ecl.footer.CONTACT-EU' | translate }}\n                </div>\n                <ul eclSiteFooterList>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.STRATEGY' | translate\"\n                            variant=\"standalone\"\n                            href=\"tel:0080067891011\">\n                            {{ 'ecl.footer.CALL-US' | translate }} 00 800 6 7 8 9 10 11\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.USE-OTHER-TELEPHONE-OPTIONS' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/contact-eu/call-us_{{ languageCode }}\">\n                            {{ 'ecl.footer.USE-OTHER-TELEPHONE-OPTIONS' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.WRITE-TO-US' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/contact-eu/write-us_{{ languageCode }}\">\n                            {{ 'ecl.footer.WRITE-TO-US' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.MEET-US' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/contact-eu/meet-us_{{ languageCode }}\">\n                            {{ 'ecl.footer.MEET-US' | translate }}\n                        </a>\n                    </li>\n                </ul>\n            </div>\n            <div eclSiteFooterSection>\n                <div eclSiteFooterTitle isSeparator>\n                    {{ 'ecl.footer.SOCIAL-MEDIA' | translate }}\n                </div>\n                <ul eclSiteFooterList>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.SEARCH-FOR-EU-SOCIAL-MEDIA' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/contact-eu/social-media-channels_{{ languageCode }}\">\n                            {{ 'ecl.footer.SEARCH-FOR-EU-SOCIAL-MEDIA' | translate }}\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div eclSiteFooterColumn>\n            <div eclSiteFooterSection>\n                <div eclSiteFooterTitle isSeparator>\n                    {{ 'ecl.footer.LEGAL' | translate }}\n                </div>\n                <ul eclSiteFooterList>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.LANGUAGES' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/languages-our-websites_{{ languageCode }}\">\n                            {{ 'ecl.footer.LANGUAGES' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.PRIVACY-POLICY' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/privacy-policy_{{ languageCode }}\">\n                            {{ 'ecl.footer.PRIVACY-POLICY' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.LEGAL-NOTICE' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/legal-notice_{{ languageCode }}\">\n                            {{ 'ecl.footer.LEGAL-NOTICE' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.COOKIES' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/cookies_{{ languageCode }}\">\n                            {{ 'ecl.footer.COOKIES' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.ACCESSIBILITY' | translate\"\n                            variant=\"standalone\"\n                            href=\"{{ a11yStatementRef }}\">\n                            {{ 'ecl.footer.ACCESSIBILITY' | translate }}\n                        </a>\n                    </li>\n                </ul>\n            </div>\n            <div eclSiteFooterSection>\n                <div eclSiteFooterTitle isSeparator>\n                    {{ 'ecl.footer.EU-INSTITUTIONS-AND-BODIES' | translate }}\n                </div>\n                <ul eclSiteFooterList>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.SEARCH-EU-INSTITUTIONS-AND-BODIES' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/institutions-law-budget/institutions-and-bodies/search-all-eu-institutions-and-bodies_{{\n                                languageCode }}\">\n                            {{ 'ecl.footer.SEARCH-EU-INSTITUTIONS-AND-BODIES' | translate }}\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </div>\n}\n@if(!isCore){\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n    <div eclSiteFooterRow>\n        <div eclSiteFooterColumn>\n            <div eclSiteFooterSection>\n                <a\n                    eclLink\n                    href=\"https://european-union.europa.eu/index_{{ ecLogoLanguageCode }}\"\n                    variant=\"standalone\"\n                    class=\"ecl-site-footer__logo-link\"\n                    [attr.aria-label]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n                    <picture eclSiteFooterPicture [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n                        <source\n                            srcset=\"./assets/images/ecl/logo/eu/standard-version/positive/logo-eu--{{ ecLogoLanguageCode }}.svg\"\n                            media=\"(min-width: 996px)\" />\n                        <img\n                            eclSiteFooterLogoImage\n                            src=\"./assets/images/ecl/logo/eu/condensed-version/positive/logo-eu--{{ ecLogoLanguageCode }}.svg\"\n                            alt=\"European Union logo\" />\n                    </picture>\n                </a>\n                <ul eclSiteFooterList>\n                    <li eclSiteFooterListItem>\n                        <a href=\"https://european-union.europa.eu/index_{{ ecLogoLanguageCode }}\" eclLink variant=\"standalone\" class=\"ecl-site-footer__link\">\n                            {{ 'ecl.footer.DISCOVER-MORE-ON' | translate }} europa.eu</a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n\n        <div eclSiteFooterColumn>\n            <div eclSiteFooterSection>\n                <div eclSiteFooterTitle isSeparator>\n                    {{ 'ecl.footer.CONTACT-EU' | translate }}\n                </div>\n                <ul eclSiteFooterList>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.STRATEGY' | translate\"\n                            variant=\"standalone\"\n                            href=\"tel:0080067891011\">\n                            {{ 'ecl.footer.CALL-US' | translate }} 00 800 6 7 8 9 10 11\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.USE-OTHER-TELEPHONE-OPTIONS' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/contact-eu/call-us_{{ languageCode }}\">\n                            {{ 'ecl.footer.USE-OTHER-TELEPHONE-OPTIONS' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.WRITE-TO-US' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/contact-eu/write-us_{{ languageCode }}\">\n                            {{ 'ecl.footer.WRITE-TO-US' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.MEET-US' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/contact-eu/meet-us_{{ languageCode }}\">\n                            {{ 'ecl.footer.MEET-US' | translate }}\n                        </a>\n                    </li>\n                </ul>\n            </div>\n            <div eclSiteFooterSection>\n                <div eclSiteFooterTitle isSeparator>\n                    {{ 'ecl.footer.SOCIAL-MEDIA' | translate }}\n                </div>\n                <ul eclSiteFooterList>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.SEARCH-FOR-EU-SOCIAL-MEDIA' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/contact-eu/social-media-channels_{{ languageCode }}\">\n                            {{ 'ecl.footer.SEARCH-FOR-EU-SOCIAL-MEDIA' | translate }}\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div eclSiteFooterColumn>\n            <div eclSiteFooterSection>\n                <div eclSiteFooterTitle isSeparator>\n                    {{ 'ecl.footer.LEGAL' | translate }}\n                </div>\n                <ul eclSiteFooterList>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.LANGUAGES' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/languages-our-websites_{{ languageCode }}\">\n                            {{ 'ecl.footer.LANGUAGES' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.PRIVACY-POLICY' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/privacy-policy_{{ languageCode }}\">\n                            {{ 'ecl.footer.PRIVACY-POLICY' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.LEGAL-NOTICE' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/legal-notice_{{ languageCode }}\">\n                            {{ 'ecl.footer.LEGAL-NOTICE' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.COOKIES' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/cookies_{{ languageCode }}\">\n                            {{ 'ecl.footer.COOKIES' | translate }}\n                        </a>\n                    </li>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.ACCESSIBILITY' | translate\"\n                            variant=\"standalone\"\n                            href=\"{{ a11yStatementRef }}\">\n                            {{ 'ecl.footer.ACCESSIBILITY' | translate }}\n                        </a>\n                    </li>\n                </ul>\n            </div>\n            <div eclSiteFooterSection>\n                <div eclSiteFooterTitle isSeparator>\n                    {{ 'ecl.footer.EU-INSTITUTIONS-AND-BODIES' | translate }}\n                </div>\n                <ul eclSiteFooterList>\n                    <li eclSiteFooterListItem>\n                        <a\n                            eclLink\n                            eclSiteFooterLink\n                            [attr.aria-label]=\"'ecl.footer.SEARCH-EU-INSTITUTIONS-AND-BODIES' | translate\"\n                            variant=\"standalone\"\n                            href=\"https://european-union.europa.eu/institutions-law-budget/institutions-and-bodies/search-all-eu-institutions-and-bodies_{{ languageCode }}\">\n                            {{ 'ecl.footer.SEARCH-EU-INSTITUTIONS-AND-BODIES' | translate }}\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </div>\n}\n"
         },
         {
             "name": "EclSiteFooterRowCommonComponent",
@@ -63126,7 +63137,7 @@
                     }
                 }
             },
-            "templateData": "<div class=\"ecl-site-footer__section ecl-site-footer__section--common\">\n    @if (!isCore) {\n    <a href=\"https://commission.europa.eu/index_{{languageCode}}\"\n        class=\"ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__logo-link\">\n        <picture class=\"ecl-picture ecl-site-footer__picture\"><img class=\"ecl-site-footer__logo-image\"\n                src=\"assets/images/ecl/logo/negative/logo-ec--{{logoLanguageCode}}.svg\" alt=\"European Commission\">\n        </picture>\n    </a>\n    <div class=\"ecl-site-footer__extra-links-container\">\n        <ecl-social-media-follow description=\"{{'ecl.footer.FOLLOW-EUROPEAN-COMMISSION' | translate}}\"\n            class=\"ecl-social-media-follow--description_inline ecl-site-footer__social-media\">\n            <ecl-social-media-follow-item icon=\"mastodon\" href=\"https://ec.social-network.europa.eu/@EUCommission\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"linkedin\" href=\"https://www.linkedin.com/company/european-commission\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"bluesky\" href=\"https://bsky.app/profile/ec.europa.eu\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"facebook\" href=\"https://www.facebook.com/EuropeanCommission\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"youtube\" href=\"https://www.youtube.com/user/eutube\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"chain\"\n                href=\"https://european-union.europa.eu/contact-eu/social-media-channels_{{languageCode}}\"\n                isInverted></ecl-social-media-follow-item>\n        </ecl-social-media-follow>\n        <ul eclSiteFooterList isInline>\n            <li eclSiteFooterListItem><a\n                href=\"https://commission.europa.eu/about-european-commission/contact_{{languageCode}}\"\n                class=\"ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link\">{{ 'ecl.footer.CONTACT' | translate }}</a></li>\n        </ul>\n    </div>\n    } @else {\n    <ecl-social-media-follow description=\"{{'ecl.footer.FOLLOW-US' | translate}}\"\n            class=\"ecl-social-media-follow--description_inline ecl-site-footer__social-media\">\n            <ecl-social-media-follow-item icon=\"mastodon\" href=\"https://ec.social-network.europa.eu/@EUCommission\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"linkedin\" href=\"https://www.linkedin.com/company/european-commission\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"bluesky\" href=\"https://bsky.app/profile/ec.europa.eu\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"facebook\" href=\"https://www.facebook.com/EuropeanCommission\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"youtube\" href=\"https://www.youtube.com/user/eutube\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"chain\"\n                href=\"https://european-union.europa.eu/contact-eu/social-media-channels_{{languageCode}}\"\n                isInverted></ecl-social-media-follow-item>\n    </ecl-social-media-follow>\n    }\n    <ul eclSiteFooterList isInline>\n        <li eclSiteFooterListItem><a\n                href=\"https://commission.europa.eu/legal-notice/vulnerability-disclosure-policy_{{languageCode}}\"\n                eclLink isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.REPORT-IT-VULNERABILITY' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/languages-our-websites_{{languageCode}}\" eclLink\n                isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.LANGUAGES' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/cookies_{{languageCode}}\" eclLink isInverted\n                variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.COOKIES' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/privacy-policy_{{languageCode}}\" eclLink\n                isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.PRIVACY-POLICY' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/legal-notice_{{languageCode}}\" eclLink\n                isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.LEGAL-NOTICE' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"{{ a11yStatementRef }}\"\n                eclLink isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.ACCESSIBILITY' | translate }}</a></li>\n    </ul>\n</div>"
+            "templateData": "<div class=\"ecl-site-footer__section ecl-site-footer__section--common\">\n    @if (!isCore) {\n    <a href=\"https://commission.europa.eu/index_{{languageCode}}\"\n        class=\"ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__logo-link\">\n        <picture class=\"ecl-picture ecl-site-footer__picture\"><img class=\"ecl-site-footer__logo-image\"\n                src=\"assets/images/ecl/logo/ec/negative/logo-ec--{{logoLanguageCode}}.svg\" alt=\"European Commission\">\n        </picture>\n    </a>\n    <div class=\"ecl-site-footer__extra-links-container\">\n        <ecl-social-media-follow description=\"{{'ecl.footer.FOLLOW-EUROPEAN-COMMISSION' | translate}}\"\n            class=\"ecl-social-media-follow--description_inline ecl-site-footer__social-media\">\n            <ecl-social-media-follow-item icon=\"mastodon\" href=\"https://ec.social-network.europa.eu/@EUCommission\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"linkedin\" href=\"https://www.linkedin.com/company/european-commission\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"bluesky\" href=\"https://bsky.app/profile/ec.europa.eu\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"facebook\" href=\"https://www.facebook.com/EuropeanCommission\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"youtube\" href=\"https://www.youtube.com/user/eutube\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"chain\"\n                href=\"https://european-union.europa.eu/contact-eu/social-media-channels_{{languageCode}}\"\n                isInverted></ecl-social-media-follow-item>\n        </ecl-social-media-follow>\n        <ul eclSiteFooterList isInline>\n            <li eclSiteFooterListItem><a\n                href=\"https://commission.europa.eu/about-european-commission/contact_{{languageCode}}\"\n                class=\"ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link\">{{ 'ecl.footer.CONTACT' | translate }}</a></li>\n        </ul>\n    </div>\n    } @else {\n    <ecl-social-media-follow description=\"{{'ecl.footer.FOLLOW-US' | translate}}\"\n            class=\"ecl-social-media-follow--description_inline ecl-site-footer__social-media\">\n            <ecl-social-media-follow-item icon=\"mastodon\" href=\"https://ec.social-network.europa.eu/@EUCommission\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"linkedin\" href=\"https://www.linkedin.com/company/european-commission\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"bluesky\" href=\"https://bsky.app/profile/ec.europa.eu\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"facebook\" href=\"https://www.facebook.com/EuropeanCommission\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"youtube\" href=\"https://www.youtube.com/user/eutube\"\n                isInverted></ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"chain\"\n                href=\"https://european-union.europa.eu/contact-eu/social-media-channels_{{languageCode}}\"\n                isInverted></ecl-social-media-follow-item>\n    </ecl-social-media-follow>\n    }\n    <ul eclSiteFooterList isInline>\n        <li eclSiteFooterListItem><a\n                href=\"https://commission.europa.eu/legal-notice/vulnerability-disclosure-policy_{{languageCode}}\"\n                eclLink isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.REPORT-IT-VULNERABILITY' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/languages-our-websites_{{languageCode}}\" eclLink\n                isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.LANGUAGES' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/cookies_{{languageCode}}\" eclLink isInverted\n                variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.COOKIES' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/privacy-policy_{{languageCode}}\" eclLink\n                isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.PRIVACY-POLICY' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/legal-notice_{{languageCode}}\" eclLink\n                isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.LEGAL-NOTICE' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"{{ a11yStatementRef }}\"\n                eclLink isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.ACCESSIBILITY' | translate }}</a></li>\n    </ul>\n</div>"
         },
         {
             "name": "EclSiteHeaderActionComponent",
@@ -63959,7 +63970,7 @@
                     }
                 }
             },
-            "templateData": "<div class=\"ecl-site-header__background\">\n    <div class=\"ecl-site-header__header\" #siteHeaderHeader>\n        <div class=\"ecl-site-header__container ecl-container\">\n            <div #topContainer class=\"ecl-site-header__top\">\n                @if(hasCustomLink()) {\n                    <ng-content select=\"[eclSiteHeaderLink]\"></ng-content>\n                } @else {\n                <a eclLink variant=\"standalone\" class=\"ecl-site-header__logo-link\"\n                    href=\"https://commission.europa.eu/index_{{ languageCode }}\" (click)=\"onECLogoClick($event)\"\n                    [attr.aria-label]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\"\n                    style=\"display: flex; align-items: center; position: relative;\">\n                    <ng-content select=\"[eclSiteHeaderEnvironment]\" media=\"(min-width: 1140px)\"></ng-content>\n\n                    @if (eclThemeService.isEC$ | async) {\n                        <picture eclSiteHeaderPicture\n                                 [attr.title]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n                            <source\n                                srcset=\"./assets/images/ecl/logo/positive/logo-ec--{{ partOfLogoName }}.svg\"\n                                media=\"(min-width: 415px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n                                 src=\"./assets/images/ecl/logo/logo-ec--mute.svg\"\n                                 [attr.alt]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\" />\n                        </picture>\n                    }\n                    @if (eclThemeService.isEU$ | async) {\n                        <picture eclSiteHeaderPicture\n                                 [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n                            <source\n                                srcset=\"./assets/images/ecl/logo/standard-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n                                media=\"(min-width: 415px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n                                 src=\"./assets/images/ecl/logo/condensed-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n                                 alt=\"European Union\" />\n                        </picture>\n                    }\n                </a>\n                }\n                <ng-content select=\"ecl-site-header-action\"></ng-content>\n            </div>\n        </div>\n    </div>\n    <ng-content select=\"ecl-site-header-notification\"></ng-content>\n</div>\n\n\n<ng-content select=\"ecl-site-header-banner-top\"></ng-content>\n@if (siteName) {\n    <div class=\"ecl-site-header__banner\" #bannerHeader [class.ecl-site-header__site-name--mobile-only]=\"isSiteNameMobileOnly\">\n        <div class=\"ecl-container\">\n            <div class=\"ecl-site-header__site-name\">{{ siteName }}</div>\n            <ng-content select=\"[eclSiteHeaderCta]\"></ng-content>\n        </div>\n    </div>\n}\n\n<ng-content select=\"ecl-menu\"></ng-content>\n<ng-content select=\"[eclMegaMenu]\"></ng-content>\n"
+            "templateData": "<div class=\"ecl-site-header__background\">\n    <div class=\"ecl-site-header__header\" #siteHeaderHeader>\n        <div class=\"ecl-site-header__container ecl-container\">\n            <div #topContainer class=\"ecl-site-header__top\">\n                @if(hasCustomLink()) {\n                    <ng-content select=\"[eclSiteHeaderLink]\"></ng-content>\n                } @else {\n                <a eclLink variant=\"standalone\" class=\"ecl-site-header__logo-link\"\n                    href=\"https://commission.europa.eu/index_{{ languageCode }}\" (click)=\"onECLogoClick($event)\"\n                    [attr.aria-label]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\"\n                    style=\"display: flex; align-items: center; position: relative;\">\n                    <ng-content select=\"[eclSiteHeaderEnvironment]\" media=\"(min-width: 1140px)\"></ng-content>\n\n                    @if (eclThemeService.isEC$ | async) {\n                        <picture eclSiteHeaderPicture\n                                 [attr.title]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n                            <source\n                                srcset=\"./assets/images/ecl/logo/ec/positive/logo-ec--{{ partOfLogoName }}.svg\"\n                                media=\"(min-width: 415px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n                                 src=\"./assets/images/ecl/logo/ec/logo-ec--mute.svg\"\n                                 [attr.alt]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\" />\n                        </picture>\n                    }\n                    @if (eclThemeService.isEU$ | async) {\n                        <picture eclSiteHeaderPicture\n                                 [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n                            <source\n                                srcset=\"./assets/images/ecl/logo/eu/standard-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n                                media=\"(min-width: 415px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n                                 src=\"./assets/images/ecl/logo/eu/condensed-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n                                 alt=\"European Union\" />\n                        </picture>\n                    }\n                </a>\n                }\n                <ng-content select=\"ecl-site-header-action\"></ng-content>\n            </div>\n        </div>\n    </div>\n    <ng-content select=\"ecl-site-header-notification\"></ng-content>\n</div>\n\n\n<ng-content select=\"ecl-site-header-banner-top\"></ng-content>\n@if (siteName) {\n    <div class=\"ecl-site-header__banner\" #bannerHeader [class.ecl-site-header__site-name--mobile-only]=\"isSiteNameMobileOnly\">\n        <div class=\"ecl-container\">\n            <div class=\"ecl-site-header__site-name\">{{ siteName }}</div>\n            <ng-content select=\"[eclSiteHeaderCta]\"></ng-content>\n        </div>\n    </div>\n}\n\n<ng-content select=\"ecl-menu\"></ng-content>\n<ng-content select=\"[eclMegaMenu]\"></ng-content>\n"
         },
         {
             "name": "EclSiteHeaderCustomActionComponent",
@@ -66792,7 +66803,7 @@
                 "AfterViewInit",
                 "OnDestroy"
             ],
-            "templateData": "<a\n    #searchLink\n    href=\"#\"\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__search-toggle\"\n    data-ecl-search-toggle=\"true\"\n    aria-controls=\"search-form-id\"\n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form\n    [style]=\"{'--ecl-search-arrow-position': searchArrowPosition}\"\n    (searchEvent)=\"onSearch($event)\"\n    [placeholder]=\"searchInputPlaceholder\"\n    (ngModelChange)=\"onModelChange($event)\"\n    [(ngModel)]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n"
+            "templateData": "<a\n    #searchLink\n    href=\"#\"\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__search-toggle ecl-button--neutral\"\n    data-ecl-search-toggle=\"true\"\n    aria-controls=\"search-form-id\"\n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form\n    [style]=\"{'--ecl-search-arrow-position': searchArrowPosition}\"\n    (searchEvent)=\"onSearch($event)\"\n    [placeholder]=\"searchInputPlaceholder\"\n    (ngModelChange)=\"onModelChange($event)\"\n    [(ngModel)]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n"
         },
         {
             "name": "EclSocialMediaFollowComponent",