@eui/ecl 23.0.0-alpha.6 → 23.0.0-alpha.7

package/fesm2022/eui-ecl-components-ecl-site-header.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Component, inject, PLATFORM_ID, Directive, EventEmitter, contentChild, forwardRef, HostListener, Output, Input, ContentChild, ElementRef, Renderer2, afterNextRender, input, booleanAttribute, output, NgZone, DOCUMENT, ViewChild, Injectable, ChangeDetectorRef } from '@angular/core';
+import { HostBinding, Component, inject, PLATFORM_ID, Directive, EventEmitter, contentChild, forwardRef, HostListener, Output, Input, ElementRef, Renderer2, afterNextRender, viewChild, input, booleanAttribute, output, NgZone, DOCUMENT, Injectable, ChangeDetectorRef } from '@angular/core';
 import * as i1 from '@eui/ecl/core';
 import { ECLBaseDirective, ECLClickOutsideDirective, EclBaseEvent, EclThemeService, EclRtlService, logoLanguageCode } from '@eui/ecl/core';
 import { isPlatformBrowser, UpperCasePipe, AsyncPipe } from '@angular/common';
@@ -208,6 +208,10 @@ class EclSiteHeaderCustomActionComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
         this.class = 'ecl-site-header__custom-action';
+        this.title = contentChild(EclSiteHeaderCustomActionTitleDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.eclSiteHeaderCustomActionLink = contentChild(EclSiteHeaderCustomActionLinkDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclSiteHeaderCustomActionLink" }] : /* istanbul ignore next */ []));
         /**
          * Used to expand/collapse the dropdown, if any.
          */
@@ -215,12 +219,14 @@ class EclSiteHeaderCustomActionComponent extends ECLBaseDirective {
         this.destroy$ = new Subject();
     }
     ngAfterContentInit() {
-        if (this.title) {
-            this.titleId = this.title.id;
+        const title = this.title();
+        if (title) {
+            this.titleId = title.id;
         }
         // Subscribe to link output, which toggles the dropdown.
-        if (this.eclSiteHeaderCustomActionLink) {
-            this.eclSiteHeaderCustomActionLink.customActionOverlayToggle.pipe(takeUntil(this.destroy$)).subscribe((isExpanded) => {
+        const eclSiteHeaderCustomActionLink = this.eclSiteHeaderCustomActionLink();
+        if (eclSiteHeaderCustomActionLink) {
+            eclSiteHeaderCustomActionLink.customActionOverlayToggle.pipe(takeUntil(this.destroy$)).subscribe((isExpanded) => {
                 this.isOverlayExpanded = isExpanded;
             });
         }
@@ -234,8 +240,9 @@ class EclSiteHeaderCustomActionComponent extends ECLBaseDirective {
      */
     onCustomActionOverlayClose() {
         this.isOverlayExpanded = false;
-        if (!this.eclSiteHeaderCustomActionLink.hasLink())
-            this.eclSiteHeaderCustomActionLink.isOverlayExpanded = false;
+        const eclSiteHeaderCustomActionLink = this.eclSiteHeaderCustomActionLink();
+        if (!eclSiteHeaderCustomActionLink.hasLink())
+            eclSiteHeaderCustomActionLink.isOverlayExpanded = false;
     }
     /**
      * Close the overlay, when clicking outside of it.
@@ -250,7 +257,7 @@ class EclSiteHeaderCustomActionComponent extends ECLBaseDirective {
         this.onCustomActionOverlayClose();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclSiteHeaderCustomActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclSiteHeaderCustomActionComponent, isStandalone: true, selector: "div[eclSiteHeaderCustomAction]", host: { listeners: { "eclClickOutside": "onClickOutsideHandler()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.class" } }, queries: [{ propertyName: "title", first: true, predicate: EclSiteHeaderCustomActionTitleDirective, descendants: true }, { propertyName: "eclSiteHeaderCustomActionLink", first: true, predicate: EclSiteHeaderCustomActionLinkDirective, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<ng-content select=\"[eclSiteHeaderCustomActionLink]\"></ng-content>\n@if (isOverlayExpanded) {\n    <div class=\"ecl-site-header__custom-action-overlay\" id=\"custom-action-overlay\" role=\"dialog\" [attr.aria-labelledby]=\"titleId\" cdkTrapFocus cdkTrapFocusAutoCapture>\n        <div class=\"ecl-site-header__custom-action-header\">\n            <ng-content select=\"[eclSiteHeaderCustomActionTitle]\"></ng-content>\n            <button eclButton variant=\"tertiary\" isIconOnly class=\"ecl-site-header__custom-action-close\" (click)=\"onCustomActionOverlayClose()\">\n                <span eclButtonLabel>Close</span>\n                <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n            </button>\n        </div>\n        <ng-content select=\"[eclSiteHeaderCustomActionContent]\"></ng-content>\n    </div>\n}\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclSiteHeaderCustomActionComponent, isStandalone: true, selector: "div[eclSiteHeaderCustomAction]", host: { listeners: { "eclClickOutside": "onClickOutsideHandler()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.class" } }, queries: [{ propertyName: "title", first: true, predicate: EclSiteHeaderCustomActionTitleDirective, descendants: true, isSignal: true }, { propertyName: "eclSiteHeaderCustomActionLink", first: true, predicate: EclSiteHeaderCustomActionLinkDirective, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<ng-content select=\"[eclSiteHeaderCustomActionLink]\"></ng-content>\n@if (isOverlayExpanded) {\n    <div class=\"ecl-site-header__custom-action-overlay\" id=\"custom-action-overlay\" role=\"dialog\" [attr.aria-labelledby]=\"titleId\" cdkTrapFocus cdkTrapFocusAutoCapture>\n        <div class=\"ecl-site-header__custom-action-header\">\n            <ng-content select=\"[eclSiteHeaderCustomActionTitle]\"></ng-content>\n            <button eclButton variant=\"tertiary\" isIconOnly class=\"ecl-site-header__custom-action-close\" (click)=\"onCustomActionOverlayClose()\">\n                <span eclButtonLabel>Close</span>\n                <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n            </button>\n        </div>\n        <ng-content select=\"[eclSiteHeaderCustomActionContent]\"></ng-content>\n    </div>\n}\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclSiteHeaderCustomActionComponent, decorators: [{
             type: Component,
@@ -263,13 +270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
-            }], title: [{
-                type: ContentChild,
-                args: [EclSiteHeaderCustomActionTitleDirective]
-            }], eclSiteHeaderCustomActionLink: [{
-                type: ContentChild,
-                args: [EclSiteHeaderCustomActionLinkDirective]
-            }], onClickOutsideHandler: [{
+            }], title: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclSiteHeaderCustomActionTitleDirective), { isSignal: true }] }], eclSiteHeaderCustomActionLink: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclSiteHeaderCustomActionLinkDirective), { isSignal: true }] }], onClickOutsideHandler: [{
                 type: HostListener,
                 args: ['eclClickOutside']
             }], onEscapeKeydownHandler: [{
@@ -410,6 +411,11 @@ class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
         super();
         this.el = inject(ElementRef);
         this.eclThemeService = inject(EclThemeService);
+        /**
+         * The div, that wraps all the languages.
+         */
+        this.languageContent = viewChild('languageContent', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "languageContent" }] : /* istanbul ignore next */ []));
         this.euLanguages = [];
         this.nonEuLanguages = [];
         /**
@@ -495,8 +501,9 @@ class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
      */
     setLanguageContentMaxHeight() {
         const viewportHeight = this.window.innerHeight;
-        if (this.languageContent) {
-            const listTop = this.languageContent.nativeElement.getBoundingClientRect().top;
+        const languageContent = this.languageContent();
+        if (languageContent) {
+            const listTop = languageContent.nativeElement.getBoundingClientRect().top;
             const availableSpace = viewportHeight - listTop;
             if (availableSpace > 0) {
                 this.languageContentMaxHeight = availableSpace;
@@ -511,15 +518,12 @@ class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclSiteHeaderLanguagePopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclSiteHeaderLanguagePopoverComponent, isStandalone: true, selector: "ecl-site-header-language-popover", inputs: { languageCode: { classPropertyName: "languageCode", publicName: "languageCode", isSignal: false, isRequired: false, transformFunction: null }, euLanguages: { classPropertyName: "euLanguages", publicName: "euLanguages", isSignal: false, isRequired: false, transformFunction: null }, nonEuLanguages: { classPropertyName: "nonEuLanguages", publicName: "nonEuLanguages", isSignal: false, isRequired: false, transformFunction: null }, euColumnsCount: { classPropertyName: "euColumnsCount", publicName: "euColumnsCount", isSignal: true, isRequired: false, transformFunction: null }, nonEuColumnsCount: { classPropertyName: "nonEuColumnsCount", publicName: "nonEuColumnsCount", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null }, isPushRight: { classPropertyName: "isPushRight", publicName: "isPushRight", isSignal: true, isRequired: false, transformFunction: null }, isPushLeft: { classPropertyName: "isPushLeft", publicName: "isPushLeft", isSignal: true, isRequired: false, transformFunction: null }, isStack: { classPropertyName: "isStack", publicName: "isStack", isSignal: true, isRequired: false, transformFunction: null }, isFull: { classPropertyName: "isFull", publicName: "isFull", isSignal: true, isRequired: false, transformFunction: null }, rightPosition: { classPropertyName: "rightPosition", publicName: "rightPosition", isSignal: false, isRequired: false, transformFunction: null }, leftPosition: { classPropertyName: "leftPosition", publicName: "leftPosition", isSignal: false, isRequired: false, transformFunction: null }, languageArrowPosition: { classPropertyName: "languageArrowPosition", publicName: "languageArrowPosition", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { languageClosed: "languageClosed", languageSelected: "languageSelected" }, host: { properties: { "style.right.px": "this.rightPosition", "style.left.px": "this.leftPosition", "style.--ecl-language-arrow-position": "this.languageArrowPosition", "attr.role": "this.role", "attr.aria-labelledby": "this.labelledBy", "style.display": "this.display", "class": "this.cssClasses", "attr.aria-modal": "this.isModal", "attr.hidden": "this.isDropdownHidden" } }, viewQueries: [{ propertyName: "languageContent", first: true, predicate: ["languageContent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-site-header__language-header\">\n    <div class=\"ecl-site-header__language-title\">\n        {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n    </div>\n    <button eclButton variant=\"tertiary\" eclStyle=\"neutral\" isIconOnly class=\"ecl-site-header__language-close\" (click)=\"onCloseClick()\">\n        <span class=\"ecl-button__container\">\n            <span class=\"ecl-button__label\">\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </span>\n    </button>\n</div>\n\n<div #languageContent class=\"ecl-site-header__language-content\" [style.max-height.px]=\"languageContentMaxHeight\"\n    [class.ecl-site-header__language-content--stack]=\"isStack()\">\n    @if (euLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount() }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" [attr.translate]=\"'no'\">\n                @for (item of euLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            variant=\"standalone\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n    @if (nonEuLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount() }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" [attr.translate]=\"'no'\">\n                @for (item of nonEuLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            variant=\"standalone\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i3$1.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclSiteHeaderLanguagePopoverComponent, isStandalone: true, selector: "ecl-site-header-language-popover", inputs: { languageCode: { classPropertyName: "languageCode", publicName: "languageCode", isSignal: false, isRequired: false, transformFunction: null }, euLanguages: { classPropertyName: "euLanguages", publicName: "euLanguages", isSignal: false, isRequired: false, transformFunction: null }, nonEuLanguages: { classPropertyName: "nonEuLanguages", publicName: "nonEuLanguages", isSignal: false, isRequired: false, transformFunction: null }, euColumnsCount: { classPropertyName: "euColumnsCount", publicName: "euColumnsCount", isSignal: true, isRequired: false, transformFunction: null }, nonEuColumnsCount: { classPropertyName: "nonEuColumnsCount", publicName: "nonEuColumnsCount", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null }, isPushRight: { classPropertyName: "isPushRight", publicName: "isPushRight", isSignal: true, isRequired: false, transformFunction: null }, isPushLeft: { classPropertyName: "isPushLeft", publicName: "isPushLeft", isSignal: true, isRequired: false, transformFunction: null }, isStack: { classPropertyName: "isStack", publicName: "isStack", isSignal: true, isRequired: false, transformFunction: null }, isFull: { classPropertyName: "isFull", publicName: "isFull", isSignal: true, isRequired: false, transformFunction: null }, rightPosition: { classPropertyName: "rightPosition", publicName: "rightPosition", isSignal: false, isRequired: false, transformFunction: null }, leftPosition: { classPropertyName: "leftPosition", publicName: "leftPosition", isSignal: false, isRequired: false, transformFunction: null }, languageArrowPosition: { classPropertyName: "languageArrowPosition", publicName: "languageArrowPosition", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { languageClosed: "languageClosed", languageSelected: "languageSelected" }, host: { properties: { "style.right.px": "this.rightPosition", "style.left.px": "this.leftPosition", "style.--ecl-language-arrow-position": "this.languageArrowPosition", "attr.role": "this.role", "attr.aria-labelledby": "this.labelledBy", "style.display": "this.display", "class": "this.cssClasses", "attr.aria-modal": "this.isModal", "attr.hidden": "this.isDropdownHidden" } }, viewQueries: [{ propertyName: "languageContent", first: true, predicate: ["languageContent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-site-header__language-header\">\n    <div class=\"ecl-site-header__language-title\">\n        {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n    </div>\n    <button eclButton variant=\"tertiary\" eclStyle=\"neutral\" isIconOnly class=\"ecl-site-header__language-close\" (click)=\"onCloseClick()\">\n        <span class=\"ecl-button__container\">\n            <span class=\"ecl-button__label\">\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </span>\n    </button>\n</div>\n\n<div #languageContent class=\"ecl-site-header__language-content\" [style.max-height.px]=\"languageContentMaxHeight\"\n    [class.ecl-site-header__language-content--stack]=\"isStack()\">\n    @if (euLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount() }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" [attr.translate]=\"'no'\">\n                @for (item of euLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            variant=\"standalone\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n    @if (nonEuLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount() }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" [attr.translate]=\"'no'\">\n                @for (item of nonEuLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            variant=\"standalone\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i3$1.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclSiteHeaderLanguagePopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-site-header-language-popover', imports: [TranslatePipe, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK], template: "<div class=\"ecl-site-header__language-header\">\n    <div class=\"ecl-site-header__language-title\">\n        {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n    </div>\n    <button eclButton variant=\"tertiary\" eclStyle=\"neutral\" isIconOnly class=\"ecl-site-header__language-close\" (click)=\"onCloseClick()\">\n        <span class=\"ecl-button__container\">\n            <span class=\"ecl-button__label\">\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </span>\n    </button>\n</div>\n\n<div #languageContent class=\"ecl-site-header__language-content\" [style.max-height.px]=\"languageContentMaxHeight\"\n    [class.ecl-site-header__language-content--stack]=\"isStack()\">\n    @if (euLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount() }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" [attr.translate]=\"'no'\">\n                @for (item of euLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            variant=\"standalone\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n    @if (nonEuLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount() }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" [attr.translate]=\"'no'\">\n                @for (item of nonEuLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            variant=\"standalone\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { languageContent: [{
-                type: ViewChild,
-                args: ['languageContent']
-            }], languageCode: [{
+        }], ctorParameters: () => [], propDecorators: { languageContent: [{ type: i0.ViewChild, args: ['languageContent', { isSignal: true }] }], languageCode: [{
                 type: Input
             }], euLanguages: [{
                 type: Input
@@ -594,6 +598,15 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
         this.eclThemeService = inject(EclThemeService);
         this.config = inject(GLOBAL_CONFIG_TOKEN, { optional: true });
         this.i18nService = inject(I18nService);
+        /**
+         * The language popover, that shows all available languages (configured in the config file of the current site).
+         */
+        this.languagePopover = viewChild(EclSiteHeaderLanguagePopoverComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "languagePopover" }] : /* istanbul ignore next */ []));
+        /**
+         * The link to open the popover dialog.
+         */
+        this.languageLinkElement = viewChild('languageLink', { ...(ngDevMode ? { debugName: "languageLinkElement" } : /* istanbul ignore next */ {}), read: ElementRef });
         /**
          * Thie event is emited, when language link, showing the current language is clicked.
          */
@@ -665,7 +678,7 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
         }
         // If the dropdown is visible, we set the max-height of the dropdown, so that it can be scrolled.
         if (this.isLanguagesDropdownVisible) {
-            setTimeout(() => this.languagePopover.setLanguageContentMaxHeight());
+            setTimeout(() => this.languagePopover().setLanguageContentMaxHeight());
         }
         this.languageClick.next(new EclSiteHeaderLanguageClickEvent());
         evt.preventDefault();
@@ -712,8 +725,8 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
         setTimeout(() => {
             if (this.hasLanguageCodes()) {
                 const arrowSize = '0.5rem';
-                const linkRect = this.languageLinkElement.nativeElement.getBoundingClientRect();
-                const popoverRect = this.languagePopover?.el.nativeElement.getBoundingClientRect();
+                const linkRect = this.languageLinkElement().nativeElement.getBoundingClientRect();
+                const popoverRect = this.languagePopover()?.el.nativeElement.getBoundingClientRect();
                 const screenWidth = this.window.innerWidth;
                 const vw = Math.max(document.documentElement.clientWidth || 0, this.window.innerWidth || 0);
                 this.isFull = false;
@@ -777,7 +790,7 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclSiteHeaderLanguageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclSiteHeaderLanguageComponent, isStandalone: true, selector: "ecl-site-header-language", outputs: { languageClick: "languageClick", languageSelected: "languageSelected" }, host: { listeners: { "eclClickOutside": "onClickOutside()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "languagePopover", first: true, predicate: EclSiteHeaderLanguagePopoverComponent, descendants: true }, { propertyName: "languageLinkElement", first: true, predicate: ["languageLink"], descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    role=\"button\"\n    [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE-EXT' | translate: { currentLang: getLanguageLabel() }\"\n    [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n    (click)=\"onLanguageClick($event)\"\n    (keydown.space)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"global\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes() && isLanguagesDropdownVisible) {\n<ecl-site-header-language-popover\n    #languagePopover\n    cdkTrapFocus\n    cdkTrapFocusAutoCapture\n    id=\"language-list-overlay\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: ["languageCode", "euLanguages", "nonEuLanguages", "euColumnsCount", "nonEuColumnsCount", "isHidden", "isPushRight", "isPushLeft", "isStack", "isFull", "rightPosition", "leftPosition", "languageArrowPosition"], outputs: ["languageClosed", "languageSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclSiteHeaderLanguageComponent, isStandalone: true, selector: "ecl-site-header-language", outputs: { languageClick: "languageClick", languageSelected: "languageSelected" }, host: { listeners: { "eclClickOutside": "onClickOutside()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "languagePopover", first: true, predicate: EclSiteHeaderLanguagePopoverComponent, descendants: true, isSignal: true }, { propertyName: "languageLinkElement", first: true, predicate: ["languageLink"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    role=\"button\"\n    [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE-EXT' | translate: { currentLang: getLanguageLabel() }\"\n    [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n    (click)=\"onLanguageClick($event)\"\n    (keydown.space)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"global\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes() && isLanguagesDropdownVisible) {\n<ecl-site-header-language-popover\n    #languagePopover\n    cdkTrapFocus\n    cdkTrapFocusAutoCapture\n    id=\"language-list-overlay\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: ["languageCode", "euLanguages", "nonEuLanguages", "euColumnsCount", "nonEuColumnsCount", "isHidden", "isPushRight", "isPushLeft", "isStack", "isFull", "rightPosition", "leftPosition", "languageArrowPosition"], outputs: ["languageClosed", "languageSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclSiteHeaderLanguageComponent, decorators: [{
             type: Component,
@@ -787,13 +800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             outputs: ['eclClickOutside'],
                         },
                     ], template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    role=\"button\"\n    [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE-EXT' | translate: { currentLang: getLanguageLabel() }\"\n    [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n    (click)=\"onLanguageClick($event)\"\n    (keydown.space)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"global\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes() && isLanguagesDropdownVisible) {\n<ecl-site-header-language-popover\n    #languagePopover\n    cdkTrapFocus\n    cdkTrapFocusAutoCapture\n    id=\"language-list-overlay\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { languagePopover: [{
-                type: ViewChild,
-                args: [EclSiteHeaderLanguagePopoverComponent]
-            }], languageLinkElement: [{
-                type: ViewChild,
-                args: ['languageLink', { read: ElementRef }]
-            }], languageClick: [{
+        }], propDecorators: { languagePopover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EclSiteHeaderLanguagePopoverComponent), { isSignal: true }] }], languageLinkElement: [{ type: i0.ViewChild, args: ['languageLink', { ...{ read: ElementRef }, isSignal: true }] }], languageClick: [{
                 type: Output
             }], languageSelected: [{
                 type: Output
@@ -817,6 +824,7 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
         super();
         this.isLoggedIn = input(false, { ...(ngDevMode ? { debugName: "isLoggedIn" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.class = 'ecl-site-header__login-container';
+        this.loginLinkElement = viewChild('loginLink', { ...(ngDevMode ? { debugName: "loginLinkElement" } : /* istanbul ignore next */ {}), read: ElementRef });
         this.login = output();
         this.loginBoxToggle = new EventEmitter();
         /**
@@ -890,7 +898,7 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
     calculateLoginArrowPosition(parentHeaderRight) {
         const vw = this.document.documentElement.clientWidth;
         const arrowSize = '0.5rem';
-        const loginLink = this.loginLinkElement?.nativeElement.getBoundingClientRect();
+        const loginLink = this.loginLinkElement()?.nativeElement.getBoundingClientRect();
         const arrowPosition = parentHeaderRight - loginLink?.right + loginLink?.width / 2;
         if (parentHeaderRight === undefined) {
             return;
@@ -903,7 +911,7 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclSiteHeaderLoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclSiteHeaderLoginComponent, isStandalone: true, selector: "ecl-site-header-login", inputs: { isLoggedIn: { classPropertyName: "isLoggedIn", publicName: "isLoggedIn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", loginBoxToggle: "loginBoxToggle" }, host: { listeners: { "eclClickOutside": "onClickOutsideMegaMenu()" }, properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "loginLinkElement", first: true, predicate: ["loginLink"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i1.ECLBaseDirective }, { directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "@if (isLoggedIn()) {\n    <a\n        #loginLink\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        aria-controls=\"login-box-id\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n    </a>\n    <div\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclSiteHeaderLoginComponent, isStandalone: true, selector: "ecl-site-header-login", inputs: { isLoggedIn: { classPropertyName: "isLoggedIn", publicName: "isLoggedIn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", loginBoxToggle: "loginBoxToggle" }, host: { listeners: { "eclClickOutside": "onClickOutsideMegaMenu()" }, properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "loginLinkElement", first: true, predicate: ["loginLink"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i1.ECLBaseDirective }, { directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "@if (isLoggedIn()) {\n    <a\n        #loginLink\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        aria-controls=\"login-box-id\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n    </a>\n    <div\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclSiteHeaderLoginComponent, decorators: [{
             type: Component,
@@ -913,17 +921,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         },
                         {
                             directive: ECLClickOutsideDirective,
-                            // eslint-disable-next-line @angular-eslint/no-outputs-metadata-property
                             outputs: ['eclClickOutside'],
                         },
                     ], template: "@if (isLoggedIn()) {\n    <a\n        #loginLink\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        aria-controls=\"login-box-id\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n    </a>\n    <div\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isLoggedIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoggedIn", required: false }] }], class: [{
                 type: HostBinding,
                 args: ['class']
-            }], loginLinkElement: [{
-                type: ViewChild,
-                args: ['loginLink', { read: ElementRef }]
-            }], login: [{ type: i0.Output, args: ["login"] }], loginBoxToggle: [{
+            }], loginLinkElement: [{ type: i0.ViewChild, args: ['loginLink', { ...{ read: ElementRef }, isSignal: true }] }], login: [{ type: i0.Output, args: ["login"] }], loginBoxToggle: [{
                 type: Output
             }], onClickOutsideMegaMenu: [{
                 type: HostListener,
@@ -1091,6 +1095,10 @@ class EclSiteHeaderSearchComponent extends ECLBaseDirective {
         ...(ngDevMode ? [{ debugName: "searchInputPlaceholder" }] : /* istanbul ignore next */ []));
         this.searchButtonLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchButtonLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * The search link element from the view, i.e. the search button.
+         */
+        this.searchLinkElement = viewChild('searchLink', { ...(ngDevMode ? { debugName: "searchLinkElement" } : /* istanbul ignore next */ {}), read: ElementRef });
         this.searchEvent = output();
         this.searchToggle = new EventEmitter();
         this.isSearchBoxActive = false;
@@ -1169,7 +1177,7 @@ class EclSiteHeaderSearchComponent extends ECLBaseDirective {
         });
     }
     calculateSearchFormArrowPosition(parentHeaderRight) {
-        const searchLink = this.searchLinkElement.nativeElement.getBoundingClientRect();
+        const searchLink = this.searchLinkElement().nativeElement.getBoundingClientRect();
         const viewportWidth = this.document.documentElement.clientWidth;
         const arrowPosition = viewportWidth - searchLink.right + searchLink.width / 2;
         const arrowSize = '0.5rem';
@@ -1179,7 +1187,7 @@ class EclSiteHeaderSearchComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclSiteHeaderSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: EclSiteHeaderSearchComponent, isStandalone: true, selector: "ecl-site-header-search", inputs: { searchInputText: { classPropertyName: "searchInputText", publicName: "searchInputText", isSignal: false, isRequired: false, transformFunction: null }, searchInputPlaceholder: { classPropertyName: "searchInputPlaceholder", publicName: "searchInputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchButtonLabel: { classPropertyName: "searchButtonLabel", publicName: "searchButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchEvent: "searchEvent", searchToggle: "searchToggle" }, host: { properties: { "class": "this.class", "attr.role": "this.role" } }, providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], viewQueries: [{ propertyName: "searchLinkElement", first: true, predicate: ["searchLink"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<a\n    #searchLink\n    href=\"#\"\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__search-toggle ecl-button--neutral\"\n    data-ecl-search-toggle=\"true\"\n    aria-controls=\"search-form-id\"\n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form\n    [style]=\"{'--ecl-search-arrow-position': searchArrowPosition}\"\n    (searchEvent)=\"onSearch($event)\"\n    [placeholder]=\"searchInputPlaceholder()\"\n    (ngModelChange)=\"onModelChange($event)\"\n    [(ngModel)]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel()\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.EclSearchFormComponent, selector: "ecl-search-form", inputs: ["searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon", "buttonExtraClassses", "inputExtraClassses"], outputs: ["searchInputTextChange", "searchEvent"] }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: EclSiteHeaderSearchComponent, isStandalone: true, selector: "ecl-site-header-search", inputs: { searchInputText: { classPropertyName: "searchInputText", publicName: "searchInputText", isSignal: false, isRequired: false, transformFunction: null }, searchInputPlaceholder: { classPropertyName: "searchInputPlaceholder", publicName: "searchInputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchButtonLabel: { classPropertyName: "searchButtonLabel", publicName: "searchButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchEvent: "searchEvent", searchToggle: "searchToggle" }, host: { properties: { "class": "this.class", "attr.role": "this.role" } }, providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], viewQueries: [{ propertyName: "searchLinkElement", first: true, predicate: ["searchLink"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<a\n    #searchLink\n    href=\"#\"\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__search-toggle ecl-button--neutral\"\n    data-ecl-search-toggle=\"true\"\n    aria-controls=\"search-form-id\"\n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form\n    [style]=\"{'--ecl-search-arrow-position': searchArrowPosition}\"\n    (searchEvent)=\"onSearch($event)\"\n    [placeholder]=\"searchInputPlaceholder()\"\n    (ngModelChange)=\"onModelChange($event)\"\n    [(ngModel)]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel()\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.EclSearchFormComponent, selector: "ecl-search-form", inputs: ["searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon", "buttonExtraClassses", "inputExtraClassses"], outputs: ["searchInputTextChange", "searchEvent"] }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclSiteHeaderSearchComponent, decorators: [{
             type: Component,
@@ -1192,10 +1200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 args: ['attr.role']
             }], searchInputText: [{
                 type: Input
-            }], searchInputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchInputPlaceholder", required: false }] }], searchButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchButtonLabel", required: false }] }], searchLinkElement: [{
-                type: ViewChild,
-                args: ['searchLink', { read: ElementRef }]
-            }], searchEvent: [{ type: i0.Output, args: ["searchEvent"] }], searchToggle: [{
+            }], searchInputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchInputPlaceholder", required: false }] }], searchButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchButtonLabel", required: false }] }], searchLinkElement: [{ type: i0.ViewChild, args: ['searchLink', { ...{ read: ElementRef }, isSignal: true }] }], searchEvent: [{ type: i0.Output, args: ["searchEvent"] }], searchToggle: [{
                 type: Output
             }] } });
 
@@ -1213,8 +1218,8 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         return [
             super.getCssClasses('ecl-site-header'),
             `ecl-site-header-with-logo-${this.logoSize()}`,
-            this.eclMenuComponent ? 'ecl-site-header--has-menu' : '',
-            this.eclMegaMenuComponent ? 'ecl-site-header--has-mega-menu' : '',
+            this.eclMenuComponent() ? 'ecl-site-header--has-menu' : '',
+            this.eclMegaMenuComponent() ? 'ecl-site-header--has-mega-menu' : '',
             this.isEclMegaMenuOpen ? 'ecl-site-header--open-menu' : '',
             this.isEclMegaMenuStart ? 'ecl-site-header--open-menu-start' : '',
             this.isRtl ? 'ecl-site-header--rtl' : '',
@@ -1239,6 +1244,28 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         this.isSiteNameMobileOnly = input(false, { ...(ngDevMode ? { debugName: "isSiteNameMobileOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.logoClick = output();
         this.languageClick = output();
+        this.topContainerElement = viewChild('topContainer', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "topContainerElement" }] : /* istanbul ignore next */ []));
+        this.siteHeaderHeader = viewChild('siteHeaderHeader', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "siteHeaderHeader" }] : /* istanbul ignore next */ []));
+        this.bannerHeader = viewChild('bannerHeader', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bannerHeader" }] : /* istanbul ignore next */ []));
+        this.eclLoginComponent = contentChild(EclSiteHeaderLoginComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclLoginComponent" }] : /* istanbul ignore next */ []));
+        this.eclMenuComponent = contentChild(EclMenuComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclMenuComponent" }] : /* istanbul ignore next */ []));
+        this.eclMegaMenuComponent = contentChild(EclMegaMenuComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclMegaMenuComponent" }] : /* istanbul ignore next */ []));
+        this.eclSearchComponent = contentChild(EclSiteHeaderSearchComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclSearchComponent" }] : /* istanbul ignore next */ []));
+        this.eclLanguageComponent = contentChild(EclSiteHeaderLanguageComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclLanguageComponent" }] : /* istanbul ignore next */ []));
+        this.eclNotificationComponent = contentChild(EclSiteHeaderNotificationComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclNotificationComponent" }] : /* istanbul ignore next */ []));
+        this.eclHeaderLink = contentChild(forwardRef(() => EclSiteHeaderLinkDirective), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclHeaderLink" }] : /* istanbul ignore next */ []));
+        this.eclHeaderImage = contentChild(forwardRef(() => EclSiteHeaderImageDirective), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclHeaderImage" }] : /* istanbul ignore next */ []));
         this.destroy$ = new Subject();
         this.isEclMegaMenuOpen = false;
         this.isEclMegaMenuStart = false;
@@ -1259,7 +1286,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
                 setTimeout(() => {
                     this.sendResizeEventToChildComponents();
                 }, this.TIMEOUT_INTERVAL);
-            }).observe(this.topContainerElement.nativeElement);
+            }).observe(this.topContainerElement().nativeElement);
         });
     }
     /**
@@ -1270,33 +1297,38 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
             return;
         this.handleRtlChangeState();
         this.handleLanguageChangeState();
-        if (this.eclHeaderImage) {
-            this.eclHeaderImage.logoSize = this.logoSize();
+        const eclHeaderImage = this.eclHeaderImage();
+        if (eclHeaderImage) {
+            eclHeaderImage.logoSize = this.logoSize();
         }
-        if (this.eclLoginComponent && this.eclSearchComponent) {
-            this.eclLoginComponent.loginBoxToggle.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
-                this.eclSearchComponent.isSearchBoxActive = false;
+        const eclLoginComponent = this.eclLoginComponent();
+        const eclSearchComponent = this.eclSearchComponent();
+        if (eclLoginComponent && eclSearchComponent) {
+            eclLoginComponent.loginBoxToggle.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+                this.eclSearchComponent().isSearchBoxActive = false;
                 this.sendResizeEventToChildComponents();
             });
-            this.eclSearchComponent.searchToggle.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
-                this.eclLoginComponent.isLoginBoxActive = false;
+            eclSearchComponent.searchToggle.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+                this.eclLoginComponent().isLoginBoxActive = false;
                 this.sendResizeEventToChildComponents();
             });
         }
-        if (this.eclLanguageComponent) {
-            this.eclLanguageComponent.languageClick.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+        const eclLanguageComponent = this.eclLanguageComponent();
+        if (eclLanguageComponent) {
+            eclLanguageComponent.languageClick.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
                 this.languageClick.emit(new EclSiteHeaderLanguageClickEvent());
                 this.sendResizeEventToChildComponents();
             });
-            this.eclLanguageComponent.languageSelected.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            eclLanguageComponent.languageSelected.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
                 this.languageCode = evt.language?.code;
             });
         }
-        if (this.eclLanguageComponent) {
-            this.languageCode = this.eclLanguageComponent?.languageCode;
+        if (eclLanguageComponent) {
+            this.languageCode = eclLanguageComponent?.languageCode;
         }
-        if (this.eclMenuComponent) {
-            outputToObservable(this.eclMenuComponent.openHamburgerMenu).pipe(takeUntil(this.destroy$)).subscribe(() => {
+        const eclMenuComponent = this.eclMenuComponent();
+        if (eclMenuComponent) {
+            outputToObservable(eclMenuComponent.openHamburgerMenu).pipe(takeUntil(this.destroy$)).subscribe(() => {
                 this.positionMenu();
             });
         }
@@ -1320,7 +1352,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         }
     }
     hasCustomLink() {
-        return !!this.eclHeaderLink;
+        return !!this.eclHeaderLink();
     }
     handleRtlChangeState() {
         this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {
@@ -1332,8 +1364,9 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
      *  via the 'eclAreaDataService'.
      */
     sendResizeEventToChildComponents() {
-        if (this.topContainerElement.nativeElement.getBoundingClientRect().width !== undefined) {
-            const topContainerRect = this.topContainerElement.nativeElement.getBoundingClientRect();
+        const topContainerElement = this.topContainerElement();
+        if (topContainerElement.nativeElement.getBoundingClientRect().width !== undefined) {
+            const topContainerRect = topContainerElement.nativeElement.getBoundingClientRect();
             const siteHeaderAreaChangeEvent = new EclAreaChangeEvent(topContainerRect.width, topContainerRect.left, topContainerRect.right);
             this.eclAreaDataService.publishEvent(siteHeaderAreaChangeEvent);
         }
@@ -1346,7 +1379,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
             }
             if (isExpanded) {
                 const bottomSpaceY = this.el.nativeElement.getBoundingClientRect().bottom;
-                this.eclMegaMenuComponent.positionMenuOverlay(bottomSpaceY);
+                this.eclMegaMenuComponent().positionMenuOverlay(bottomSpaceY);
             }
         });
         this.eclHeaderMenuComunicationService.isObjectExpanded$.pipe(takeUntil(this.destroy$)).subscribe(isExpanded => {
@@ -1362,32 +1395,36 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
                 this.isEclMegaMenuOpen = isExpanded;
                 if (isExpanded) {
                     const bottomSpaceY = this.el.nativeElement.getBoundingClientRect().bottom;
-                    this.eclMegaMenuComponent.positionMenuOverlay(bottomSpaceY);
+                    this.eclMegaMenuComponent().positionMenuOverlay(bottomSpaceY);
                 }
             }
         });
     }
     onMegaMenuItemExpandMobile() {
         this.isEclMegaMenuStart = false;
-        if (this.eclNotificationComponent) {
-            this.eclNotificationComponent.onHide();
+        const eclNotificationComponent = this.eclNotificationComponent();
+        if (eclNotificationComponent) {
+            eclNotificationComponent.onHide();
         }
-        if (this.bannerHeader) {
-            this.bannerHeader.nativeElement.style.display = 'none';
+        const bannerHeader = this.bannerHeader();
+        if (bannerHeader) {
+            bannerHeader.nativeElement.style.display = 'none';
         }
-        const bottomSpaceY = this.siteHeaderHeader.nativeElement.getBoundingClientRect().bottom;
-        this.eclMegaMenuComponent.positionMenuOverlay(bottomSpaceY);
+        const bottomSpaceY = this.siteHeaderHeader().nativeElement.getBoundingClientRect().bottom;
+        this.eclMegaMenuComponent().positionMenuOverlay(bottomSpaceY);
     }
     onMegaMenuItemCollapseMobile() {
         this.isEclMegaMenuStart = true;
-        if (this.eclNotificationComponent) {
-            this.eclNotificationComponent.onShow();
+        const eclNotificationComponent = this.eclNotificationComponent();
+        if (eclNotificationComponent) {
+            eclNotificationComponent.onShow();
         }
-        if (this.bannerHeader) {
-            this.bannerHeader.nativeElement.style.display = '';
+        const bannerHeader = this.bannerHeader();
+        if (bannerHeader) {
+            bannerHeader.nativeElement.style.display = '';
         }
         const bottomSpaceY = this.el.nativeElement.getBoundingClientRect().bottom;
-        this.eclMegaMenuComponent.positionMenuOverlay(bottomSpaceY);
+        this.eclMegaMenuComponent().positionMenuOverlay(bottomSpaceY);
     }
     observeBreakpointChanges() {
         this.cdkBreakpointObserver
@@ -1398,19 +1435,20 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         });
     }
     positionMenu() {
-        const bottomSpaceY = this.siteHeaderHeader.nativeElement.getBoundingClientRect().bottom;
-        this.eclMenuComponent.positionMenuOverlay(bottomSpaceY);
+        const bottomSpaceY = this.siteHeaderHeader().nativeElement.getBoundingClientRect().bottom;
+        this.eclMenuComponent().positionMenuOverlay(bottomSpaceY);
     }
     handleLanguageChangeState() {
         this.i18nService.getState().pipe(takeUntil(this.destroy$)).subscribe((lang) => {
             this.languageCode = lang.activeLang;
-            if (this.eclLanguageComponent) {
-                this.eclLanguageComponent.languageCode = lang.activeLang;
+            const eclLanguageComponent = this.eclLanguageComponent();
+            if (eclLanguageComponent) {
+                eclLanguageComponent.languageCode = lang.activeLang;
             }
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclSiteHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclSiteHeaderComponent, isStandalone: true, selector: "ecl-site-header", inputs: { siteName: { classPropertyName: "siteName", publicName: "siteName", isSignal: false, isRequired: false, transformFunction: null }, languageCode: { classPropertyName: "languageCode", publicName: "languageCode", isSignal: false, isRequired: false, transformFunction: null }, logoSize: { classPropertyName: "logoSize", publicName: "logoSize", isSignal: true, isRequired: false, transformFunction: null }, isSiteNameMobileOnly: { classPropertyName: "isSiteNameMobileOnly", publicName: "isSiteNameMobileOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logoClick: "logoClick", languageClick: "languageClick" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclLoginComponent", first: true, predicate: EclSiteHeaderLoginComponent, descendants: true }, { propertyName: "eclMenuComponent", first: true, predicate: EclMenuComponent, descendants: true }, { propertyName: "eclMegaMenuComponent", first: true, predicate: EclMegaMenuComponent, descendants: true }, { propertyName: "eclSearchComponent", first: true, predicate: EclSiteHeaderSearchComponent, descendants: true }, { propertyName: "eclLanguageComponent", first: true, predicate: EclSiteHeaderLanguageComponent, descendants: true }, { propertyName: "eclNotificationComponent", first: true, predicate: EclSiteHeaderNotificationComponent, descendants: true }, { propertyName: "eclHeaderLink", first: true, predicate: i0.forwardRef(() => EclSiteHeaderLinkDirective), descendants: true }, { propertyName: "eclHeaderImage", first: true, predicate: i0.forwardRef(() => EclSiteHeaderImageDirective), descendants: true }], viewQueries: [{ propertyName: "topContainerElement", first: true, predicate: ["topContainer"], descendants: true }, { propertyName: "siteHeaderHeader", first: true, predicate: ["siteHeaderHeader"], descendants: true }, { propertyName: "bannerHeader", first: true, predicate: ["bannerHeader"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<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", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i3$1.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }, { kind: "directive", type: EclSiteHeaderPictureDirective, selector: "[eclSiteHeaderPicture]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclSiteHeaderComponent, isStandalone: true, selector: "ecl-site-header", inputs: { siteName: { classPropertyName: "siteName", publicName: "siteName", isSignal: false, isRequired: false, transformFunction: null }, languageCode: { classPropertyName: "languageCode", publicName: "languageCode", isSignal: false, isRequired: false, transformFunction: null }, logoSize: { classPropertyName: "logoSize", publicName: "logoSize", isSignal: true, isRequired: false, transformFunction: null }, isSiteNameMobileOnly: { classPropertyName: "isSiteNameMobileOnly", publicName: "isSiteNameMobileOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logoClick: "logoClick", languageClick: "languageClick" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclLoginComponent", first: true, predicate: EclSiteHeaderLoginComponent, descendants: true, isSignal: true }, { propertyName: "eclMenuComponent", first: true, predicate: EclMenuComponent, descendants: true, isSignal: true }, { propertyName: "eclMegaMenuComponent", first: true, predicate: EclMegaMenuComponent, descendants: true, isSignal: true }, { propertyName: "eclSearchComponent", first: true, predicate: EclSiteHeaderSearchComponent, descendants: true, isSignal: true }, { propertyName: "eclLanguageComponent", first: true, predicate: EclSiteHeaderLanguageComponent, descendants: true, isSignal: true }, { propertyName: "eclNotificationComponent", first: true, predicate: EclSiteHeaderNotificationComponent, descendants: true, isSignal: true }, { propertyName: "eclHeaderLink", first: true, predicate: i0.forwardRef(() => EclSiteHeaderLinkDirective), descendants: true, isSignal: true }, { propertyName: "eclHeaderImage", first: true, predicate: i0.forwardRef(() => EclSiteHeaderImageDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "topContainerElement", first: true, predicate: ["topContainer"], descendants: true, isSignal: true }, { propertyName: "siteHeaderHeader", first: true, predicate: ["siteHeaderHeader"], descendants: true, isSignal: true }, { propertyName: "bannerHeader", first: true, predicate: ["bannerHeader"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<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", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i3$1.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }, { kind: "directive", type: EclSiteHeaderPictureDirective, selector: "[eclSiteHeaderPicture]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclSiteHeaderComponent, decorators: [{
             type: Component,
@@ -1422,40 +1460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             }], logoSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoSize", required: false }] }], isSiteNameMobileOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSiteNameMobileOnly", required: false }] }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
-            }], logoClick: [{ type: i0.Output, args: ["logoClick"] }], languageClick: [{ type: i0.Output, args: ["languageClick"] }], topContainerElement: [{
-                type: ViewChild,
-                args: ['topContainer']
-            }], siteHeaderHeader: [{
-                type: ViewChild,
-                args: ['siteHeaderHeader']
-            }], bannerHeader: [{
-                type: ViewChild,
-                args: ['bannerHeader']
-            }], eclLoginComponent: [{
-                type: ContentChild,
-                args: [EclSiteHeaderLoginComponent]
-            }], eclMenuComponent: [{
-                type: ContentChild,
-                args: [EclMenuComponent]
-            }], eclMegaMenuComponent: [{
-                type: ContentChild,
-                args: [EclMegaMenuComponent]
-            }], eclSearchComponent: [{
-                type: ContentChild,
-                args: [EclSiteHeaderSearchComponent]
-            }], eclLanguageComponent: [{
-                type: ContentChild,
-                args: [EclSiteHeaderLanguageComponent]
-            }], eclNotificationComponent: [{
-                type: ContentChild,
-                args: [EclSiteHeaderNotificationComponent]
-            }], eclHeaderLink: [{
-                type: ContentChild,
-                args: [forwardRef(() => EclSiteHeaderLinkDirective), { descendants: true }]
-            }], eclHeaderImage: [{
-                type: ContentChild,
-                args: [forwardRef(() => EclSiteHeaderImageDirective), { descendants: true }]
-            }] } });
+            }], logoClick: [{ type: i0.Output, args: ["logoClick"] }], languageClick: [{ type: i0.Output, args: ["languageClick"] }], topContainerElement: [{ type: i0.ViewChild, args: ['topContainer', { isSignal: true }] }], siteHeaderHeader: [{ type: i0.ViewChild, args: ['siteHeaderHeader', { isSignal: true }] }], bannerHeader: [{ type: i0.ViewChild, args: ['bannerHeader', { isSignal: true }] }], eclLoginComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclSiteHeaderLoginComponent), { isSignal: true }] }], eclMenuComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclMenuComponent), { isSignal: true }] }], eclMegaMenuComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclMegaMenuComponent), { isSignal: true }] }], eclSearchComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclSiteHeaderSearchComponent), { isSignal: true }] }], eclLanguageComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclSiteHeaderLanguageComponent), { isSignal: true }] }], eclNotificationComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclSiteHeaderNotificationComponent), { isSignal: true }] }], eclHeaderLink: [{ type: i0.ContentChild, args: [forwardRef(() => EclSiteHeaderLinkDirective), { isSignal: true }] }], eclHeaderImage: [{ type: i0.ContentChild, args: [forwardRef(() => EclSiteHeaderImageDirective), { isSignal: true }] }] } });
 
 const EUI_ECL_SITE_HEADER = [
     EclSiteHeaderComponent,