@eui/ecl 22.0.0-alpha.3 → 22.0.0-alpha.5

package/docs/json/documentation.json

@@ -5407,13 +5407,13 @@
         },
         {
             "name": "EclInpageNavigationSectionEnterEvent",
-            "id": "class-EclInpageNavigationSectionEnterEvent-218decdcd6a7c68437e5d7e1d602b3cd8612271e9c1069d063d5d1f05e7f6c61f23a6fb4404b9d14cd21d0f249849eacc4c32a956fb3054803a25ed4469f0623",
+            "id": "class-EclInpageNavigationSectionEnterEvent-5daafc90fdb4dbac03101fb1ec926edaec22dde8c7ba4699dcece0f2c2d48f01b9c51ed69bb59e72fd63be3a46eae2803257a7e8309d6a6dc7f5932d3148a469",
             "file": "packages/ecl/components/ecl-inpage-navigation/ecl-inpage-navigation.component.ts",
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';\nimport { CdkScrollable, ScrollDispatcher, ViewportRuler } from '@angular/cdk/scrolling';\nimport { AfterViewInit, ChangeDetectorRef, Component, DOCUMENT, DoCheck, ElementRef, IterableDiffer, IterableDiffers, NgZone, OnDestroy, OnInit, PLATFORM_ID, afterNextRender, inject, numberAttribute, output, input, viewChild, contentChildren, contentChild } from '@angular/core';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_STICKY_CONTAINER } from '@eui/ecl/components/ecl-sticky-container';\nimport { ECLBaseDirective, EclBaseEvent, EclRtlService, EclThemeService } from '@eui/ecl/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { EclInpageNavigationItemComponent } from './ecl-inpage-navigation-item.component';\nimport { EclInpageNavigationListDirective } from './ecl-inpage-navigation-list.directive';\nimport { EclInpageNavigationService } from './services/ecl-inpage-navigation.service';\nimport { isPlatformBrowser } from '@angular/common';\n\nexport class EclInpageNavigationSectionEnterEvent extends EclBaseEvent {\n    constructor(public sectionId: string) {\n        super();\n    }\n}\n\n/**\n * The in-page navigation is a vertical menu containing (anchored) links to H2-headings on long content pages.\n * It gives the user an overview of the page contents and has a fixed position (does not move while scrolling) at either the left\n * side of a page on desktop or top-bar on mobile. This component helps users scan of the page quickly contents and may potentially\n * reduce vertical scrolling, allowing users to easily jump straight to the segment of the page.\n */\n@Component({\n    selector: 'ecl-inpage-navigation',\n    templateUrl: './ecl-inpage-navigation.component.html',\n    imports: [TranslatePipe, ...EUI_ECL_STICKY_CONTAINER, ...EUI_ECL_ICON],\n    styles: [\n        `\n            @media (min-width: 996px) {\n                .ecl-inpage-navigation__list {\n                    display: block !important;\n                }\n            }\n        `,\n    ],\n})\nexport class EclInpageNavigationComponent extends ECLBaseDirective implements OnInit, AfterViewInit, OnDestroy, DoCheck {\n    eclThemeService = inject(EclThemeService);\n\n    readonly eclTitle = input<string>(undefined);\n    /**\n     * Used to calculate component's position.\n     */\n    readonly marginTop = input<number>(undefined);\n    readonly marginBottom = input<number>(undefined);\n    /**\n     * Sets the offset from the top of the page (for example if there is a toolbar or header). Used to calculate scrolling behaviour.\n     */\n    readonly offsetTop = input<number, unknown>(undefined, { transform: numberAttribute });\n    readonly togglerButton = viewChild<ElementRef<HTMLButtonElement>>('togglerButton');\n    readonly toggleWrapper = viewChild<ElementRef<HTMLDivElement>>('toggleWrapper');\n    readonly navTittle = viewChild<ElementRef<HTMLDivElement>>('navTittle');\n    /**\n     * This event will be emitted, when onscroll a new section becomes active.\n     */\n    readonly sectionEnter = output<EclInpageNavigationSectionEnterEvent>();\n\n    readonly eclNavigationLinkItems = contentChildren(EclInpageNavigationItemComponent, { descendants: true });\n    readonly eclNavigationList = contentChild(EclInpageNavigationListDirective);\n\n    /**\n     * Used for the mobile view, where user can select a section from the dropdown.\n     */\n    isButtonExpanded = false;\n    currentSectionElement: HTMLElement | null = null;\n    public isRtl = false;\n    public listMaxHeight: number;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private differ: IterableDiffer<EclInpageNavigationItemComponent>;\n    private isMobileBreakpoint = false;\n    private MIN_DISTANCE_TOP = 10;\n    private readonly ICON_SIZE_EC_THEME = '2xs';\n    private readonly ICON_SIZE_EU_THEME = 's';\n    private readonly TABLET_BREAKPOINT = 996;\n    private intersectionObserver: IntersectionObserver;\n    private eclRtlService = inject(EclRtlService);\n    private differs = inject(IterableDiffers);\n    private scrollDispatcher: ScrollDispatcher = inject(ScrollDispatcher);\n    private zone = inject(NgZone);\n    private cdkBreakpointObserver = inject(BreakpointObserver);\n    private viewportRuler = inject(ViewportRuler);\n    private eclInpageNavigationService = inject(EclInpageNavigationService);\n    private cdr = inject(ChangeDetectorRef);\n    private readonly platformId = inject(PLATFORM_ID);\n    private readonly doc = inject(DOCUMENT);\n    private readonly win = this.doc.defaultView; // Window | null\n    private readonly isBrowser = isPlatformBrowser(this.platformId);\n\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.zone.run(() => this.setListHeight());\n        });\n    }\n\n    ngOnInit(): void {\n        this.handleRtlChangeState();\n    }\n\n    ngAfterViewInit() {\n        if (!this.isBrowser) return;\n\n        this.subscribeToCDKScrollEvent();\n        this.observeBreakpointChanges();\n        this.viewportRuler.change(300)\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(() => this.zone.run(() => this.setListHeight()));\n\n        const togglerButton = this.togglerButton();\n        if (typeof IntersectionObserver !== 'undefined' && togglerButton?.nativeElement) {\n            this.intersectionObserver = new IntersectionObserver(() => this.setListHeight());\n            this.intersectionObserver.observe(togglerButton.nativeElement);\n        }\n    }\n\n    get hasNavigationList(): boolean {\n        return !!this.eclNavigationList();\n    }\n\n    get currentNavigationLinkItem(): EclInpageNavigationItemComponent {\n        return this.eclNavigationLinkItems().find((item) => item.sectionElement === this.currentSectionElement);\n    }\n\n    /**\n     * the size of the arrow-down icon, used in mobile view. There are different sizes for EC and EU themes.\n     */\n    get sizeIcon(): string {\n        if (this.eclThemeService.isECTheme()) {\n            return this.ICON_SIZE_EC_THEME;\n        } else {\n            return this.ICON_SIZE_EU_THEME;\n        }\n    }\n\n    get hasActiveSection(): boolean {\n        return !!this.currentSectionElement;\n    }\n\n    ngDoCheck(): void {\n        const diff = this.differ.diff(this.eclNavigationLinkItems());\n        if (diff) {\n            diff.forEachItem((item) => {\n                this.connectItemEvents(item.item);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n        const togglerButton = this.togglerButton();\n        if (this.intersectionObserver && togglerButton?.nativeElement) {\n            this.intersectionObserver.unobserve(togglerButton.nativeElement);\n            this.intersectionObserver.disconnect();\n        }\n    }\n\n    /**\n     * On mobile view - handle the dropdown toggle.\n     */\n    onExpandButtonClick(): void {\n        this.isButtonExpanded = !this.isButtonExpanded;\n        this.eclInpageNavigationService.eclInpageNavigationToggle(this.isButtonExpanded);\n    }\n\n    /**\n     * Dropdown keyboard navigation on mobile view.\n     * @param evt\n     */\n    onExpandButtonKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case 'Tab':\n                this.onExpandButtonTab(evt);\n                break;\n            case 'ArrowDown':\n                this.onExpandButtonArrowDown(evt);\n                break;\n            default:\n                break;\n        }\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            this.isRtl = rtlState;\n        });\n    }\n\n    /**\n     * Set the height of the list with the navigation items in px. So in case the full list cannot be displayed, a scroll will appear.\n     */\n    private setListHeight(): void {\n        if (!this.isBrowser) return;\n        const eclNavigationList = this.eclNavigationList();\n        if (!eclNavigationList) return;\n        if (!this.win) return;\n\n        const viewportHeight = this.win.innerHeight;\n        const viewportWidth = this.win.innerWidth;\n        let topPosition = 0;\n\n        if (viewportWidth < this.TABLET_BREAKPOINT) {\n            const toggleWrapper = this.toggleWrapper()?.nativeElement;\n            if (toggleWrapper) {\n                const styles = this.win.getComputedStyle(toggleWrapper);\n                topPosition =\n                    toggleWrapper.getBoundingClientRect().bottom +\n                    parseFloat(styles.marginBottom || '0');\n            }\n        } else if (this.eclTitle()) {\n            const titleEl = this.navTittle()?.nativeElement;\n            if (titleEl) topPosition = titleEl.getBoundingClientRect().bottom;\n        } else {\n            const listEl = eclNavigationList?.el?.nativeElement;\n            if (listEl) topPosition = listEl.getBoundingClientRect().top;\n        }\n\n        const availableSpace = viewportHeight - topPosition;\n        if (availableSpace > 0) {\n            this.listMaxHeight = availableSpace;\n            eclNavigationList.maxHeight.set(this.listMaxHeight);\n        }\n    }\n\n    private onExpandButtonArrowDown(evt: Event): void {\n        evt.preventDefault();\n        this.isButtonExpanded = true;\n        this.eclNavigationLinkItems().at(0).onFocus();\n    }\n\n    private onExpandButtonTab(evt: Event): void {\n        if ((evt as KeyboardEvent).shiftKey) {\n            evt.preventDefault();\n            this.eclNavigationLinkItems().at(this.eclNavigationLinkItems().length - 1).onFocus();\n        }\n    }\n\n    private connectItemEvents(item: EclInpageNavigationItemComponent): void {\n        item.itemArrowDown.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemArrowDown(item);\n        });\n\n        item.itemArrowUp.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemArrowUp(item);\n        });\n\n        item.itemTab.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onItemTab(item, evt);\n        });\n\n        item.itemEnter.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemEnter(item);\n        });\n\n        item.itemClick.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.selectNavigationItem(item.sectionElement);\n            if (item.sectionElement) {\n                item.sectionElement.scrollIntoView();\n                item.sectionElement.focus();\n            }\n            this.isButtonExpanded = false;\n        });\n    }\n\n    private onItemEnter(item: EclInpageNavigationItemComponent): void {\n        this.selectNavigationItem(item.sectionElement);\n        if (item.sectionElement) {\n            item.sectionElement.scrollIntoView();\n            if (item.sectionElement.tabIndex === -1) {\n                item.sectionElement.tabIndex = 0;\n                item.sectionElement.focus();\n                item.sectionElement.tabIndex = -1;\n            }\n        }\n        this.isButtonExpanded = false;\n    }\n\n    private onItemArrowDown(item: EclInpageNavigationItemComponent): void {\n        const index = this.eclNavigationLinkItems().indexOf(item);\n        const eclNavigationLinkItems = this.eclNavigationLinkItems();\n        if (index !== eclNavigationLinkItems.length - 1) {\n            eclNavigationLinkItems.at(index + 1).onFocus();\n        }\n    }\n\n    private onItemArrowUp(item: EclInpageNavigationItemComponent): void {\n        const index = this.eclNavigationLinkItems().indexOf(item);\n        if (index !== 0) {\n            this.eclNavigationLinkItems().at(index - 1).onFocus();\n        } else {\n            const togglerButton = this.togglerButton();\n            if (this.isMobileBreakpoint && togglerButton) {\n                this.isButtonExpanded = false;\n                togglerButton.nativeElement.focus();\n            }\n        }\n    }\n\n    private onItemTab(item: EclInpageNavigationItemComponent, evt: Event): void {\n        if (this.isMobileBreakpoint) {\n            if (!(evt as KeyboardEvent).shiftKey) {\n                const index = this.eclNavigationLinkItems().indexOf(item);\n                if (index === this.eclNavigationLinkItems().length - 1) {\n                    evt.preventDefault();\n                    this.togglerButton().nativeElement.focus();\n                }\n            }\n        }\n    }\n\n    private subscribeToCDKScrollEvent(): void {\n        if (!this.isBrowser) return;\n\n        this.scrollDispatcher\n            .scrolled()\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(() => {\n                this.zone.run(() => {\n                    const ids = this.eclNavigationLinkItems().map((item) => item.sectionId());\n\n                    const sectionElements = ids\n                        .map((id) => this.doc.querySelector<HTMLElement>(`#${id}`))\n                        .filter((el): el is HTMLElement => !!el);\n\n                    this.handleNavigationLinksHighlight(sectionElements);\n                    this.setListHeight();\n                });\n            });\n    }\n\n    private selectNavigationItem(itemElement: HTMLElement): void {\n        this.eclNavigationLinkItems().forEach((it) => {\n            it.isActive.set(it.sectionElement === itemElement);\n        });\n        this.cdr.markForCheck();\n    }\n\n    private handleNavigationLinksHighlight(sectionElements: HTMLElement[]): void {\n        const currentSectionElement = this.findActiveSectionElement(sectionElements);\n\n        if (currentSectionElement !== this.currentSectionElement) {\n            this.currentSectionElement = currentSectionElement ?? undefined as HTMLElement | null;\n            if (currentSectionElement) this.selectNavigationItem(currentSectionElement);\n\n            const sectionId = this.currentNavigationLinkItem?.sectionId();\n            this.sectionEnter.emit(new EclInpageNavigationSectionEnterEvent(sectionId));\n        }\n    }\n\n    private findActiveSectionElement(sectionElements: HTMLElement[]): HTMLElement | null {\n        if (!this.isBrowser || !this.win) return null;\n\n        let currentSection: HTMLElement | null = null;\n        const offset = this.MIN_DISTANCE_TOP + (this.offsetTop() ?? 0);\n\n        const isNearBottom =\n            this.win.innerHeight + this.win.scrollY >=\n            this.doc.documentElement.scrollHeight - 10;\n\n        for (const sectionElement of sectionElements) {\n            const rect = sectionElement.getBoundingClientRect();\n            const isAboveOffset = rect.top <= offset;\n            const isVisibleInViewport = rect.top < this.win.innerHeight;\n\n            if (isAboveOffset || (isVisibleInViewport && isNearBottom)) {\n                currentSection = sectionElement;\n            }\n        }\n\n        return currentSection;\n    }\n\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe([Breakpoints.Handset, Breakpoints.Tablet, Breakpoints.Small])\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((result) => {\n                this.isMobileBreakpoint = result.matches;\n            });\n    }\n}\n",
+            "sourceCode": "import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';\nimport { ScrollDispatcher, ViewportRuler } from '@angular/cdk/scrolling';\nimport { isPlatformBrowser } from '@angular/common';\nimport { AfterViewInit, ChangeDetectorRef, Component, DOCUMENT, DoCheck, ElementRef, IterableDiffer, IterableDiffers, NgZone, OnDestroy, OnInit, PLATFORM_ID, afterNextRender, contentChild, contentChildren, inject, input, numberAttribute, output, viewChild } from '@angular/core';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_STICKY_CONTAINER } from '@eui/ecl/components/ecl-sticky-container';\nimport { ECLBaseDirective, EclBaseEvent, EclRtlService, EclThemeService } from '@eui/ecl/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { EclInpageNavigationItemComponent } from './ecl-inpage-navigation-item.component';\nimport { EclInpageNavigationListDirective } from './ecl-inpage-navigation-list.directive';\nimport { EclInpageNavigationService } from './services/ecl-inpage-navigation.service';\n\nexport class EclInpageNavigationSectionEnterEvent extends EclBaseEvent {\n    constructor(public sectionId: string) {\n        super();\n    }\n}\n\n/**\n * The in-page navigation is a vertical menu containing (anchored) links to H2-headings on long content pages.\n * It gives the user an overview of the page contents and has a fixed position (does not move while scrolling) at either the left\n * side of a page on desktop or top-bar on mobile. This component helps users scan of the page quickly contents and may potentially\n * reduce vertical scrolling, allowing users to easily jump straight to the segment of the page.\n */\n@Component({\n    selector: 'ecl-inpage-navigation',\n    templateUrl: './ecl-inpage-navigation.component.html',\n    imports: [TranslatePipe, ...EUI_ECL_STICKY_CONTAINER, ...EUI_ECL_ICON],\n    styles: [\n        `\n            @media (min-width: 996px) {\n                .ecl-inpage-navigation__list {\n                    display: block !important;\n                }\n            }\n        `,\n    ],\n})\nexport class EclInpageNavigationComponent extends ECLBaseDirective implements OnInit, AfterViewInit, OnDestroy, DoCheck {\n    eclThemeService = inject(EclThemeService);\n\n    readonly eclTitle = input<string>(undefined);\n    /**\n     * Used to calculate component's position.\n     */\n    readonly marginTop = input<number>(undefined);\n    readonly marginBottom = input<number>(undefined);\n    /**\n     * Sets the offset from the top of the page (for example if there is a toolbar or header). Used to calculate scrolling behaviour.\n     */\n    readonly offsetTop = input<number, unknown>(undefined, { transform: numberAttribute });\n    readonly togglerButton = viewChild<ElementRef<HTMLButtonElement>>('togglerButton');\n    readonly toggleWrapper = viewChild<ElementRef<HTMLDivElement>>('toggleWrapper');\n    readonly navTittle = viewChild<ElementRef<HTMLDivElement>>('navTittle');\n    /**\n     * This event will be emitted, when onscroll a new section becomes active.\n     */\n    readonly sectionEnter = output<EclInpageNavigationSectionEnterEvent>();\n\n    readonly eclNavigationLinkItems = contentChildren(EclInpageNavigationItemComponent, { descendants: true });\n    readonly eclNavigationList = contentChild(EclInpageNavigationListDirective);\n\n    /**\n     * Used for the mobile view, where user can select a section from the dropdown.\n     */\n    isButtonExpanded = false;\n    currentSectionElement: HTMLElement | null = null;\n    public isRtl = false;\n    public listMaxHeight: number;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private differ: IterableDiffer<EclInpageNavigationItemComponent>;\n    private isMobileBreakpoint = false;\n    private MIN_DISTANCE_TOP = 10;\n    /**\n     * Extra spacing (px) kept between the sticky toggler and the target heading when scrolling to a section on mobile,\n     * so the heading is not flush against the toggler. Mirrors the spacing buffer used by the vanilla ECL\n     * `scroll-margin-top` rule (trigger height + spacing).\n     */\n    private readonly MOBILE_SCROLL_SPACING = 16;\n    private readonly ICON_SIZE_EC_THEME = '2xs';\n    private readonly ICON_SIZE_EU_THEME = 's';\n    private readonly TABLET_BREAKPOINT = 996;\n    private intersectionObserver: IntersectionObserver;\n    private eclRtlService = inject(EclRtlService);\n    private differs = inject(IterableDiffers);\n    private scrollDispatcher: ScrollDispatcher = inject(ScrollDispatcher);\n    private zone = inject(NgZone);\n    private cdkBreakpointObserver = inject(BreakpointObserver);\n    private viewportRuler = inject(ViewportRuler);\n    private eclInpageNavigationService = inject(EclInpageNavigationService);\n    private cdr = inject(ChangeDetectorRef);\n    private readonly platformId = inject(PLATFORM_ID);\n    private readonly doc = inject(DOCUMENT);\n    private readonly win = this.doc.defaultView; // Window | null\n    private readonly isBrowser = isPlatformBrowser(this.platformId);\n\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.zone.run(() => this.setListHeight());\n        });\n    }\n\n    ngOnInit(): void {\n        this.handleRtlChangeState();\n    }\n\n    ngAfterViewInit() {\n        if (!this.isBrowser) return;\n\n        this.subscribeToCDKScrollEvent();\n        this.observeBreakpointChanges();\n        this.viewportRuler.change(300)\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(() => this.zone.run(() => this.setListHeight()));\n\n        const togglerButton = this.togglerButton();\n        if (typeof IntersectionObserver !== 'undefined' && togglerButton?.nativeElement) {\n            this.intersectionObserver = new IntersectionObserver(() => this.setListHeight());\n            this.intersectionObserver.observe(togglerButton.nativeElement);\n        }\n    }\n\n    get hasNavigationList(): boolean {\n        return !!this.eclNavigationList();\n    }\n\n    get currentNavigationLinkItem(): EclInpageNavigationItemComponent {\n        return this.eclNavigationLinkItems().find((item) => item.sectionElement === this.currentSectionElement);\n    }\n\n    /**\n     * the size of the arrow-down icon, used in mobile view. There are different sizes for EC and EU themes.\n     */\n    get sizeIcon(): string {\n        if (this.eclThemeService.isECTheme()) {\n            return this.ICON_SIZE_EC_THEME;\n        } else {\n            return this.ICON_SIZE_EU_THEME;\n        }\n    }\n\n    get hasActiveSection(): boolean {\n        return !!this.currentSectionElement;\n    }\n\n    ngDoCheck(): void {\n        const diff = this.differ.diff(this.eclNavigationLinkItems());\n        if (diff) {\n            diff.forEachItem((item) => {\n                this.connectItemEvents(item.item);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n        const togglerButton = this.togglerButton();\n        if (this.intersectionObserver && togglerButton?.nativeElement) {\n            this.intersectionObserver.unobserve(togglerButton.nativeElement);\n            this.intersectionObserver.disconnect();\n        }\n    }\n\n    /**\n     * On mobile view - handle the dropdown toggle.\n     */\n    onExpandButtonClick(): void {\n        this.setButtonExpanded(!this.isButtonExpanded);\n    }\n\n    /**\n     * Single entry point for changing the dropdown expanded state. Keeps the local flag (used for the button's\n     * aria-expanded) and the shared service state (that drives the list's visibility class) in sync.\n     */\n    private setButtonExpanded(isExpanded: boolean): void {\n        this.isButtonExpanded = isExpanded;\n        this.eclInpageNavigationService.eclInpageNavigationToggle(isExpanded);\n    }\n\n    /**\n     * Dropdown keyboard navigation on mobile view.\n     * @param evt\n     */\n    onExpandButtonKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case 'Tab':\n                this.onExpandButtonTab(evt);\n                break;\n            case 'ArrowDown':\n                this.onExpandButtonArrowDown(evt);\n                break;\n            default:\n                break;\n        }\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            this.isRtl = rtlState;\n        });\n    }\n\n    /**\n     * Set the height of the list with the navigation items in px. So in case the full list cannot be displayed, a scroll will appear.\n     */\n    private setListHeight(): void {\n        if (!this.isBrowser) return;\n        const eclNavigationList = this.eclNavigationList();\n        if (!eclNavigationList) return;\n        if (!this.win) return;\n\n        const viewportHeight = this.win.innerHeight;\n        const viewportWidth = this.win.innerWidth;\n        let topPosition = 0;\n\n        if (viewportWidth < this.TABLET_BREAKPOINT) {\n            const toggleWrapper = this.toggleWrapper()?.nativeElement;\n            if (toggleWrapper) {\n                const styles = this.win.getComputedStyle(toggleWrapper);\n                topPosition =\n                    toggleWrapper.getBoundingClientRect().bottom +\n                    parseFloat(styles.marginBottom || '0');\n            }\n        } else if (this.eclTitle()) {\n            const titleEl = this.navTittle()?.nativeElement;\n            if (titleEl) topPosition = titleEl.getBoundingClientRect().bottom;\n        } else {\n            const listEl = eclNavigationList?.el?.nativeElement;\n            if (listEl) topPosition = listEl.getBoundingClientRect().top;\n        }\n\n        const availableSpace = viewportHeight - topPosition;\n        if (availableSpace > 0) {\n            this.listMaxHeight = availableSpace;\n            eclNavigationList.maxHeight.set(this.listMaxHeight);\n        }\n    }\n\n    private onExpandButtonArrowDown(evt: Event): void {\n        evt.preventDefault();\n        this.setButtonExpanded(true);\n        this.eclNavigationLinkItems().at(0).onFocus();\n    }\n\n    private onExpandButtonTab(evt: Event): void {\n        if ((evt as KeyboardEvent).shiftKey) {\n            evt.preventDefault();\n            this.eclNavigationLinkItems().at(this.eclNavigationLinkItems().length - 1).onFocus();\n        }\n    }\n\n    private connectItemEvents(item: EclInpageNavigationItemComponent): void {\n        item.itemArrowDown.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemArrowDown(item);\n        });\n\n        item.itemArrowUp.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemArrowUp(item);\n        });\n\n        item.itemTab.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onItemTab(item, evt);\n        });\n\n        item.itemEnter.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemEnter(item);\n        });\n\n        item.itemClick.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.selectNavigationItem(item.sectionElement);\n            if (item.sectionElement) {\n                this.scrollToSection(item.sectionElement);\n                item.sectionElement.focus();\n            }\n            this.setButtonExpanded(false);\n        });\n    }\n\n    private onItemEnter(item: EclInpageNavigationItemComponent): void {\n        this.selectNavigationItem(item.sectionElement);\n        if (item.sectionElement) {\n            this.scrollToSection(item.sectionElement);\n            if (item.sectionElement.tabIndex === -1) {\n                item.sectionElement.tabIndex = 0;\n                item.sectionElement.focus();\n                item.sectionElement.tabIndex = -1;\n            }\n        }\n        this.setButtonExpanded(false);\n    }\n\n    /**\n     * Scrolls the target section into view. On desktop this is a plain scrollIntoView() (unchanged behaviour). On\n     * mobile the in-page navigation toggler is sticky at the top, so a top-aligned scroll would hide the heading\n     * underneath it; we therefore set `scroll-margin-top` on the target (sticky toggler height + spacing buffer) and\n     * let scrollIntoView() honour it. Using scroll-margin-top instead of a manual window.scrollTo() keeps this working\n     * regardless of which element is the actual scroll container (window or a nested scrollable wrapper).\n     */\n    private scrollToSection(sectionElement: HTMLElement): void {\n        if (!this.isBrowser) return;\n        const offset = this.getMobileScrollOffset();\n        sectionElement.style.scrollMarginTop = offset > 0 ? `${offset}px` : '';\n        sectionElement.scrollIntoView();\n    }\n\n    /**\n     * The offset (px) applied on mobile so that a scrolled-to heading clears the sticky toggler: the toggler height\n     * plus a spacing buffer. Returns 0 on desktop (no sticky toggler). Shared by the scroll logic and the scroll-spy\n     * so the heading lands exactly where the spy expects it, keeping the active item in sync after a click.\n     */\n    private getMobileScrollOffset(): number {\n        if (!this.isMobileBreakpoint) return 0;\n        const toggleWrapper = this.toggleWrapper()?.nativeElement;\n        if (!toggleWrapper) return 0;\n        return toggleWrapper.getBoundingClientRect().height + this.MOBILE_SCROLL_SPACING;\n    }\n\n    private onItemArrowDown(item: EclInpageNavigationItemComponent): void {\n        const index = this.eclNavigationLinkItems().indexOf(item);\n        const eclNavigationLinkItems = this.eclNavigationLinkItems();\n        if (index !== eclNavigationLinkItems.length - 1) {\n            eclNavigationLinkItems.at(index + 1).onFocus();\n        }\n    }\n\n    private onItemArrowUp(item: EclInpageNavigationItemComponent): void {\n        const index = this.eclNavigationLinkItems().indexOf(item);\n        if (index !== 0) {\n            this.eclNavigationLinkItems().at(index - 1).onFocus();\n        } else {\n            const togglerButton = this.togglerButton();\n            if (this.isMobileBreakpoint && togglerButton) {\n                this.setButtonExpanded(false);\n                togglerButton.nativeElement.focus();\n            }\n        }\n    }\n\n    private onItemTab(item: EclInpageNavigationItemComponent, evt: Event): void {\n        if (this.isMobileBreakpoint) {\n            if (!(evt as KeyboardEvent).shiftKey) {\n                const index = this.eclNavigationLinkItems().indexOf(item);\n                if (index === this.eclNavigationLinkItems().length - 1) {\n                    evt.preventDefault();\n                    this.togglerButton().nativeElement.focus();\n                }\n            }\n        }\n    }\n\n    private subscribeToCDKScrollEvent(): void {\n        if (!this.isBrowser) return;\n\n        this.scrollDispatcher\n            .scrolled()\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(() => {\n                this.zone.run(() => {\n                    const ids = this.eclNavigationLinkItems().map((item) => item.sectionId());\n\n                    const sectionElements = ids\n                        .map((id) => this.doc.querySelector<HTMLElement>(`#${id}`))\n                        .filter((el): el is HTMLElement => !!el);\n\n                    this.handleNavigationLinksHighlight(sectionElements);\n                    this.setListHeight();\n                });\n            });\n    }\n\n    private selectNavigationItem(itemElement: HTMLElement): void {\n        this.eclNavigationLinkItems().forEach((it) => {\n            it.isActive.set(it.sectionElement === itemElement);\n        });\n        this.cdr.markForCheck();\n    }\n\n    private handleNavigationLinksHighlight(sectionElements: HTMLElement[]): void {\n        const currentSectionElement = this.findActiveSectionElement(sectionElements);\n\n        if (currentSectionElement !== this.currentSectionElement) {\n            this.currentSectionElement = currentSectionElement ?? undefined as HTMLElement | null;\n            if (currentSectionElement) this.selectNavigationItem(currentSectionElement);\n\n            const sectionId = this.currentNavigationLinkItem?.sectionId();\n            this.sectionEnter.emit(new EclInpageNavigationSectionEnterEvent(sectionId));\n        }\n    }\n\n    private findActiveSectionElement(sectionElements: HTMLElement[]): HTMLElement | null {\n        if (!this.isBrowser || !this.win) return null;\n\n        let currentSection: HTMLElement | null = null;\n        // On mobile the heading is scrolled to sit just below the sticky toggler, so the spy must use that same\n        // offset; otherwise it would highlight the previous section. On desktop keep the original threshold.\n        const offset = this.isMobileBreakpoint\n            ? this.getMobileScrollOffset()\n            : this.MIN_DISTANCE_TOP + (this.offsetTop() ?? 0);\n\n        const isNearBottom =\n            this.win.innerHeight + this.win.scrollY >=\n            this.doc.documentElement.scrollHeight - 10;\n\n        for (const sectionElement of sectionElements) {\n            const rect = sectionElement.getBoundingClientRect();\n            const isAboveOffset = rect.top <= offset;\n            const isVisibleInViewport = rect.top < this.win.innerHeight;\n\n            if (isAboveOffset || (isVisibleInViewport && isNearBottom)) {\n                currentSection = sectionElement;\n            }\n        }\n\n        return currentSection;\n    }\n\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe([Breakpoints.Handset, Breakpoints.Tablet, Breakpoints.Small])\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((result) => {\n                this.isMobileBreakpoint = result.matches;\n            });\n    }\n}\n",
             "displayName": "EclInpageNavigationSectionEnterEvent",
             "constructorObj": {
                 "name": "constructor",
@@ -8457,13 +8457,13 @@
         },
         {
             "name": "EclSocialMediaFollowItemClickEvent",
-            "id": "class-EclSocialMediaFollowItemClickEvent-ed2164f85b7d64f8d8fac99dbd85b9daf46f2c0f6adb24b7cdeb865f195926ad0eee3b826c46f06ca87a06f0c0c5b7d1a996ce2d1ed4d4882aec79e8595572d9",
+            "id": "class-EclSocialMediaFollowItemClickEvent-be2bc74a52d7b183206e23fa9c6edd0706816decad401fed2ccd0e2788dead5b1d6dbb066556634b97683220c7111e50c45fd911c2cccbe1ec6738847a5e6fdf",
             "file": "packages/ecl/components/ecl-social-media-follow/ecl-social-media-follow-item.component.ts",
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import { booleanAttribute, Component, HostBinding, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclBaseEvent } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { RouterLink, RouterLinkWithHref } from '@angular/router';\n\nexport class EclSocialMediaFollowItemClickEvent extends EclBaseEvent {}\n\n@Component({\n    selector: 'ecl-social-media-follow-item',\n    templateUrl: './ecl-social-media-follow-item.component.html',\n    imports: [...EUI_ECL_ICON, ...EUI_ECL_LINK, NgTemplateOutlet, RouterLink, RouterLinkWithHref],\n})\nexport class EclSocialMediaFollowItemComponent extends ECLBaseDirective {\n    readonly isInverted = input<false, unknown>(undefined, { transform: (booleanAttribute) as any });\n    @HostBinding('attr.role') role = 'listitem';\n    icon = input<string>();\n    iconSet = input<string>('social-media');\n    readonly href = input('');\n    readonly routerLink = input('');\n    readonly target = input<string>(undefined);\n    readonly size = input('m');\n    readonly extraAttributes = input<{\n        name: string;\n        value?: string | null;\n    }[]>(undefined);\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-social-media-follow__item')].join(' ').trim();\n    }\n\n    readonly itemClick = output<EclSocialMediaFollowItemClickEvent>();\n\n    onItemClick(evt): void {\n        this.itemClick.emit(new EclSocialMediaFollowItemClickEvent());\n        if (!this.href() && !this.routerLink()) {\n            evt.preventDefault();\n        }\n    }\n}\n",
+            "sourceCode": "import { booleanAttribute, Component, inject, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclBaseEvent } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EclSocialMediaFollowComponent } from './ecl-social-media-follow.component';\n\nexport class EclSocialMediaFollowItemClickEvent extends EclBaseEvent {}\n\n@Component({\n    selector: 'ecl-social-media-follow-item',\n    templateUrl: './ecl-social-media-follow-item.component.html',\n    imports: [...EUI_ECL_ICON, ...EUI_ECL_LINK, NgTemplateOutlet, RouterLink, RouterLinkWithHref],\n    host: {\n        role: 'listitem',\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSocialMediaFollowItemComponent extends ECLBaseDirective {\n    readonly isInverted = input<false, unknown>(undefined, { transform: (booleanAttribute) as any });\n    icon = input<string>();\n    iconSet = input<string>('social-media');\n    readonly href = input('');\n    readonly routerLink = input('');\n    readonly target = input<string>(undefined);\n    readonly size = input('m');\n    readonly extraAttributes = input<{\n        name: string;\n        value?: string | null;\n    }[]>(undefined);\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-social-media-follow__item')].join(' ').trim();\n    }\n\n    readonly itemClick = output<EclSocialMediaFollowItemClickEvent>();\n\n    private parent = inject(EclSocialMediaFollowComponent);\n\n    get isIconOnly(): boolean {\n        return this.parent?.isIconOnly() ?? false;\n    }\n\n    onItemClick(evt: Event): void {\n        this.itemClick.emit(new EclSocialMediaFollowItemClickEvent());\n        if (!this.href() && !this.routerLink()) {\n            evt.preventDefault();\n        }\n    }\n}\n",
             "displayName": "EclSocialMediaFollowItemClickEvent",
             "inputsClass": [],
             "outputsClass": [],
@@ -13303,6 +13303,11 @@
                         "name": "EclSiteHeaderLoginComponent",
                         "type": "component",
                         "description": "Component for login/logout as part of the harmonised site header. Emits events when user logs in and when user opens the login dropdown."
+                    },
+                    {
+                        "name": "EclSiteHeaderSearchComponent",
+                        "type": "component",
+                        "description": "This component builds the search box in the ecl-site-header component. Adds specific style and functionality, emits events on search and..."
                     }
                 ],
                 "outgoing": [
@@ -18033,12 +18038,12 @@
         },
         {
             "name": "EclDividerDirective",
-            "id": "directive-EclDividerDirective-c778b06e120fcce619744cfa04f716e96292edd208d2f30586c08dd8bb0fd21977eb58df39a4cb143ed317c9f950661ac4df476d3edef5ba48c7eb61b03e8306",
+            "id": "directive-EclDividerDirective-8335ebb38f5612ec5a4bdd37aaf55f0c013e9f290749f7439a0096a4f3937f6a4c099fbcce510063095dd7b3e20f60dd44158063f777adace5876c68fd0d79a2",
             "file": "packages/ecl/components/ecl-divider/ecl-divider.directive.ts",
             "type": "directive",
             "description": "<p>Directive that applies ECL styling for horizontal separators (<code>&lt;hr&gt;</code> elements).\nAdds the <code>ecl-separator</code> CSS class to the host element.</p>\n",
             "rawdescription": "\n\nDirective that applies ECL styling for horizontal separators (`<hr>` elements).\nAdds the `ecl-separator` CSS class to the host element.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that applies ECL styling for horizontal separators (`<hr>` elements).\n * Adds the `ecl-separator` CSS class to the host element.\n */\n@Directive({\n    selector: 'hr[eclDivider]',\n})\nexport class EclDividerDirective extends ECLBaseDirective {\n    /**\n     * Binds the `ecl-separator` CSS class to the host `<hr>` element.\n     */\n    @HostBinding('class.ecl-separator') hasClass = true;\n}\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that applies ECL styling for horizontal separators (`<hr>` elements).\n * Adds the `ecl-separator` CSS class to the host element.\n */\n@Directive({\n    selector: 'hr[eclDivider]',\n    host: {\n        'class': 'ecl-separator',\n    },\n})\nexport class EclDividerDirective extends ECLBaseDirective {}\n",
             "selector": "hr[eclDivider]",
             "providers": [],
             "hostDirectives": [],
@@ -18091,46 +18096,9 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-separator",
-                    "actualName": "hasClass",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nBinds the `ecl-separator` CSS class to the host `<hr>` element.\n",
-                    "description": "<p>Binds the <code>ecl-separator</code> CSS class to the host <code>&lt;hr&gt;</code> element.</p>\n",
-                    "line": 15,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "hasClass",
-                    "coverageIgnore": false,
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "<p>Binds the <code>ecl-separator</code> CSS class to the host <code>&lt;hr&gt;</code> element.</p>\n",
-                    "line": 15,
-                    "rawdescription": "\n\nBinds the `ecl-separator` CSS class to the host `<hr>` element.\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-separator'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "getCssClasses",
@@ -18174,8 +18142,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 256,
+                    "pos": 94,
+                    "end": 243,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -20015,12 +19983,12 @@
         },
         {
             "name": "EclFileUploadDirective",
-            "id": "directive-EclFileUploadDirective-ab4f4f00663d81a0de751fab623c1532e0975d0a2c42ab3bb154b1263b7768a309b6952ed30ffc3738d459cd9b8a9ff9c03116db9478028a973efb08ca561e3b",
+            "id": "directive-EclFileUploadDirective-e28d4f19a66fd44eef8fcedc12262c782b173d90e27797eeea41f8f899542b6533c65168a06323331cadeddfdb9014b71d049cb7081b707006db8e611359d24a",
             "file": "packages/ecl/components/ecl-file-upload/ecl-file-upload.directive.ts",
             "type": "directive",
             "description": "<p>Directive that enhances a native input[type=file] with ECL-compliant styling and behavior.\nSupports multiple file selection, dynamic file list rendering, translations and validation state.</p>\n",
             "rawdescription": "\n\nDirective that enhances a native input[type=file] with ECL-compliant styling and behavior.\nSupports multiple file selection, dynamic file list rendering, translations and validation state.\n",
-            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport {\n    Directive,\n    DoCheck,\n    ElementRef,\n    HostBinding,\n    HostListener,\n    inject,\n    OnDestroy,\n    OnInit,\n    PLATFORM_ID,\n    Renderer2,\n    booleanAttribute,\n    output,\n    input,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { TranslateService } from '@ngx-translate/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclFileUpload } from './models/ecl-file-upload.model';\nimport { EclFileUploadFileSelectedEvent } from './events/ecl-file-upload-file-selected.event';\n\n/**\n * Directive that enhances a native input[type=file] with ECL-compliant styling and behavior.\n * Supports multiple file selection, dynamic file list rendering, translations and validation state.\n */\n@Directive({\n    selector: '[eclFileUpload]',\n})\nexport class EclFileUploadDirective extends ECLBaseDirective implements OnInit, OnDestroy, DoCheck {\n    protected ngControl = inject(NgControl, { optional: true, self: true });\n\n    /**\n     * Variant of the component's appearance. Currently unused. Default: `'default'`.\n     */\n    readonly variant = input('default');\n\n    /**\n     * Marks the component as invalid (if not using Angular form validation).\n     */\n    readonly isInvalid = input(false, { transform: booleanAttribute });\n\n    /**\n     * ID attribute applied to the native file input.\n     */\n    @HostBinding('attr.id')\n    readonly id = input<string>(undefined);\n\n    /**\n     * Whether the component is disabled.\n     */\n    @HostBinding('attr.disabled')\n    readonly disabled = input<boolean, unknown>(undefined, { transform: booleanAttribute });\n\n    /**\n     * Allows selecting multiple files.\n     */\n    @HostBinding('attr.multiple')\n    readonly multiple = input<boolean, unknown>(undefined, { transform: booleanAttribute });\n\n    /**\n     * Event emitted when files are selected.\n     */\n    readonly filesSelected = output<EclFileUploadFileSelectedEvent>();\n\n    /**\n     * Host binding to define input type as 'file'.\n     */\n    @HostBinding('attr.type') type = 'file';\n\n    private fileListEl: HTMLElement;\n\n    private files: EclFileUpload[] = [];\n    private buttonEl: HTMLElement;\n    private labelEl: HTMLElement;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private readonly SPAN_BUTTON_CONVERSION_CLASSES = ['ecl-button', 'ecl-button--primary', 'ecl-file-upload__button'];\n    private el = inject(ElementRef);\n    private translate = inject(TranslateService);\n    private renderer = inject(Renderer2);\n    private platformId = inject(PLATFORM_ID);\n\n    /**\n     * Applies the base `ecl-file-upload` class to the host element.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-file-upload')].join(' ').trim();\n    }\n\n    /**\n     * Returns `true` if component should be displayed as invalid.\n     * Prioritizes Angular form control status over `isInvalid` input.\n     */\n    @HostBinding('class.ecl-file-upload--invalid')\n    get invalidState(): boolean {\n        if (this.ngControl) {\n            return this.ngControl.status === 'INVALID' && this.ngControl.touched;\n        } else {\n            return this.isInvalid();\n        }\n    }\n\n    /**\n     * Initializes component structure and translation subscription (browser-only).\n     */\n    ngOnInit(): void {\n        if (isPlatformBrowser(this.platformId)) {\n            this.createDOMStructure();\n            this.handleTranslations();\n        }\n    }\n\n    /**\n     * Clean up resources and RxJS subscriptions.\n     */\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * Checks component state during change detection to toggle the disabled state of internal elements.\n     */\n    ngDoCheck(): void {\n        if (this.disabled()) {\n            this.renderer.setAttribute(this.buttonEl, 'disabled', 'true');\n        } else {\n            this.renderer.removeAttribute(this.buttonEl, 'disabled');\n        }\n    }\n\n    /**\n     * Prevents file dialog from opening when component is disabled.\n     * @param evt Click event on the input element.\n     */\n    @HostListener('click', ['$event']) onClick(evt: Event): void {\n        if (this.disabled()) {\n            evt.preventDefault();\n        }\n    }\n\n    /**\n     * Handles file selection and emits a structured file selection event.\n     * @param evt Change event from input.\n     */\n    @HostListener('change', ['$event']) onFilesSelected(evt: Event): void {\n        const inputElement: HTMLInputElement = evt.target as HTMLInputElement;\n        const fileList: FileList = inputElement.files;\n        this.files = this.getFileModels(fileList);\n\n        const fileEvent = new EclFileUploadFileSelectedEvent(this.files);\n        this.filesSelected.emit(fileEvent);\n\n        if (!fileEvent.defaultPrevented) {\n            this.handleTranslations();\n            this.updateListItemsDOM(this.files);\n        }\n    }\n\n    private handleTranslations(): void {\n        const uploadButtonLabelKey = this.geti18nUploadButtonLabelKey();\n\n        this.translate\n            .stream(uploadButtonLabelKey)\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((translation: string) => {\n                if (this.buttonEl) {\n                    this.renderer.setProperty(this.buttonEl, 'textContent', translation);\n                }\n            });\n    }\n\n    private geti18nUploadButtonLabelKey(): string {\n        let key = '';\n\n        if (this.files && this.files.length !== 0) {\n            if (this.multiple()) {\n                key = 'ecl.file-upload.REPLACE-FILES';\n            } else {\n                key = 'ecl.file-upload.REPLACE-FILE';\n            }\n        } else {\n            if (this.multiple()) {\n                key = 'ecl.file-upload.CHOOSE-FILES';\n            } else {\n                key = 'ecl.file-upload.CHOOSE-FILE';\n            }\n        }\n\n        return key;\n    }\n\n    private updateListItemsDOM(files: EclFileUpload[]): void {\n        this.renderer.setProperty(this.fileListEl, 'textContent', '');\n        files.forEach((file) => {\n            const item = this.createFileListItemDOMElement(file);\n            this.renderer.appendChild(this.fileListEl, item);\n        });\n    }\n\n    private createDOMStructure(): void {\n        const labelEl = this.createLabelDOMElement();\n        const hostEl = this.getHostDOMElement();\n        const fileListEl = this.createFileListDOMElement();\n\n        hostEl.insertAdjacentElement('afterend', fileListEl);\n        hostEl.insertAdjacentElement('afterend', labelEl);\n\n        this.fileListEl = fileListEl;\n    }\n\n    private getHostDOMElement(): HTMLInputElement {\n        return this.el.nativeElement;\n    }\n\n    private createLabelDOMElement(): HTMLElement {\n        this.buttonEl = this.renderer.createElement('span');\n        this.addClasses(this.buttonEl, this.SPAN_BUTTON_CONVERSION_CLASSES);\n\n        this.labelEl = this.renderer.createElement('label');\n        this.renderer.setAttribute(this.labelEl, 'for', this.id());\n        this.renderer.addClass(this.labelEl, 'ecl-file-upload__button-container');\n\n        this.renderer.appendChild(this.labelEl, this.buttonEl);\n\n        return this.labelEl;\n    }\n\n    private addClasses(element: HTMLElement, classes: string[] ): void {\n        classes.forEach(className=> this.renderer.addClass(element, className) )\n    }\n\n    private createFileListDOMElement(): HTMLElement {\n        const element = this.renderer.createElement('ul');\n        this.renderer.addClass(element,'ecl-file-upload__list');\n        this.renderer.setAttribute(element,'aria-live','polite');\n\n        return element;\n    }\n\n    private createFileListItemDOMElement(fileUpload: EclFileUpload): HTMLElement {\n        const liElement = this.renderer.createElement('li');\n        this.renderer.addClass(liElement,'ecl-file-upload__item');\n\n        const fileNameElement = this.renderer.createElement('span');\n        const fileName = this.renderer.createText(fileUpload.name);\n        this.renderer.appendChild(fileNameElement, fileName);\n\n        this.renderer.addClass( fileNameElement,'ecl-file-upload__item-name' );\n\n        const fileMetaElement = this.renderer.createElement('span');\n\n        const fileMetaElementText = this.renderer.createText(`(${fileUpload.size} - ${fileUpload.extension})`);\n        this.renderer.appendChild(fileMetaElement, fileMetaElementText);\n        this.renderer.addClass(fileMetaElement, 'ecl-file-upload__item-meta');\n\n        this.renderer.appendChild(liElement, fileNameElement);\n        this.renderer.appendChild(liElement, fileMetaElement);\n\n        return liElement;\n    }\n\n    private getFileModels(fileList: FileList): EclFileUpload[] {\n        return Array.from(fileList).map((f) => ({\n            name: f.name,\n            extension: this.getFilenameExtension(f.name),\n            size: this.formatBytes(f.size),\n        }));\n    }\n\n    private getFilenameExtension(filename: string): string {\n        return filename.split('.').pop();\n    }\n\n    private formatBytes(bytes, decimals = 2): string {\n        if (bytes === 0) {\n            return '0 Bytes';\n        }\n\n        const k = 1024;\n        const dm = decimals < 0 ? 0 : decimals;\n        const sizes = ['Bytes', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n\n        const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n        return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;\n    }\n}\n",
+            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport {\n    Directive,\n    DoCheck,\n    ElementRef,\n    inject,\n    OnDestroy,\n    OnInit,\n    PLATFORM_ID,\n    Renderer2,\n    booleanAttribute,\n    output,\n    input,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { TranslateService } from '@ngx-translate/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclFileUpload } from './models/ecl-file-upload.model';\nimport { EclFileUploadFileSelectedEvent } from './events/ecl-file-upload-file-selected.event';\n\n/**\n * Directive that enhances a native input[type=file] with ECL-compliant styling and behavior.\n * Supports multiple file selection, dynamic file list rendering, translations and validation state.\n */\n@Directive({\n    selector: '[eclFileUpload]',\n    host: {\n        '[attr.type]': 'type',\n        '[attr.id]': 'id()',\n        '[attr.disabled]': 'disabled() ? \"\" : null',\n        '[attr.multiple]': 'multiple() ? \"\" : null',\n        '[class]': 'cssClasses',\n        '[class.ecl-file-upload--invalid]': 'invalidState',\n        '(click)': 'onClick($event)',\n        '(change)': 'onFilesSelected($event)',\n    },\n})\nexport class EclFileUploadDirective extends ECLBaseDirective implements OnInit, OnDestroy, DoCheck {\n    protected ngControl = inject(NgControl, { optional: true, self: true });\n\n    /**\n     * Variant of the component's appearance. Currently unused. Default: `'default'`.\n     */\n    readonly variant = input('default');\n\n    /**\n     * Marks the component as invalid (if not using Angular form validation).\n     */\n    readonly isInvalid = input(false, { transform: booleanAttribute });\n\n    /**\n     * ID attribute applied to the native file input.\n     */\n    readonly id = input<string>(undefined);\n\n    /**\n     * Whether the component is disabled.\n     */\n    readonly disabled = input<boolean, unknown>(undefined, { transform: booleanAttribute });\n\n    /**\n     * Allows selecting multiple files.\n     */\n    readonly multiple = input<boolean, unknown>(undefined, { transform: booleanAttribute });\n\n    /**\n     * Event emitted when files are selected.\n     */\n    readonly filesSelected = output<EclFileUploadFileSelectedEvent>();\n\n    /**\n     * Host binding to define input type as 'file'.\n     */\n    type = 'file';\n\n    private fileListEl: HTMLElement;\n\n    private files: EclFileUpload[] = [];\n    private buttonEl: HTMLElement;\n    private labelEl: HTMLElement;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private readonly SPAN_BUTTON_CONVERSION_CLASSES = ['ecl-button', 'ecl-button--primary', 'ecl-file-upload__button'];\n    private el = inject(ElementRef);\n    private translate = inject(TranslateService);\n    private renderer = inject(Renderer2);\n    private platformId = inject(PLATFORM_ID);\n\n    /**\n     * Applies the base `ecl-file-upload` class to the host element.\n     */\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-file-upload')].join(' ').trim();\n    }\n\n    /**\n     * Returns `true` if component should be displayed as invalid.\n     * Prioritizes Angular form control status over `isInvalid` input.\n     */\n    get invalidState(): boolean {\n        if (this.ngControl) {\n            return this.ngControl.status === 'INVALID' && this.ngControl.touched;\n        } else {\n            return this.isInvalid();\n        }\n    }\n\n    /**\n     * Initializes component structure and translation subscription (browser-only).\n     */\n    ngOnInit(): void {\n        if (isPlatformBrowser(this.platformId)) {\n            this.createDOMStructure();\n            this.handleTranslations();\n        }\n    }\n\n    /**\n     * Clean up resources and RxJS subscriptions.\n     */\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * Checks component state during change detection to toggle the disabled state of internal elements.\n     */\n    ngDoCheck(): void {\n        if (this.disabled()) {\n            this.renderer.setAttribute(this.buttonEl, 'disabled', 'true');\n        } else {\n            this.renderer.removeAttribute(this.buttonEl, 'disabled');\n        }\n    }\n\n    /**\n     * Prevents file dialog from opening when component is disabled.\n     * @param evt Click event on the input element.\n     */\n    onClick(evt: Event): void {\n        if (this.disabled()) {\n            evt.preventDefault();\n        }\n    }\n\n    /**\n     * Handles file selection and emits a structured file selection event.\n     * @param evt Change event from input.\n     */\n    onFilesSelected(evt: Event): void {\n        const inputElement: HTMLInputElement = evt.target as HTMLInputElement;\n        const fileList: FileList = inputElement.files;\n        this.files = this.getFileModels(fileList);\n\n        const fileEvent = new EclFileUploadFileSelectedEvent(this.files);\n        this.filesSelected.emit(fileEvent);\n\n        if (!fileEvent.defaultPrevented) {\n            this.handleTranslations();\n            this.updateListItemsDOM(this.files);\n        }\n    }\n\n    private handleTranslations(): void {\n        const uploadButtonLabelKey = this.geti18nUploadButtonLabelKey();\n\n        this.translate\n            .stream(uploadButtonLabelKey)\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((translation: string) => {\n                if (this.buttonEl) {\n                    this.renderer.setProperty(this.buttonEl, 'textContent', translation);\n                }\n            });\n    }\n\n    private geti18nUploadButtonLabelKey(): string {\n        let key = '';\n\n        if (this.files && this.files.length !== 0) {\n            if (this.multiple()) {\n                key = 'ecl.file-upload.REPLACE-FILES';\n            } else {\n                key = 'ecl.file-upload.REPLACE-FILE';\n            }\n        } else {\n            if (this.multiple()) {\n                key = 'ecl.file-upload.CHOOSE-FILES';\n            } else {\n                key = 'ecl.file-upload.CHOOSE-FILE';\n            }\n        }\n\n        return key;\n    }\n\n    private updateListItemsDOM(files: EclFileUpload[]): void {\n        this.renderer.setProperty(this.fileListEl, 'textContent', '');\n        files.forEach((file) => {\n            const item = this.createFileListItemDOMElement(file);\n            this.renderer.appendChild(this.fileListEl, item);\n        });\n    }\n\n    private createDOMStructure(): void {\n        const labelEl = this.createLabelDOMElement();\n        const hostEl = this.getHostDOMElement();\n        const fileListEl = this.createFileListDOMElement();\n\n        hostEl.insertAdjacentElement('afterend', fileListEl);\n        hostEl.insertAdjacentElement('afterend', labelEl);\n\n        this.fileListEl = fileListEl;\n    }\n\n    private getHostDOMElement(): HTMLInputElement {\n        return this.el.nativeElement;\n    }\n\n    private createLabelDOMElement(): HTMLElement {\n        this.buttonEl = this.renderer.createElement('span');\n        this.addClasses(this.buttonEl, this.SPAN_BUTTON_CONVERSION_CLASSES);\n\n        this.labelEl = this.renderer.createElement('label');\n        this.renderer.setAttribute(this.labelEl, 'for', this.id());\n        this.renderer.addClass(this.labelEl, 'ecl-file-upload__button-container');\n\n        this.renderer.appendChild(this.labelEl, this.buttonEl);\n\n        return this.labelEl;\n    }\n\n    private addClasses(element: HTMLElement, classes: string[] ): void {\n        classes.forEach(className=> this.renderer.addClass(element, className) )\n    }\n\n    private createFileListDOMElement(): HTMLElement {\n        const element = this.renderer.createElement('ul');\n        this.renderer.addClass(element,'ecl-file-upload__list');\n        this.renderer.setAttribute(element,'aria-live','polite');\n\n        return element;\n    }\n\n    private createFileListItemDOMElement(fileUpload: EclFileUpload): HTMLElement {\n        const liElement = this.renderer.createElement('li');\n        this.renderer.addClass(liElement,'ecl-file-upload__item');\n\n        const fileNameElement = this.renderer.createElement('span');\n        const fileName = this.renderer.createText(fileUpload.name);\n        this.renderer.appendChild(fileNameElement, fileName);\n\n        this.renderer.addClass( fileNameElement,'ecl-file-upload__item-name' );\n\n        const fileMetaElement = this.renderer.createElement('span');\n\n        const fileMetaElementText = this.renderer.createText(`(${fileUpload.size} - ${fileUpload.extension})`);\n        this.renderer.appendChild(fileMetaElement, fileMetaElementText);\n        this.renderer.addClass(fileMetaElement, 'ecl-file-upload__item-meta');\n\n        this.renderer.appendChild(liElement, fileNameElement);\n        this.renderer.appendChild(liElement, fileMetaElement);\n\n        return liElement;\n    }\n\n    private getFileModels(fileList: FileList): EclFileUpload[] {\n        return Array.from(fileList).map((f) => ({\n            name: f.name,\n            extension: this.getFilenameExtension(f.name),\n            size: this.formatBytes(f.size),\n        }));\n    }\n\n    private getFilenameExtension(filename: string): string {\n        return filename.split('.').pop();\n    }\n\n    private formatBytes(bytes, decimals = 2): string {\n        if (bytes === 0) {\n            return '0 Bytes';\n        }\n\n        const k = 1024;\n        const dm = decimals < 0 ? 0 : decimals;\n        const sizes = ['Bytes', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n\n        const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n        return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;\n    }\n}\n",
             "selector": "[eclFileUpload]",
             "providers": [],
             "hostDirectives": [],
@@ -20036,16 +20004,9 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether the component is disabled.</p>\n",
-                    "line": 55,
+                    "line": 61,
                     "rawdescription": "\n\nWhether the component is disabled.\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.disabled'"
-                        }
-                    ],
                     "modifierKind": [
-                        171,
                         148
                     ],
                     "required": false
@@ -20060,16 +20021,9 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>ID attribute applied to the native file input.</p>\n",
-                    "line": 49,
+                    "line": 56,
                     "rawdescription": "\n\nID attribute applied to the native file input.\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.id'"
-                        }
-                    ],
                     "modifierKind": [
-                        171,
                         148
                     ],
                     "required": false
@@ -20084,7 +20038,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Marks the component as invalid (if not using Angular form validation).</p>\n",
-                    "line": 43,
+                    "line": 51,
                     "rawdescription": "\n\nMarks the component as invalid (if not using Angular form validation).\n",
                     "modifierKind": [
                         148
@@ -20101,16 +20055,9 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Allows selecting multiple files.</p>\n",
-                    "line": 61,
+                    "line": 66,
                     "rawdescription": "\n\nAllows selecting multiple files.\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.multiple'"
-                        }
-                    ],
                     "modifierKind": [
-                        171,
                         148
                     ],
                     "required": false
@@ -20125,7 +20072,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Variant of the component&#39;s appearance. Currently unused. Default: <code>&#39;default&#39;</code>.</p>\n",
-                    "line": 38,
+                    "line": 46,
                     "rawdescription": "\n\nVariant of the component's appearance. Currently unused. Default: `'default'`.\n",
                     "modifierKind": [
                         148
@@ -20186,7 +20133,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Event emitted when files are selected.</p>\n",
-                    "line": 66,
+                    "line": 71,
                     "rawdescription": "\n\nEvent emitted when files are selected.\n",
                     "modifierKind": [
                         148
@@ -20196,194 +20143,8 @@
             ],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.disabled",
-                    "actualName": "disabled",
-                    "defaultValue": "input<boolean, unknown>(undefined, { transform: booleanAttribute })",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nWhether the component is disabled.\n",
-                    "description": "<p>Whether the component is disabled.</p>\n",
-                    "line": 55,
-                    "type": "any",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.id",
-                    "actualName": "id",
-                    "defaultValue": "input<string>(undefined)",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nID attribute applied to the native file input.\n",
-                    "description": "<p>ID attribute applied to the native file input.</p>\n",
-                    "line": 49,
-                    "type": "any",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.multiple",
-                    "actualName": "multiple",
-                    "defaultValue": "input<boolean, unknown>(undefined, { transform: booleanAttribute })",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nAllows selecting multiple files.\n",
-                    "description": "<p>Allows selecting multiple files.</p>\n",
-                    "line": 61,
-                    "type": "any",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.type",
-                    "actualName": "type",
-                    "defaultValue": "'file'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nHost binding to define input type as 'file'.\n",
-                    "description": "<p>Host binding to define input type as &#39;file&#39;.</p>\n",
-                    "line": 71,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies the base `ecl-file-upload` class to the host element.\n",
-                    "description": "<p>Applies the base <code>ecl-file-upload</code> class to the host element.</p>\n",
-                    "line": 89,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-file-upload--invalid",
-                    "actualName": "invalidState",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nReturns `true` if component should be displayed as invalid.\nPrioritizes Angular form control status over `isInvalid` input.\n",
-                    "description": "<p>Returns <code>true</code> if component should be displayed as invalid.\nPrioritizes Angular form control status over <code>isInvalid</code> input.</p>\n",
-                    "line": 98,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
-            "hostListeners": [
-                {
-                    "coverageIgnore": false,
-                    "name": "change",
-                    "args": [
-                        {
-                            "name": "evt",
-                            "type": "Event",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "argsDecorator": [
-                        "$event"
-                    ],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nHandles file selection and emits a structured file selection event.\n",
-                    "description": "<p>Handles file selection and emits a structured file selection event.</p>\n",
-                    "jsdoctags": [
-                        {
-                            "pos": 4493,
-                            "end": 4534,
-                            "kind": 342,
-                            "id": 0,
-                            "flags": 16842752,
-                            "modifierFlagsCache": 0,
-                            "transformFlags": 0,
-                            "tagName": {
-                                "pos": 4494,
-                                "end": 4499,
-                                "kind": 80,
-                                "id": 0,
-                                "flags": 16842752,
-                                "transformFlags": 0,
-                                "escapedText": "param"
-                            },
-                            "comment": "<p>Change event from input.</p>\n",
-                            "name": {
-                                "pos": 4500,
-                                "end": 4503,
-                                "kind": 80,
-                                "id": 0,
-                                "flags": 16842752,
-                                "transformFlags": 0,
-                                "escapedText": "evt"
-                            },
-                            "isNameFirst": true,
-                            "isBracketed": false
-                        }
-                    ],
-                    "line": 149
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "click",
-                    "args": [
-                        {
-                            "name": "evt",
-                            "type": "Event",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "argsDecorator": [
-                        "$event"
-                    ],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nPrevents file dialog from opening when component is disabled.\n",
-                    "description": "<p>Prevents file dialog from opening when component is disabled.</p>\n",
-                    "jsdoctags": [
-                        {
-                            "pos": 4201,
-                            "end": 4251,
-                            "kind": 342,
-                            "id": 0,
-                            "flags": 16842752,
-                            "modifierFlagsCache": 0,
-                            "transformFlags": 0,
-                            "tagName": {
-                                "pos": 4202,
-                                "end": 4207,
-                                "kind": 80,
-                                "id": 0,
-                                "flags": 16842752,
-                                "transformFlags": 0,
-                                "escapedText": "param"
-                            },
-                            "comment": "<p>Click event on the input element.</p>\n",
-                            "name": {
-                                "pos": 4208,
-                                "end": 4211,
-                                "kind": 80,
-                                "id": 0,
-                                "flags": 16842752,
-                                "transformFlags": 0,
-                                "escapedText": "evt"
-                            },
-                            "isNameFirst": true,
-                            "isBracketed": false
-                        }
-                    ],
-                    "line": 139
-                }
-            ],
+            "hostBindings": [],
+            "hostListeners": [],
             "propertiesClass": [
                 {
                     "name": "ngControl",
@@ -20395,7 +20156,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 33,
+                    "line": 41,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
@@ -20411,17 +20172,8 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Host binding to define input type as &#39;file&#39;.</p>\n",
-                    "line": 71,
-                    "rawdescription": "\n\nHost binding to define input type as 'file'.\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.type'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "line": 76,
+                    "rawdescription": "\n\nHost binding to define input type as 'file'.\n"
                 }
             ],
             "methodsClass": [
@@ -20432,7 +20184,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 127,
+                    "line": 130,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nChecks component state during change detection to toggle the disabled state of internal elements.\n",
@@ -20445,7 +20197,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 119,
+                    "line": 122,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nClean up resources and RxJS subscriptions.\n",
@@ -20458,7 +20210,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 109,
+                    "line": 112,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nInitializes component structure and translation subscription (browser-only).\n",
@@ -20480,25 +20232,16 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 139,
+                    "line": 142,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nPrevents file dialog from opening when component is disabled.\n",
                     "description": "<p>Prevents file dialog from opening when component is disabled.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'click', ['$event']"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ],
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 4208,
-                                "end": 4211,
+                                "pos": 4337,
+                                "end": 4340,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -20511,8 +20254,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 4202,
-                                "end": 4207,
+                                "pos": 4331,
+                                "end": 4336,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -20539,25 +20282,16 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 149,
+                    "line": 152,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles file selection and emits a structured file selection event.\n",
                     "description": "<p>Handles file selection and emits a structured file selection event.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'change', ['$event']"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ],
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 4500,
-                                "end": 4503,
+                                "pos": 4594,
+                                "end": 4597,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -20570,8 +20304,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 4494,
-                                "end": 4499,
+                                "pos": 4588,
+                                "end": 4593,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -20624,8 +20358,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 667,
-                    "end": 869,
+                    "pos": 632,
+                    "end": 834,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -20649,7 +20383,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 89,
+                        "line": 93,
                         "rawdescription": "\n\nApplies the base `ecl-file-upload` class to the host element.\n",
                         "description": "<p>Applies the base <code>ecl-file-upload</code> class to the host element.</p>\n"
                     }
@@ -20660,7 +20394,7 @@
                         "name": "invalidState",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 98,
+                        "line": 101,
                         "rawdescription": "\n\nReturns `true` if component should be displayed as invalid.\nPrioritizes Angular form control status over `isInvalid` input.\n",
                         "description": "<p>Returns <code>true</code> if component should be displayed as invalid.\nPrioritizes Angular form control status over <code>isInvalid</code> input.</p>\n"
                     }
@@ -22870,12 +22604,12 @@
         },
         {
             "name": "EclLinkDirective",
-            "id": "directive-EclLinkDirective-739a62b701c6c8fceceac1560ad0dbc240f3b0b4168c9009ce68f360a71af9549945dc5181e5e24dd52baf85cc6540f26d5614d44ffa294316e0d4d71e65874f",
+            "id": "directive-EclLinkDirective-fb6b45fe7d77a582abd56929a240d6a1418c1ca58d979b7d3c29ff7989887b38145c46f3cd3c8055fcab7abe78119fa333c24d646e16e636785744a886b96932",
             "file": "packages/ecl/components/ecl-link/ecl-link.directive.ts",
             "type": "directive",
             "description": "<p>&#39;eclLink&#39; directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.</p>\n",
             "rawdescription": "\n\n'eclLink' directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.\n",
-            "sourceCode": "import { AfterContentInit, booleanAttribute, ChangeDetectorRef, contentChildren, Directive, ElementRef, HostBinding, inject, input, Renderer2, effect, computed, forwardRef } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * 'eclLink' directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.\n */\n@Directive({\n    selector: '[eclLink]',\n})\nexport class EclLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    el = inject(ElementRef);\n    renderer = inject(Renderer2);\n    cd = inject(ChangeDetectorRef);\n\n    /**\n     * Additional HTML attributes to be set on the link element.\n     * Used e.g. by social-media-follow for passing extra_attributes.\n     */\n    extraAttributes = input<{ name: string; value?: string | null }[] | undefined>();\n\n    /**\n     * Property to style the component as 'inverted' (with dark background). Can be used alone or with 'standalone' variant.\n     */\n    isInverted = input(false, { transform: booleanAttribute });\n\n    /**\n     * Property to style the component if it consist only of an icon.\n     */\n    isIconOnly = input(false, { transform: booleanAttribute });\n\n    /** Adds class for hightlighted link (works only with 'primary' variant)\n     * @deprecated - to be removed in v23. Use variant='primary-highlight', as only primary variant can be highlighted.\n    */\n    isHighlight = input(false, { transform: booleanAttribute });\n\n    /**\n     * @deprecated - will be removed in v21. Deprecated on ECL side.\n     */\n    isNoVisited = input(false, { transform: booleanAttribute });\n\n    isBranded = input(false, { transform: booleanAttribute });\n\n    /**\n     * With 'variant' property user can add some more specific styling to the <a> component.\n     */\n    variant = input<'standalone' | 'primary' | 'secondary' | 'secondary-neutral' | 'primary-neutral' | 'primary-highlight'>();\n\n    eclIconComponents = contentChildren(forwardRef(() => EclIconComponent), { descendants: true });\n\n    constructor() {\n        super();\n        effect(() => {\n            const attrs = this.extraAttributes();\n            if (attrs && attrs.length) {\n                attrs.forEach((attr) => {\n                    if (attr?.name) {\n                        this.el.nativeElement.setAttribute(attr.name, attr.value ?? '');\n                    }\n                });\n            }\n        });\n    }\n\n    @HostBinding('class.ecl-link--inverted')\n    get hostIsInverted(): boolean {\n        return (!this.variant() || this.variant() === 'standalone') && this.isInverted();\n    }\n\n    @HostBinding('class.ecl-link--brand')\n    get hostIsBranded(): boolean {\n        return (!this.variant() || this.variant() === 'standalone') && this.isBranded();\n    }\n\n    @HostBinding('class.ecl-link--icon-only')\n    get hostIsIconOnly(): boolean {\n        return this.isIconOnly();\n    }\n\n    @HostBinding('class.ecl-link--icon')\n    get hasIcon(): boolean {\n        return this._hasIcon();\n    }\n\n    private _hasIcon = computed(() => {\n        return this.eclIconComponents()?.length > 0;\n    });\n\n    /**\n     * Adds speific ECL classes to the <a> component.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        const variantClass = this.variant()\n            ? (this.variant() === 'secondary' && this.isInverted()\n                ? 'ecl-link--secondary-inverted'\n                : `ecl-link--${this.variant()}`)\n            : '';\n\n        return [super.getCssClasses('ecl-link'),\n            variantClass,\n            (this.variant() === 'primary' && this.isHighlight()) ? 'ecl-link--primary-highlight' : '',\n        ].join(' ').trim();\n    }\n\n    ngAfterContentInit(): void {\n        // Add additional class to the child icon, if any.\n        if (this.eclIconComponents()?.length > 0 ) {\n            setTimeout(() => {\n                this.eclIconComponents().forEach((icn) => {\n                    icn.addExtraClass('ecl-link__icon');\n                });\n                this.cd.markForCheck();\n            });\n        }\n    }\n\n    /**\n     * Calls the native focus() method of the default HTML element.\n     */\n    onFocus(): void {\n        this.el.nativeElement.focus();\n    }\n\n    /**\n     * Calls the native click() method of the default HTML element.\n     */\n    onClick(): void {\n        this.el.nativeElement.click();\n    }\n\n    /**\n     * Calls the native blur() method of the default HTML element.\n     */\n    onBlur(): void {\n        this.el.nativeElement.blur();\n    }\n}\n",
+            "sourceCode": "import { booleanAttribute, contentChildren, Directive, ElementRef, HostBinding, inject, input, Renderer2, effect, computed, forwardRef } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * 'eclLink' directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.\n */\n@Directive({\n    selector: '[eclLink]',\n})\nexport class EclLinkDirective extends ECLBaseDirective {\n    el = inject(ElementRef);\n    renderer = inject(Renderer2);\n\n    /**\n     * Additional HTML attributes to be set on the link element.\n     * Used e.g. by social-media-follow for passing extra_attributes.\n     */\n    extraAttributes = input<{ name: string; value?: string | null }[] | undefined>();\n\n    /**\n     * Property to style the component as 'inverted' (with dark background). Can be used alone or with 'standalone' variant.\n     */\n    isInverted = input(false, { transform: booleanAttribute });\n\n    /**\n     * Property to style the component if it consist only of an icon.\n     */\n    isIconOnly = input(false, { transform: booleanAttribute });\n\n    /** Adds class for hightlighted link (works only with 'primary' variant)\n     * @deprecated - to be removed in v23. Use variant='primary-highlight', as only primary variant can be highlighted.\n    */\n    isHighlight = input(false, { transform: booleanAttribute });\n\n    /**\n     * @deprecated - will be removed in v21. Deprecated on ECL side.\n     */\n    isNoVisited = input(false, { transform: booleanAttribute });\n\n    isBranded = input(false, { transform: booleanAttribute });\n\n    /**\n     * With 'variant' property user can add some more specific styling to the <a> component.\n     */\n    variant = input<'standalone' | 'primary' | 'secondary' | 'secondary-neutral' | 'primary-neutral' | 'primary-highlight'>();\n\n    eclIconComponents = contentChildren(forwardRef(() => EclIconComponent), { descendants: true });\n\n    constructor() {\n        super();\n        effect(() => {\n            const attrs = this.extraAttributes();\n            if (attrs && attrs.length) {\n                attrs.forEach((attr) => {\n                    if (attr?.name) {\n                        this.el.nativeElement.setAttribute(attr.name, attr.value ?? '');\n                    }\n                });\n            }\n        });\n\n        // Add 'ecl-link__icon' class to child icons reactively.\n        effect(() => {\n            const icons = this.eclIconComponents();\n            if (icons?.length > 0) {\n                icons.forEach((icn) => {\n                    icn.addExtraClass('ecl-link__icon');\n                });\n            }\n        });\n    }\n\n    @HostBinding('class.ecl-link--inverted')\n    get hostIsInverted(): boolean {\n        return (!this.variant() || this.variant() === 'standalone') && this.isInverted();\n    }\n\n    @HostBinding('class.ecl-link--brand')\n    get hostIsBranded(): boolean {\n        return (!this.variant() || this.variant() === 'standalone') && this.isBranded();\n    }\n\n    @HostBinding('class.ecl-link--icon-only')\n    get hostIsIconOnly(): boolean {\n        return this.isIconOnly();\n    }\n\n    @HostBinding('class.ecl-link--icon')\n    get hasIcon(): boolean {\n        return this._hasIcon();\n    }\n\n    private _hasIcon = computed(() => {\n        return this.eclIconComponents()?.length > 0;\n    });\n\n    /**\n     * Adds speific ECL classes to the <a> component.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        const variantClass = this.variant()\n            ? (this.variant() === 'secondary' && this.isInverted()\n                ? 'ecl-link--secondary-inverted'\n                : `ecl-link--${this.variant()}`)\n            : '';\n\n        return [super.getCssClasses('ecl-link'),\n            variantClass,\n            (this.variant() === 'primary' && this.isHighlight()) ? 'ecl-link--primary-highlight' : '',\n        ].join(' ').trim();\n    }\n\n    /**\n     * Calls the native focus() method of the default HTML element.\n     */\n    onFocus(): void {\n        this.el.nativeElement.focus();\n    }\n\n    /**\n     * Calls the native click() method of the default HTML element.\n     */\n    onClick(): void {\n        this.el.nativeElement.click();\n    }\n\n    /**\n     * Calls the native blur() method of the default HTML element.\n     */\n    onBlur(): void {\n        this.el.nativeElement.blur();\n    }\n}\n",
             "selector": "[eclLink]",
             "providers": [],
             "hostDirectives": [],
@@ -22890,7 +22624,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Additional HTML attributes to be set on the link element.\nUsed e.g. by social-media-follow for passing extra_attributes.</p>\n",
-                    "line": 20,
+                    "line": 19,
                     "rawdescription": "\n\nAdditional HTML attributes to be set on the link element.\nUsed e.g. by social-media-follow for passing extra_attributes.\n",
                     "required": false
                 },
@@ -22904,7 +22638,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 42,
+                    "line": 41,
                     "rawdescription": "\n",
                     "required": false
                 },
@@ -22918,20 +22652,20 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Adds class for hightlighted link (works only with &#39;primary&#39; variant)</p>\n",
-                    "line": 35,
+                    "line": 34,
                     "rawdescription": "\nAdds class for hightlighted link (works only with 'primary' variant)\n",
                     "jsdoctags": [
                         {
-                            "pos": 1354,
-                            "end": 1471,
+                            "pos": 1253,
+                            "end": 1370,
                             "kind": 332,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1355,
-                                "end": 1365,
+                                "pos": 1254,
+                                "end": 1264,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -22953,7 +22687,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Property to style the component if it consist only of an icon.</p>\n",
-                    "line": 30,
+                    "line": 29,
                     "rawdescription": "\n\nProperty to style the component if it consist only of an icon.\n",
                     "required": false
                 },
@@ -22967,7 +22701,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Property to style the component as &#39;inverted&#39; (with dark background). Can be used alone or with &#39;standalone&#39; variant.</p>\n",
-                    "line": 25,
+                    "line": 24,
                     "rawdescription": "\n\nProperty to style the component as 'inverted' (with dark background). Can be used alone or with 'standalone' variant.\n",
                     "required": false
                 },
@@ -22981,20 +22715,20 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 40,
+                    "line": 39,
                     "rawdescription": "\n\n",
                     "jsdoctags": [
                         {
-                            "pos": 1555,
-                            "end": 1622,
+                            "pos": 1454,
+                            "end": 1521,
                             "kind": 332,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1556,
-                                "end": 1566,
+                                "pos": 1455,
+                                "end": 1465,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -23015,7 +22749,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>With &#39;variant&#39; property user can add some more specific styling to the <a> component.</p>\n",
-                    "line": 47,
+                    "line": 46,
                     "rawdescription": "\n\nWith 'variant' property user can add some more specific styling to the <a> component.\n",
                     "required": false
                 },
@@ -23075,7 +22809,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAdds speific ECL classes to the <a> component.\n",
                     "description": "<p>Adds speific ECL classes to the <a> component.</p>\n",
-                    "line": 93,
+                    "line": 102,
                     "type": "string",
                     "decorators": []
                 },
@@ -23087,7 +22821,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 71,
+                    "line": 80,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -23099,7 +22833,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 81,
+                    "line": 90,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -23111,7 +22845,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 76,
+                    "line": 85,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -23123,26 +22857,13 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 66,
+                    "line": 75,
                     "type": "boolean",
                     "decorators": []
                 }
             ],
             "hostListeners": [],
             "propertiesClass": [
-                {
-                    "name": "cd",
-                    "coverageIgnore": false,
-                    "defaultValue": "inject(ChangeDetectorRef)",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 14,
-                    "rawdescription": "\n"
-                },
                 {
                     "name": "eclIconComponents",
                     "coverageIgnore": false,
@@ -23153,7 +22874,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 49,
+                    "line": 48,
                     "rawdescription": "\n"
                 },
                 {
@@ -23184,19 +22905,6 @@
                 }
             ],
             "methodsClass": [
-                {
-                    "name": "ngAfterContentInit",
-                    "coverageIgnore": false,
-                    "args": [],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 106,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": ""
-                },
                 {
                     "name": "onBlur",
                     "coverageIgnore": false,
@@ -23204,7 +22912,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 135,
+                    "line": 132,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalls the native blur() method of the default HTML element.\n",
@@ -23217,7 +22925,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 128,
+                    "line": 125,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalls the native click() method of the default HTML element.\n",
@@ -23230,7 +22938,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 121,
+                    "line": 118,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalls the native focus() method of the default HTML element.\n",
@@ -23278,8 +22986,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 312,
-                    "end": 446,
+                    "pos": 275,
+                    "end": 409,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -23291,16 +22999,13 @@
             "extends": [
                 "ECLBaseDirective"
             ],
-            "implements": [
-                "AfterContentInit"
-            ],
             "constructorObj": {
                 "name": "constructor",
                 "description": "",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 49,
+                "line": 48,
                 "rawdescription": "\n"
             },
             "accessors": {
@@ -23310,7 +23015,7 @@
                         "name": "hostIsInverted",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 66,
+                        "line": 75,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -23321,7 +23026,7 @@
                         "name": "hostIsBranded",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 71,
+                        "line": 80,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -23332,7 +23037,7 @@
                         "name": "hostIsIconOnly",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 76,
+                        "line": 85,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -23343,7 +23048,7 @@
                         "name": "hasIcon",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 81,
+                        "line": 90,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -23354,7 +23059,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 93,
+                        "line": 102,
                         "rawdescription": "\n\nAdds speific ECL classes to the <a> component.\n",
                         "description": "<p>Adds speific ECL classes to the <a> component.</p>\n"
                     }
@@ -23366,10 +23071,6 @@
                     {
                         "name": "ECLBaseDirective",
                         "type": "directive"
-                    },
-                    {
-                        "name": "AfterContentInit",
-                        "type": "interface"
                     }
                 ]
             }
@@ -50424,18 +50125,13 @@
         },
         {
             "name": "EclDateBlockComponent",
-            "id": "component-EclDateBlockComponent-13399b80b6dc7dce105216bc6198f95c2ee58313355907e1dd1bdb2a242a641c3894694a0ffc909e261c64973fc4a3074e8f8a5d360a66b12886ccd650e223d1",
+            "id": "component-EclDateBlockComponent-d9d6a513627794cc2674cf854797813269cbdd31b9d32310cd714ec65c83a83fe2760430a07643b40187cdf4c8207b7f85999cb06622b72758552cb5f56dfbd7",
             "file": "packages/ecl/components/ecl-date-block/ecl-date-block.component.ts",
             "encapsulation": [],
             "entryComponents": [],
             "inputs": [],
             "outputs": [],
-            "providers": [
-                {
-                    "name": "TranslateService",
-                    "type": "injectable"
-                }
-            ],
+            "providers": [],
             "selector": "time[eclDateBlock]",
             "styleUrls": [],
             "styles": [],
@@ -50453,7 +50149,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the `datetime` attribute of the `<time>` element.\nIf not provided, it is derived from `date` and `dateFormat`.\n",
                     "description": "<p>Sets the <code>datetime</code> attribute of the <code>&lt;time&gt;</code> element.\nIf not provided, it is derived from <code>date</code> and <code>dateFormat</code>.</p>\n",
-                    "line": 97,
+                    "line": 96,
                     "type": "string",
                     "decorators": []
                 },
@@ -50467,7 +50163,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The date to be displayed. If not null, it&#39;s used to generate the <code>datetime</code> attribute and visual output.</p>\n",
-                    "line": 45,
+                    "line": 44,
                     "rawdescription": "\n\nThe date to be displayed. If not null, it's used to generate the `datetime` attribute and visual output.\n",
                     "modifierKind": [
                         148
@@ -50484,7 +50180,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The format to be used when rendering the date string (Angular DatePipe format).\nDefault is <code>&#39;dd/M/yyyy&#39;</code>.</p>\n",
-                    "line": 51,
+                    "line": 50,
                     "rawdescription": "\n\nThe format to be used when rendering the date string (Angular DatePipe format).\nDefault is `'dd/M/yyyy'`.\n",
                     "modifierKind": [
                         148
@@ -50501,7 +50197,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Explicit string for day part of the date (optional).\nUsed when date is not set or overridden manually.</p>\n",
-                    "line": 65,
+                    "line": 64,
                     "rawdescription": "\n\nExplicit string for day part of the date (optional).\nUsed when date is not set or overridden manually.\n",
                     "modifierKind": [
                         148
@@ -50518,7 +50214,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Explicit string for month part of the date (optional).\nUsed when date is not set or overridden manually.</p>\n",
-                    "line": 71,
+                    "line": 70,
                     "rawdescription": "\n\nExplicit string for month part of the date (optional).\nUsed when date is not set or overridden manually.\n",
                     "modifierKind": [
                         148
@@ -50535,7 +50231,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Explicit string used as an accessible or verbose label for the month (optional).</p>\n",
-                    "line": 76,
+                    "line": 75,
                     "rawdescription": "\n\nExplicit string used as an accessible or verbose label for the month (optional).\n",
                     "modifierKind": [
                         148
@@ -50552,7 +50248,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Optional visual variant of the date block. Can be:</p>\n<ul>\n<li><code>&#39;ongoing&#39;</code>: for ongoing events</li>\n<li><code>&#39;past&#39;</code>: for past events\nThis changes styling only.</li>\n</ul>\n",
-                    "line": 59,
+                    "line": 58,
                     "rawdescription": "\n\nOptional visual variant of the date block. Can be:\n- `'ongoing'`: for ongoing events\n- `'past'`: for past events\nThis changes styling only.\n",
                     "modifierKind": [
                         148
@@ -50569,7 +50265,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Explicit string for year part of the date (optional).\nUsed when date is not set or overridden manually.</p>\n",
-                    "line": 82,
+                    "line": 81,
                     "rawdescription": "\n\nExplicit string for year part of the date (optional).\nUsed when date is not set or overridden manually.\n",
                     "modifierKind": [
                         148
@@ -50632,7 +50328,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 84,
+                    "line": 83,
                     "rawdescription": "\n"
                 }
             ],
@@ -50688,7 +50384,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 86,
+                    "line": 85,
                     "type": "string",
                     "decorators": []
                 }
@@ -50704,7 +50400,7 @@
             "description": "<p>Component used to display a formatted date in a styled time element.\nDesigned for use within content components such as content blocks or items.</p>\n",
             "rawdescription": "\n\nComponent used to display a formatted date in a styled time element.\nDesigned for use within content components such as content blocks or items.\n",
             "type": "component",
-            "sourceCode": "import { formatDate, DatePipe } from '@angular/common';\nimport { Component, Input, HostBinding, inject, input } from '@angular/core';\nimport '@angular/common/locales/global/bg';\nimport '@angular/common/locales/global/da';\nimport '@angular/common/locales/global/en';\nimport '@angular/common/locales/global/et';\nimport '@angular/common/locales/global/fr';\nimport '@angular/common/locales/global/hr';\nimport '@angular/common/locales/global/lv';\nimport '@angular/common/locales/global/hu';\nimport '@angular/common/locales/global/nl';\nimport '@angular/common/locales/global/pt';\nimport '@angular/common/locales/global/sk';\nimport '@angular/common/locales/global/fi';\nimport '@angular/common/locales/global/cs';\nimport '@angular/common/locales/global/de';\nimport '@angular/common/locales/global/el';\nimport '@angular/common/locales/global/es';\nimport '@angular/common/locales/global/ga';\nimport '@angular/common/locales/global/it';\nimport '@angular/common/locales/global/lt';\nimport '@angular/common/locales/global/mt';\nimport '@angular/common/locales/global/pl';\nimport '@angular/common/locales/global/ro';\nimport '@angular/common/locales/global/sl';\nimport '@angular/common/locales/global/sv';\nimport { TranslateService } from '@ngx-translate/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Component used to display a formatted date in a styled time element.\n * Designed for use within content components such as content blocks or items.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'time[eclDateBlock]',\n    templateUrl: './ecl-date-block.component.html',\n    imports: [DatePipe],\n    providers: [TranslateService],\n})\nexport class EclDateBlockComponent extends ECLBaseDirective {\n    /**\n     * The date to be displayed. If not null, it's used to generate the `datetime` attribute and visual output.\n     */\n    readonly date = input<Date>(undefined);\n\n    /**\n     * The format to be used when rendering the date string (Angular DatePipe format).\n     * Default is `'dd/M/yyyy'`.\n     */\n    readonly dateFormat = input('dd/M/yyyy');\n\n    /**\n     * Optional visual variant of the date block. Can be:\n     * - `'ongoing'`: for ongoing events\n     * - `'past'`: for past events\n     * This changes styling only.\n     */\n    readonly variant = input<'ongoing' | 'past'>(null);\n\n    /**\n     * Explicit string for day part of the date (optional).\n     * Used when date is not set or overridden manually.\n     */\n    readonly day = input<string>(undefined);\n\n    /**\n     * Explicit string for month part of the date (optional).\n     * Used when date is not set or overridden manually.\n     */\n    readonly month = input<string>(undefined);\n\n    /**\n     * Explicit string used as an accessible or verbose label for the month (optional).\n     */\n    readonly monthTitle = input<string>(undefined);\n\n    /**\n     * Explicit string for year part of the date (optional).\n     * Used when date is not set or overridden manually.\n     */\n    readonly year = input<string>(undefined);\n\n    locale = 'en';\n    @HostBinding('class')\n    get cssClasses(): string {\n        const variant = this.variant();\n        return [super.getCssClasses('ecl-date-block'), variant ? `ecl-date-block--${variant}` : ''].join(' ').trim();\n    }\n\n    /**\n     * Sets the `datetime` attribute of the `<time>` element.\n     * If not provided, it is derived from `date` and `dateFormat`.\n     */\n    @Input()\n    @HostBinding('attr.datetime')\n    get datetime(): string {\n        return this.getDatetime();\n    }\n    set datetime(value) {\n        this._datetime = value;\n    }\n    private _datetime: string = null;\n    private translateService = inject(TranslateService);\n\n    constructor() {\n        super();\n        const translateService = this.translateService;\n\n        this.locale = translateService.currentLang();\n    }\n\n    private getDatetime(): string {\n        return this._datetime || this.getFormattedDate(this.date(), this.dateFormat());\n    }\n\n    private getFormattedDate(date: Date, dateFormat: string): string {\n        if (date) {\n            return formatDate(date, dateFormat, this.translateService.currentLang());\n        } else {\n            return null;\n        }\n    }\n}\n",
+            "sourceCode": "import { formatDate, DatePipe } from '@angular/common';\nimport { Component, Input, HostBinding, inject, input } from '@angular/core';\nimport '@angular/common/locales/global/bg';\nimport '@angular/common/locales/global/da';\nimport '@angular/common/locales/global/en';\nimport '@angular/common/locales/global/et';\nimport '@angular/common/locales/global/fr';\nimport '@angular/common/locales/global/hr';\nimport '@angular/common/locales/global/lv';\nimport '@angular/common/locales/global/hu';\nimport '@angular/common/locales/global/nl';\nimport '@angular/common/locales/global/pt';\nimport '@angular/common/locales/global/sk';\nimport '@angular/common/locales/global/fi';\nimport '@angular/common/locales/global/cs';\nimport '@angular/common/locales/global/de';\nimport '@angular/common/locales/global/el';\nimport '@angular/common/locales/global/es';\nimport '@angular/common/locales/global/ga';\nimport '@angular/common/locales/global/it';\nimport '@angular/common/locales/global/lt';\nimport '@angular/common/locales/global/mt';\nimport '@angular/common/locales/global/pl';\nimport '@angular/common/locales/global/ro';\nimport '@angular/common/locales/global/sl';\nimport '@angular/common/locales/global/sv';\nimport { TranslateService } from '@ngx-translate/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Component used to display a formatted date in a styled time element.\n * Designed for use within content components such as content blocks or items.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'time[eclDateBlock]',\n    templateUrl: './ecl-date-block.component.html',\n    imports: [DatePipe],\n})\nexport class EclDateBlockComponent extends ECLBaseDirective {\n    /**\n     * The date to be displayed. If not null, it's used to generate the `datetime` attribute and visual output.\n     */\n    readonly date = input<Date>(undefined);\n\n    /**\n     * The format to be used when rendering the date string (Angular DatePipe format).\n     * Default is `'dd/M/yyyy'`.\n     */\n    readonly dateFormat = input('dd/M/yyyy');\n\n    /**\n     * Optional visual variant of the date block. Can be:\n     * - `'ongoing'`: for ongoing events\n     * - `'past'`: for past events\n     * This changes styling only.\n     */\n    readonly variant = input<'ongoing' | 'past'>(null);\n\n    /**\n     * Explicit string for day part of the date (optional).\n     * Used when date is not set or overridden manually.\n     */\n    readonly day = input<string>(undefined);\n\n    /**\n     * Explicit string for month part of the date (optional).\n     * Used when date is not set or overridden manually.\n     */\n    readonly month = input<string>(undefined);\n\n    /**\n     * Explicit string used as an accessible or verbose label for the month (optional).\n     */\n    readonly monthTitle = input<string>(undefined);\n\n    /**\n     * Explicit string for year part of the date (optional).\n     * Used when date is not set or overridden manually.\n     */\n    readonly year = input<string>(undefined);\n\n    locale = 'en';\n    @HostBinding('class')\n    get cssClasses(): string {\n        const variant = this.variant();\n        return [super.getCssClasses('ecl-date-block'), variant ? `ecl-date-block--${variant}` : ''].join(' ').trim();\n    }\n\n    /**\n     * Sets the `datetime` attribute of the `<time>` element.\n     * If not provided, it is derived from `date` and `dateFormat`.\n     */\n    @Input()\n    @HostBinding('attr.datetime')\n    get datetime(): string {\n        return this.getDatetime();\n    }\n    set datetime(value) {\n        this._datetime = value;\n    }\n    private _datetime: string = null;\n    private translateService = inject(TranslateService);\n\n    constructor() {\n        super();\n        const translateService = this.translateService;\n\n        this.locale = translateService.currentLang();\n    }\n\n    private getDatetime(): string {\n        return this._datetime || this.getFormattedDate(this.date(), this.dateFormat());\n    }\n\n    private getFormattedDate(date: Date, dateFormat: string): string {\n        if (date) {\n            return formatDate(date, dateFormat, this.translateService.currentLang());\n        } else {\n            return null;\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -50726,7 +50422,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 104,
+                "line": 103,
                 "rawdescription": "\n"
             },
             "extends": [
@@ -50739,7 +50435,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 86,
+                        "line": 85,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -50762,7 +50458,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 100,
+                        "line": 99,
                         "rawdescription": "\n",
                         "description": "",
                         "jsdoctags": [
@@ -50783,7 +50479,7 @@
                         "name": "datetime",
                         "type": "string",
                         "returnType": "string",
-                        "line": 97,
+                        "line": 96,
                         "rawdescription": "\n\nSets the `datetime` attribute of the `<time>` element.\nIf not provided, it is derived from `date` and `dateFormat`.\n",
                         "description": "<p>Sets the <code>datetime</code> attribute of the <code>&lt;time&gt;</code> element.\nIf not provided, it is derived from <code>date</code> and <code>dateFormat</code>.</p>\n"
                     }
@@ -50796,10 +50492,6 @@
                         "name": "DatePipe",
                         "type": "pipe"
                     },
-                    {
-                        "name": "TranslateService",
-                        "type": "injectable"
-                    },
                     {
                         "name": "ECLBaseDirective",
                         "type": "directive"
@@ -57370,7 +57062,7 @@
         },
         {
             "name": "EclIconComponent",
-            "id": "component-EclIconComponent-b815ca32f7e41bc74b5baa46b6d6a2147c83194ed861e5024ab8bf5cbf1aa0486c078ea66bdea8ad2cf93dd99889c8245886ada3238564160531c7978e632b73",
+            "id": "component-EclIconComponent-098102385dea8ae19585b13531343588c38d879186ee8a691fc0aeb0f6cef41ef570f2be629b561695d0c3f13ebb52e8869d91e74ca8d7e05471f478e7ad412b",
             "file": "packages/ecl/components/ecl-icon/ecl-icon.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -57483,7 +57175,7 @@
                     "defaultValue": "'default'",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "'default' | 'social' | 'social-media' | 'social-media-color' | 'flag' | 'flag-non-members' |        'phosphor' | string",
+                    "type": "'default' | 'social' | 'social-media' | 'social-media-color' | 'flag' | 'flag-non-members' |        'phosphor' | 'phosphor-fill' | string",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Defines the icon set to use.\nAvailable sets: <code>default</code>, <code>social</code>, <code>social-media</code>, <code>flag</code>, or a custom URL prefix.\nDefaults to <code>&#39;default&#39;</code>.</p>\n",
@@ -57903,7 +57595,7 @@
             "description": "<p>ECL icon component – renders SVG icons from various sets depending on current theme.\nIntegrates with ECL theming and supports accessibility options.</p>\n",
             "rawdescription": "\n\nECL icon component – renders SVG icons from various sets depending on current theme.\nIntegrates with ECL theming and supports accessibility options.\n",
             "type": "component",
-            "sourceCode": "import { isPlatformBrowser, NgClass } from '@angular/common';\nimport {\n    afterNextRender,\n    booleanAttribute,\n    Component,\n    computed,\n    ElementRef,\n    HostBinding,\n    inject,\n    input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    PLATFORM_ID,\n    Renderer2,\n    signal,\n    SimpleChanges,\n    viewChild,\n} from '@angular/core';\nimport { ECLBaseDirective, EclThemeService } from '@eui/ecl/core';\n\n/**\n * ECL icon component – renders SVG icons from various sets depending on current theme.\n * Integrates with ECL theming and supports accessibility options.\n */\n@Component({\n    selector: 'ecl-icon',\n    templateUrl: './ecl-icon.component.html',\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n    ],\n    imports: [NgClass],\n    providers: [EclThemeService],\n    host: {\n        '[class.ecl-icon--flip-horizontal]': 'isFlipHorizontal()',\n    },\n})\nexport class EclIconComponent implements OnInit, OnChanges, OnDestroy {\n    /**\n     * Defines the icon set to use.\n     * Available sets: `default`, `social`, `social-media`, `flag`, or a custom URL prefix.\n     * Defaults to `'default'`.\n     */\n    iconSet = input<'default' | 'social' | 'social-media' | 'social-media-color' | 'flag' | 'flag-non-members' |\n        'phosphor' | string>('default');\n\n    /**\n     * Name of the icon to render from the selected set.\n     */\n    icon = input<string>();\n\n    /**\n     * Size of the icon.\n     * Supported values: `'2xs'`, `'xs'`, `'s'`, `'m'`, `'l'`, `'xl'`, `'2xl'`, `'fluid'`.\n     * Defaults to `'xs'`.\n     */\n    size = input<'2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | 'fluid' | string>('xs');\n\n    /**\n     * Applies color styling to the icon.\n     * Use `'inverted'` for icons on dark backgrounds, or `'primary'` for emphasis.\n     */\n    color = input<'inverted' | 'primary' | null>(null);\n\n    /**\n     * Adds a transformation modifier to the icon (e.g., rotation).\n     */\n    transform = input<string>();\n\n    /**\n     * ID reference for an external element that labels this icon for screen readers.\n     */\n    readonly ariaLabelledby = input<string>(undefined);\n\n    /**\n     * ARIA role of the icon. If a `title` is provided and no role is defined, defaults to `'img'`.\n     */\n    readonly role = input<string>(undefined);\n\n    /**\n     * Title used for accessibility. Also affects `aria-hidden` and `role`.\n     */\n    readonly title = input<string>(undefined);\n\n    /**\n     * Determines whether the icon should be hidden from assistive technologies.\n     * Defaults to `true` unless a title is provided.\n     */\n    readonly ariaHidden = input<boolean, unknown>(undefined, { transform: booleanAttribute });\n\n    /**\n     * Controls whether the icon is focusable via keyboard.\n     * Defaults to `false`.\n     */\n    readonly focusable = input(false, { transform: booleanAttribute });\n\n    /**\n     * Resolved role: uses the explicit `role` input if provided,\n     * otherwise defaults to `'img'` when a `title` is set.\n     */\n    readonly effectiveRole = computed<string | undefined>(() => {\n        const explicit = this.role();\n        if (explicit !== undefined) return explicit;\n        return this.title() !== undefined ? 'img' : undefined;\n    });\n\n    /**\n     * Resolved aria-hidden: uses the explicit `ariaHidden` input if provided,\n     * otherwise hides the icon unless a `title` is set.\n     */\n    readonly effectiveAriaHidden = computed<boolean>(() => {\n        const explicit = this.ariaHidden();\n        if (explicit !== undefined) return explicit;\n        return this.title() === undefined;\n    });\n\n    /**\n     * Flips the icon horizontally if set to `true`.\n     */\n    readonly isFlipHorizontal = input(false, { transform: booleanAttribute });\n\n    /**\n     * Adds a dark background utility class if the color is set to `'inverted'`.\n     */\n    @HostBinding('class.ecl-u-bg-grey')\n    get isColorInverted(): boolean {\n        return this.color() === 'inverted';\n    }\n\n    readonly svgEl = viewChild<ElementRef>('svg');\n\n    iconUrl = signal<string>('');\n    baseDirective = inject(ECLBaseDirective);\n    el = inject(ElementRef);\n    private renderer = inject(Renderer2);\n    private platformId = inject(PLATFORM_ID);\n\n    /**\n     * Extra classes added programmatically by parent components\n     * (button, link, etc.)\n     */\n    readonly extraClasses = signal<string>('');\n\n    /**\n     * Real classes currently present on <ecl-icon>.\n     * To support [class.foo] / [ngClass].\n     */\n    readonly hostClasses = signal<string>('');\n\n    readonly svgClasses = computed<Record<string, boolean>>(() => {\n        return {\n            [this.baseDirective.getCssClasses('ecl-icon')]: true,\n            [`ecl-icon--${this.size()}`]: !!this.size(),\n            [`ecl-icon--${this.transform()}`]: !!this.transform(),\n            [`ecl-icon--${this.color()}`]: !!this.color(),\n            ...this.toClassRecord(this.hostClasses()),\n            ...this.toClassRecord(this.extraClasses()),\n        };\n    });\n\n    private classObserver?: MutationObserver;\n\n    constructor() {\n        afterNextRender(() => {\n            this.detachHostAndPromoteSvg();\n            this.syncHostClassesFromDom();\n            this.observeHostClassChanges();\n        });\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes['icon']) {\n            this.initiateIconUrl();\n        }\n    }\n\n    ngOnInit(): void {\n        this.initiateIconUrl();\n    }\n\n    ngOnDestroy(): void {\n        this.classObserver?.disconnect();\n        if (!isPlatformBrowser(this.platformId)) return;\n\n        try {\n            const svgNative = this.svgEl()?.nativeElement as SVGElement | null;\n            const parent = svgNative?.parentElement;\n            if (svgNative && parent) parent.removeChild(svgNative);\n        } catch {\n            /* ignore */\n        }\n    }\n\n    addExtraClass(className: string): void {\n        const classes = new Set([\n            ...this.tokenize(this.extraClasses()),\n            ...this.tokenize(className),\n        ]);\n        this.extraClasses.set(Array.from(classes).join(' '));\n    }\n\n    removeExtraClass(className: string): void {\n        const classes = this.tokenize(this.extraClasses()).filter((c) => c !== className);\n        this.extraClasses.set(classes.join(' '));\n    }\n\n    setExtraClasses(classes: string): void {\n        this.extraClasses.set(classes ?? '');\n    }\n\n    private syncHostClassesFromDom(): void {\n        const host = this.el.nativeElement;\n        this.hostClasses.set(host.className || '');\n    }\n\n    private observeHostClassChanges(): void {\n        const host = this.el.nativeElement;\n\n        this.classObserver = new MutationObserver(() => {\n            this.hostClasses.set(host.className || '');\n        });\n\n        this.classObserver.observe(host, {\n            attributes: true,\n            attributeFilter: ['class'],\n        });\n    }\n\n    private toClassRecord(classes?: string | null): Record<string, boolean> {\n        return Object.fromEntries(\n            this.tokenize(classes).map(c => [c, true])\n        );\n    }\n\n    private tokenize(classes: string | null | undefined): string[] {\n        return (classes ?? '')\n            .split(/\\s+/)\n            .filter(Boolean);\n    }\n\n    private detachHostAndPromoteSvg(): void {\n        const hostEl = this.el.nativeElement as HTMLElement | null;\n        const svgNative = this.svgEl()?.nativeElement as SVGElement | null;\n        if (!hostEl || !svgNative) return;\n\n        const hostParentEl = hostEl.parentElement;\n        if (!hostParentEl) return;\n\n        // add the svg and remove the parent from the DOM\n        this.renderer.setStyle(hostEl, 'visibility', 'hidden');\n        hostEl.after(svgNative);\n        this.renderer.removeChild(hostParentEl, hostEl);\n    }\n\n    private initiateIconUrl(): void {\n        switch (this.iconSet()) {\n            case 'default':\n                this.iconUrl.set(`assets/images/ecl/icons/sprite.svg#${this.icon()}`);\n                break;\n            case 'social': // TODO: Remove this in the next version.\n                this.iconUrl.set(`assets/images/ecl/networks/sprite.svg#${this.icon()}`);\n                break;\n            case 'social-media':\n                this.iconUrl.set(`assets/images/ecl/networks/sprite.svg#${this.icon()}`);\n                break;\n            case 'social-media-color':\n                this.iconUrl.set(`assets/images/ecl/networks-color/sprite.svg#${this.icon()}`);\n                break;\n            case 'flag':\n                this.iconUrl.set(`assets/images/ecl/icons-flag/sprites/icons-flag.svg#${this.icon()}`);\n                break;\n            case 'flag-non-members':\n                this.iconUrl.set(`assets/images/ecl/icons-flag/sprites/icons-flag-non-members.svg#${this.icon()}`);\n                break;\n            case 'phosphor':\n                this.iconUrl.set(`assets/icons/sprites/regular.svg#${this.icon()}`);\n                break;\n            case 'phosphor-fill':\n                this.iconUrl.set(`assets/icons/sprites/fill.svg#${this.icon()}`);\n                break;\n            default:\n                this.iconUrl.set(`assets/images/ecl/icons/sprite.svg#${this.icon()}`);\n        }\n    }\n}\n",
+            "sourceCode": "import { isPlatformBrowser, NgClass } from '@angular/common';\nimport {\n    afterNextRender,\n    booleanAttribute,\n    Component,\n    computed,\n    ElementRef,\n    HostBinding,\n    inject,\n    input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    PLATFORM_ID,\n    Renderer2,\n    signal,\n    SimpleChanges,\n    viewChild,\n} from '@angular/core';\nimport { ECLBaseDirective, EclThemeService } from '@eui/ecl/core';\n\n/**\n * ECL icon component – renders SVG icons from various sets depending on current theme.\n * Integrates with ECL theming and supports accessibility options.\n */\n@Component({\n    selector: 'ecl-icon',\n    templateUrl: './ecl-icon.component.html',\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n    ],\n    imports: [NgClass],\n    providers: [EclThemeService],\n    host: {\n        '[class.ecl-icon--flip-horizontal]': 'isFlipHorizontal()',\n    },\n})\nexport class EclIconComponent implements OnInit, OnChanges, OnDestroy {\n    /**\n     * Defines the icon set to use.\n     * Available sets: `default`, `social`, `social-media`, `flag`, or a custom URL prefix.\n     * Defaults to `'default'`.\n     */\n    iconSet = input<'default' | 'social' | 'social-media' | 'social-media-color' | 'flag' | 'flag-non-members' |\n        'phosphor' | 'phosphor-fill' | string>('default');\n\n    /**\n     * Name of the icon to render from the selected set.\n     */\n    icon = input<string>();\n\n    /**\n     * Size of the icon.\n     * Supported values: `'2xs'`, `'xs'`, `'s'`, `'m'`, `'l'`, `'xl'`, `'2xl'`, `'fluid'`.\n     * Defaults to `'xs'`.\n     */\n    size = input<'2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | 'fluid' | string>('xs');\n\n    /**\n     * Applies color styling to the icon.\n     * Use `'inverted'` for icons on dark backgrounds, or `'primary'` for emphasis.\n     */\n    color = input<'inverted' | 'primary' | null>(null);\n\n    /**\n     * Adds a transformation modifier to the icon (e.g., rotation).\n     */\n    transform = input<string>();\n\n    /**\n     * ID reference for an external element that labels this icon for screen readers.\n     */\n    readonly ariaLabelledby = input<string>(undefined);\n\n    /**\n     * ARIA role of the icon. If a `title` is provided and no role is defined, defaults to `'img'`.\n     */\n    readonly role = input<string>(undefined);\n\n    /**\n     * Title used for accessibility. Also affects `aria-hidden` and `role`.\n     */\n    readonly title = input<string>(undefined);\n\n    /**\n     * Determines whether the icon should be hidden from assistive technologies.\n     * Defaults to `true` unless a title is provided.\n     */\n    readonly ariaHidden = input<boolean, unknown>(undefined, { transform: booleanAttribute });\n\n    /**\n     * Controls whether the icon is focusable via keyboard.\n     * Defaults to `false`.\n     */\n    readonly focusable = input(false, { transform: booleanAttribute });\n\n    /**\n     * Resolved role: uses the explicit `role` input if provided,\n     * otherwise defaults to `'img'` when a `title` is set.\n     */\n    readonly effectiveRole = computed<string | undefined>(() => {\n        const explicit = this.role();\n        if (explicit !== undefined) return explicit;\n        return this.title() !== undefined ? 'img' : undefined;\n    });\n\n    /**\n     * Resolved aria-hidden: uses the explicit `ariaHidden` input if provided,\n     * otherwise hides the icon unless a `title` is set.\n     */\n    readonly effectiveAriaHidden = computed<boolean>(() => {\n        const explicit = this.ariaHidden();\n        if (explicit !== undefined) return explicit;\n        return this.title() === undefined;\n    });\n\n    /**\n     * Flips the icon horizontally if set to `true`.\n     */\n    readonly isFlipHorizontal = input(false, { transform: booleanAttribute });\n\n    /**\n     * Adds a dark background utility class if the color is set to `'inverted'`.\n     */\n    @HostBinding('class.ecl-u-bg-grey')\n    get isColorInverted(): boolean {\n        return this.color() === 'inverted';\n    }\n\n    readonly svgEl = viewChild<ElementRef>('svg');\n\n    iconUrl = signal<string>('');\n    baseDirective = inject(ECLBaseDirective);\n    el = inject(ElementRef);\n    private renderer = inject(Renderer2);\n    private platformId = inject(PLATFORM_ID);\n\n    /**\n     * Extra classes added programmatically by parent components\n     * (button, link, etc.)\n     */\n    readonly extraClasses = signal<string>('');\n\n    /**\n     * Real classes currently present on <ecl-icon>.\n     * To support [class.foo] / [ngClass].\n     */\n    readonly hostClasses = signal<string>('');\n\n    readonly svgClasses = computed<Record<string, boolean>>(() => {\n        return {\n            [this.baseDirective.getCssClasses('ecl-icon')]: true,\n            [`ecl-icon--${this.size()}`]: !!this.size(),\n            [`ecl-icon--${this.transform()}`]: !!this.transform(),\n            [`ecl-icon--${this.color()}`]: !!this.color(),\n            ...this.toClassRecord(this.hostClasses()),\n            ...this.toClassRecord(this.extraClasses()),\n        };\n    });\n\n    private classObserver?: MutationObserver;\n\n    constructor() {\n        afterNextRender(() => {\n            this.detachHostAndPromoteSvg();\n            this.syncHostClassesFromDom();\n            this.observeHostClassChanges();\n        });\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes['icon']) {\n            this.initiateIconUrl();\n        }\n    }\n\n    ngOnInit(): void {\n        this.initiateIconUrl();\n    }\n\n    ngOnDestroy(): void {\n        this.classObserver?.disconnect();\n        if (!isPlatformBrowser(this.platformId)) return;\n\n        try {\n            const svgNative = this.svgEl()?.nativeElement as SVGElement | null;\n            const parent = svgNative?.parentElement;\n            if (svgNative && parent) parent.removeChild(svgNative);\n        } catch {\n            /* ignore */\n        }\n    }\n\n    addExtraClass(className: string): void {\n        const classes = new Set([\n            ...this.tokenize(this.extraClasses()),\n            ...this.tokenize(className),\n        ]);\n        this.extraClasses.set(Array.from(classes).join(' '));\n    }\n\n    removeExtraClass(className: string): void {\n        const classes = this.tokenize(this.extraClasses()).filter((c) => c !== className);\n        this.extraClasses.set(classes.join(' '));\n    }\n\n    setExtraClasses(classes: string): void {\n        this.extraClasses.set(classes ?? '');\n    }\n\n    private syncHostClassesFromDom(): void {\n        const host = this.el.nativeElement;\n        this.hostClasses.set(host.className || '');\n    }\n\n    private observeHostClassChanges(): void {\n        const host = this.el.nativeElement;\n\n        this.classObserver = new MutationObserver(() => {\n            this.hostClasses.set(host.className || '');\n        });\n\n        this.classObserver.observe(host, {\n            attributes: true,\n            attributeFilter: ['class'],\n        });\n    }\n\n    private toClassRecord(classes?: string | null): Record<string, boolean> {\n        return Object.fromEntries(\n            this.tokenize(classes).map(c => [c, true])\n        );\n    }\n\n    private tokenize(classes: string | null | undefined): string[] {\n        return (classes ?? '')\n            .split(/\\s+/)\n            .filter(Boolean);\n    }\n\n    private detachHostAndPromoteSvg(): void {\n        const hostEl = this.el.nativeElement as HTMLElement | null;\n        const svgNative = this.svgEl()?.nativeElement as SVGElement | null;\n        if (!hostEl || !svgNative) return;\n\n        const hostParentEl = hostEl.parentElement;\n        if (!hostParentEl) return;\n\n        // add the svg and remove the parent from the DOM\n        this.renderer.setStyle(hostEl, 'visibility', 'hidden');\n        hostEl.after(svgNative);\n        this.renderer.removeChild(hostParentEl, hostEl);\n    }\n\n    private initiateIconUrl(): void {\n        switch (this.iconSet()) {\n            case 'default':\n                this.iconUrl.set(`assets/images/ecl/icons/sprite.svg#${this.icon()}`);\n                break;\n            case 'social': // TODO: Remove this in the next version.\n                this.iconUrl.set(`assets/images/ecl/networks/sprite.svg#${this.icon()}`);\n                break;\n            case 'social-media':\n                this.iconUrl.set(`assets/images/ecl/networks/sprite.svg#${this.icon()}`);\n                break;\n            case 'social-media-color':\n                this.iconUrl.set(`assets/images/ecl/networks-color/sprite.svg#${this.icon()}`);\n                break;\n            case 'flag':\n                this.iconUrl.set(`assets/images/ecl/icons-flag/sprites/icons-flag.svg#${this.icon()}`);\n                break;\n            case 'flag-non-members':\n                this.iconUrl.set(`assets/images/ecl/icons-flag/sprites/icons-flag-non-members.svg#${this.icon()}`);\n                break;\n            case 'phosphor':\n                this.iconUrl.set(`assets/icons/sprites/regular.svg#${this.icon()}`);\n                break;\n            case 'phosphor-fill':\n                this.iconUrl.set(`assets/icons/sprites/fill.svg#${this.icon()}`);\n                break;\n            default:\n                this.iconUrl.set(`assets/images/ecl/icons/sprite.svg#${this.icon()}`);\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -58188,7 +57880,7 @@
         },
         {
             "name": "EclInpageNavigationComponent",
-            "id": "component-EclInpageNavigationComponent-218decdcd6a7c68437e5d7e1d602b3cd8612271e9c1069d063d5d1f05e7f6c61f23a6fb4404b9d14cd21d0f249849eacc4c32a956fb3054803a25ed4469f0623",
+            "id": "component-EclInpageNavigationComponent-5daafc90fdb4dbac03101fb1ec926edaec22dde8c7ba4699dcece0f2c2d48f01b9c51ed69bb59e72fd63be3a46eae2803257a7e8309d6a6dc7f5932d3148a469",
             "file": "packages/ecl/components/ecl-inpage-navigation/ecl-inpage-navigation.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -58497,7 +58189,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 105,
+                    "line": 111,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -58510,7 +58202,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 144,
+                    "line": 150,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -58523,7 +58215,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 153,
+                    "line": 159,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -58536,7 +58228,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 101,
+                    "line": 107,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -58549,7 +58241,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 166,
+                    "line": 172,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nOn mobile view - handle the dropdown toggle.\n",
@@ -58571,7 +58263,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 175,
+                    "line": 189,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nDropdown keyboard navigation on mobile view.\n",
@@ -58579,8 +58271,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7260,
-                                "end": 7263,
+                                "pos": 7926,
+                                "end": 7929,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -58593,8 +58285,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7254,
-                                "end": 7259,
+                                "pos": 7920,
+                                "end": 7925,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -58665,14 +58357,14 @@
             "description": "<p>The in-page navigation is a vertical menu containing (anchored) links to H2-headings on long content pages.\nIt gives the user an overview of the page contents and has a fixed position (does not move while scrolling) at either the left\nside of a page on desktop or top-bar on mobile. This component helps users scan of the page quickly contents and may potentially\nreduce vertical scrolling, allowing users to easily jump straight to the segment of the page.</p>\n",
             "rawdescription": "\n\nThe in-page navigation is a vertical menu containing (anchored) links to H2-headings on long content pages.\nIt gives the user an overview of the page contents and has a fixed position (does not move while scrolling) at either the left\nside of a page on desktop or top-bar on mobile. This component helps users scan of the page quickly contents and may potentially\nreduce vertical scrolling, allowing users to easily jump straight to the segment of the page.\n",
             "type": "component",
-            "sourceCode": "import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';\nimport { CdkScrollable, ScrollDispatcher, ViewportRuler } from '@angular/cdk/scrolling';\nimport { AfterViewInit, ChangeDetectorRef, Component, DOCUMENT, DoCheck, ElementRef, IterableDiffer, IterableDiffers, NgZone, OnDestroy, OnInit, PLATFORM_ID, afterNextRender, inject, numberAttribute, output, input, viewChild, contentChildren, contentChild } from '@angular/core';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_STICKY_CONTAINER } from '@eui/ecl/components/ecl-sticky-container';\nimport { ECLBaseDirective, EclBaseEvent, EclRtlService, EclThemeService } from '@eui/ecl/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { EclInpageNavigationItemComponent } from './ecl-inpage-navigation-item.component';\nimport { EclInpageNavigationListDirective } from './ecl-inpage-navigation-list.directive';\nimport { EclInpageNavigationService } from './services/ecl-inpage-navigation.service';\nimport { isPlatformBrowser } from '@angular/common';\n\nexport class EclInpageNavigationSectionEnterEvent extends EclBaseEvent {\n    constructor(public sectionId: string) {\n        super();\n    }\n}\n\n/**\n * The in-page navigation is a vertical menu containing (anchored) links to H2-headings on long content pages.\n * It gives the user an overview of the page contents and has a fixed position (does not move while scrolling) at either the left\n * side of a page on desktop or top-bar on mobile. This component helps users scan of the page quickly contents and may potentially\n * reduce vertical scrolling, allowing users to easily jump straight to the segment of the page.\n */\n@Component({\n    selector: 'ecl-inpage-navigation',\n    templateUrl: './ecl-inpage-navigation.component.html',\n    imports: [TranslatePipe, ...EUI_ECL_STICKY_CONTAINER, ...EUI_ECL_ICON],\n    styles: [\n        `\n            @media (min-width: 996px) {\n                .ecl-inpage-navigation__list {\n                    display: block !important;\n                }\n            }\n        `,\n    ],\n})\nexport class EclInpageNavigationComponent extends ECLBaseDirective implements OnInit, AfterViewInit, OnDestroy, DoCheck {\n    eclThemeService = inject(EclThemeService);\n\n    readonly eclTitle = input<string>(undefined);\n    /**\n     * Used to calculate component's position.\n     */\n    readonly marginTop = input<number>(undefined);\n    readonly marginBottom = input<number>(undefined);\n    /**\n     * Sets the offset from the top of the page (for example if there is a toolbar or header). Used to calculate scrolling behaviour.\n     */\n    readonly offsetTop = input<number, unknown>(undefined, { transform: numberAttribute });\n    readonly togglerButton = viewChild<ElementRef<HTMLButtonElement>>('togglerButton');\n    readonly toggleWrapper = viewChild<ElementRef<HTMLDivElement>>('toggleWrapper');\n    readonly navTittle = viewChild<ElementRef<HTMLDivElement>>('navTittle');\n    /**\n     * This event will be emitted, when onscroll a new section becomes active.\n     */\n    readonly sectionEnter = output<EclInpageNavigationSectionEnterEvent>();\n\n    readonly eclNavigationLinkItems = contentChildren(EclInpageNavigationItemComponent, { descendants: true });\n    readonly eclNavigationList = contentChild(EclInpageNavigationListDirective);\n\n    /**\n     * Used for the mobile view, where user can select a section from the dropdown.\n     */\n    isButtonExpanded = false;\n    currentSectionElement: HTMLElement | null = null;\n    public isRtl = false;\n    public listMaxHeight: number;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private differ: IterableDiffer<EclInpageNavigationItemComponent>;\n    private isMobileBreakpoint = false;\n    private MIN_DISTANCE_TOP = 10;\n    private readonly ICON_SIZE_EC_THEME = '2xs';\n    private readonly ICON_SIZE_EU_THEME = 's';\n    private readonly TABLET_BREAKPOINT = 996;\n    private intersectionObserver: IntersectionObserver;\n    private eclRtlService = inject(EclRtlService);\n    private differs = inject(IterableDiffers);\n    private scrollDispatcher: ScrollDispatcher = inject(ScrollDispatcher);\n    private zone = inject(NgZone);\n    private cdkBreakpointObserver = inject(BreakpointObserver);\n    private viewportRuler = inject(ViewportRuler);\n    private eclInpageNavigationService = inject(EclInpageNavigationService);\n    private cdr = inject(ChangeDetectorRef);\n    private readonly platformId = inject(PLATFORM_ID);\n    private readonly doc = inject(DOCUMENT);\n    private readonly win = this.doc.defaultView; // Window | null\n    private readonly isBrowser = isPlatformBrowser(this.platformId);\n\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.zone.run(() => this.setListHeight());\n        });\n    }\n\n    ngOnInit(): void {\n        this.handleRtlChangeState();\n    }\n\n    ngAfterViewInit() {\n        if (!this.isBrowser) return;\n\n        this.subscribeToCDKScrollEvent();\n        this.observeBreakpointChanges();\n        this.viewportRuler.change(300)\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(() => this.zone.run(() => this.setListHeight()));\n\n        const togglerButton = this.togglerButton();\n        if (typeof IntersectionObserver !== 'undefined' && togglerButton?.nativeElement) {\n            this.intersectionObserver = new IntersectionObserver(() => this.setListHeight());\n            this.intersectionObserver.observe(togglerButton.nativeElement);\n        }\n    }\n\n    get hasNavigationList(): boolean {\n        return !!this.eclNavigationList();\n    }\n\n    get currentNavigationLinkItem(): EclInpageNavigationItemComponent {\n        return this.eclNavigationLinkItems().find((item) => item.sectionElement === this.currentSectionElement);\n    }\n\n    /**\n     * the size of the arrow-down icon, used in mobile view. There are different sizes for EC and EU themes.\n     */\n    get sizeIcon(): string {\n        if (this.eclThemeService.isECTheme()) {\n            return this.ICON_SIZE_EC_THEME;\n        } else {\n            return this.ICON_SIZE_EU_THEME;\n        }\n    }\n\n    get hasActiveSection(): boolean {\n        return !!this.currentSectionElement;\n    }\n\n    ngDoCheck(): void {\n        const diff = this.differ.diff(this.eclNavigationLinkItems());\n        if (diff) {\n            diff.forEachItem((item) => {\n                this.connectItemEvents(item.item);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n        const togglerButton = this.togglerButton();\n        if (this.intersectionObserver && togglerButton?.nativeElement) {\n            this.intersectionObserver.unobserve(togglerButton.nativeElement);\n            this.intersectionObserver.disconnect();\n        }\n    }\n\n    /**\n     * On mobile view - handle the dropdown toggle.\n     */\n    onExpandButtonClick(): void {\n        this.isButtonExpanded = !this.isButtonExpanded;\n        this.eclInpageNavigationService.eclInpageNavigationToggle(this.isButtonExpanded);\n    }\n\n    /**\n     * Dropdown keyboard navigation on mobile view.\n     * @param evt\n     */\n    onExpandButtonKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case 'Tab':\n                this.onExpandButtonTab(evt);\n                break;\n            case 'ArrowDown':\n                this.onExpandButtonArrowDown(evt);\n                break;\n            default:\n                break;\n        }\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            this.isRtl = rtlState;\n        });\n    }\n\n    /**\n     * Set the height of the list with the navigation items in px. So in case the full list cannot be displayed, a scroll will appear.\n     */\n    private setListHeight(): void {\n        if (!this.isBrowser) return;\n        const eclNavigationList = this.eclNavigationList();\n        if (!eclNavigationList) return;\n        if (!this.win) return;\n\n        const viewportHeight = this.win.innerHeight;\n        const viewportWidth = this.win.innerWidth;\n        let topPosition = 0;\n\n        if (viewportWidth < this.TABLET_BREAKPOINT) {\n            const toggleWrapper = this.toggleWrapper()?.nativeElement;\n            if (toggleWrapper) {\n                const styles = this.win.getComputedStyle(toggleWrapper);\n                topPosition =\n                    toggleWrapper.getBoundingClientRect().bottom +\n                    parseFloat(styles.marginBottom || '0');\n            }\n        } else if (this.eclTitle()) {\n            const titleEl = this.navTittle()?.nativeElement;\n            if (titleEl) topPosition = titleEl.getBoundingClientRect().bottom;\n        } else {\n            const listEl = eclNavigationList?.el?.nativeElement;\n            if (listEl) topPosition = listEl.getBoundingClientRect().top;\n        }\n\n        const availableSpace = viewportHeight - topPosition;\n        if (availableSpace > 0) {\n            this.listMaxHeight = availableSpace;\n            eclNavigationList.maxHeight.set(this.listMaxHeight);\n        }\n    }\n\n    private onExpandButtonArrowDown(evt: Event): void {\n        evt.preventDefault();\n        this.isButtonExpanded = true;\n        this.eclNavigationLinkItems().at(0).onFocus();\n    }\n\n    private onExpandButtonTab(evt: Event): void {\n        if ((evt as KeyboardEvent).shiftKey) {\n            evt.preventDefault();\n            this.eclNavigationLinkItems().at(this.eclNavigationLinkItems().length - 1).onFocus();\n        }\n    }\n\n    private connectItemEvents(item: EclInpageNavigationItemComponent): void {\n        item.itemArrowDown.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemArrowDown(item);\n        });\n\n        item.itemArrowUp.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemArrowUp(item);\n        });\n\n        item.itemTab.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onItemTab(item, evt);\n        });\n\n        item.itemEnter.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemEnter(item);\n        });\n\n        item.itemClick.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.selectNavigationItem(item.sectionElement);\n            if (item.sectionElement) {\n                item.sectionElement.scrollIntoView();\n                item.sectionElement.focus();\n            }\n            this.isButtonExpanded = false;\n        });\n    }\n\n    private onItemEnter(item: EclInpageNavigationItemComponent): void {\n        this.selectNavigationItem(item.sectionElement);\n        if (item.sectionElement) {\n            item.sectionElement.scrollIntoView();\n            if (item.sectionElement.tabIndex === -1) {\n                item.sectionElement.tabIndex = 0;\n                item.sectionElement.focus();\n                item.sectionElement.tabIndex = -1;\n            }\n        }\n        this.isButtonExpanded = false;\n    }\n\n    private onItemArrowDown(item: EclInpageNavigationItemComponent): void {\n        const index = this.eclNavigationLinkItems().indexOf(item);\n        const eclNavigationLinkItems = this.eclNavigationLinkItems();\n        if (index !== eclNavigationLinkItems.length - 1) {\n            eclNavigationLinkItems.at(index + 1).onFocus();\n        }\n    }\n\n    private onItemArrowUp(item: EclInpageNavigationItemComponent): void {\n        const index = this.eclNavigationLinkItems().indexOf(item);\n        if (index !== 0) {\n            this.eclNavigationLinkItems().at(index - 1).onFocus();\n        } else {\n            const togglerButton = this.togglerButton();\n            if (this.isMobileBreakpoint && togglerButton) {\n                this.isButtonExpanded = false;\n                togglerButton.nativeElement.focus();\n            }\n        }\n    }\n\n    private onItemTab(item: EclInpageNavigationItemComponent, evt: Event): void {\n        if (this.isMobileBreakpoint) {\n            if (!(evt as KeyboardEvent).shiftKey) {\n                const index = this.eclNavigationLinkItems().indexOf(item);\n                if (index === this.eclNavigationLinkItems().length - 1) {\n                    evt.preventDefault();\n                    this.togglerButton().nativeElement.focus();\n                }\n            }\n        }\n    }\n\n    private subscribeToCDKScrollEvent(): void {\n        if (!this.isBrowser) return;\n\n        this.scrollDispatcher\n            .scrolled()\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(() => {\n                this.zone.run(() => {\n                    const ids = this.eclNavigationLinkItems().map((item) => item.sectionId());\n\n                    const sectionElements = ids\n                        .map((id) => this.doc.querySelector<HTMLElement>(`#${id}`))\n                        .filter((el): el is HTMLElement => !!el);\n\n                    this.handleNavigationLinksHighlight(sectionElements);\n                    this.setListHeight();\n                });\n            });\n    }\n\n    private selectNavigationItem(itemElement: HTMLElement): void {\n        this.eclNavigationLinkItems().forEach((it) => {\n            it.isActive.set(it.sectionElement === itemElement);\n        });\n        this.cdr.markForCheck();\n    }\n\n    private handleNavigationLinksHighlight(sectionElements: HTMLElement[]): void {\n        const currentSectionElement = this.findActiveSectionElement(sectionElements);\n\n        if (currentSectionElement !== this.currentSectionElement) {\n            this.currentSectionElement = currentSectionElement ?? undefined as HTMLElement | null;\n            if (currentSectionElement) this.selectNavigationItem(currentSectionElement);\n\n            const sectionId = this.currentNavigationLinkItem?.sectionId();\n            this.sectionEnter.emit(new EclInpageNavigationSectionEnterEvent(sectionId));\n        }\n    }\n\n    private findActiveSectionElement(sectionElements: HTMLElement[]): HTMLElement | null {\n        if (!this.isBrowser || !this.win) return null;\n\n        let currentSection: HTMLElement | null = null;\n        const offset = this.MIN_DISTANCE_TOP + (this.offsetTop() ?? 0);\n\n        const isNearBottom =\n            this.win.innerHeight + this.win.scrollY >=\n            this.doc.documentElement.scrollHeight - 10;\n\n        for (const sectionElement of sectionElements) {\n            const rect = sectionElement.getBoundingClientRect();\n            const isAboveOffset = rect.top <= offset;\n            const isVisibleInViewport = rect.top < this.win.innerHeight;\n\n            if (isAboveOffset || (isVisibleInViewport && isNearBottom)) {\n                currentSection = sectionElement;\n            }\n        }\n\n        return currentSection;\n    }\n\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe([Breakpoints.Handset, Breakpoints.Tablet, Breakpoints.Small])\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((result) => {\n                this.isMobileBreakpoint = result.matches;\n            });\n    }\n}\n",
+            "sourceCode": "import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';\nimport { ScrollDispatcher, ViewportRuler } from '@angular/cdk/scrolling';\nimport { isPlatformBrowser } from '@angular/common';\nimport { AfterViewInit, ChangeDetectorRef, Component, DOCUMENT, DoCheck, ElementRef, IterableDiffer, IterableDiffers, NgZone, OnDestroy, OnInit, PLATFORM_ID, afterNextRender, contentChild, contentChildren, inject, input, numberAttribute, output, viewChild } from '@angular/core';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_STICKY_CONTAINER } from '@eui/ecl/components/ecl-sticky-container';\nimport { ECLBaseDirective, EclBaseEvent, EclRtlService, EclThemeService } from '@eui/ecl/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { EclInpageNavigationItemComponent } from './ecl-inpage-navigation-item.component';\nimport { EclInpageNavigationListDirective } from './ecl-inpage-navigation-list.directive';\nimport { EclInpageNavigationService } from './services/ecl-inpage-navigation.service';\n\nexport class EclInpageNavigationSectionEnterEvent extends EclBaseEvent {\n    constructor(public sectionId: string) {\n        super();\n    }\n}\n\n/**\n * The in-page navigation is a vertical menu containing (anchored) links to H2-headings on long content pages.\n * It gives the user an overview of the page contents and has a fixed position (does not move while scrolling) at either the left\n * side of a page on desktop or top-bar on mobile. This component helps users scan of the page quickly contents and may potentially\n * reduce vertical scrolling, allowing users to easily jump straight to the segment of the page.\n */\n@Component({\n    selector: 'ecl-inpage-navigation',\n    templateUrl: './ecl-inpage-navigation.component.html',\n    imports: [TranslatePipe, ...EUI_ECL_STICKY_CONTAINER, ...EUI_ECL_ICON],\n    styles: [\n        `\n            @media (min-width: 996px) {\n                .ecl-inpage-navigation__list {\n                    display: block !important;\n                }\n            }\n        `,\n    ],\n})\nexport class EclInpageNavigationComponent extends ECLBaseDirective implements OnInit, AfterViewInit, OnDestroy, DoCheck {\n    eclThemeService = inject(EclThemeService);\n\n    readonly eclTitle = input<string>(undefined);\n    /**\n     * Used to calculate component's position.\n     */\n    readonly marginTop = input<number>(undefined);\n    readonly marginBottom = input<number>(undefined);\n    /**\n     * Sets the offset from the top of the page (for example if there is a toolbar or header). Used to calculate scrolling behaviour.\n     */\n    readonly offsetTop = input<number, unknown>(undefined, { transform: numberAttribute });\n    readonly togglerButton = viewChild<ElementRef<HTMLButtonElement>>('togglerButton');\n    readonly toggleWrapper = viewChild<ElementRef<HTMLDivElement>>('toggleWrapper');\n    readonly navTittle = viewChild<ElementRef<HTMLDivElement>>('navTittle');\n    /**\n     * This event will be emitted, when onscroll a new section becomes active.\n     */\n    readonly sectionEnter = output<EclInpageNavigationSectionEnterEvent>();\n\n    readonly eclNavigationLinkItems = contentChildren(EclInpageNavigationItemComponent, { descendants: true });\n    readonly eclNavigationList = contentChild(EclInpageNavigationListDirective);\n\n    /**\n     * Used for the mobile view, where user can select a section from the dropdown.\n     */\n    isButtonExpanded = false;\n    currentSectionElement: HTMLElement | null = null;\n    public isRtl = false;\n    public listMaxHeight: number;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private differ: IterableDiffer<EclInpageNavigationItemComponent>;\n    private isMobileBreakpoint = false;\n    private MIN_DISTANCE_TOP = 10;\n    /**\n     * Extra spacing (px) kept between the sticky toggler and the target heading when scrolling to a section on mobile,\n     * so the heading is not flush against the toggler. Mirrors the spacing buffer used by the vanilla ECL\n     * `scroll-margin-top` rule (trigger height + spacing).\n     */\n    private readonly MOBILE_SCROLL_SPACING = 16;\n    private readonly ICON_SIZE_EC_THEME = '2xs';\n    private readonly ICON_SIZE_EU_THEME = 's';\n    private readonly TABLET_BREAKPOINT = 996;\n    private intersectionObserver: IntersectionObserver;\n    private eclRtlService = inject(EclRtlService);\n    private differs = inject(IterableDiffers);\n    private scrollDispatcher: ScrollDispatcher = inject(ScrollDispatcher);\n    private zone = inject(NgZone);\n    private cdkBreakpointObserver = inject(BreakpointObserver);\n    private viewportRuler = inject(ViewportRuler);\n    private eclInpageNavigationService = inject(EclInpageNavigationService);\n    private cdr = inject(ChangeDetectorRef);\n    private readonly platformId = inject(PLATFORM_ID);\n    private readonly doc = inject(DOCUMENT);\n    private readonly win = this.doc.defaultView; // Window | null\n    private readonly isBrowser = isPlatformBrowser(this.platformId);\n\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.zone.run(() => this.setListHeight());\n        });\n    }\n\n    ngOnInit(): void {\n        this.handleRtlChangeState();\n    }\n\n    ngAfterViewInit() {\n        if (!this.isBrowser) return;\n\n        this.subscribeToCDKScrollEvent();\n        this.observeBreakpointChanges();\n        this.viewportRuler.change(300)\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(() => this.zone.run(() => this.setListHeight()));\n\n        const togglerButton = this.togglerButton();\n        if (typeof IntersectionObserver !== 'undefined' && togglerButton?.nativeElement) {\n            this.intersectionObserver = new IntersectionObserver(() => this.setListHeight());\n            this.intersectionObserver.observe(togglerButton.nativeElement);\n        }\n    }\n\n    get hasNavigationList(): boolean {\n        return !!this.eclNavigationList();\n    }\n\n    get currentNavigationLinkItem(): EclInpageNavigationItemComponent {\n        return this.eclNavigationLinkItems().find((item) => item.sectionElement === this.currentSectionElement);\n    }\n\n    /**\n     * the size of the arrow-down icon, used in mobile view. There are different sizes for EC and EU themes.\n     */\n    get sizeIcon(): string {\n        if (this.eclThemeService.isECTheme()) {\n            return this.ICON_SIZE_EC_THEME;\n        } else {\n            return this.ICON_SIZE_EU_THEME;\n        }\n    }\n\n    get hasActiveSection(): boolean {\n        return !!this.currentSectionElement;\n    }\n\n    ngDoCheck(): void {\n        const diff = this.differ.diff(this.eclNavigationLinkItems());\n        if (diff) {\n            diff.forEachItem((item) => {\n                this.connectItemEvents(item.item);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n        const togglerButton = this.togglerButton();\n        if (this.intersectionObserver && togglerButton?.nativeElement) {\n            this.intersectionObserver.unobserve(togglerButton.nativeElement);\n            this.intersectionObserver.disconnect();\n        }\n    }\n\n    /**\n     * On mobile view - handle the dropdown toggle.\n     */\n    onExpandButtonClick(): void {\n        this.setButtonExpanded(!this.isButtonExpanded);\n    }\n\n    /**\n     * Single entry point for changing the dropdown expanded state. Keeps the local flag (used for the button's\n     * aria-expanded) and the shared service state (that drives the list's visibility class) in sync.\n     */\n    private setButtonExpanded(isExpanded: boolean): void {\n        this.isButtonExpanded = isExpanded;\n        this.eclInpageNavigationService.eclInpageNavigationToggle(isExpanded);\n    }\n\n    /**\n     * Dropdown keyboard navigation on mobile view.\n     * @param evt\n     */\n    onExpandButtonKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case 'Tab':\n                this.onExpandButtonTab(evt);\n                break;\n            case 'ArrowDown':\n                this.onExpandButtonArrowDown(evt);\n                break;\n            default:\n                break;\n        }\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            this.isRtl = rtlState;\n        });\n    }\n\n    /**\n     * Set the height of the list with the navigation items in px. So in case the full list cannot be displayed, a scroll will appear.\n     */\n    private setListHeight(): void {\n        if (!this.isBrowser) return;\n        const eclNavigationList = this.eclNavigationList();\n        if (!eclNavigationList) return;\n        if (!this.win) return;\n\n        const viewportHeight = this.win.innerHeight;\n        const viewportWidth = this.win.innerWidth;\n        let topPosition = 0;\n\n        if (viewportWidth < this.TABLET_BREAKPOINT) {\n            const toggleWrapper = this.toggleWrapper()?.nativeElement;\n            if (toggleWrapper) {\n                const styles = this.win.getComputedStyle(toggleWrapper);\n                topPosition =\n                    toggleWrapper.getBoundingClientRect().bottom +\n                    parseFloat(styles.marginBottom || '0');\n            }\n        } else if (this.eclTitle()) {\n            const titleEl = this.navTittle()?.nativeElement;\n            if (titleEl) topPosition = titleEl.getBoundingClientRect().bottom;\n        } else {\n            const listEl = eclNavigationList?.el?.nativeElement;\n            if (listEl) topPosition = listEl.getBoundingClientRect().top;\n        }\n\n        const availableSpace = viewportHeight - topPosition;\n        if (availableSpace > 0) {\n            this.listMaxHeight = availableSpace;\n            eclNavigationList.maxHeight.set(this.listMaxHeight);\n        }\n    }\n\n    private onExpandButtonArrowDown(evt: Event): void {\n        evt.preventDefault();\n        this.setButtonExpanded(true);\n        this.eclNavigationLinkItems().at(0).onFocus();\n    }\n\n    private onExpandButtonTab(evt: Event): void {\n        if ((evt as KeyboardEvent).shiftKey) {\n            evt.preventDefault();\n            this.eclNavigationLinkItems().at(this.eclNavigationLinkItems().length - 1).onFocus();\n        }\n    }\n\n    private connectItemEvents(item: EclInpageNavigationItemComponent): void {\n        item.itemArrowDown.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemArrowDown(item);\n        });\n\n        item.itemArrowUp.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemArrowUp(item);\n        });\n\n        item.itemTab.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onItemTab(item, evt);\n        });\n\n        item.itemEnter.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.onItemEnter(item);\n        });\n\n        item.itemClick.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.selectNavigationItem(item.sectionElement);\n            if (item.sectionElement) {\n                this.scrollToSection(item.sectionElement);\n                item.sectionElement.focus();\n            }\n            this.setButtonExpanded(false);\n        });\n    }\n\n    private onItemEnter(item: EclInpageNavigationItemComponent): void {\n        this.selectNavigationItem(item.sectionElement);\n        if (item.sectionElement) {\n            this.scrollToSection(item.sectionElement);\n            if (item.sectionElement.tabIndex === -1) {\n                item.sectionElement.tabIndex = 0;\n                item.sectionElement.focus();\n                item.sectionElement.tabIndex = -1;\n            }\n        }\n        this.setButtonExpanded(false);\n    }\n\n    /**\n     * Scrolls the target section into view. On desktop this is a plain scrollIntoView() (unchanged behaviour). On\n     * mobile the in-page navigation toggler is sticky at the top, so a top-aligned scroll would hide the heading\n     * underneath it; we therefore set `scroll-margin-top` on the target (sticky toggler height + spacing buffer) and\n     * let scrollIntoView() honour it. Using scroll-margin-top instead of a manual window.scrollTo() keeps this working\n     * regardless of which element is the actual scroll container (window or a nested scrollable wrapper).\n     */\n    private scrollToSection(sectionElement: HTMLElement): void {\n        if (!this.isBrowser) return;\n        const offset = this.getMobileScrollOffset();\n        sectionElement.style.scrollMarginTop = offset > 0 ? `${offset}px` : '';\n        sectionElement.scrollIntoView();\n    }\n\n    /**\n     * The offset (px) applied on mobile so that a scrolled-to heading clears the sticky toggler: the toggler height\n     * plus a spacing buffer. Returns 0 on desktop (no sticky toggler). Shared by the scroll logic and the scroll-spy\n     * so the heading lands exactly where the spy expects it, keeping the active item in sync after a click.\n     */\n    private getMobileScrollOffset(): number {\n        if (!this.isMobileBreakpoint) return 0;\n        const toggleWrapper = this.toggleWrapper()?.nativeElement;\n        if (!toggleWrapper) return 0;\n        return toggleWrapper.getBoundingClientRect().height + this.MOBILE_SCROLL_SPACING;\n    }\n\n    private onItemArrowDown(item: EclInpageNavigationItemComponent): void {\n        const index = this.eclNavigationLinkItems().indexOf(item);\n        const eclNavigationLinkItems = this.eclNavigationLinkItems();\n        if (index !== eclNavigationLinkItems.length - 1) {\n            eclNavigationLinkItems.at(index + 1).onFocus();\n        }\n    }\n\n    private onItemArrowUp(item: EclInpageNavigationItemComponent): void {\n        const index = this.eclNavigationLinkItems().indexOf(item);\n        if (index !== 0) {\n            this.eclNavigationLinkItems().at(index - 1).onFocus();\n        } else {\n            const togglerButton = this.togglerButton();\n            if (this.isMobileBreakpoint && togglerButton) {\n                this.setButtonExpanded(false);\n                togglerButton.nativeElement.focus();\n            }\n        }\n    }\n\n    private onItemTab(item: EclInpageNavigationItemComponent, evt: Event): void {\n        if (this.isMobileBreakpoint) {\n            if (!(evt as KeyboardEvent).shiftKey) {\n                const index = this.eclNavigationLinkItems().indexOf(item);\n                if (index === this.eclNavigationLinkItems().length - 1) {\n                    evt.preventDefault();\n                    this.togglerButton().nativeElement.focus();\n                }\n            }\n        }\n    }\n\n    private subscribeToCDKScrollEvent(): void {\n        if (!this.isBrowser) return;\n\n        this.scrollDispatcher\n            .scrolled()\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(() => {\n                this.zone.run(() => {\n                    const ids = this.eclNavigationLinkItems().map((item) => item.sectionId());\n\n                    const sectionElements = ids\n                        .map((id) => this.doc.querySelector<HTMLElement>(`#${id}`))\n                        .filter((el): el is HTMLElement => !!el);\n\n                    this.handleNavigationLinksHighlight(sectionElements);\n                    this.setListHeight();\n                });\n            });\n    }\n\n    private selectNavigationItem(itemElement: HTMLElement): void {\n        this.eclNavigationLinkItems().forEach((it) => {\n            it.isActive.set(it.sectionElement === itemElement);\n        });\n        this.cdr.markForCheck();\n    }\n\n    private handleNavigationLinksHighlight(sectionElements: HTMLElement[]): void {\n        const currentSectionElement = this.findActiveSectionElement(sectionElements);\n\n        if (currentSectionElement !== this.currentSectionElement) {\n            this.currentSectionElement = currentSectionElement ?? undefined as HTMLElement | null;\n            if (currentSectionElement) this.selectNavigationItem(currentSectionElement);\n\n            const sectionId = this.currentNavigationLinkItem?.sectionId();\n            this.sectionEnter.emit(new EclInpageNavigationSectionEnterEvent(sectionId));\n        }\n    }\n\n    private findActiveSectionElement(sectionElements: HTMLElement[]): HTMLElement | null {\n        if (!this.isBrowser || !this.win) return null;\n\n        let currentSection: HTMLElement | null = null;\n        // On mobile the heading is scrolled to sit just below the sticky toggler, so the spy must use that same\n        // offset; otherwise it would highlight the previous section. On desktop keep the original threshold.\n        const offset = this.isMobileBreakpoint\n            ? this.getMobileScrollOffset()\n            : this.MIN_DISTANCE_TOP + (this.offsetTop() ?? 0);\n\n        const isNearBottom =\n            this.win.innerHeight + this.win.scrollY >=\n            this.doc.documentElement.scrollHeight - 10;\n\n        for (const sectionElement of sectionElements) {\n            const rect = sectionElement.getBoundingClientRect();\n            const isAboveOffset = rect.top <= offset;\n            const isVisibleInViewport = rect.top < this.win.innerHeight;\n\n            if (isAboveOffset || (isVisibleInViewport && isNearBottom)) {\n                currentSection = sectionElement;\n            }\n        }\n\n        return currentSection;\n    }\n\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe([Breakpoints.Handset, Breakpoints.Tablet, Breakpoints.Small])\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((result) => {\n                this.isMobileBreakpoint = result.matches;\n            });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n            @media (min-width: 996px) {\n                .ecl-inpage-navigation__list {\n                    display: block !important;\n                }\n            }\n        \n",
             "jsdoctags": [
                 {
-                    "pos": 1277,
-                    "end": 1754,
+                    "pos": 1262,
+                    "end": 1739,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -58687,7 +58379,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 91,
+                "line": 97,
                 "rawdescription": "\n"
             },
             "extends": [
@@ -58706,7 +58398,7 @@
                         "name": "hasNavigationList",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 121,
+                        "line": 127,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -58717,7 +58409,7 @@
                         "name": "currentNavigationLinkItem",
                         "type": "unknown",
                         "returnType": "EclInpageNavigationItemComponent",
-                        "line": 125,
+                        "line": 131,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -58728,7 +58420,7 @@
                         "name": "sizeIcon",
                         "type": "string",
                         "returnType": "string",
-                        "line": 132,
+                        "line": 138,
                         "rawdescription": "\n\nthe size of the arrow-down icon, used in mobile view. There are different sizes for EC and EU themes.\n",
                         "description": "<p>the size of the arrow-down icon, used in mobile view. There are different sizes for EC and EU themes.</p>\n"
                     }
@@ -58739,7 +58431,7 @@
                         "name": "hasActiveSection",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 140,
+                        "line": 146,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -64991,7 +64683,7 @@
         },
         {
             "name": "EclMenuItemComponent",
-            "id": "component-EclMenuItemComponent-faf8f48747e3fb73e8ffeeb94f71ae8c4d5a06d40a4f45ded7bef8ccc35eb12e3969e37df8239bb1e7d53fb4be6b57c09f5203d1bb1ea35777405a1b268c9690",
+            "id": "component-EclMenuItemComponent-2e828b9fa40b69437b34ee8534c8041d5f0329c62e7f0de43e9f6bb1b0fc888748f0edb953a4cbcde823fcc0192e5393d366ce1c2ad78727e2b78670410f86bc",
             "file": "packages/ecl/components/ecl-menu/ecl-menu/ecl-menu-item.component.ts",
             "encapsulation": [
                 "ViewEncapsulation.None"
@@ -65019,7 +64711,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 77,
+                    "line": 78,
                     "type": "string",
                     "decorators": []
                 },
@@ -65030,19 +64722,20 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 67,
+                    "line": 68,
                     "type": "string",
                     "decorators": []
                 },
                 {
                     "coverageIgnore": false,
+                    "required": false,
                     "name": "isCurrent",
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 79,
+                    "line": 80,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -65053,7 +64746,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 68,
+                    "line": 69,
                     "type": "string",
                     "decorators": []
                 },
@@ -65067,7 +64760,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Custom attributes, to be added to the <a> tag of the menu item.</p>\n",
-                    "line": 83,
+                    "line": 84,
                     "rawdescription": "\n\nCustom attributes, to be added to the <a> tag of the menu item.\n",
                     "modifierKind": [
                         148
@@ -65084,7 +64777,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 75,
+                    "line": 76,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -65101,7 +64794,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 76,
+                    "line": 77,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -65118,7 +64811,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 74,
+                    "line": 75,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -65135,7 +64828,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 78,
+                    "line": 79,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -65152,7 +64845,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>When in mobile view, use this property to set aria-label for the toggle items button (to expand item&#39;s children).</p>\n",
-                    "line": 72,
+                    "line": 73,
                     "rawdescription": "\n\nWhen in mobile view, use this property to set aria-label for the toggle items button (to expand item's children).\n",
                     "modifierKind": [
                         148
@@ -65210,7 +64903,7 @@
                     "defaultValue": "new EventEmitter<EclMenuItemCaretEvent>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 125,
+                    "line": 126,
                     "type": "EventEmitter"
                 },
                 {
@@ -65219,7 +64912,7 @@
                     "defaultValue": "new EventEmitter<EclMenuItemFocusEvent>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 132,
+                    "line": 133,
                     "type": "EventEmitter"
                 },
                 {
@@ -65230,7 +64923,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEvent that is emited on clicking the caret button to expand item's children in mobile mode.\n",
                     "description": "<p>Event that is emited on clicking the caret button to expand item&#39;s children in mobile mode.</p>\n",
-                    "line": 129,
+                    "line": 130,
                     "type": "EventEmitter"
                 },
                 {
@@ -65239,7 +64932,7 @@
                     "defaultValue": "new EventEmitter<EclMenuItemHoverOutEvent>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 130,
+                    "line": 131,
                     "type": "EventEmitter"
                 },
                 {
@@ -65248,7 +64941,7 @@
                     "defaultValue": "new EventEmitter<EclMenuItemKeydownEvent>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 133,
+                    "line": 134,
                     "type": "EventEmitter"
                 },
                 {
@@ -65257,7 +64950,7 @@
                     "defaultValue": "new EventEmitter<EclMenuItemSelectEvent>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 124,
+                    "line": 125,
                     "type": "EventEmitter"
                 },
                 {
@@ -65266,7 +64959,7 @@
                     "defaultValue": "new EventEmitter<EclMenuItemSelectEvent>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 131,
+                    "line": 132,
                     "type": "EventEmitter"
                 },
                 {
@@ -65277,7 +64970,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThis event is emited when the keyboard nav reaches the last item in mobile view.\nThen the next focused element should be the 'close' btn.\n",
                     "description": "<p>This event is emited when the keyboard nav reaches the last item in mobile view.\nThen the next focused element should be the &#39;close&#39; btn.</p>\n",
-                    "line": 138,
+                    "line": 139,
                     "type": "EventEmitter"
                 }
             ],
@@ -65292,7 +64985,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 65,
+                    "line": 66,
                     "rawdescription": "\n"
                 },
                 {
@@ -65304,7 +64997,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 85,
+                    "line": 86,
                     "rawdescription": "\n"
                 },
                 {
@@ -65317,7 +65010,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Set to &#39;true&#39;, when item has more than 13 chidren and the overlay needs to use the full available space.</p>\n",
-                    "line": 89,
+                    "line": 90,
                     "rawdescription": "\n\nSet to 'true', when item has more than 13 chidren and the overlay needs to use the full available space.\n"
                 },
                 {
@@ -65330,7 +65023,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 90,
+                    "line": 91,
                     "rawdescription": "\n"
                 },
                 {
@@ -65343,7 +65036,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 91,
+                    "line": 92,
                     "rawdescription": "\n"
                 },
                 {
@@ -65356,7 +65049,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Used when menu has overlay, to show if the item is currently displayed.</p>\n",
-                    "line": 95,
+                    "line": 96,
                     "rawdescription": "\n\nUsed when menu has overlay, to show if the item is currently displayed.\n"
                 },
                 {
@@ -65369,7 +65062,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The <button> element of the menu item, when item has children.</p>\n",
-                    "line": 122,
+                    "line": 123,
                     "rawdescription": "\n\nThe <button> element of the menu item, when item has children.\n",
                     "modifierKind": [
                         148
@@ -65385,7 +65078,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The <a> element of the menu item, when there are no children.</p>\n",
-                    "line": 118,
+                    "line": 119,
                     "rawdescription": "\n\nThe <a> element of the menu item, when there are no children.\n",
                     "modifierKind": [
                         148
@@ -65401,7 +65094,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 114,
+                    "line": 115,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -65433,7 +65126,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 360,
+                    "line": 374,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThis method calculates height and width of an item, depending the maximum of lines(rows) allowed.\nDepends on the 'maxLines' property of the parent menu component.\n",
@@ -65441,8 +65134,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 12055,
-                                "end": 12063,
+                                "pos": 12705,
+                                "end": 12713,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -65455,8 +65148,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 12049,
-                                "end": 12054,
+                                "pos": 12699,
+                                "end": 12704,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -65467,8 +65160,8 @@
                         },
                         {
                             "name": {
-                                "pos": 12142,
-                                "end": 12160,
+                                "pos": 12792,
+                                "end": 12810,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -65481,8 +65174,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 12136,
-                                "end": 12141,
+                                "pos": 12786,
+                                "end": 12791,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -65493,8 +65186,8 @@
                         },
                         {
                             "tagName": {
-                                "pos": 12169,
-                                "end": 12176,
+                                "pos": 12819,
+                                "end": 12826,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -65512,7 +65205,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 182,
+                    "line": 196,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -65525,7 +65218,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 208,
+                    "line": 222,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -65547,7 +65240,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 266,
+                    "line": 280,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nManages the keyboard navigation when the current element is the button of the menu item.\n",
@@ -65555,8 +65248,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 8936,
-                                "end": 8939,
+                                "pos": 9586,
+                                "end": 9589,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -65569,8 +65262,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 8930,
-                                "end": 8935,
+                                "pos": 9580,
+                                "end": 9585,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -65588,7 +65281,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 246,
+                    "line": 260,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nManages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n the next root menu item.\n",
@@ -65601,7 +65294,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 258,
+                    "line": 272,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nManages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n the previous root menu item.\n",
@@ -65614,7 +65307,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 236,
+                    "line": 250,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nManages the state when the item is focused, when navigating with keyboard and the navigation is coming from the submenu.\n",
@@ -65636,7 +65329,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 229,
+                    "line": 243,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWhen clicking the caret button, to expand item's children. Used in mobile view.\n",
@@ -65644,8 +65337,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7843,
-                                "end": 7846,
+                                "pos": 8493,
+                                "end": 8496,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -65658,8 +65351,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7837,
-                                "end": 7842,
+                                "pos": 8487,
+                                "end": 8492,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -65686,7 +65379,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 217,
+                    "line": 231,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -65721,7 +65414,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 213,
+                    "line": 227,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -65756,7 +65449,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 172,
+                    "line": 186,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -65791,7 +65484,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 177,
+                    "line": 191,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -65826,7 +65519,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 316,
+                    "line": 330,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nManages the keyboard navigation when the current element is the <a> tag of the menu item.\n",
@@ -65834,8 +65527,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 10682,
-                                "end": 10685,
+                                "pos": 11332,
+                                "end": 11335,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -65848,8 +65541,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 10676,
-                                "end": 10681,
+                                "pos": 11326,
+                                "end": 11331,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -65928,14 +65621,14 @@
             "description": "<p>This component represents a root menu item. Adds styling and functionality to menu item.</p>\n",
             "rawdescription": "\n\nThis component represents a root menu item. Adds styling and functionality to menu item.\n",
             "type": "component",
-            "sourceCode": "import { NgTemplateOutlet } from '@angular/common';\nimport {\n    AfterContentInit,\n    afterNextRender,\n    Component,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    inject,\n    Input,\n    OnDestroy,\n    Output,\n    Renderer2,\n    ViewEncapsulation,\n    DOCUMENT,\n    input,\n    contentChild,\n    viewChild,\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 { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { ECLBaseDirective, KeyCode } from '@eui/ecl/core';\nimport { Subject } from 'rxjs';\nimport { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';\nimport { EclMenuMegaComponent } from '../ecl-menu-mega';\nimport {\n    EclMenuItemCaretEvent,\n    EclMenuItemFocusEvent,\n    EclMenuItemHoverEvent,\n    EclMenuItemHoverOutEvent,\n    EclMenuItemKeydownEvent,\n    EclMenuItemParentFocusEvent,\n    EclMenuItemSelectEvent,\n} from '../events';\nimport { EclMenuItem } from '../models/ecl-menu-item.model';\n\nconst enum ColTrigger {\n    COL1_TRIGGER = 5,\n    COL2_TRIGGER = 9,\n    COL3_TRIGGER = 13,\n}\n\n/**\n * This component represents a root menu item. Adds styling and functionality to menu item.\n */\n@Component({\n    selector: 'ecl-menu-item',\n    templateUrl: './ecl-menu-item.component.html',\n    imports: [NgTemplateOutlet, RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        role: 'listitem',\n        '[class]': 'cssClasses',\n        '[class.ecl-menu__item--has-children]': 'hasEclChildrenDataAttribute',\n        '[attr.aria-haspopup]': 'hasEclChildrenDataAttribute',\n        '[attr.data-expanded]': 'isDataExpanded',\n        '(mouseenter)': 'onItemMouseEnter($event)',\n        '(mouseleave)': 'onItemMouseLeave($event)',\n    },\n})\nexport class EclMenuItemComponent extends ECLBaseDirective implements EclMenuItem, AfterContentInit, OnDestroy {\n    el = inject(ElementRef);\n\n    @Input() id: string;\n    @Input() label: string;\n    /**\n     * When in mobile view, use this property to set aria-label for the toggle items button (to expand item's children).\n     */\n    readonly toggleAriaLabel = input<string>(undefined);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    readonly routerLink = input<string | any[]>(null);\n    readonly queryParams = input<Params | null>(null);\n    readonly queryParamsHandling = input<QueryParamsHandling>(null);\n    @Input() href = '';\n    readonly target = input('');\n    @Input() isCurrent = false;\n    /**\n     * Custom attributes, to be added to the <a> tag of the menu item.\n     */\n    readonly linkExtraAttributes = input<Record<string, string>>(undefined);\n\n    isExpanded: boolean;\n    /**\n     * Set to 'true', when item has more than 13 chidren and the overlay needs to use the full available space.\n     */\n    isFull = false;\n    isHovered = false;\n    isMobileBreakpoint = false;\n    /**\n     * Used when menu has overlay, to show if the item is currently displayed.\n     */\n    isVisible = true;\n\n    private readonly doc = inject(DOCUMENT);\n    private readonly window = this.doc.defaultView; // Window | null\n\n    /**\n     * The default role of the item is 'listitem' and should not be changed.\n     */\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-menu__item'),\n            this.isCurrent ? 'ecl-menu__item--current' : '',\n            this.isExpanded ? 'ecl-menu__item--expanded' : '',\n            this.getClassDependingChildrenCnt(),\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    readonly submenu = contentChild(forwardRef(() => EclMenuMegaComponent));\n    /**\n     * The <a> element of the menu item, when there are no children.\n     */\n    readonly menuLink = viewChild<ElementRef<HTMLAnchorElement>>('menuLink');\n    /**\n     * The <button> element of the menu item, when item has children.\n     */\n    readonly menuButton = viewChild(EclButtonComponent);\n\n    @Output() menuItemSelect = new EventEmitter<EclMenuItemSelectEvent>();\n    @Output() menuItemCaret = new EventEmitter<EclMenuItemCaretEvent>();\n    /**\n     * Event that is emited on clicking the caret button to expand item's children in mobile mode.\n     */\n    @Output() menuItemHover = new EventEmitter<EclMenuItemHoverEvent>();\n    @Output() menuItemHoverOut = new EventEmitter<EclMenuItemHoverOutEvent>();\n    @Output() menuMegaItemSelect = new EventEmitter<EclMenuItemSelectEvent>();\n    @Output() menuItemFocus = new EventEmitter<EclMenuItemFocusEvent>();\n    @Output() menuItemKeydown = new EventEmitter<EclMenuItemKeydownEvent>();\n    /**\n     * This event is emited when the keyboard nav reaches the last item in mobile view.\n     * Then the next focused element should be the 'close' btn.\n     */\n    @Output() menuMegaLastItemTab = new EventEmitter<void>();\n\n    get hasEclChildrenDataAttribute(): boolean {\n        return this.hasChildren || undefined;\n    }\n\n    get isDataExpanded(): boolean {\n        return this.hasChildren ? this.isHovered : null;\n    }\n\n    get ariaCurrent(): boolean {\n        return this.isCurrent ? true : null;\n    }\n\n    get hasChildren(): boolean {\n        return !!this.submenu();\n    }\n\n    get children(): EclMenuItem[] {\n        return this.hasChildren ? this.submenu().eclMenuMegaItems.toArray() : [];\n    }\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private renderer = inject(Renderer2);\n    private appShell = inject(EuiAppShellService);\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n            this.setExtraAttributesForLink(this.menuLink()?.nativeElement, this.linkExtraAttributes());\n        });\n    }\n\n    onItemMouseEnter(evt: MouseEvent): void {\n        if (this.isMobileBreakpoint) return;\n        this.menuItemHover.next(new EclMenuItemHoverEvent(this, evt));\n    }\n\n    onItemMouseLeave(evt: MouseEvent): void {\n        if (this.isMobileBreakpoint) return;\n        this.menuItemHoverOut.next(new EclMenuItemHoverOutEvent(this, evt));\n    }\n\n    ngAfterContentInit(): void {\n        // Subscibe to submenu component events.\n        const submenu = this.submenu();\n        if (submenu) {\n            submenu.menuItemSelect.pipe(takeUntil(this.destroy$)).subscribe((it: EclMenuItemSelectEvent) => {\n                this.menuMegaItemSelect.next(new EclMenuItemSelectEvent(it.menuItem, it.domEvent));\n            });\n            submenu.menuMegaItemParentFocus.pipe(takeUntil(this.destroy$)).subscribe((it: EclMenuItemParentFocusEvent) => {\n                if (!this.isMobileBreakpoint) {\n                    this.onFocusFromSubmenu();\n                }\n            });\n            submenu.menuMegaLastItemTab.pipe(takeUntil(this.destroy$)).subscribe(() => {\n                if (this.isMobileBreakpoint) {\n                    this.menuMegaLastItemTab.next();\n                }\n            });\n\n            if (this.hasSubmenuAnySelections()) {\n                this.isCurrent = true;\n            }\n        }\n\n        // this.tabindex = this.routerLink || this.href ? 0 : -1;\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    onItemFocus(evt: FocusEvent): void {\n        this.menuItemFocus.next(new EclMenuItemFocusEvent(this, evt));\n    }\n\n    onItemClick(evt: Event): void {\n        this.menuItemSelect.next(new EclMenuItemSelectEvent(this, evt));\n\n        if (!this.href) {\n            evt.stopPropagation();\n        }\n    }\n\n    /**\n     * When clicking the caret button, to expand item's children. Used in mobile view.\n     * @param evt\n     */\n    onItemCaretClick(evt: MouseEvent): void {\n        this.menuItemCaret.next(new EclMenuItemCaretEvent(this, evt));\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from the submenu.\n     */\n    onFocusFromSubmenu(): void {\n        this.onButtonFocus();\n        this.isHovered = false;\n        this.isExpanded = false;\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n     *  the next root menu item.\n     */\n    onFocusFromNext(): void {\n        if (this.menuButton()) {\n            this.onButtonFocus();\n        } else {\n            this.onLinkFocus();\n        }\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n     *  the previous root menu item.\n     */\n    onFocusFromPrev(): void {\n        this.onLinkFocus();\n    }\n\n    /**\n     * Manages the keyboard navigation when the current element is the button of the menu item.\n     * @param evt\n     */\n    onButtonKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                if (this.isHovered) {\n                    this.selectFirstMegaMenuItem();\n                } else {\n                    this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                }\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.onLinkFocus();\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                evt.preventDefault();\n                this.onLinkFocus();\n                break;\n            }\n            case KeyCode.TAB: {\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ENTER: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * Manages the keyboard navigation when the current element is the <a> tag of the menu item.\n     * @param evt\n     */\n    onLinkKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                this.onLinkNextFocus(evt);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                evt.preventDefault();\n                this.onLinkNextFocus(evt);\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ENTER: {\n                this.onItemClick(evt);\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                evt.preventDefault();\n                this.onLinkEscape(evt);\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * This method calculates height and width of an item, depending the maximum of lines(rows) allowed.\n     * Depends on the 'maxLines' property of the parent menu component.\n     * @param maxLines - property that sets the maximum possible lines in a menu item.\n     * @param isMobileBreakpoint\n     * @returns\n     */\n    checkMenuItem(maxLines: number, isMobileBreakpoint: boolean): void {\n        if (maxLines < 1) return;\n\n        const currentItem = this.el.nativeElement;\n        const currentLink = this.menuLink().nativeElement;\n        if (isMobileBreakpoint) {\n            this.renderer.setStyle(currentLink, 'width', '100%');\n            return;\n        }\n        this.renderer.setStyle(currentItem, 'alignItems', 'flex-start');\n        const linkStyle = this.window.getComputedStyle(currentLink);\n\n        const maxHeight = this.getMenuItemLinkMaxHeight(linkStyle, maxLines);\n\n        if (currentLink.offsetHeight > maxHeight) {\n            this.changeMenuItemLinkWidth(currentLink, maxLines, linkStyle);\n        }\n        this.renderer.removeStyle(currentItem, 'alignItems');\n    }\n\n    private onLinkEscape(evt: Event): void {\n        const menuButton = this.menuButton();\n        if (menuButton) {\n            menuButton.el.nativeElement.focus();\n            evt.stopPropagation();\n        } else {\n            this.menuLink().nativeElement.blur();\n        }\n    }\n\n    private selectFirstMegaMenuItem(): void {\n        this.submenu().selectFirstSubItem();\n    }\n\n    private onLinkFocus(): void {\n        this.menuLink().nativeElement.focus();\n    }\n\n    private onLinkNextFocus(evt: Event): void {\n        if (this.menuButton()) {\n            this.onButtonFocus();\n        } else {\n            this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n        }\n    }\n\n    private onButtonFocus(): void {\n        this.menuButton().el.nativeElement.focus();\n    }\n\n    private getMenuItemLinkMaxHeight(linkStyle: CSSStyleDeclaration, maxLines: number): number {\n        return parseInt(linkStyle.lineHeight, 10) * maxLines + parseInt(linkStyle.paddingTop, 10) + parseInt(linkStyle.paddingBottom, 10);\n    }\n\n    /**\n     * Calculates width of a menu item, depending on maximum lines of text allowed.\n     * @param currentLink\n     * @param maxLines\n     * @param linkStyle\n     * @returns\n     */\n    private changeMenuItemLinkWidth(currentLink: HTMLAnchorElement, maxLines: number, linkStyle: CSSStyleDeclaration): void {\n        this.renderer.setStyle(currentLink, 'white-space', 'nowrap');\n        const linkWidth = currentLink.offsetWidth;\n        if (maxLines === 1) {\n            this.renderer.setStyle(currentLink, 'width', `${linkWidth + parseInt(linkStyle.paddingLeft, 10) + parseInt(linkStyle.paddingRight, 10)}px`);\n            this.renderer.removeStyle(currentLink, 'white-space');\n            return;\n        }\n        const textSize = currentLink.text.length;\n        const letterWidth = Math.ceil(linkWidth / textSize);\n        const wordsArray = currentLink.text.trim().split(' ');\n        const goalWidth = Math.ceil(linkWidth / maxLines);\n        const firstWord = wordsArray[0];\n        let cnt = 1;\n        let wordWidth = Math.ceil((firstWord.length + 1) * letterWidth);\n        while (wordWidth < goalWidth) {\n            wordWidth += Math.ceil((wordsArray[cnt].length + 1) * letterWidth);\n            cnt++;\n        }\n        this.renderer.setStyle(currentLink, 'width', `${wordWidth + parseInt(linkStyle.paddingLeft, 10) + parseInt(linkStyle.paddingRight, 10)}px`);\n        this.renderer.removeStyle(currentLink, 'white-space');\n    }\n\n    private getClassDependingChildrenCnt(): string {\n        if (this.hasChildren) {\n            if (this.submenu().eclMenuMegaItems.length < ColTrigger.COL1_TRIGGER) {\n                return 'ecl-menu__item--col1';\n            } else if (this.submenu().eclMenuMegaItems.length < ColTrigger.COL2_TRIGGER) {\n                return 'ecl-menu__item--col2';\n            } else if (this.submenu().eclMenuMegaItems.length < ColTrigger.COL3_TRIGGER) {\n                return 'ecl-menu__item--col3';\n            } else {\n                this.isFull = true;\n                return 'ecl-menu__item--full';\n            }\n        }\n        return '';\n    }\n\n    private hasSubmenuAnySelections(): boolean {\n        const submenu = this.submenu();\n        return submenu && !!submenu.eclMenuMegaItems.find((it) => it.isCurrent);\n    }\n\n    private setExtraAttributesForLink(link: HTMLElement, linkExtraAttributes: Record<string, string>): void {\n        if (linkExtraAttributes) {\n            Object.keys(linkExtraAttributes).forEach((key) => {\n                if (key !== 'href' && key !== 'routerLink') {\n                    this.renderer.setAttribute(link, key, linkExtraAttributes[key]);\n                }\n            });\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.appShell.getState<any>('breakpoints')\n            .pipe(\n                map(bp => !!(bp?.isMobile || bp?.isTablet || bp?.isLtLargeTablet)), // xs/sm/md/lg (< 1140px)\n                distinctUntilChanged(),\n                takeUntil(this.destroy$),\n            )\n            .subscribe((isMobile) => {\n                this.isMobileBreakpoint = isMobile;\n            });\n    }\n}\n",
+            "sourceCode": "import { NgTemplateOutlet } from '@angular/common';\nimport {\n    AfterContentInit,\n    afterNextRender,\n    Component,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    inject,\n    Input,\n    OnDestroy,\n    Output,\n    Renderer2,\n    ViewEncapsulation,\n    DOCUMENT,\n    booleanAttribute,\n    input,\n    contentChild,\n    viewChild,\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 { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { ECLBaseDirective, KeyCode } from '@eui/ecl/core';\nimport { Subject } from 'rxjs';\nimport { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';\nimport { EclMenuMegaComponent } from '../ecl-menu-mega';\nimport {\n    EclMenuItemCaretEvent,\n    EclMenuItemFocusEvent,\n    EclMenuItemHoverEvent,\n    EclMenuItemHoverOutEvent,\n    EclMenuItemKeydownEvent,\n    EclMenuItemParentFocusEvent,\n    EclMenuItemSelectEvent,\n} from '../events';\nimport { EclMenuItem } from '../models/ecl-menu-item.model';\n\nconst enum ColTrigger {\n    COL1_TRIGGER = 5,\n    COL2_TRIGGER = 9,\n    COL3_TRIGGER = 13,\n}\n\n/**\n * This component represents a root menu item. Adds styling and functionality to menu item.\n */\n@Component({\n    selector: 'ecl-menu-item',\n    templateUrl: './ecl-menu-item.component.html',\n    imports: [NgTemplateOutlet, RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        role: 'listitem',\n        '[class]': 'cssClasses',\n        '[class.ecl-menu__item--has-children]': 'hasEclChildrenDataAttribute',\n        '[attr.aria-haspopup]': 'hasEclChildrenDataAttribute',\n        '[attr.data-expanded]': 'isDataExpanded',\n        '(mouseenter)': 'onItemMouseEnter($event)',\n        '(mouseleave)': 'onItemMouseLeave($event)',\n    },\n})\nexport class EclMenuItemComponent extends ECLBaseDirective implements EclMenuItem, AfterContentInit, OnDestroy {\n    el = inject(ElementRef);\n\n    @Input() id: string;\n    @Input() label: string;\n    /**\n     * When in mobile view, use this property to set aria-label for the toggle items button (to expand item's children).\n     */\n    readonly toggleAriaLabel = input<string>(undefined);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    readonly routerLink = input<string | any[]>(null);\n    readonly queryParams = input<Params | null>(null);\n    readonly queryParamsHandling = input<QueryParamsHandling>(null);\n    @Input() href = '';\n    readonly target = input('');\n    @Input({ transform: booleanAttribute }) isCurrent = false;\n    /**\n     * Custom attributes, to be added to the <a> tag of the menu item.\n     */\n    readonly linkExtraAttributes = input<Record<string, string>>(undefined);\n\n    isExpanded: boolean;\n    /**\n     * Set to 'true', when item has more than 13 chidren and the overlay needs to use the full available space.\n     */\n    isFull = false;\n    isHovered = false;\n    isMobileBreakpoint = false;\n    /**\n     * Used when menu has overlay, to show if the item is currently displayed.\n     */\n    isVisible = true;\n\n    private readonly doc = inject(DOCUMENT);\n    private readonly window = this.doc.defaultView; // Window | null\n\n    /**\n     * The default role of the item is 'listitem' and should not be changed.\n     */\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-menu__item'),\n            this.isCurrent ? 'ecl-menu__item--current' : '',\n            this.isExpanded ? 'ecl-menu__item--expanded' : '',\n            this.getClassDependingChildrenCnt(),\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    readonly submenu = contentChild(forwardRef(() => EclMenuMegaComponent));\n    /**\n     * The <a> element of the menu item, when there are no children.\n     */\n    readonly menuLink = viewChild<ElementRef<HTMLAnchorElement>>('menuLink');\n    /**\n     * The <button> element of the menu item, when item has children.\n     */\n    readonly menuButton = viewChild(EclButtonComponent);\n\n    @Output() menuItemSelect = new EventEmitter<EclMenuItemSelectEvent>();\n    @Output() menuItemCaret = new EventEmitter<EclMenuItemCaretEvent>();\n    /**\n     * Event that is emited on clicking the caret button to expand item's children in mobile mode.\n     */\n    @Output() menuItemHover = new EventEmitter<EclMenuItemHoverEvent>();\n    @Output() menuItemHoverOut = new EventEmitter<EclMenuItemHoverOutEvent>();\n    @Output() menuMegaItemSelect = new EventEmitter<EclMenuItemSelectEvent>();\n    @Output() menuItemFocus = new EventEmitter<EclMenuItemFocusEvent>();\n    @Output() menuItemKeydown = new EventEmitter<EclMenuItemKeydownEvent>();\n    /**\n     * This event is emited when the keyboard nav reaches the last item in mobile view.\n     * Then the next focused element should be the 'close' btn.\n     */\n    @Output() menuMegaLastItemTab = new EventEmitter<void>();\n\n    get hasEclChildrenDataAttribute(): boolean {\n        return this.hasChildren || undefined;\n    }\n\n    get isDataExpanded(): boolean {\n        return this.hasChildren ? this.isHovered : null;\n    }\n\n    /**\n     * 'aria-current' is set to 'page' only when this item itself is the current page, and not when it is\n     * marked current merely because one of its children is the active item (in that case the child link\n     * carries 'aria-current=\"page\"'). Derived from live state so it stays correct whether 'isCurrent' is set\n     * at render time or updated on selection.\n     */\n    get ariaCurrent(): string | null {\n        return this.isCurrent && !this.hasCurrentChild ? 'page' : null;\n    }\n\n    /**\n     * Whether any child (sub-item) is the current item.\n     */\n    get hasCurrentChild(): boolean {\n        return this.children.some((child) => child.isCurrent);\n    }\n\n    get hasChildren(): boolean {\n        return !!this.submenu();\n    }\n\n    get children(): EclMenuItem[] {\n        return this.hasChildren ? this.submenu().eclMenuMegaItems.toArray() : [];\n    }\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private renderer = inject(Renderer2);\n    private appShell = inject(EuiAppShellService);\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n            this.setExtraAttributesForLink(this.menuLink()?.nativeElement, this.linkExtraAttributes());\n        });\n    }\n\n    onItemMouseEnter(evt: MouseEvent): void {\n        if (this.isMobileBreakpoint) return;\n        this.menuItemHover.next(new EclMenuItemHoverEvent(this, evt));\n    }\n\n    onItemMouseLeave(evt: MouseEvent): void {\n        if (this.isMobileBreakpoint) return;\n        this.menuItemHoverOut.next(new EclMenuItemHoverOutEvent(this, evt));\n    }\n\n    ngAfterContentInit(): void {\n        // Subscibe to submenu component events.\n        const submenu = this.submenu();\n        if (submenu) {\n            submenu.menuItemSelect.pipe(takeUntil(this.destroy$)).subscribe((it: EclMenuItemSelectEvent) => {\n                this.menuMegaItemSelect.next(new EclMenuItemSelectEvent(it.menuItem, it.domEvent));\n            });\n            submenu.menuMegaItemParentFocus.pipe(takeUntil(this.destroy$)).subscribe((it: EclMenuItemParentFocusEvent) => {\n                if (!this.isMobileBreakpoint) {\n                    this.onFocusFromSubmenu();\n                }\n            });\n            submenu.menuMegaLastItemTab.pipe(takeUntil(this.destroy$)).subscribe(() => {\n                if (this.isMobileBreakpoint) {\n                    this.menuMegaLastItemTab.next();\n                }\n            });\n\n            if (this.hasSubmenuAnySelections()) {\n                this.isCurrent = true;\n            }\n        }\n\n        // this.tabindex = this.routerLink || this.href ? 0 : -1;\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    onItemFocus(evt: FocusEvent): void {\n        this.menuItemFocus.next(new EclMenuItemFocusEvent(this, evt));\n    }\n\n    onItemClick(evt: Event): void {\n        this.menuItemSelect.next(new EclMenuItemSelectEvent(this, evt));\n\n        if (!this.href) {\n            evt.stopPropagation();\n        }\n    }\n\n    /**\n     * When clicking the caret button, to expand item's children. Used in mobile view.\n     * @param evt\n     */\n    onItemCaretClick(evt: MouseEvent): void {\n        this.menuItemCaret.next(new EclMenuItemCaretEvent(this, evt));\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from the submenu.\n     */\n    onFocusFromSubmenu(): void {\n        this.onButtonFocus();\n        this.isHovered = false;\n        this.isExpanded = false;\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n     *  the next root menu item.\n     */\n    onFocusFromNext(): void {\n        if (this.menuButton()) {\n            this.onButtonFocus();\n        } else {\n            this.onLinkFocus();\n        }\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n     *  the previous root menu item.\n     */\n    onFocusFromPrev(): void {\n        this.onLinkFocus();\n    }\n\n    /**\n     * Manages the keyboard navigation when the current element is the button of the menu item.\n     * @param evt\n     */\n    onButtonKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                if (this.isHovered) {\n                    this.selectFirstMegaMenuItem();\n                } else {\n                    this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                }\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.onLinkFocus();\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                evt.preventDefault();\n                this.onLinkFocus();\n                break;\n            }\n            case KeyCode.TAB: {\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ENTER: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * Manages the keyboard navigation when the current element is the <a> tag of the menu item.\n     * @param evt\n     */\n    onLinkKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                this.onLinkNextFocus(evt);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                evt.preventDefault();\n                this.onLinkNextFocus(evt);\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ENTER: {\n                this.onItemClick(evt);\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                evt.preventDefault();\n                this.onLinkEscape(evt);\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * This method calculates height and width of an item, depending the maximum of lines(rows) allowed.\n     * Depends on the 'maxLines' property of the parent menu component.\n     * @param maxLines - property that sets the maximum possible lines in a menu item.\n     * @param isMobileBreakpoint\n     * @returns\n     */\n    checkMenuItem(maxLines: number, isMobileBreakpoint: boolean): void {\n        if (maxLines < 1) return;\n\n        const currentItem = this.el.nativeElement;\n        const currentLink = this.menuLink().nativeElement;\n        if (isMobileBreakpoint) {\n            this.renderer.setStyle(currentLink, 'width', '100%');\n            return;\n        }\n        this.renderer.setStyle(currentItem, 'alignItems', 'flex-start');\n        const linkStyle = this.window.getComputedStyle(currentLink);\n\n        const maxHeight = this.getMenuItemLinkMaxHeight(linkStyle, maxLines);\n\n        if (currentLink.offsetHeight > maxHeight) {\n            this.changeMenuItemLinkWidth(currentLink, maxLines, linkStyle);\n        }\n        this.renderer.removeStyle(currentItem, 'alignItems');\n    }\n\n    private onLinkEscape(evt: Event): void {\n        const menuButton = this.menuButton();\n        if (menuButton) {\n            menuButton.el.nativeElement.focus();\n            evt.stopPropagation();\n        } else {\n            this.menuLink().nativeElement.blur();\n        }\n    }\n\n    private selectFirstMegaMenuItem(): void {\n        this.submenu().selectFirstSubItem();\n    }\n\n    private onLinkFocus(): void {\n        this.menuLink().nativeElement.focus();\n    }\n\n    private onLinkNextFocus(evt: Event): void {\n        if (this.menuButton()) {\n            this.onButtonFocus();\n        } else {\n            this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n        }\n    }\n\n    private onButtonFocus(): void {\n        this.menuButton().el.nativeElement.focus();\n    }\n\n    private getMenuItemLinkMaxHeight(linkStyle: CSSStyleDeclaration, maxLines: number): number {\n        return parseInt(linkStyle.lineHeight, 10) * maxLines + parseInt(linkStyle.paddingTop, 10) + parseInt(linkStyle.paddingBottom, 10);\n    }\n\n    /**\n     * Calculates width of a menu item, depending on maximum lines of text allowed.\n     * @param currentLink\n     * @param maxLines\n     * @param linkStyle\n     * @returns\n     */\n    private changeMenuItemLinkWidth(currentLink: HTMLAnchorElement, maxLines: number, linkStyle: CSSStyleDeclaration): void {\n        this.renderer.setStyle(currentLink, 'white-space', 'nowrap');\n        const linkWidth = currentLink.offsetWidth;\n        if (maxLines === 1) {\n            this.renderer.setStyle(currentLink, 'width', `${linkWidth + parseInt(linkStyle.paddingLeft, 10) + parseInt(linkStyle.paddingRight, 10)}px`);\n            this.renderer.removeStyle(currentLink, 'white-space');\n            return;\n        }\n        const textSize = currentLink.text.length;\n        const letterWidth = Math.ceil(linkWidth / textSize);\n        const wordsArray = currentLink.text.trim().split(' ');\n        const goalWidth = Math.ceil(linkWidth / maxLines);\n        const firstWord = wordsArray[0];\n        let cnt = 1;\n        let wordWidth = Math.ceil((firstWord.length + 1) * letterWidth);\n        while (wordWidth < goalWidth) {\n            wordWidth += Math.ceil((wordsArray[cnt].length + 1) * letterWidth);\n            cnt++;\n        }\n        this.renderer.setStyle(currentLink, 'width', `${wordWidth + parseInt(linkStyle.paddingLeft, 10) + parseInt(linkStyle.paddingRight, 10)}px`);\n        this.renderer.removeStyle(currentLink, 'white-space');\n    }\n\n    private getClassDependingChildrenCnt(): string {\n        if (this.hasChildren) {\n            if (this.submenu().eclMenuMegaItems.length < ColTrigger.COL1_TRIGGER) {\n                return 'ecl-menu__item--col1';\n            } else if (this.submenu().eclMenuMegaItems.length < ColTrigger.COL2_TRIGGER) {\n                return 'ecl-menu__item--col2';\n            } else if (this.submenu().eclMenuMegaItems.length < ColTrigger.COL3_TRIGGER) {\n                return 'ecl-menu__item--col3';\n            } else {\n                this.isFull = true;\n                return 'ecl-menu__item--full';\n            }\n        }\n        return '';\n    }\n\n    private hasSubmenuAnySelections(): boolean {\n        const submenu = this.submenu();\n        return submenu && !!submenu.eclMenuMegaItems.find((it) => it.isCurrent);\n    }\n\n    private setExtraAttributesForLink(link: HTMLElement, linkExtraAttributes: Record<string, string>): void {\n        if (linkExtraAttributes) {\n            Object.keys(linkExtraAttributes).forEach((key) => {\n                if (key !== 'href' && key !== 'routerLink') {\n                    this.renderer.setAttribute(link, key, linkExtraAttributes[key]);\n                }\n            });\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.appShell.getState<any>('breakpoints')\n            .pipe(\n                map(bp => !!(bp?.isMobile || bp?.isTablet || bp?.isLtLargeTablet)), // xs/sm/md/lg (< 1140px)\n                distinctUntilChanged(),\n                takeUntil(this.destroy$),\n            )\n            .subscribe((isMobile) => {\n                this.isMobileBreakpoint = isMobile;\n            });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 1294,
-                    "end": 1393,
+                    "pos": 1316,
+                    "end": 1415,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -65950,7 +65643,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 162,
+                "line": 176,
                 "rawdescription": "\n"
             },
             "extends": [
@@ -65968,7 +65661,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 103,
+                        "line": 104,
                         "rawdescription": "\n\nThe default role of the item is 'listitem' and should not be changed.\n",
                         "description": "<p>The default role of the item is &#39;listitem&#39; and should not be changed.</p>\n"
                     }
@@ -65979,7 +65672,7 @@
                         "name": "hasEclChildrenDataAttribute",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 140,
+                        "line": 141,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -65990,7 +65683,7 @@
                         "name": "isDataExpanded",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 144,
+                        "line": 145,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -65999,11 +65692,22 @@
                     "name": "ariaCurrent",
                     "getSignature": {
                         "name": "ariaCurrent",
+                        "type": "unknown",
+                        "returnType": "string | null",
+                        "line": 155,
+                        "rawdescription": "\n\n'aria-current' is set to 'page' only when this item itself is the current page, and not when it is\nmarked current merely because one of its children is the active item (in that case the child link\ncarries 'aria-current=\"page\"'). Derived from live state so it stays correct whether 'isCurrent' is set\nat render time or updated on selection.\n",
+                        "description": "<p>&#39;aria-current&#39; is set to &#39;page&#39; only when this item itself is the current page, and not when it is\nmarked current merely because one of its children is the active item (in that case the child link\ncarries &#39;aria-current=&quot;page&quot;&#39;). Derived from live state so it stays correct whether &#39;isCurrent&#39; is set\nat render time or updated on selection.</p>\n"
+                    }
+                },
+                "hasCurrentChild": {
+                    "name": "hasCurrentChild",
+                    "getSignature": {
+                        "name": "hasCurrentChild",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 148,
-                        "rawdescription": "\n",
-                        "description": ""
+                        "line": 162,
+                        "rawdescription": "\n\nWhether any child (sub-item) is the current item.\n",
+                        "description": "<p>Whether any child (sub-item) is the current item.</p>\n"
                     }
                 },
                 "hasChildren": {
@@ -66012,7 +65716,7 @@
                         "name": "hasChildren",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 152,
+                        "line": 166,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -66023,7 +65727,7 @@
                         "name": "children",
                         "type": "[]",
                         "returnType": "EclMenuItem[]",
-                        "line": 156,
+                        "line": 170,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -82815,7 +82519,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/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>"
+            "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 isIconOnly 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>Mastodon</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"linkedin\" href=\"https://www.linkedin.com/company/european-commission\"\n                isInverted>LinkedIn</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"bluesky\" href=\"https://bsky.app/profile/ec.europa.eu\"\n                isInverted>Bluesky</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"facebook\" href=\"https://www.facebook.com/EuropeanCommission\"\n                isInverted>Facebook</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"youtube\" href=\"https://www.youtube.com/user/eutube\"\n                isInverted>YouTube</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>Other</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 isIconOnly 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>Mastodon</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"linkedin\" href=\"https://www.linkedin.com/company/european-commission\"\n                isInverted>LinkedIn</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"bluesky\" href=\"https://bsky.app/profile/ec.europa.eu\"\n                isInverted>Bluesky</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"facebook\" href=\"https://www.facebook.com/EuropeanCommission\"\n                isInverted>Facebook</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"youtube\" href=\"https://www.youtube.com/user/eutube\"\n                isInverted>YouTube</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>Other</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>\n"
         },
         {
             "name": "EclSiteHeaderActionComponent",
@@ -84430,10 +84134,11 @@
         },
         {
             "name": "EclSiteHeaderLanguageComponent",
-            "id": "component-EclSiteHeaderLanguageComponent-8d83b2bdcc74673ec7fc4585b1fc9cc96c013ee64a0e713025217ce9bd2f79ccfa1c6406ce41e1e79d0040a209bc785f0be27cca0ade433c9ea4e55fbba6df2c",
+            "id": "component-EclSiteHeaderLanguageComponent-6d5a8dabfc452efabf51524b958206330b0e8d969c92a72ff623dbe1b45bee987ed4a81174ab72b108458c5b8639f088adba2c57c6cb65b7ccf06266d617d7e0",
             "file": "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -84510,7 +84215,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThie event is emited, when language link, showing the current language is clicked.\n",
                     "description": "<p>Thie event is emited, when language link, showing the current language is clicked.</p>\n",
-                    "line": 66,
+                    "line": 62,
                     "type": "EventEmitter"
                 },
                 {
@@ -84521,7 +84226,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThie event is emited, when user selects a new language from the dropdown.\n",
                     "description": "<p>Thie event is emited, when user selects a new language from the dropdown.</p>\n",
-                    "line": 70,
+                    "line": 66,
                     "type": "EventEmitter"
                 }
             ],
@@ -84536,7 +84241,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 51,
+                    "line": 56,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
@@ -84552,7 +84257,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 50,
+                    "line": 55,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
@@ -84568,7 +84273,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 106,
+                    "line": 100,
                     "rawdescription": "\n"
                 },
                 {
@@ -84581,7 +84286,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Array of EU languages, that can be selected for the current site.</p>\n",
-                    "line": 101,
+                    "line": 95,
                     "rawdescription": "\n\nArray of EU languages, that can be selected for the current site.\n"
                 },
                 {
@@ -84594,7 +84299,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 52,
+                    "line": 57,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
@@ -84609,7 +84314,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>This property is used for dropdown positioning on the screen.</p>\n",
-                    "line": 90,
+                    "line": 84,
                     "rawdescription": "\n\nThis property is used for dropdown positioning on the screen.\n"
                 },
                 {
@@ -84622,7 +84327,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 74,
+                    "line": 68,
                     "rawdescription": "\n"
                 },
                 {
@@ -84634,7 +84339,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>This property is used for dropdown positioning on the screen.</p>\n",
-                    "line": 82,
+                    "line": 76,
                     "rawdescription": "\n\nThis property is used for dropdown positioning on the screen.\n"
                 },
                 {
@@ -84646,7 +84351,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>This property is used for dropdown positioning on the screen.</p>\n",
-                    "line": 78,
+                    "line": 72,
                     "rawdescription": "\n\nThis property is used for dropdown positioning on the screen.\n"
                 },
                 {
@@ -84658,25 +84363,9 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>This property is used for dropdown positioning on the screen.</p>\n",
-                    "line": 86,
+                    "line": 80,
                     "rawdescription": "\n\nThis property is used for dropdown positioning on the screen.\n"
                 },
-                {
-                    "name": "LANGUAGE_MAX_COLUMNS",
-                    "coverageIgnore": false,
-                    "defaultValue": "8",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "number",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 73,
-                    "rawdescription": "\n",
-                    "modifierKind": [
-                        148
-                    ]
-                },
                 {
                     "name": "languageArrowPosition",
                     "coverageIgnore": false,
@@ -84686,7 +84375,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>This property is used for dropdown positioning on the screen.</p>\n",
-                    "line": 94,
+                    "line": 88,
                     "rawdescription": "\n\nThis property is used for dropdown positioning on the screen.\n"
                 },
                 {
@@ -84699,41 +84388,9 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 95,
+                    "line": 89,
                     "rawdescription": "\n"
                 },
-                {
-                    "name": "languageLinkElement",
-                    "coverageIgnore": false,
-                    "defaultValue": "viewChild('languageLink', { read: ElementRef })",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "<p>The link to open the popover dialog.</p>\n",
-                    "line": 61,
-                    "rawdescription": "\n\nThe link to open the popover dialog.\n",
-                    "modifierKind": [
-                        148
-                    ]
-                },
-                {
-                    "name": "languagePopover",
-                    "coverageIgnore": false,
-                    "defaultValue": "viewChild(EclSiteHeaderLanguagePopoverComponent)",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "<p>The language popover, that shows all available languages (configured in the config file of the current site).</p>\n",
-                    "line": 57,
-                    "rawdescription": "\n\nThe language popover, that shows all available languages (configured in the config file of the current site).\n",
-                    "modifierKind": [
-                        148
-                    ]
-                },
                 {
                     "name": "leftPosition",
                     "coverageIgnore": false,
@@ -84743,25 +84400,9 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 97,
+                    "line": 91,
                     "rawdescription": "\n"
                 },
-                {
-                    "name": "MOBILE_BREAKPOINT",
-                    "coverageIgnore": false,
-                    "defaultValue": "768",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "number",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 72,
-                    "rawdescription": "\n",
-                    "modifierKind": [
-                        148
-                    ]
-                },
                 {
                     "name": "nonEuColumnsCount",
                     "coverageIgnore": false,
@@ -84772,7 +84413,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 107,
+                    "line": 101,
                     "rawdescription": "\n"
                 },
                 {
@@ -84785,7 +84426,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Array of non-EU languages, that can be selected for the current site.</p>\n",
-                    "line": 105,
+                    "line": 99,
                     "rawdescription": "\n\nArray of non-EU languages, that can be selected for the current site.\n"
                 },
                 {
@@ -84797,7 +84438,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 96,
+                    "line": 90,
                     "rawdescription": "\n"
                 }
             ],
@@ -84809,11 +84450,14 @@
                     "optional": false,
                     "returnType": "string",
                     "typeParameters": [],
-                    "line": 143,
+                    "line": 145,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
-                    "description": ""
+                    "description": "",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "hasLanguageCodes",
@@ -84822,14 +84466,11 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 200,
+                    "line": 196,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
-                    "description": "",
-                    "modifierKind": [
-                        125
-                    ]
+                    "description": ""
                 },
                 {
                     "name": "ngAfterViewInit",
@@ -84838,11 +84479,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 130,
+                    "line": 135,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nAfter view is initialized -> calculate popover position and initialize languages, that are configured in the config file\n of the current site.\n",
-                    "description": "<p>After view is initialized -&gt; calculate popover position and initialize languages, that are configured in the config file\n of the current site.</p>\n"
+                    "rawdescription": "\n\nAfter view is initialized -> set up resize repositioning and initialize languages, that are configured in the config file\n of the current site.\n",
+                    "description": "<p>After view is initialized -&gt; set up resize repositioning and initialize languages, that are configured in the config file\n of the current site.</p>\n"
                 },
                 {
                     "name": "ngOnDestroy",
@@ -84851,7 +84492,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 138,
+                    "line": 140,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -84864,7 +84505,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 122,
+                    "line": 127,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -84877,19 +84518,13 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 188,
+                    "line": 185,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nClose the dropdown, when clicking outside of the component.\n",
                     "description": "<p>Close the dropdown, when clicking outside of the component.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'eclClickOutside'"
-                        }
-                    ],
                     "modifierKind": [
-                        171
+                        124
                     ]
                 },
                 {
@@ -84899,19 +84534,13 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 196,
+                    "line": 192,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nClose the dropdown, when pressing ESC key.\n",
                     "description": "<p>Close the dropdown, when pressing ESC key.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'document:keydown.escape'"
-                        }
-                    ],
                     "modifierKind": [
-                        171
+                        124
                     ]
                 },
                 {
@@ -84930,16 +84559,19 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 151,
+                    "line": 153,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nToggle the language dropdown when clicking the link, showing the current language.\n",
                     "description": "<p>Toggle the language dropdown when clicking the link, showing the current language.</p>\n",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5256,
-                                "end": 5259,
+                                "pos": 5258,
+                                "end": 5261,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -84952,8 +84584,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 5250,
-                                "end": 5255,
+                                "pos": 5252,
+                                "end": 5257,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -84980,11 +84612,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 173,
+                    "line": 171,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -85015,11 +84650,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 177,
+                    "line": 175,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -85076,44 +84714,8 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 118,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
-            "hostListeners": [
-                {
-                    "coverageIgnore": false,
-                    "name": "document:keydown.escape",
-                    "args": [],
-                    "argsDecorator": [],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nClose the dropdown, when pressing ESC key.\n",
-                    "description": "<p>Close the dropdown, when pressing ESC key.</p>\n",
-                    "line": 196
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "eclClickOutside",
-                    "args": [],
-                    "argsDecorator": [],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nClose the dropdown, when clicking outside of the component.\n",
-                    "description": "<p>Close the dropdown, when clicking outside of the component.</p>\n",
-                    "line": 188
-                }
-            ],
+            "hostBindings": [],
+            "hostListeners": [],
             "standalone": false,
             "imports": [
                 {
@@ -85139,14 +84741,14 @@
             "description": "<p>This component is used to switch between the languages of the application. Shows the current language, when clicked,\n opens a language selector.</p>\n",
             "rawdescription": "\n\nThis component is used to switch between the languages of the application. Shows the current language, when clicked,\n opens a language selector.\n",
             "type": "component",
-            "sourceCode": "import {\n    AfterViewInit,\n    Component,\n    DOCUMENT,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    HostListener,\n    inject,\n    OnDestroy,\n    OnInit,\n    Output,\n    viewChild,\n} from '@angular/core';\nimport { UpperCasePipe } from '@angular/common';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { EuiEuLanguages, GLOBAL_CONFIG_TOKEN, GlobalConfig, I18nService } from '@eui/core';\nimport { EuiLanguage } from '@eui/base';\nimport { ECLBaseDirective, ECLClickOutsideDirective, EclRtlService, EclThemeService } from '@eui/ecl/core';\nimport { Subject, takeUntil } from 'rxjs';\nimport { EclSiteHeaderLanguageClickEvent, EclSiteHeaderLanguageCloseEvent, EclSiteHeaderLanguageSelectedEvent } from '../events';\nimport { EclSiteHeaderLanguagePopoverComponent } from './ecl-site-header-language-popover.component';\nimport { EclAreaDataService } from '../services/ecl-area-data.service';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n/**\n * This component is used to switch between the languages of the application. Shows the current language, when clicked,\n *  opens a language selector.\n */\n@Component({\n    selector: 'ecl-site-header-language',\n    templateUrl: './ecl-site-header-language.component.html',\n    imports: [A11yModule, TranslatePipe, UpperCasePipe, ...EUI_ECL_ICON, EclSiteHeaderLanguagePopoverComponent],\n    hostDirectives: [\n        {\n            directive: ECLClickOutsideDirective,\n            outputs: ['eclClickOutside'],\n        },\n    ],\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\nexport class EclSiteHeaderLanguageComponent extends ECLBaseDirective implements OnInit, AfterViewInit, OnDestroy {\n    protected eclThemeService = inject(EclThemeService);\n    protected config = inject<GlobalConfig>(GLOBAL_CONFIG_TOKEN, { optional: true });\n    protected i18nService = inject(I18nService);\n\n    /**\n     * The language popover, that shows all available languages (configured in the config file of the current site).\n     */\n    readonly languagePopover = viewChild(EclSiteHeaderLanguagePopoverComponent);\n    /**\n     * The link to open the popover dialog.\n     */\n    readonly languageLinkElement = viewChild('languageLink', { read: ElementRef });\n\n    /**\n     * Thie event is emited, when language link, showing the current language is clicked.\n     */\n    @Output() languageClick = new EventEmitter<EclSiteHeaderLanguageClickEvent>();\n    /**\n     * Thie event is emited, when user selects a new language from the dropdown.\n     */\n    @Output() languageSelected = new EventEmitter<EclSiteHeaderLanguageSelectedEvent>();\n\n    readonly MOBILE_BREAKPOINT = 768;\n    readonly LANGUAGE_MAX_COLUMNS = 8;\n    isLanguagesDropdownVisible = false;\n    /**\n     * This property is used for dropdown positioning on the screen.\n     */\n    isPushRight: boolean;\n    /**\n     * This property is used for dropdown positioning on the screen.\n     */\n    isPushLeft: boolean;\n    /**\n     * This property is used for dropdown positioning on the screen.\n     */\n    isStack: boolean;\n    /**\n     * This property is used for dropdown positioning on the screen.\n     */\n    isFull: boolean;\n    /**\n     * This property is used for dropdown positioning on the screen.\n     */\n    languageArrowPosition: string;\n    languageCode = 'en';\n    rightPosition: number;\n    leftPosition: number;\n    /**\n     * Array of EU languages, that can be selected for the current site.\n     */\n    euLanguages: EuiLanguage[] = [];\n    /**\n     * Array of non-EU languages, that can be selected for the current site.\n     */\n    nonEuLanguages: EuiLanguage[] = [];\n    euColumnsCount = 1;\n    nonEuColumnsCount = 1;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private _languages: EuiLanguage[] = [];\n    private parentHeaderWidth: number;\n    private isRtl = false;\n    private eclAreaDataService = inject(EclAreaDataService);\n    private eclRtlService = inject(EclRtlService);\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly window = this.document.defaultView; // Window | null\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-site-header__language')].join(' ').trim();\n    }\n\n    ngOnInit(): void {\n        this.handleRtlChangeState();\n    }\n\n    /**\n     * After view is initialized -> calculate popover position and initialize languages, that are configured in the config file\n     *  of the current site.\n     */\n    ngAfterViewInit(): void {\n        this.eclAreaDataService.dataSubject$.pipe(takeUntil(this.destroy$)).subscribe(\n            parentHeaderRect => {\n                this.calculatePopoverPosition(parentHeaderRect.right, parentHeaderRect.left);\n            });\n        this.handleInitialConfiguredLanguages();\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.complete();\n    }\n\n    getLanguageLabel(): string {\n        return `${EuiEuLanguages.getLanguageByCode(this.languageCode)?.label} - ${this.languageCode.toUpperCase()}`;\n    }\n\n    /**\n     * Toggle the language dropdown when clicking the link, showing the current language.\n     * @param evt\n     */\n    onLanguageClick(evt: Event): void {\n        this.isLanguagesDropdownVisible = !this.isLanguagesDropdownVisible;\n        if( !this.isLanguagesDropdownVisible ) {\n            setTimeout(() => {\n                this.isFull = false;\n                this.isStack = false;\n                this.isPushRight = false;\n                this.rightPosition = undefined;\n                this.leftPosition = undefined;\n                this.languageArrowPosition = undefined;\n            });\n        }\n\n        // If the dropdown is visible, we set the max-height of the dropdown, so that it can be scrolled.\n        if (this.isLanguagesDropdownVisible) {\n            setTimeout(() => this.languagePopover().setLanguageContentMaxHeight());\n        }\n        this.languageClick.next(new EclSiteHeaderLanguageClickEvent());\n\n        evt.preventDefault();\n    }\n\n    onLanguageClosed(evt: EclSiteHeaderLanguageCloseEvent): void {\n        this.isLanguagesDropdownVisible = false;\n    }\n\n    onLanguageSelected(evt: EclSiteHeaderLanguageSelectedEvent): void {\n        this.languageCode = evt.language.code;\n        this.updateCurrentLanguage(evt.language.code);\n        this.isLanguagesDropdownVisible = false;\n        this.languageSelected.next(new EclSiteHeaderLanguageSelectedEvent(evt.language));\n    }\n\n    /**\n     * Close the dropdown, when clicking outside of the component.\n     */\n    @HostListener('eclClickOutside')\n    onClickOutside(): void {\n        this.isLanguagesDropdownVisible = false;\n    }\n\n    /**\n     * Close the dropdown, when pressing ESC key.\n     */\n    @HostListener('document:keydown.escape')\n    onEscapeKeydownHandler(): void {\n        this.isLanguagesDropdownVisible = false;\n    }\n\n    public hasLanguageCodes(): boolean {\n        return this._languages && this._languages.length > 0;\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            this.isRtl = rtlState;\n        });\n    }\n\n    /**\n     * Calculate the number of columns for EU and non-EU languages, depending on languages' count.\n     */\n    private updateLanguages(): void {\n\n        this.euLanguages = this._languages.filter((item) => EuiEuLanguages.isEuLanguage(item.code));\n\n        this.nonEuLanguages = this._languages.filter((item) => !EuiEuLanguages.isEuLanguage(item.code));\n\n        this.euColumnsCount = Math.ceil(this.euLanguages.length / this.LANGUAGE_MAX_COLUMNS);\n\n        this.nonEuColumnsCount = Math.ceil(this.nonEuLanguages.length / this.LANGUAGE_MAX_COLUMNS);\n    }\n\n    private calculatePopoverPosition( parentHeaderRight: number, parentHeaderLeft: number): void {\n        setTimeout(() => {\n            if (this.hasLanguageCodes()) {\n                const arrowSize = '0.5rem';\n                const linkRect = this.languageLinkElement().nativeElement.getBoundingClientRect();\n                const popoverRect = this.languagePopover()?.el.nativeElement.getBoundingClientRect();\n                const screenWidth = this.window.innerWidth;\n                const vw = Math.max(document.documentElement.clientWidth || 0, this.window.innerWidth || 0);\n\n                this.isFull = false;\n                this.isStack = false;\n                this.isPushRight = false;\n                this.isPushLeft = false;\n                this.rightPosition = undefined;\n                this.leftPosition = undefined;\n                this.languageArrowPosition = undefined;\n\n                if (popoverRect?.width > this.parentHeaderWidth) {\n                    this.isStack = true;\n                    if (this.nonEuLanguages.length) {\n                        this.nonEuColumnsCount = Math.max(this.euColumnsCount, this.nonEuColumnsCount);\n                    }\n                }\n                if (this.isRtl && popoverRect?.left < 0) {\n                    const arrowPosition = linkRect.right - parentHeaderLeft - linkRect.width / 2;\n                    this.isPushLeft = true;\n                    this.leftPosition = -linkRect.left + parentHeaderLeft;\n                    this.languageArrowPosition = `${arrowPosition}px`;\n                } else if (!this.isRtl && popoverRect?.right > screenWidth) {\n                    const arrowPosition = parentHeaderRight - linkRect.right + linkRect.width / 2;\n\n                    this.isPushRight = true;\n                    this.rightPosition = -parentHeaderRight + linkRect.right;\n                    this.languageArrowPosition = `calc(${arrowPosition}px - ${arrowSize})`;\n                }\n\n                if (vw < this.MOBILE_BREAKPOINT) {\n                    const arrowPosition = popoverRect?.right - linkRect.right + linkRect.width / 2;\n\n                    this.isFull = true;\n                    this.languageArrowPosition = `calc(${arrowPosition}px - ${arrowSize})`;\n                }\n            }\n        });\n    }\n\n    private getConfiguredLanguages(): void {\n        const languages: string[] = this.config?.i18n?.i18nService?.languages.map(lang => {\n            return (typeof lang !== 'string') ? (lang as EuiLanguage).code : lang\n        }) || [];\n        this._languages = EuiEuLanguages.getAllLanguagesByCodes(languages);\n\n        if (this.config?.i18n?.i18nService?.defaultLanguage) {\n            this.languageCode = this.config?.i18n?.i18nService?.defaultLanguage;\n        } else {\n            if (this._languages && this._languages.length > 0) {\n                this.languageCode = this._languages[0].code;\n            }\n        }\n    }\n\n    private updateCurrentLanguage(lang: string): void {\n        this.i18nService.updateState({\n            activeLang: lang,\n        });\n    }\n\n    private handleInitialConfiguredLanguages(): void {\n        setTimeout(() => {\n            if (this._languages === undefined || this._languages.length === 0) {\n                this.getConfiguredLanguages();\n            }\n            this.updateLanguages();\n        });\n    }\n}\n",
+            "sourceCode": "import {\n    AfterViewInit,\n    Component,\n    DOCUMENT,\n    ElementRef,\n    EventEmitter,\n    inject,\n    OnDestroy,\n    OnInit,\n    Output,\n    viewChild,\n} from '@angular/core';\nimport { UpperCasePipe } from '@angular/common';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { EuiEuLanguages, GLOBAL_CONFIG_TOKEN, GlobalConfig, I18nService } from '@eui/core';\nimport { EuiLanguage } from '@eui/base';\nimport { ECLBaseDirective, ECLClickOutsideDirective, EclRtlService, EclThemeService } from '@eui/ecl/core';\nimport { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';\nimport { EclSiteHeaderLanguageClickEvent, EclSiteHeaderLanguageCloseEvent, EclSiteHeaderLanguageSelectedEvent } from '../events';\nimport { EclSiteHeaderLanguagePopoverComponent } from './ecl-site-header-language-popover.component';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n/** Half the arrow's own width, matching ECL's `arrowSize`. */\nconst ARROW_SIZE = '0.5rem';\n\n/**\n * This component is used to switch between the languages of the application. Shows the current language, when clicked,\n *  opens a language selector.\n */\n@Component({\n    selector: 'ecl-site-header-language',\n    templateUrl: './ecl-site-header-language.component.html',\n    imports: [A11yModule, TranslatePipe, UpperCasePipe, ...EUI_ECL_ICON, EclSiteHeaderLanguagePopoverComponent],\n    hostDirectives: [\n        {\n            directive: ECLClickOutsideDirective,\n            outputs: ['eclClickOutside'],\n        },\n    ],\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n    host: {\n        '[class]': 'cssClasses',\n        '(eclClickOutside)': 'onClickOutside()',\n        '(document:keydown.escape)': 'onEscapeKeydownHandler()',\n    },\n})\nexport class EclSiteHeaderLanguageComponent extends ECLBaseDirective implements OnInit, AfterViewInit, OnDestroy {\n    protected eclThemeService = inject(EclThemeService);\n    protected config = inject<GlobalConfig>(GLOBAL_CONFIG_TOKEN, { optional: true });\n    protected i18nService = inject(I18nService);\n\n    /**\n     * Thie event is emited, when language link, showing the current language is clicked.\n     */\n    @Output() languageClick = new EventEmitter<EclSiteHeaderLanguageClickEvent>();\n    /**\n     * Thie event is emited, when user selects a new language from the dropdown.\n     */\n    @Output() languageSelected = new EventEmitter<EclSiteHeaderLanguageSelectedEvent>();\n\n    isLanguagesDropdownVisible = false;\n    /**\n     * This property is used for dropdown positioning on the screen.\n     */\n    isPushRight: boolean;\n    /**\n     * This property is used for dropdown positioning on the screen.\n     */\n    isPushLeft: boolean;\n    /**\n     * This property is used for dropdown positioning on the screen.\n     */\n    isStack: boolean;\n    /**\n     * This property is used for dropdown positioning on the screen.\n     */\n    isFull: boolean;\n    /**\n     * This property is used for dropdown positioning on the screen.\n     */\n    languageArrowPosition: string;\n    languageCode = 'en';\n    rightPosition: number;\n    leftPosition: number;\n    /**\n     * Array of EU languages, that can be selected for the current site.\n     */\n    euLanguages: EuiLanguage[] = [];\n    /**\n     * Array of non-EU languages, that can be selected for the current site.\n     */\n    nonEuLanguages: EuiLanguage[] = [];\n    euColumnsCount = 1;\n    nonEuColumnsCount = 1;\n\n    /**\n     * The language popover, that shows all available languages (configured in the config file of the current site).\n     */\n    private readonly languagePopover = viewChild(EclSiteHeaderLanguagePopoverComponent);\n    /**\n     * The link to open the popover dialog.\n     */\n    private readonly languageLinkElement = viewChild('languageLink', { read: ElementRef });\n\n    private readonly MOBILE_BREAKPOINT = 768;\n    private readonly LANGUAGE_MAX_COLUMNS = 8;\n    private readonly RESIZE_DEBOUNCE = 200;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private _languages: EuiLanguage[] = [];\n    private isRtl = false;\n    private readonly eclRtlService = inject(EclRtlService);\n    private readonly el = inject(ElementRef);\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly window = this.document.defaultView; // Window | null\n\n    protected get cssClasses(): string {\n        return [super.getCssClasses('ecl-site-header__language')].join(' ').trim();\n    }\n\n    ngOnInit(): void {\n        this.handleRtlChangeState();\n    }\n\n    /**\n     * After view is initialized -> set up resize repositioning and initialize languages, that are configured in the config file\n     *  of the current site.\n     */\n    ngAfterViewInit(): void {\n        this.handleResize();\n        this.handleInitialConfiguredLanguages();\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.complete();\n    }\n\n    protected getLanguageLabel(): string {\n        return `${EuiEuLanguages.getLanguageByCode(this.languageCode)?.label} - ${this.languageCode.toUpperCase()}`;\n    }\n\n    /**\n     * Toggle the language dropdown when clicking the link, showing the current language.\n     * @param evt\n     */\n    protected onLanguageClick(evt: Event): void {\n        this.isLanguagesDropdownVisible = !this.isLanguagesDropdownVisible;\n        if (!this.isLanguagesDropdownVisible) {\n            setTimeout(() => this.resetPositioning());\n        }\n\n        // If the dropdown is visible, we set the max-height of the dropdown, so that it can be scrolled.\n        if (this.isLanguagesDropdownVisible) {\n            setTimeout(() => this.languagePopover().setLanguageContentMaxHeight());\n            // Position the popover and its arrow after the popover is rendered and reflowed.\n            // Matches ECL's updateOverlayPosition call in toggleOverlay.\n            requestAnimationFrame(() => this.calculatePopoverPosition());\n        }\n        this.languageClick.next(new EclSiteHeaderLanguageClickEvent());\n\n        evt.preventDefault();\n    }\n\n    protected onLanguageClosed(evt: EclSiteHeaderLanguageCloseEvent): void {\n        this.isLanguagesDropdownVisible = false;\n    }\n\n    protected onLanguageSelected(evt: EclSiteHeaderLanguageSelectedEvent): void {\n        this.languageCode = evt.language.code;\n        this.updateCurrentLanguage(evt.language.code);\n        this.isLanguagesDropdownVisible = false;\n        this.languageSelected.next(new EclSiteHeaderLanguageSelectedEvent(evt.language));\n    }\n\n    /**\n     * Close the dropdown, when clicking outside of the component.\n     */\n    protected onClickOutside(): void {\n        this.isLanguagesDropdownVisible = false;\n    }\n\n    /**\n     * Close the dropdown, when pressing ESC key.\n     */\n    protected onEscapeKeydownHandler(): void {\n        this.isLanguagesDropdownVisible = false;\n    }\n\n    hasLanguageCodes(): boolean {\n        return this._languages && this._languages.length > 0;\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            this.isRtl = rtlState;\n            if (this.isLanguagesDropdownVisible) {\n                this.calculatePopoverPosition();\n            }\n        });\n    }\n\n    /**\n     * Calculate the number of columns for EU and non-EU languages, depending on languages' count.\n     */\n    private updateLanguages(): void {\n\n        this.euLanguages = this._languages.filter((item) => EuiEuLanguages.isEuLanguage(item.code));\n\n        this.nonEuLanguages = this._languages.filter((item) => !EuiEuLanguages.isEuLanguage(item.code));\n\n        this.euColumnsCount = Math.ceil(this.euLanguages.length / this.LANGUAGE_MAX_COLUMNS);\n\n        this.nonEuColumnsCount = Math.ceil(this.nonEuLanguages.length / this.LANGUAGE_MAX_COLUMNS);\n    }\n\n    /**\n     * Clears every positioning flag/offset so a fresh calculation (or a close) starts from a known state.\n     */\n    private resetPositioning(): void {\n        this.isFull = false;\n        this.isStack = false;\n        this.isPushRight = false;\n        this.isPushLeft = false;\n        this.rightPosition = undefined;\n        this.leftPosition = undefined;\n        this.languageArrowPosition = undefined;\n    }\n\n    /**\n     * Positions the language popover and its arrow, matching ECL's updateOverlayPosition.\n     * The container is the site-header top area (ECL's '[data-ecl-site-header-top]'), resolved from\n     * the DOM rather than a shared service so the measurement is taken at the right time (on open/resize).\n     */\n    private calculatePopoverPosition(): void {\n        if (!this.isLanguagesDropdownVisible || !this.hasLanguageCodes()) return;\n\n        const container = this.el.nativeElement.closest('.ecl-site-header__top') as HTMLElement | null;\n        const languagePopover = this.languagePopover();\n        if (!container || !languagePopover) return;\n\n        const toggleButtonRect = this.languageLinkElement().nativeElement.getBoundingClientRect();\n        const popoverRect = languagePopover.el.nativeElement.getBoundingClientRect();\n        const containerRect = container.getBoundingClientRect();\n        const screenWidth = this.window.innerWidth;\n        const clientWidth = Math.max(this.document.documentElement.clientWidth || 0, this.window.innerWidth || 0);\n\n        this.resetPositioning();\n\n        // Stack the EU / non-EU lists when the popover is wider than the container.\n        if (popoverRect.width > containerRect.width) {\n            this.isStack = true;\n            if (this.nonEuLanguages.length) {\n                this.nonEuColumnsCount = Math.max(this.euColumnsCount, this.nonEuColumnsCount);\n            }\n        }\n\n        // Mobile: the popover is full width. The arrow is anchored from the box's right edge,\n        // so the offset is measured against popoverRect.right. Exclusive with push-right/left,\n        // matching ECL's updateOverlayPosition (mobile branch returns early).\n        if (clientWidth < this.MOBILE_BREAKPOINT) {\n            const arrowOffset = popoverRect.right - toggleButtonRect.right + toggleButtonRect.width / 2;\n            this.isFull = true;\n            this.languageArrowPosition = `calc(${arrowOffset}px - ${ARROW_SIZE})`;\n            return;\n        }\n\n        // RTL: popover overflows the left edge -> push it right against the container's left edge.\n        if (this.isRtl && popoverRect.left < 0) {\n            const arrowOffset = toggleButtonRect.right - containerRect.left - toggleButtonRect.width / 2;\n            this.isPushLeft = true;\n            this.leftPosition = -toggleButtonRect.left + containerRect.left;\n            this.languageArrowPosition = `${arrowOffset}px`;\n        } else if (!this.isRtl && popoverRect.right > screenWidth) {\n            // LTR: popover overflows the right edge -> push it left against the container's right edge.\n            const arrowOffset = containerRect.right - toggleButtonRect.right + toggleButtonRect.width / 2;\n            this.isPushRight = true;\n            this.rightPosition = -containerRect.right + toggleButtonRect.right;\n            this.languageArrowPosition = `calc(${arrowOffset}px - ${ARROW_SIZE})`;\n        }\n    }\n\n    /**\n     * On window resize -> reposition the popover, but only while it is open.\n     * Debounced for performance, matching ECL's handleResize.\n     */\n    private handleResize(): void {\n        const win = this.window;\n        if (!win) return;\n        fromEvent(win, 'resize')\n            .pipe(debounceTime(this.RESIZE_DEBOUNCE), takeUntil(this.destroy$))\n            .subscribe(() => {\n                if (this.isLanguagesDropdownVisible) {\n                    this.calculatePopoverPosition();\n                }\n            });\n    }\n\n    private getConfiguredLanguages(): void {\n        const languages: string[] = this.config?.i18n?.i18nService?.languages.map(lang => {\n            return (typeof lang !== 'string') ? (lang as EuiLanguage).code : lang\n        }) || [];\n        this._languages = EuiEuLanguages.getAllLanguagesByCodes(languages);\n\n        if (this.config?.i18n?.i18nService?.defaultLanguage) {\n            this.languageCode = this.config?.i18n?.i18nService?.defaultLanguage;\n        } else {\n            if (this._languages && this._languages.length > 0) {\n                this.languageCode = this._languages[0].code;\n            }\n        }\n    }\n\n    private updateCurrentLanguage(lang: string): void {\n        this.i18nService.updateState({\n            activeLang: lang,\n        });\n    }\n\n    private handleInitialConfiguredLanguages(): void {\n        setTimeout(() => {\n            if (this._languages === undefined || this._languages.length === 0) {\n                this.getConfiguredLanguages();\n            }\n            this.updateLanguages();\n        });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n            :host {\n                display: block;\n            }\n        \n",
             "jsdoctags": [
                 {
-                    "pos": 1016,
-                    "end": 1174,
+                    "pos": 1027,
+                    "end": 1185,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -85170,7 +84772,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 118,
+                        "line": 123,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -85226,10 +84828,11 @@
         },
         {
             "name": "EclSiteHeaderLanguagePopoverComponent",
-            "id": "component-EclSiteHeaderLanguagePopoverComponent-2cf806c3aaf3e3fcddc93cd58235381bd2e1e52280c90c3e70a35e692f77179e7aa3c79c39058a5f33e5faea66a7df1073498292a7c2004e7c862751e9d21667",
+            "id": "component-EclSiteHeaderLanguagePopoverComponent-e1d84a0bf4a937ce3e593bdd02f17dca9b853cc426819d4e57f144f50f918762e5340d2d90f1a0428c1e121c76d983d3378cbb1b91a0dd7b4a991de29be1315b",
             "file": "packages/ecl/components/ecl-site-header/language/ecl-site-header-language-popover.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -85244,85 +84847,34 @@
             "hostDirectives": [],
             "inputsClass": [
                 {
+                    "name": "euColumnsCount",
                     "coverageIgnore": false,
-                    "name": "euLanguages",
-                    "defaultValue": "[]",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 35,
-                    "type": "EuiLanguage[]",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "languageArrowPosition",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nProperty to position the arrow of the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n",
-                    "description": "<p>Property to position the arrow of the dialog correctly. Calculated by the parent component &#39;ecl-site-header-language&#39;.</p>\n",
-                    "line": 76,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "languageCode",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nCurrent language\n",
-                    "description": "<p>Current language</p>\n",
-                    "line": 34,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "leftPosition",
+                    "defaultValue": "undefined",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nProperty to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n",
-                    "description": "<p>Property to position the dialog correctly. Calculated by the parent component &#39;ecl-site-header-language&#39;.</p>\n",
-                    "line": 72,
                     "type": "number",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Number of columns for eu languages. Calculated by the parent component &#39;ecl-site-header-language&#39;.</p>\n",
+                    "line": 52,
+                    "rawdescription": "\n\nNumber of columns for eu languages. Calculated by the parent component 'ecl-site-header-language'.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
+                    "name": "euLanguages",
                     "coverageIgnore": false,
-                    "name": "nonEuLanguages",
                     "defaultValue": "[]",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 36,
                     "type": "EuiLanguage[]",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "rightPosition",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nProperty to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n",
-                    "description": "<p>Property to position the dialog correctly. Calculated by the parent component &#39;ecl-site-header-language&#39;.</p>\n",
-                    "line": 68,
-                    "type": "number",
-                    "decorators": []
-                },
-                {
-                    "name": "euColumnsCount",
-                    "coverageIgnore": false,
-                    "defaultValue": "undefined",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "number",
                     "indexKey": "",
                     "optional": false,
-                    "description": "<p>Number of columns for eu languages. Calculated by the parent component &#39;ecl-site-header-language&#39;.</p>\n",
-                    "line": 40,
-                    "rawdescription": "\n\nNumber of columns for eu languages. Calculated by the parent component 'ecl-site-header-language'.\n",
+                    "description": "",
+                    "line": 47,
+                    "rawdescription": "\n",
                     "modifierKind": [
                         148
                     ],
@@ -85338,7 +84890,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Property to position the dialog correctly. Calculated by the parent component &#39;ecl-site-header-language&#39;.</p>\n",
-                    "line": 64,
+                    "line": 76,
                     "rawdescription": "\n\nProperty to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n",
                     "modifierKind": [
                         148
@@ -85355,7 +84907,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Property to show/hide the dialog.</p>\n",
-                    "line": 48,
+                    "line": 60,
                     "rawdescription": "\n\nProperty to show/hide the dialog.\n",
                     "modifierKind": [
                         148
@@ -85372,7 +84924,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Property to position the dialog correctly. Calculated by the parent component &#39;ecl-site-header-language&#39;.</p>\n",
-                    "line": 56,
+                    "line": 68,
                     "rawdescription": "\n\nProperty to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n",
                     "modifierKind": [
                         148
@@ -85389,7 +84941,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Property to position the dialog correctly. Calculated by the parent component &#39;ecl-site-header-language&#39;.</p>\n",
-                    "line": 52,
+                    "line": 64,
                     "rawdescription": "\n\nProperty to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n",
                     "modifierKind": [
                         148
@@ -85406,7 +84958,58 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Property to position the dialog correctly. Calculated by the parent component &#39;ecl-site-header-language&#39;.</p>\n",
-                    "line": 60,
+                    "line": 72,
+                    "rawdescription": "\n\nProperty to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
+                },
+                {
+                    "name": "languageArrowPosition",
+                    "coverageIgnore": false,
+                    "defaultValue": "undefined",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Property to position the arrow of the dialog correctly. Calculated by the parent component &#39;ecl-site-header-language&#39;.</p>\n",
+                    "line": 88,
+                    "rawdescription": "\n\nProperty to position the arrow of the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
+                },
+                {
+                    "name": "languageCode",
+                    "coverageIgnore": false,
+                    "defaultValue": "undefined",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Current language</p>\n",
+                    "line": 46,
+                    "rawdescription": "\n\nCurrent language\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
+                },
+                {
+                    "name": "leftPosition",
+                    "coverageIgnore": false,
+                    "defaultValue": "undefined",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "number",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Property to position the dialog correctly. Calculated by the parent component &#39;ecl-site-header-language&#39;.</p>\n",
+                    "line": 84,
                     "rawdescription": "\n\nProperty to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n",
                     "modifierKind": [
                         148
@@ -85423,13 +85026,47 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Number of columns for non-eu languages. Calculated by the parent component &#39;ecl-site-header-language&#39;.</p>\n",
-                    "line": 44,
+                    "line": 56,
                     "rawdescription": "\n\nNumber of columns for non-eu languages. Calculated by the parent component 'ecl-site-header-language'.\n",
                     "modifierKind": [
                         148
                     ],
                     "required": false
                 },
+                {
+                    "name": "nonEuLanguages",
+                    "coverageIgnore": false,
+                    "defaultValue": "[]",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "EuiLanguage[]",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 48,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
+                },
+                {
+                    "name": "rightPosition",
+                    "coverageIgnore": false,
+                    "defaultValue": "undefined",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "number",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Property to position the dialog correctly. Calculated by the parent component &#39;ecl-site-header-language&#39;.</p>\n",
+                    "line": 80,
+                    "rawdescription": "\n\nProperty to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
+                },
                 {
                     "coverageIgnore": false,
                     "name": "class",
@@ -85484,7 +85121,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 78,
+                    "line": 90,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -85500,7 +85137,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 79,
+                    "line": 91,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -85519,7 +85156,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 25,
+                    "line": 37,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
@@ -85535,31 +85172,9 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 24,
+                    "line": 36,
                     "rawdescription": "\n"
                 },
-                {
-                    "name": "labelledBy",
-                    "coverageIgnore": false,
-                    "defaultValue": "'ecl-site-header__language-title'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 85,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.aria-labelledby'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                },
                 {
                     "name": "languageContent",
                     "coverageIgnore": false,
@@ -85570,7 +85185,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The div, that wraps all the languages.</p>\n",
-                    "line": 30,
+                    "line": 42,
                     "rawdescription": "\n\nThe div, that wraps all the languages.\n",
                     "modifierKind": [
                         148
@@ -85585,30 +85200,8 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 91,
+                    "line": 93,
                     "rawdescription": "\n"
-                },
-                {
-                    "name": "role",
-                    "coverageIgnore": false,
-                    "defaultValue": "'dialog'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "<p>The role of the dialog is &#39;dialog&#39;. Should not be changed.</p>\n",
-                    "line": 84,
-                    "rawdescription": "\n\nThe role of the dialog is 'dialog'. Should not be changed.\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.role'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
                 }
             ],
             "methodsClass": [
@@ -85619,7 +85212,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 133,
+                    "line": 136,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -85632,7 +85225,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 138,
+                    "line": 141,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -85662,7 +85255,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 142,
+                    "line": 145,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -85699,7 +85292,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 152,
+                    "line": 154,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet the max-height property of the component. It is calculated depending on the viewport.\n",
@@ -85747,82 +85340,7 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.aria-labelledby",
-                    "actualName": "labelledBy",
-                    "defaultValue": "'ecl-site-header__language-title'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 85,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.aria-modal",
-                    "actualName": "isModal",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 124,
-                    "type": "boolean | undefined",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.hidden",
-                    "actualName": "isDropdownHidden",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 129,
-                    "type": "boolean | undefined",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.role",
-                    "actualName": "role",
-                    "defaultValue": "'dialog'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nThe role of the dialog is 'dialog'. Should not be changed.\n",
-                    "description": "<p>The role of the dialog is &#39;dialog&#39;. Should not be changed.</p>\n",
-                    "line": 84,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 112,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "style.display",
-                    "actualName": "display",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 87,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [
@@ -85843,14 +85361,14 @@
             "description": "<p>This component is a popover, that appears after the user clicks on language link. It contains all the available languages,\n configured for the current site. Adds styling and functionality for the dialog.\nEmits events when language is selected and when dialog is closed.</p>\n",
             "rawdescription": "\n\nThis component is a popover, that appears after the user clicks on language link. It contains all the available languages,\n configured for the current site. Adds styling and functionality for the dialog.\nEmits events when language is selected and when dialog is closed.\n",
             "type": "component",
-            "sourceCode": "import { ScrollDispatcher } from '@angular/cdk/scrolling';\nimport { Component, DOCUMENT, ElementRef, HostBinding, HostListener, Input, NgZone, OnDestroy, afterNextRender, booleanAttribute, inject, output, input, viewChild } from '@angular/core';\nimport { auditTime, fromEvent, Subject, takeUntil } from 'rxjs';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { EuiLanguage } from '@eui/base';\nimport { EclThemeService } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclSiteHeaderLanguageCloseEvent, EclSiteHeaderLanguageSelectedEvent } from '../events';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\n\n/**\n * This component is a popover, that appears after the user clicks on language link. It contains all the available languages,\n *  configured for the current site. Adds styling and functionality for the dialog.\n * Emits events when language is selected and when dialog is closed.\n */\n@Component({\n    selector: 'ecl-site-header-language-popover',\n    templateUrl: './ecl-site-header-language-popover.component.html',\n    imports: [TranslatePipe, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK],\n})\nexport class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective implements OnDestroy {\n    el = inject(ElementRef);\n    protected eclThemeService = inject(EclThemeService);\n\n    /**\n     * The div, that wraps all the languages.\n     */\n    readonly languageContent = viewChild<ElementRef>('languageContent');\n    /**\n     * Current language\n     */\n    @Input() languageCode: string;\n    @Input() euLanguages: EuiLanguage[] = [];\n    @Input() nonEuLanguages: EuiLanguage[] = [];\n    /**\n     * Number of columns for eu languages. Calculated by the parent component 'ecl-site-header-language'.\n     */\n    readonly euColumnsCount = input<number>(undefined);\n    /**\n     * Number of columns for non-eu languages. Calculated by the parent component 'ecl-site-header-language'.\n     */\n    readonly nonEuColumnsCount = input<number>(undefined);\n    /**\n     * Property to show/hide the dialog.\n     */\n    readonly isHidden = input(false, { transform: booleanAttribute });\n    /**\n     * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n     */\n    readonly isPushRight = input(false, { transform: booleanAttribute });\n    /**\n     * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n     */\n    readonly isPushLeft = input(false, { transform: booleanAttribute });\n    /**\n     * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n     */\n    readonly isStack = input(false, { transform: booleanAttribute });\n    /**\n     * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n     */\n    readonly isFull = input(false, { transform: booleanAttribute });\n    /**\n     * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n     */\n    @Input() @HostBinding('style.right.px') rightPosition: number;\n    /**\n     * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n     */\n    @Input() @HostBinding('style.left.px') leftPosition: number;\n    /**\n     * Property to position the arrow of the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n     */\n    @Input() @HostBinding('style.--ecl-language-arrow-position') languageArrowPosition: string;\n\n    readonly languageClosed = output<EclSiteHeaderLanguageCloseEvent>();\n    readonly languageSelected = output<EclSiteHeaderLanguageSelectedEvent>();\n\n    /**\n     * The role of the dialog is 'dialog'. Should not be changed.\n     */\n    @HostBinding('attr.role') role = 'dialog';\n    @HostBinding('attr.aria-labelledby') labelledBy = 'ecl-site-header__language-title';\n    @HostBinding('style.display')\n    get display():string {\n        return this.isHidden() ? 'none' : 'block';\n    }\n\n    languageContentMaxHeight: number;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private scrollDispatcher = inject(ScrollDispatcher);\n    private zone = inject(NgZone);\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly window = this.document.defaultView; // Window | null\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.subscribeToCDKScrollEvent();\n            fromEvent(this.window, 'resize').pipe(\n                auditTime(50),\n                takeUntil(this.destroy$)).subscribe(() => {\n                // Calculate the height after resize. If the window is too small -> scroll should appear.\n                setTimeout(() => this.setLanguageContentMaxHeight());\n            });\n        });\n    }\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-site-header__language-container'),\n            this.isPushRight() ? 'ecl-site-header__language-container--push-right' : '',\n            this.isPushLeft() ? 'ecl-site-header__language-container--push-left' : '',\n            this.isFull() ? 'ecl-site-header__language-container--full' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    @HostBinding('attr.aria-modal')\n    get isModal(): boolean | undefined {\n        return !this.isHidden() || undefined;\n    }\n\n    @HostBinding('attr.hidden')\n    get isDropdownHidden(): boolean | undefined {\n        return this.isHidden() || undefined;\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    onCloseClick(): void {\n        this.languageClosed.emit(new EclSiteHeaderLanguageCloseEvent());\n    }\n\n    onLanguageClick(language: EuiLanguage, evt: MouseEvent): void {\n        this.languageCode = language.code;\n        this.languageSelected.emit(new EclSiteHeaderLanguageSelectedEvent(language));\n\n        evt.preventDefault();\n    }\n\n    /**\n     * Set the max-height property of the component. It is calculated depending on the viewport.\n     */\n    setLanguageContentMaxHeight(): void {\n        const viewportHeight = this.window.innerHeight;\n        const languageContent = this.languageContent();\n        if (languageContent) {\n            const listTop = languageContent.nativeElement.getBoundingClientRect().top;\n            const availableSpace = viewportHeight - listTop;\n            if (availableSpace > 0) {\n                this.languageContentMaxHeight = availableSpace;\n            }\n        }\n    }\n\n    private subscribeToCDKScrollEvent(): void {\n        this.scrollDispatcher.scrolled().pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.zone.run(() => {\n                this.setLanguageContentMaxHeight();\n            });\n        });\n    }\n}\n",
+            "sourceCode": "import { ScrollDispatcher } from '@angular/cdk/scrolling';\nimport { Component, DOCUMENT, ElementRef, NgZone, OnDestroy, afterNextRender, booleanAttribute, inject, output, input, viewChild } from '@angular/core';\nimport { auditTime, fromEvent, Subject, takeUntil } from 'rxjs';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { EuiLanguage } from '@eui/base';\nimport { EclThemeService } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclSiteHeaderLanguageCloseEvent, EclSiteHeaderLanguageSelectedEvent } from '../events';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\n\n/**\n * This component is a popover, that appears after the user clicks on language link. It contains all the available languages,\n *  configured for the current site. Adds styling and functionality for the dialog.\n * Emits events when language is selected and when dialog is closed.\n */\n@Component({\n    selector: 'ecl-site-header-language-popover',\n    templateUrl: './ecl-site-header-language-popover.component.html',\n    imports: [TranslatePipe, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK],\n    host: {\n        // The role of the dialog is 'dialog'. Should not be changed.\n        role: 'dialog',\n        'aria-labelledby': 'ecl-site-header__language-title',\n        '[class]': 'cssClasses',\n        '[style.display]': 'display',\n        '[style.right.px]': 'rightPosition()',\n        '[style.left.px]': 'leftPosition()',\n        '[style.--ecl-overlay-arrow-position]': 'languageArrowPosition()',\n        '[attr.aria-modal]': 'isModal',\n        '[attr.hidden]': 'isDropdownHidden',\n    },\n})\nexport class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective implements OnDestroy {\n    el = inject(ElementRef);\n    protected eclThemeService = inject(EclThemeService);\n\n    /**\n     * The div, that wraps all the languages.\n     */\n    readonly languageContent = viewChild<ElementRef>('languageContent');\n    /**\n     * Current language\n     */\n    readonly languageCode = input<string>(undefined);\n    readonly euLanguages = input<EuiLanguage[]>([]);\n    readonly nonEuLanguages = input<EuiLanguage[]>([]);\n    /**\n     * Number of columns for eu languages. Calculated by the parent component 'ecl-site-header-language'.\n     */\n    readonly euColumnsCount = input<number>(undefined);\n    /**\n     * Number of columns for non-eu languages. Calculated by the parent component 'ecl-site-header-language'.\n     */\n    readonly nonEuColumnsCount = input<number>(undefined);\n    /**\n     * Property to show/hide the dialog.\n     */\n    readonly isHidden = input(false, { transform: booleanAttribute });\n    /**\n     * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n     */\n    readonly isPushRight = input(false, { transform: booleanAttribute });\n    /**\n     * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n     */\n    readonly isPushLeft = input(false, { transform: booleanAttribute });\n    /**\n     * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n     */\n    readonly isStack = input(false, { transform: booleanAttribute });\n    /**\n     * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n     */\n    readonly isFull = input(false, { transform: booleanAttribute });\n    /**\n     * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n     */\n    readonly rightPosition = input<number>(undefined);\n    /**\n     * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n     */\n    readonly leftPosition = input<number>(undefined);\n    /**\n     * Property to position the arrow of the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n     */\n    readonly languageArrowPosition = input<string>(undefined);\n\n    readonly languageClosed = output<EclSiteHeaderLanguageCloseEvent>();\n    readonly languageSelected = output<EclSiteHeaderLanguageSelectedEvent>();\n\n    languageContentMaxHeight: number;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private scrollDispatcher = inject(ScrollDispatcher);\n    private zone = inject(NgZone);\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly window = this.document.defaultView; // Window | null\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.subscribeToCDKScrollEvent();\n            fromEvent(this.window, 'resize').pipe(\n                auditTime(50),\n                takeUntil(this.destroy$)).subscribe(() => {\n                // Calculate the height after resize. If the window is too small -> scroll should appear.\n                setTimeout(() => this.setLanguageContentMaxHeight());\n            });\n        });\n    }\n\n    protected get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-site-header__language-container'),\n            this.isPushRight() ? 'ecl-site-header__language-container--push-right' : '',\n            this.isPushLeft() ? 'ecl-site-header__language-container--push-left' : '',\n            this.isFull() ? 'ecl-site-header__language-container--full' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    protected get display(): string {\n        return this.isHidden() ? 'none' : 'block';\n    }\n\n    protected get isModal(): boolean | undefined {\n        return !this.isHidden() || undefined;\n    }\n\n    protected get isDropdownHidden(): boolean | undefined {\n        return this.isHidden() || undefined;\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    onCloseClick(): void {\n        this.languageClosed.emit(new EclSiteHeaderLanguageCloseEvent());\n    }\n\n    onLanguageClick(language: EuiLanguage, evt: MouseEvent): void {\n        this.languageSelected.emit(new EclSiteHeaderLanguageSelectedEvent(language));\n\n        evt.preventDefault();\n    }\n\n    /**\n     * Set the max-height property of the component. It is calculated depending on the viewport.\n     */\n    setLanguageContentMaxHeight(): void {\n        const viewportHeight = this.window.innerHeight;\n        const languageContent = this.languageContent();\n        if (languageContent) {\n            const listTop = languageContent.nativeElement.getBoundingClientRect().top;\n            const availableSpace = viewportHeight - listTop;\n            if (availableSpace > 0) {\n                this.languageContentMaxHeight = availableSpace;\n            }\n        }\n    }\n\n    private subscribeToCDKScrollEvent(): void {\n        this.scrollDispatcher.scrolled().pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.zone.run(() => {\n                this.setLanguageContentMaxHeight();\n            });\n        });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 789,
-                    "end": 1075,
+                    "pos": 755,
+                    "end": 1041,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -85865,7 +85383,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 96,
+                "line": 98,
                 "rawdescription": "\n"
             },
             "extends": [
@@ -85875,24 +85393,24 @@
                 "OnDestroy"
             ],
             "accessors": {
-                "display": {
-                    "name": "display",
+                "cssClasses": {
+                    "name": "cssClasses",
                     "getSignature": {
-                        "name": "display",
+                        "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 87,
+                        "line": 113,
                         "rawdescription": "\n",
                         "description": ""
                     }
                 },
-                "cssClasses": {
-                    "name": "cssClasses",
+                "display": {
+                    "name": "display",
                     "getSignature": {
-                        "name": "cssClasses",
+                        "name": "display",
                         "type": "string",
                         "returnType": "string",
-                        "line": 112,
+                        "line": 124,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -85903,7 +85421,7 @@
                         "name": "isModal",
                         "type": "unknown",
                         "returnType": "boolean | undefined",
-                        "line": 124,
+                        "line": 128,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -85914,7 +85432,7 @@
                         "name": "isDropdownHidden",
                         "type": "unknown",
                         "returnType": "boolean | undefined",
-                        "line": 129,
+                        "line": 132,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -85955,14 +85473,15 @@
                     }
                 ]
             },
-            "templateData": "<div class=\"ecl-site-header__language-header\">\n    <div class=\"ecl-site-header__language-title\">\n        {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n    </div>\n    <button eclButton variant=\"tertiary\" eclStyle=\"neutral\" isIconOnly class=\"ecl-site-header__language-close\" (click)=\"onCloseClick()\">\n        <span class=\"ecl-button__container\">\n            <span class=\"ecl-button__label\">\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </span>\n    </button>\n</div>\n\n<div #languageContent class=\"ecl-site-header__language-content\" [style.max-height.px]=\"languageContentMaxHeight\"\n    [class.ecl-site-header__language-content--stack]=\"isStack()\">\n    @if (euLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount() }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" [attr.translate]=\"'no'\">\n                @for (item of euLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            variant=\"standalone\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n    @if (nonEuLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount() }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" [attr.translate]=\"'no'\">\n                @for (item of nonEuLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            variant=\"standalone\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n</div>\n"
+            "templateData": "<div class=\"ecl-site-header__language-header\">\n    <div class=\"ecl-site-header__language-title\">\n        {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n    </div>\n    <button eclButton variant=\"tertiary\" eclStyle=\"neutral\" isIconOnly class=\"ecl-site-header__language-close\" (click)=\"onCloseClick()\">\n        <span class=\"ecl-button__container\">\n            <span class=\"ecl-button__label\">\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </span>\n    </button>\n</div>\n\n<div #languageContent class=\"ecl-site-header__language-content\" [style.max-height.px]=\"languageContentMaxHeight\"\n    [class.ecl-site-header__language-content--stack]=\"isStack()\">\n    @if (euLanguages().length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount() }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" [attr.translate]=\"'no'\">\n                @for (item of euLanguages(); track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            variant=\"standalone\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode()\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n    @if (nonEuLanguages().length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount() }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" [attr.translate]=\"'no'\">\n                @for (item of nonEuLanguages(); track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            variant=\"standalone\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode()\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n</div>\n"
         },
         {
             "name": "EclSiteHeaderLoginComponent",
-            "id": "component-EclSiteHeaderLoginComponent-eb7fc5e4df66b10b0bdb4a84f481ca049b63fb49582e2ad190720f2706e3c6e4c4f3bc45b3958b1824b0d1b708f74debb946c2b1ba735e5bc06a162503e8a000",
+            "id": "component-EclSiteHeaderLoginComponent-19cf290d806bdaee64ed7b5689860e5d3113d6c5ebbfad60be450af5436bbb1012751c4ad894f93127962cf02d3e5439962e464de02158c40d0e7663b76b451e",
             "file": "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -85977,11 +85496,6 @@
             "templateVariables": [],
             "viewProviders": [],
             "hostDirectives": [
-                {
-                    "name": "ECLBaseDirective",
-                    "inputs": [],
-                    "outputs": []
-                },
                 {
                     "name": "ECLClickOutsideDirective",
                     "inputs": [],
@@ -86001,7 +85515,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 37,
+                    "line": 41,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -86059,7 +85573,7 @@
                     "defaultValue": "new EventEmitter<EclSiteHeaderLoginBoxToggleEvent>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 43,
+                    "line": 44,
                     "type": "EventEmitter"
                 },
                 {
@@ -86071,7 +85585,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 42,
+                    "line": 43,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -86080,28 +85594,6 @@
                 }
             ],
             "propertiesClass": [
-                {
-                    "name": "class",
-                    "coverageIgnore": false,
-                    "defaultValue": "'ecl-site-header__login-container'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 38,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                },
                 {
                     "name": "isLoginBoxActive",
                     "coverageIgnore": false,
@@ -86111,57 +85603,24 @@
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
-                    "description": "<p>If login popover is open (true) or closed (false).</p>\n",
-                    "line": 48,
-                    "rawdescription": "\n\nIf login popover is open (true) or closed (false).\n",
-                    "modifierKind": [
-                        125
-                    ]
+                    "description": "<p>If login popover is open (true) or closed (false). Kept public because the parent\n<code>ecl-site-header</code> resets it directly when the search box opens.</p>\n",
+                    "line": 50,
+                    "rawdescription": "\n\nIf login popover is open (true) or closed (false). Kept public because the parent\n`ecl-site-header` resets it directly when the search box opens.\n"
                 },
                 {
                     "name": "loginArrowPosition",
                     "coverageIgnore": false,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "<p>The position of the arrow of the popover.</p>\n",
-                    "line": 52,
-                    "rawdescription": "\n\nThe position of the arrow of the popover.\n",
-                    "modifierKind": [
-                        125
-                    ]
-                },
-                {
-                    "name": "loginLinkElement",
-                    "coverageIgnore": false,
-                    "defaultValue": "viewChild('loginLink', { read: ElementRef })",
+                    "defaultValue": "signal<string | undefined>(undefined)",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
-                    "description": "",
-                    "line": 40,
-                    "rawdescription": "\n",
-                    "modifierKind": [
-                        148
-                    ]
-                },
-                {
-                    "name": "TABLET_BREAKPOINT",
-                    "coverageIgnore": false,
-                    "defaultValue": "996",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "number",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 53,
-                    "rawdescription": "\n",
+                    "description": "<p>The position of the arrow of the popover, when in mobile (full-width) mode.</p>\n",
+                    "line": 55,
+                    "rawdescription": "\n\nThe position of the arrow of the popover, when in mobile (full-width) mode.\n",
                     "modifierKind": [
+                        124,
                         148
                     ]
                 }
@@ -86174,16 +85633,19 @@
                     "optional": false,
                     "returnType": "string",
                     "typeParameters": [],
-                    "line": 91,
+                    "line": 108,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "tagName": {
-                                "pos": 3024,
-                                "end": 3031,
+                                "pos": 3907,
+                                "end": 3914,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -86210,7 +85672,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 68,
+                    "line": 86,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -86236,32 +85698,26 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 75,
+                    "line": 93,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": ""
                 },
                 {
-                    "name": "onClickOutsideMegaMenu",
+                    "name": "onClickOutside",
                     "coverageIgnore": false,
                     "args": [],
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 84,
+                    "line": 101,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nClose the login popover on click outside.\n",
                     "description": "<p>Close the login popover on click outside.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'eclClickOutside'"
-                        }
-                    ],
                     "modifierKind": [
-                        171
+                        124
                     ]
                 },
                 {
@@ -86280,11 +85736,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 101,
+                    "line": 118,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -86315,11 +85774,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 95,
+                    "line": 112,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -86376,34 +85838,8 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "class",
-                    "defaultValue": "'ecl-site-header__login-container'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 38,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
-            "hostListeners": [
-                {
-                    "coverageIgnore": false,
-                    "name": "eclClickOutside",
-                    "args": [],
-                    "argsDecorator": [],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nClose the login popover on click outside.\n",
-                    "description": "<p>Close the login popover on click outside.</p>\n",
-                    "line": 84
-                }
-            ],
+            "hostBindings": [],
+            "hostListeners": [],
             "standalone": false,
             "imports": [
                 {
@@ -86417,14 +85853,14 @@
             "description": "<p>Component for login/logout as part of the harmonised site header. Emits events when user logs in and when user opens the\nlogin dropdown.</p>\n",
             "rawdescription": "\n\nComponent for login/logout as part of the harmonised site header. Emits events when user logs in and when user opens the\nlogin dropdown.\n",
             "type": "component",
-            "sourceCode": "import { Component, DOCUMENT, ElementRef, EventEmitter, HostBinding, HostListener, OnChanges, OnDestroy, Output, SimpleChanges, afterNextRender, booleanAttribute, inject, output, input, viewChild } from '@angular/core';\nimport { Subject, debounceTime, takeUntil } from 'rxjs';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ECLBaseDirective, ECLClickOutsideDirective } from '@eui/ecl/core';\nimport { EclRtlService } from '@eui/ecl/core';\nimport { EclSiteHeaderLoginBoxToggleEvent, EclSiteHeaderLoginEvent } from '../events';\nimport { EclAreaDataService } from '../services/ecl-area-data.service';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n/**\n * Component for login/logout as part of the harmonised site header. Emits events when user logs in and when user opens the\n * login dropdown.\n */\n@Component({\n    selector: 'ecl-site-header-login',\n    templateUrl: './ecl-site-header-login.component.html',\n    imports: [TranslatePipe, ...EUI_ECL_ICON],\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n        {\n            directive: ECLClickOutsideDirective,\n             \n            outputs: ['eclClickOutside'],\n        },\n    ],\n})\nexport class EclSiteHeaderLoginComponent extends ECLBaseDirective implements OnChanges, OnDestroy {\n    readonly isLoggedIn = input(false, { transform: booleanAttribute });\n    @HostBinding('class') class = 'ecl-site-header__login-container';\n\n    readonly loginLinkElement = viewChild('loginLink', { read: ElementRef });\n\n    readonly login = output<EclSiteHeaderLoginEvent>();\n    @Output() loginBoxToggle = new EventEmitter<EclSiteHeaderLoginBoxToggleEvent>();\n\n    /**\n     * If login popover is open (true) or closed (false).\n     */\n    public isLoginBoxActive = false;\n    /**\n     * The position of the arrow of the popover.\n     */\n    public loginArrowPosition: string;\n    readonly TABLET_BREAKPOINT = 996;\n    private parentHeaderRight: number | undefined;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private eclAreaDataService = inject(EclAreaDataService);\n    private eclRtlService = inject(EclRtlService);\n    private document = inject<Document>(DOCUMENT);\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.handleRtlChangeState();\n            this.handleSiteHeaderAreaChangeEvent();\n        });\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        const isLoggedInChange = changes.isLoggedIn;\n        if (isLoggedInChange && isLoggedInChange.previousValue === true) {\n            this.isLoginBoxActive = false;\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * Close the login popover on click outside.\n     */\n    @HostListener('eclClickOutside')\n    onClickOutsideMegaMenu(): void {\n        this.onLoginBoxClose();\n    }\n\n    /**\n     * @returns classes for the login popover.\n     */\n    getLoginBoxCssClasses(): string {\n        return ['ecl-site-header__login-box', this.isLoginBoxActive ? 'ecl-site-header__login-box--active' : ''].join(' ');\n    }\n\n    onLoginClick(evt: MouseEvent): void {\n        const event = new EclSiteHeaderLoginEvent();\n        this.login.emit(event);\n        evt.preventDefault();\n    }\n\n    onLoginBoxToggle(evt: MouseEvent): void {\n        this.isLoginBoxActive = !this.isLoginBoxActive;\n        const event = new EclSiteHeaderLoginBoxToggleEvent(this.isLoginBoxActive);\n        this.loginBoxToggle.next(event);\n        evt.preventDefault();\n    }\n\n    private onLoginBoxClose(): void {\n        if (this.isLoginBoxActive) {\n            this.isLoginBoxActive = false;\n            const event = new EclSiteHeaderLoginBoxToggleEvent(this.isLoginBoxActive);\n            this.loginBoxToggle.next(event);\n        }\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(debounceTime(50), takeUntil(this.destroy$)).subscribe(() => {\n            this.calculateLoginArrowPosition(this.parentHeaderRight);\n        });\n    }\n\n    /**\n     * On resize -> calculate the popover arrow position, using parent element ecl-header html parameters.\n     */\n    private handleSiteHeaderAreaChangeEvent(): void {\n        this.eclAreaDataService.dataSubject$.pipe(takeUntil(this.destroy$)).subscribe(\n            parentHeaderRect =>  {\n                this.parentHeaderRight = parentHeaderRect.right;\n                this.calculateLoginArrowPosition(this.parentHeaderRight);\n            });\n    }\n\n    private calculateLoginArrowPosition(parentHeaderRight: number | undefined): void {\n\n        const vw = this.document.documentElement.clientWidth;\n        const arrowSize = '0.5rem';\n        const loginLink = this.loginLinkElement()?.nativeElement.getBoundingClientRect();\n        const arrowPosition = parentHeaderRight - loginLink?.right + loginLink?.width /2;\n        if (parentHeaderRight === undefined) {\n            return;\n        }\n        if (this.isLoginBoxActive && vw < this.TABLET_BREAKPOINT) {\n            this.loginArrowPosition =  `calc(${arrowPosition}px + ${arrowSize})`;\n        } else if (this.isLoginBoxActive ) {\n            this.loginArrowPosition =  null;\n        }\n    }\n}\n",
+            "sourceCode": "import { Component, DOCUMENT, ElementRef, EventEmitter, OnChanges, OnDestroy, Output, SimpleChanges, afterNextRender, booleanAttribute, inject, signal, output, input, viewChild } from '@angular/core';\nimport { Subject, debounceTime, fromEvent, takeUntil } from 'rxjs';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ECLBaseDirective, ECLClickOutsideDirective } from '@eui/ecl/core';\nimport { EclRtlService } from '@eui/ecl/core';\nimport { EclSiteHeaderLoginBoxToggleEvent, EclSiteHeaderLoginEvent } from '../events';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n/** Half the arrow's own width, matching ECL's `arrowSize`. */\nconst ARROW_SIZE = '0.5rem';\n/** Debounce for the resize recomputation, matching ECL's `handleResize`. */\nconst RESIZE_DEBOUNCE = 200;\n\n/**\n * Component for login/logout as part of the harmonised site header. Emits events when user logs in and when user opens the\n * login dropdown.\n */\n@Component({\n    selector: 'ecl-site-header-login',\n    templateUrl: './ecl-site-header-login.component.html',\n    imports: [TranslatePipe, ...EUI_ECL_ICON],\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n    hostDirectives: [\n        {\n            directive: ECLClickOutsideDirective,\n            outputs: ['eclClickOutside'],\n        },\n    ],\n    host: {\n        class: 'ecl-site-header__login-container',\n        '(eclClickOutside)': 'onClickOutside()',\n    },\n})\nexport class EclSiteHeaderLoginComponent extends ECLBaseDirective implements OnChanges, OnDestroy {\n    readonly isLoggedIn = input(false, { transform: booleanAttribute });\n\n    readonly login = output<EclSiteHeaderLoginEvent>();\n    @Output() loginBoxToggle = new EventEmitter<EclSiteHeaderLoginBoxToggleEvent>();\n\n    /**\n     * If login popover is open (true) or closed (false). Kept public because the parent\n     * `ecl-site-header` resets it directly when the search box opens.\n     */\n    isLoginBoxActive = false;\n\n    /**\n     * The position of the arrow of the popover, when in mobile (full-width) mode.\n     */\n    protected readonly loginArrowPosition = signal<string | undefined>(undefined);\n\n    /**\n     * The login link element from the view, i.e. the login button (the toggle).\n     */\n    private readonly loginLinkElement = viewChild('loginLink', { read: ElementRef });\n    /**\n     * The login box element from the view, i.e. the dropdown the arrow points at.\n     */\n    private readonly loginBoxElement = viewChild('loginBox', { read: ElementRef });\n\n    private readonly destroy$: Subject<boolean> = new Subject<boolean>();\n    private readonly eclRtlService = inject(EclRtlService);\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly window = this.document.defaultView;\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            // Recompute the arrow only while the box is open.\n            this.eclRtlService.currentRtlState$.pipe(debounceTime(50), takeUntil(this.destroy$)).subscribe(() => {\n                if (this.isLoginBoxActive) this.setLoginArrow();\n            });\n            if (this.window) {\n                fromEvent(this.window, 'resize').pipe(debounceTime(RESIZE_DEBOUNCE), takeUntil(this.destroy$)).subscribe(() => {\n                    if (this.isLoginBoxActive) this.setLoginArrow();\n                });\n            }\n        });\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        const isLoggedInChange = changes.isLoggedIn;\n        if (isLoggedInChange && isLoggedInChange.previousValue === true) {\n            this.isLoginBoxActive = false;\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * Close the login popover on click outside.\n     */\n    protected onClickOutside(): void {\n        this.onLoginBoxClose();\n    }\n\n    /**\n     * @returns classes for the login popover.\n     */\n    protected getLoginBoxCssClasses(): string {\n        return ['ecl-site-header__login-box', this.isLoginBoxActive ? 'ecl-site-header__login-box--active' : ''].join(' ');\n    }\n\n    protected onLoginClick(evt: MouseEvent): void {\n        const event = new EclSiteHeaderLoginEvent();\n        this.login.emit(event);\n        evt.preventDefault();\n    }\n\n    protected onLoginBoxToggle(evt: MouseEvent): void {\n        this.isLoginBoxActive = !this.isLoginBoxActive;\n        const event = new EclSiteHeaderLoginBoxToggleEvent(this.isLoginBoxActive);\n        this.loginBoxToggle.next(event);\n        evt.preventDefault();\n\n        if (this.isLoginBoxActive) {\n            // Measure after the '--active' class is applied and the box reflows to full width.\n            this.window?.requestAnimationFrame(() => this.setLoginArrow());\n        }\n    }\n\n    private onLoginBoxClose(): void {\n        if (this.isLoginBoxActive) {\n            this.isLoginBoxActive = false;\n            const event = new EclSiteHeaderLoginBoxToggleEvent(this.isLoginBoxActive);\n            this.loginBoxToggle.next(event);\n            this.loginArrowPosition.set(undefined);\n        }\n    }\n\n    /**\n     * Position the dropdown arrow so it points at the toggle button.\n     * The arrow only exists on the mobile full-width dropdown, so the calculation is gated on the box\n     *  spanning (almost) the full viewport width. The offset is relative to the box's own left edge.\n     * Mirrors ECL's 'setLoginArrow' in site-header.js.\n     */\n    private setLoginArrow(): void {\n        const loginBoxRect = this.loginBoxElement()?.nativeElement.getBoundingClientRect();\n        const toggleButtonRect = this.loginLinkElement()?.nativeElement.getBoundingClientRect();\n        if (!loginBoxRect || !toggleButtonRect) return;\n\n        const clientWidth = this.document.documentElement.clientWidth;\n        if (loginBoxRect.width >= clientWidth - 1) {\n            const arrowOffset = toggleButtonRect.left - loginBoxRect.left + toggleButtonRect.width / 2;\n            this.loginArrowPosition.set(`calc(${arrowOffset}px - ${ARROW_SIZE})`);\n        } else {\n            this.loginArrowPosition.set(undefined);\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n            :host {\n                display: block;\n            }\n        \n",
             "jsdoctags": [
                 {
-                    "pos": 674,
-                    "end": 824,
+                    "pos": 793,
+                    "end": 943,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -86439,7 +85875,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 58,
+                "line": 69,
                 "rawdescription": "\n"
             },
             "extends": [
@@ -86461,11 +85897,11 @@
                         "type": "module"
                     },
                     {
-                        "name": "ECLBaseDirective",
+                        "name": "ECLClickOutsideDirective",
                         "type": "directive"
                     },
                     {
-                        "name": "ECLClickOutsideDirective",
+                        "name": "ECLBaseDirective",
                         "type": "directive"
                     },
                     {
@@ -86478,7 +85914,7 @@
                     }
                 ]
             },
-            "templateData": "@if (isLoggedIn()) {\n    <a\n        #loginLink\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        aria-controls=\"login-box-id\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n    </a>\n    <div\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n"
+            "templateData": "@if (isLoggedIn()) {\n    <a\n        #loginLink\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        aria-controls=\"login-box-id\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n    </a>\n    <div\n        #loginBox\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition()}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n"
         },
         {
             "name": "EclSiteHeaderNotificationComponent",
@@ -86716,10 +86152,11 @@
         },
         {
             "name": "EclSiteHeaderSearchComponent",
-            "id": "component-EclSiteHeaderSearchComponent-d336067a35121cbc3e209e6d7efc56189b0cc7fe678f129591c3c53efc2527183ef93a4441f10af3c84f8f55f0cb6eec03525508b6b070af720b82296f8c3599",
+            "id": "component-EclSiteHeaderSearchComponent-f2c0c32058c22e107aa32c83d7149c58b3c0b5f941191d41160d6a1cb598d61204cdd35709bde16564d408b29b6baa2a4fc1d59a815075d744b7a06bd0e874c7",
             "file": "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [
@@ -86737,7 +86174,15 @@
             ],
             "templateVariables": [],
             "viewProviders": [],
-            "hostDirectives": [],
+            "hostDirectives": [
+                {
+                    "name": "ECLClickOutsideDirective",
+                    "inputs": [],
+                    "outputs": [
+                        "eclClickOutside"
+                    ]
+                }
+            ],
             "inputsClass": [
                 {
                     "coverageIgnore": false,
@@ -86746,7 +86191,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 46,
+                    "line": 56,
                     "type": "string",
                     "decorators": []
                 },
@@ -86760,7 +86205,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 48,
+                    "line": 58,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -86777,7 +86222,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 47,
+                    "line": 57,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -86835,7 +86280,7 @@
                     "defaultValue": "new EventEmitter<EclSiteHeaderSearchToggleEvent>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 56,
+                    "line": 61,
                     "type": "EventEmitter"
                 },
                 {
@@ -86847,7 +86292,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 55,
+                    "line": 60,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -86856,28 +86301,6 @@
                 }
             ],
             "propertiesClass": [
-                {
-                    "name": "class",
-                    "coverageIgnore": false,
-                    "defaultValue": "'ecl-site-header__search-container'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 40,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                },
                 {
                     "name": "isSearchBoxActive",
                     "coverageIgnore": false,
@@ -86887,63 +86310,24 @@
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
-                    "description": "",
-                    "line": 62,
-                    "rawdescription": "\n",
-                    "modifierKind": [
-                        125
-                    ]
-                },
-                {
-                    "name": "role",
-                    "coverageIgnore": false,
-                    "defaultValue": "'search'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "<p>The default role of the component is &#39;search&#39;, should not be changed.</p>\n",
-                    "line": 44,
-                    "rawdescription": "\n\nThe default role of the component is 'search', should not be changed.\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.role'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "description": "<p>Whether the search dropdown is open. Kept public because the parent\n<code>ecl-site-header</code> resets it directly when the login box opens.</p>\n",
+                    "line": 67,
+                    "rawdescription": "\n\nWhether the search dropdown is open. Kept public because the parent\n`ecl-site-header` resets it directly when the login box opens.\n"
                 },
                 {
                     "name": "searchArrowPosition",
                     "coverageIgnore": false,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "<p>The arrow position of the serahc dropdown, when in mobile mode.</p>\n",
-                    "line": 61,
-                    "rawdescription": "\n\nThe arrow position of the serahc dropdown, when in mobile mode.\n",
-                    "modifierKind": [
-                        125
-                    ]
-                },
-                {
-                    "name": "searchLinkElement",
-                    "coverageIgnore": false,
-                    "defaultValue": "viewChild('searchLink', { read: ElementRef })",
+                    "defaultValue": "signal<string | undefined>(undefined)",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
-                    "description": "<p>The search link element from the view, i.e. the search button.</p>\n",
-                    "line": 53,
-                    "rawdescription": "\n\nThe search link element from the view, i.e. the search button.\n",
+                    "description": "<p>The arrow position of the search dropdown, when in mobile (full-width) mode.</p>\n",
+                    "line": 72,
+                    "rawdescription": "\n\nThe arrow position of the search dropdown, when in mobile (full-width) mode.\n",
                     "modifierKind": [
+                        124,
                         148
                     ]
                 }
@@ -86956,16 +86340,19 @@
                     "optional": false,
                     "returnType": "string",
                     "typeParameters": [],
-                    "line": 116,
+                    "line": 158,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\n\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "tagName": {
-                                "pos": 4301,
-                                "end": 4308,
+                                "pos": 5933,
+                                "end": 5940,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -86983,7 +86370,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 77,
+                    "line": 94,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -86996,12 +86383,28 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 93,
+                    "line": 108,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": ""
                 },
+                {
+                    "name": "onClickOutside",
+                    "coverageIgnore": false,
+                    "args": [],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 131,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nClose the search dropdown on click outside, matching ECL's `handleClickGlobal`.\n",
+                    "description": "<p>Close the search dropdown on click outside, matching ECL&#39;s <code>handleClickGlobal</code>.</p>\n",
+                    "modifierKind": [
+                        124
+                    ]
+                },
                 {
                     "name": "onModelChange",
                     "coverageIgnore": false,
@@ -87018,11 +86421,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 120,
+                    "line": 162,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "newValue",
@@ -87053,11 +86459,14 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 99,
+                    "line": 135,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -87088,11 +86497,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 105,
+                    "line": 141,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -87123,7 +86535,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 131,
+                    "line": 119,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -87158,7 +86570,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 136,
+                    "line": 124,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -87193,7 +86605,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 126,
+                    "line": 114,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -87254,34 +86666,7 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.role",
-                    "actualName": "role",
-                    "defaultValue": "'search'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nThe default role of the component is 'search', should not be changed.\n",
-                    "description": "<p>The default role of the component is &#39;search&#39;, should not be changed.</p>\n",
-                    "line": 44,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "class",
-                    "defaultValue": "'ecl-site-header__search-container'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 40,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [
@@ -87303,14 +86688,14 @@
             "description": "<p>This component builds the search box in the ecl-site-header component. Adds specific style and functionality, emits\n events on search and search toggle.</p>\n",
             "rawdescription": "\n\nThis component builds the search box in the ecl-site-header component. Adds specific style and functionality, emits\n events on search and search toggle.\n",
             "type": "component",
-            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { AfterViewInit, ChangeDetectorRef, Component, DOCUMENT, ElementRef, EventEmitter, forwardRef, HostBinding, inject, Input, OnDestroy, Output, PLATFORM_ID, Provider, output, input, viewChild } from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclSearchFormEvent, EUI_ECL_SEARCH_FORM } from '@eui/ecl/components/ecl-search-form';\nimport { ECLBaseDirective, EclRtlService } from '@eui/ecl/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { debounceTime, Subject, takeUntil } from 'rxjs';\nimport { EclSiteHeaderSearchEvent, EclSiteHeaderSearchToggleEvent } from '../events';\nimport { EclAreaDataService } from '../services/ecl-area-data.service';\n\nexport const ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR: Provider = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => EclSiteHeaderSearchComponent),\n    multi: true,\n};\n\nconst noop = (): void => {\n    /** empty*/\n};\n\n/**\n * This component builds the search box in the ecl-site-header component. Adds specific style and functionality, emits\n *  events on search and search toggle.\n */\n@Component({\n    selector: 'ecl-site-header-search',\n    templateUrl: './ecl-site-header-search.component.html',\n    imports: [FormsModule, TranslatePipe, ...EUI_ECL_SEARCH_FORM, ...EUI_ECL_ICON],\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n    providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR],\n})\nexport class EclSiteHeaderSearchComponent extends ECLBaseDirective implements ControlValueAccessor, AfterViewInit, OnDestroy {\n    @HostBinding('class') class = 'ecl-site-header__search-container';\n    /**\n     * The default role of the component is 'search', should not be changed.\n     */\n    @HostBinding('attr.role') role = 'search';\n\n    @Input() searchInputText: string;\n    readonly searchInputPlaceholder = input<string>(undefined);\n    readonly searchButtonLabel = input<string>(undefined);\n\n    /**\n     * The search link element from the view, i.e. the search button.\n     */\n    readonly searchLinkElement = viewChild('searchLink', { read: ElementRef });\n\n    readonly searchEvent = output<EclSiteHeaderSearchEvent>();\n    @Output() searchToggle = new EventEmitter<EclSiteHeaderSearchToggleEvent>();\n\n    /**\n     * The arrow position of the serahc dropdown, when in mobile mode.\n     */\n    public searchArrowPosition: string;\n    public isSearchBoxActive = false;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    private onChange: (_: any) => void = noop;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    private onTouched: (_: any) => void = noop;\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private parentHeaderRight: number | undefined;\n    private eclAreaDataService = inject(EclAreaDataService);\n    private eclRtlService = inject(EclRtlService);\n    private cdr = inject(ChangeDetectorRef);\n    private platformId = inject(PLATFORM_ID);\n    private ro?: ResizeObserver;\n    private document = inject<Document>(DOCUMENT);\n\n    ngAfterViewInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n\n        this.handleRtlChangeState();\n        this.handleSiteHeaderAreaChangeEvent();\n\n        const el = (this as any).elementRef?.nativeElement ?? null; // if ECLBaseDirective exposes it\n        if (!el) return;\n\n        this.ro = new ResizeObserver(() => {\n            this.calculateSearchFormArrowPosition(this.parentHeaderRight);\n        });\n\n        this.ro.observe(el);\n    }\n\n    ngOnDestroy(): void {\n        this.ro?.disconnect();\n        this.destroy$.next(true);\n        this.destroy$.complete();\n    }\n\n    onSearch(evt: EclSearchFormEvent): boolean {\n        this.searchEvent.emit(new EclSiteHeaderSearchEvent(evt.keyword));\n        this.onChange(evt.keyword);\n        return false;\n    }\n\n    onSearchBoxToggle(evt: MouseEvent): void {\n        this.isSearchBoxActive = !this.isSearchBoxActive;\n        const event = new EclSiteHeaderSearchToggleEvent(this.isSearchBoxActive);\n        this.searchToggle.next(event);\n        evt.preventDefault();\n    }\n\n    /**\n     *\n     * @returns The classes for the ecl search form.\n     */\n    getSearchBoxCssClasses(): string {\n        return ['ecl-site-header__search', this.isSearchBoxActive ? 'ecl-site-header__search--active' : ''].join(' ');\n    }\n\n    onModelChange(newValue: string): void {\n        this.searchInputText = newValue;\n        this.onChange(newValue);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    writeValue(value: any): void {\n        this.searchInputText = value;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    registerOnChange(fn: any): void {\n        this.onChange = fn;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    registerOnTouched(fn: any): void {\n        this.onTouched = fn;\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(debounceTime(50), takeUntil(this.destroy$)).subscribe(() => {\n            this.calculateSearchFormArrowPosition(this.parentHeaderRight);\n        });\n    }\n\n    private handleSiteHeaderAreaChangeEvent(): void {\n        this.eclAreaDataService.dataSubject$.pipe(takeUntil(this.destroy$)).subscribe(\n            parentHeaderRect => {\n                this.parentHeaderRight = parentHeaderRect.right;\n                this.calculateSearchFormArrowPosition(this.parentHeaderRight);\n            });\n    }\n\n    private calculateSearchFormArrowPosition(parentHeaderRight: number | undefined): void {\n        const searchLink = this.searchLinkElement().nativeElement.getBoundingClientRect();\n        const viewportWidth = this.document.documentElement.clientWidth;\n        const arrowPosition = viewportWidth - searchLink.right + searchLink.width / 2;\n        const arrowSize = '0.5rem';\n        if (this.isSearchBoxActive || parentHeaderRight !== undefined) {\n            this.searchArrowPosition = `calc(${arrowPosition}px + ${arrowSize})`;\n            this.cdr.detectChanges();\n        }\n    }\n}\n",
+            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { AfterViewInit, Component, DOCUMENT, ElementRef, EventEmitter, forwardRef, inject, Input, OnDestroy, Output, PLATFORM_ID, Provider, output, input, signal, viewChild } from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclSearchFormEvent, EUI_ECL_SEARCH_FORM } from '@eui/ecl/components/ecl-search-form';\nimport { ECLBaseDirective, ECLClickOutsideDirective, EclRtlService } from '@eui/ecl/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';\nimport { EclSiteHeaderSearchEvent, EclSiteHeaderSearchToggleEvent } from '../events';\n\nexport const ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR: Provider = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => EclSiteHeaderSearchComponent),\n    multi: true,\n};\n\nconst noop = (): void => {\n    /** empty*/\n};\n\n/** Half the arrow's own width, matching ECL's `arrowSize`. */\nconst ARROW_SIZE = '0.5rem';\n/** Debounce for the resize recomputation, matching ECL's `handleResize`. */\nconst RESIZE_DEBOUNCE = 200;\n\n/**\n * This component builds the search box in the ecl-site-header component. Adds specific style and functionality, emits\n *  events on search and search toggle.\n */\n@Component({\n    selector: 'ecl-site-header-search',\n    templateUrl: './ecl-site-header-search.component.html',\n    imports: [FormsModule, TranslatePipe, ...EUI_ECL_SEARCH_FORM, ...EUI_ECL_ICON],\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n    providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR],\n    hostDirectives: [\n        {\n            directive: ECLClickOutsideDirective,\n            outputs: ['eclClickOutside'],\n        },\n    ],\n    host: {\n        class: 'ecl-site-header__search-container',\n        // The default role of the component is 'search', should not be changed.\n        role: 'search',\n        '(eclClickOutside)': 'onClickOutside()',\n    },\n})\nexport class EclSiteHeaderSearchComponent extends ECLBaseDirective implements ControlValueAccessor, AfterViewInit, OnDestroy {\n    @Input() searchInputText: string;\n    readonly searchInputPlaceholder = input<string>(undefined);\n    readonly searchButtonLabel = input<string>(undefined);\n\n    readonly searchEvent = output<EclSiteHeaderSearchEvent>();\n    @Output() searchToggle = new EventEmitter<EclSiteHeaderSearchToggleEvent>();\n\n    /**\n     * Whether the search dropdown is open. Kept public because the parent\n     * `ecl-site-header` resets it directly when the login box opens.\n     */\n    isSearchBoxActive = false;\n\n    /**\n     * The arrow position of the search dropdown, when in mobile (full-width) mode.\n     */\n    protected readonly searchArrowPosition = signal<string | undefined>(undefined);\n\n    /**\n     * The search link element from the view, i.e. the search button (the toggle).\n     */\n    private readonly searchLinkElement = viewChild('searchLink', { read: ElementRef });\n    /**\n     * The search form element from the view, i.e. the dropdown box the arrow points from.\n     */\n    private readonly searchFormElement = viewChild('searchForm', { read: ElementRef });\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    private onChange: (_: any) => void = noop;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    private onTouched: (_: any) => void = noop;\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private readonly eclRtlService = inject(EclRtlService);\n    private readonly platformId = inject(PLATFORM_ID);\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly window = this.document.defaultView; // Window | null\n\n    ngAfterViewInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n\n        // Recompute while open on resize (debounced, matching ECL's handleResize).\n        if (this.window) {\n            fromEvent(this.window, 'resize')\n                .pipe(debounceTime(RESIZE_DEBOUNCE), takeUntil(this.destroy$))\n                .subscribe(() => this.setSearchArrow());\n        }\n\n        // Recompute while open on RTL direction change.\n        this.eclRtlService.currentRtlState$.pipe(debounceTime(50), takeUntil(this.destroy$)).subscribe(() => this.setSearchArrow());\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.complete();\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    writeValue(value: any): void {\n        this.searchInputText = value;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    registerOnChange(fn: any): void {\n        this.onChange = fn;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    registerOnTouched(fn: any): void {\n        this.onTouched = fn;\n    }\n\n    /**\n     * Close the search dropdown on click outside, matching ECL's `handleClickGlobal`.\n     */\n    protected onClickOutside(): void {\n        this.closeSearchBox();\n    }\n\n    protected onSearch(evt: EclSearchFormEvent): boolean {\n        this.searchEvent.emit(new EclSiteHeaderSearchEvent(evt.keyword));\n        this.onChange(evt.keyword);\n        return false;\n    }\n\n    protected onSearchBoxToggle(evt: MouseEvent): void {\n        this.isSearchBoxActive = !this.isSearchBoxActive;\n        const event = new EclSiteHeaderSearchToggleEvent(this.isSearchBoxActive);\n        this.searchToggle.next(event);\n        evt.preventDefault();\n\n        // Measure after the `--active` class is applied and the box reflows to\n        // full width (matching ECL's toggleSearch -> setSearchArrow order).\n        if (this.isSearchBoxActive) {\n            this.window?.requestAnimationFrame(() => this.setSearchArrow());\n        }\n    }\n\n    /**\n     *\n     * @returns The classes for the ecl search form.\n     */\n    protected getSearchBoxCssClasses(): string {\n        return ['ecl-site-header__search', this.isSearchBoxActive ? 'ecl-site-header__search--active' : ''].join(' ');\n    }\n\n    protected onModelChange(newValue: string): void {\n        this.searchInputText = newValue;\n        this.onChange(newValue);\n    }\n\n    private closeSearchBox(): void {\n        if (!this.isSearchBoxActive) return;\n\n        this.isSearchBoxActive = false;\n        this.searchToggle.next(new EclSiteHeaderSearchToggleEvent(this.isSearchBoxActive));\n        this.searchArrowPosition.set(undefined);\n    }\n\n    /**\n     * Positions the dropdown arrow so it points at the center of the search toggle button.\n     * Mirrors ECL's `setSearchArrow`: the arrow position is an offset relative to the\n     * search form's own left edge, and it only applies to the mobile full-width dropdown\n     * (`searchFormRect.width >= clientWidth - 1`, the `- 1` absorbing subpixel rounding).\n     */\n    private setSearchArrow(): void {\n        if (!this.isSearchBoxActive) return;\n\n        const searchFormRect = this.searchFormElement()?.nativeElement.getBoundingClientRect();\n        const toggleButtonRect = this.searchLinkElement()?.nativeElement.getBoundingClientRect();\n        if (!searchFormRect || !toggleButtonRect) return;\n\n        const clientWidth = this.document.documentElement.clientWidth;\n        if (searchFormRect.width >= clientWidth - 1) {\n            const arrowOffset = toggleButtonRect.left - searchFormRect.left + toggleButtonRect.width / 2;\n            this.searchArrowPosition.set(`calc(${arrowOffset}px - ${ARROW_SIZE})`);\n        } else {\n            this.searchArrowPosition.set(undefined);\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n            :host {\n                display: block;\n            }\n        \n",
             "jsdoctags": [
                 {
-                    "pos": 1081,
-                    "end": 1247,
+                    "pos": 1221,
+                    "end": 1387,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -87350,6 +86735,10 @@
                         "name": "ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR",
                         "type": "injectable"
                     },
+                    {
+                        "name": "ECLClickOutsideDirective",
+                        "type": "directive"
+                    },
                     {
                         "name": "ECLBaseDirective",
                         "type": "directive"
@@ -87368,7 +86757,7 @@
                     }
                 ]
             },
-            "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"
+            "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    #searchForm\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": "EclSloganTickerComponent",
@@ -87894,10 +87283,11 @@
         },
         {
             "name": "EclSocialMediaFollowComponent",
-            "id": "component-EclSocialMediaFollowComponent-f654af80b29a6bd0e224db14a80294d3f9980172f216037b2f5c7ee9ec02a36e2e8e6a4e45524230c9ed4ca8478a3a66a439b08f360d21fcaf2d6cb725787e9a",
+            "id": "component-EclSocialMediaFollowComponent-fcab917e6198b64e907ac28615dad1cf477fb287a17e38ee55f63e5c5cebf077dd13d234b452e0e45a6191fd24561c50be0befe539635a09637022fc41c5ad91",
             "file": "packages/ecl/components/ecl-social-media-follow/ecl-social-media-follow.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -87921,7 +87311,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 9,
+                    "line": 12,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -87938,7 +87328,24 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 11,
+                    "line": 15,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
+                },
+                {
+                    "name": "isIconOnly",
+                    "coverageIgnore": false,
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "boolean",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 13,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -87955,7 +87362,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 10,
+                    "line": 14,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -88051,27 +87458,14 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 14,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [],
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component, HostBinding, booleanAttribute, input } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n@Component({\n    selector: 'ecl-social-media-follow',\n    templateUrl: './ecl-social-media-follow.component.html',\n})\nexport class EclSocialMediaFollowComponent extends ECLBaseDirective {\n    readonly description = input<string>(undefined);\n    readonly isVertical = input(false, { transform: booleanAttribute });\n    readonly horizontalAlignment = input<'right' | 'left' | string>('left');\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-social-media-follow'),\n            this.isVertical() ? 'ecl-social-media-follow--vertical' : '',\n            `ecl-social-media-follow--${this.horizontalAlignment()}`,\n        ]\n            .join(' ')\n            .trim();\n    }\n}\n",
+            "sourceCode": "import { Component, booleanAttribute, input } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n@Component({\n    selector: 'ecl-social-media-follow',\n    templateUrl: './ecl-social-media-follow.component.html',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSocialMediaFollowComponent extends ECLBaseDirective {\n    readonly description = input<string>(undefined);\n    readonly isIconOnly = input(false, { transform: booleanAttribute });\n    readonly isVertical = input(false, { transform: booleanAttribute });\n    readonly horizontalAlignment = input<'right' | 'left' | string>('left');\n\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-social-media-follow'),\n            this.isVertical() ? 'ecl-social-media-follow--vertical' : '',\n            `ecl-social-media-follow--${this.horizontalAlignment()}`,\n        ]\n            .join(' ')\n            .trim();\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -88085,7 +87479,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 14,
+                        "line": 17,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -88104,10 +87498,11 @@
         },
         {
             "name": "EclSocialMediaFollowItemComponent",
-            "id": "component-EclSocialMediaFollowItemComponent-ed2164f85b7d64f8d8fac99dbd85b9daf46f2c0f6adb24b7cdeb865f195926ad0eee3b826c46f06ca87a06f0c0c5b7d1a996ce2d1ed4d4882aec79e8595572d9",
+            "id": "component-EclSocialMediaFollowItemComponent-be2bc74a52d7b183206e23fa9c6edd0706816decad401fed2ccd0e2788dead5b1d6dbb066556634b97683220c7111e50c45fd911c2cccbe1ec6738847a5e6fdf",
             "file": "packages/ecl/components/ecl-social-media-follow/ecl-social-media-follow-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -88131,7 +87526,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 25,
+                    "line": 29,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -88148,7 +87543,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 21,
+                    "line": 25,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -88164,7 +87559,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 19,
+                    "line": 23,
                     "rawdescription": "\n",
                     "required": false
                 },
@@ -88178,7 +87573,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 20,
+                    "line": 24,
                     "rawdescription": "\n",
                     "required": false
                 },
@@ -88192,7 +87587,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 17,
+                    "line": 22,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -88209,7 +87604,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 22,
+                    "line": 26,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -88226,7 +87621,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 24,
+                    "line": 28,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -88243,7 +87638,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 23,
+                    "line": 27,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -88304,7 +87699,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 35,
+                    "line": 38,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -88312,30 +87707,7 @@
                     "required": false
                 }
             ],
-            "propertiesClass": [
-                {
-                    "name": "role",
-                    "coverageIgnore": false,
-                    "defaultValue": "'listitem'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 18,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.role'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "onItemClick",
@@ -88343,7 +87715,7 @@
                     "args": [
                         {
                             "name": "evt",
-                            "type": "unknown",
+                            "type": "Event",
                             "optional": false,
                             "dotDotDotToken": false,
                             "deprecated": false,
@@ -88353,7 +87725,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 37,
+                    "line": 46,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -88361,7 +87733,7 @@
                     "jsdoctags": [
                         {
                             "name": "evt",
-                            "type": "unknown",
+                            "type": "Event",
                             "optional": false,
                             "dotDotDotToken": false,
                             "deprecated": false,
@@ -88414,33 +87786,7 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.role",
-                    "actualName": "role",
-                    "defaultValue": "'listitem'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 18,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 31,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [
@@ -88463,7 +87809,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { booleanAttribute, Component, HostBinding, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclBaseEvent } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { RouterLink, RouterLinkWithHref } from '@angular/router';\n\nexport class EclSocialMediaFollowItemClickEvent extends EclBaseEvent {}\n\n@Component({\n    selector: 'ecl-social-media-follow-item',\n    templateUrl: './ecl-social-media-follow-item.component.html',\n    imports: [...EUI_ECL_ICON, ...EUI_ECL_LINK, NgTemplateOutlet, RouterLink, RouterLinkWithHref],\n})\nexport class EclSocialMediaFollowItemComponent extends ECLBaseDirective {\n    readonly isInverted = input<false, unknown>(undefined, { transform: (booleanAttribute) as any });\n    @HostBinding('attr.role') role = 'listitem';\n    icon = input<string>();\n    iconSet = input<string>('social-media');\n    readonly href = input('');\n    readonly routerLink = input('');\n    readonly target = input<string>(undefined);\n    readonly size = input('m');\n    readonly extraAttributes = input<{\n        name: string;\n        value?: string | null;\n    }[]>(undefined);\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-social-media-follow__item')].join(' ').trim();\n    }\n\n    readonly itemClick = output<EclSocialMediaFollowItemClickEvent>();\n\n    onItemClick(evt): void {\n        this.itemClick.emit(new EclSocialMediaFollowItemClickEvent());\n        if (!this.href() && !this.routerLink()) {\n            evt.preventDefault();\n        }\n    }\n}\n",
+            "sourceCode": "import { booleanAttribute, Component, inject, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclBaseEvent } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EclSocialMediaFollowComponent } from './ecl-social-media-follow.component';\n\nexport class EclSocialMediaFollowItemClickEvent extends EclBaseEvent {}\n\n@Component({\n    selector: 'ecl-social-media-follow-item',\n    templateUrl: './ecl-social-media-follow-item.component.html',\n    imports: [...EUI_ECL_ICON, ...EUI_ECL_LINK, NgTemplateOutlet, RouterLink, RouterLinkWithHref],\n    host: {\n        role: 'listitem',\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSocialMediaFollowItemComponent extends ECLBaseDirective {\n    readonly isInverted = input<false, unknown>(undefined, { transform: (booleanAttribute) as any });\n    icon = input<string>();\n    iconSet = input<string>('social-media');\n    readonly href = input('');\n    readonly routerLink = input('');\n    readonly target = input<string>(undefined);\n    readonly size = input('m');\n    readonly extraAttributes = input<{\n        name: string;\n        value?: string | null;\n    }[]>(undefined);\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-social-media-follow__item')].join(' ').trim();\n    }\n\n    readonly itemClick = output<EclSocialMediaFollowItemClickEvent>();\n\n    private parent = inject(EclSocialMediaFollowComponent);\n\n    get isIconOnly(): boolean {\n        return this.parent?.isIconOnly() ?? false;\n    }\n\n    onItemClick(evt: Event): void {\n        this.itemClick.emit(new EclSocialMediaFollowItemClickEvent());\n        if (!this.href() && !this.routerLink()) {\n            evt.preventDefault();\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -88477,7 +87823,18 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 31,
+                        "line": 34,
+                        "rawdescription": "\n",
+                        "description": ""
+                    }
+                },
+                "isIconOnly": {
+                    "name": "isIconOnly",
+                    "getSignature": {
+                        "name": "isIconOnly",
+                        "type": "boolean",
+                        "returnType": "boolean",
+                        "line": 42,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -88512,7 +87869,7 @@
                     }
                 ]
             },
-            "templateData": "@if(href()) {\n<a eclLink (click)=\"onItemClick($event)\" variant=\"standalone\" [href]=\"href()\" [attr.target]=\"target()\"\n    class=\"ecl-social-media-follow__link\" [isInverted]=\"isInverted()\" [extraAttributes]=\"extraAttributes()\">\n    @if(icon()) {\n    <ecl-icon [iconSet]=\"iconSet()\" icon=\"{{ icon() }}\" [size]=\"size()\" class=\"ecl-social-media-follow__icon\"> </ecl-icon>\n    }\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </span>\n</a>\n}\n\n@if(!href() && routerLink()) {\n<a eclLink (click)=\"onItemClick($event)\" variant=\"standalone\" [routerLink]=\"routerLink()\" [attr.target]=\"target()\"\n    class=\"ecl-social-media-follow__link\" [isInverted]=\"isInverted()\" [extraAttributes]=\"extraAttributes()\">\n    @if(icon()) {\n    <ecl-icon [iconSet]=\"iconSet()\" icon=\"{{ icon() }}\" [size]=\"size()\" class=\"ecl-social-media-follow__icon\"> </ecl-icon>\n    }\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </span>\n</a>\n}\n\n@if(!href() && !routerLink()) {\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n"
+            "templateData": "@if(href()) {\n<a eclLink (click)=\"onItemClick($event)\" variant=\"standalone\" [href]=\"href()\" [attr.target]=\"target()\"\n    class=\"ecl-social-media-follow__link\" [isInverted]=\"isInverted()\" [isIconOnly]=\"isIconOnly\" [extraAttributes]=\"extraAttributes()\">\n    @if(icon()) {\n    <ecl-icon [iconSet]=\"iconSet()\" icon=\"{{ icon() }}\" [size]=\"size()\" class=\"ecl-social-media-follow__icon\"> </ecl-icon>\n    }\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </span>\n</a>\n}\n\n@if(!href() && routerLink()) {\n<a eclLink (click)=\"onItemClick($event)\" variant=\"standalone\" [routerLink]=\"routerLink()\" [attr.target]=\"target()\"\n    class=\"ecl-social-media-follow__link\" [isInverted]=\"isInverted()\" [isIconOnly]=\"isIconOnly\" [extraAttributes]=\"extraAttributes()\">\n    @if(icon()) {\n    <ecl-icon [iconSet]=\"iconSet()\" icon=\"{{ icon() }}\" [size]=\"size()\" class=\"ecl-social-media-follow__icon\"> </ecl-icon>\n    }\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </span>\n</a>\n}\n\n@if(!href() && !routerLink()) {\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n"
         },
         {
             "name": "EclSplashPageComponent",
@@ -90834,7 +90191,7 @@
                     }
                 ]
             },
-            "templateData": "@if (eclTitle() || eclDescription()) {\n<div class=\"ecl-story-card__header\">\n    @if (eclTitle()) {\n    <div class=\"ecl-story-card__title\" [attr.id]=\"titleId()\">{{ eclTitle() }}</div>\n    }\n    @if (eclDescription()) {\n    <div class=\"ecl-story-card__description\">{{ eclDescription() }}</div>\n    }\n</div>\n}\n\n<!-- Mobile: Embla Carousel (auto-generated from items + details) -->\n<div class=\"ecl-story-card__carousel\">\n    <div class=\"ecl-story-card__carousel-viewport\"\n        role=\"region\"\n        [attr.aria-label]=\"'ecl.story-card.SLIDER-LABEL' | translate\"\n        emblaCarousel\n        [options]=\"emblaOptions\"\n        [subscribeToEvents]=\"subscribeToEvents\"\n        (emblaChange)=\"onEmblaChange($event)\">\n        <ul class=\"ecl-story-card__carousel-container\">\n            @for (item of items(); track i; let i = $index) {\n            <li class=\"ecl-story-card__carousel-slide\"\n                [attr.aria-hidden]=\"i !== activeSlideIndex() ? true : null\">\n                <article class=\"ecl-story-card__card\">\n                    <div class=\"ecl-story-card__image-wrapper\" #carouselImageWrapper>\n                    </div>\n                    <div class=\"ecl-story-card__content\" #carouselContentWrapper>\n                        @if (detailsPanels()[i]; as panel) {\n                            @if (panel.eclTitle()) {\n                            <div class=\"ecl-story-card__card-title\">{{ panel.eclTitle() }}</div>\n                            }\n                            @if (panel.description()) {\n                            <div class=\"ecl-story-card__card-description\">{{ panel.description() }}</div>\n                            }\n                        }\n                    </div>\n                </article>\n            </li>\n            }\n        </ul>\n    </div>\n\n    <!-- Carousel Controls -->\n    @if (totalSlides() > 1) {\n    <div class=\"ecl-story-card__pager\">\n        <button class=\"ecl-story-card__prev\"\n            [disabled]=\"prevDisabled()\"\n            (click)=\"onCarouselPrevClick()\"\n            [attr.aria-label]=\"'ecl.story-card.SHOW-PREV-SLIDE' | translate\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n            <span class=\"ecl-story-card__prev-label\">\n                {{ 'ecl.story-card.PREVIOUS' | translate }}\n            </span>\n        </button>\n\n        <div class=\"ecl-story-card__dots\">\n            @for (dotIndex of getDotIndices(); track dotIndex) {\n            <button\n                #dotButton\n                class=\"ecl-story-card__dot\"\n                [class.ecl-story-card__dot--active]=\"dotIndex === activeSlideIndex()\"\n                [class.is-prev]=\"dotIndex === activeSlideIndex() - 1\"\n                [attr.aria-label]=\"'ecl.story-card.GO-TO-SLIDE' | translate: { current: dotIndex + 1, total: totalSlides() }\"\n                (click)=\"goToSlide(dotIndex)\">\n            </button>\n            }\n        </div>\n\n        <button class=\"ecl-story-card__next\"\n            [disabled]=\"nextDisabled()\"\n            (click)=\"onCarouselNextClick()\"\n            [attr.aria-label]=\"'ecl.story-card.SHOW-NEXT-SLIDE' | translate\">\n            <span class=\"ecl-story-card__next-label\">\n                {{ 'ecl.story-card.NEXT' | translate }}\n            </span>\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n        </button>\n    </div>\n    }\n</div>\n\n<!-- Desktop: Grid with Accordion (user-authored content projected here) -->\n<div class=\"ecl-story-card__grid\">\n    <ng-content select=\"ul[eclStoryCardList]\"></ng-content>\n    <ng-content select=\"[eclStoryCardGridDetails]\"></ng-content>\n\n    <!-- Grid Controls -->\n    @if (totalSlides() > 1) {\n    <div class=\"ecl-story-card__grid-controls\">\n        <button class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-story-card__grid-prev ecl-button--icon-only\"\n            type=\"button\"\n            (click)=\"onGridPrevClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PREVIOUS' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.PREVIOUS' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor\" icon=\"caret-left\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--secondary ecl-button--neutral ecl-story-card__grid-play ecl-button--icon-only\"\n            type=\"button\"\n            [style.display]=\"isAutoPlaying() ? 'none' : 'flex'\"\n            (click)=\"onPlayClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PLAY' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.PLAY' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor-fill\" icon=\"play\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--secondary ecl-button--neutral ecl-story-card__grid-pause ecl-button--icon-only\"\n            type=\"button\"\n            [style.display]=\"isAutoPlaying() ? 'flex' : 'none'\"\n            (click)=\"onPauseClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PAUSE' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.PAUSE' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor-fill\" icon=\"pause\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-story-card__grid-next ecl-button--icon-only\"\n            type=\"button\"\n            (click)=\"onGridNextClick()\"\n            [attr.aria-label]=\"'ecl.story-card.NEXT' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.NEXT' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor\" icon=\"caret-right\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n    </div>\n    }\n</div>\n"
+            "templateData": "@if (eclTitle() || eclDescription()) {\n<div class=\"ecl-story-card__header\">\n    @if (eclTitle()) {\n    <div class=\"ecl-story-card__title\" [attr.id]=\"titleId()\">{{ eclTitle() }}</div>\n    }\n    @if (eclDescription()) {\n    <div class=\"ecl-story-card__description\">{{ eclDescription() }}</div>\n    }\n</div>\n}\n\n<!-- Mobile: Embla Carousel (auto-generated from items + details) -->\n<div class=\"ecl-story-card__carousel\">\n    <div class=\"ecl-story-card__carousel-viewport\"\n        role=\"region\"\n        [attr.aria-label]=\"'ecl.story-card.SLIDER-LABEL' | translate\"\n        emblaCarousel\n        [options]=\"emblaOptions\"\n        [subscribeToEvents]=\"subscribeToEvents\"\n        (emblaChange)=\"onEmblaChange($event)\">\n        <ul class=\"ecl-story-card__carousel-container\">\n            @for (item of items(); track i; let i = $index) {\n            <li class=\"ecl-story-card__carousel-slide\"\n                [attr.aria-hidden]=\"i !== activeSlideIndex() ? true : null\">\n                <article class=\"ecl-story-card__card\">\n                    <div class=\"ecl-story-card__image-wrapper\" #carouselImageWrapper>\n                    </div>\n                    <div class=\"ecl-story-card__content\" #carouselContentWrapper>\n                        @if (detailsPanels()[i]; as panel) {\n                            @if (panel.eclTitle()) {\n                            <div class=\"ecl-story-card__card-title\">{{ panel.eclTitle() }}</div>\n                            }\n                            @if (panel.description()) {\n                            <div class=\"ecl-story-card__card-description\">{{ panel.description() }}</div>\n                            }\n                        }\n                    </div>\n                </article>\n            </li>\n            }\n        </ul>\n    </div>\n\n    <!-- Carousel Controls -->\n    @if (totalSlides() > 1) {\n    <div class=\"ecl-story-card__pager\">\n        <button class=\"ecl-story-card__prev\"\n            [disabled]=\"prevDisabled()\"\n            (click)=\"onCarouselPrevClick()\"\n            [attr.aria-label]=\"'ecl.story-card.SHOW-PREV-SLIDE' | translate\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n            <span class=\"ecl-story-card__prev-label\">\n                {{ 'ecl.story-card.PREVIOUS' | translate }}\n            </span>\n        </button>\n\n        <div class=\"ecl-story-card__dots\">\n            @for (dotIndex of getDotIndices(); track dotIndex) {\n            <button\n                #dotButton\n                class=\"ecl-story-card__dot\"\n                [class.ecl-story-card__dot--active]=\"dotIndex === activeSlideIndex()\"\n                [class.is-prev]=\"dotIndex === activeSlideIndex() - 1\"\n                [attr.aria-label]=\"'ecl.story-card.GO-TO-SLIDE' | translate: { current: dotIndex + 1, total: totalSlides() }\"\n                (click)=\"goToSlide(dotIndex)\">\n            </button>\n            }\n        </div>\n\n        <button class=\"ecl-story-card__next\"\n            [disabled]=\"nextDisabled()\"\n            (click)=\"onCarouselNextClick()\"\n            [attr.aria-label]=\"'ecl.story-card.SHOW-NEXT-SLIDE' | translate\">\n            <span class=\"ecl-story-card__next-label\">\n                {{ 'ecl.story-card.NEXT' | translate }}\n            </span>\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n        </button>\n    </div>\n    }\n</div>\n\n<!-- Desktop: Grid with Accordion (user-authored content projected here) -->\n<div class=\"ecl-story-card__grid\">\n    <ng-content select=\"ul[eclStoryCardList]\"></ng-content>\n    <ng-content select=\"[eclStoryCardGridDetails]\"></ng-content>\n\n    <!-- Grid Controls -->\n    @if (totalSlides() > 1) {\n    <div class=\"ecl-story-card__grid-controls\">\n        <button class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-story-card__grid-prev ecl-button--icon-only\"\n            type=\"button\"\n            (click)=\"onGridPrevClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PREVIOUS' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\">\n                    {{ 'ecl.story-card.PREVIOUS' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor\" icon=\"caret-left\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--secondary ecl-button--neutral ecl-story-card__grid-play ecl-button--icon-only\"\n            type=\"button\"\n            [style.display]=\"isAutoPlaying() ? 'none' : 'flex'\"\n            (click)=\"onPlayClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PLAY' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\">\n                    {{ 'ecl.story-card.PLAY' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor-fill\" icon=\"play\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--secondary ecl-button--neutral ecl-story-card__grid-pause ecl-button--icon-only\"\n            type=\"button\"\n            [style.display]=\"isAutoPlaying() ? 'flex' : 'none'\"\n            (click)=\"onPauseClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PAUSE' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\">\n                    {{ 'ecl.story-card.PAUSE' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor-fill\" icon=\"pause\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-story-card__grid-next ecl-button--icon-only\"\n            type=\"button\"\n            (click)=\"onGridNextClick()\"\n            [attr.aria-label]=\"'ecl.story-card.NEXT' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\">\n                    {{ 'ecl.story-card.NEXT' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor\" icon=\"caret-right\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n    </div>\n    }\n</div>\n"
         },
         {
             "name": "EclStoryCardGridDetailsComponent",
@@ -95634,6 +94991,45 @@
     ],
     "miscellaneous": {
         "variables": [
+            {
+                "name": "ARROW_SIZE",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts",
+                "coverageIgnore": false,
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "string",
+                "defaultValue": "'0.5rem'",
+                "rawdescription": "Half the arrow's own width, matching ECL's `arrowSize`.",
+                "description": "<p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>\n"
+            },
+            {
+                "name": "ARROW_SIZE",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts",
+                "coverageIgnore": false,
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "string",
+                "defaultValue": "'0.5rem'",
+                "rawdescription": "Half the arrow's own width, matching ECL's `arrowSize`.",
+                "description": "<p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>\n"
+            },
+            {
+                "name": "ARROW_SIZE",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts",
+                "coverageIgnore": false,
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "string",
+                "defaultValue": "'0.5rem'",
+                "rawdescription": "Half the arrow's own width, matching ECL's `arrowSize`.",
+                "description": "<p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>\n"
+            },
             {
                 "name": "AVAILABLE_NON_EU_LOGO_COUNTRY_CODES",
                 "ctype": "miscellaneous",
@@ -96577,6 +95973,32 @@
                 "type": "unknown",
                 "defaultValue": "(): void => {\n    /** empty*/\n}"
             },
+            {
+                "name": "RESIZE_DEBOUNCE",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts",
+                "coverageIgnore": false,
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "number",
+                "defaultValue": "200",
+                "rawdescription": "Debounce for the resize recomputation, matching ECL's `handleResize`.",
+                "description": "<p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>\n"
+            },
+            {
+                "name": "RESIZE_DEBOUNCE",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts",
+                "coverageIgnore": false,
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "number",
+                "defaultValue": "200",
+                "rawdescription": "Debounce for the resize recomputation, matching ECL's `handleResize`.",
+                "description": "<p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>\n"
+            },
             {
                 "name": "testBed",
                 "ctype": "miscellaneous",
@@ -97043,6 +96465,99 @@
             }
         ],
         "groupedVariables": {
+            "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts": [
+                {
+                    "name": "ARROW_SIZE",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts",
+                    "coverageIgnore": false,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "defaultValue": "'0.5rem'",
+                    "rawdescription": "Half the arrow's own width, matching ECL's `arrowSize`.",
+                    "description": "<p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>\n"
+                }
+            ],
+            "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts": [
+                {
+                    "name": "ARROW_SIZE",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts",
+                    "coverageIgnore": false,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "defaultValue": "'0.5rem'",
+                    "rawdescription": "Half the arrow's own width, matching ECL's `arrowSize`.",
+                    "description": "<p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>\n"
+                },
+                {
+                    "name": "RESIZE_DEBOUNCE",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts",
+                    "coverageIgnore": false,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "number",
+                    "defaultValue": "200",
+                    "rawdescription": "Debounce for the resize recomputation, matching ECL's `handleResize`.",
+                    "description": "<p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>\n"
+                }
+            ],
+            "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts": [
+                {
+                    "name": "ARROW_SIZE",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts",
+                    "coverageIgnore": false,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "defaultValue": "'0.5rem'",
+                    "rawdescription": "Half the arrow's own width, matching ECL's `arrowSize`.",
+                    "description": "<p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>\n"
+                },
+                {
+                    "name": "ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts",
+                    "coverageIgnore": false,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Provider",
+                    "defaultValue": "{\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => EclSiteHeaderSearchComponent),\n    multi: true,\n}"
+                },
+                {
+                    "name": "noop",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts",
+                    "coverageIgnore": false,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "defaultValue": "(): void => {\n    /** empty*/\n}"
+                },
+                {
+                    "name": "RESIZE_DEBOUNCE",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts",
+                    "coverageIgnore": false,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "number",
+                    "defaultValue": "200",
+                    "rawdescription": "Debounce for the resize recomputation, matching ECL's `handleResize`.",
+                    "description": "<p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>\n"
+                }
+            ],
             "packages/ecl/core/utils/constants/constants.ts": [
                 {
                     "name": "AVAILABLE_NON_EU_LOGO_COUNTRY_CODES",
@@ -97128,30 +96643,6 @@
                     "defaultValue": "(): void => {\n    /** empty*/\n}"
                 }
             ],
-            "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts": [
-                {
-                    "name": "ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts",
-                    "coverageIgnore": false,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "Provider",
-                    "defaultValue": "{\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => EclSiteHeaderSearchComponent),\n    multi: true,\n}"
-                },
-                {
-                    "name": "noop",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts",
-                    "coverageIgnore": false,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "defaultValue": "(): void => {\n    /** empty*/\n}"
-                }
-            ],
             "packages/ecl/components/ecl-accordion/index.ts": [
                 {
                     "name": "EUI_ECL_ACCORDION",