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

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

@@ -1,8 +1,9 @@
 import * as i0 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, signal, Injectable } from '@angular/core';
+import { Component, inject, PLATFORM_ID, Directive, model, input, output, contentChild, forwardRef, ElementRef, Renderer2, afterNextRender, booleanAttribute, viewChild, NgZone, DOCUMENT, signal, Injectable } 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';
+import { outputToObservable } from '@angular/core/rxjs-interop';
 import * as i2 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i2$1 from '@eui/ecl/components/ecl-icon';
@@ -12,7 +13,6 @@ import * as i3 from '@eui/ecl/components/ecl-button';
 import { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { takeUntil as takeUntil$1 } from 'rxjs/operators';
-import { outputToObservable } from '@angular/core/rxjs-interop';
 import { GLOBAL_CONFIG_TOKEN, I18nService, EuiEuLanguages } from '@eui/core';
 import * as i3$1 from '@eui/ecl/components/ecl-link';
 import { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';
@@ -31,20 +31,15 @@ import { EUI_ECL_SEARCH_FORM } from '@eui/ecl/components/ecl-search-form';
  */
 // TODO: maybe could be part of the header, and we don't need this component?
 class EclSiteHeaderActionComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.class = 'ecl-site-header__action';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderActionComponent, isStandalone: true, selector: "ecl-site-header-action", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[eclSiteHeaderCustomAction]\"></ng-content>\n<ng-content select=\"ecl-site-header-login\"></ng-content>\n<ng-content select=\"ecl-site-header-language\"></ng-content>\n<ng-content select=\"ecl-site-header-search\"></ng-content>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderActionComponent, isStandalone: true, selector: "ecl-site-header-action", host: { classAttribute: "ecl-site-header__action" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[eclSiteHeaderCustomAction]\"></ng-content>\n<ng-content select=\"ecl-site-header-login\"></ng-content>\n<ng-content select=\"ecl-site-header-language\"></ng-content>\n<ng-content select=\"ecl-site-header-search\"></ng-content>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header-action', template: "<ng-content select=\"[eclSiteHeaderCustomAction]\"></ng-content>\n<ng-content select=\"ecl-site-header-login\"></ng-content>\n<ng-content select=\"ecl-site-header-language\"></ng-content>\n<ng-content select=\"ecl-site-header-search\"></ng-content>\n" }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{ selector: 'ecl-site-header-action', host: {
+                        class: 'ecl-site-header__action',
+                    }, template: "<ng-content select=\"[eclSiteHeaderCustomAction]\"></ng-content>\n<ng-content select=\"ecl-site-header-login\"></ng-content>\n<ng-content select=\"ecl-site-header-language\"></ng-content>\n<ng-content select=\"ecl-site-header-search\"></ng-content>\n" }]
+        }] });
 
 /**
  * @deprecated This component is deprecated and will be removed in v23. Not used anymore.
@@ -54,7 +49,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
 class EclSiteHeaderBannerTopComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
-        this.className = true;
         this.platformId = inject(PLATFORM_ID);
     }
     ngOnInit() {
@@ -63,43 +57,41 @@ class EclSiteHeaderBannerTopComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderBannerTopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderBannerTopComponent, isStandalone: true, selector: "ecl-site-header-banner-top", host: { properties: { "class.ecl-site-header__banner-top": "this.className" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-container\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderBannerTopComponent, isStandalone: true, selector: "ecl-site-header-banner-top", host: { classAttribute: "ecl-site-header__banner-top" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-container\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderBannerTopComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header-banner-top', template: "<div class=\"ecl-container\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.ecl-site-header__banner-top']
-            }] } });
+            args: [{ selector: 'ecl-site-header-banner-top', host: {
+                        class: 'ecl-site-header__banner-top',
+                    }, template: "<div class=\"ecl-container\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"] }]
+        }] });
 
 /**
  * This directive is used, when we want to show call-to-action link in the site-header. Used in harmonised and standardised header
  *  variants.
  */
 class EclSiteHeaderCtaDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.className = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderCtaDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderCtaDirective, isStandalone: true, selector: "[eclSiteHeaderCta]", host: { properties: { "class.ecl-site-header__cta": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderCtaDirective, isStandalone: true, selector: "[eclSiteHeaderCta]", host: { classAttribute: "ecl-site-header__cta" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderCtaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclSiteHeaderCta]',
+                    host: {
+                        class: 'ecl-site-header__cta',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.ecl-site-header__cta']
-            }] } });
+        }] });
 
 class EclSiteHeaderCustomActionLinkDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
-        this.className = 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral ecl-button--icon-only';
-        this.customActionOverlayToggle = new EventEmitter();
+        this.href = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
+        this.routerLink = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "routerLink" }] : /* istanbul ignore next */ []));
+        this.customActionOverlayToggle = output();
         this.eclIconComponent = contentChild(forwardRef(() => EclIconComponent), { ...(ngDevMode ? { debugName: "eclIconComponent" } : /* istanbul ignore next */ {}), descendants: true });
         this.ARIA_CONTROLS = 'custom-action-overlay';
         this.platformId = inject(PLATFORM_ID);
@@ -111,7 +103,7 @@ class EclSiteHeaderCustomActionLinkDirective extends ECLBaseDirective {
             this.eclIconComponent().addExtraClass('ecl-site-header__icon');
         }
         if (!this.hasLink()) {
-            this.href = '#';
+            this.href.set('#');
             this.isOverlayExpanded = false;
             this.ariaControls = this.ARIA_CONTROLS;
         }
@@ -124,81 +116,57 @@ class EclSiteHeaderCustomActionLinkDirective extends ECLBaseDirective {
         }
     }
     hasLink() {
-        return (!!this.href && this.href !== '#') || !!this.routerLink;
+        return (!!this.href() && this.href() !== '#') || !!this.routerLink();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderCustomActionLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.2", type: EclSiteHeaderCustomActionLinkDirective, isStandalone: true, selector: "a[eclSiteHeaderCustomActionLink]", inputs: { href: "href", routerLink: "routerLink" }, outputs: { customActionOverlayToggle: "customActionOverlayToggle" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "this.className", "attr.aria-expanded": "this.isOverlayExpanded", "attr.aria-controls": "this.ariaControls", "attr.href": "this.href", "attr.routerLink": "this.routerLink" } }, queries: [{ propertyName: "eclIconComponent", first: true, predicate: i0.forwardRef(() => EclIconComponent), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.2", type: EclSiteHeaderCustomActionLinkDirective, isStandalone: true, selector: "a[eclSiteHeaderCustomActionLink]", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { href: "hrefChange", customActionOverlayToggle: "customActionOverlayToggle" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.aria-expanded": "isOverlayExpanded", "attr.aria-controls": "ariaControls", "attr.href": "href()", "attr.routerLink": "routerLink()" }, classAttribute: "ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral ecl-button--icon-only" }, queries: [{ propertyName: "eclIconComponent", first: true, predicate: i0.forwardRef(() => EclIconComponent), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderCustomActionLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'a[eclSiteHeaderCustomActionLink]',
+                    host: {
+                        class: 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral ecl-button--icon-only',
+                        '[attr.aria-expanded]': 'isOverlayExpanded',
+                        '[attr.aria-controls]': 'ariaControls',
+                        '[attr.href]': 'href()',
+                        '[attr.routerLink]': 'routerLink()',
+                        '(click)': 'onClick($event)',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }], isOverlayExpanded: [{
-                type: HostBinding,
-                args: ['attr.aria-expanded']
-            }], ariaControls: [{
-                type: HostBinding,
-                args: ['attr.aria-controls']
-            }], href: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.href']
-            }], routerLink: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.routerLink']
-            }], customActionOverlayToggle: [{
-                type: Output
-            }], eclIconComponent: [{ type: i0.ContentChild, args: [forwardRef(() => EclIconComponent), { ...{ descendants: true }, isSignal: true }] }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
+        }], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }, { type: i0.Output, args: ["hrefChange"] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], customActionOverlayToggle: [{ type: i0.Output, args: ["customActionOverlayToggle"] }], eclIconComponent: [{ type: i0.ContentChild, args: [forwardRef(() => EclIconComponent), { ...{ descendants: true }, isSignal: true }] }] } });
 class EclSiteHeaderCustomActionContentDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.className = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderCustomActionContentDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderCustomActionContentDirective, isStandalone: true, selector: "div[eclSiteHeaderCustomActionContent]", host: { properties: { "class.ecl-site-header__custom-action-content": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderCustomActionContentDirective, isStandalone: true, selector: "div[eclSiteHeaderCustomActionContent]", host: { classAttribute: "ecl-site-header__custom-action-content" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderCustomActionContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'div[eclSiteHeaderCustomActionContent]',
+                    host: {
+                        class: 'ecl-site-header__custom-action-content',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.ecl-site-header__custom-action-content']
-            }] } });
+        }] });
 class EclSiteHeaderCustomActionTitleDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
-        this.className = true;
-        this.id = 'custom-action-overlay-title';
+        this.id = input('custom-action-overlay-title', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderCustomActionTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderCustomActionTitleDirective, isStandalone: true, selector: "div[eclSiteHeaderCustomActionTitle]", inputs: { id: "id" }, host: { properties: { "class.ecl-site-header__custom-action-title": "this.className", "attr.id": "this.id" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: EclSiteHeaderCustomActionTitleDirective, isStandalone: true, selector: "div[eclSiteHeaderCustomActionTitle]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()" }, classAttribute: "ecl-site-header__custom-action-title" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderCustomActionTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'div[eclSiteHeaderCustomActionTitle]',
+                    host: {
+                        class: 'ecl-site-header__custom-action-title',
+                        '[attr.id]': 'id()',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.ecl-site-header__custom-action-title']
-            }], id: [{
-                type: HostBinding,
-                args: ['attr.id']
-            }, {
-                type: Input
-            }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 /**
  * This components gives opportunity for user to add a custom action. It will appear at first place, before log-in and language
@@ -207,26 +175,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
 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.
          */
         this.isOverlayExpanded = false;
+        this.title = contentChild(EclSiteHeaderCustomActionTitleDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.eclSiteHeaderCustomActionLink = contentChild(EclSiteHeaderCustomActionLinkDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclSiteHeaderCustomActionLink" }] : /* istanbul ignore next */ []));
         this.destroy$ = new Subject();
     }
     ngAfterContentInit() {
         const title = this.title();
         if (title) {
-            this.titleId = title.id;
+            this.titleId = title.id();
         }
         // Subscribe to link output, which toggles the dropdown.
         const eclSiteHeaderCustomActionLink = this.eclSiteHeaderCustomActionLink();
         if (eclSiteHeaderCustomActionLink) {
-            eclSiteHeaderCustomActionLink.customActionOverlayToggle.pipe(takeUntil(this.destroy$)).subscribe((isExpanded) => {
+            outputToObservable(eclSiteHeaderCustomActionLink.customActionOverlayToggle).pipe(takeUntil(this.destroy$)).subscribe((isExpanded) => {
                 this.isOverlayExpanded = isExpanded;
             });
         }
@@ -257,7 +224,7 @@ class EclSiteHeaderCustomActionComponent extends ECLBaseDirective {
         this.onCustomActionOverlayClose();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderCustomActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclSiteHeaderCustomActionComponent, isStandalone: true, selector: "div[eclSiteHeaderCustomAction]", host: { listeners: { "eclClickOutside": "onClickOutsideHandler()", "document:keydown.escape": "onEscapeKeydownHandler()" }, classAttribute: "ecl-site-header__custom-action" }, 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.1.2", ngImport: i0, type: EclSiteHeaderCustomActionComponent, decorators: [{
             type: Component,
@@ -266,17 +233,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                             directive: ECLClickOutsideDirective,
                             outputs: ['eclClickOutside'],
                         },
-                    ], 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" }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], 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: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }] } });
+                    ], host: {
+                        class: 'ecl-site-header__custom-action',
+                        '(eclClickOutside)': 'onClickOutsideHandler()',
+                        '(document:keydown.escape)': 'onEscapeKeydownHandler()',
+                    }, 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" }]
+        }], propDecorators: { title: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclSiteHeaderCustomActionTitleDirective), { isSignal: true }] }], eclSiteHeaderCustomActionLink: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclSiteHeaderCustomActionLinkDirective), { isSignal: true }] }] } });
 
 /**
  * Custom component, that shows the current environment of the application, for example 'develop', 'acceptance', etc.
@@ -335,15 +297,14 @@ class EclSiteHeaderEnvironmentComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderEnvironmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderEnvironmentComponent, isStandalone: true, selector: "[eclSiteHeaderEnvironment]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{position:absolute;width:100%;font-size:1.3rem;padding:.3rem;opacity:.6;text-align:center;transform:rotate(-10deg)}@media print{:host{display:none}}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderEnvironmentComponent, isStandalone: true, selector: "[eclSiteHeaderEnvironment]", host: { properties: { "class": "cssClasses" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{position:absolute;width:100%;font-size:1.3rem;padding:.3rem;opacity:.6;text-align:center;transform:rotate(-10deg)}@media print{:host{display:none}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderEnvironmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[eclSiteHeaderEnvironment]', template: '<ng-content></ng-content>', styles: [":host{position:absolute;width:100%;font-size:1.3rem;padding:.3rem;opacity:.6;text-align:center;transform:rotate(-10deg)}@media print{:host{display:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{ selector: '[eclSiteHeaderEnvironment]', template: '<ng-content></ng-content>', host: {
+                        '[class]': 'cssClasses',
+                    }, styles: [":host{position:absolute;width:100%;font-size:1.3rem;padding:.3rem;opacity:.6;text-align:center;transform:rotate(-10deg)}@media print{:host{display:none}}\n"] }]
+        }], ctorParameters: () => [] });
 
 class EclSiteHeaderLoginEvent extends EclBaseEvent {
 }
@@ -406,13 +367,10 @@ class EclAreaChangeEvent {
 class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
     constructor() {
         super();
-        this.el = inject(ElementRef);
-        this.eclThemeService = inject(EclThemeService);
         /**
-         * The div, that wraps all the languages.
+         * Host element reference. Read by the parent `ecl-site-header-language` for positioning.
          */
-        this.languageContent = viewChild('languageContent', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "languageContent" }] : /* istanbul ignore next */ []));
+        this.el = inject(ElementRef);
         /**
          * Current language
          */
@@ -469,6 +427,12 @@ class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
         ...(ngDevMode ? [{ debugName: "languageArrowPosition" }] : /* istanbul ignore next */ []));
         this.languageClosed = output();
         this.languageSelected = output();
+        this.eclThemeService = inject(EclThemeService);
+        /**
+         * The div, that wraps all the languages.
+         */
+        this.languageContent = viewChild('languageContent', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "languageContent" }] : /* istanbul ignore next */ []));
         this.destroy$ = new Subject();
         this.scrollDispatcher = inject(ScrollDispatcher);
         this.zone = inject(NgZone);
@@ -550,7 +514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         '[attr.aria-modal]': 'isModal',
                         '[attr.hidden]': 'isDropdownHidden',
                     }, 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: i0.ViewChild, args: ['languageContent', { isSignal: true }] }], languageCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "languageCode", required: false }] }], euLanguages: [{ type: i0.Input, args: [{ isSignal: true, alias: "euLanguages", required: false }] }], nonEuLanguages: [{ type: i0.Input, args: [{ isSignal: true, alias: "nonEuLanguages", required: false }] }], euColumnsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "euColumnsCount", required: false }] }], nonEuColumnsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "nonEuColumnsCount", required: false }] }], isHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHidden", required: false }] }], isPushRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPushRight", required: false }] }], isPushLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPushLeft", required: false }] }], isStack: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStack", required: false }] }], isFull: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFull", required: false }] }], rightPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightPosition", required: false }] }], leftPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftPosition", required: false }] }], languageArrowPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "languageArrowPosition", required: false }] }], languageClosed: [{ type: i0.Output, args: ["languageClosed"] }], languageSelected: [{ type: i0.Output, args: ["languageSelected"] }] } });
+        }], ctorParameters: () => [], propDecorators: { languageCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "languageCode", required: false }] }], euLanguages: [{ type: i0.Input, args: [{ isSignal: true, alias: "euLanguages", required: false }] }], nonEuLanguages: [{ type: i0.Input, args: [{ isSignal: true, alias: "nonEuLanguages", required: false }] }], euColumnsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "euColumnsCount", required: false }] }], nonEuColumnsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "nonEuColumnsCount", required: false }] }], isHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHidden", required: false }] }], isPushRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPushRight", required: false }] }], isPushLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPushLeft", required: false }] }], isStack: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStack", required: false }] }], isFull: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFull", required: false }] }], rightPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightPosition", required: false }] }], leftPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftPosition", required: false }] }], languageArrowPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "languageArrowPosition", required: false }] }], languageClosed: [{ type: i0.Output, args: ["languageClosed"] }], languageSelected: [{ type: i0.Output, args: ["languageSelected"] }], languageContent: [{ type: i0.ViewChild, args: ['languageContent', { isSignal: true }] }] } });
 
 /** Half the arrow's own width, matching ECL's `arrowSize`. */
 const ARROW_SIZE$2 = '0.5rem';
@@ -561,19 +525,22 @@ const ARROW_SIZE$2 = '0.5rem';
 class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
-        this.eclThemeService = inject(EclThemeService);
-        this.config = inject(GLOBAL_CONFIG_TOKEN, { optional: true });
-        this.i18nService = inject(I18nService);
         /**
          * Thie event is emited, when language link, showing the current language is clicked.
          */
-        this.languageClick = new EventEmitter();
+        this.languageClick = output();
         /**
          * Thie event is emited, when user selects a new language from the dropdown.
          */
-        this.languageSelected = new EventEmitter();
-        this.isLanguagesDropdownVisible = false;
+        this.languageSelected = output();
+        /**
+         * Current language code. Read and written by the parent `ecl-site-header`.
+         */
         this.languageCode = 'en';
+        this.eclThemeService = inject(EclThemeService);
+        this.config = inject(GLOBAL_CONFIG_TOKEN, { optional: true });
+        this.i18nService = inject(I18nService);
+        this.isLanguagesDropdownVisible = false;
         /**
          * Array of EU languages, that can be selected for the current site.
          */
@@ -641,7 +608,7 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
             // Matches ECL's updateOverlayPosition call in toggleOverlay.
             requestAnimationFrame(() => this.calculatePopoverPosition());
         }
-        this.languageClick.next(new EclSiteHeaderLanguageClickEvent());
+        this.languageClick.emit(new EclSiteHeaderLanguageClickEvent());
         evt.preventDefault();
     }
     onLanguageClosed(evt) {
@@ -651,7 +618,7 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
         this.languageCode = evt.language.code;
         this.updateCurrentLanguage(evt.language.code);
         this.isLanguagesDropdownVisible = false;
-        this.languageSelected.next(new EclSiteHeaderLanguageSelectedEvent(evt.language));
+        this.languageSelected.emit(new EclSiteHeaderLanguageSelectedEvent(evt.language));
     }
     /**
      * Close the dropdown, when clicking outside of the component.
@@ -804,11 +771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         '(eclClickOutside)': 'onClickOutside()',
                         '(document:keydown.escape)': 'onEscapeKeydownHandler()',
                     }, 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: { languageClick: [{
-                type: Output
-            }], languageSelected: [{
-                type: Output
-            }], languagePopover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EclSiteHeaderLanguagePopoverComponent), { isSignal: true }] }], languageLinkElement: [{ type: i0.ViewChild, args: ['languageLink', { ...{ read: ElementRef }, isSignal: true }] }] } });
+        }], propDecorators: { languageClick: [{ type: i0.Output, args: ["languageClick"] }], languageSelected: [{ type: i0.Output, args: ["languageSelected"] }], languagePopover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EclSiteHeaderLanguagePopoverComponent), { isSignal: true }] }], languageLinkElement: [{ type: i0.ViewChild, args: ['languageLink', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 /** Half the arrow's own width, matching ECL's `arrowSize`. */
 const ARROW_SIZE$1 = '0.5rem';
@@ -823,7 +786,7 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
         super();
         this.isLoggedIn = input(false, { ...(ngDevMode ? { debugName: "isLoggedIn" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.login = output();
-        this.loginBoxToggle = new EventEmitter();
+        this.loginBoxToggle = output();
         /**
          * If login popover is open (true) or closed (false). Kept public because the parent
          * `ecl-site-header` resets it directly when the search box opens.
@@ -890,7 +853,7 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
     onLoginBoxToggle(evt) {
         this.isLoginBoxActive = !this.isLoginBoxActive;
         const event = new EclSiteHeaderLoginBoxToggleEvent(this.isLoginBoxActive);
-        this.loginBoxToggle.next(event);
+        this.loginBoxToggle.emit(event);
         evt.preventDefault();
         if (this.isLoginBoxActive) {
             // Measure after the '--active' class is applied and the box reflows to full width.
@@ -901,7 +864,7 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
         if (this.isLoginBoxActive) {
             this.isLoginBoxActive = false;
             const event = new EclSiteHeaderLoginBoxToggleEvent(this.isLoginBoxActive);
-            this.loginBoxToggle.next(event);
+            this.loginBoxToggle.emit(event);
             this.loginArrowPosition.set(undefined);
         }
     }
@@ -939,51 +902,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         class: 'ecl-site-header__login-container',
                         '(eclClickOutside)': 'onClickOutside()',
                     }, 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        #loginBox\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition()}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { isLoggedIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoggedIn", required: false }] }], login: [{ type: i0.Output, args: ["login"] }], loginBoxToggle: [{
-                type: Output
-            }], loginLinkElement: [{ type: i0.ViewChild, args: ['loginLink', { ...{ read: ElementRef }, isSignal: true }] }], loginBoxElement: [{ type: i0.ViewChild, args: ['loginBox', { ...{ read: ElementRef }, isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { isLoggedIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoggedIn", required: false }] }], login: [{ type: i0.Output, args: ["login"] }], loginBoxToggle: [{ type: i0.Output, args: ["loginBoxToggle"] }], loginLinkElement: [{ type: i0.ViewChild, args: ['loginLink', { ...{ read: ElementRef }, isSignal: true }] }], loginBoxElement: [{ type: i0.ViewChild, args: ['loginBox', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 /**
  * This directive is used to add specific class for the login description element, within the login dropdown.
  */
 class EclSiteHeaderLoginDescriptionDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.className = 'ecl-site-header__login-description';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderLoginDescriptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderLoginDescriptionDirective, isStandalone: true, selector: "[eclSiteHeaderLoginDescription]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderLoginDescriptionDirective, isStandalone: true, selector: "[eclSiteHeaderLoginDescription]", host: { classAttribute: "ecl-site-header__login-description" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderLoginDescriptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclSiteHeaderLoginDescription]',
+                    host: {
+                        class: 'ecl-site-header__login-description',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 /**
  * This directive is used to add specific class for the horizontal line, that separates
  *  description from the 'Logout' link.
  */
 class EclSiteHeaderLoginSeparatorDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.className = 'ecl-site-header__login-separator';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderLoginSeparatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderLoginSeparatorDirective, isStandalone: true, selector: "[eclSiteHeaderLoginSeparator]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderLoginSeparatorDirective, isStandalone: true, selector: "[eclSiteHeaderLoginSeparator]", host: { classAttribute: "ecl-site-header__login-separator" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderLoginSeparatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclSiteHeaderLoginSeparator]',
+                    host: {
+                        class: 'ecl-site-header__login-separator',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 
 /**
  * This component is used as a wrapper around ecl-notification component, when used in the site-header. Adds specific class
@@ -1004,39 +957,32 @@ class EclSiteHeaderNotificationComponent extends ECLBaseDirective {
         this.display = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderNotificationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderNotificationComponent, isStandalone: true, selector: "ecl-site-header-notification", host: { properties: { "class": "this.cssClasses", "style.display": "this.display" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-container\">\n    <ng-content></ng-content>\n</div>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderNotificationComponent, isStandalone: true, selector: "ecl-site-header-notification", host: { properties: { "class": "cssClasses", "style.display": "display" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-container\">\n    <ng-content></ng-content>\n</div>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header-notification', template: "<div class=\"ecl-container\">\n    <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], display: [{
-                type: HostBinding,
-                args: ['style.display']
-            }] } });
+            args: [{ selector: 'ecl-site-header-notification', host: {
+                        '[class]': 'cssClasses',
+                        '[style.display]': 'display',
+                    }, template: "<div class=\"ecl-container\">\n    <ng-content></ng-content>\n</div>\n" }]
+        }] });
 
 /**
  * Adds some specific classes for picture element, when used in the site header logo.
  */
 class EclSiteHeaderPictureDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.className = 'ecl-site-header__picture ecl-picture';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderPictureDirective, isStandalone: true, selector: "[eclSiteHeaderPicture]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderPictureDirective, isStandalone: true, selector: "[eclSiteHeaderPicture]", host: { classAttribute: "ecl-site-header__picture ecl-picture" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderPictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclSiteHeaderPicture]',
+                    host: {
+                        class: 'ecl-site-header__picture ecl-picture',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 /**
  * Adds some specific classes for <img> element, when used in the site header logo.
  */
@@ -1048,37 +994,33 @@ class EclSiteHeaderImageDirective extends ECLBaseDirective {
         ].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderImageDirective, isStandalone: true, selector: "[eclSiteHeaderImage]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderImageDirective, isStandalone: true, selector: "[eclSiteHeaderImage]", host: { properties: { "class": "cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclSiteHeaderImage]',
+                    host: {
+                        '[class]': 'cssClasses',
+                    },
                 }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 /**
  * Adds some specific classes for <a> element, when used in the site header logo.
  */
 class EclSiteHeaderLinkDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.className = 'ecl-link ecl-link--standalone ecl-site-header__logo-link';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderLinkDirective, isStandalone: true, selector: "[eclSiteHeaderLink]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclSiteHeaderLinkDirective, isStandalone: true, selector: "[eclSiteHeaderLink]", host: { classAttribute: "ecl-link ecl-link--standalone ecl-site-header__logo-link" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclSiteHeaderLink]',
+                    host: {
+                        class: 'ecl-link ecl-link--standalone ecl-site-header__logo-link',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 
 const ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -1099,12 +1041,14 @@ const RESIZE_DEBOUNCE = 200;
 class EclSiteHeaderSearchComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
+        this.searchInputText = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "searchInputText" }] : /* istanbul ignore next */ []));
         this.searchInputPlaceholder = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchInputPlaceholder" }] : /* istanbul ignore next */ []));
         this.searchButtonLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchButtonLabel" }] : /* istanbul ignore next */ []));
         this.searchEvent = output();
-        this.searchToggle = new EventEmitter();
+        this.searchToggle = output();
         /**
          * Whether the search dropdown is open. Kept public because the parent
          * `ecl-site-header` resets it directly when the login box opens.
@@ -1151,7 +1095,7 @@ class EclSiteHeaderSearchComponent extends ECLBaseDirective {
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     writeValue(value) {
-        this.searchInputText = value;
+        this.searchInputText.set(value);
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     registerOnChange(fn) {
@@ -1175,7 +1119,7 @@ class EclSiteHeaderSearchComponent extends ECLBaseDirective {
     onSearchBoxToggle(evt) {
         this.isSearchBoxActive = !this.isSearchBoxActive;
         const event = new EclSiteHeaderSearchToggleEvent(this.isSearchBoxActive);
-        this.searchToggle.next(event);
+        this.searchToggle.emit(event);
         evt.preventDefault();
         // Measure after the `--active` class is applied and the box reflows to
         // full width (matching ECL's toggleSearch -> setSearchArrow order).
@@ -1191,14 +1135,14 @@ class EclSiteHeaderSearchComponent extends ECLBaseDirective {
         return ['ecl-site-header__search', this.isSearchBoxActive ? 'ecl-site-header__search--active' : ''].join(' ');
     }
     onModelChange(newValue) {
-        this.searchInputText = newValue;
+        this.searchInputText.set(newValue);
         this.onChange(newValue);
     }
     closeSearchBox() {
         if (!this.isSearchBoxActive)
             return;
         this.isSearchBoxActive = false;
-        this.searchToggle.next(new EclSiteHeaderSearchToggleEvent(this.isSearchBoxActive));
+        this.searchToggle.emit(new EclSiteHeaderSearchToggleEvent(this.isSearchBoxActive));
         this.searchArrowPosition.set(undefined);
     }
     /**
@@ -1224,7 +1168,7 @@ class EclSiteHeaderSearchComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", 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: { attributes: { "role": "search" }, listeners: { "eclClickOutside": "onClickOutside()" }, classAttribute: "ecl-site-header__search-container" }, providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], viewQueries: [{ propertyName: "searchLinkElement", first: true, predicate: ["searchLink"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchFormElement", first: true, predicate: ["searchForm"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], 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    #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", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$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.1.2", type: EclSiteHeaderSearchComponent, isStandalone: true, selector: "ecl-site-header-search", inputs: { searchInputText: { classPropertyName: "searchInputText", publicName: "searchInputText", isSignal: true, 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: { searchInputText: "searchInputTextChange", searchEvent: "searchEvent", searchToggle: "searchToggle" }, host: { attributes: { "role": "search" }, listeners: { "eclClickOutside": "onClickOutside()" }, classAttribute: "ecl-site-header__search-container" }, providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], viewQueries: [{ propertyName: "searchLinkElement", first: true, predicate: ["searchLink"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchFormElement", first: true, predicate: ["searchForm"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], 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    #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", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$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.1.2", ngImport: i0, type: EclSiteHeaderSearchComponent, decorators: [{
             type: Component,
@@ -1238,12 +1182,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         // The default role of the component is 'search', should not be changed.
                         role: 'search',
                         '(eclClickOutside)': 'onClickOutside()',
-                    }, 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    #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", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { 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 }] }], searchEvent: [{ type: i0.Output, args: ["searchEvent"] }], searchToggle: [{
-                type: Output
-            }], searchLinkElement: [{ type: i0.ViewChild, args: ['searchLink', { ...{ read: ElementRef }, isSignal: true }] }], searchFormElement: [{ type: i0.ViewChild, args: ['searchForm', { ...{ read: ElementRef }, isSignal: true }] }] } });
+                    }, 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    #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", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { searchInputText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchInputText", required: false }] }, { type: i0.Output, args: ["searchInputTextChange"] }], searchInputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchInputPlaceholder", required: false }] }], searchButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchButtonLabel", required: false }] }], searchEvent: [{ type: i0.Output, args: ["searchEvent"] }], searchToggle: [{ type: i0.Output, args: ["searchToggle"] }], searchLinkElement: [{ type: i0.ViewChild, args: ['searchLink', { ...{ read: ElementRef }, isSignal: true }] }], searchFormElement: [{ type: i0.ViewChild, args: ['searchForm', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 /**
  * This class is used for methods, that serve for communication between the components in ecl-side-header.
@@ -1285,19 +1225,23 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
             `ecl-site-header-with-logo-${this.logoSize()}`,
             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' : '',
+            this.isEclMegaMenuOpen() ? 'ecl-site-header--open-menu' : '',
+            this.isEclMegaMenuStart() ? 'ecl-site-header--open-menu-start' : '',
+            this.isRtl() ? 'ecl-site-header--rtl' : '',
         ].join(' ').trim();
     }
     constructor() {
         super();
-        this.eclThemeService = inject(EclThemeService);
-        this.i18nService = inject(I18nService);
+        /**
+         * The name of the site, to be added in the header, next to the logo.
+         */
+        this.siteName = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "siteName" }] : /* istanbul ignore next */ []));
         /**
          * Language code of the current language of the site.
          */
-        this.languageCode = 'en';
+        this.languageCode = model('en', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "languageCode" }] : /* istanbul ignore next */ []));
         /**
          * The size of the logo, 's', 'm' or 'l', default to 'm'.
          */
@@ -1331,11 +1275,16 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         ...(ngDevMode ? [{ debugName: "eclHeaderLink" }] : /* istanbul ignore next */ []));
         this.eclHeaderImage = contentChild(forwardRef(() => EclSiteHeaderImageDirective), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "eclHeaderImage" }] : /* istanbul ignore next */ []));
+        this.eclThemeService = inject(EclThemeService);
+        this.i18nService = inject(I18nService);
         this.destroy$ = new Subject();
-        this.isEclMegaMenuOpen = false;
-        this.isEclMegaMenuStart = false;
+        this.isEclMegaMenuOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isEclMegaMenuOpen" }] : /* istanbul ignore next */ []));
+        this.isEclMegaMenuStart = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isEclMegaMenuStart" }] : /* istanbul ignore next */ []));
         this.isMobileBreakpoint = false;
-        this.isRtl = false;
+        this.isRtl = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
         this.TIMEOUT_INTERVAL = 100;
         this.eclRtlService = inject(EclRtlService);
         this.eclHeaderMenuComunicationService = inject(EclHeaderMenuComunicationService);
@@ -1369,27 +1318,27 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         const eclLoginComponent = this.eclLoginComponent();
         const eclSearchComponent = this.eclSearchComponent();
         if (eclLoginComponent && eclSearchComponent) {
-            eclLoginComponent.loginBoxToggle.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            outputToObservable(eclLoginComponent.loginBoxToggle).pipe(takeUntil(this.destroy$)).subscribe((evt) => {
                 this.eclSearchComponent().isSearchBoxActive = false;
                 this.sendResizeEventToChildComponents();
             });
-            eclSearchComponent.searchToggle.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            outputToObservable(eclSearchComponent.searchToggle).pipe(takeUntil(this.destroy$)).subscribe((evt) => {
                 this.eclLoginComponent().isLoginBoxActive = false;
                 this.sendResizeEventToChildComponents();
             });
         }
         const eclLanguageComponent = this.eclLanguageComponent();
         if (eclLanguageComponent) {
-            eclLanguageComponent.languageClick.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            outputToObservable(eclLanguageComponent.languageClick).pipe(takeUntil(this.destroy$)).subscribe((evt) => {
                 this.languageClick.emit(new EclSiteHeaderLanguageClickEvent());
                 this.sendResizeEventToChildComponents();
             });
-            eclLanguageComponent.languageSelected.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
-                this.languageCode = evt.language?.code;
+            outputToObservable(eclLanguageComponent.languageSelected).pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+                this.languageCode.set(evt.language?.code);
             });
         }
         if (eclLanguageComponent) {
-            this.languageCode = eclLanguageComponent?.languageCode;
+            this.languageCode.set(eclLanguageComponent?.languageCode);
         }
         const eclMenuComponent = this.eclMenuComponent();
         if (eclMenuComponent) {
@@ -1407,7 +1356,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
      * In this case, a default logo is returned.
      */
     get partOfLogoName() {
-        return logoLanguageCode(this.languageCode);
+        return logoLanguageCode(this.languageCode());
     }
     onECLogoClick(evt) {
         const event = new EclSiteHeaderLogoClickEvent();
@@ -1421,7 +1370,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
     }
     handleRtlChangeState() {
         this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {
-            this.isRtl = rtlState;
+            this.isRtl.set(rtlState);
         });
     }
     /**
@@ -1439,8 +1388,8 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
     subscribeToMegaMenuEvents() {
         this.eclHeaderMenuComunicationService.isMobileObjectOpen$.pipe(takeUntil(this.destroy$)).subscribe(isExpanded => {
             if (this.isMobileBreakpoint) {
-                this.isEclMegaMenuStart = isExpanded;
-                this.isEclMegaMenuOpen = isExpanded;
+                this.isEclMegaMenuStart.set(isExpanded);
+                this.isEclMegaMenuOpen.set(isExpanded);
             }
             if (isExpanded) {
                 const bottomSpaceY = this.el.nativeElement.getBoundingClientRect().bottom;
@@ -1457,7 +1406,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
                 }
             }
             else {
-                this.isEclMegaMenuOpen = isExpanded;
+                this.isEclMegaMenuOpen.set(isExpanded);
                 if (isExpanded) {
                     const bottomSpaceY = this.el.nativeElement.getBoundingClientRect().bottom;
                     this.eclMegaMenuComponent().positionMenuOverlay(bottomSpaceY);
@@ -1466,7 +1415,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         });
     }
     onMegaMenuItemExpandMobile() {
-        this.isEclMegaMenuStart = false;
+        this.isEclMegaMenuStart.set(false);
         const eclNotificationComponent = this.eclNotificationComponent();
         if (eclNotificationComponent) {
             eclNotificationComponent.onHide();
@@ -1479,7 +1428,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         this.eclMegaMenuComponent().positionMenuOverlay(bottomSpaceY);
     }
     onMegaMenuItemCollapseMobile() {
-        this.isEclMegaMenuStart = true;
+        this.isEclMegaMenuStart.set(true);
         const eclNotificationComponent = this.eclNotificationComponent();
         if (eclNotificationComponent) {
             eclNotificationComponent.onShow();
@@ -1505,7 +1454,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
     }
     handleLanguageChangeState() {
         this.i18nService.getState().pipe(takeUntil(this.destroy$)).subscribe((lang) => {
-            this.languageCode = lang.activeLang;
+            this.languageCode.set(lang.activeLang);
             const eclLanguageComponent = this.eclLanguageComponent();
             if (eclLanguageComponent) {
                 eclLanguageComponent.languageCode = lang.activeLang;
@@ -1513,19 +1462,14 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclSiteHeaderComponent, isStandalone: true, selector: "ecl-site-header", inputs: { siteName: { classPropertyName: "siteName", publicName: "siteName", isSignal: true, isRequired: false, transformFunction: null }, languageCode: { classPropertyName: "languageCode", publicName: "languageCode", isSignal: true, 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: { languageCode: "languageCodeChange", logoClick: "logoClick", languageClick: "languageClick" }, host: { properties: { "class": "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.1.2", ngImport: i0, type: EclSiteHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header', imports: [AsyncPipe, TranslatePipe, ...EUI_ECL_LINK, EclSiteHeaderPictureDirective], 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"] }]
-        }], ctorParameters: () => [], propDecorators: { siteName: [{
-                type: Input
-            }], languageCode: [{
-                type: Input
-            }], 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: 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 }] }] } });
+            args: [{ selector: 'ecl-site-header', imports: [AsyncPipe, TranslatePipe, ...EUI_ECL_LINK, EclSiteHeaderPictureDirective], host: {
+                        '[class]': 'cssClasses',
+                    }, 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"] }]
+        }], ctorParameters: () => [], propDecorators: { siteName: [{ type: i0.Input, args: [{ isSignal: true, alias: "siteName", required: false }] }], languageCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "languageCode", required: false }] }, { type: i0.Output, args: ["languageCodeChange"] }], logoSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoSize", required: false }] }], isSiteNameMobileOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSiteNameMobileOnly", required: false }] }], 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,