@eui/ecl 19.3.3-snapshot-1754580137043 → 19.3.3-snapshot-1754592815527

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

@@ -1,32 +1,30 @@
-import * as i7 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { HostBinding, Component, Directive, afterNextRender, EventEmitter, HostListener, Output, Input, ViewChild, Injectable, ElementRef, Optional, Inject, booleanAttribute, forwardRef, ContentChild, NgModule } from '@angular/core';
-import * as i4 from '@angular/cdk/a11y';
+import { HostBinding, Component, Directive, EventEmitter, HostListener, forwardRef, ContentChild, Output, Input, afterNextRender, ViewChild, Injectable, ElementRef, Optional, Inject, booleanAttribute, NgModule } from '@angular/core';
+import * as i2$1 from '@eui/ecl/core';
+import { ECLBaseDirective, ECLClickOutsideDirective, EclBaseEvent } from '@eui/ecl/core';
+import * as i2 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
-import * as i3$3 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i6 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
-import * as i3$1 from '@eui/ecl/components/ecl-button';
-import { EclButtonModule } from '@eui/ecl/components/ecl-button';
-import { EclFormGroupModule } from '@eui/ecl/components/ecl-form-group';
-import * as i5 from '@eui/ecl/components/ecl-icon';
+import * as i4 from '@eui/ecl/components/ecl-icon';
 import { EclIconComponent, EclIconModule } from '@eui/ecl/components/ecl-icon';
-import * as i3 from '@eui/ecl/components/ecl-link';
-import { EclLinkModule } from '@eui/ecl/components/ecl-link';
-import * as i5$1 from '@eui/ecl/components/ecl-search-form';
-import { EclSearchFormModule } from '@eui/ecl/components/ecl-search-form';
-import * as i2 from '@eui/ecl/core';
-import { ECLBaseDirective, EclBaseEvent, ECLClickOutsideDirective } from '@eui/ecl/core';
-import { Subject, takeUntil as takeUntil$1, debounceTime } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Subject, takeUntil, debounceTime } from 'rxjs';
+import * as i3 from '@eui/ecl/components/ecl-button';
+import { EclButtonModule } from '@eui/ecl/components/ecl-button';
+import { takeUntil as takeUntil$1 } from 'rxjs/operators';
 import * as i1 from '@angular/cdk/layout';
+import { UpperCasePipe, AsyncPipe } from '@angular/common';
+import * as i3$1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
 import * as i3$2 from '@eui/core';
 import { EuiEuLanguages, GLOBAL_CONFIG_TOKEN } from '@eui/core';
 import { EclMegaMenuComponent } from '@eui/ecl/components/ecl-mega-menu';
 import { EclMenuComponent } from '@eui/ecl/components/ecl-menu';
-import * as i2$1 from '@angular/cdk/scrolling';
+import * as i6 from '@eui/ecl/components/ecl-link';
+import { EclLinkModule } from '@eui/ecl/components/ecl-link';
+import * as i2$2 from '@angular/cdk/scrolling';
+import * as i3$3 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import * as i5 from '@eui/ecl/components/ecl-search-form';
+import { EclSearchFormModule } from '@eui/ecl/components/ecl-search-form';
 import * as i1$1 from '@eui/ecl/shared';
 
 /**
@@ -39,11 +37,11 @@ class EclSiteHeaderActionComponent extends ECLBaseDirective {
         this.class = 'ecl-site-header__action';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderActionComponent, isStandalone: false, 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: "19.2.14", 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" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header-action', standalone: false, 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" }]
+            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']
@@ -58,11 +56,11 @@ class EclSiteHeaderBannerTopComponent extends ECLBaseDirective {
         this.className = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderBannerTopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderBannerTopComponent, isStandalone: false, 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: "19.2.14", 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"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderBannerTopComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header-banner-top', standalone: false, template: "<div class=\"ecl-container\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"] }]
+            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']
@@ -78,19 +76,201 @@ class EclSiteHeaderCtaDirective extends ECLBaseDirective {
         this.className = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCtaDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderCtaDirective, isStandalone: false, 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: "19.2.14", type: EclSiteHeaderCtaDirective, isStandalone: true, selector: "[eclSiteHeaderCta]", host: { properties: { "class.ecl-site-header__cta": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCtaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclSiteHeaderCta]',
-                    standalone: false,
                 }]
         }], 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';
+        this.customActionOverlayToggle = new EventEmitter();
+        this.ARIA_CONTROLS = 'custom-action-overlay';
+    }
+    ngAfterContentInit() {
+        setTimeout(() => {
+            if (this.eclIconComponent) {
+                this.eclIconComponent.baseDirective.class = this.eclIconComponent.baseDirective.class + ' ecl-site-header__icon';
+            }
+            if (!this.hasLink()) {
+                this.href = '#';
+                this.isOverlayExpanded = false;
+                this.ariaControls = this.ARIA_CONTROLS;
+            }
+        });
+    }
+    onClick(evt) {
+        if (!this.hasLink()) {
+            this.isOverlayExpanded = !this.isOverlayExpanded;
+            evt.preventDefault();
+            this.customActionOverlayToggle.emit(this.isOverlayExpanded);
+        }
+    }
+    hasLink() {
+        return (!!this.href && this.href !== '#') || !!this.routerLink;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", 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 }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[eclSiteHeaderCustomActionLink]',
+                }]
+        }], 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: ContentChild,
+                args: [forwardRef(() => EclIconComponent), { descendants: true }]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+class EclSiteHeaderCustomActionContentDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.className = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionContentDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderCustomActionContentDirective, isStandalone: true, selector: "div[eclSiteHeaderCustomActionContent]", host: { properties: { "class.ecl-site-header__custom-action-content": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[eclSiteHeaderCustomActionContent]',
+                }]
+        }], 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';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[eclSiteHeaderCustomActionTitle]',
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class.ecl-site-header__custom-action-title']
+            }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }, {
+                type: Input
+            }] } });
+
+/**
+ * This components gives opportunity for user to add a custom action. It will appear at first place, before log-in and language
+ *  and search (if any of these exist). Adds specific styling and functionality. Opens a dropdown with some more content.
+ */
+class EclSiteHeaderCustomActionComponent extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.class = 'ecl-site-header__custom-action';
+        /**
+         * Used to expand/collapse the dropdown, if any.
+         */
+        this.isOverlayExpanded = false;
+        this.destroy$ = new Subject();
+    }
+    ngAfterContentInit() {
+        if (this.title) {
+            this.titleId = this.title.id;
+        }
+        // Subscribe to link output, which toggles the dropdown.
+        if (this.eclSiteHeaderCustomActionLink) {
+            this.eclSiteHeaderCustomActionLink.customActionOverlayToggle.pipe(takeUntil(this.destroy$)).subscribe((isExpanded) => {
+                this.isOverlayExpanded = isExpanded;
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    /**
+     * Close the overlay.
+     */
+    onCustomActionOverlayClose() {
+        this.isOverlayExpanded = false;
+        if (!this.eclSiteHeaderCustomActionLink.hasLink())
+            this.eclSiteHeaderCustomActionLink.isOverlayExpanded = false;
+    }
+    /**
+     * Close the overlay, when clicking outside of it.
+     */
+    onClickOutsideHandler() {
+        this.onCustomActionOverlayClose();
+    }
+    /**
+     * Close the overlay with ESC key.
+     */
+    onEscapeKeydownHandler() {
+        this.onCustomActionOverlayClose();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclSiteHeaderCustomActionComponent, isStandalone: true, selector: "div[eclSiteHeaderCustomAction]", host: { listeners: { "eclClickOutside": "onClickOutsideHandler()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.class" } }, queries: [{ propertyName: "title", first: true, predicate: EclSiteHeaderCustomActionTitleDirective, descendants: true }, { propertyName: "eclSiteHeaderCustomActionLink", first: true, predicate: EclSiteHeaderCustomActionLinkDirective, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i2$1.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: "ngmodule", type: EclButtonModule }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "ngmodule", type: EclIconModule }, { kind: "component", type: i4.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[eclSiteHeaderCustomAction]', imports: [A11yModule, EclButtonModule, EclIconModule], hostDirectives: [
+                        {
+                            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: ContentChild,
+                args: [EclSiteHeaderCustomActionTitleDirective]
+            }], eclSiteHeaderCustomActionLink: [{
+                type: ContentChild,
+                args: [EclSiteHeaderCustomActionLinkDirective]
+            }], onClickOutsideHandler: [{
+                type: HostListener,
+                args: ['eclClickOutside']
+            }], onEscapeKeydownHandler: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
 /**
  * Custom component, that shows the current environment of the application, for example 'develop', 'acceptance', etc.
  * Adds some custom styling, so that the text will appear over the EU/EC logo.
@@ -124,7 +304,7 @@ class EclSiteHeaderEnvironmentComponent extends ECLBaseDirective {
     observeBreakpointChanges() {
         this.cdkBreakpointObserver
             .observe(['(max-width: 480px)'])
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe((result) => {
             this.isMobile = result.matches;
             if (this.isMobile) {
@@ -148,11 +328,11 @@ class EclSiteHeaderEnvironmentComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderEnvironmentComponent, deps: [{ token: i0.ElementRef }, { token: i1.BreakpointObserver }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderEnvironmentComponent, isStandalone: false, 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: "19.2.14", 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"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderEnvironmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[eclSiteHeaderEnvironment]', standalone: false, 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"] }]
+            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: () => [{ type: i0.ElementRef }, { type: i1.BreakpointObserver }, { type: i0.Renderer2 }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -291,19 +471,19 @@ class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
         }
     }
     subscribeToCDKScrollEvent() {
-        this.scrollDispatcher.scrolled().pipe(takeUntil$1(this.destroy$)).subscribe(() => {
+        this.scrollDispatcher.scrolled().pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.zone.run(() => {
                 this.setLanguageContentMaxHeight();
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderLanguagePopoverComponent, deps: [{ token: i0.ElementRef }, { token: i2.EclThemeService }, { token: i2$1.ScrollDispatcher }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclSiteHeaderLanguagePopoverComponent, isStandalone: false, selector: "ecl-site-header-language-popover", inputs: { languageCode: "languageCode", euLanguages: "euLanguages", nonEuLanguages: "nonEuLanguages", euColumnsCount: "euColumnsCount", nonEuColumnsCount: "nonEuColumnsCount", isHidden: "isHidden", isPushRight: "isPushRight", isPushLeft: "isPushLeft", isStack: "isStack", isFull: "isFull", rightPosition: "rightPosition", leftPosition: "leftPosition", languageArrowPosition: "languageArrowPosition" }, outputs: { languageClosed: "languageClosed", languageSelected: "languageSelected" }, host: { listeners: { "window:resize": "onWindowResize($event)" }, properties: { "style.right.px": "this.rightPosition", "style.left.px": "this.leftPosition", "style.--ecl-language-arrow-position": "this.languageArrowPosition", "attr.role": "this.role", "attr.aria-labelledby": "this.labelledBy", "style.display": "this.display", "class": "this.cssClasses", "attr.aria-modal": "this.isModal", "attr.hidden": "this.isDropdownHidden" } }, viewQueries: [{ propertyName: "languageContent", first: true, predicate: ["languageContent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-site-header__language-header\">\n    <div class=\"ecl-site-header__language-title\">\n        {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n    </div>\n    <button eclButton variant=\"tertiary\" 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            @if (eclThemeService.isECTheme()) {\n            <ecl-icon icon=\"close\" size=\"m\"> </ecl-icon>\n            } @else {\n            <ecl-icon icon=\"close\" size=\"s\"> </ecl-icon>\n            }\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\">\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\">\n                @for (item of nonEuLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            variant=\"standalone\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "directive", type: i3.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "component", type: i3$1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: i5.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderLanguagePopoverComponent, deps: [{ token: i0.ElementRef }, { token: i2$1.EclThemeService }, { token: i2$2.ScrollDispatcher }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclSiteHeaderLanguagePopoverComponent, isStandalone: true, selector: "ecl-site-header-language-popover", inputs: { languageCode: "languageCode", euLanguages: "euLanguages", nonEuLanguages: "nonEuLanguages", euColumnsCount: "euColumnsCount", nonEuColumnsCount: "nonEuColumnsCount", isHidden: "isHidden", isPushRight: "isPushRight", isPushLeft: "isPushLeft", isStack: "isStack", isFull: "isFull", rightPosition: "rightPosition", leftPosition: "leftPosition", languageArrowPosition: "languageArrowPosition" }, outputs: { languageClosed: "languageClosed", languageSelected: "languageSelected" }, host: { listeners: { "window:resize": "onWindowResize($event)" }, properties: { "style.right.px": "this.rightPosition", "style.left.px": "this.leftPosition", "style.--ecl-language-arrow-position": "this.languageArrowPosition", "attr.role": "this.role", "attr.aria-labelledby": "this.labelledBy", "style.display": "this.display", "class": "this.cssClasses", "attr.aria-modal": "this.isModal", "attr.hidden": "this.isDropdownHidden" } }, viewQueries: [{ propertyName: "languageContent", first: true, predicate: ["languageContent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-site-header__language-header\">\n    <div class=\"ecl-site-header__language-title\">\n        {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n    </div>\n    <button eclButton variant=\"tertiary\" 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            @if (eclThemeService.isECTheme()) {\n            <ecl-icon icon=\"close\" size=\"m\"> </ecl-icon>\n            } @else {\n            <ecl-icon icon=\"close\" size=\"s\"> </ecl-icon>\n            }\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\">\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\">\n                @for (item of nonEuLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            variant=\"standalone\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: EclButtonModule }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "ngmodule", type: EclIconModule }, { kind: "component", type: i4.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "ngmodule", type: EclLinkModule }, { kind: "directive", type: i6.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderLanguagePopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header-language-popover', standalone: false, 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\" 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            @if (eclThemeService.isECTheme()) {\n            <ecl-icon icon=\"close\" size=\"m\"> </ecl-icon>\n            } @else {\n            <ecl-icon icon=\"close\" size=\"s\"> </ecl-icon>\n            }\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\">\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\">\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: () => [{ type: i0.ElementRef }, { type: i2.EclThemeService }, { type: i2$1.ScrollDispatcher }, { type: i0.NgZone }], propDecorators: { languageContent: [{
+            args: [{ selector: 'ecl-site-header-language-popover', imports: [TranslateModule, EclButtonModule, EclIconModule, EclLinkModule], 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\" 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            @if (eclThemeService.isECTheme()) {\n            <ecl-icon icon=\"close\" size=\"m\"> </ecl-icon>\n            } @else {\n            <ecl-icon icon=\"close\" size=\"s\"> </ecl-icon>\n            }\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\">\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\">\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: () => [{ type: i0.ElementRef }, { type: i2$1.EclThemeService }, { type: i2$2.ScrollDispatcher }, { type: i0.NgZone }], propDecorators: { languageContent: [{
                 type: ViewChild,
                 args: ['languageContent']
             }], languageCode: [{
@@ -385,10 +565,11 @@ class EclAreaDataService {
         this.dataSubject.next(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclAreaDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclAreaDataService }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclAreaDataService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclAreaDataService, decorators: [{
-            type: Injectable
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
 /**
@@ -440,7 +621,7 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
      *  of the current site.
      */
     ngAfterViewInit() {
-        this.eclAreaDataService.dataSubject$.pipe(takeUntil$1(this.destroy$)).subscribe(parentHeaderRect => {
+        this.eclAreaDataService.dataSubject$.pipe(takeUntil(this.destroy$)).subscribe(parentHeaderRect => {
             this.calculatePopoverPosition(parentHeaderRect.right, parentHeaderRect.left);
         });
         this.handleInitialConfiguredLanguages();
@@ -500,7 +681,7 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
         return this._languages && this._languages.length > 0;
     }
     handleRtlChangeState() {
-        this.eclRtlService.currentRtlState$.pipe(takeUntil$1(this.destroy$)).subscribe((rtlState) => {
+        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {
             this.isRtl = rtlState;
         });
     }
@@ -581,18 +762,18 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
             this.updateLanguages();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderLanguageComponent, deps: [{ token: EclAreaDataService }, { token: i2.EclRtlService }, { token: i2.EclThemeService }, { token: GLOBAL_CONFIG_TOKEN, optional: true }, { token: i3$2.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclSiteHeaderLanguageComponent, isStandalone: false, selector: "ecl-site-header-language", outputs: { languageClick: "languageClick", languageSelected: "languageSelected" }, host: { listeners: { "eclClickOutside": "onClickOutside()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "languagePopover", first: true, predicate: EclSiteHeaderLanguagePopoverComponent, descendants: true }, { propertyName: "languageLinkElement", first: true, predicate: ["languageLink"], descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i2.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary 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=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes() && isLanguagesDropdownVisible) {\n<ecl-site-header-language-popover\n    #languagePopover\n    cdkTrapFocus\n    cdkTrapFocusAutoCapture\n    id=\"language-list-overlay\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i5.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: ["languageCode", "euLanguages", "nonEuLanguages", "euColumnsCount", "nonEuColumnsCount", "isHidden", "isPushRight", "isPushLeft", "isStack", "isFull", "rightPosition", "leftPosition", "languageArrowPosition"], outputs: ["languageClosed", "languageSelected"] }, { kind: "pipe", type: i7.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderLanguageComponent, deps: [{ token: EclAreaDataService }, { token: i2$1.EclRtlService }, { token: i2$1.EclThemeService }, { token: GLOBAL_CONFIG_TOKEN, optional: true }, { token: i3$2.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclSiteHeaderLanguageComponent, isStandalone: true, selector: "ecl-site-header-language", outputs: { languageClick: "languageClick", languageSelected: "languageSelected" }, host: { listeners: { "eclClickOutside": "onClickOutside()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "languagePopover", first: true, predicate: EclSiteHeaderLanguagePopoverComponent, descendants: true }, { propertyName: "languageLinkElement", first: true, predicate: ["languageLink"], descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i2$1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary 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=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes() && isLanguagesDropdownVisible) {\n<ecl-site-header-language-popover\n    #languagePopover\n    cdkTrapFocus\n    cdkTrapFocusAutoCapture\n    id=\"language-list-overlay\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: EclIconModule }, { kind: "component", type: i4.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: ["languageCode", "euLanguages", "nonEuLanguages", "euColumnsCount", "nonEuColumnsCount", "isHidden", "isPushRight", "isPushLeft", "isStack", "isFull", "rightPosition", "leftPosition", "languageArrowPosition"], outputs: ["languageClosed", "languageSelected"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderLanguageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header-language', standalone: false, hostDirectives: [
+            args: [{ selector: 'ecl-site-header-language', imports: [A11yModule, TranslateModule, UpperCasePipe, EclIconModule, EclSiteHeaderLanguagePopoverComponent], hostDirectives: [
                         {
                             directive: ECLClickOutsideDirective,
                             outputs: ['eclClickOutside'],
                         },
                     ], template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary 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=\"s\" 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"] }]
-        }], ctorParameters: () => [{ type: EclAreaDataService }, { type: i2.EclRtlService }, { type: i2.EclThemeService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: EclAreaDataService }, { type: i2$1.EclRtlService }, { type: i2$1.EclThemeService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -683,7 +864,7 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
         }
     }
     handleRtlChangeState() {
-        this.eclRtlService.currentRtlState$.pipe(debounceTime(50), takeUntil$1(this.destroy$)).subscribe(() => {
+        this.eclRtlService.currentRtlState$.pipe(debounceTime(50), takeUntil(this.destroy$)).subscribe(() => {
             this.calculateLoginArrowPosition(this.parentHeaderRight);
         });
     }
@@ -691,7 +872,7 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
      * On resize -> calculate the popover arrow position, using parent element ecl-header html parameters.
      */
     handleSiteHeaderAreaChangeEvent() {
-        this.eclAreaDataService.dataSubject$.pipe(takeUntil$1(this.destroy$)).subscribe(parentHeaderRect => {
+        this.eclAreaDataService.dataSubject$.pipe(takeUntil(this.destroy$)).subscribe(parentHeaderRect => {
             this.parentHeaderRight = parentHeaderRect.right;
             this.calculateLoginArrowPosition(this.parentHeaderRight);
         });
@@ -711,12 +892,12 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
             this.loginArrowPosition = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderLoginComponent, deps: [{ token: EclAreaDataService }, { token: i2.EclRtlService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclSiteHeaderLoginComponent, isStandalone: false, selector: "ecl-site-header-login", inputs: { isLoggedIn: ["isLoggedIn", "isLoggedIn", booleanAttribute] }, outputs: { login: "login", loginBoxToggle: "loginBoxToggle" }, host: { listeners: { "eclClickOutside": "onClickOutsideMegaMenu()" }, properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "loginLinkElement", first: true, predicate: ["loginLink"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i2.ECLBaseDirective }, { directive: i2.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "@if (isLoggedIn) {\n    <a\n        #loginLink\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary 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=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n    </a>\n    <div\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i5.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderLoginComponent, deps: [{ token: EclAreaDataService }, { token: i2$1.EclRtlService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclSiteHeaderLoginComponent, isStandalone: true, selector: "ecl-site-header-login", inputs: { isLoggedIn: ["isLoggedIn", "isLoggedIn", booleanAttribute] }, outputs: { login: "login", loginBoxToggle: "loginBoxToggle" }, host: { listeners: { "eclClickOutside": "onClickOutsideMegaMenu()" }, properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "loginLinkElement", first: true, predicate: ["loginLink"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i2$1.ECLBaseDirective }, { directive: i2$1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "@if (isLoggedIn) {\n    <a\n        #loginLink\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary 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=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n    </a>\n    <div\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: EclIconModule }, { kind: "component", type: i4.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderLoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header-login', standalone: false, hostDirectives: [
+            args: [{ selector: 'ecl-site-header-login', imports: [TranslateModule, EclIconModule], hostDirectives: [
                         {
                             directive: ECLBaseDirective,
                         },
@@ -726,7 +907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             outputs: ['eclClickOutside'],
                         },
                     ], template: "@if (isLoggedIn) {\n    <a\n        #loginLink\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary 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=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n    </a>\n    <div\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: EclAreaDataService }, { type: i2.EclRtlService }], propDecorators: { isLoggedIn: [{
+        }], ctorParameters: () => [{ type: EclAreaDataService }, { type: i2$1.EclRtlService }], propDecorators: { isLoggedIn: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], class: [{
@@ -753,13 +934,12 @@ class EclSiteHeaderLoginDescriptionDirective extends ECLBaseDirective {
         this.className = 'ecl-site-header__login-description';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderLoginDescriptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderLoginDescriptionDirective, isStandalone: false, selector: "[eclSiteHeaderLoginDescription]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderLoginDescriptionDirective, isStandalone: true, selector: "[eclSiteHeaderLoginDescription]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderLoginDescriptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclSiteHeaderLoginDescription]',
-                    standalone: false,
                 }]
         }], propDecorators: { className: [{
                 type: HostBinding,
@@ -775,13 +955,12 @@ class EclSiteHeaderLoginSeparatorDirective extends ECLBaseDirective {
         this.className = 'ecl-site-header__login-separator';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderLoginSeparatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderLoginSeparatorDirective, isStandalone: false, selector: "[eclSiteHeaderLoginSeparator]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderLoginSeparatorDirective, isStandalone: true, selector: "[eclSiteHeaderLoginSeparator]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderLoginSeparatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclSiteHeaderLoginSeparator]',
-                    standalone: false,
                 }]
         }], propDecorators: { className: [{
                 type: HostBinding,
@@ -807,11 +986,11 @@ class EclSiteHeaderNotificationComponent extends ECLBaseDirective {
         this.display = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderNotificationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderNotificationComponent, isStandalone: false, 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: "19.2.14", 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" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header-notification', standalone: false, template: "<div class=\"ecl-container\">\n    <ng-content></ng-content>\n</div>\n" }]
+            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']
@@ -829,13 +1008,12 @@ class EclSiteHeaderPictureDirective extends ECLBaseDirective {
         this.className = 'ecl-site-header__picture ecl-picture';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderPictureDirective, isStandalone: false, selector: "[eclSiteHeaderPicture]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderPictureDirective, isStandalone: true, selector: "[eclSiteHeaderPicture]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderPictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclSiteHeaderPicture]',
-                    standalone: false,
                 }]
         }], propDecorators: { className: [{
                 type: HostBinding,
@@ -852,13 +1030,12 @@ class EclSiteHeaderImageDirective extends ECLBaseDirective {
         ].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderImageDirective, isStandalone: false, selector: "[eclSiteHeaderImage]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderImageDirective, isStandalone: true, selector: "[eclSiteHeaderImage]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclSiteHeaderImage]',
-                    standalone: false,
                 }]
         }], propDecorators: { cssClasses: [{
                 type: HostBinding,
@@ -873,13 +1050,12 @@ class EclSiteHeaderLinkDirective extends ECLBaseDirective {
         this.className = 'ecl-link ecl-link--standalone ecl-site-header__logo-link';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderLinkDirective, isStandalone: false, selector: "[eclSiteHeaderLink]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderLinkDirective, isStandalone: true, selector: "[eclSiteHeaderLink]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclSiteHeaderLink]',
-                    standalone: false,
                 }]
         }], propDecorators: { className: [{
                 type: HostBinding,
@@ -962,12 +1138,12 @@ class EclSiteHeaderSearchComponent extends ECLBaseDirective {
         this.onTouched = fn;
     }
     handleRtlChangeState() {
-        this.eclRtlService.currentRtlState$.pipe(debounceTime(50), takeUntil$1(this.destroy$)).subscribe(() => {
+        this.eclRtlService.currentRtlState$.pipe(debounceTime(50), takeUntil(this.destroy$)).subscribe(() => {
             this.calculateSearchFormArrowPosition(this.parentHeaderRight);
         });
     }
     handleSiteHeaderAreaChangeEvent() {
-        this.eclAreaDataService.dataSubject$.pipe(takeUntil$1(this.destroy$)).subscribe(parentHeaderRect => {
+        this.eclAreaDataService.dataSubject$.pipe(takeUntil(this.destroy$)).subscribe(parentHeaderRect => {
             this.parentHeaderRight = parentHeaderRect.right;
             this.calculateSearchFormArrowPosition(this.parentHeaderRight);
         });
@@ -980,13 +1156,13 @@ class EclSiteHeaderSearchComponent extends ECLBaseDirective {
             this.searchArrowPosition = `calc(${arrowPosition}px + ${arrowSize})`;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderSearchComponent, deps: [{ token: EclAreaDataService }, { token: i2.EclRtlService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderSearchComponent, isStandalone: false, selector: "ecl-site-header-search", inputs: { searchInputText: "searchInputText", searchInputPlaceholder: "searchInputPlaceholder", searchButtonLabel: "searchButtonLabel" }, outputs: { search: "search", searchToggle: "searchToggle" }, host: { properties: { "class": "this.class", "attr.role": "this.role" } }, providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], viewQueries: [{ propertyName: "searchLinkElement", first: true, predicate: ["searchLink"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<a\n    #searchLink\n    href=\"#\"\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__search-toggle\"\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=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form\n    [style]=\"{'--ecl-search-arrow-position': searchArrowPosition}\"\n    (search)=\"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: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: i5$1.EclSearchFormComponent, selector: "ecl-search-form", inputs: ["searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon", "buttonExtraClassses", "inputExtraClassses"], outputs: ["search"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderSearchComponent, deps: [{ token: EclAreaDataService }, { token: i2$1.EclRtlService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderSearchComponent, isStandalone: true, selector: "ecl-site-header-search", inputs: { searchInputText: "searchInputText", searchInputPlaceholder: "searchInputPlaceholder", searchButtonLabel: "searchButtonLabel" }, outputs: { search: "search", searchToggle: "searchToggle" }, host: { properties: { "class": "this.class", "attr.role": "this.role" } }, providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], viewQueries: [{ propertyName: "searchLinkElement", first: true, predicate: ["searchLink"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<a\n    #searchLink\n    href=\"#\"\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__search-toggle\"\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=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form\n    [style]=\"{'--ecl-search-arrow-position': searchArrowPosition}\"\n    (search)=\"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: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: EclSearchFormModule }, { kind: "component", type: i5.EclSearchFormComponent, selector: "ecl-search-form", inputs: ["searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon", "buttonExtraClassses", "inputExtraClassses"], outputs: ["search"] }, { kind: "ngmodule", type: EclIconModule }, { kind: "component", type: i4.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header-search', standalone: false, providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], template: "<a\n    #searchLink\n    href=\"#\"\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__search-toggle\"\n    data-ecl-search-toggle=\"true\"\n    aria-controls=\"search-form-id\"\n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form\n    [style]=\"{'--ecl-search-arrow-position': searchArrowPosition}\"\n    (search)=\"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"] }]
-        }], ctorParameters: () => [{ type: EclAreaDataService }, { type: i2.EclRtlService }], propDecorators: { class: [{
+            args: [{ selector: 'ecl-site-header-search', imports: [FormsModule, TranslateModule, EclSearchFormModule, EclIconModule], providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], template: "<a\n    #searchLink\n    href=\"#\"\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__search-toggle\"\n    data-ecl-search-toggle=\"true\"\n    aria-controls=\"search-form-id\"\n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form\n    [style]=\"{'--ecl-search-arrow-position': searchArrowPosition}\"\n    (search)=\"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"] }]
+        }], ctorParameters: () => [{ type: EclAreaDataService }, { type: i2$1.EclRtlService }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
             }], role: [{
@@ -1093,21 +1269,21 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
             this.eclHeaderImage.logoSize = this.logoSize;
         }
         if (this.eclLoginComponent && this.eclSearchComponent) {
-            this.eclLoginComponent.loginBoxToggle.pipe(takeUntil$1(this.destroy$)).subscribe((evt) => {
+            this.eclLoginComponent.loginBoxToggle.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
                 this.eclSearchComponent.isSearchBoxActive = false;
                 this.sendResizeEventToChildComponents();
             });
-            this.eclSearchComponent.searchToggle.pipe(takeUntil$1(this.destroy$)).subscribe((evt) => {
+            this.eclSearchComponent.searchToggle.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
                 this.eclLoginComponent.isLoginBoxActive = false;
                 this.sendResizeEventToChildComponents();
             });
         }
         if (this.eclLanguageComponent) {
-            this.eclLanguageComponent.languageClick.pipe(takeUntil$1(this.destroy$)).subscribe((evt) => {
+            this.eclLanguageComponent.languageClick.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
                 this.languageClick.next(new EclSiteHeaderLanguageClickEvent());
                 this.sendResizeEventToChildComponents();
             });
-            this.eclLanguageComponent.languageSelected.pipe(takeUntil$1(this.destroy$)).subscribe((evt) => {
+            this.eclLanguageComponent.languageSelected.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
                 this.languageCode = evt.language?.code;
             });
         }
@@ -1115,7 +1291,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
             this.languageCode = this.eclLanguageComponent?.languageCode;
         }
         if (this.eclMenuComponent) {
-            this.eclMenuComponent.openHamburgerMenu.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
+            this.eclMenuComponent.openHamburgerMenu.pipe(takeUntil(this.destroy$)).subscribe(() => {
                 this.positionMenu();
             });
         }
@@ -1147,7 +1323,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         return !!this.eclHeaderLink;
     }
     handleRtlChangeState() {
-        this.eclRtlService.currentRtlState$.pipe(takeUntil$1(this.destroy$)).subscribe((rtlState) => {
+        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {
             this.isRtl = rtlState;
         });
     }
@@ -1163,7 +1339,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         }
     }
     subscribeToMegaMenuEvents() {
-        this.eclHeaderMenuComunicationService.isMobileObjectOpen$.pipe(takeUntil$1(this.destroy$)).subscribe(isExpanded => {
+        this.eclHeaderMenuComunicationService.isMobileObjectOpen$.pipe(takeUntil(this.destroy$)).subscribe(isExpanded => {
             if (this.isMobileBreakpoint) {
                 this.isEclMegaMenuStart = isExpanded;
                 this.isEclMegaMenuOpen = isExpanded;
@@ -1173,7 +1349,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
                 this.eclMegaMenuComponent.positionMenuOverlay(bottomSpaceY);
             }
         });
-        this.eclHeaderMenuComunicationService.isObjectExpanded$.pipe(takeUntil$1(this.destroy$)).subscribe(isExpanded => {
+        this.eclHeaderMenuComunicationService.isObjectExpanded$.pipe(takeUntil(this.destroy$)).subscribe(isExpanded => {
             if (this.isMobileBreakpoint) {
                 if (isExpanded) {
                     this.onMegaMenuItemExpandMobile();
@@ -1216,7 +1392,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
     observeBreakpointChanges() {
         this.cdkBreakpointObserver
             .observe(['(max-width: 996px)'])
-            .pipe(takeUntil$1(this.destroy$))
+            .pipe(takeUntil(this.destroy$))
             .subscribe((result) => {
             this.isMobileBreakpoint = result.matches;
         });
@@ -1226,20 +1402,20 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         this.eclMenuComponent.positionMenuOverlay(bottomSpaceY);
     }
     handleLanguageChangeState() {
-        this.i18nService.getState().pipe(takeUntil$1(this.destroy$)).subscribe((lang) => {
+        this.i18nService.getState().pipe(takeUntil(this.destroy$)).subscribe((lang) => {
             this.languageCode = lang.activeLang;
             if (this.eclLanguageComponent) {
                 this.eclLanguageComponent.languageCode = lang.activeLang;
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderComponent, deps: [{ token: i1$1.EclHeaderMenuComunicationService }, { token: EclAreaDataService }, { token: i1.BreakpointObserver }, { token: i0.ElementRef }, { token: i2.EclThemeService }, { token: i2.EclRtlService }, { token: i3$2.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclSiteHeaderComponent, isStandalone: false, selector: "ecl-site-header", inputs: { siteName: "siteName", languageCode: "languageCode", logoUrl: "logoUrl", logoSize: "logoSize" }, outputs: { logoClick: "logoClick", languageClick: "languageClick" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclLoginComponent", first: true, predicate: EclSiteHeaderLoginComponent, descendants: true }, { propertyName: "eclMenuComponent", first: true, predicate: EclMenuComponent, descendants: true }, { propertyName: "eclMegaMenuComponent", first: true, predicate: EclMegaMenuComponent, descendants: true }, { propertyName: "eclSearchComponent", first: true, predicate: EclSiteHeaderSearchComponent, descendants: true }, { propertyName: "eclLanguageComponent", first: true, predicate: EclSiteHeaderLanguageComponent, descendants: true }, { propertyName: "eclNotificationComponent", first: true, predicate: EclSiteHeaderNotificationComponent, descendants: true }, { propertyName: "eclHeaderLink", first: true, predicate: i0.forwardRef(() => EclSiteHeaderLinkDirective), descendants: true }, { propertyName: "eclHeaderImage", first: true, predicate: i0.forwardRef(() => EclSiteHeaderImageDirective), descendants: true }], viewQueries: [{ propertyName: "topContainerElement", first: true, predicate: ["topContainer"], descendants: true }, { propertyName: "siteHeaderHeader", first: true, predicate: ["siteHeaderHeader"], descendants: true }, { propertyName: "bannerHeader", first: true, predicate: ["bannerHeader"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-site-header__background\">\n    <div class=\"ecl-site-header__header\" #siteHeaderHeader>\n        <div class=\"ecl-site-header__container ecl-container\">\n            <div #topContainer class=\"ecl-site-header__top\">\n                @if(hasCustomLink()) {\n                    <ng-content select=\"[eclSiteHeaderLink]\"></ng-content>\n                } @else {\n                <a eclLink variant=\"standalone\" class=\"ecl-site-header__logo-link\"\n                    href=\"https://ec.europa.eu/info/index_{{ languageCode }}\" (click)=\"onECLogoClick($event)\"\n                    [attr.aria-label]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n                    <ng-content select=\"[eclSiteHeaderEnvironment]\"></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/ec/logo/positive/logo-ec--{{ partOfLogoName }}.svg\"\n                                media=\"(min-width: 996px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n                                 src=\"./assets/images/ecl/ec/logo/logo-ec--mute.svg\"\n                                 [attr.alt]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\" />\n                        </picture>\n                    }\n                    @if (eclThemeService.isEU$ | async) {\n                        <picture eclSiteHeaderPicture\n                                 [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n                            <source\n                                srcset=\"./assets/images/ecl/eu/logo/standard-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n                                media=\"(min-width: 996px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n                                 src=\"./assets/images/ecl/eu/logo/condensed-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n                                 alt=\"European Union\" />\n                        </picture>\n                    }\n                </a>\n                }\n                <ng-content select=\"ecl-site-header-action\"></ng-content>\n            </div>\n        </div>\n    </div>\n    <ng-content select=\"ecl-site-header-notification\"></ng-content>\n</div>\n\n\n<ng-content select=\"ecl-site-header-banner-top\"></ng-content>\n@if (siteName) {\n    <div class=\"ecl-site-header__banner\" #bannerHeader>\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.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclSiteHeaderPictureDirective, selector: "[eclSiteHeaderPicture]" }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderComponent, deps: [{ token: i1$1.EclHeaderMenuComunicationService }, { token: EclAreaDataService }, { token: i1.BreakpointObserver }, { token: i0.ElementRef }, { token: i2$1.EclThemeService }, { token: i2$1.EclRtlService }, { token: i3$2.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclSiteHeaderComponent, isStandalone: true, selector: "ecl-site-header", inputs: { siteName: "siteName", languageCode: "languageCode", logoUrl: "logoUrl", logoSize: "logoSize" }, outputs: { logoClick: "logoClick", languageClick: "languageClick" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclLoginComponent", first: true, predicate: EclSiteHeaderLoginComponent, descendants: true }, { propertyName: "eclMenuComponent", first: true, predicate: EclMenuComponent, descendants: true }, { propertyName: "eclMegaMenuComponent", first: true, predicate: EclMegaMenuComponent, descendants: true }, { propertyName: "eclSearchComponent", first: true, predicate: EclSiteHeaderSearchComponent, descendants: true }, { propertyName: "eclLanguageComponent", first: true, predicate: EclSiteHeaderLanguageComponent, descendants: true }, { propertyName: "eclNotificationComponent", first: true, predicate: EclSiteHeaderNotificationComponent, descendants: true }, { propertyName: "eclHeaderLink", first: true, predicate: i0.forwardRef(() => EclSiteHeaderLinkDirective), descendants: true }, { propertyName: "eclHeaderImage", first: true, predicate: i0.forwardRef(() => EclSiteHeaderImageDirective), descendants: true }], viewQueries: [{ propertyName: "topContainerElement", first: true, predicate: ["topContainer"], descendants: true }, { propertyName: "siteHeaderHeader", first: true, predicate: ["siteHeaderHeader"], descendants: true }, { propertyName: "bannerHeader", first: true, predicate: ["bannerHeader"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-site-header__background\">\n    <div class=\"ecl-site-header__header\" #siteHeaderHeader>\n        <div class=\"ecl-site-header__container ecl-container\">\n            <div #topContainer class=\"ecl-site-header__top\">\n                @if(hasCustomLink()) {\n                    <ng-content select=\"[eclSiteHeaderLink]\"></ng-content>\n                } @else {\n                <a eclLink variant=\"standalone\" class=\"ecl-site-header__logo-link\"\n                    href=\"https://ec.europa.eu/info/index_{{ languageCode }}\" (click)=\"onECLogoClick($event)\"\n                    [attr.aria-label]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n                    <ng-content select=\"[eclSiteHeaderEnvironment]\"></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/ec/logo/positive/logo-ec--{{ partOfLogoName }}.svg\"\n                                media=\"(min-width: 996px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n                                 src=\"./assets/images/ecl/ec/logo/logo-ec--mute.svg\"\n                                 [attr.alt]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\" />\n                        </picture>\n                    }\n                    @if (eclThemeService.isEU$ | async) {\n                        <picture eclSiteHeaderPicture\n                                 [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n                            <source\n                                srcset=\"./assets/images/ecl/eu/logo/standard-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n                                media=\"(min-width: 996px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n                                 src=\"./assets/images/ecl/eu/logo/condensed-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n                                 alt=\"European Union\" />\n                        </picture>\n                    }\n                </a>\n                }\n                <ng-content select=\"ecl-site-header-action\"></ng-content>\n            </div>\n        </div>\n    </div>\n    <ng-content select=\"ecl-site-header-notification\"></ng-content>\n</div>\n\n\n<ng-content select=\"ecl-site-header-banner-top\"></ng-content>\n@if (siteName) {\n    <div class=\"ecl-site-header__banner\" #bannerHeader>\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: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: EclLinkModule }, { kind: "directive", type: i6.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclSiteHeaderPictureDirective, selector: "[eclSiteHeaderPicture]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header', standalone: false, 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://ec.europa.eu/info/index_{{ languageCode }}\" (click)=\"onECLogoClick($event)\"\n                    [attr.aria-label]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n                    <ng-content select=\"[eclSiteHeaderEnvironment]\"></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/ec/logo/positive/logo-ec--{{ partOfLogoName }}.svg\"\n                                media=\"(min-width: 996px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n                                 src=\"./assets/images/ecl/ec/logo/logo-ec--mute.svg\"\n                                 [attr.alt]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\" />\n                        </picture>\n                    }\n                    @if (eclThemeService.isEU$ | async) {\n                        <picture eclSiteHeaderPicture\n                                 [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n                            <source\n                                srcset=\"./assets/images/ecl/eu/logo/standard-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n                                media=\"(min-width: 996px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n                                 src=\"./assets/images/ecl/eu/logo/condensed-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n                                 alt=\"European Union\" />\n                        </picture>\n                    }\n                </a>\n                }\n                <ng-content select=\"ecl-site-header-action\"></ng-content>\n            </div>\n        </div>\n    </div>\n    <ng-content select=\"ecl-site-header-notification\"></ng-content>\n</div>\n\n\n<ng-content select=\"ecl-site-header-banner-top\"></ng-content>\n@if (siteName) {\n    <div class=\"ecl-site-header__banner\" #bannerHeader>\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: () => [{ type: i1$1.EclHeaderMenuComunicationService }, { type: EclAreaDataService }, { type: i1.BreakpointObserver }, { type: i0.ElementRef }, { type: i2.EclThemeService }, { type: i2.EclRtlService }, { type: i3$2.I18nService }], propDecorators: { siteName: [{
+            args: [{ selector: 'ecl-site-header', imports: [AsyncPipe, TranslateModule, EclLinkModule, 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://ec.europa.eu/info/index_{{ languageCode }}\" (click)=\"onECLogoClick($event)\"\n                    [attr.aria-label]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n                    <ng-content select=\"[eclSiteHeaderEnvironment]\"></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/ec/logo/positive/logo-ec--{{ partOfLogoName }}.svg\"\n                                media=\"(min-width: 996px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n                                 src=\"./assets/images/ecl/ec/logo/logo-ec--mute.svg\"\n                                 [attr.alt]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\" />\n                        </picture>\n                    }\n                    @if (eclThemeService.isEU$ | async) {\n                        <picture eclSiteHeaderPicture\n                                 [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n                            <source\n                                srcset=\"./assets/images/ecl/eu/logo/standard-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n                                media=\"(min-width: 996px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n                                 src=\"./assets/images/ecl/eu/logo/condensed-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n                                 alt=\"European Union\" />\n                        </picture>\n                    }\n                </a>\n                }\n                <ng-content select=\"ecl-site-header-action\"></ng-content>\n            </div>\n        </div>\n    </div>\n    <ng-content select=\"ecl-site-header-notification\"></ng-content>\n</div>\n\n\n<ng-content select=\"ecl-site-header-banner-top\"></ng-content>\n@if (siteName) {\n    <div class=\"ecl-site-header__banner\" #bannerHeader>\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: () => [{ type: i1$1.EclHeaderMenuComunicationService }, { type: EclAreaDataService }, { type: i1.BreakpointObserver }, { type: i0.ElementRef }, { type: i2$1.EclThemeService }, { type: i2$1.EclRtlService }, { type: i3$2.I18nService }], propDecorators: { siteName: [{
                 type: Input
             }], languageCode: [{
                 type: Input
@@ -1289,192 +1465,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: [forwardRef(() => EclSiteHeaderImageDirective), { descendants: true }]
             }] } });
 
-class EclSiteHeaderCustomActionLinkDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.className = 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary';
-        this.customActionOverlayToggle = new EventEmitter();
-        this.ARIA_CONTROLS = 'custom-action-overlay';
-    }
-    ngAfterContentInit() {
-        setTimeout(() => {
-            if (this.eclIconComponent) {
-                this.eclIconComponent.baseDirective.class = this.eclIconComponent.baseDirective.class + ' ecl-site-header__icon';
-            }
-            if (!this.hasLink()) {
-                this.href = '#';
-                this.isOverlayExpanded = false;
-                this.ariaControls = this.ARIA_CONTROLS;
-            }
-        });
-    }
-    onClick(evt) {
-        if (!this.hasLink()) {
-            this.isOverlayExpanded = !this.isOverlayExpanded;
-            evt.preventDefault();
-            this.customActionOverlayToggle.emit(this.isOverlayExpanded);
-        }
-    }
-    hasLink() {
-        return (!!this.href && this.href !== '#') || !!this.routerLink;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderCustomActionLinkDirective, isStandalone: false, 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 }], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionLinkDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'a[eclSiteHeaderCustomActionLink]',
-                    standalone: false,
-                }]
-        }], 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: ContentChild,
-                args: [forwardRef(() => EclIconComponent), { descendants: true }]
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-class EclSiteHeaderCustomActionContentDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.className = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionContentDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderCustomActionContentDirective, isStandalone: false, selector: "div[eclSiteHeaderCustomActionContent]", host: { properties: { "class.ecl-site-header__custom-action-content": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'div[eclSiteHeaderCustomActionContent]',
-                    standalone: false,
-                }]
-        }], 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';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclSiteHeaderCustomActionTitleDirective, isStandalone: false, 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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionTitleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'div[eclSiteHeaderCustomActionTitle]',
-                    standalone: false,
-                }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.ecl-site-header__custom-action-title']
-            }], id: [{
-                type: HostBinding,
-                args: ['attr.id']
-            }, {
-                type: Input
-            }] } });
-
-/**
- * This components gives opportunity for user to add a custom action. It will appear at first place, before log-in and language
- *  and search (if any of these exist). Adds specific styling and functionality. Opens a dropdown with some more content.
- */
-class EclSiteHeaderCustomActionComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.class = 'ecl-site-header__custom-action';
-        /**
-         * Used to expand/collapse the dropdown, if any.
-         */
-        this.isOverlayExpanded = false;
-        this.destroy$ = new Subject();
-    }
-    ngAfterContentInit() {
-        if (this.title) {
-            this.titleId = this.title.id;
-        }
-        // Subscribe to link output, which toggles the dropdown.
-        if (this.eclSiteHeaderCustomActionLink) {
-            this.eclSiteHeaderCustomActionLink.customActionOverlayToggle.pipe(takeUntil$1(this.destroy$)).subscribe((isExpanded) => {
-                this.isOverlayExpanded = isExpanded;
-            });
-        }
-    }
-    ngOnDestroy() {
-        this.destroy$.next(true);
-        this.destroy$.unsubscribe();
-    }
-    /**
-     * Close the overlay.
-     */
-    onCustomActionOverlayClose() {
-        this.isOverlayExpanded = false;
-        if (!this.eclSiteHeaderCustomActionLink.hasLink())
-            this.eclSiteHeaderCustomActionLink.isOverlayExpanded = false;
-    }
-    /**
-     * Close the overlay, when clicking outside of it.
-     */
-    onClickOutsideHandler() {
-        this.onCustomActionOverlayClose();
-    }
-    /**
-     * Close the overlay with ESC key.
-     */
-    onEscapeKeydownHandler() {
-        this.onCustomActionOverlayClose();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclSiteHeaderCustomActionComponent, isStandalone: false, selector: "div[eclSiteHeaderCustomAction]", host: { listeners: { "eclClickOutside": "onClickOutsideHandler()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.class" } }, queries: [{ propertyName: "title", first: true, predicate: EclSiteHeaderCustomActionTitleDirective, descendants: true }, { propertyName: "eclSiteHeaderCustomActionLink", first: true, predicate: EclSiteHeaderCustomActionLinkDirective, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i2.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: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i3$1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3$1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i5.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'div[eclSiteHeaderCustomAction]', standalone: false, hostDirectives: [
-                        {
-                            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: ContentChild,
-                args: [EclSiteHeaderCustomActionTitleDirective]
-            }], eclSiteHeaderCustomActionLink: [{
-                type: ContentChild,
-                args: [EclSiteHeaderCustomActionLinkDirective]
-            }], onClickOutsideHandler: [{
-                type: HostListener,
-                args: ['eclClickOutside']
-            }], onEscapeKeydownHandler: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }] } });
-
 const COMPONENTS = [
     EclSiteHeaderComponent,
     EclSiteHeaderActionComponent,
@@ -1496,9 +1486,14 @@ const COMPONENTS = [
     EclSiteHeaderPictureDirective,
     EclSiteHeaderLinkDirective,
 ];
+/**
+ * Module that provides the EclSiteHeaderComponent and it's dependencies.
+ *
+ * @deprecated Use {@link EUI_ECL_SITE_HEADER} instead.
+ */
 class EclSiteHeaderModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderModule, declarations: [EclSiteHeaderComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderModule, imports: [EclSiteHeaderComponent,
             EclSiteHeaderActionComponent,
             EclSiteHeaderCustomActionComponent,
             EclSiteHeaderCustomActionContentDirective,
@@ -1516,16 +1511,7 @@ class EclSiteHeaderModule {
             EclSiteHeaderCtaDirective,
             EclSiteHeaderImageDirective,
             EclSiteHeaderPictureDirective,
-            EclSiteHeaderLinkDirective], imports: [CommonModule,
-            A11yModule,
-            TranslateModule,
-            FormsModule,
-            ReactiveFormsModule,
-            EclLinkModule,
-            EclButtonModule,
-            EclIconModule,
-            EclFormGroupModule,
-            EclSearchFormModule], exports: [EclSiteHeaderComponent,
+            EclSiteHeaderLinkDirective], exports: [EclSiteHeaderComponent,
             EclSiteHeaderActionComponent,
             EclSiteHeaderCustomActionComponent,
             EclSiteHeaderCustomActionContentDirective,
@@ -1544,41 +1530,46 @@ class EclSiteHeaderModule {
             EclSiteHeaderImageDirective,
             EclSiteHeaderPictureDirective,
             EclSiteHeaderLinkDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderModule, providers: [EclAreaDataService], imports: [CommonModule,
-            A11yModule,
-            TranslateModule,
-            FormsModule,
-            ReactiveFormsModule,
-            EclLinkModule,
-            EclButtonModule,
-            EclIconModule,
-            EclFormGroupModule,
-            EclSearchFormModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderModule, imports: [EclSiteHeaderComponent,
+            EclSiteHeaderCustomActionComponent,
+            EclSiteHeaderLoginComponent,
+            EclSiteHeaderLanguageComponent,
+            EclSiteHeaderLanguagePopoverComponent,
+            EclSiteHeaderSearchComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        A11yModule,
-                        TranslateModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        EclLinkModule,
-                        EclButtonModule,
-                        EclIconModule,
-                        EclFormGroupModule,
-                        EclSearchFormModule,
-                    ],
+                    imports: [...COMPONENTS],
                     exports: [...COMPONENTS],
-                    declarations: [...COMPONENTS],
-                    providers: [EclAreaDataService],
                 }]
         }] });
 
+const EUI_ECL_SITE_HEADER = [
+    EclSiteHeaderComponent,
+    EclSiteHeaderActionComponent,
+    EclSiteHeaderCustomActionComponent,
+    EclSiteHeaderCustomActionContentDirective,
+    EclSiteHeaderCustomActionLinkDirective,
+    EclSiteHeaderCustomActionTitleDirective,
+    EclSiteHeaderLoginComponent,
+    EclSiteHeaderLoginDescriptionDirective,
+    EclSiteHeaderLoginSeparatorDirective,
+    EclSiteHeaderLanguageComponent,
+    EclSiteHeaderLanguagePopoverComponent,
+    EclSiteHeaderSearchComponent,
+    EclSiteHeaderBannerTopComponent,
+    EclSiteHeaderEnvironmentComponent,
+    EclSiteHeaderNotificationComponent,
+    EclSiteHeaderCtaDirective,
+    EclSiteHeaderImageDirective,
+    EclSiteHeaderPictureDirective,
+    EclSiteHeaderLinkDirective,
+];
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR, EclSiteHeaderActionComponent, EclSiteHeaderBannerTopComponent, EclSiteHeaderComponent, EclSiteHeaderCtaDirective, EclSiteHeaderCustomActionComponent, EclSiteHeaderCustomActionContentDirective, EclSiteHeaderCustomActionLinkDirective, EclSiteHeaderCustomActionTitleDirective, EclSiteHeaderEnvironmentComponent, EclSiteHeaderImageDirective, EclSiteHeaderLanguageClickEvent, EclSiteHeaderLanguageCloseEvent, EclSiteHeaderLanguageComponent, EclSiteHeaderLanguagePopoverComponent, EclSiteHeaderLanguageSelectedEvent, EclSiteHeaderLinkDirective, EclSiteHeaderLoginBoxToggleEvent, EclSiteHeaderLoginComponent, EclSiteHeaderLoginDescriptionDirective, EclSiteHeaderLoginEvent, EclSiteHeaderLoginSeparatorDirective, EclSiteHeaderLogoClickEvent, EclSiteHeaderModule, EclSiteHeaderNotificationComponent, EclSiteHeaderPictureDirective, EclSiteHeaderSearchComponent, EclSiteHeaderSearchEvent, EclSiteHeaderSearchToggleEvent };
+export { ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR, EUI_ECL_SITE_HEADER, EclSiteHeaderActionComponent, EclSiteHeaderBannerTopComponent, EclSiteHeaderComponent, EclSiteHeaderCtaDirective, EclSiteHeaderCustomActionComponent, EclSiteHeaderCustomActionContentDirective, EclSiteHeaderCustomActionLinkDirective, EclSiteHeaderCustomActionTitleDirective, EclSiteHeaderEnvironmentComponent, EclSiteHeaderImageDirective, EclSiteHeaderLanguageClickEvent, EclSiteHeaderLanguageCloseEvent, EclSiteHeaderLanguageComponent, EclSiteHeaderLanguagePopoverComponent, EclSiteHeaderLanguageSelectedEvent, EclSiteHeaderLinkDirective, EclSiteHeaderLoginBoxToggleEvent, EclSiteHeaderLoginComponent, EclSiteHeaderLoginDescriptionDirective, EclSiteHeaderLoginEvent, EclSiteHeaderLoginSeparatorDirective, EclSiteHeaderLogoClickEvent, EclSiteHeaderModule, EclSiteHeaderNotificationComponent, EclSiteHeaderPictureDirective, EclSiteHeaderSearchComponent, EclSiteHeaderSearchEvent, EclSiteHeaderSearchToggleEvent };
 //# sourceMappingURL=eui-ecl-components-ecl-site-header.mjs.map