@eui/ecl 22.0.0-alpha.34 → 22.0.0-alpha.35

package/docs/json/documentation.json

@@ -3374,13 +3374,13 @@
         },
         {
             "name": "EclAppLanguageDismissEvent",
-            "id": "class-EclAppLanguageDismissEvent-32f3eb5490c2804bf33df7ed94dc1abe890f04d2c1e8f48b981387c5afc4b888b2fd1b529c314dcbf4bbf25786f7772f81075ac1e6e2e18f88ae5009783c1072",
+            "id": "class-EclAppLanguageDismissEvent-0cf3387d1e3b4afd626393c991447eacabd7a17d1deb38542b887de02a8d87b838c3fdb91942e035cc5c45480c7ad7bff86ebba4f1fc5990c566c542d15e9c7c",
             "file": "packages/ecl/components/ecl-app/ecl-app.component.ts",
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { AfterViewInit, Component, contentChild, OnDestroy, OnInit, PLATFORM_ID, inject, output, signal } from '@angular/core';\nimport { CssUtils, EuiAppShellService } from '@eui/core';\nimport { EuiLanguage } from '@eui/base';\nimport { EclSiteHeaderLanguageComponent, EclSiteHeaderLanguageSelectedEvent } from '@eui/ecl/components/ecl-site-header';\nimport { ECLBaseDirective, EclBaseEvent, EclRtlService } from '@eui/ecl/core';\nimport { fromEvent, Subject } from 'rxjs';\nimport { debounceTime, takeUntil } from 'rxjs/operators';\n\n/**\n * The wrapper component for an ecl application. Has some important global properties.\n */\nexport class EclAppLanguageDismissEvent extends EclBaseEvent {\n    constructor(public language?: EuiLanguage) {\n        super();\n    }\n}\n\n@Component({\n    selector: 'ecl-app',\n    templateUrl: './ecl-app.component.html',\n    host: {\n        '[attr.dir]': 'textDirection()',\n    },\n})\nexport class EclAppComponent extends ECLBaseDirective implements OnInit, AfterViewInit, OnDestroy {\n    /**\n     * Text direction, by default is 'ltr' - left-to-write. Can also be 'rtl' - right-to-left, which will\n     *  make all components within <ecl-app> to lign to the right, and apply some special styling and functionality.\n     */\n    readonly textDirection = signal('ltr');\n\n    readonly eclSiteHeaderLanguage = contentChild(EclSiteHeaderLanguageComponent);\n\n    readonly languageDismiss = output<EclAppLanguageDismissEvent>();\n\n    protected destroy$: Subject<boolean> = new Subject<boolean>();\n    private readonly eclRtlService = inject(EclRtlService);\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly platformId = inject(PLATFORM_ID);\n    private readonly appShellService = inject(EuiAppShellService);\n\n    ngOnInit(): void {\n\n        // Only initialize CSS vars if no parent app shell is already active\n        const isNestedInAppShell = this.appShellService.state.hasHeader || this.appShellService.state.hasSidebar || this.appShellService.state.hasToolbar;\n        if (!isNestedInAppShell) {\n            CssUtils.initCssVars(this.document, this.platformId);\n        }\n        if (isPlatformBrowser(this.platformId)) {\n            const browserAgent = window.navigator.userAgent.toLowerCase();\n\n            this.appShellService.setState({\n                ...this.appShellService.state,\n                windowHeight: window.innerHeight,\n                windowWidth: window.innerWidth,\n                deviceInfo: {\n                    isChrome: browserAgent.indexOf('chrome') > -1,\n                    isIE: browserAgent.indexOf('trident') > -1,\n                    isFF: browserAgent.indexOf('firefox') > -1,\n                },\n                appBaseFontSize: this.appShellService.getBaseFontSize(),\n            });\n        }\n\n        if (isPlatformBrowser(this.platformId)) {\n            fromEvent(window, 'resize')\n                .pipe(debounceTime(50), takeUntil(this.destroy$))\n                .subscribe(() => {\n                    this.appShellService?.setState({\n                        ...this.appShellService.state,\n                        windowHeight: window.innerHeight,\n                        windowWidth: window.innerWidth,\n                    });\n                    CssUtils.setAppViewportCssVars(this.platformId);\n                });\n        }\n    }\n\n    ngAfterViewInit(): void {\n        // Adds global class, which is used to apply the correct styling for eui-21.\n        CssUtils.setHtmlClass('eui-21', this.document);\n        this.handleRtlChangeState();\n        this.handleUIEvents();\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * Changes the text direction from 'ltr' to 'rtl' and vice versa.\n     */\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            if (rtlState) {\n                this.textDirection.set('rtl');\n            } else {\n                this.textDirection.set('ltr');\n            }\n        });\n    }\n\n    private handleUIEvents(): void {\n        this.eclSiteHeaderLanguage()?.languageSelected\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((evt: EclSiteHeaderLanguageSelectedEvent) => {\n                this.languageDismiss.emit(new EclAppLanguageDismissEvent(evt.language));\n            });\n    }\n}\n",
+            "sourceCode": "import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { AfterViewInit, Component, contentChild, OnDestroy, OnInit, PLATFORM_ID, inject, output, signal } from '@angular/core';\nimport { outputToObservable } from '@angular/core/rxjs-interop';\nimport { CssUtils, EuiAppShellService } from '@eui/core';\nimport { EuiLanguage } from '@eui/base';\nimport { EclSiteHeaderLanguageComponent, EclSiteHeaderLanguageSelectedEvent } from '@eui/ecl/components/ecl-site-header';\nimport { ECLBaseDirective, EclBaseEvent, EclRtlService } from '@eui/ecl/core';\nimport { fromEvent, Subject } from 'rxjs';\nimport { debounceTime, takeUntil } from 'rxjs/operators';\n\n/**\n * The wrapper component for an ecl application. Has some important global properties.\n */\nexport class EclAppLanguageDismissEvent extends EclBaseEvent {\n    constructor(public language?: EuiLanguage) {\n        super();\n    }\n}\n\n@Component({\n    selector: 'ecl-app',\n    templateUrl: './ecl-app.component.html',\n    host: {\n        '[attr.dir]': 'textDirection()',\n    },\n})\nexport class EclAppComponent extends ECLBaseDirective implements OnInit, AfterViewInit, OnDestroy {\n    /**\n     * Text direction, by default is 'ltr' - left-to-write. Can also be 'rtl' - right-to-left, which will\n     *  make all components within <ecl-app> to lign to the right, and apply some special styling and functionality.\n     */\n    readonly textDirection = signal('ltr');\n\n    readonly eclSiteHeaderLanguage = contentChild(EclSiteHeaderLanguageComponent);\n\n    readonly languageDismiss = output<EclAppLanguageDismissEvent>();\n\n    protected destroy$: Subject<boolean> = new Subject<boolean>();\n    private readonly eclRtlService = inject(EclRtlService);\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly platformId = inject(PLATFORM_ID);\n    private readonly appShellService = inject(EuiAppShellService);\n\n    ngOnInit(): void {\n\n        // Only initialize CSS vars if no parent app shell is already active\n        const isNestedInAppShell = this.appShellService.state.hasHeader || this.appShellService.state.hasSidebar || this.appShellService.state.hasToolbar;\n        if (!isNestedInAppShell) {\n            CssUtils.initCssVars(this.document, this.platformId);\n        }\n        if (isPlatformBrowser(this.platformId)) {\n            const browserAgent = window.navigator.userAgent.toLowerCase();\n\n            this.appShellService.setState({\n                ...this.appShellService.state,\n                windowHeight: window.innerHeight,\n                windowWidth: window.innerWidth,\n                deviceInfo: {\n                    isChrome: browserAgent.indexOf('chrome') > -1,\n                    isIE: browserAgent.indexOf('trident') > -1,\n                    isFF: browserAgent.indexOf('firefox') > -1,\n                },\n                appBaseFontSize: this.appShellService.getBaseFontSize(),\n            });\n        }\n\n        if (isPlatformBrowser(this.platformId)) {\n            fromEvent(window, 'resize')\n                .pipe(debounceTime(50), takeUntil(this.destroy$))\n                .subscribe(() => {\n                    this.appShellService?.setState({\n                        ...this.appShellService.state,\n                        windowHeight: window.innerHeight,\n                        windowWidth: window.innerWidth,\n                    });\n                    CssUtils.setAppViewportCssVars(this.platformId);\n                });\n        }\n    }\n\n    ngAfterViewInit(): void {\n        // Adds global class, which is used to apply the correct styling for eui-21.\n        CssUtils.setHtmlClass('eui-21', this.document);\n        this.handleRtlChangeState();\n        this.handleUIEvents();\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * Changes the text direction from 'ltr' to 'rtl' and vice versa.\n     */\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            if (rtlState) {\n                this.textDirection.set('rtl');\n            } else {\n                this.textDirection.set('ltr');\n            }\n        });\n    }\n\n    private handleUIEvents(): void {\n        const eclSiteHeaderLanguage = this.eclSiteHeaderLanguage();\n        if (!eclSiteHeaderLanguage) return;\n\n        outputToObservable(eclSiteHeaderLanguage.languageSelected)\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((evt: EclSiteHeaderLanguageSelectedEvent) => {\n                this.languageDismiss.emit(new EclAppLanguageDismissEvent(evt.language));\n            });\n    }\n}\n",
             "displayName": "EclAppLanguageDismissEvent",
             "constructorObj": {
                 "name": "constructor",
@@ -3397,7 +3397,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 13,
+                "line": 14,
                 "rawdescription": "\n",
                 "jsdoctags": [
                     {
@@ -3425,7 +3425,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 14,
+                    "line": 15,
                     "rawdescription": "\n",
                     "modifierKind": [
                         125
@@ -8457,13 +8457,13 @@
         },
         {
             "name": "EclSocialMediaFollowItemClickEvent",
-            "id": "class-EclSocialMediaFollowItemClickEvent-be2bc74a52d7b183206e23fa9c6edd0706816decad401fed2ccd0e2788dead5b1d6dbb066556634b97683220c7111e50c45fd911c2cccbe1ec6738847a5e6fdf",
+            "id": "class-EclSocialMediaFollowItemClickEvent-af10cb7ce22e295e87d200282d4f934d3d9096be034a20300e19f49c8cea2c18a23ec6525da489ec0de9592f023fbdde2a73cd8a9fc87a270818f5214e0f73b7",
             "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, 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",
+            "sourceCode": "import { booleanAttribute, Component, inject, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { EclIconSet, 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<EclIconSet>('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": [],
@@ -33462,12 +33462,12 @@
         },
         {
             "name": "EclSiteHeaderCtaDirective",
-            "id": "directive-EclSiteHeaderCtaDirective-eb7b867969df601dd77f9321766e821fa3401761aa35bf9396413d2737a500ee3d444a551cc40e56f22d4664355d3755eb6529137cd3383f14bcd536c8c96574",
+            "id": "directive-EclSiteHeaderCtaDirective-dea4aa3bd7f18c7deb53610c6a79edc1db4cd176f8ef6134b53929b1c174781670c840fd62eacb168070ee3ef14737772a729db7dd7826ec630b00627de2ce4b",
             "file": "packages/ecl/components/ecl-site-header/cta/ecl-site-header-cta.directive.ts",
             "type": "directive",
             "description": "<p>This directive is used, when we want to show call-to-action link in the site-header. Used in harmonised and standardised header\n variants.</p>\n",
             "rawdescription": "\n\nThis directive is used, when we want to show call-to-action link in the site-header. Used in harmonised and standardised header\n variants.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * This directive is used, when we want to show call-to-action link in the site-header. Used in harmonised and standardised header\n *  variants.\n */\n@Directive({\n    selector: '[eclSiteHeaderCta]',\n})\nexport class EclSiteHeaderCtaDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__cta') className = true;\n}\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * This directive is used, when we want to show call-to-action link in the site-header. Used in harmonised and standardised header\n *  variants.\n */\n@Directive({\n    selector: '[eclSiteHeaderCta]',\n    host: {\n        class: 'ecl-site-header__cta',\n    },\n})\nexport class EclSiteHeaderCtaDirective extends ECLBaseDirective {}\n",
             "selector": "[eclSiteHeaderCta]",
             "providers": [],
             "hostDirectives": [],
@@ -33520,46 +33520,9 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-site-header__cta",
-                    "actualName": "className",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 12,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "className",
-                    "coverageIgnore": false,
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 12,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-site-header__cta'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "getCssClasses",
@@ -33603,8 +33566,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 259,
+                    "pos": 94,
+                    "end": 246,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -33628,12 +33591,12 @@
         },
         {
             "name": "EclSiteHeaderCustomActionContentDirective",
-            "id": "directive-EclSiteHeaderCustomActionContentDirective-7633b68559d061143bf803abd31054048a346ed3359883aad14adb39c4c0701559617ff4ce17fd2920b2b4bcd6d4da0fbe6973c890d33dbe77ea2c872c584b01",
+            "id": "directive-EclSiteHeaderCustomActionContentDirective-ea8212434a9aafb02f5d5305967fce291788d14004351f818db683e8e52d89f73e46ba8366a7ef10ec15d97c64c6368cc8c5ac235344d1999d7c7ecfd2e1243f",
             "file": "packages/ecl/components/ecl-site-header/custom-action/ecl-site-header-custom-action.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { AfterContentInit, Directive, EventEmitter, HostBinding, HostListener, Input, Output, PLATFORM_ID, contentChild, forwardRef, inject, input } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n@Directive({\n    selector: 'a[eclSiteHeaderCustomActionLink]',\n})\nexport class EclSiteHeaderCustomActionLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    @HostBinding('class') className = 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral ecl-button--icon-only';\n    @HostBinding('attr.aria-expanded') isOverlayExpanded : boolean;\n    @HostBinding('attr.aria-controls') ariaControls : string;\n    @Input() @HostBinding('attr.href') href : string;\n    @Input() @HostBinding('attr.routerLink') routerLink : string;\n    @Output() customActionOverlayToggle = new EventEmitter<boolean>();\n    eclIconComponent = contentChild<EclIconComponent>(forwardRef(() => EclIconComponent), { descendants: true });\n    private readonly ARIA_CONTROLS = 'custom-action-overlay';\n    private platformId = inject(PLATFORM_ID);\n\n    ngAfterContentInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n        if (this.eclIconComponent()) {\n            this.eclIconComponent().addExtraClass('ecl-site-header__icon');\n        }\n        if (!this.hasLink()) {\n            this.href = '#';\n            this.isOverlayExpanded = false;\n            this.ariaControls = this.ARIA_CONTROLS;\n        }\n    }\n\n    @HostListener('click', ['$event']) onClick(evt: Event): void {\n        if (!this.hasLink()) {\n            this.isOverlayExpanded = !this.isOverlayExpanded;\n            evt.preventDefault();\n            this.customActionOverlayToggle.emit(this.isOverlayExpanded);\n        }\n    }\n\n    hasLink(): boolean {\n        return (!!this.href && this.href !== '#') || !!this.routerLink;\n    }\n}\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionContent]',\n})\nexport class EclSiteHeaderCustomActionContentDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__custom-action-content') className = true;\n}\n\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionTitle]',\n})\nexport class EclSiteHeaderCustomActionTitleDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__custom-action-title') className = true;\n    @HostBinding('attr.id')\n    @Input() id = 'custom-action-overlay-title';\n\n}",
+            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { AfterContentInit, Directive, PLATFORM_ID, contentChild, forwardRef, inject, input, model, output } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n@Directive({\n    selector: 'a[eclSiteHeaderCustomActionLink]',\n    host: {\n        class: 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral ecl-button--icon-only',\n        '[attr.aria-expanded]': 'isOverlayExpanded',\n        '[attr.aria-controls]': 'ariaControls',\n        '[attr.href]': 'href()',\n        '[attr.routerLink]': 'routerLink()',\n        '(click)': 'onClick($event)',\n    },\n})\nexport class EclSiteHeaderCustomActionLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    readonly href = model<string>();\n    readonly routerLink = input<string>();\n\n    readonly customActionOverlayToggle = output<boolean>();\n\n    /**\n     * Whether the overlay is expanded. Set by the parent `ecl-site-header-custom-action`.\n     */\n    isOverlayExpanded : boolean;\n\n    protected ariaControls : string;\n\n    private readonly eclIconComponent = contentChild<EclIconComponent>(forwardRef(() => EclIconComponent), { descendants: true });\n    private readonly ARIA_CONTROLS = 'custom-action-overlay';\n    private readonly platformId = inject(PLATFORM_ID);\n\n    ngAfterContentInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n        if (this.eclIconComponent()) {\n            this.eclIconComponent().addExtraClass('ecl-site-header__icon');\n        }\n        if (!this.hasLink()) {\n            this.href.set('#');\n            this.isOverlayExpanded = false;\n            this.ariaControls = this.ARIA_CONTROLS;\n        }\n    }\n\n    onClick(evt: Event): void {\n        if (!this.hasLink()) {\n            this.isOverlayExpanded = !this.isOverlayExpanded;\n            evt.preventDefault();\n            this.customActionOverlayToggle.emit(this.isOverlayExpanded);\n        }\n    }\n\n    hasLink(): boolean {\n        return (!!this.href() && this.href() !== '#') || !!this.routerLink();\n    }\n}\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionContent]',\n    host: {\n        class: 'ecl-site-header__custom-action-content',\n    },\n})\nexport class EclSiteHeaderCustomActionContentDirective extends ECLBaseDirective {}\n\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionTitle]',\n    host: {\n        class: 'ecl-site-header__custom-action-title',\n        '[attr.id]': 'id()',\n    },\n})\nexport class EclSiteHeaderCustomActionTitleDirective extends ECLBaseDirective {\n    readonly id = input('custom-action-overlay-title');\n}",
             "selector": "div[eclSiteHeaderCustomActionContent]",
             "providers": [],
             "hostDirectives": [],
@@ -33686,46 +33649,9 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-site-header__custom-action-content",
-                    "actualName": "className",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 48,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "className",
-                    "coverageIgnore": false,
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 48,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-site-header__custom-action-content'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "getCssClasses",
@@ -33782,38 +33708,48 @@
         },
         {
             "name": "EclSiteHeaderCustomActionLinkDirective",
-            "id": "directive-EclSiteHeaderCustomActionLinkDirective-7633b68559d061143bf803abd31054048a346ed3359883aad14adb39c4c0701559617ff4ce17fd2920b2b4bcd6d4da0fbe6973c890d33dbe77ea2c872c584b01",
+            "id": "directive-EclSiteHeaderCustomActionLinkDirective-ea8212434a9aafb02f5d5305967fce291788d14004351f818db683e8e52d89f73e46ba8366a7ef10ec15d97c64c6368cc8c5ac235344d1999d7c7ecfd2e1243f",
             "file": "packages/ecl/components/ecl-site-header/custom-action/ecl-site-header-custom-action.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { AfterContentInit, Directive, EventEmitter, HostBinding, HostListener, Input, Output, PLATFORM_ID, contentChild, forwardRef, inject, input } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n@Directive({\n    selector: 'a[eclSiteHeaderCustomActionLink]',\n})\nexport class EclSiteHeaderCustomActionLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    @HostBinding('class') className = 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral ecl-button--icon-only';\n    @HostBinding('attr.aria-expanded') isOverlayExpanded : boolean;\n    @HostBinding('attr.aria-controls') ariaControls : string;\n    @Input() @HostBinding('attr.href') href : string;\n    @Input() @HostBinding('attr.routerLink') routerLink : string;\n    @Output() customActionOverlayToggle = new EventEmitter<boolean>();\n    eclIconComponent = contentChild<EclIconComponent>(forwardRef(() => EclIconComponent), { descendants: true });\n    private readonly ARIA_CONTROLS = 'custom-action-overlay';\n    private platformId = inject(PLATFORM_ID);\n\n    ngAfterContentInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n        if (this.eclIconComponent()) {\n            this.eclIconComponent().addExtraClass('ecl-site-header__icon');\n        }\n        if (!this.hasLink()) {\n            this.href = '#';\n            this.isOverlayExpanded = false;\n            this.ariaControls = this.ARIA_CONTROLS;\n        }\n    }\n\n    @HostListener('click', ['$event']) onClick(evt: Event): void {\n        if (!this.hasLink()) {\n            this.isOverlayExpanded = !this.isOverlayExpanded;\n            evt.preventDefault();\n            this.customActionOverlayToggle.emit(this.isOverlayExpanded);\n        }\n    }\n\n    hasLink(): boolean {\n        return (!!this.href && this.href !== '#') || !!this.routerLink;\n    }\n}\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionContent]',\n})\nexport class EclSiteHeaderCustomActionContentDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__custom-action-content') className = true;\n}\n\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionTitle]',\n})\nexport class EclSiteHeaderCustomActionTitleDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__custom-action-title') className = true;\n    @HostBinding('attr.id')\n    @Input() id = 'custom-action-overlay-title';\n\n}",
+            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { AfterContentInit, Directive, PLATFORM_ID, contentChild, forwardRef, inject, input, model, output } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n@Directive({\n    selector: 'a[eclSiteHeaderCustomActionLink]',\n    host: {\n        class: 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral ecl-button--icon-only',\n        '[attr.aria-expanded]': 'isOverlayExpanded',\n        '[attr.aria-controls]': 'ariaControls',\n        '[attr.href]': 'href()',\n        '[attr.routerLink]': 'routerLink()',\n        '(click)': 'onClick($event)',\n    },\n})\nexport class EclSiteHeaderCustomActionLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    readonly href = model<string>();\n    readonly routerLink = input<string>();\n\n    readonly customActionOverlayToggle = output<boolean>();\n\n    /**\n     * Whether the overlay is expanded. Set by the parent `ecl-site-header-custom-action`.\n     */\n    isOverlayExpanded : boolean;\n\n    protected ariaControls : string;\n\n    private readonly eclIconComponent = contentChild<EclIconComponent>(forwardRef(() => EclIconComponent), { descendants: true });\n    private readonly ARIA_CONTROLS = 'custom-action-overlay';\n    private readonly platformId = inject(PLATFORM_ID);\n\n    ngAfterContentInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n        if (this.eclIconComponent()) {\n            this.eclIconComponent().addExtraClass('ecl-site-header__icon');\n        }\n        if (!this.hasLink()) {\n            this.href.set('#');\n            this.isOverlayExpanded = false;\n            this.ariaControls = this.ARIA_CONTROLS;\n        }\n    }\n\n    onClick(evt: Event): void {\n        if (!this.hasLink()) {\n            this.isOverlayExpanded = !this.isOverlayExpanded;\n            evt.preventDefault();\n            this.customActionOverlayToggle.emit(this.isOverlayExpanded);\n        }\n    }\n\n    hasLink(): boolean {\n        return (!!this.href() && this.href() !== '#') || !!this.routerLink();\n    }\n}\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionContent]',\n    host: {\n        class: 'ecl-site-header__custom-action-content',\n    },\n})\nexport class EclSiteHeaderCustomActionContentDirective extends ECLBaseDirective {}\n\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionTitle]',\n    host: {\n        class: 'ecl-site-header__custom-action-title',\n        '[attr.id]': 'id()',\n    },\n})\nexport class EclSiteHeaderCustomActionTitleDirective extends ECLBaseDirective {\n    readonly id = input('custom-action-overlay-title');\n}",
             "selector": "a[eclSiteHeaderCustomActionLink]",
             "providers": [],
             "hostDirectives": [],
             "standalone": false,
             "inputsClass": [
                 {
-                    "coverageIgnore": false,
                     "name": "href",
+                    "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 13,
                     "type": "string",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 18,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
-                    "coverageIgnore": false,
                     "name": "routerLink",
+                    "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 14,
                     "type": "string",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 19,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
                     "coverageIgnore": false,
@@ -33863,132 +33799,55 @@
                 {
                     "name": "customActionOverlayToggle",
                     "coverageIgnore": false,
-                    "defaultValue": "new EventEmitter<boolean>()",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 15,
-                    "type": "EventEmitter"
-                }
-            ],
-            "deprecated": false,
-            "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.aria-controls",
-                    "actualName": "ariaControls",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 12,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.aria-expanded",
-                    "actualName": "isOverlayExpanded",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 11,
                     "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "className",
-                    "defaultValue": "'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral ecl-button--icon-only'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 10,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
-            "hostListeners": [
-                {
-                    "coverageIgnore": false,
-                    "name": "click",
-                    "args": [
-                        {
-                            "name": "evt",
-                            "type": "Event",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "argsDecorator": [
-                        "$event"
-                    ],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 32
-                }
-            ],
-            "propertiesClass": [
-                {
-                    "name": "ariaControls",
-                    "coverageIgnore": false,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 12,
+                    "line": 21,
                     "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.aria-controls'"
-                        }
-                    ],
                     "modifierKind": [
-                        171
-                    ]
+                        148
+                    ],
+                    "required": false
                 },
                 {
-                    "name": "className",
+                    "name": "href",
                     "coverageIgnore": false,
-                    "defaultValue": "'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral ecl-button--icon-only'",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "string",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 10,
+                    "line": 18,
                     "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class'"
-                        }
-                    ],
                     "modifierKind": [
-                        171
-                    ]
-                },
+                        148
+                    ],
+                    "required": false
+                }
+            ],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [
                 {
-                    "name": "eclIconComponent",
+                    "name": "ariaControls",
                     "coverageIgnore": false,
-                    "defaultValue": "contentChild<EclIconComponent>(forwardRef(() => EclIconComponent), { descendants: true })",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "unknown",
+                    "type": "string",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 16,
-                    "rawdescription": "\n"
+                    "line": 28,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "isOverlayExpanded",
@@ -33998,18 +33857,9 @@
                     "type": "boolean",
                     "indexKey": "",
                     "optional": false,
-                    "description": "",
-                    "line": 11,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.aria-expanded'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "description": "<p>Whether the overlay is expanded. Set by the parent <code>ecl-site-header-custom-action</code>.</p>\n",
+                    "line": 26,
+                    "rawdescription": "\n\nWhether the overlay is expanded. Set by the parent `ecl-site-header-custom-action`.\n"
                 }
             ],
             "methodsClass": [
@@ -34020,7 +33870,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 40,
+                    "line": 54,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -34033,7 +33883,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 20,
+                    "line": 34,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -34055,20 +33905,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 32,
+                    "line": 46,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'click', ['$event']"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -34145,28 +33986,33 @@
         },
         {
             "name": "EclSiteHeaderCustomActionTitleDirective",
-            "id": "directive-EclSiteHeaderCustomActionTitleDirective-7633b68559d061143bf803abd31054048a346ed3359883aad14adb39c4c0701559617ff4ce17fd2920b2b4bcd6d4da0fbe6973c890d33dbe77ea2c872c584b01",
+            "id": "directive-EclSiteHeaderCustomActionTitleDirective-ea8212434a9aafb02f5d5305967fce291788d14004351f818db683e8e52d89f73e46ba8366a7ef10ec15d97c64c6368cc8c5ac235344d1999d7c7ecfd2e1243f",
             "file": "packages/ecl/components/ecl-site-header/custom-action/ecl-site-header-custom-action.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { AfterContentInit, Directive, EventEmitter, HostBinding, HostListener, Input, Output, PLATFORM_ID, contentChild, forwardRef, inject, input } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n@Directive({\n    selector: 'a[eclSiteHeaderCustomActionLink]',\n})\nexport class EclSiteHeaderCustomActionLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    @HostBinding('class') className = 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral ecl-button--icon-only';\n    @HostBinding('attr.aria-expanded') isOverlayExpanded : boolean;\n    @HostBinding('attr.aria-controls') ariaControls : string;\n    @Input() @HostBinding('attr.href') href : string;\n    @Input() @HostBinding('attr.routerLink') routerLink : string;\n    @Output() customActionOverlayToggle = new EventEmitter<boolean>();\n    eclIconComponent = contentChild<EclIconComponent>(forwardRef(() => EclIconComponent), { descendants: true });\n    private readonly ARIA_CONTROLS = 'custom-action-overlay';\n    private platformId = inject(PLATFORM_ID);\n\n    ngAfterContentInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n        if (this.eclIconComponent()) {\n            this.eclIconComponent().addExtraClass('ecl-site-header__icon');\n        }\n        if (!this.hasLink()) {\n            this.href = '#';\n            this.isOverlayExpanded = false;\n            this.ariaControls = this.ARIA_CONTROLS;\n        }\n    }\n\n    @HostListener('click', ['$event']) onClick(evt: Event): void {\n        if (!this.hasLink()) {\n            this.isOverlayExpanded = !this.isOverlayExpanded;\n            evt.preventDefault();\n            this.customActionOverlayToggle.emit(this.isOverlayExpanded);\n        }\n    }\n\n    hasLink(): boolean {\n        return (!!this.href && this.href !== '#') || !!this.routerLink;\n    }\n}\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionContent]',\n})\nexport class EclSiteHeaderCustomActionContentDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__custom-action-content') className = true;\n}\n\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionTitle]',\n})\nexport class EclSiteHeaderCustomActionTitleDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-site-header__custom-action-title') className = true;\n    @HostBinding('attr.id')\n    @Input() id = 'custom-action-overlay-title';\n\n}",
+            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { AfterContentInit, Directive, PLATFORM_ID, contentChild, forwardRef, inject, input, model, output } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n@Directive({\n    selector: 'a[eclSiteHeaderCustomActionLink]',\n    host: {\n        class: 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral ecl-button--icon-only',\n        '[attr.aria-expanded]': 'isOverlayExpanded',\n        '[attr.aria-controls]': 'ariaControls',\n        '[attr.href]': 'href()',\n        '[attr.routerLink]': 'routerLink()',\n        '(click)': 'onClick($event)',\n    },\n})\nexport class EclSiteHeaderCustomActionLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    readonly href = model<string>();\n    readonly routerLink = input<string>();\n\n    readonly customActionOverlayToggle = output<boolean>();\n\n    /**\n     * Whether the overlay is expanded. Set by the parent `ecl-site-header-custom-action`.\n     */\n    isOverlayExpanded : boolean;\n\n    protected ariaControls : string;\n\n    private readonly eclIconComponent = contentChild<EclIconComponent>(forwardRef(() => EclIconComponent), { descendants: true });\n    private readonly ARIA_CONTROLS = 'custom-action-overlay';\n    private readonly platformId = inject(PLATFORM_ID);\n\n    ngAfterContentInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n        if (this.eclIconComponent()) {\n            this.eclIconComponent().addExtraClass('ecl-site-header__icon');\n        }\n        if (!this.hasLink()) {\n            this.href.set('#');\n            this.isOverlayExpanded = false;\n            this.ariaControls = this.ARIA_CONTROLS;\n        }\n    }\n\n    onClick(evt: Event): void {\n        if (!this.hasLink()) {\n            this.isOverlayExpanded = !this.isOverlayExpanded;\n            evt.preventDefault();\n            this.customActionOverlayToggle.emit(this.isOverlayExpanded);\n        }\n    }\n\n    hasLink(): boolean {\n        return (!!this.href() && this.href() !== '#') || !!this.routerLink();\n    }\n}\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionContent]',\n    host: {\n        class: 'ecl-site-header__custom-action-content',\n    },\n})\nexport class EclSiteHeaderCustomActionContentDirective extends ECLBaseDirective {}\n\n@Directive({\n    selector: 'div[eclSiteHeaderCustomActionTitle]',\n    host: {\n        class: 'ecl-site-header__custom-action-title',\n        '[attr.id]': 'id()',\n    },\n})\nexport class EclSiteHeaderCustomActionTitleDirective extends ECLBaseDirective {\n    readonly id = input('custom-action-overlay-title');\n}",
             "selector": "div[eclSiteHeaderCustomActionTitle]",
             "providers": [],
             "hostDirectives": [],
             "standalone": false,
             "inputsClass": [
                 {
-                    "coverageIgnore": false,
                     "name": "id",
+                    "coverageIgnore": false,
                     "defaultValue": "'custom-action-overlay-title'",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 57,
                     "type": "string",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 74,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
                     "coverageIgnore": false,
@@ -34215,46 +34061,9 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-site-header__custom-action-title",
-                    "actualName": "className",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 55,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "className",
-                    "coverageIgnore": false,
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 55,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-site-header__custom-action-title'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "getCssClasses",
@@ -34311,12 +34120,12 @@
         },
         {
             "name": "EclSiteHeaderImageDirective",
-            "id": "directive-EclSiteHeaderImageDirective-41ca38909899e8390597823b2cffcf827cbba69370f688880a68bdbff907deddb8e4680252cfc8cfa992b6b2a859484d83df4dae2dd6bbde16d2a5af9cf40060",
+            "id": "directive-EclSiteHeaderImageDirective-ef9136c9dce89a68075874f34b7b3a5b80aad478e15097f6dbaea4a7596340c6233e699f08bde921e65379a9a5a221bf30075af3bd0c007f1aad9d5efbd6e291",
             "file": "packages/ecl/components/ecl-site-header/picture/ecl-site-header-picture.directive.ts",
             "type": "directive",
             "description": "<p>Adds some specific classes for <img> element, when used in the site header logo.</p>\n",
             "rawdescription": "\n\nAdds some specific classes for <img> element, when used in the site header logo.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Adds some specific classes for picture element, when used in the site header logo.\n */\n@Directive({\n    selector: '[eclSiteHeaderPicture]',\n})\nexport class EclSiteHeaderPictureDirective extends ECLBaseDirective {\n    @HostBinding('class') className = 'ecl-site-header__picture ecl-picture';\n}\n\n/**\n * Adds some specific classes for <img> element, when used in the site header logo.\n */\n@Directive({\n    selector: '[eclSiteHeaderImage]',\n})\nexport class EclSiteHeaderImageDirective extends ECLBaseDirective {\n    logoSize: string;\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-site-header__logo-image'),\n            `ecl-site-header__logo-image--${this.logoSize}`,\n        ].join(' ').trim();\n    }\n}\n\n/**\n * Adds some specific classes for <a> element, when used in the site header logo.\n */\n@Directive({\n    selector: '[eclSiteHeaderLink]',\n})\nexport class EclSiteHeaderLinkDirective extends ECLBaseDirective {\n    @HostBinding('class') className = 'ecl-link ecl-link--standalone ecl-site-header__logo-link';\n}\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Adds some specific classes for picture element, when used in the site header logo.\n */\n@Directive({\n    selector: '[eclSiteHeaderPicture]',\n    host: {\n        class: 'ecl-site-header__picture ecl-picture',\n    },\n})\nexport class EclSiteHeaderPictureDirective extends ECLBaseDirective {}\n\n/**\n * Adds some specific classes for <img> element, when used in the site header logo.\n */\n@Directive({\n    selector: '[eclSiteHeaderImage]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSiteHeaderImageDirective extends ECLBaseDirective {\n    logoSize: string;\n\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-site-header__logo-image'),\n            `ecl-site-header__logo-image--${this.logoSize}`,\n        ].join(' ').trim();\n    }\n}\n\n/**\n * Adds some specific classes for <a> element, when used in the site header logo.\n */\n@Directive({\n    selector: '[eclSiteHeaderLink]',\n    host: {\n        class: 'ecl-link ecl-link--standalone ecl-site-header__logo-link',\n    },\n})\nexport class EclSiteHeaderLinkDirective extends ECLBaseDirective {}\n",
             "selector": "[eclSiteHeaderImage]",
             "providers": [],
             "hostDirectives": [],
@@ -34369,20 +34178,7 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 24,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [
                 {
@@ -34394,7 +34190,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 21,
+                    "line": 25,
                     "rawdescription": "\n"
                 }
             ],
@@ -34441,8 +34237,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 408,
-                    "end": 499,
+                    "pos": 390,
+                    "end": 481,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -34461,7 +34257,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 24,
+                        "line": 27,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -34479,12 +34275,12 @@
         },
         {
             "name": "EclSiteHeaderLinkDirective",
-            "id": "directive-EclSiteHeaderLinkDirective-41ca38909899e8390597823b2cffcf827cbba69370f688880a68bdbff907deddb8e4680252cfc8cfa992b6b2a859484d83df4dae2dd6bbde16d2a5af9cf40060",
+            "id": "directive-EclSiteHeaderLinkDirective-ef9136c9dce89a68075874f34b7b3a5b80aad478e15097f6dbaea4a7596340c6233e699f08bde921e65379a9a5a221bf30075af3bd0c007f1aad9d5efbd6e291",
             "file": "packages/ecl/components/ecl-site-header/picture/ecl-site-header-picture.directive.ts",
             "type": "directive",
             "description": "<p>Adds some specific classes for <a> element, when used in the site header logo.</p>\n",
             "rawdescription": "\n\nAdds some specific classes for <a> element, when used in the site header logo.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Adds some specific classes for picture element, when used in the site header logo.\n */\n@Directive({\n    selector: '[eclSiteHeaderPicture]',\n})\nexport class EclSiteHeaderPictureDirective extends ECLBaseDirective {\n    @HostBinding('class') className = 'ecl-site-header__picture ecl-picture';\n}\n\n/**\n * Adds some specific classes for <img> element, when used in the site header logo.\n */\n@Directive({\n    selector: '[eclSiteHeaderImage]',\n})\nexport class EclSiteHeaderImageDirective extends ECLBaseDirective {\n    logoSize: string;\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-site-header__logo-image'),\n            `ecl-site-header__logo-image--${this.logoSize}`,\n        ].join(' ').trim();\n    }\n}\n\n/**\n * Adds some specific classes for <a> element, when used in the site header logo.\n */\n@Directive({\n    selector: '[eclSiteHeaderLink]',\n})\nexport class EclSiteHeaderLinkDirective extends ECLBaseDirective {\n    @HostBinding('class') className = 'ecl-link ecl-link--standalone ecl-site-header__logo-link';\n}\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Adds some specific classes for picture element, when used in the site header logo.\n */\n@Directive({\n    selector: '[eclSiteHeaderPicture]',\n    host: {\n        class: 'ecl-site-header__picture ecl-picture',\n    },\n})\nexport class EclSiteHeaderPictureDirective extends ECLBaseDirective {}\n\n/**\n * Adds some specific classes for <img> element, when used in the site header logo.\n */\n@Directive({\n    selector: '[eclSiteHeaderImage]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSiteHeaderImageDirective extends ECLBaseDirective {\n    logoSize: string;\n\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-site-header__logo-image'),\n            `ecl-site-header__logo-image--${this.logoSize}`,\n        ].join(' ').trim();\n    }\n}\n\n/**\n * Adds some specific classes for <a> element, when used in the site header logo.\n */\n@Directive({\n    selector: '[eclSiteHeaderLink]',\n    host: {\n        class: 'ecl-link ecl-link--standalone ecl-site-header__logo-link',\n    },\n})\nexport class EclSiteHeaderLinkDirective extends ECLBaseDirective {}\n",
             "selector": "[eclSiteHeaderLink]",
             "providers": [],
             "hostDirectives": [],
@@ -34537,46 +34333,9 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "className",
-                    "defaultValue": "'ecl-link ecl-link--standalone ecl-site-header__logo-link'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 39,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "className",
-                    "coverageIgnore": false,
-                    "defaultValue": "'ecl-link ecl-link--standalone ecl-site-header__logo-link'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 39,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "getCssClasses",
@@ -34620,8 +34379,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 881,
-                    "end": 970,
+                    "pos": 889,
+                    "end": 978,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -34645,12 +34404,12 @@
         },
         {
             "name": "EclSiteHeaderLoginDescriptionDirective",
-            "id": "directive-EclSiteHeaderLoginDescriptionDirective-ea5d55ce16df2636e377a1e271e59793360830a9407fab3c59109d5eef8b0ed527c23879d95429471ee3c8704e5857aba04280541a0c343a132b479ac95b4ada",
+            "id": "directive-EclSiteHeaderLoginDescriptionDirective-cc36e31651c096616d8f27eef5f0e4702d3cf6290fb94dcf53146d267549554d9f304256e37007ff232ea23612001ebdc18d7c08c650e3f6188803646ec837bc",
             "file": "packages/ecl/components/ecl-site-header/login/ecl-site-header-login-details.directive.ts",
             "type": "directive",
             "description": "<p>This directive is used to add specific class for the login description element, within the login dropdown.</p>\n",
             "rawdescription": "\n\nThis directive is used to add specific class for the login description element, within the login dropdown.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * This directive is used to add specific class for the login description element, within the login dropdown.\n */\n@Directive({\n    selector: '[eclSiteHeaderLoginDescription]',\n})\nexport class EclSiteHeaderLoginDescriptionDirective extends ECLBaseDirective {\n    @HostBinding('class') className = 'ecl-site-header__login-description';\n}\n\n/**\n * This directive is used to add specific class for the horizontal line, that separates\n *  description from the 'Logout' link.\n */\n@Directive({\n    selector: '[eclSiteHeaderLoginSeparator]',\n})\nexport class EclSiteHeaderLoginSeparatorDirective extends ECLBaseDirective {\n    @HostBinding('class') className = 'ecl-site-header__login-separator';\n}\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * This directive is used to add specific class for the login description element, within the login dropdown.\n */\n@Directive({\n    selector: '[eclSiteHeaderLoginDescription]',\n    host: {\n        class: 'ecl-site-header__login-description',\n    },\n})\nexport class EclSiteHeaderLoginDescriptionDirective extends ECLBaseDirective {}\n\n/**\n * This directive is used to add specific class for the horizontal line, that separates\n *  description from the 'Logout' link.\n */\n@Directive({\n    selector: '[eclSiteHeaderLoginSeparator]',\n    host: {\n        class: 'ecl-site-header__login-separator',\n    },\n})\nexport class EclSiteHeaderLoginSeparatorDirective extends ECLBaseDirective {}\n",
             "selector": "[eclSiteHeaderLoginDescription]",
             "providers": [],
             "hostDirectives": [],
@@ -34703,46 +34462,9 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "className",
-                    "defaultValue": "'ecl-site-header__login-description'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 11,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "className",
-                    "coverageIgnore": false,
-                    "defaultValue": "'ecl-site-header__login-description'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 11,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "getCssClasses",
@@ -34786,8 +34508,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 224,
+                    "pos": 94,
+                    "end": 211,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -34811,12 +34533,12 @@
         },
         {
             "name": "EclSiteHeaderLoginSeparatorDirective",
-            "id": "directive-EclSiteHeaderLoginSeparatorDirective-ea5d55ce16df2636e377a1e271e59793360830a9407fab3c59109d5eef8b0ed527c23879d95429471ee3c8704e5857aba04280541a0c343a132b479ac95b4ada",
+            "id": "directive-EclSiteHeaderLoginSeparatorDirective-cc36e31651c096616d8f27eef5f0e4702d3cf6290fb94dcf53146d267549554d9f304256e37007ff232ea23612001ebdc18d7c08c650e3f6188803646ec837bc",
             "file": "packages/ecl/components/ecl-site-header/login/ecl-site-header-login-details.directive.ts",
             "type": "directive",
             "description": "<p>This directive is used to add specific class for the horizontal line, that separates\n description from the &#39;Logout&#39; link.</p>\n",
             "rawdescription": "\n\nThis directive is used to add specific class for the horizontal line, that separates\n description from the 'Logout' link.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * This directive is used to add specific class for the login description element, within the login dropdown.\n */\n@Directive({\n    selector: '[eclSiteHeaderLoginDescription]',\n})\nexport class EclSiteHeaderLoginDescriptionDirective extends ECLBaseDirective {\n    @HostBinding('class') className = 'ecl-site-header__login-description';\n}\n\n/**\n * This directive is used to add specific class for the horizontal line, that separates\n *  description from the 'Logout' link.\n */\n@Directive({\n    selector: '[eclSiteHeaderLoginSeparator]',\n})\nexport class EclSiteHeaderLoginSeparatorDirective extends ECLBaseDirective {\n    @HostBinding('class') className = 'ecl-site-header__login-separator';\n}\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * This directive is used to add specific class for the login description element, within the login dropdown.\n */\n@Directive({\n    selector: '[eclSiteHeaderLoginDescription]',\n    host: {\n        class: 'ecl-site-header__login-description',\n    },\n})\nexport class EclSiteHeaderLoginDescriptionDirective extends ECLBaseDirective {}\n\n/**\n * This directive is used to add specific class for the horizontal line, that separates\n *  description from the 'Logout' link.\n */\n@Directive({\n    selector: '[eclSiteHeaderLoginSeparator]',\n    host: {\n        class: 'ecl-site-header__login-separator',\n    },\n})\nexport class EclSiteHeaderLoginSeparatorDirective extends ECLBaseDirective {}\n",
             "selector": "[eclSiteHeaderLoginSeparator]",
             "providers": [],
             "hostDirectives": [],
@@ -34869,46 +34591,138 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [],
+            "methodsClass": [
                 {
+                    "name": "getCssClasses",
                     "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "className",
-                    "defaultValue": "'ecl-site-header__login-separator'",
+                    "args": [
+                        {
+                            "name": "rootClass",
+                            "type": "string",
+                            "optional": false,
+                            "dotDotDotToken": false,
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "string",
+                    "typeParameters": [],
+                    "line": 15,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 22,
-                    "type": "string",
-                    "decorators": []
+                    "jsdoctags": [
+                        {
+                            "name": "rootClass",
+                            "type": "string",
+                            "optional": false,
+                            "dotDotDotToken": false,
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
                 }
             ],
-            "hostListeners": [],
-            "propertiesClass": [
+            "coverageIgnore": false,
+            "jsdoctags": [
+                {
+                    "pos": 430,
+                    "end": 565,
+                    "kind": 321,
+                    "id": 0,
+                    "flags": 16777216,
+                    "modifierFlagsCache": 0,
+                    "transformFlags": 0,
+                    "comment": "This directive is used to add specific class for the horizontal line, that separates\n description from the 'Logout' link."
+                }
+            ],
+            "extends": [
+                "ECLBaseDirective"
+            ],
+            "relationships": {
+                "incoming": [],
+                "outgoing": [
+                    {
+                        "name": "ECLBaseDirective",
+                        "type": "directive"
+                    }
+                ]
+            }
+        },
+        {
+            "name": "EclSiteHeaderPictureDirective",
+            "id": "directive-EclSiteHeaderPictureDirective-ef9136c9dce89a68075874f34b7b3a5b80aad478e15097f6dbaea4a7596340c6233e699f08bde921e65379a9a5a221bf30075af3bd0c007f1aad9d5efbd6e291",
+            "file": "packages/ecl/components/ecl-site-header/picture/ecl-site-header-picture.directive.ts",
+            "type": "directive",
+            "description": "<p>Adds some specific classes for picture element, when used in the site header logo.</p>\n",
+            "rawdescription": "\n\nAdds some specific classes for picture element, when used in the site header logo.\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Adds some specific classes for picture element, when used in the site header logo.\n */\n@Directive({\n    selector: '[eclSiteHeaderPicture]',\n    host: {\n        class: 'ecl-site-header__picture ecl-picture',\n    },\n})\nexport class EclSiteHeaderPictureDirective extends ECLBaseDirective {}\n\n/**\n * Adds some specific classes for <img> element, when used in the site header logo.\n */\n@Directive({\n    selector: '[eclSiteHeaderImage]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSiteHeaderImageDirective extends ECLBaseDirective {\n    logoSize: string;\n\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-site-header__logo-image'),\n            `ecl-site-header__logo-image--${this.logoSize}`,\n        ].join(' ').trim();\n    }\n}\n\n/**\n * Adds some specific classes for <a> element, when used in the site header logo.\n */\n@Directive({\n    selector: '[eclSiteHeaderLink]',\n    host: {\n        class: 'ecl-link ecl-link--standalone ecl-site-header__logo-link',\n    },\n})\nexport class EclSiteHeaderLinkDirective extends ECLBaseDirective {}\n",
+            "selector": "[eclSiteHeaderPicture]",
+            "providers": [],
+            "hostDirectives": [],
+            "standalone": false,
+            "inputsClass": [
                 {
-                    "name": "className",
                     "coverageIgnore": false,
-                    "defaultValue": "'ecl-site-header__login-separator'",
+                    "name": "class",
                     "deprecated": false,
                     "deprecationMessage": "",
+                    "rawdescription": "\n",
+                    "description": "",
+                    "line": 8,
                     "type": "string",
-                    "indexKey": "",
-                    "optional": false,
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
+                },
+                {
+                    "coverageIgnore": false,
+                    "name": "e2eAttr",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n",
                     "description": "",
-                    "line": 22,
+                    "line": 10,
+                    "type": "any",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
+                },
+                {
+                    "coverageIgnore": false,
+                    "required": false,
+                    "name": "tabindex",
+                    "deprecated": false,
+                    "deprecationMessage": "",
                     "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "description": "",
+                    "line": 13,
+                    "type": "number",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
                 }
             ],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "getCssClasses",
@@ -34952,174 +34766,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 448,
-                    "end": 583,
-                    "kind": 321,
-                    "id": 0,
-                    "flags": 16777216,
-                    "modifierFlagsCache": 0,
-                    "transformFlags": 0,
-                    "comment": "This directive is used to add specific class for the horizontal line, that separates\n description from the 'Logout' link."
-                }
-            ],
-            "extends": [
-                "ECLBaseDirective"
-            ],
-            "relationships": {
-                "incoming": [],
-                "outgoing": [
-                    {
-                        "name": "ECLBaseDirective",
-                        "type": "directive"
-                    }
-                ]
-            }
-        },
-        {
-            "name": "EclSiteHeaderPictureDirective",
-            "id": "directive-EclSiteHeaderPictureDirective-41ca38909899e8390597823b2cffcf827cbba69370f688880a68bdbff907deddb8e4680252cfc8cfa992b6b2a859484d83df4dae2dd6bbde16d2a5af9cf40060",
-            "file": "packages/ecl/components/ecl-site-header/picture/ecl-site-header-picture.directive.ts",
-            "type": "directive",
-            "description": "<p>Adds some specific classes for picture element, when used in the site header logo.</p>\n",
-            "rawdescription": "\n\nAdds some specific classes for picture element, when used in the site header logo.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Adds some specific classes for picture element, when used in the site header logo.\n */\n@Directive({\n    selector: '[eclSiteHeaderPicture]',\n})\nexport class EclSiteHeaderPictureDirective extends ECLBaseDirective {\n    @HostBinding('class') className = 'ecl-site-header__picture ecl-picture';\n}\n\n/**\n * Adds some specific classes for <img> element, when used in the site header logo.\n */\n@Directive({\n    selector: '[eclSiteHeaderImage]',\n})\nexport class EclSiteHeaderImageDirective extends ECLBaseDirective {\n    logoSize: string;\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-site-header__logo-image'),\n            `ecl-site-header__logo-image--${this.logoSize}`,\n        ].join(' ').trim();\n    }\n}\n\n/**\n * Adds some specific classes for <a> element, when used in the site header logo.\n */\n@Directive({\n    selector: '[eclSiteHeaderLink]',\n})\nexport class EclSiteHeaderLinkDirective extends ECLBaseDirective {\n    @HostBinding('class') className = 'ecl-link ecl-link--standalone ecl-site-header__logo-link';\n}\n",
-            "selector": "[eclSiteHeaderPicture]",
-            "providers": [],
-            "hostDirectives": [],
-            "standalone": false,
-            "inputsClass": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 8,
-                    "type": "string",
-                    "decorators": [],
-                    "inheritance": {
-                        "file": "ECLBaseDirective"
-                    }
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "e2eAttr",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 10,
-                    "type": "any",
-                    "decorators": [],
-                    "inheritance": {
-                        "file": "ECLBaseDirective"
-                    }
-                },
-                {
-                    "coverageIgnore": false,
-                    "required": false,
-                    "name": "tabindex",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 13,
-                    "type": "number",
-                    "decorators": [],
-                    "inheritance": {
-                        "file": "ECLBaseDirective"
-                    }
-                }
-            ],
-            "outputsClass": [],
-            "deprecated": false,
-            "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "className",
-                    "defaultValue": "'ecl-site-header__picture ecl-picture'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 11,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
-            "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "className",
-                    "coverageIgnore": false,
-                    "defaultValue": "'ecl-site-header__picture ecl-picture'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 11,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
-            "methodsClass": [
-                {
-                    "name": "getCssClasses",
-                    "coverageIgnore": false,
-                    "args": [
-                        {
-                            "name": "rootClass",
-                            "type": "string",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "optional": false,
-                    "returnType": "string",
-                    "typeParameters": [],
-                    "line": 15,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "jsdoctags": [
-                        {
-                            "name": "rootClass",
-                            "type": "string",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "tagName": {
-                                "text": "param"
-                            }
-                        }
-                    ],
-                    "inheritance": {
-                        "file": "ECLBaseDirective"
-                    }
-                }
-            ],
-            "coverageIgnore": false,
-            "jsdoctags": [
-                {
-                    "pos": 107,
-                    "end": 200,
+                    "pos": 94,
+                    "end": 187,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -41970,7 +41618,7 @@
         },
         {
             "name": "EclAppComponent",
-            "id": "component-EclAppComponent-32f3eb5490c2804bf33df7ed94dc1abe890f04d2c1e8f48b981387c5afc4b888b2fd1b529c314dcbf4bbf25786f7772f81075ac1e6e2e18f88ae5009783c1072",
+            "id": "component-EclAppComponent-0cf3387d1e3b4afd626393c991447eacabd7a17d1deb38542b887de02a8d87b838c3fdb91942e035cc5c45480c7ad7bff86ebba4f1fc5990c566c542d15e9c7c",
             "file": "packages/ecl/components/ecl-app/ecl-app.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -42042,7 +41690,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 35,
+                    "line": 36,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -42061,7 +41709,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 37,
+                    "line": 38,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
@@ -42077,7 +41725,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 33,
+                    "line": 34,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -42093,7 +41741,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Text direction, by default is &#39;ltr&#39; - left-to-write. Can also be &#39;rtl&#39; - right-to-left, which will\n make all components within <ecl-app> to lign to the right, and apply some special styling and functionality.</p>\n",
-                    "line": 31,
+                    "line": 32,
                     "rawdescription": "\n\nText direction, by default is 'ltr' - left-to-write. Can also be 'rtl' - right-to-left, which will\n make all components within <ecl-app> to lign to the right, and apply some special styling and functionality.\n",
                     "modifierKind": [
                         148
@@ -42108,7 +41756,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 80,
+                    "line": 81,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -42121,7 +41769,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 87,
+                    "line": 88,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -42134,7 +41782,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 43,
+                    "line": 44,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -42189,7 +41837,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { AfterViewInit, Component, contentChild, OnDestroy, OnInit, PLATFORM_ID, inject, output, signal } from '@angular/core';\nimport { CssUtils, EuiAppShellService } from '@eui/core';\nimport { EuiLanguage } from '@eui/base';\nimport { EclSiteHeaderLanguageComponent, EclSiteHeaderLanguageSelectedEvent } from '@eui/ecl/components/ecl-site-header';\nimport { ECLBaseDirective, EclBaseEvent, EclRtlService } from '@eui/ecl/core';\nimport { fromEvent, Subject } from 'rxjs';\nimport { debounceTime, takeUntil } from 'rxjs/operators';\n\n/**\n * The wrapper component for an ecl application. Has some important global properties.\n */\nexport class EclAppLanguageDismissEvent extends EclBaseEvent {\n    constructor(public language?: EuiLanguage) {\n        super();\n    }\n}\n\n@Component({\n    selector: 'ecl-app',\n    templateUrl: './ecl-app.component.html',\n    host: {\n        '[attr.dir]': 'textDirection()',\n    },\n})\nexport class EclAppComponent extends ECLBaseDirective implements OnInit, AfterViewInit, OnDestroy {\n    /**\n     * Text direction, by default is 'ltr' - left-to-write. Can also be 'rtl' - right-to-left, which will\n     *  make all components within <ecl-app> to lign to the right, and apply some special styling and functionality.\n     */\n    readonly textDirection = signal('ltr');\n\n    readonly eclSiteHeaderLanguage = contentChild(EclSiteHeaderLanguageComponent);\n\n    readonly languageDismiss = output<EclAppLanguageDismissEvent>();\n\n    protected destroy$: Subject<boolean> = new Subject<boolean>();\n    private readonly eclRtlService = inject(EclRtlService);\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly platformId = inject(PLATFORM_ID);\n    private readonly appShellService = inject(EuiAppShellService);\n\n    ngOnInit(): void {\n\n        // Only initialize CSS vars if no parent app shell is already active\n        const isNestedInAppShell = this.appShellService.state.hasHeader || this.appShellService.state.hasSidebar || this.appShellService.state.hasToolbar;\n        if (!isNestedInAppShell) {\n            CssUtils.initCssVars(this.document, this.platformId);\n        }\n        if (isPlatformBrowser(this.platformId)) {\n            const browserAgent = window.navigator.userAgent.toLowerCase();\n\n            this.appShellService.setState({\n                ...this.appShellService.state,\n                windowHeight: window.innerHeight,\n                windowWidth: window.innerWidth,\n                deviceInfo: {\n                    isChrome: browserAgent.indexOf('chrome') > -1,\n                    isIE: browserAgent.indexOf('trident') > -1,\n                    isFF: browserAgent.indexOf('firefox') > -1,\n                },\n                appBaseFontSize: this.appShellService.getBaseFontSize(),\n            });\n        }\n\n        if (isPlatformBrowser(this.platformId)) {\n            fromEvent(window, 'resize')\n                .pipe(debounceTime(50), takeUntil(this.destroy$))\n                .subscribe(() => {\n                    this.appShellService?.setState({\n                        ...this.appShellService.state,\n                        windowHeight: window.innerHeight,\n                        windowWidth: window.innerWidth,\n                    });\n                    CssUtils.setAppViewportCssVars(this.platformId);\n                });\n        }\n    }\n\n    ngAfterViewInit(): void {\n        // Adds global class, which is used to apply the correct styling for eui-21.\n        CssUtils.setHtmlClass('eui-21', this.document);\n        this.handleRtlChangeState();\n        this.handleUIEvents();\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * Changes the text direction from 'ltr' to 'rtl' and vice versa.\n     */\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            if (rtlState) {\n                this.textDirection.set('rtl');\n            } else {\n                this.textDirection.set('ltr');\n            }\n        });\n    }\n\n    private handleUIEvents(): void {\n        this.eclSiteHeaderLanguage()?.languageSelected\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((evt: EclSiteHeaderLanguageSelectedEvent) => {\n                this.languageDismiss.emit(new EclAppLanguageDismissEvent(evt.language));\n            });\n    }\n}\n",
+            "sourceCode": "import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { AfterViewInit, Component, contentChild, OnDestroy, OnInit, PLATFORM_ID, inject, output, signal } from '@angular/core';\nimport { outputToObservable } from '@angular/core/rxjs-interop';\nimport { CssUtils, EuiAppShellService } from '@eui/core';\nimport { EuiLanguage } from '@eui/base';\nimport { EclSiteHeaderLanguageComponent, EclSiteHeaderLanguageSelectedEvent } from '@eui/ecl/components/ecl-site-header';\nimport { ECLBaseDirective, EclBaseEvent, EclRtlService } from '@eui/ecl/core';\nimport { fromEvent, Subject } from 'rxjs';\nimport { debounceTime, takeUntil } from 'rxjs/operators';\n\n/**\n * The wrapper component for an ecl application. Has some important global properties.\n */\nexport class EclAppLanguageDismissEvent extends EclBaseEvent {\n    constructor(public language?: EuiLanguage) {\n        super();\n    }\n}\n\n@Component({\n    selector: 'ecl-app',\n    templateUrl: './ecl-app.component.html',\n    host: {\n        '[attr.dir]': 'textDirection()',\n    },\n})\nexport class EclAppComponent extends ECLBaseDirective implements OnInit, AfterViewInit, OnDestroy {\n    /**\n     * Text direction, by default is 'ltr' - left-to-write. Can also be 'rtl' - right-to-left, which will\n     *  make all components within <ecl-app> to lign to the right, and apply some special styling and functionality.\n     */\n    readonly textDirection = signal('ltr');\n\n    readonly eclSiteHeaderLanguage = contentChild(EclSiteHeaderLanguageComponent);\n\n    readonly languageDismiss = output<EclAppLanguageDismissEvent>();\n\n    protected destroy$: Subject<boolean> = new Subject<boolean>();\n    private readonly eclRtlService = inject(EclRtlService);\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly platformId = inject(PLATFORM_ID);\n    private readonly appShellService = inject(EuiAppShellService);\n\n    ngOnInit(): void {\n\n        // Only initialize CSS vars if no parent app shell is already active\n        const isNestedInAppShell = this.appShellService.state.hasHeader || this.appShellService.state.hasSidebar || this.appShellService.state.hasToolbar;\n        if (!isNestedInAppShell) {\n            CssUtils.initCssVars(this.document, this.platformId);\n        }\n        if (isPlatformBrowser(this.platformId)) {\n            const browserAgent = window.navigator.userAgent.toLowerCase();\n\n            this.appShellService.setState({\n                ...this.appShellService.state,\n                windowHeight: window.innerHeight,\n                windowWidth: window.innerWidth,\n                deviceInfo: {\n                    isChrome: browserAgent.indexOf('chrome') > -1,\n                    isIE: browserAgent.indexOf('trident') > -1,\n                    isFF: browserAgent.indexOf('firefox') > -1,\n                },\n                appBaseFontSize: this.appShellService.getBaseFontSize(),\n            });\n        }\n\n        if (isPlatformBrowser(this.platformId)) {\n            fromEvent(window, 'resize')\n                .pipe(debounceTime(50), takeUntil(this.destroy$))\n                .subscribe(() => {\n                    this.appShellService?.setState({\n                        ...this.appShellService.state,\n                        windowHeight: window.innerHeight,\n                        windowWidth: window.innerWidth,\n                    });\n                    CssUtils.setAppViewportCssVars(this.platformId);\n                });\n        }\n    }\n\n    ngAfterViewInit(): void {\n        // Adds global class, which is used to apply the correct styling for eui-21.\n        CssUtils.setHtmlClass('eui-21', this.document);\n        this.handleRtlChangeState();\n        this.handleUIEvents();\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * Changes the text direction from 'ltr' to 'rtl' and vice versa.\n     */\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            if (rtlState) {\n                this.textDirection.set('rtl');\n            } else {\n                this.textDirection.set('ltr');\n            }\n        });\n    }\n\n    private handleUIEvents(): void {\n        const eclSiteHeaderLanguage = this.eclSiteHeaderLanguage();\n        if (!eclSiteHeaderLanguage) return;\n\n        outputToObservable(eclSiteHeaderLanguage.languageSelected)\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((evt: EclSiteHeaderLanguageSelectedEvent) => {\n                this.languageDismiss.emit(new EclAppLanguageDismissEvent(evt.language));\n            });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -54800,7 +54448,7 @@
         },
         {
             "name": "EclIconComponent",
-            "id": "component-EclIconComponent-098102385dea8ae19585b13531343588c38d879186ee8a691fc0aeb0f6cef41ef570f2be629b561695d0c3f13ebb52e8869d91e74ca8d7e05471f478e7ad412b",
+            "id": "component-EclIconComponent-96ea975b519f26633f3e68e55e05c5b6d406bf0630655f1a30edb29b7bef31bbf7d66877310a850f9d9e60f880b24a0ac149027c643ad1061196f21bca1b6613",
             "file": "packages/ecl/components/ecl-icon/ecl-icon.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -54839,7 +54487,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Determines whether the icon should be hidden from assistive technologies.\nDefaults to <code>true</code> unless a title is provided.</p>\n",
-                    "line": 91,
+                    "line": 104,
                     "rawdescription": "\n\nDetermines whether the icon should be hidden from assistive technologies.\nDefaults to `true` unless a title is provided.\n",
                     "modifierKind": [
                         148
@@ -54856,7 +54504,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>ID reference for an external element that labels this icon for screen readers.</p>\n",
-                    "line": 75,
+                    "line": 88,
                     "rawdescription": "\n\nID reference for an external element that labels this icon for screen readers.\n",
                     "modifierKind": [
                         148
@@ -54873,7 +54521,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Applies color styling to the icon.\nUse <code>&#39;inverted&#39;</code> for icons on dark backgrounds, or <code>&#39;primary&#39;</code> for emphasis.</p>\n",
-                    "line": 65,
+                    "line": 78,
                     "rawdescription": "\n\nApplies color styling to the icon.\nUse `'inverted'` for icons on dark backgrounds, or `'primary'` for emphasis.\n",
                     "required": false
                 },
@@ -54887,7 +54535,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Controls whether the icon is focusable via keyboard.\nDefaults to <code>false</code>.</p>\n",
-                    "line": 97,
+                    "line": 110,
                     "rawdescription": "\n\nControls whether the icon is focusable via keyboard.\nDefaults to `false`.\n",
                     "modifierKind": [
                         148
@@ -54903,7 +54551,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Name of the icon to render from the selected set.</p>\n",
-                    "line": 52,
+                    "line": 65,
                     "rawdescription": "\n\nName of the icon to render from the selected set.\n",
                     "required": false
                 },
@@ -54913,12 +54561,12 @@
                     "defaultValue": "'default'",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "'default' | 'social' | 'social-media' | 'social-media-color' | 'flag' | 'flag-non-members' |        'phosphor' | 'phosphor-fill' | string",
+                    "type": "EclIconSet",
                     "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",
-                    "line": 46,
-                    "rawdescription": "\n\nDefines the icon set to use.\nAvailable sets: `default`, `social`, `social-media`, `flag`, or a custom URL prefix.\nDefaults to `'default'`.\n",
+                    "description": "<p>Defines the icon set to use.\nAvailable sets: <code>default</code>, <code>social</code>, <code>social-media</code>, <code>social-media-color</code>, <code>flag</code>,\n<code>flag-non-members</code>, <code>phosphor</code>, <code>phosphor-fill</code>.\nDefaults to <code>&#39;default&#39;</code>.</p>\n",
+                    "line": 60,
+                    "rawdescription": "\n\nDefines the icon set to use.\nAvailable sets: `default`, `social`, `social-media`, `social-media-color`, `flag`,\n`flag-non-members`, `phosphor`, `phosphor-fill`.\nDefaults to `'default'`.\n",
                     "required": false
                 },
                 {
@@ -54931,7 +54579,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Flips the icon horizontally if set to <code>true</code>.</p>\n",
-                    "line": 122,
+                    "line": 135,
                     "rawdescription": "\n\nFlips the icon horizontally if set to `true`.\n",
                     "modifierKind": [
                         148
@@ -54948,7 +54596,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>ARIA role of the icon. If a <code>title</code> is provided and no role is defined, defaults to <code>&#39;img&#39;</code>.</p>\n",
-                    "line": 80,
+                    "line": 93,
                     "rawdescription": "\n\nARIA role of the icon. If a `title` is provided and no role is defined, defaults to `'img'`.\n",
                     "modifierKind": [
                         148
@@ -54965,7 +54613,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Size of the icon.\nSupported values: <code>&#39;2xs&#39;</code>, <code>&#39;xs&#39;</code>, <code>&#39;s&#39;</code>, <code>&#39;m&#39;</code>, <code>&#39;l&#39;</code>, <code>&#39;xl&#39;</code>, <code>&#39;2xl&#39;</code>, <code>&#39;fluid&#39;</code>.\nDefaults to <code>&#39;xs&#39;</code>.</p>\n",
-                    "line": 59,
+                    "line": 72,
                     "rawdescription": "\n\nSize of the icon.\nSupported values: `'2xs'`, `'xs'`, `'s'`, `'m'`, `'l'`, `'xl'`, `'2xl'`, `'fluid'`.\nDefaults to `'xs'`.\n",
                     "required": false
                 },
@@ -54979,7 +54627,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Title used for accessibility. Also affects <code>aria-hidden</code> and <code>role</code>.</p>\n",
-                    "line": 85,
+                    "line": 98,
                     "rawdescription": "\n\nTitle used for accessibility. Also affects `aria-hidden` and `role`.\n",
                     "modifierKind": [
                         148
@@ -54995,7 +54643,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Adds a transformation modifier to the icon (e.g., rotation).</p>\n",
-                    "line": 70,
+                    "line": 83,
                     "rawdescription": "\n\nAdds a transformation modifier to the icon (e.g., rotation).\n",
                     "required": false
                 }
@@ -55012,7 +54660,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 135,
+                    "line": 148,
                     "rawdescription": "\n"
                 },
                 {
@@ -55025,7 +54673,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Resolved aria-hidden: uses the explicit <code>ariaHidden</code> input if provided,\notherwise hides the icon unless a <code>title</code> is set.</p>\n",
-                    "line": 113,
+                    "line": 126,
                     "rawdescription": "\n\nResolved aria-hidden: uses the explicit `ariaHidden` input if provided,\notherwise hides the icon unless a `title` is set.\n",
                     "modifierKind": [
                         148
@@ -55041,7 +54689,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Resolved role: uses the explicit <code>role</code> input if provided,\notherwise defaults to <code>&#39;img&#39;</code> when a <code>title</code> is set.</p>\n",
-                    "line": 103,
+                    "line": 116,
                     "rawdescription": "\n\nResolved role: uses the explicit `role` input if provided,\notherwise defaults to `'img'` when a `title` is set.\n",
                     "modifierKind": [
                         148
@@ -55057,7 +54705,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 136,
+                    "line": 149,
                     "rawdescription": "\n"
                 },
                 {
@@ -55070,7 +54718,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Extra classes added programmatically by parent components\n(button, link, etc.)</p>\n",
-                    "line": 144,
+                    "line": 157,
                     "rawdescription": "\n\nExtra classes added programmatically by parent components\n(button, link, etc.)\n",
                     "modifierKind": [
                         148
@@ -55086,7 +54734,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Real classes currently present on <ecl-icon>.\nTo support [class.foo] / [ngClass].</p>\n",
-                    "line": 150,
+                    "line": 163,
                     "rawdescription": "\n\nReal classes currently present on <ecl-icon>.\nTo support [class.foo] / [ngClass].\n",
                     "modifierKind": [
                         148
@@ -55102,7 +54750,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 134,
+                    "line": 147,
                     "rawdescription": "\n"
                 },
                 {
@@ -55115,7 +54763,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 152,
+                    "line": 165,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -55131,7 +54779,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 132,
+                    "line": 145,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -55155,7 +54803,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 196,
+                    "line": 209,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -55190,7 +54838,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 173,
+                    "line": 186,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -55216,7 +54864,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 183,
+                    "line": 196,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -55229,7 +54877,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 179,
+                    "line": 192,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -55251,7 +54899,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 204,
+                    "line": 217,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -55286,7 +54934,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 209,
+                    "line": 222,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -55318,7 +54966,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAdds a dark background utility class if the color is set to `'inverted'`.\n",
                     "description": "<p>Adds a dark background utility class if the color is set to <code>&#39;inverted&#39;</code>.</p>\n",
-                    "line": 128,
+                    "line": 141,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -55333,14 +54981,14 @@
             "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' | '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",
+            "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 * Available icon sets supported by {@link EclIconComponent}.\n */\nexport type EclIconSet =\n    | 'default'\n    | 'social'\n    | 'social-media'\n    | 'social-media-color'\n    | 'flag'\n    | 'flag-non-members'\n    | 'phosphor'\n    | 'phosphor-fill';\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`, `social-media-color`, `flag`,\n     * `flag-non-members`, `phosphor`, `phosphor-fill`.\n     * Defaults to `'default'`.\n     */\n    iconSet = input<EclIconSet>('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": "",
             "jsdoctags": [
                 {
-                    "pos": 411,
-                    "end": 573,
+                    "pos": 664,
+                    "end": 826,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -55355,7 +55003,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 163,
+                "line": 176,
                 "rawdescription": "\n"
             },
             "extends": [],
@@ -55371,7 +55019,7 @@
                         "name": "isColorInverted",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 128,
+                        "line": 141,
                         "rawdescription": "\n\nAdds a dark background utility class if the color is set to `'inverted'`.\n",
                         "description": "<p>Adds a dark background utility class if the color is set to <code>&#39;inverted&#39;</code>.</p>\n"
                     }
@@ -78793,10 +78441,11 @@
         },
         {
             "name": "EclSiteHeaderActionComponent",
-            "id": "component-EclSiteHeaderActionComponent-1defa0053b63fb316912c581f8d6bd5fd7e952e17ec832928bfd565000f8e2b033b2913dee8720baca802383e0c31f42ffb55e3f7b6820c45131e158acd52c60",
+            "id": "component-EclSiteHeaderActionComponent-f3dce85620ac5f46ed35524d8b25aa20a367fb0042328dc928c9a3872ed37127835c71c6e882bf7b283fe0fb0d484657ea75dc9aaccddfe4181a3aaf0ddd7a1b",
             "file": "packages/ecl/components/ecl-site-header/action/ecl-site-header-action.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -78855,30 +78504,7 @@
                 }
             ],
             "outputsClass": [],
-            "propertiesClass": [
-                {
-                    "name": "class",
-                    "coverageIgnore": false,
-                    "defaultValue": "'ecl-site-header__action'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 13,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "getCssClasses",
@@ -78922,35 +78548,21 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "class",
-                    "defaultValue": "'ecl-site-header__action'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 13,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [],
             "description": "<p>This components is a container element for custom action, login, language and search components.</p>\n",
             "rawdescription": "\n\nThis components is a container element for custom action, login, language and search components.\n",
             "type": "component",
-            "sourceCode": "import { Component, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * This components is a container element for custom action, login, language and search components.\n */\n// TODO: maybe could be part of the header, and we don't need this component?\n@Component({\n    selector: 'ecl-site-header-action',\n    templateUrl: './ecl-site-header-action.component.html',\n})\nexport class EclSiteHeaderActionComponent extends ECLBaseDirective {\n    @HostBinding('class') class = 'ecl-site-header__action';\n}\n",
+            "sourceCode": "import { Component } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * This components is a container element for custom action, login, language and search components.\n */\n// TODO: maybe could be part of the header, and we don't need this component?\n@Component({\n    selector: 'ecl-site-header-action',\n    templateUrl: './ecl-site-header-action.component.html',\n    host: {\n        class: 'ecl-site-header__action',\n    },\n})\nexport class EclSiteHeaderActionComponent extends ECLBaseDirective {}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 214,
+                    "pos": 94,
+                    "end": 201,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -78975,10 +78587,11 @@
         },
         {
             "name": "EclSiteHeaderBannerTopComponent",
-            "id": "component-EclSiteHeaderBannerTopComponent-dd0166c9cbd95560344f59cd16a78b18d89b61906c3bd44854a2f47d7fb1d2742dc963a064d6b6a981ff4f49b74c58b09cc5791e0031a94bf2bdcda4948961d0",
+            "id": "component-EclSiteHeaderBannerTopComponent-cdaded481e90821a578e2eb1fa53ef985c42288b2b57db8b0e641fbea4db7ea89a75c16070be03d5417a848bdd0f4474c9678ee40f7f33f5706907227b3eb19f",
             "file": "packages/ecl/components/ecl-site-header/banner-top/ecl-site-header-banner-top.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -79039,30 +78652,7 @@
                 }
             ],
             "outputsClass": [],
-            "propertiesClass": [
-                {
-                    "name": "className",
-                    "coverageIgnore": false,
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 22,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-site-header__banner-top'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "ngOnInit",
@@ -79071,7 +78661,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 26,
+                    "line": 27,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -79119,43 +78709,29 @@
             "coverageIgnore": false,
             "deprecated": true,
             "deprecationMessage": "This component is deprecated and will be removed in v23. Not used anymore.\n\nThis component is used, when we want to show class name (used in standardised variant of site-header).",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-site-header__banner-top",
-                    "actualName": "className",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 22,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [],
             "description": "<p>This component is used, when we want to show class name (used in standardised variant of site-header).</p>\n",
             "rawdescription": "\n\n\nThis component is used, when we want to show class name (used in standardised variant of site-header).\n",
             "type": "component",
-            "sourceCode": "import { Component, HostBinding, inject, OnInit, PLATFORM_ID } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * @deprecated This component is deprecated and will be removed in v23. Not used anymore.\n *\n * This component is used, when we want to show class name (used in standardised variant of site-header).\n */\n@Component({\n    selector: 'ecl-site-header-banner-top',\n    templateUrl: 'ecl-site-header-banner-top.component.html',\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\nexport class EclSiteHeaderBannerTopComponent extends ECLBaseDirective implements OnInit {\n    @HostBinding('class.ecl-site-header__banner-top') className = true;\n\n    private platformId = inject(PLATFORM_ID);\n\n    ngOnInit(): void {\n        if (isPlatformBrowser(this.platformId)) {\n            console.warn(\n                'EclSiteHeaderBannerTopComponent: <ecl-site-header-banner-top> is deprecated and will be removed in v23.',\n            );\n        }\n    }\n}\n",
+            "sourceCode": "import { Component, inject, OnInit, PLATFORM_ID } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * @deprecated This component is deprecated and will be removed in v23. Not used anymore.\n *\n * This component is used, when we want to show class name (used in standardised variant of site-header).\n */\n@Component({\n    selector: 'ecl-site-header-banner-top',\n    templateUrl: 'ecl-site-header-banner-top.component.html',\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n    host: {\n        class: 'ecl-site-header__banner-top',\n    },\n})\nexport class EclSiteHeaderBannerTopComponent extends ECLBaseDirective implements OnInit {\n    private platformId = inject(PLATFORM_ID);\n\n    ngOnInit(): void {\n        if (isPlatformBrowser(this.platformId)) {\n            console.warn(\n                'EclSiteHeaderBannerTopComponent: <ecl-site-header-banner-top> is deprecated and will be removed in v23.',\n            );\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n            :host {\n                display: block;\n            }\n        \n",
             "jsdoctags": [
                 {
-                    "pos": 196,
-                    "end": 393,
+                    "pos": 183,
+                    "end": 380,
                     "kind": 332,
                     "id": 0,
                     "flags": 16777216,
                     "modifierFlagsCache": 0,
                     "transformFlags": 0,
                     "tagName": {
-                        "pos": 197,
-                        "end": 207,
+                        "pos": 184,
+                        "end": 194,
                         "kind": 80,
                         "id": 0,
                         "flags": 16777216,
@@ -79188,10 +78764,11 @@
         },
         {
             "name": "EclSiteHeaderComponent",
-            "id": "component-EclSiteHeaderComponent-d2f47ffc4d1d9b29852345f6420fdfcf23c33201b717963bebeb9a175ed8319bff8cfc47ad8ab1fa257aa186039640ba95249c15072739ac71a33d5060ecb8f7",
+            "id": "component-EclSiteHeaderComponent-95b64b76f096eb54a34d75ede5b1f451009261a51052da10a41830d5d4040b3e07b6a1c3a52f08920d1cd02a4f767638f7977987b162cc7187d8db14618259ad",
             "file": "packages/ecl/components/ecl-site-header/ecl-site-header.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -79208,40 +78785,34 @@
             "hostDirectives": [],
             "inputsClass": [
                 {
+                    "name": "isSiteNameMobileOnly",
                     "coverageIgnore": false,
-                    "name": "languageCode",
-                    "defaultValue": "'en'",
+                    "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nLanguage code of the current language of the site.\n",
-                    "description": "<p>Language code of the current language of the site.</p>\n",
-                    "line": 51,
-                    "type": "string",
-                    "decorators": []
+                    "type": "boolean",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Determines if the site name should be displayed only on mobile devices.</p>\n",
+                    "line": 59,
+                    "rawdescription": "\n\nDetermines if the site name should be displayed only on mobile devices.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
+                    "name": "languageCode",
                     "coverageIgnore": false,
-                    "name": "siteName",
+                    "defaultValue": "'en'",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nThe name of the site, to be added in the header, next to the logo.\n",
-                    "description": "<p>The name of the site, to be added in the header, next to the logo.</p>\n",
-                    "line": 47,
                     "type": "string",
-                    "decorators": []
-                },
-                {
-                    "name": "isSiteNameMobileOnly",
-                    "coverageIgnore": false,
-                    "defaultValue": "false",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "boolean",
                     "indexKey": "",
                     "optional": false,
-                    "description": "<p>Determines if the site name should be displayed only on mobile devices.</p>\n",
-                    "line": 60,
-                    "rawdescription": "\n\nDetermines if the site name should be displayed only on mobile devices.\n",
+                    "description": "<p>Language code of the current language of the site.</p>\n",
+                    "line": 51,
+                    "rawdescription": "\n\nLanguage code of the current language of the site.\n",
                     "modifierKind": [
                         148
                     ],
@@ -79264,6 +78835,22 @@
                     ],
                     "required": false
                 },
+                {
+                    "name": "siteName",
+                    "coverageIgnore": false,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>The name of the site, to be added in the header, next to the logo.</p>\n",
+                    "line": 47,
+                    "rawdescription": "\n\nThe name of the site, to be added in the header, next to the logo.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
+                },
                 {
                     "coverageIgnore": false,
                     "name": "class",
@@ -79318,13 +78905,30 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 79,
+                    "line": 62,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
                     ],
                     "required": false
                 },
+                {
+                    "name": "languageCode",
+                    "coverageIgnore": false,
+                    "defaultValue": "'en'",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Language code of the current language of the site.</p>\n",
+                    "line": 51,
+                    "rawdescription": "\n\nLanguage code of the current language of the site.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
+                },
                 {
                     "name": "logoClick",
                     "coverageIgnore": false,
@@ -79334,7 +78938,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 78,
+                    "line": 61,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -79353,7 +78957,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 83,
+                    "line": 66,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -79369,7 +78973,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 93,
+                    "line": 78,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
@@ -79385,7 +78989,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 91,
+                    "line": 74,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -79401,7 +79005,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 90,
+                    "line": 73,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -79417,7 +79021,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 88,
+                    "line": 71,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -79433,7 +79037,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 84,
+                    "line": 67,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -79449,7 +79053,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 86,
+                    "line": 69,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -79465,7 +79069,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 85,
+                    "line": 68,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -79481,7 +79085,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 89,
+                    "line": 72,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -79497,7 +79101,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 87,
+                    "line": 70,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -79513,8 +79117,12 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 41,
-                    "rawdescription": "\n"
+                    "line": 76,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        124,
+                        148
+                    ]
                 },
                 {
                     "name": "i18nService",
@@ -79526,10 +79134,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 42,
+                    "line": 77,
                     "rawdescription": "\n",
                     "modifierKind": [
-                        124
+                        124,
+                        148
                     ]
                 },
                 {
@@ -79542,7 +79151,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 82,
+                    "line": 65,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -79558,7 +79167,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 81,
+                    "line": 64,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -79573,7 +79182,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 193,
+                    "line": 194,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -79586,7 +79195,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 124,
+                    "line": 125,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSubscibe to some child components' events.\n",
@@ -79599,7 +79208,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 172,
+                    "line": 173,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -79621,7 +79230,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 185,
+                    "line": 186,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -79682,20 +79291,7 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nAdds specific classes to the main element. Depending , logo size, menu and menu status, rtl status.\n",
-                    "description": "<p>Adds specific classes to the main element. Depending , logo size, menu and menu status, rtl status.</p>\n",
-                    "line": 66,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [
@@ -79718,14 +79314,14 @@
             "description": "<p>The Site header offers easily recognisable elements (such as the logo) and the most essential functionality of\nevery site (such as Language switcher or Search form). Additionally it can host the name of the site,\nthe class name to which it belongs and the main navigation. The header is always placed at the top of the page.\nThe elements required in the site header are different depending wether it is the corporate, standardised or an harmonised website.</p>\n",
             "rawdescription": "\n\nThe Site header offers easily recognisable elements (such as the logo) and the most essential functionality of\nevery site (such as Language switcher or Search form). Additionally it can host the name of the site,\nthe class name to which it belongs and the main navigation. The header is always placed at the top of the page.\nThe elements required in the site header are different depending wether it is the corporate, standardised or an harmonised website.\n",
             "type": "component",
-            "sourceCode": "import { BreakpointObserver } from '@angular/cdk/layout';\nimport { AsyncPipe, isPlatformBrowser } from '@angular/common';\nimport { AfterContentInit, Component, ElementRef, HostBinding, Input, OnDestroy, PLATFORM_ID, afterNextRender, booleanAttribute, forwardRef, inject, output, input, viewChild, contentChild } from '@angular/core';\nimport { outputToObservable } from '@angular/core/rxjs-interop';\nimport { I18nService } from '@eui/core';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { EclMegaMenuComponent } from '@eui/ecl/components/ecl-mega-menu';\nimport { EclMenuComponent } from '@eui/ecl/components/ecl-menu';\nimport { ECLBaseDirective, EclRtlService, EclThemeService, logoLanguageCode } from '@eui/ecl/core';\nimport { EclHeaderMenuComunicationService } from '@eui/ecl/shared';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { Subject, takeUntil } from 'rxjs';\nimport { EclSiteHeaderLanguageClickEvent, EclSiteHeaderLogoClickEvent } from './events';\nimport { EclAreaChangeEvent } from './events/ecl-area-change.event';\nimport { EclSiteHeaderLanguageComponent } from './language';\nimport { EclSiteHeaderLoginComponent } from './login';\nimport { EclSiteHeaderNotificationComponent } from './notification';\nimport { EclSiteHeaderImageDirective, EclSiteHeaderLinkDirective, EclSiteHeaderPictureDirective } from './picture';\nimport { EclSiteHeaderSearchComponent } from './search';\nimport { EclAreaDataService } from './services/ecl-area-data.service';\n\n/**\n * The Site header offers easily recognisable elements (such as the logo) and the most essential functionality of\n * every site (such as Language switcher or Search form). Additionally it can host the name of the site,\n * the class name to which it belongs and the main navigation. The header is always placed at the top of the page.\n * The elements required in the site header are different depending wether it is the corporate, standardised or an harmonised website.\n */\n@Component({\n    selector: 'ecl-site-header',\n    templateUrl: './ecl-site-header.component.html',\n    imports: [AsyncPipe, TranslatePipe, ...EUI_ECL_LINK, EclSiteHeaderPictureDirective],\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\nexport class EclSiteHeaderComponent extends ECLBaseDirective implements AfterContentInit, OnDestroy {\n    eclThemeService = inject(EclThemeService);\n    protected i18nService = inject(I18nService);\n\n    /**\n     * The name of the site, to be added in the header, next to the logo.\n     */\n    @Input() siteName: string;\n    /**\n     * Language code of the current language of the site.\n     */\n    @Input() languageCode = 'en';\n    /**\n     * The size of the logo, 's', 'm' or 'l', default to 'm'.\n     */\n    readonly logoSize = input<'s' | 'm' | 'l'>('m');\n\n    /**\n     * Determines if the site name should be displayed only on mobile devices.\n     */\n    readonly isSiteNameMobileOnly = input(false, { transform: booleanAttribute });\n\n    /**\n     * Adds specific classes to the main element. Depending , logo size, menu and menu status, rtl status.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-site-header'),\n            `ecl-site-header-with-logo-${this.logoSize()}`,\n            this.eclMenuComponent() ? 'ecl-site-header--has-menu' : '',\n            this.eclMegaMenuComponent() ? 'ecl-site-header--has-mega-menu' : '',\n            this.isEclMegaMenuOpen ? 'ecl-site-header--open-menu' : '',\n            this.isEclMegaMenuStart ? 'ecl-site-header--open-menu-start' : '',\n            this.isRtl ? 'ecl-site-header--rtl' : '',\n        ].join(' ').trim();\n    }\n\n    readonly logoClick = output<EclSiteHeaderLogoClickEvent>();\n    readonly languageClick = output<EclSiteHeaderLanguageClickEvent>();\n\n    readonly topContainerElement = viewChild<ElementRef>('topContainer');\n    readonly siteHeaderHeader = viewChild<ElementRef>('siteHeaderHeader');\n    readonly bannerHeader = viewChild<ElementRef>('bannerHeader');\n    readonly eclLoginComponent = contentChild(EclSiteHeaderLoginComponent);\n    readonly eclMenuComponent = contentChild(EclMenuComponent);\n    readonly eclMegaMenuComponent = contentChild(EclMegaMenuComponent);\n    readonly eclSearchComponent = contentChild(EclSiteHeaderSearchComponent);\n    readonly eclLanguageComponent = contentChild(EclSiteHeaderLanguageComponent);\n    readonly eclNotificationComponent = contentChild(EclSiteHeaderNotificationComponent);\n    readonly eclHeaderLink = contentChild(forwardRef(() => EclSiteHeaderLinkDirective));\n    readonly eclHeaderImage = contentChild(forwardRef(() => EclSiteHeaderImageDirective));\n\n    protected destroy$: Subject<boolean> = new Subject<boolean>();\n    private isEclMegaMenuOpen = false;\n    private isEclMegaMenuStart = false;\n    private isMobileBreakpoint = false;\n    private isRtl = false;\n    private readonly TIMEOUT_INTERVAL = 100;\n    private eclRtlService = inject(EclRtlService);\n    private eclHeaderMenuComunicationService = inject(EclHeaderMenuComunicationService);\n    private eclAreaDataService = inject(EclAreaDataService);\n    private cdkBreakpointObserver = inject(BreakpointObserver);\n    private el = inject(ElementRef);\n    private platformId = inject(PLATFORM_ID);\n\n    constructor() {\n        super();\n\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n            this.subscribeToMegaMenuEvents();\n            // Observe size changes of the component, for some child components size need to be also adjusted accordingly.\n            new ResizeObserver(() => {\n                setTimeout(() => {\n                    this.sendResizeEventToChildComponents();\n                }, this.TIMEOUT_INTERVAL)\n            }).observe(this.topContainerElement().nativeElement)\n        });\n    }\n\n    /**\n     * Subscibe to some child components' events.\n     */\n    ngAfterContentInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n\n        this.handleRtlChangeState();\n        this.handleLanguageChangeState();\n        const eclHeaderImage = this.eclHeaderImage();\n        if (eclHeaderImage) {\n            eclHeaderImage.logoSize = this.logoSize();\n        }\n\n        const eclLoginComponent = this.eclLoginComponent();\n        const eclSearchComponent = this.eclSearchComponent();\n        if (eclLoginComponent && eclSearchComponent) {\n            eclLoginComponent.loginBoxToggle.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n                this.eclSearchComponent().isSearchBoxActive = false;\n                this.sendResizeEventToChildComponents();\n            });\n\n            eclSearchComponent.searchToggle.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n                this.eclLoginComponent().isLoginBoxActive = false;\n                this.sendResizeEventToChildComponents();\n            });\n        }\n\n        const eclLanguageComponent = this.eclLanguageComponent();\n        if (eclLanguageComponent) {\n            eclLanguageComponent.languageClick.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n                this.languageClick.emit(new EclSiteHeaderLanguageClickEvent());\n                this.sendResizeEventToChildComponents();\n            });\n\n            eclLanguageComponent.languageSelected.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n                this.languageCode = evt.language?.code;\n            });\n        }\n\n        if (eclLanguageComponent) {\n            this.languageCode = eclLanguageComponent?.languageCode;\n        }\n\n        const eclMenuComponent = this.eclMenuComponent();\n        if (eclMenuComponent) {\n            outputToObservable(eclMenuComponent.openHamburgerMenu).pipe(takeUntil(this.destroy$)).subscribe(() => {\n                this.positionMenu();\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * This method is used, when current language is not present for our available logo collection.\n     * In this case, a default logo is returned.\n     */\n    get partOfLogoName(): string {\n        return logoLanguageCode(this.languageCode);\n    }\n\n    onECLogoClick(evt: MouseEvent): void {\n        const event = new EclSiteHeaderLogoClickEvent();\n        this.logoClick.emit(event);\n        if (event.defaultPrevented) {\n            evt.preventDefault();\n        }\n    }\n\n    hasCustomLink(): boolean {\n        return !!this.eclHeaderLink();\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     * Some child components need position and size to be set according to the parent site-header. So we share some site-header's measurements\n     *  via the 'eclAreaDataService'.\n     */\n    private sendResizeEventToChildComponents(): void {\n        const topContainerElement = this.topContainerElement();\n        if (topContainerElement.nativeElement.getBoundingClientRect().width !== undefined) {\n            const topContainerRect = topContainerElement.nativeElement.getBoundingClientRect();\n            const siteHeaderAreaChangeEvent = new EclAreaChangeEvent(\n                topContainerRect.width,\n                topContainerRect.left,\n                topContainerRect.right);\n\n            this.eclAreaDataService.publishEvent(siteHeaderAreaChangeEvent);\n        }\n    }\n\n    private subscribeToMegaMenuEvents(): void {\n        this.eclHeaderMenuComunicationService.isMobileObjectOpen$.pipe(takeUntil(this.destroy$)).subscribe(isExpanded => {\n            if (this.isMobileBreakpoint) {\n                this.isEclMegaMenuStart = isExpanded;\n                this.isEclMegaMenuOpen = isExpanded;\n            }\n            if (isExpanded) {\n                const bottomSpaceY = this.el.nativeElement.getBoundingClientRect().bottom;\n                this.eclMegaMenuComponent().positionMenuOverlay(bottomSpaceY);\n            }\n        });\n\n        this.eclHeaderMenuComunicationService.isObjectExpanded$.pipe(takeUntil(this.destroy$)).subscribe(isExpanded => {\n            if (this.isMobileBreakpoint) {\n                if (isExpanded) {\n                    this.onMegaMenuItemExpandMobile();\n                } else {\n                    this.onMegaMenuItemCollapseMobile();\n                }\n            } else {\n                this.isEclMegaMenuOpen = isExpanded;\n                if (isExpanded) {\n                    const bottomSpaceY = this.el.nativeElement.getBoundingClientRect().bottom;\n                    this.eclMegaMenuComponent().positionMenuOverlay(bottomSpaceY);\n                }\n            }\n        });\n    }\n\n    private onMegaMenuItemExpandMobile(): void {\n        this.isEclMegaMenuStart = false;\n        const eclNotificationComponent = this.eclNotificationComponent();\n        if (eclNotificationComponent) {\n            eclNotificationComponent.onHide();\n        }\n        const bannerHeader = this.bannerHeader();\n        if (bannerHeader) {\n            bannerHeader.nativeElement.style.display = 'none';\n        }\n        const bottomSpaceY = this.siteHeaderHeader().nativeElement.getBoundingClientRect().bottom;\n        this.eclMegaMenuComponent().positionMenuOverlay(bottomSpaceY);\n    }\n\n    private onMegaMenuItemCollapseMobile(): void {\n        this.isEclMegaMenuStart = true;\n        const eclNotificationComponent = this.eclNotificationComponent();\n        if (eclNotificationComponent) {\n            eclNotificationComponent.onShow();\n        }\n        const bannerHeader = this.bannerHeader();\n        if (bannerHeader) {\n            bannerHeader.nativeElement.style.display = '';\n        }\n        const bottomSpaceY = this.el.nativeElement.getBoundingClientRect().bottom;\n        this.eclMegaMenuComponent().positionMenuOverlay(bottomSpaceY);\n    }\n\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe(['(max-width: 996px)'])\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((result) => {\n                this.isMobileBreakpoint = result.matches;\n            });\n    }\n\n    private positionMenu(): void {\n        const bottomSpaceY = this.siteHeaderHeader().nativeElement.getBoundingClientRect().bottom;\n        this.eclMenuComponent().positionMenuOverlay(bottomSpaceY);\n    }\n\n    private handleLanguageChangeState(): void {\n        this.i18nService.getState().pipe(takeUntil(this.destroy$)).subscribe((lang) => {\n            this.languageCode = lang.activeLang;\n            const eclLanguageComponent = this.eclLanguageComponent();\n            if (eclLanguageComponent) {\n                eclLanguageComponent.languageCode = lang.activeLang;\n            }\n        });\n    }\n}\n",
+            "sourceCode": "import { BreakpointObserver } from '@angular/cdk/layout';\nimport { AsyncPipe, isPlatformBrowser } from '@angular/common';\nimport { AfterContentInit, Component, ElementRef, OnDestroy, PLATFORM_ID, afterNextRender, booleanAttribute, forwardRef, inject, output, input, model, signal, viewChild, contentChild } from '@angular/core';\nimport { outputToObservable } from '@angular/core/rxjs-interop';\nimport { I18nService } from '@eui/core';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { EclMegaMenuComponent } from '@eui/ecl/components/ecl-mega-menu';\nimport { EclMenuComponent } from '@eui/ecl/components/ecl-menu';\nimport { ECLBaseDirective, EclRtlService, EclThemeService, logoLanguageCode } from '@eui/ecl/core';\nimport { EclHeaderMenuComunicationService } from '@eui/ecl/shared';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { Subject, takeUntil } from 'rxjs';\nimport { EclSiteHeaderLanguageClickEvent, EclSiteHeaderLogoClickEvent } from './events';\nimport { EclAreaChangeEvent } from './events/ecl-area-change.event';\nimport { EclSiteHeaderLanguageComponent } from './language';\nimport { EclSiteHeaderLoginComponent } from './login';\nimport { EclSiteHeaderNotificationComponent } from './notification';\nimport { EclSiteHeaderImageDirective, EclSiteHeaderLinkDirective, EclSiteHeaderPictureDirective } from './picture';\nimport { EclSiteHeaderSearchComponent } from './search';\nimport { EclAreaDataService } from './services/ecl-area-data.service';\n\n/**\n * The Site header offers easily recognisable elements (such as the logo) and the most essential functionality of\n * every site (such as Language switcher or Search form). Additionally it can host the name of the site,\n * the class name to which it belongs and the main navigation. The header is always placed at the top of the page.\n * The elements required in the site header are different depending wether it is the corporate, standardised or an harmonised website.\n */\n@Component({\n    selector: 'ecl-site-header',\n    templateUrl: './ecl-site-header.component.html',\n    imports: [AsyncPipe, TranslatePipe, ...EUI_ECL_LINK, EclSiteHeaderPictureDirective],\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSiteHeaderComponent extends ECLBaseDirective implements AfterContentInit, OnDestroy {\n    /**\n     * The name of the site, to be added in the header, next to the logo.\n     */\n    readonly siteName = input<string>();\n    /**\n     * Language code of the current language of the site.\n     */\n    readonly languageCode = model('en');\n    /**\n     * The size of the logo, 's', 'm' or 'l', default to 'm'.\n     */\n    readonly logoSize = input<'s' | 'm' | 'l'>('m');\n    /**\n     * Determines if the site name should be displayed only on mobile devices.\n     */\n    readonly isSiteNameMobileOnly = input(false, { transform: booleanAttribute });\n\n    readonly logoClick = output<EclSiteHeaderLogoClickEvent>();\n    readonly languageClick = output<EclSiteHeaderLanguageClickEvent>();\n\n    readonly topContainerElement = viewChild<ElementRef>('topContainer');\n    readonly siteHeaderHeader = viewChild<ElementRef>('siteHeaderHeader');\n    readonly bannerHeader = viewChild<ElementRef>('bannerHeader');\n    readonly eclLoginComponent = contentChild(EclSiteHeaderLoginComponent);\n    readonly eclMenuComponent = contentChild(EclMenuComponent);\n    readonly eclMegaMenuComponent = contentChild(EclMegaMenuComponent);\n    readonly eclSearchComponent = contentChild(EclSiteHeaderSearchComponent);\n    readonly eclLanguageComponent = contentChild(EclSiteHeaderLanguageComponent);\n    readonly eclNotificationComponent = contentChild(EclSiteHeaderNotificationComponent);\n    readonly eclHeaderLink = contentChild(forwardRef(() => EclSiteHeaderLinkDirective));\n    readonly eclHeaderImage = contentChild(forwardRef(() => EclSiteHeaderImageDirective));\n\n    protected readonly eclThemeService = inject(EclThemeService);\n    protected readonly i18nService = inject(I18nService);\n    protected destroy$: Subject<boolean> = new Subject<boolean>();\n\n    private readonly isEclMegaMenuOpen = signal(false);\n    private readonly isEclMegaMenuStart = signal(false);\n    private isMobileBreakpoint = false;\n    private readonly isRtl = signal(false);\n    private readonly TIMEOUT_INTERVAL = 100;\n    private readonly eclRtlService = inject(EclRtlService);\n    private readonly eclHeaderMenuComunicationService = inject(EclHeaderMenuComunicationService);\n    private readonly eclAreaDataService = inject(EclAreaDataService);\n    private readonly cdkBreakpointObserver = inject(BreakpointObserver);\n    private readonly el = inject(ElementRef);\n    private readonly platformId = inject(PLATFORM_ID);\n\n    /**\n     * Adds specific classes to the main element. Depending , logo size, menu and menu status, rtl status.\n     */\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-site-header'),\n            `ecl-site-header-with-logo-${this.logoSize()}`,\n            this.eclMenuComponent() ? 'ecl-site-header--has-menu' : '',\n            this.eclMegaMenuComponent() ? 'ecl-site-header--has-mega-menu' : '',\n            this.isEclMegaMenuOpen() ? 'ecl-site-header--open-menu' : '',\n            this.isEclMegaMenuStart() ? 'ecl-site-header--open-menu-start' : '',\n            this.isRtl() ? 'ecl-site-header--rtl' : '',\n        ].join(' ').trim();\n    }\n\n    constructor() {\n        super();\n\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n            this.subscribeToMegaMenuEvents();\n            // Observe size changes of the component, for some child components size need to be also adjusted accordingly.\n            new ResizeObserver(() => {\n                setTimeout(() => {\n                    this.sendResizeEventToChildComponents();\n                }, this.TIMEOUT_INTERVAL)\n            }).observe(this.topContainerElement().nativeElement)\n        });\n    }\n\n    /**\n     * Subscibe to some child components' events.\n     */\n    ngAfterContentInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n\n        this.handleRtlChangeState();\n        this.handleLanguageChangeState();\n        const eclHeaderImage = this.eclHeaderImage();\n        if (eclHeaderImage) {\n            eclHeaderImage.logoSize = this.logoSize();\n        }\n\n        const eclLoginComponent = this.eclLoginComponent();\n        const eclSearchComponent = this.eclSearchComponent();\n        if (eclLoginComponent && eclSearchComponent) {\n            outputToObservable(eclLoginComponent.loginBoxToggle).pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n                this.eclSearchComponent().isSearchBoxActive = false;\n                this.sendResizeEventToChildComponents();\n            });\n\n            outputToObservable(eclSearchComponent.searchToggle).pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n                this.eclLoginComponent().isLoginBoxActive = false;\n                this.sendResizeEventToChildComponents();\n            });\n        }\n\n        const eclLanguageComponent = this.eclLanguageComponent();\n        if (eclLanguageComponent) {\n            outputToObservable(eclLanguageComponent.languageClick).pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n                this.languageClick.emit(new EclSiteHeaderLanguageClickEvent());\n                this.sendResizeEventToChildComponents();\n            });\n\n            outputToObservable(eclLanguageComponent.languageSelected).pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n                this.languageCode.set(evt.language?.code);\n            });\n        }\n\n        if (eclLanguageComponent) {\n            this.languageCode.set(eclLanguageComponent?.languageCode);\n        }\n\n        const eclMenuComponent = this.eclMenuComponent();\n        if (eclMenuComponent) {\n            outputToObservable(eclMenuComponent.openHamburgerMenu).pipe(takeUntil(this.destroy$)).subscribe(() => {\n                this.positionMenu();\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * This method is used, when current language is not present for our available logo collection.\n     * In this case, a default logo is returned.\n     */\n    get partOfLogoName(): string {\n        return logoLanguageCode(this.languageCode());\n    }\n\n    onECLogoClick(evt: MouseEvent): void {\n        const event = new EclSiteHeaderLogoClickEvent();\n        this.logoClick.emit(event);\n        if (event.defaultPrevented) {\n            evt.preventDefault();\n        }\n    }\n\n    hasCustomLink(): boolean {\n        return !!this.eclHeaderLink();\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            this.isRtl.set(rtlState);\n        });\n    }\n\n    /**\n     * Some child components need position and size to be set according to the parent site-header. So we share some site-header's measurements\n     *  via the 'eclAreaDataService'.\n     */\n    private sendResizeEventToChildComponents(): void {\n        const topContainerElement = this.topContainerElement();\n        if (topContainerElement.nativeElement.getBoundingClientRect().width !== undefined) {\n            const topContainerRect = topContainerElement.nativeElement.getBoundingClientRect();\n            const siteHeaderAreaChangeEvent = new EclAreaChangeEvent(\n                topContainerRect.width,\n                topContainerRect.left,\n                topContainerRect.right);\n\n            this.eclAreaDataService.publishEvent(siteHeaderAreaChangeEvent);\n        }\n    }\n\n    private subscribeToMegaMenuEvents(): void {\n        this.eclHeaderMenuComunicationService.isMobileObjectOpen$.pipe(takeUntil(this.destroy$)).subscribe(isExpanded => {\n            if (this.isMobileBreakpoint) {\n                this.isEclMegaMenuStart.set(isExpanded);\n                this.isEclMegaMenuOpen.set(isExpanded);\n            }\n            if (isExpanded) {\n                const bottomSpaceY = this.el.nativeElement.getBoundingClientRect().bottom;\n                this.eclMegaMenuComponent().positionMenuOverlay(bottomSpaceY);\n            }\n        });\n\n        this.eclHeaderMenuComunicationService.isObjectExpanded$.pipe(takeUntil(this.destroy$)).subscribe(isExpanded => {\n            if (this.isMobileBreakpoint) {\n                if (isExpanded) {\n                    this.onMegaMenuItemExpandMobile();\n                } else {\n                    this.onMegaMenuItemCollapseMobile();\n                }\n            } else {\n                this.isEclMegaMenuOpen.set(isExpanded);\n                if (isExpanded) {\n                    const bottomSpaceY = this.el.nativeElement.getBoundingClientRect().bottom;\n                    this.eclMegaMenuComponent().positionMenuOverlay(bottomSpaceY);\n                }\n            }\n        });\n    }\n\n    private onMegaMenuItemExpandMobile(): void {\n        this.isEclMegaMenuStart.set(false);\n        const eclNotificationComponent = this.eclNotificationComponent();\n        if (eclNotificationComponent) {\n            eclNotificationComponent.onHide();\n        }\n        const bannerHeader = this.bannerHeader();\n        if (bannerHeader) {\n            bannerHeader.nativeElement.style.display = 'none';\n        }\n        const bottomSpaceY = this.siteHeaderHeader().nativeElement.getBoundingClientRect().bottom;\n        this.eclMegaMenuComponent().positionMenuOverlay(bottomSpaceY);\n    }\n\n    private onMegaMenuItemCollapseMobile(): void {\n        this.isEclMegaMenuStart.set(true);\n        const eclNotificationComponent = this.eclNotificationComponent();\n        if (eclNotificationComponent) {\n            eclNotificationComponent.onShow();\n        }\n        const bannerHeader = this.bannerHeader();\n        if (bannerHeader) {\n            bannerHeader.nativeElement.style.display = '';\n        }\n        const bottomSpaceY = this.el.nativeElement.getBoundingClientRect().bottom;\n        this.eclMegaMenuComponent().positionMenuOverlay(bottomSpaceY);\n    }\n\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe(['(max-width: 996px)'])\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((result) => {\n                this.isMobileBreakpoint = result.matches;\n            });\n    }\n\n    private positionMenu(): void {\n        const bottomSpaceY = this.siteHeaderHeader().nativeElement.getBoundingClientRect().bottom;\n        this.eclMenuComponent().positionMenuOverlay(bottomSpaceY);\n    }\n\n    private handleLanguageChangeState(): void {\n        this.i18nService.getState().pipe(takeUntil(this.destroy$)).subscribe((lang) => {\n            this.languageCode.set(lang.activeLang);\n            const eclLanguageComponent = this.eclLanguageComponent();\n            if (eclLanguageComponent) {\n                eclLanguageComponent.languageCode = lang.activeLang;\n            }\n        });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n            :host {\n                display: block;\n            }\n        \n",
             "jsdoctags": [
                 {
-                    "pos": 1492,
-                    "end": 1968,
+                    "pos": 1487,
+                    "end": 1963,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -79740,7 +79336,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 104,
+                "line": 105,
                 "rawdescription": "\n"
             },
             "extends": [
@@ -79757,7 +79353,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 66,
+                        "line": 95,
                         "rawdescription": "\n\nAdds specific classes to the main element. Depending , logo size, menu and menu status, rtl status.\n",
                         "description": "<p>Adds specific classes to the main element. Depending , logo size, menu and menu status, rtl status.</p>\n"
                     }
@@ -79768,7 +79364,7 @@
                         "name": "partOfLogoName",
                         "type": "string",
                         "returnType": "string",
-                        "line": 181,
+                        "line": 182,
                         "rawdescription": "\n\nThis method is used, when current language is not present for our available logo collection.\nIn this case, a default logo is returned.\n",
                         "description": "<p>This method is used, when current language is not present for our available logo collection.\nIn this case, a default logo is returned.</p>\n"
                     }
@@ -79808,14 +79404,15 @@
                     }
                 ]
             },
-            "templateData": "<div class=\"ecl-site-header__background\">\n    <div class=\"ecl-site-header__header\" #siteHeaderHeader>\n        <div class=\"ecl-site-header__container ecl-container\">\n            <div #topContainer class=\"ecl-site-header__top\">\n                @if(hasCustomLink()) {\n                    <ng-content select=\"[eclSiteHeaderLink]\"></ng-content>\n                } @else {\n                <a eclLink variant=\"standalone\" class=\"ecl-site-header__logo-link\"\n                    href=\"https://commission.europa.eu/index_{{ languageCode }}\" (click)=\"onECLogoClick($event)\"\n                    [attr.aria-label]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\"\n                    style=\"display: flex; align-items: center; position: relative;\">\n                    <ng-content select=\"[eclSiteHeaderEnvironment]\" media=\"(min-width: 1140px)\"></ng-content>\n\n                    @if (eclThemeService.isEC$ | async) {\n                        <picture eclSiteHeaderPicture\n                                 [attr.title]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n                            <source\n                                srcset=\"./assets/images/ecl/logo/ec/positive/logo-ec--{{ partOfLogoName }}.svg\"\n                                media=\"(min-width: 415px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize()}}\"\n                                 src=\"./assets/images/ecl/logo/ec/logo-ec--mute.svg\"\n                                 [attr.alt]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\" />\n                        </picture>\n                    }\n                    @if (eclThemeService.isEU$ | async) {\n                        <picture eclSiteHeaderPicture\n                                 [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n                            <source\n                                srcset=\"./assets/images/ecl/logo/eu/standard-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n                                media=\"(min-width: 415px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize()}}\"\n                                 src=\"./assets/images/ecl/logo/eu/condensed-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n                                 alt=\"European Union\" />\n                        </picture>\n                    }\n                </a>\n                }\n                <ng-content select=\"ecl-site-header-action\"></ng-content>\n            </div>\n        </div>\n    </div>\n    <ng-content select=\"ecl-site-header-notification\"></ng-content>\n</div>\n\n\n<ng-content select=\"ecl-site-header-banner-top\"></ng-content>\n@if (siteName) {\n    <div class=\"ecl-site-header__banner\" #bannerHeader [class.ecl-site-header__site-name--mobile-only]=\"isSiteNameMobileOnly()\">\n        <div class=\"ecl-container\">\n            <div class=\"ecl-site-header__site-name\">{{ siteName }}</div>\n            <ng-content select=\"[eclSiteHeaderCta]\"></ng-content>\n        </div>\n    </div>\n}\n\n<ng-content select=\"ecl-menu\"></ng-content>\n<ng-content select=\"[eclMegaMenu]\"></ng-content>\n"
+            "templateData": "<div class=\"ecl-site-header__background\">\n    <div class=\"ecl-site-header__header\" #siteHeaderHeader>\n        <div class=\"ecl-site-header__container ecl-container\">\n            <div #topContainer class=\"ecl-site-header__top\">\n                @if(hasCustomLink()) {\n                    <ng-content select=\"[eclSiteHeaderLink]\"></ng-content>\n                } @else {\n                <a eclLink variant=\"standalone\" class=\"ecl-site-header__logo-link\"\n                    href=\"https://commission.europa.eu/index_{{ languageCode() }}\" (click)=\"onECLogoClick($event)\"\n                    [attr.aria-label]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\"\n                    style=\"display: flex; align-items: center; position: relative;\">\n                    <ng-content select=\"[eclSiteHeaderEnvironment]\" media=\"(min-width: 1140px)\"></ng-content>\n\n                    @if (eclThemeService.isEC$ | async) {\n                        <picture eclSiteHeaderPicture\n                                 [attr.title]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n                            <source\n                                srcset=\"./assets/images/ecl/logo/ec/positive/logo-ec--{{ partOfLogoName }}.svg\"\n                                media=\"(min-width: 415px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize()}}\"\n                                 src=\"./assets/images/ecl/logo/ec/logo-ec--mute.svg\"\n                                 [attr.alt]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\" />\n                        </picture>\n                    }\n                    @if (eclThemeService.isEU$ | async) {\n                        <picture eclSiteHeaderPicture\n                                 [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n                            <source\n                                srcset=\"./assets/images/ecl/logo/eu/standard-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n                                media=\"(min-width: 415px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize()}}\"\n                                 src=\"./assets/images/ecl/logo/eu/condensed-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n                                 alt=\"European Union\" />\n                        </picture>\n                    }\n                </a>\n                }\n                <ng-content select=\"ecl-site-header-action\"></ng-content>\n            </div>\n        </div>\n    </div>\n    <ng-content select=\"ecl-site-header-notification\"></ng-content>\n</div>\n\n\n<ng-content select=\"ecl-site-header-banner-top\"></ng-content>\n@if (siteName()) {\n    <div class=\"ecl-site-header__banner\" #bannerHeader [class.ecl-site-header__site-name--mobile-only]=\"isSiteNameMobileOnly()\">\n        <div class=\"ecl-container\">\n            <div class=\"ecl-site-header__site-name\">{{ siteName() }}</div>\n            <ng-content select=\"[eclSiteHeaderCta]\"></ng-content>\n        </div>\n    </div>\n}\n\n<ng-content select=\"ecl-menu\"></ng-content>\n<ng-content select=\"[eclMegaMenu]\"></ng-content>\n"
         },
         {
             "name": "EclSiteHeaderCustomActionComponent",
-            "id": "component-EclSiteHeaderCustomActionComponent-b4ed191cf90ee2acaa621d4785e529e00d3537a7fd8da9b24127d8946f2df2746fe5d20ebc2e86debd49306410e0cfe627d23aec4bd6347fb79bd4aabe8f7bdb",
+            "id": "component-EclSiteHeaderCustomActionComponent-87ce749e772227cbcad8a64d96570607f2ba12b67a783fa5b77b68bbc5363d0496901b692d389514e5232714c94be442ff669021f3eb2933e3ea7a9a16a1fc95",
             "file": "packages/ecl/components/ecl-site-header/custom-action/ecl-site-header-custom-action.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -79883,44 +79480,6 @@
             ],
             "outputsClass": [],
             "propertiesClass": [
-                {
-                    "name": "class",
-                    "coverageIgnore": false,
-                    "defaultValue": "'ecl-site-header__custom-action'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 26,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                },
-                {
-                    "name": "eclSiteHeaderCustomActionLink",
-                    "coverageIgnore": false,
-                    "defaultValue": "contentChild(EclSiteHeaderCustomActionLinkDirective)",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 28,
-                    "rawdescription": "\n",
-                    "modifierKind": [
-                        148
-                    ]
-                },
                 {
                     "name": "isOverlayExpanded",
                     "coverageIgnore": false,
@@ -79931,23 +79490,10 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Used to expand/collapse the dropdown, if any.</p>\n",
-                    "line": 32,
-                    "rawdescription": "\n\nUsed to expand/collapse the dropdown, if any.\n"
-                },
-                {
-                    "name": "title",
-                    "coverageIgnore": false,
-                    "defaultValue": "contentChild(EclSiteHeaderCustomActionTitleDirective)",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 27,
-                    "rawdescription": "\n",
+                    "line": 35,
+                    "rawdescription": "\n\nUsed to expand/collapse the dropdown, if any.\n",
                     "modifierKind": [
-                        148
+                        124
                     ]
                 },
                 {
@@ -79959,8 +79505,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 33,
-                    "rawdescription": "\n"
+                    "line": 36,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        124
+                    ]
                 }
             ],
             "methodsClass": [
@@ -79971,7 +79520,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 36,
+                    "line": 42,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -79984,7 +79533,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 51,
+                    "line": 57,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -79997,20 +79546,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 69,
+                    "line": 74,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nClose the overlay, when clicking outside of it.\n",
-                    "description": "<p>Close the overlay, when clicking outside of it.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'eclClickOutside'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "description": "<p>Close the overlay, when clicking outside of it.</p>\n"
                 },
                 {
                     "name": "onCustomActionOverlayClose",
@@ -80019,7 +79559,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 59,
+                    "line": 65,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nClose the overlay.\n",
@@ -80032,20 +79572,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 77,
+                    "line": 81,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nClose the overlay with ESC key.\n",
-                    "description": "<p>Close the overlay with ESC key.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'document:keydown.escape'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "description": "<p>Close the overlay with ESC key.</p>\n"
                 },
                 {
                     "name": "getCssClasses",
@@ -80089,45 +79620,8 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "class",
-                    "defaultValue": "'ecl-site-header__custom-action'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 26,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
-            "hostListeners": [
-                {
-                    "coverageIgnore": false,
-                    "name": "document:keydown.escape",
-                    "args": [],
-                    "argsDecorator": [],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nClose the overlay with ESC key.\n",
-                    "description": "<p>Close the overlay with ESC key.</p>\n",
-                    "line": 77
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "eclClickOutside",
-                    "args": [],
-                    "argsDecorator": [],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nClose the overlay, when clicking outside of it.\n",
-                    "description": "<p>Close the overlay, when clicking outside of it.</p>\n",
-                    "line": 69
-                }
-            ],
+            "hostBindings": [],
+            "hostListeners": [],
             "standalone": false,
             "imports": [
                 {
@@ -80144,14 +79638,14 @@
             "description": "<p>This components gives opportunity for user to add a custom action. It will appear at first place, before log-in and language\n and search (if any of these exist). Adds specific styling and functionality. Opens a dropdown with some more content.</p>\n",
             "rawdescription": "\n\nThis components gives opportunity for user to add a custom action. It will appear at first place, before log-in and language\n and search (if any of these exist). Adds specific styling and functionality. Opens a dropdown with some more content.\n",
             "type": "component",
-            "sourceCode": "import { Component, HostBinding, HostListener, AfterContentInit, OnDestroy, contentChild } from '@angular/core';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { ECLBaseDirective, ECLClickOutsideDirective } from '@eui/ecl/core';\nimport { EclSiteHeaderCustomActionLinkDirective, EclSiteHeaderCustomActionTitleDirective } from './ecl-site-header-custom-action.directive';\nimport { takeUntil, Subject } from 'rxjs';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n/**\n * This components gives opportunity for user to add a custom action. It will appear at first place, before log-in and language\n *  and search (if any of these exist). Adds specific styling and functionality. Opens a dropdown with some more content.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[eclSiteHeaderCustomAction]',\n    templateUrl: './ecl-site-header-custom-action.component.html',\n    imports: [A11yModule, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON],\n    hostDirectives: [\n        {\n            directive: ECLClickOutsideDirective,\n            outputs: ['eclClickOutside'],\n        },\n    ],\n})\nexport class EclSiteHeaderCustomActionComponent extends ECLBaseDirective implements AfterContentInit, OnDestroy {\n    @HostBinding('class') class = 'ecl-site-header__custom-action';\n    readonly title = contentChild(EclSiteHeaderCustomActionTitleDirective);\n    readonly eclSiteHeaderCustomActionLink = contentChild(EclSiteHeaderCustomActionLinkDirective);\n    /**\n     * Used to expand/collapse the dropdown, if any.\n     */\n    isOverlayExpanded = false;\n    titleId: string;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n\n    ngAfterContentInit(): void {\n        const title = this.title();\n        if (title) {\n            this.titleId = title.id;\n        }\n\n        // Subscribe to link output, which toggles the dropdown.\n        const eclSiteHeaderCustomActionLink = this.eclSiteHeaderCustomActionLink();\n        if (eclSiteHeaderCustomActionLink) {\n            eclSiteHeaderCustomActionLink.customActionOverlayToggle.pipe(takeUntil(this.destroy$)).subscribe((isExpanded) => {\n                this.isOverlayExpanded = isExpanded;\n            })\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * Close the overlay.\n     */\n    onCustomActionOverlayClose(): void {\n        this.isOverlayExpanded = false;\n        const eclSiteHeaderCustomActionLink = this.eclSiteHeaderCustomActionLink();\n        if (!eclSiteHeaderCustomActionLink.hasLink()) eclSiteHeaderCustomActionLink.isOverlayExpanded = false;\n    }\n\n    /**\n     * Close the overlay, when clicking outside of it.\n     */\n    @HostListener('eclClickOutside')\n    onClickOutsideHandler(): void {\n        this.onCustomActionOverlayClose();\n    }\n\n    /**\n     * Close the overlay with ESC key.\n     */\n    @HostListener('document:keydown.escape')\n    onEscapeKeydownHandler(): void {\n        this.onCustomActionOverlayClose();\n    }\n}\n",
+            "sourceCode": "import { Component, AfterContentInit, OnDestroy, contentChild } from '@angular/core';\nimport { outputToObservable } from '@angular/core/rxjs-interop';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { ECLBaseDirective, ECLClickOutsideDirective } from '@eui/ecl/core';\nimport { EclSiteHeaderCustomActionLinkDirective, EclSiteHeaderCustomActionTitleDirective } from './ecl-site-header-custom-action.directive';\nimport { takeUntil, Subject } from 'rxjs';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n/**\n * This components gives opportunity for user to add a custom action. It will appear at first place, before log-in and language\n *  and search (if any of these exist). Adds specific styling and functionality. Opens a dropdown with some more content.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[eclSiteHeaderCustomAction]',\n    templateUrl: './ecl-site-header-custom-action.component.html',\n    imports: [A11yModule, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON],\n    hostDirectives: [\n        {\n            directive: ECLClickOutsideDirective,\n            outputs: ['eclClickOutside'],\n        },\n    ],\n    host: {\n        class: 'ecl-site-header__custom-action',\n        '(eclClickOutside)': 'onClickOutsideHandler()',\n        '(document:keydown.escape)': 'onEscapeKeydownHandler()',\n    },\n})\nexport class EclSiteHeaderCustomActionComponent extends ECLBaseDirective implements AfterContentInit, OnDestroy {\n    /**\n     * Used to expand/collapse the dropdown, if any.\n     */\n    protected isOverlayExpanded = false;\n    protected titleId: string;\n\n    private readonly title = contentChild(EclSiteHeaderCustomActionTitleDirective);\n    private readonly eclSiteHeaderCustomActionLink = contentChild(EclSiteHeaderCustomActionLinkDirective);\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n\n    ngAfterContentInit(): void {\n        const title = this.title();\n        if (title) {\n            this.titleId = title.id();\n        }\n\n        // Subscribe to link output, which toggles the dropdown.\n        const eclSiteHeaderCustomActionLink = this.eclSiteHeaderCustomActionLink();\n        if (eclSiteHeaderCustomActionLink) {\n            outputToObservable(eclSiteHeaderCustomActionLink.customActionOverlayToggle).pipe(takeUntil(this.destroy$)).subscribe((isExpanded) => {\n                this.isOverlayExpanded = isExpanded;\n            })\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * Close the overlay.\n     */\n    onCustomActionOverlayClose(): void {\n        this.isOverlayExpanded = false;\n        const eclSiteHeaderCustomActionLink = this.eclSiteHeaderCustomActionLink();\n        if (!eclSiteHeaderCustomActionLink.hasLink()) eclSiteHeaderCustomActionLink.isOverlayExpanded = false;\n    }\n\n    /**\n     * Close the overlay, when clicking outside of it.\n     */\n    onClickOutsideHandler(): void {\n        this.onCustomActionOverlayClose();\n    }\n\n    /**\n     * Close the overlay with ESC key.\n     */\n    onEscapeKeydownHandler(): void {\n        this.onCustomActionOverlayClose();\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 548,
-                    "end": 805,
+                    "pos": 586,
+                    "end": 843,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -80204,10 +79698,11 @@
         },
         {
             "name": "EclSiteHeaderEnvironmentComponent",
-            "id": "component-EclSiteHeaderEnvironmentComponent-72f5efc0bb0cd86bd3dc746b097b0a5f05105521023825fe561d0cfe77205a72308a2ed2faf8fedd3e93fc836db509c6ef1226a448b93e8661ab7af520cc2c84",
+            "id": "component-EclSiteHeaderEnvironmentComponent-2d708b6d2a3c37360397ec55406c481382ca2145bd93b525af639e03ff7a56e67eb2eb9b4ef52aa202bb9f3b316ce0c2ce844b37a28ee14444aeca3afeceb0d8",
             "file": "packages/ecl/components/ecl-site-header/ecl-site-header-environment/ecl-site-header-environment.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -80276,7 +79771,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 62,
+                    "line": 64,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -80324,34 +79819,21 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 40,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [],
             "description": "<p>Custom component, that shows the current environment of the application, for example &#39;develop&#39;, &#39;acceptance&#39;, etc.\nAdds some custom styling, so that the text will appear over the EU/EC logo.</p>\n",
             "rawdescription": "\n\nCustom component, that shows the current environment of the application, for example 'develop', 'acceptance', etc.\nAdds some custom styling, so that the text will appear over the EU/EC logo.\n",
             "type": "component",
-            "sourceCode": "import { BreakpointObserver } from '@angular/cdk/layout';\nimport { Component, ElementRef, HostBinding, OnDestroy, Renderer2, afterNextRender, inject } from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Custom component, that shows the current environment of the application, for example 'develop', 'acceptance', etc.\n * Adds some custom styling, so that the text will appear over the EU/EC logo.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[eclSiteHeaderEnvironment]',\n    template: '<ng-content></ng-content>',\n    styles: [\n        `\n            :host {\n                position: absolute;\n                width: 100%;\n                font-size: 1.3rem;\n                padding: 0.3rem;\n                opacity: 0.6;\n                text-align: center;\n                transform: rotate(-10deg);\n            }\n            @media print {\n                :host {\n                    display: none;\n                }\n            }\n        `,\n    ],\n})\nexport class EclSiteHeaderEnvironmentComponent extends ECLBaseDirective implements OnDestroy {\n    private el = inject(ElementRef);\n    private cdkBreakpointObserver = inject(BreakpointObserver);\n    private renderer = inject(Renderer2);\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses(''), 'ecl-u-type-xl ecl-u-bg-error ecl-u-type-color-white'].join(' ');\n    }\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private isMobile = false;\n    private parentEl: HTMLElement;\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            const el: HTMLElement = this.el.nativeElement;\n            this.parentEl = this.renderer.parentNode(el);\n\n            if (this.parentEl) {\n                this.renderer.setStyle(this.parentEl, 'display', 'flex');\n                this.renderer.setStyle(this.parentEl, 'alignItems', 'center');\n                this.renderer.setStyle(this.parentEl, 'position', 'relative');\n            }\n            this.observeBreakpointChanges();\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe(['(max-width: 480px)'])\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((result) => {\n                this.isMobile = result.matches;\n                if (this.isMobile) {\n                    this.manageMobile();\n                } else {\n                    this.manageDesktop();\n                }\n            });\n    }\n\n    private manageMobile(): void {\n        if (this.parentEl) {\n            this.renderer.setStyle(this.parentEl, 'display', 'block');\n            this.renderer.setStyle(this.el.nativeElement, 'width', 'unset');\n        }\n    }\n\n    private manageDesktop(): void {\n        if (this.parentEl) {\n            this.renderer.setStyle(this.parentEl, 'display', 'flex');\n            this.renderer.setStyle(this.el.nativeElement, 'width', '100%');\n        }\n    }\n}\n",
+            "sourceCode": "import { BreakpointObserver } from '@angular/cdk/layout';\nimport { Component, ElementRef, OnDestroy, Renderer2, afterNextRender, inject } from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Custom component, that shows the current environment of the application, for example 'develop', 'acceptance', etc.\n * Adds some custom styling, so that the text will appear over the EU/EC logo.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[eclSiteHeaderEnvironment]',\n    template: '<ng-content></ng-content>',\n    styles: [\n        `\n            :host {\n                position: absolute;\n                width: 100%;\n                font-size: 1.3rem;\n                padding: 0.3rem;\n                opacity: 0.6;\n                text-align: center;\n                transform: rotate(-10deg);\n            }\n            @media print {\n                :host {\n                    display: none;\n                }\n            }\n        `,\n    ],\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSiteHeaderEnvironmentComponent extends ECLBaseDirective implements OnDestroy {\n    private el = inject(ElementRef);\n    private cdkBreakpointObserver = inject(BreakpointObserver);\n    private renderer = inject(Renderer2);\n\n    get cssClasses(): string {\n        return [super.getCssClasses(''), 'ecl-u-type-xl ecl-u-bg-error ecl-u-type-color-white'].join(' ');\n    }\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private isMobile = false;\n    private parentEl: HTMLElement;\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            const el: HTMLElement = this.el.nativeElement;\n            this.parentEl = this.renderer.parentNode(el);\n\n            if (this.parentEl) {\n                this.renderer.setStyle(this.parentEl, 'display', 'flex');\n                this.renderer.setStyle(this.parentEl, 'alignItems', 'center');\n                this.renderer.setStyle(this.parentEl, 'position', 'relative');\n            }\n            this.observeBreakpointChanges();\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe(['(max-width: 480px)'])\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((result) => {\n                this.isMobile = result.matches;\n                if (this.isMobile) {\n                    this.manageMobile();\n                } else {\n                    this.manageDesktop();\n                }\n            });\n    }\n\n    private manageMobile(): void {\n        if (this.parentEl) {\n            this.renderer.setStyle(this.parentEl, 'display', 'block');\n            this.renderer.setStyle(this.el.nativeElement, 'width', 'unset');\n        }\n    }\n\n    private manageDesktop(): void {\n        if (this.parentEl) {\n            this.renderer.setStyle(this.parentEl, 'display', 'flex');\n            this.renderer.setStyle(this.el.nativeElement, 'width', '100%');\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n            :host {\n                position: absolute;\n                width: 100%;\n                font-size: 1.3rem;\n                padding: 0.3rem;\n                opacity: 0.6;\n                text-align: center;\n                transform: rotate(-10deg);\n            }\n            @media print {\n                :host {\n                    display: none;\n                }\n            }\n        \n",
             "jsdoctags": [
                 {
-                    "pos": 300,
-                    "end": 504,
+                    "pos": 287,
+                    "end": 491,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -80366,7 +79848,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 45,
+                "line": 47,
                 "rawdescription": "\n"
             },
             "extends": [
@@ -80382,7 +79864,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 40,
+                        "line": 42,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -80404,7 +79886,7 @@
         },
         {
             "name": "EclSiteHeaderLanguageComponent",
-            "id": "component-EclSiteHeaderLanguageComponent-6d5a8dabfc452efabf51524b958206330b0e8d969c92a72ff623dbe1b45bee987ed4a81174ab72b108458c5b8639f088adba2c57c6cb65b7ccf06266d617d7e0",
+            "id": "component-EclSiteHeaderLanguageComponent-2e479eb60d3b1d2e3d78c1af995ee1779283733b017720cbf199a9b82ab84745698f292d8d5f3120eebb4cc0f5990485d747c8bd0e677f682620dc886a04ebe1",
             "file": "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -80480,24 +79962,34 @@
                 {
                     "name": "languageClick",
                     "coverageIgnore": false,
-                    "defaultValue": "new EventEmitter<EclSiteHeaderLanguageClickEvent>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nThie event is emited, when language link, showing the current language is clicked.\n",
+                    "type": "EclSiteHeaderLanguageClickEvent",
+                    "indexKey": "",
+                    "optional": false,
                     "description": "<p>Thie event is emited, when language link, showing the current language is clicked.</p>\n",
-                    "line": 62,
-                    "type": "EventEmitter"
+                    "line": 57,
+                    "rawdescription": "\n\nThie event is emited, when language link, showing the current language is clicked.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
                     "name": "languageSelected",
                     "coverageIgnore": false,
-                    "defaultValue": "new EventEmitter<EclSiteHeaderLanguageSelectedEvent>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nThie event is emited, when user selects a new language from the dropdown.\n",
+                    "type": "EclSiteHeaderLanguageSelectedEvent",
+                    "indexKey": "",
+                    "optional": false,
                     "description": "<p>Thie event is emited, when user selects a new language from the dropdown.</p>\n",
-                    "line": 66,
-                    "type": "EventEmitter"
+                    "line": 61,
+                    "rawdescription": "\n\nThie event is emited, when user selects a new language from the dropdown.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 }
             ],
             "propertiesClass": [
@@ -80511,10 +80003,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 56,
+                    "line": 69,
                     "rawdescription": "\n",
                     "modifierKind": [
-                        124
+                        124,
+                        148
                     ]
                 },
                 {
@@ -80527,10 +80020,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 55,
+                    "line": 68,
                     "rawdescription": "\n",
                     "modifierKind": [
-                        124
+                        124,
+                        148
                     ]
                 },
                 {
@@ -80543,8 +80037,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 100,
-                    "rawdescription": "\n"
+                    "line": 103,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "euLanguages",
@@ -80556,8 +80053,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Array of EU languages, that can be selected for the current site.</p>\n",
-                    "line": 95,
-                    "rawdescription": "\n\nArray of EU languages, that can be selected for the current site.\n"
+                    "line": 98,
+                    "rawdescription": "\n\nArray of EU languages, that can be selected for the current site.\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "i18nService",
@@ -80569,10 +80069,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 57,
+                    "line": 70,
                     "rawdescription": "\n",
                     "modifierKind": [
-                        124
+                        124,
+                        148
                     ]
                 },
                 {
@@ -80584,8 +80085,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>This property is used for dropdown positioning on the screen.</p>\n",
-                    "line": 84,
-                    "rawdescription": "\n\nThis property is used for dropdown positioning on the screen.\n"
+                    "line": 88,
+                    "rawdescription": "\n\nThis property is used for dropdown positioning on the screen.\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "isLanguagesDropdownVisible",
@@ -80597,8 +80101,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 68,
-                    "rawdescription": "\n"
+                    "line": 72,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "isPushLeft",
@@ -80609,8 +80116,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>This property is used for dropdown positioning on the screen.</p>\n",
-                    "line": 76,
-                    "rawdescription": "\n\nThis property is used for dropdown positioning on the screen.\n"
+                    "line": 80,
+                    "rawdescription": "\n\nThis property is used for dropdown positioning on the screen.\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "isPushRight",
@@ -80621,8 +80131,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>This property is used for dropdown positioning on the screen.</p>\n",
-                    "line": 72,
-                    "rawdescription": "\n\nThis property is used for dropdown positioning on the screen.\n"
+                    "line": 76,
+                    "rawdescription": "\n\nThis property is used for dropdown positioning on the screen.\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "isStack",
@@ -80633,8 +80146,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>This property is used for dropdown positioning on the screen.</p>\n",
-                    "line": 80,
-                    "rawdescription": "\n\nThis property is used for dropdown positioning on the screen.\n"
+                    "line": 84,
+                    "rawdescription": "\n\nThis property is used for dropdown positioning on the screen.\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "languageArrowPosition",
@@ -80645,8 +80161,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>This property is used for dropdown positioning on the screen.</p>\n",
-                    "line": 88,
-                    "rawdescription": "\n\nThis property is used for dropdown positioning on the screen.\n"
+                    "line": 92,
+                    "rawdescription": "\n\nThis property is used for dropdown positioning on the screen.\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "languageCode",
@@ -80657,9 +80176,9 @@
                     "type": "string",
                     "indexKey": "",
                     "optional": false,
-                    "description": "",
-                    "line": 89,
-                    "rawdescription": "\n"
+                    "description": "<p>Current language code. Read and written by the parent <code>ecl-site-header</code>.</p>\n",
+                    "line": 66,
+                    "rawdescription": "\n\nCurrent language code. Read and written by the parent `ecl-site-header`.\n"
                 },
                 {
                     "name": "leftPosition",
@@ -80670,8 +80189,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 91,
-                    "rawdescription": "\n"
+                    "line": 94,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "nonEuColumnsCount",
@@ -80683,8 +80205,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 101,
-                    "rawdescription": "\n"
+                    "line": 104,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "nonEuLanguages",
@@ -80696,8 +80221,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Array of non-EU languages, that can be selected for the current site.</p>\n",
-                    "line": 99,
-                    "rawdescription": "\n\nArray of non-EU languages, that can be selected for the current site.\n"
+                    "line": 102,
+                    "rawdescription": "\n\nArray of non-EU languages, that can be selected for the current site.\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "rightPosition",
@@ -80708,8 +80236,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 90,
-                    "rawdescription": "\n"
+                    "line": 93,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        124
+                    ]
                 }
             ],
             "methodsClass": [
@@ -80720,7 +80251,7 @@
                     "optional": false,
                     "returnType": "string",
                     "typeParameters": [],
-                    "line": 145,
+                    "line": 148,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -80736,7 +80267,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 196,
+                    "line": 199,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -80749,7 +80280,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 135,
+                    "line": 138,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "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",
@@ -80762,7 +80293,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 140,
+                    "line": 143,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -80775,7 +80306,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 127,
+                    "line": 130,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -80788,7 +80319,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 185,
+                    "line": 188,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nClose the dropdown, when clicking outside of the component.\n",
@@ -80804,7 +80335,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 192,
+                    "line": 195,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nClose the dropdown, when pressing ESC key.\n",
@@ -80829,7 +80360,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 153,
+                    "line": 156,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nToggle the language dropdown when clicking the link, showing the current language.\n",
@@ -80840,8 +80371,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5258,
-                                "end": 5261,
+                                "pos": 5462,
+                                "end": 5465,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -80854,8 +80385,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 5252,
-                                "end": 5257,
+                                "pos": 5456,
+                                "end": 5461,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -80882,7 +80413,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 171,
+                    "line": 174,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -80920,7 +80451,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 175,
+                    "line": 178,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -81011,14 +80542,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    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",
+            "sourceCode": "import {\n    AfterViewInit,\n    Component,\n    DOCUMENT,\n    ElementRef,\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    /**\n     * Thie event is emited, when language link, showing the current language is clicked.\n     */\n    readonly languageClick = output<EclSiteHeaderLanguageClickEvent>();\n    /**\n     * Thie event is emited, when user selects a new language from the dropdown.\n     */\n    readonly languageSelected = output<EclSiteHeaderLanguageSelectedEvent>();\n\n    /**\n     * Current language code. Read and written by the parent `ecl-site-header`.\n     */\n    languageCode = 'en';\n\n    protected readonly eclThemeService = inject(EclThemeService);\n    protected readonly config = inject<GlobalConfig>(GLOBAL_CONFIG_TOKEN, { optional: true });\n    protected readonly i18nService = inject(I18nService);\n\n    protected isLanguagesDropdownVisible = false;\n    /**\n     * This property is used for dropdown positioning on the screen.\n     */\n    protected isPushRight: boolean;\n    /**\n     * This property is used for dropdown positioning on the screen.\n     */\n    protected isPushLeft: boolean;\n    /**\n     * This property is used for dropdown positioning on the screen.\n     */\n    protected isStack: boolean;\n    /**\n     * This property is used for dropdown positioning on the screen.\n     */\n    protected isFull: boolean;\n    /**\n     * This property is used for dropdown positioning on the screen.\n     */\n    protected languageArrowPosition: string;\n    protected rightPosition: number;\n    protected leftPosition: number;\n    /**\n     * Array of EU languages, that can be selected for the current site.\n     */\n    protected euLanguages: EuiLanguage[] = [];\n    /**\n     * Array of non-EU languages, that can be selected for the current site.\n     */\n    protected nonEuLanguages: EuiLanguage[] = [];\n    protected euColumnsCount = 1;\n    protected 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.emit(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.emit(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": 1027,
-                    "end": 1185,
+                    "pos": 1009,
+                    "end": 1167,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -81042,7 +80573,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 123,
+                        "line": 126,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -81098,7 +80629,7 @@
         },
         {
             "name": "EclSiteHeaderLanguagePopoverComponent",
-            "id": "component-EclSiteHeaderLanguagePopoverComponent-e1d84a0bf4a937ce3e593bdd02f17dca9b853cc426819d4e57f144f50f918762e5340d2d90f1a0428c1e121c76d983d3378cbb1b91a0dd7b4a991de29be1315b",
+            "id": "component-EclSiteHeaderLanguagePopoverComponent-36ba031bec694db35e71160fb537f9fe7da45ab6d0e938b3e8565fb08453b67dfa4a4c3969ee3cc5d4b1e6cfc638d6cd08482daf3e91ec642fce11b71f4ba111",
             "file": "packages/ecl/components/ecl-site-header/language/ecl-site-header-language-popover.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -81126,7 +80657,7 @@
                     "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,
+                    "line": 50,
                     "rawdescription": "\n\nNumber of columns for eu languages. Calculated by the parent component 'ecl-site-header-language'.\n",
                     "modifierKind": [
                         148
@@ -81143,7 +80674,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 47,
+                    "line": 45,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -81160,7 +80691,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": 76,
+                    "line": 74,
                     "rawdescription": "\n\nProperty to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n",
                     "modifierKind": [
                         148
@@ -81177,7 +80708,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Property to show/hide the dialog.</p>\n",
-                    "line": 60,
+                    "line": 58,
                     "rawdescription": "\n\nProperty to show/hide the dialog.\n",
                     "modifierKind": [
                         148
@@ -81194,7 +80725,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": 68,
+                    "line": 66,
                     "rawdescription": "\n\nProperty to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n",
                     "modifierKind": [
                         148
@@ -81211,7 +80742,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": 62,
                     "rawdescription": "\n\nProperty to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n",
                     "modifierKind": [
                         148
@@ -81228,7 +80759,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": 72,
+                    "line": 70,
                     "rawdescription": "\n\nProperty to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n",
                     "modifierKind": [
                         148
@@ -81245,7 +80776,7 @@
                     "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,
+                    "line": 86,
                     "rawdescription": "\n\nProperty to position the arrow of the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n",
                     "modifierKind": [
                         148
@@ -81262,7 +80793,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Current language</p>\n",
-                    "line": 46,
+                    "line": 44,
                     "rawdescription": "\n\nCurrent language\n",
                     "modifierKind": [
                         148
@@ -81279,7 +80810,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": 84,
+                    "line": 82,
                     "rawdescription": "\n\nProperty to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n",
                     "modifierKind": [
                         148
@@ -81296,7 +80827,7 @@
                     "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": 56,
+                    "line": 54,
                     "rawdescription": "\n\nNumber of columns for non-eu languages. Calculated by the parent component 'ecl-site-header-language'.\n",
                     "modifierKind": [
                         148
@@ -81313,7 +80844,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 48,
+                    "line": 46,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -81330,7 +80861,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": 80,
+                    "line": 78,
                     "rawdescription": "\n\nProperty to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.\n",
                     "modifierKind": [
                         148
@@ -81391,7 +80922,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 90,
+                    "line": 88,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -81407,7 +80938,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 91,
+                    "line": 89,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -81426,10 +80957,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 37,
+                    "line": 91,
                     "rawdescription": "\n",
                     "modifierKind": [
-                        124
+                        124,
+                        148
                     ]
                 },
                 {
@@ -81441,9 +80973,12 @@
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
-                    "description": "",
-                    "line": 36,
-                    "rawdescription": "\n"
+                    "description": "<p>Host element reference. Read by the parent <code>ecl-site-header-language</code> for positioning.</p>\n",
+                    "line": 39,
+                    "rawdescription": "\n\nHost element reference. Read by the parent `ecl-site-header-language` for positioning.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 },
                 {
                     "name": "languageContent",
@@ -81455,9 +80990,10 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The div, that wraps all the languages.</p>\n",
-                    "line": 42,
+                    "line": 95,
                     "rawdescription": "\n\nThe div, that wraps all the languages.\n",
                     "modifierKind": [
+                        124,
                         148
                     ]
                 },
@@ -81470,8 +81006,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 93,
-                    "rawdescription": "\n"
+                    "line": 96,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        124
+                    ]
                 }
             ],
             "methodsClass": [
@@ -81482,7 +81021,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 136,
+                    "line": 140,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -81495,7 +81034,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 141,
+                    "line": 145,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -81525,7 +81064,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 145,
+                    "line": 149,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -81562,7 +81101,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 154,
+                    "line": 158,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet the max-height property of the component. It is calculated depending on the viewport.\n",
@@ -81631,7 +81170,7 @@
             "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, 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",
+            "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    /**\n     * Host element reference. Read by the parent `ecl-site-header-language` for positioning.\n     */\n    readonly el = inject(ElementRef);\n\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    protected readonly eclThemeService = inject(EclThemeService);\n    /**\n     * The div, that wraps all the languages.\n     */\n    protected readonly languageContent = viewChild<ElementRef>('languageContent');\n    protected languageContentMaxHeight: number;\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private readonly scrollDispatcher = inject(ScrollDispatcher);\n    private readonly 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": "",
@@ -81653,7 +81192,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 98,
+                "line": 102,
                 "rawdescription": "\n"
             },
             "extends": [
@@ -81669,7 +81208,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 113,
+                        "line": 117,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -81680,7 +81219,7 @@
                         "name": "display",
                         "type": "string",
                         "returnType": "string",
-                        "line": 124,
+                        "line": 128,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -81691,7 +81230,7 @@
                         "name": "isModal",
                         "type": "unknown",
                         "returnType": "boolean | undefined",
-                        "line": 128,
+                        "line": 132,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -81702,7 +81241,7 @@
                         "name": "isDropdownHidden",
                         "type": "unknown",
                         "returnType": "boolean | undefined",
-                        "line": 132,
+                        "line": 136,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -81747,7 +81286,7 @@
         },
         {
             "name": "EclSiteHeaderLoginComponent",
-            "id": "component-EclSiteHeaderLoginComponent-19cf290d806bdaee64ed7b5689860e5d3113d6c5ebbfad60be450af5436bbb1012751c4ad894f93127962cf02d3e5439962e464de02158c40d0e7663b76b451e",
+            "id": "component-EclSiteHeaderLoginComponent-2706438b1c588ce876cbe469775407fa471973a3bca35c4bf62268932e6ab52e4f6dcdfc1e6857d59ccabccc5fa41d32811d9eba411a74aadd0a257e7a8c72bf",
             "file": "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -81838,24 +81377,31 @@
             ],
             "outputsClass": [
                 {
-                    "name": "loginBoxToggle",
+                    "name": "login",
                     "coverageIgnore": false,
-                    "defaultValue": "new EventEmitter<EclSiteHeaderLoginBoxToggleEvent>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 44,
-                    "type": "EventEmitter"
+                    "type": "EclSiteHeaderLoginEvent",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 43,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
-                    "name": "login",
+                    "name": "loginBoxToggle",
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "EclSiteHeaderLoginEvent",
+                    "type": "EclSiteHeaderLoginBoxToggleEvent",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 43,
+                    "line": 44,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -81914,8 +81460,8 @@
                     "jsdoctags": [
                         {
                             "tagName": {
-                                "pos": 3907,
-                                "end": 3914,
+                                "pos": 3874,
+                                "end": 3881,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -82123,14 +81669,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, 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",
+            "sourceCode": "import { Component, DOCUMENT, ElementRef, OnChanges, OnDestroy, 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    readonly loginBoxToggle = output<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.emit(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.emit(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": 793,
-                    "end": 943,
+                    "pos": 771,
+                    "end": 921,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -82188,10 +81734,11 @@
         },
         {
             "name": "EclSiteHeaderNotificationComponent",
-            "id": "component-EclSiteHeaderNotificationComponent-b7b138dd5e07717062fada83981db270cdc143118a7427d29613c4ab47dfa1587f375cd415b114e6e2cef84f0c155c31357b60ccc5e00cea20431f4caec0a914",
+            "id": "component-EclSiteHeaderNotificationComponent-655daf5c9d8fdd3df4c819ea9e6ec6529b373e7b4da867f34074f2390dc98253a5a38d66a14be09edd07f2d3e419e8d29820e22a62ecf3676109a3a794f31948",
             "file": "packages/ecl/components/ecl-site-header/notification/ecl-site-header-notification.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -82263,14 +81810,7 @@
                     "description": "",
                     "line": 17,
                     "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'style.display'"
-                        }
-                    ],
                     "modifierKind": [
-                        171,
                         124
                     ]
                 }
@@ -82283,7 +81823,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 19,
+                    "line": 23,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -82296,7 +81836,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 23,
+                    "line": 27,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -82344,47 +81884,21 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 14,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "style.display",
-                    "actualName": "display",
-                    "defaultValue": "''",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 17,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [],
             "description": "<p>This component is used as a wrapper around ecl-notification component, when used in the site-header. Adds specific class\n and methods to show/hide the notification.</p>\n",
             "rawdescription": "\n\nThis component is used as a wrapper around ecl-notification component, when used in the site-header. Adds specific class\n and methods to show/hide the notification.\n",
             "type": "component",
-            "sourceCode": "import { Component, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * This component is used as a wrapper around ecl-notification component, when used in the site-header. Adds specific class\n *  and methods to show/hide the notification.\n */\n@Component({\n    selector: 'ecl-site-header-notification',\n    templateUrl: 'ecl-site-header-notification.component.html',\n})\nexport class EclSiteHeaderNotificationComponent extends ECLBaseDirective {\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-site-header__notification')].join(' ').trim();\n    }\n    @HostBinding('style.display') protected display = '';\n\n    onHide(): void {\n        this.display = 'none';\n    }\n\n    onShow(): void {\n        this.display = '';\n    }\n}\n",
+            "sourceCode": "import { Component } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * This component is used as a wrapper around ecl-notification component, when used in the site-header. Adds specific class\n *  and methods to show/hide the notification.\n */\n@Component({\n    selector: 'ecl-site-header-notification',\n    templateUrl: 'ecl-site-header-notification.component.html',\n    host: {\n        '[class]': 'cssClasses',\n        '[style.display]': 'display',\n    },\n})\nexport class EclSiteHeaderNotificationComponent extends ECLBaseDirective {\n    protected display = '';\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-site-header__notification')].join(' ').trim();\n    }\n\n    onHide(): void {\n        this.display = 'none';\n    }\n\n    onShow(): void {\n        this.display = '';\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 285,
+                    "pos": 94,
+                    "end": 272,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -82403,7 +81917,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 14,
+                        "line": 19,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -82422,7 +81936,7 @@
         },
         {
             "name": "EclSiteHeaderSearchComponent",
-            "id": "component-EclSiteHeaderSearchComponent-f2c0c32058c22e107aa32c83d7149c58b3c0b5f941191d41160d6a1cb598d61204cdd35709bde16564d408b29b6baa2a4fc1d59a815075d744b7a06bd0e874c7",
+            "id": "component-EclSiteHeaderSearchComponent-8356b9fd133a3a34ff2e43eb9cb138f5a215af633200c110b14792b9731f9f4b44b47a5c58d16b1e56514ad16d078b644fe02902d74d3a3b6dcc64eadcfee530",
             "file": "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -82455,18 +81969,24 @@
             ],
             "inputsClass": [
                 {
+                    "name": "searchButtonLabel",
                     "coverageIgnore": false,
-                    "name": "searchInputText",
+                    "defaultValue": "undefined",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 56,
                     "type": "string",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 58,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
-                    "name": "searchButtonLabel",
+                    "name": "searchInputPlaceholder",
                     "coverageIgnore": false,
                     "defaultValue": "undefined",
                     "deprecated": false,
@@ -82475,7 +81995,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 58,
+                    "line": 57,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -82483,16 +82003,15 @@
                     "required": false
                 },
                 {
-                    "name": "searchInputPlaceholder",
+                    "name": "searchInputText",
                     "coverageIgnore": false,
-                    "defaultValue": "undefined",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "string",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 57,
+                    "line": 56,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -82545,24 +82064,47 @@
             ],
             "outputsClass": [
                 {
-                    "name": "searchToggle",
+                    "name": "searchEvent",
                     "coverageIgnore": false,
-                    "defaultValue": "new EventEmitter<EclSiteHeaderSearchToggleEvent>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 61,
-                    "type": "EventEmitter"
+                    "type": "EclSiteHeaderSearchEvent",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 60,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
-                    "name": "searchEvent",
+                    "name": "searchInputText",
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "EclSiteHeaderSearchEvent",
+                    "type": "string",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 60,
+                    "line": 56,
+                    "rawdescription": "\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
+                },
+                {
+                    "name": "searchToggle",
+                    "coverageIgnore": false,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "EclSiteHeaderSearchToggleEvent",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 61,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -82621,8 +82163,8 @@
                     "jsdoctags": [
                         {
                             "tagName": {
-                                "pos": 5933,
-                                "end": 5940,
+                                "pos": 5913,
+                                "end": 5920,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -82958,14 +82500,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, 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",
+            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { AfterViewInit, Component, DOCUMENT, ElementRef, forwardRef, inject, OnDestroy, PLATFORM_ID, Provider, output, input, model, 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    readonly searchInputText = model<string>();\n    readonly searchInputPlaceholder = input<string>(undefined);\n    readonly searchButtonLabel = input<string>(undefined);\n\n    readonly searchEvent = output<EclSiteHeaderSearchEvent>();\n    readonly searchToggle = output<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.set(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.emit(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.set(newValue);\n        this.onChange(newValue);\n    }\n\n    private closeSearchBox(): void {\n        if (!this.isSearchBoxActive) return;\n\n        this.isSearchBoxActive = false;\n        this.searchToggle.emit(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": 1221,
-                    "end": 1387,
+                    "pos": 1199,
+                    "end": 1365,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -83027,7 +82569,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    #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"
+            "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",
@@ -83768,7 +83310,7 @@
         },
         {
             "name": "EclSocialMediaFollowItemComponent",
-            "id": "component-EclSocialMediaFollowItemComponent-be2bc74a52d7b183206e23fa9c6edd0706816decad401fed2ccd0e2788dead5b1d6dbb066556634b97683220c7111e50c45fd911c2cccbe1ec6738847a5e6fdf",
+            "id": "component-EclSocialMediaFollowItemComponent-af10cb7ce22e295e87d200282d4f934d3d9096be034a20300e19f49c8cea2c18a23ec6525da489ec0de9592f023fbdde2a73cd8a9fc87a270818f5214e0f73b7",
             "file": "packages/ecl/components/ecl-social-media-follow/ecl-social-media-follow-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -83839,7 +83381,7 @@
                     "defaultValue": "'social-media'",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "string",
+                    "type": "EclIconSet",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
@@ -84079,7 +83621,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "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",
+            "sourceCode": "import { booleanAttribute, Component, inject, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { EclIconSet, 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<EclIconSet>('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": "",
@@ -92495,6 +92037,19 @@
                 "description": "",
                 "kind": 188
             },
+            {
+                "name": "EclIconSet",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "coverageIgnore": false,
+                "rawtype": "\"default\" | \"social\" | \"social-media\" | \"social-media-color\" | \"flag\" | \"flag-non-members\" | \"phosphor\" | \"phosphor-fill\"",
+                "file": "packages/ecl/components/ecl-icon/ecl-icon.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "rawdescription": "Available icon sets supported by {@link EclIconComponent}.",
+                "description": "<p>Available icon sets supported by {@link EclIconComponent}.</p>\n",
+                "kind": 193
+            },
             {
                 "name": "ModelValue",
                 "ctype": "miscellaneous",
@@ -94398,6 +93953,21 @@
                     "description": "",
                     "kind": 188
                 }
+            ],
+            "packages/ecl/components/ecl-icon/ecl-icon.component.ts": [
+                {
+                    "name": "EclIconSet",
+                    "ctype": "miscellaneous",
+                    "subtype": "typealias",
+                    "coverageIgnore": false,
+                    "rawtype": "\"default\" | \"social\" | \"social-media\" | \"social-media-color\" | \"flag\" | \"flag-non-members\" | \"phosphor\" | \"phosphor-fill\"",
+                    "file": "packages/ecl/components/ecl-icon/ecl-icon.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "Available icon sets supported by {@link EclIconComponent}.",
+                    "description": "<p>Available icon sets supported by {@link EclIconComponent}.</p>\n",
+                    "kind": 193
+                }
             ]
         }
     },