@eui/ecl 16.0.0-next.12 → 16.0.0-next.14

package/fesm2022/eui-ecl.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, HostBinding, Injectable, Optional, Inject, Component, ViewChild, EventEmitter, ChangeDetectionStrategy, Output, NgModule, ContentChildren, forwardRef, Self, HostListener, ElementRef, ContentChild, ViewEncapsulation } from '@angular/core';
+import { Directive, Input, HostBinding, Injectable, Optional, Inject, Component, ViewChild, EventEmitter, ChangeDetectionStrategy, Output, NgModule, HostListener, ContentChildren, forwardRef, ElementRef, Self, ContentChild, ViewEncapsulation } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, formatDate } from '@angular/common';
 import * as i2$1 from '@ngx-translate/core';
@@ -376,10 +376,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImpor
                 }] }]; } });
 
 class EclIconComponent extends ECLBaseDirective {
-    constructor(el, cd, eclThemeService) {
+    constructor(el, eclThemeService) {
         super();
         this.el = el;
-        this.cd = cd;
         this.eclThemeService = eclThemeService;
         this.iconSet = 'default';
         this.size = 'xs';
@@ -387,21 +386,13 @@ class EclIconComponent extends ECLBaseDirective {
         this.ariaHidden = true;
         this.focusable = false;
     }
+    ngOnChanges(changes) {
+        if (changes['icon']) {
+            this.initiateIconUrl();
+        }
+    }
     ngOnInit() {
-        this.iconUrl$ = this.eclThemeService.theme$.pipe(switchMap(theme => {
-            switch (this.iconSet) {
-                case 'default':
-                    return of(`assets/images/ecl/${theme}/icons/sprites/icons.svg#${this.icon}`);
-                case 'social':
-                    return of(`assets/images/ecl/${theme}/social-icons/sprites/icons-social.svg#${this.icon}`);
-                case 'social-media':
-                    return of(`assets/images/ecl/${theme}/icons-social-media/sprites/icons-social-media.svg#${this.icon}`);
-                case 'flag':
-                    return of(`assets/images/ecl/${theme}/icons-flag/sprites/icons-flag.svg#${this.icon}`);
-                default:
-                    return of(`${this.iconSet}#${this.icon}`);
-            }
-        }));
+        this.initiateIconUrl();
     }
     ngAfterViewInit() {
         const hostEl = this.getHostElement();
@@ -439,8 +430,24 @@ class EclIconComponent extends ECLBaseDirective {
     getHostParentElement(hostEl) {
         return hostEl.parentElement;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclIconComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclIconComponent, selector: "ecl-icon", inputs: { iconSet: "iconSet", icon: "icon", size: "size", color: "color", transform: "transform", ariaLabelledby: "ariaLabelledby", role: "role", isInverted: "isInverted", ariaHidden: "ariaHidden", focusable: "focusable" }, viewQueries: [{ propertyName: "svgEl", first: true, predicate: ["svg"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<svg #svg\n     [ngClass]=\"getClasses()\"\n     [attr.aria-hidden]=\"ariaHidden\"\n     [attr.aria-labelledby]=\"ariaLabelledby || null\"\n     [attr.role]=\"role || null\"\n     [attr.focusable]=\"focusable\">\n  <use [attr.xlink:href]=\"iconUrl$ | async\"></use>\n  <ng-content></ng-content>\n</svg>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    initiateIconUrl() {
+        this.iconUrl$ = this.eclThemeService.theme$.pipe(switchMap(theme => {
+            switch (this.iconSet) {
+                case 'default':
+                    return of(`assets/images/ecl/${theme}/icons/sprites/icons.svg#${this.icon}`);
+                case 'social':
+                    return of(`assets/images/ecl/${theme}/social-icons/sprites/icons-social.svg#${this.icon}`);
+                case 'social-media':
+                    return of(`assets/images/ecl/${theme}/icons-social-media/sprites/icons-social-media.svg#${this.icon}`);
+                case 'flag':
+                    return of(`assets/images/ecl/${theme}/icons-flag/sprites/icons-flag.svg#${this.icon}`);
+                default:
+                    return of(`${this.iconSet}#${this.icon}`);
+            }
+        }));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclIconComponent, deps: [{ token: i0.ElementRef }, { token: EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclIconComponent, selector: "ecl-icon", inputs: { iconSet: "iconSet", icon: "icon", size: "size", color: "color", transform: "transform", ariaLabelledby: "ariaLabelledby", role: "role", isInverted: "isInverted", ariaHidden: "ariaHidden", focusable: "focusable" }, viewQueries: [{ propertyName: "svgEl", first: true, predicate: ["svg"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg #svg\n     [ngClass]=\"getClasses()\"\n     [attr.aria-hidden]=\"ariaHidden\"\n     [attr.aria-labelledby]=\"ariaLabelledby || null\"\n     [attr.role]=\"role || null\"\n     [attr.focusable]=\"focusable\">\n  <use [attr.xlink:href]=\"iconUrl$ | async\"></use>\n  <ng-content></ng-content>\n</svg>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 __decorate([
     coerceBoolean
@@ -457,7 +464,7 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-icon', template: "<svg #svg\n     [ngClass]=\"getClasses()\"\n     [attr.aria-hidden]=\"ariaHidden\"\n     [attr.aria-labelledby]=\"ariaLabelledby || null\"\n     [attr.role]=\"role || null\"\n     [attr.focusable]=\"focusable\">\n  <use [attr.xlink:href]=\"iconUrl$ | async\"></use>\n  <ng-content></ng-content>\n</svg>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: EclThemeService }]; }, propDecorators: { iconSet: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: EclThemeService }]; }, propDecorators: { iconSet: [{
                 type: Input
             }], icon: [{
                 type: Input
@@ -600,64 +607,32 @@ class EclDomEvent extends EclBaseEvent {
     }
 }
 
-class EclSiteHeaderLoginEvent extends EclBaseEvent {
-}
-class EclSiteHeaderLoginBoxToggleEvent extends EclBaseEvent {
-    constructor(isOpen) {
+class ECLClickOutsideDirective extends ECLBaseDirective {
+    constructor(elementRef) {
         super();
-        this.isOpen = isOpen;
-    }
-}
-class EclSiteHeaderLoginComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.isLoggedIn = false;
-        this.class = 'ecl-site-header__login-container';
-        this.login = new EventEmitter();
-        this.loginBoxToggle = new EventEmitter();
-        this.isLoginBoxActive = false;
+        this.elementRef = elementRef;
+        this.eclClickOutside = new EventEmitter();
     }
-    ngOnChanges(changes) {
-        const isLoggedInChange = changes.isLoggedIn;
-        if (isLoggedInChange && isLoggedInChange.previousValue == true) {
-            this.isLoginBoxActive = false;
+    onClick(target) {
+        const clickedInside = this.elementRef.nativeElement.contains(target);
+        if (!clickedInside) {
+            this.eclClickOutside.emit();
         }
     }
-    getLoginBoxCssClasses() {
-        return [
-            'ecl-site-header__login-box',
-            this.isLoginBoxActive ? 'ecl-site-header__login-box--active' : ''
-        ].join(' ');
-    }
-    onLoginClick(evt) {
-        const event = new EclSiteHeaderLoginEvent();
-        this.login.next(event);
-        evt.preventDefault();
-    }
-    onLoginBoxToggle(evt) {
-        this.isLoginBoxActive = !this.isLoginBoxActive;
-        const event = new EclSiteHeaderLoginBoxToggleEvent(this.isLoginBoxActive);
-        this.loginBoxToggle.next(event);
-        evt.preventDefault();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderLoginComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclSiteHeaderLoginComponent, selector: "ecl-site-header-login", inputs: { isLoggedIn: "isLoggedIn" }, outputs: { login: "login", loginBoxToggle: "loginBoxToggle" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoggedIn\">\n    <a href=\"#\"\n       class=\"ecl-button ecl-button--ghost ecl-site-header__login-toggle\"\n       [attr.aria-expanded]=\"isLoginBoxActive\"\n       (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n</ng-container>\n<ng-container *ngIf=\"isLoggedIn\">\n    <a href=\"#\"\n       class=\"ecl-button ecl-button--ghost 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\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n        <ecl-icon icon=\"corner-arrow\"\n                  size=\"xs\"\n                  class=\"ecl-site-header__login-arrow\"></ecl-icon>\n    </a>\n    <div class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n</ng-container>", styles: [".ecl-site-header__login-toggle .ecl-site-header__login-arrow{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ECLClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: ECLClickOutsideDirective, isStandalone: true, selector: "[eclClickOutside]", outputs: { eclClickOutside: "eclClickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, usesInheritance: true, ngImport: i0 }); }
 }
-__decorate([
-    coerceBoolean
-], EclSiteHeaderLoginComponent.prototype, "isLoggedIn", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderLoginComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ecl-site-header-login', template: "<ng-container *ngIf=\"!isLoggedIn\">\n    <a href=\"#\"\n       class=\"ecl-button ecl-button--ghost ecl-site-header__login-toggle\"\n       [attr.aria-expanded]=\"isLoginBoxActive\"\n       (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n</ng-container>\n<ng-container *ngIf=\"isLoggedIn\">\n    <a href=\"#\"\n       class=\"ecl-button ecl-button--ghost 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\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n        <ecl-icon icon=\"corner-arrow\"\n                  size=\"xs\"\n                  class=\"ecl-site-header__login-arrow\"></ecl-icon>\n    </a>\n    <div class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n</ng-container>", styles: [".ecl-site-header__login-toggle .ecl-site-header__login-arrow{display:inline-flex}\n"] }]
-        }], propDecorators: { isLoggedIn: [{
-                type: Input
-            }], class: [{
-                type: HostBinding,
-                args: ['class']
-            }], login: [{
-                type: Output
-            }], loginBoxToggle: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ECLClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclClickOutside]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { eclClickOutside: [{
                 type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
             }] } });
 
 const hasNextSiblingWithAttribute = (element, attribute) => {
@@ -689,6 +664,104 @@ const hasPreviousSiblingWithAttribute = (element, attribute) => {
     }
 };
 
+class EclLinkDirective extends ECLBaseDirective {
+    get cssClasses() {
+        return [
+            super.getCssClasses('ecl-link'),
+            this.variant ? `ecl-link--${this.variant}` : '',
+        ].join(' ').trim();
+    }
+    get hasRightIcon() {
+        return this.isIconOnRightSide(this.eclIconComponents.toArray());
+    }
+    get hasLeftIcon() {
+        return this.isIconOnLeftSide(this.eclIconComponents.toArray());
+    }
+    get hasIcon() {
+        return this.eclIconComponents && this.eclIconComponents.length > 0;
+    }
+    constructor(el) {
+        super();
+        this.el = el;
+    }
+    ngAfterContentInit() {
+        if (this.eclIconComponents) {
+            setTimeout(() => {
+                this.eclIconComponents.forEach(icn => {
+                    if (this.isIconOnLeftSide(this.eclIconComponents.toArray())) {
+                        icn.class = 'ecl-link__icon ecl-link__icon--before';
+                    }
+                    else if (this.isIconOnRightSide(this.eclIconComponents.toArray())) {
+                        icn.class = 'ecl-link__icon ecl-link__icon--after';
+                    }
+                    else {
+                        icn.class = 'ecl-link__icon ecl-link__icon--before';
+                    }
+                });
+            });
+        }
+    }
+    isIconOnRightSide(icons) {
+        return !!icons.find(icn => {
+            const iconEl = icn.el.nativeElement;
+            if (hasPreviousSiblingWithAttribute(iconEl, 'eclLinkLabel')) {
+                return true;
+            }
+            return false;
+        });
+    }
+    isIconOnLeftSide(icons) {
+        return !!icons.find(icn => {
+            const iconEl = icn.el.nativeElement;
+            if (hasNextSiblingWithAttribute(iconEl, 'eclLinkLabel')) {
+                return true;
+            }
+            return false;
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclLinkDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: EclLinkDirective, selector: "[eclLink]", inputs: { variant: "variant", isNegative: "isNegative", isNoVisited: "isNoVisited" }, host: { properties: { "class.ecl-link--negative": "this.isNegative", "class.ecl-link--no-visited": "this.isNoVisited", "class": "this.cssClasses", "class.ecl-link--icon-after": "this.hasRightIcon", "class.ecl-link--icon-before": "this.hasLeftIcon", "class.ecl-link--icon": "this.hasIcon" } }, queries: [{ propertyName: "eclIconComponents", predicate: i0.forwardRef(function () { return EclIconComponent; }) }], usesInheritance: true, ngImport: i0 }); }
+}
+__decorate([
+    coerceBoolean
+], EclLinkDirective.prototype, "isNegative", void 0);
+__decorate([
+    coerceBoolean
+], EclLinkDirective.prototype, "isNoVisited", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclLink]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { variant: [{
+                type: Input
+            }], isNegative: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.ecl-link--negative']
+            }], isNoVisited: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.ecl-link--no-visited']
+            }], eclIconComponents: [{
+                type: ContentChildren,
+                args: [forwardRef(() => EclIconComponent)]
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], hasRightIcon: [{
+                type: HostBinding,
+                args: ['class.ecl-link--icon-after']
+            }], hasLeftIcon: [{
+                type: HostBinding,
+                args: ['class.ecl-link--icon-before']
+            }], hasIcon: [{
+                type: HostBinding,
+                args: ['class.ecl-link--icon']
+            }] } });
+
 class EclButtonComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
@@ -736,679 +809,614 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImpor
                 args: ['class']
             }] } });
 
-class EclButtonLabelDirective extends ECLBaseDirective {
-    get cssClasses() {
-        return [
-            super.getCssClasses('ecl-button__label'),
-        ].join(' ').trim();
+class EclSiteHeaderLanguageSelectedEvent extends EclBaseEvent {
+    constructor(language) {
+        super();
+        this.language = language;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclButtonLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: EclButtonLabelDirective, selector: "[eclButtonLabel]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclButtonLabelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[eclButtonLabel]'
-                }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EclFormGroupComponent extends ECLBaseDirective {
+class EclSiteHeaderLanguageCloseEvent extends EclBaseEvent {
+}
+class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
+    constructor(popoverElementRef) {
+        super();
+        this.popoverElementRef = popoverElementRef;
+        this.euLanguages = [];
+        this.nonEuLanguages = [];
+        this.isHidden = false;
+        this.isPushRight = false;
+        this.isStack = false;
+        this.isFull = false;
+        this.languageClosed = new EventEmitter();
+        this.languageSelected = new EventEmitter();
+        this.role = 'dialog';
+        this.labelledBy = 'ecl-site-header__language-title';
+    }
     get cssClasses() {
         return [
-            super.getCssClasses('ecl-form-group'),
+            super.getCssClasses('ecl-site-header__language-container'),
+            this.isPushRight ? 'ecl-site-header__language-container--push-right' : '',
+            this.isFull ? 'ecl-site-header__language-container--full' : '',
         ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclFormGroupComponent, selector: "[eclFormGroup], ecl-form-group", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclFormGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[eclFormGroup], ecl-form-group', template: "<ng-content></ng-content>" }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EclFormLabelComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.isOptional = false;
-        this.isInvalid = false;
-        this.isDisabled = false;
-        this.isRequired = false;
+    get isModal() {
+        return !this.isHidden || undefined;
     }
-    get cssClasses() {
-        return [
-            super.getCssClasses('ecl-form-label'),
-            this.isInvalid ? 'ecl-form-label--invalid' : '',
-            this.isDisabled ? 'ecl-form-label--disabled' : '',
-        ].join(' ').trim();
+    get isDropdownHidden() {
+        return this.isHidden || undefined;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclFormLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclFormLabelComponent, selector: "[eclFormLabel]", inputs: { isOptional: "isOptional", isInvalid: "isInvalid", isDisabled: "isDisabled", isRequired: "isRequired" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<span *ngIf=\"isOptional\" class=\"ecl-form-label__optional\"> ({{ 'ecl.form-label.OPTIONAL' | translate }})</span>\n<span *ngIf=\"isRequired\" class=\"ecl-form-label__required\">*</span>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    onCloseClick() {
+        this.languageClosed.next(new EclSiteHeaderLanguageCloseEvent());
+    }
+    onLanguageClick(language, evt) {
+        this.languageCode = language.code;
+        this.languageSelected.next(new EclSiteHeaderLanguageSelectedEvent(language));
+        evt.preventDefault();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderLanguagePopoverComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: { languageCode: "languageCode", euLanguages: "euLanguages", nonEuLanguages: "nonEuLanguages", euColumnsCount: "euColumnsCount", nonEuColumnsCount: "nonEuColumnsCount", isHidden: "isHidden", isPushRight: "isPushRight", isStack: "isStack", isFull: "isFull", rightPosition: "rightPosition", languageArrowPosition: "languageArrowPosition" }, outputs: { languageClosed: "languageClosed", languageSelected: "languageSelected" }, host: { properties: { "style.right": "this.rightPosition", "style.--ecl-language-arrow-position": "this.languageArrowPosition", "attr.role": "this.role", "attr.aria-labelledby": "this.labelledBy", "class": "this.cssClasses", "attr.aria-modal": "this.isModal", "attr.hidden": "this.isDropdownHidden" } }, 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\n            variant=\"ghost\"\n            class=\"ecl-site-header__language-close\"\n            (click)=\"onCloseClick()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.common.CLOSE' | translate }}\n        </span>\n        <ecl-icon icon=\"close-filled\"\n                  size=\"s\">\n        </ecl-icon>\n    </button>\n</div>\n\n<div class=\"ecl-site-header__language-content\" \n    [class.ecl-site-header__language-content--stack]=\"isStack\">\n    <div *ngIf=\"euLanguages.length\" \n        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            <li *ngFor=\"let item of euLanguages\"\n                class=\"ecl-site-header__language-item\">\n                <a eclLink\n                   href=\"#\"\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        </ul>\n    </div>\n    <div *ngIf=\"nonEuLanguages.length\" \n        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            <li *ngFor=\"let item of nonEuLanguages\"\n                class=\"ecl-site-header__language-item\">\n                <a eclLink\n                   href=\"#\"\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        </ul>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
-__decorate([
-    coerceBoolean
-], EclFormLabelComponent.prototype, "isOptional", void 0);
-__decorate([
-    coerceBoolean
-], EclFormLabelComponent.prototype, "isInvalid", void 0);
-__decorate([
-    coerceBoolean
-], EclFormLabelComponent.prototype, "isDisabled", void 0);
-__decorate([
-    coerceBoolean
-], EclFormLabelComponent.prototype, "isRequired", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclFormLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderLanguagePopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[eclFormLabel]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<span *ngIf=\"isOptional\" class=\"ecl-form-label__optional\"> ({{ 'ecl.form-label.OPTIONAL' | translate }})</span>\n<span *ngIf=\"isRequired\" class=\"ecl-form-label__required\">*</span>\n" }]
-        }], propDecorators: { isOptional: [{
+            args: [{ selector: 'ecl-site-header-language-popover', 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\n            variant=\"ghost\"\n            class=\"ecl-site-header__language-close\"\n            (click)=\"onCloseClick()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.common.CLOSE' | translate }}\n        </span>\n        <ecl-icon icon=\"close-filled\"\n                  size=\"s\">\n        </ecl-icon>\n    </button>\n</div>\n\n<div class=\"ecl-site-header__language-content\" \n    [class.ecl-site-header__language-content--stack]=\"isStack\">\n    <div *ngIf=\"euLanguages.length\" \n        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            <li *ngFor=\"let item of euLanguages\"\n                class=\"ecl-site-header__language-item\">\n                <a eclLink\n                   href=\"#\"\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        </ul>\n    </div>\n    <div *ngIf=\"nonEuLanguages.length\" \n        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            <li *ngFor=\"let item of nonEuLanguages\"\n                class=\"ecl-site-header__language-item\">\n                <a eclLink\n                   href=\"#\"\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        </ul>\n    </div>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { languageCode: [{
                 type: Input
-            }], isInvalid: [{
+            }], euLanguages: [{
                 type: Input
-            }], isDisabled: [{
+            }], nonEuLanguages: [{
                 type: Input
-            }], isRequired: [{
+            }], euColumnsCount: [{
+                type: Input
+            }], nonEuColumnsCount: [{
+                type: Input
+            }], isHidden: [{
+                type: Input
+            }], isPushRight: [{
                 type: Input
+            }], isStack: [{
+                type: Input
+            }], isFull: [{
+                type: Input
+            }], rightPosition: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.right']
+            }], languageArrowPosition: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.--ecl-language-arrow-position']
+            }], languageClosed: [{
+                type: Output
+            }], languageSelected: [{
+                type: Output
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], labelledBy: [{
+                type: HostBinding,
+                args: ['attr.aria-labelledby']
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
+            }], isModal: [{
+                type: HostBinding,
+                args: ['attr.aria-modal']
+            }], isDropdownHidden: [{
+                type: HostBinding,
+                args: ['attr.hidden']
             }] } });
 
-class EclTextInputDirective extends ECLBaseDirective {
+class EclSiteHeaderLanguageClickEvent extends EclBaseEvent {
+}
+class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
+    get languageCodes() {
+        return this._languageCodes;
+    }
+    set languageCodes(value) {
+        this._languageCodes = value;
+        this.updateLanguages();
+    }
     get cssClasses() {
         return [
-            super.getCssClasses('ecl-text-input'),
-            this.eclSize ? `ecl-text-input--${this.eclSize}` : '',
+            super.getCssClasses('ecl-site-header__language'),
         ].join(' ').trim();
     }
-    constructor(ngControl) {
+    constructor(eclLanguageService, eclSiteHeader) {
         super();
-        this.ngControl = ngControl;
-        this.type = 'text';
-        this.eclSize = 'm';
-        this.isInvalid = false;
+        this.eclLanguageService = eclLanguageService;
+        this.eclSiteHeader = eclSiteHeader;
+        this.languageCode = 'en';
+        this._languageCodes = [];
+        this.languageClick = new EventEmitter();
+        this.languageSelected = new EventEmitter();
+        this.MOBILE_BREAKPOINT = 768;
+        this.LANGUAGE_MAX_COLUMNS = 8;
+        this.isLanguagesDropdownVisible = false;
+        this.euLanguages = [];
+        this.nonEuLanguages = [];
+        this.euColumnsCount = 1;
+        this.nonEuColumnsCount = 1;
     }
-    get invalidState() {
-        if (this.ngControl) {
-            return this.ngControl.status === 'INVALID' && this.ngControl.touched;
+    ngOnInit() {
+        this.updateLanguages();
+    }
+    ngOnChanges(changes) {
+        if (changes['languageCodes']) {
+            this.updateLanguages();
+        }
+    }
+    getLanguageLabel() {
+        return this.eclLanguageService.getLanguageByCode(this.languageCode)?.label;
+    }
+    onLanguageClick(evt) {
+        this.isLanguagesDropdownVisible = !this.isLanguagesDropdownVisible;
+        if (this.isLanguagesDropdownVisible) {
+            this.calculatePopoverPosition();
         }
         else {
-            return this.isInvalid;
+            setTimeout(() => {
+                this.isFull = false;
+                this.isStack = false;
+                this.isPushRight = false;
+                this.rightPosition = undefined;
+                this.languageArrowPosition = undefined;
+            });
         }
+        this.languageClick.next(new EclSiteHeaderLanguageClickEvent());
+        evt.preventDefault();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclTextInputDirective, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: EclTextInputDirective, selector: "input[eclTextInput]", inputs: { eclSize: "eclSize", isInvalid: "isInvalid" }, host: { properties: { "attr.type": "this.type", "class": "this.cssClasses", "class.ecl-text-input--invalid": "this.invalidState" } }, usesInheritance: true, ngImport: i0 }); }
+    onLanguageClosed(evt) {
+        this.isLanguagesDropdownVisible = false;
+    }
+    onLanguageSelected(evt) {
+        this.languageCode = evt.language.code;
+        this.isLanguagesDropdownVisible = false;
+        this.languageSelected.next(new EclSiteHeaderLanguageSelectedEvent(evt.language));
+    }
+    onClickOutside() {
+        this.isLanguagesDropdownVisible = false;
+    }
+    onEscapeKeydownHandler() {
+        this.isLanguagesDropdownVisible = false;
+    }
+    hasLanguageCodes() {
+        return this.languageCodes && this.languageCodes.length > 0;
+    }
+    updateLanguages() {
+        const languages = this.eclLanguageService.getLanguagesByCodes(this.languageCodes);
+        this.euLanguages = languages.filter(item => {
+            return this.eclLanguageService.isEuLanguage(item.code);
+        });
+        this.nonEuLanguages = languages.filter(item => {
+            return !this.eclLanguageService.isEuLanguage(item.code);
+        });
+        this.euColumnsCount = Math.ceil(this.euLanguages.length / this.LANGUAGE_MAX_COLUMNS);
+        this.nonEuColumnsCount = Math.ceil(this.nonEuLanguages.length / this.LANGUAGE_MAX_COLUMNS);
+    }
+    calculatePopoverPosition() {
+        setTimeout(() => {
+            if (this.hasLanguageCodes()) {
+                const arrowSize = '0.5rem';
+                const containerElement = this.eclSiteHeader.topContainerElement;
+                const containerRect = containerElement.getBoundingClientRect();
+                const linkRect = this.languageLinkElement.getBoundingClientRect();
+                const popoverRect = this.languagePopoverElement.getBoundingClientRect();
+                const screenWidth = window.innerWidth;
+                const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+                this.isFull = false;
+                this.isStack = false;
+                this.isPushRight = false;
+                this.rightPosition = undefined;
+                this.languageArrowPosition = undefined;
+                if (popoverRect.width > containerRect.width) {
+                    this.isStack = true;
+                    if (this.nonEuLanguages.length) {
+                        this.nonEuColumnsCount = Math.max(this.euColumnsCount, this.nonEuColumnsCount);
+                    }
+                }
+                if (popoverRect.right > screenWidth) {
+                    const arrowPosition = containerRect.right - linkRect.right + linkRect.width / 2;
+                    this.isPushRight = true;
+                    this.rightPosition = `-${containerRect.right - linkRect.right}px`;
+                    this.languageArrowPosition = `calc(${arrowPosition}px - ${arrowSize})`;
+                }
+                if (vw < this.MOBILE_BREAKPOINT) {
+                    const arrowPosition = popoverRect.right - linkRect.right + linkRect.width / 2;
+                    this.isFull = true;
+                    this.languageArrowPosition = `calc(${arrowPosition}px - ${arrowSize})`;
+                }
+            }
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderLanguageComponent, deps: [{ token: EclLanguageService }, { token: EclSiteHeaderComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclSiteHeaderLanguageComponent, selector: "ecl-site-header-language", inputs: { languageCode: "languageCode", languageCodes: "languageCodes", languageLabel: "languageLabel" }, outputs: { languageClick: "languageClick", languageSelected: "languageSelected" }, host: { listeners: { "eclClickOutside": "onClickOutside()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "languagePopoverElement", first: true, predicate: ["languagePopover"], descendants: true, read: ElementRef }, { propertyName: "languageLinkElement", first: true, predicate: ["languageLink"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<a href=\"#\"\n   #languageLink\n   class=\"ecl-button ecl-button--ghost ecl-site-header__language-selector ecl-u-d-block\"\n   aria-controls=\"language-list-overlay\"\n   [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE' | translate\"\n   [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n   (click)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"language\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        <span class=\"ecl-site-header__language-code\">{{ languageCode }}</span>\n    </span>\n    {{ getLanguageLabel() }}\n</a>\n\n<ecl-site-header-language-popover \n    #languagePopover\n    *ngIf=\"hasLanguageCodes()\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isHidden]=\"!isLanguagesDropdownVisible\" \n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: ["languageCode", "euLanguages", "nonEuLanguages", "euColumnsCount", "nonEuColumnsCount", "isHidden", "isPushRight", "isStack", "isFull", "rightPosition", "languageArrowPosition"], outputs: ["languageClosed", "languageSelected"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
 __decorate([
-    coerceBoolean
-], EclTextInputDirective.prototype, "isInvalid", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclTextInputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[eclTextInput]',
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }]; }, propDecorators: { type: [{
-                type: HostBinding,
-                args: ['attr.type']
-            }], eclSize: [{
+    coerceElement
+], EclSiteHeaderLanguageComponent.prototype, "languagePopoverElement", void 0);
+__decorate([
+    coerceElement
+], EclSiteHeaderLanguageComponent.prototype, "languageLinkElement", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderLanguageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-site-header-language', hostDirectives: [{
+                            directive: ECLClickOutsideDirective,
+                            outputs: ['eclClickOutside'],
+                        }], template: "<a href=\"#\"\n   #languageLink\n   class=\"ecl-button ecl-button--ghost ecl-site-header__language-selector ecl-u-d-block\"\n   aria-controls=\"language-list-overlay\"\n   [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE' | translate\"\n   [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n   (click)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"language\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        <span class=\"ecl-site-header__language-code\">{{ languageCode }}</span>\n    </span>\n    {{ getLanguageLabel() }}\n</a>\n\n<ecl-site-header-language-popover \n    #languagePopover\n    *ngIf=\"hasLanguageCodes()\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isHidden]=\"!isLanguagesDropdownVisible\" \n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n" }]
+        }], ctorParameters: function () { return [{ type: EclLanguageService }, { type: EclSiteHeaderComponent }]; }, propDecorators: { languageCode: [{
                 type: Input
-            }], isInvalid: [{
+            }], languageCodes: [{
+                type: Input
+            }], languageLabel: [{
                 type: Input
+            }], languagePopoverElement: [{
+                type: ViewChild,
+                args: ['languagePopover', { read: ElementRef }]
+            }], languageLinkElement: [{
+                type: ViewChild,
+                args: ['languageLink', { read: ElementRef }]
+            }], languageClick: [{
+                type: Output
+            }], languageSelected: [{
+                type: Output
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
-            }], invalidState: [{
-                type: HostBinding,
-                args: ['class.ecl-text-input--invalid']
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['eclClickOutside']
+            }], onEscapeKeydownHandler: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
             }] } });
 
-class EclSearchFormEvent extends EclBaseEvent {
-    constructor(keyword) {
+class EclSiteHeaderLoginEvent extends EclBaseEvent {
+}
+class EclSiteHeaderLoginBoxToggleEvent extends EclBaseEvent {
+    constructor(isOpen) {
         super();
-        this.keyword = keyword;
+        this.isOpen = isOpen;
     }
 }
-const ECL_SEARCH_FORM_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => EclSearchFormComponent),
-    multi: true,
-};
-const noop$3 = () => { };
-class EclSearchFormComponent extends ECLBaseDirective {
+class EclSiteHeaderLoginComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
-        this.searchButtonIcon = 'search';
-        this.role = 'search';
-        this.search = new EventEmitter();
-        this.onChange = noop$3;
-        this.onTouched = noop$3;
+        this.isLoggedIn = false;
+        this.class = 'ecl-site-header__login-container';
+        this.login = new EventEmitter();
+        this.loginBoxToggle = new EventEmitter();
+        this.isLoginBoxActive = false;
     }
-    get cssClasses() {
+    ngOnChanges(changes) {
+        const isLoggedInChange = changes.isLoggedIn;
+        if (isLoggedInChange && isLoggedInChange.previousValue == true) {
+            this.isLoginBoxActive = false;
+        }
+    }
+    getLoginBoxCssClasses() {
         return [
-            super.getCssClasses('ecl-search-form'),
-        ].join(' ').trim();
+            'ecl-site-header__login-box',
+            this.isLoginBoxActive ? 'ecl-site-header__login-box--active' : ''
+        ].join(' ');
     }
-    onSearchClick(evt) {
-        this.search.next(new EclSearchFormEvent(this.searchInputText));
+    onLoginClick(evt) {
+        const event = new EclSiteHeaderLoginEvent();
+        this.login.next(event);
         evt.preventDefault();
     }
-    onEnterKeyDown(evt) {
-        this.search.next(new EclSearchFormEvent(this.searchInputText));
+    onLoginBoxToggle(evt) {
+        this.isLoginBoxActive = !this.isLoginBoxActive;
+        const event = new EclSiteHeaderLoginBoxToggleEvent(this.isLoginBoxActive);
+        this.loginBoxToggle.next(event);
         evt.preventDefault();
     }
-    onModelChange(newValue) {
-        this.searchInputText = newValue;
-        this.onChange(newValue);
-    }
-    writeValue(value) {
-        this.searchInputText = value;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSearchFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclSearchFormComponent, selector: "ecl-search-form", inputs: { searchInputText: "searchInputText", placeholder: "placeholder", searchButtonLabel: "searchButtonLabel", searchButtonIcon: "searchButtonIcon" }, outputs: { search: "search" }, host: { listeners: { "keydown.enter": "onEnterKeyDown($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, providers: [ECL_SEARCH_FORM_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0, template: "<ecl-form-group>\n    <label \n        eclFormLabel \n        for=\"search-input\"\n        class=\"ecl-search-form__label\">\n        {{ 'ecl.common.SEARCH' | translate }}\n    </label>\n    <input eclTextInput\n            [(ngModel)]=\"searchInputText\"\n            (ngModelChange)=\"onModelChange($event)\"\n            type=\"search\"\n            name=\"search-input\"\n            placeholder=\"{{ placeholder || 'ecl.common.SEARCH' | translate }}\"\n            class=\"ecl-search-form__text-input\"/>\n</ecl-form-group>\n<button eclButton\n        aria-label=\"Search\"\n        variant=\"search\"\n        (click)=\"onSearchClick($event)\"\n        class=\"ecl-search-form__button\">\n    <span eclButtonLabel>\n        {{ searchButtonLabel || 'ecl.common.SEARCH' | translate }}\n    </span>\n    <ecl-icon [icon]=\"searchButtonIcon\" size=\"xs\"></ecl-icon>\n</button>\n", dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclFormGroupComponent, selector: "[eclFormGroup], ecl-form-group" }, { kind: "component", type: EclFormLabelComponent, selector: "[eclFormLabel]", inputs: ["isOptional", "isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: EclTextInputDirective, selector: "input[eclTextInput]", inputs: ["eclSize", "isInvalid"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderLoginComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclSiteHeaderLoginComponent, selector: "ecl-site-header-login", inputs: { isLoggedIn: "isLoggedIn" }, outputs: { login: "login", loginBoxToggle: "loginBoxToggle" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoggedIn\">\n    <a href=\"#\"\n       class=\"ecl-button ecl-button--ghost ecl-site-header__login-toggle\"\n       [attr.aria-expanded]=\"isLoginBoxActive\"\n       (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n</ng-container>\n<ng-container *ngIf=\"isLoggedIn\">\n    <a href=\"#\"\n       class=\"ecl-button ecl-button--ghost 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\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n        <ecl-icon icon=\"corner-arrow\"\n                  size=\"xs\"\n                  class=\"ecl-site-header__login-arrow\"></ecl-icon>\n    </a>\n    <div class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n</ng-container>", styles: [".ecl-site-header__login-toggle .ecl-site-header__login-arrow{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSearchFormComponent, decorators: [{
+__decorate([
+    coerceBoolean
+], EclSiteHeaderLoginComponent.prototype, "isLoggedIn", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderLoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-search-form', providers: [ECL_SEARCH_FORM_VALUE_ACCESSOR], template: "<ecl-form-group>\n    <label \n        eclFormLabel \n        for=\"search-input\"\n        class=\"ecl-search-form__label\">\n        {{ 'ecl.common.SEARCH' | translate }}\n    </label>\n    <input eclTextInput\n            [(ngModel)]=\"searchInputText\"\n            (ngModelChange)=\"onModelChange($event)\"\n            type=\"search\"\n            name=\"search-input\"\n            placeholder=\"{{ placeholder || 'ecl.common.SEARCH' | translate }}\"\n            class=\"ecl-search-form__text-input\"/>\n</ecl-form-group>\n<button eclButton\n        aria-label=\"Search\"\n        variant=\"search\"\n        (click)=\"onSearchClick($event)\"\n        class=\"ecl-search-form__button\">\n    <span eclButtonLabel>\n        {{ searchButtonLabel || 'ecl.common.SEARCH' | translate }}\n    </span>\n    <ecl-icon [icon]=\"searchButtonIcon\" size=\"xs\"></ecl-icon>\n</button>\n" }]
-        }], propDecorators: { searchInputText: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], searchButtonLabel: [{
-                type: Input
-            }], searchButtonIcon: [{
+            args: [{ selector: 'ecl-site-header-login', template: "<ng-container *ngIf=\"!isLoggedIn\">\n    <a href=\"#\"\n       class=\"ecl-button ecl-button--ghost ecl-site-header__login-toggle\"\n       [attr.aria-expanded]=\"isLoginBoxActive\"\n       (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n</ng-container>\n<ng-container *ngIf=\"isLoggedIn\">\n    <a href=\"#\"\n       class=\"ecl-button ecl-button--ghost 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\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n        <ecl-icon icon=\"corner-arrow\"\n                  size=\"xs\"\n                  class=\"ecl-site-header__login-arrow\"></ecl-icon>\n    </a>\n    <div class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n</ng-container>", styles: [".ecl-site-header__login-toggle .ecl-site-header__login-arrow{display:inline-flex}\n"] }]
+        }], propDecorators: { isLoggedIn: [{
                 type: Input
-            }], cssClasses: [{
+            }], class: [{
                 type: HostBinding,
                 args: ['class']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], search: [{
+            }], login: [{
+                type: Output
+            }], loginBoxToggle: [{
                 type: Output
-            }], onEnterKeyDown: [{
-                type: HostListener,
-                args: ['keydown.enter', ['$event']]
             }] } });
 
-class EclSiteHeaderSearchEvent extends EclBaseEvent {
-    constructor(keyword) {
-        super();
-        this.keyword = keyword;
+class EclButtonLabelDirective extends ECLBaseDirective {
+    get cssClasses() {
+        return [
+            super.getCssClasses('ecl-button__label'),
+        ].join(' ').trim();
     }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclButtonLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: EclButtonLabelDirective, selector: "[eclButtonLabel]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-class EclSiteHeaderSearchToggleEvent extends EclBaseEvent {
-    constructor(isOpen) {
-        super();
-        this.isOpen = isOpen;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclButtonLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclButtonLabel]'
+                }]
+        }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EclFormGroupComponent extends ECLBaseDirective {
+    get cssClasses() {
+        return [
+            super.getCssClasses('ecl-form-group'),
+        ].join(' ').trim();
     }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclFormGroupComponent, selector: "[eclFormGroup], ecl-form-group", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>" }); }
 }
-const ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => EclSiteHeaderSearchComponent),
-    multi: true,
-};
-const noop$2 = () => { };
-class EclSiteHeaderSearchComponent extends ECLBaseDirective {
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclFormGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[eclFormGroup], ecl-form-group', template: "<ng-content></ng-content>" }]
+        }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EclFormLabelComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
-        this.class = 'ecl-site-header__search-container';
-        this.search = new EventEmitter();
-        this.searchToggle = new EventEmitter();
-        this.isSearchBoxActive = false;
-        this.onChange = noop$2;
-        this.onTouched = noop$2;
-    }
-    onSearch(evt) {
-        this.search.next(new EclSiteHeaderSearchEvent(evt.keyword));
-        this.onChange(evt.keyword);
-        return false;
-    }
-    onSearchBoxToggle(evt) {
-        this.isSearchBoxActive = !this.isSearchBoxActive;
-        const event = new EclSiteHeaderSearchToggleEvent(this.isSearchBoxActive);
-        this.searchToggle.next(event);
-        evt.preventDefault();
+        this.isOptional = false;
+        this.isInvalid = false;
+        this.isDisabled = false;
+        this.isRequired = false;
     }
-    getSearchBoxCssClasses() {
+    get cssClasses() {
         return [
-            'ecl-site-header__search',
-            this.isSearchBoxActive ? 'ecl-site-header__search--active' : ''
-        ].join(' ');
-    }
-    onModelChange(newValue) {
-        this.searchInputText = newValue;
-        this.onChange(newValue);
-    }
-    writeValue(value) {
-        this.searchInputText = value;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+            super.getCssClasses('ecl-form-label'),
+            this.isInvalid ? 'ecl-form-label--invalid' : '',
+            this.isDisabled ? 'ecl-form-label--disabled' : '',
+        ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclSiteHeaderSearchComponent, selector: "ecl-site-header-search", inputs: { searchInputText: "searchInputText", searchInputPlaceholder: "searchInputPlaceholder", searchButtonLabel: "searchButtonLabel" }, outputs: { search: "search", searchToggle: "searchToggle" }, host: { properties: { "class": "this.class" } }, providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0, template: "<a href=\"#\"\n   class=\"ecl-button ecl-button--ghost 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\"\n              size=\"s\"\n              class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form (search)=\"onSearch($event)\"\n                 [placeholder]=\"searchInputPlaceholder\"\n                 (ngModelChange)=\"onModelChange($event)\"\n                 [(ngModel)]=\"searchInputText\"\n                 [searchButtonLabel]=\"searchButtonLabel\"\n                 [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclSearchFormComponent, selector: "ecl-search-form", inputs: ["searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon"], outputs: ["search"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclFormLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclFormLabelComponent, selector: "[eclFormLabel]", inputs: { isOptional: "isOptional", isInvalid: "isInvalid", isDisabled: "isDisabled", isRequired: "isRequired" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<span *ngIf=\"isOptional\" class=\"ecl-form-label__optional\"> ({{ 'ecl.form-label.OPTIONAL' | translate }})</span>\n<span *ngIf=\"isRequired\" class=\"ecl-form-label__required\">*</span>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderSearchComponent, decorators: [{
+__decorate([
+    coerceBoolean
+], EclFormLabelComponent.prototype, "isOptional", void 0);
+__decorate([
+    coerceBoolean
+], EclFormLabelComponent.prototype, "isInvalid", void 0);
+__decorate([
+    coerceBoolean
+], EclFormLabelComponent.prototype, "isDisabled", void 0);
+__decorate([
+    coerceBoolean
+], EclFormLabelComponent.prototype, "isRequired", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclFormLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header-search', providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], template: "<a href=\"#\"\n   class=\"ecl-button ecl-button--ghost 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\"\n              size=\"s\"\n              class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form (search)=\"onSearch($event)\"\n                 [placeholder]=\"searchInputPlaceholder\"\n                 (ngModelChange)=\"onModelChange($event)\"\n                 [(ngModel)]=\"searchInputText\"\n                 [searchButtonLabel]=\"searchButtonLabel\"\n                 [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], searchInputText: [{
+            args: [{ selector: '[eclFormLabel]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<span *ngIf=\"isOptional\" class=\"ecl-form-label__optional\"> ({{ 'ecl.form-label.OPTIONAL' | translate }})</span>\n<span *ngIf=\"isRequired\" class=\"ecl-form-label__required\">*</span>\n" }]
+        }], propDecorators: { isOptional: [{
                 type: Input
-            }], searchInputPlaceholder: [{
+            }], isInvalid: [{
                 type: Input
-            }], searchButtonLabel: [{
+            }], isDisabled: [{
                 type: Input
-            }], search: [{
-                type: Output
-            }], searchToggle: [{
-                type: Output
-            }] } });
-
-class ECLClickOutsideDirective extends ECLBaseDirective {
-    constructor(elementRef) {
-        super();
-        this.elementRef = elementRef;
-        this.eclClickOutside = new EventEmitter();
-    }
-    onClick(target) {
-        const clickedInside = this.elementRef.nativeElement.contains(target);
-        if (!clickedInside) {
-            this.eclClickOutside.emit();
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ECLClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: ECLClickOutsideDirective, isStandalone: true, selector: "[eclClickOutside]", outputs: { eclClickOutside: "eclClickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ECLClickOutsideDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[eclClickOutside]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { eclClickOutside: [{
-                type: Output
-            }], onClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event.target']]
+            }], isRequired: [{
+                type: Input
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
-class EclLinkDirective extends ECLBaseDirective {
+class EclTextInputDirective extends ECLBaseDirective {
     get cssClasses() {
         return [
-            super.getCssClasses('ecl-link'),
-            this.variant ? `ecl-link--${this.variant}` : '',
+            super.getCssClasses('ecl-text-input'),
+            this.eclSize ? `ecl-text-input--${this.eclSize}` : '',
         ].join(' ').trim();
     }
-    get hasRightIcon() {
-        return this.isIconOnRightSide(this.eclIconComponents.toArray());
-    }
-    get hasLeftIcon() {
-        return this.isIconOnLeftSide(this.eclIconComponents.toArray());
-    }
-    get hasIcon() {
-        return this.eclIconComponents && this.eclIconComponents.length > 0;
-    }
-    constructor(el) {
+    constructor(ngControl) {
         super();
-        this.el = el;
+        this.ngControl = ngControl;
+        this.type = 'text';
+        this.eclSize = 'm';
+        this.isInvalid = false;
     }
-    ngAfterContentInit() {
-        if (this.eclIconComponents) {
-            setTimeout(() => {
-                this.eclIconComponents.forEach(icn => {
-                    if (this.isIconOnLeftSide(this.eclIconComponents.toArray())) {
-                        icn.class = 'ecl-link__icon ecl-link__icon--before';
-                    }
-                    else if (this.isIconOnRightSide(this.eclIconComponents.toArray())) {
-                        icn.class = 'ecl-link__icon ecl-link__icon--after';
-                    }
-                    else {
-                        icn.class = 'ecl-link__icon ecl-link__icon--before';
-                    }
-                });
-            });
+    get invalidState() {
+        if (this.ngControl) {
+            return this.ngControl.status === 'INVALID' && this.ngControl.touched;
+        }
+        else {
+            return this.isInvalid;
         }
     }
-    isIconOnRightSide(icons) {
-        return !!icons.find(icn => {
-            const iconEl = icn.el.nativeElement;
-            if (hasPreviousSiblingWithAttribute(iconEl, 'eclLinkLabel')) {
-                return true;
-            }
-            return false;
-        });
-    }
-    isIconOnLeftSide(icons) {
-        return !!icons.find(icn => {
-            const iconEl = icn.el.nativeElement;
-            if (hasNextSiblingWithAttribute(iconEl, 'eclLinkLabel')) {
-                return true;
-            }
-            return false;
-        });
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclLinkDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: EclLinkDirective, selector: "[eclLink]", inputs: { variant: "variant", isNegative: "isNegative", isNoVisited: "isNoVisited" }, host: { properties: { "class.ecl-link--negative": "this.isNegative", "class.ecl-link--no-visited": "this.isNoVisited", "class": "this.cssClasses", "class.ecl-link--icon-after": "this.hasRightIcon", "class.ecl-link--icon-before": "this.hasLeftIcon", "class.ecl-link--icon": "this.hasIcon" } }, queries: [{ propertyName: "eclIconComponents", predicate: i0.forwardRef(function () { return EclIconComponent; }) }], usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclTextInputDirective, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: EclTextInputDirective, selector: "input[eclTextInput]", inputs: { eclSize: "eclSize", isInvalid: "isInvalid" }, host: { properties: { "attr.type": "this.type", "class": "this.cssClasses", "class.ecl-text-input--invalid": "this.invalidState" } }, usesInheritance: true, ngImport: i0 }); }
 }
 __decorate([
     coerceBoolean
-], EclLinkDirective.prototype, "isNegative", void 0);
-__decorate([
-    coerceBoolean
-], EclLinkDirective.prototype, "isNoVisited", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclLinkDirective, decorators: [{
+], EclTextInputDirective.prototype, "isInvalid", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclTextInputDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[eclLink]'
+                    selector: 'input[eclTextInput]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { variant: [{
-                type: Input
-            }], isNegative: [{
-                type: Input
-            }, {
+        }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }]; }, propDecorators: { type: [{
                 type: HostBinding,
-                args: ['class.ecl-link--negative']
-            }], isNoVisited: [{
+                args: ['attr.type']
+            }], eclSize: [{
+                type: Input
+            }], isInvalid: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.ecl-link--no-visited']
-            }], eclIconComponents: [{
-                type: ContentChildren,
-                args: [forwardRef(() => EclIconComponent)]
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
-            }], hasRightIcon: [{
-                type: HostBinding,
-                args: ['class.ecl-link--icon-after']
-            }], hasLeftIcon: [{
-                type: HostBinding,
-                args: ['class.ecl-link--icon-before']
-            }], hasIcon: [{
+            }], invalidState: [{
                 type: HostBinding,
-                args: ['class.ecl-link--icon']
+                args: ['class.ecl-text-input--invalid']
             }] } });
 
-class EclSiteHeaderLanguageSelectedEvent extends EclBaseEvent {
-    constructor(language) {
+class EclSearchFormEvent extends EclBaseEvent {
+    constructor(keyword) {
         super();
-        this.language = language;
+        this.keyword = keyword;
     }
 }
-class EclSiteHeaderLanguageCloseEvent extends EclBaseEvent {
-}
-class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
-    constructor(popoverElementRef) {
-        super();
-        this.popoverElementRef = popoverElementRef;
-        this.euLanguages = [];
-        this.nonEuLanguages = [];
-        this.isHidden = false;
-        this.isPushRight = false;
-        this.isStack = false;
-        this.isFull = false;
-        this.languageClosed = new EventEmitter();
-        this.languageSelected = new EventEmitter();
-        this.role = 'dialog';
-        this.labelledBy = 'ecl-site-header__language-title';
+const ECL_SEARCH_FORM_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => EclSearchFormComponent),
+    multi: true,
+};
+const noop$3 = () => { };
+class EclSearchFormComponent extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.searchButtonIcon = 'search';
+        this.role = 'search';
+        this.search = new EventEmitter();
+        this.onChange = noop$3;
+        this.onTouched = noop$3;
     }
     get cssClasses() {
         return [
-            super.getCssClasses('ecl-site-header__language-container'),
-            this.isPushRight ? 'ecl-site-header__language-container--push-right' : '',
-            this.isFull ? 'ecl-site-header__language-container--full' : '',
+            super.getCssClasses('ecl-search-form'),
         ].join(' ').trim();
     }
-    get isModal() {
-        return !this.isHidden || undefined;
+    onSearchClick(evt) {
+        this.search.next(new EclSearchFormEvent(this.searchInputText));
+        evt.preventDefault();
     }
-    get isDropdownHidden() {
-        return this.isHidden || undefined;
+    onEnterKeyDown(evt) {
+        this.search.next(new EclSearchFormEvent(this.searchInputText));
+        evt.preventDefault();
     }
-    onCloseClick() {
-        this.languageClosed.next(new EclSiteHeaderLanguageCloseEvent());
+    onModelChange(newValue) {
+        this.searchInputText = newValue;
+        this.onChange(newValue);
     }
-    onLanguageClick(language) {
-        this.languageCode = language.code;
-        this.languageSelected.next(new EclSiteHeaderLanguageSelectedEvent(language));
+    writeValue(value) {
+        this.searchInputText = value;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderLanguagePopoverComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: { languageCode: "languageCode", euLanguages: "euLanguages", nonEuLanguages: "nonEuLanguages", euColumnsCount: "euColumnsCount", nonEuColumnsCount: "nonEuColumnsCount", isHidden: "isHidden", isPushRight: "isPushRight", isStack: "isStack", isFull: "isFull", rightPosition: "rightPosition", languageArrowPosition: "languageArrowPosition" }, outputs: { languageClosed: "languageClosed", languageSelected: "languageSelected" }, host: { properties: { "style.right": "this.rightPosition", "style.--ecl-language-arrow-position": "this.languageArrowPosition", "attr.role": "this.role", "attr.aria-labelledby": "this.labelledBy", "class": "this.cssClasses", "attr.aria-modal": "this.isModal", "attr.hidden": "this.isDropdownHidden" } }, 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\n            variant=\"ghost\"\n            class=\"ecl-site-header__language-close\"\n            (click)=\"onCloseClick()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.common.CLOSE' | translate }}\n        </span>\n        <ecl-icon icon=\"close-filled\"\n                  size=\"s\">\n        </ecl-icon>\n    </button>\n</div>\n\n<div class=\"ecl-site-header__language-content\" \n    [class.ecl-site-header__language-content--stack]=\"isStack\">\n    <div *ngIf=\"euLanguages.length\" \n        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            <li *ngFor=\"let item of euLanguages\"\n                class=\"ecl-site-header__language-item\">\n                <a eclLink\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)\">\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        </ul>\n    </div>\n    <div *ngIf=\"nonEuLanguages.length\" \n        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            <li *ngFor=\"let item of nonEuLanguages\"\n                class=\"ecl-site-header__language-item\">\n                <a eclLink\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)\">\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        </ul>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSearchFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclSearchFormComponent, selector: "ecl-search-form", inputs: { searchInputText: "searchInputText", placeholder: "placeholder", searchButtonLabel: "searchButtonLabel", searchButtonIcon: "searchButtonIcon" }, outputs: { search: "search" }, host: { listeners: { "keydown.enter": "onEnterKeyDown($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, providers: [ECL_SEARCH_FORM_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0, template: "<ecl-form-group>\n    <label \n        eclFormLabel \n        for=\"search-input\"\n        class=\"ecl-search-form__label\">\n        {{ 'ecl.common.SEARCH' | translate }}\n    </label>\n    <input eclTextInput\n            [(ngModel)]=\"searchInputText\"\n            (ngModelChange)=\"onModelChange($event)\"\n            type=\"search\"\n            name=\"search-input\"\n            placeholder=\"{{ placeholder || 'ecl.common.SEARCH' | translate }}\"\n            class=\"ecl-search-form__text-input\"/>\n</ecl-form-group>\n<button eclButton\n        aria-label=\"Search\"\n        variant=\"search\"\n        (click)=\"onSearchClick($event)\"\n        class=\"ecl-search-form__button\">\n    <span eclButtonLabel>\n        {{ searchButtonLabel || 'ecl.common.SEARCH' | translate }}\n    </span>\n    <ecl-icon [icon]=\"searchButtonIcon\" size=\"xs\"></ecl-icon>\n</button>\n", dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclFormGroupComponent, selector: "[eclFormGroup], ecl-form-group" }, { kind: "component", type: EclFormLabelComponent, selector: "[eclFormLabel]", inputs: ["isOptional", "isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: EclTextInputDirective, selector: "input[eclTextInput]", inputs: ["eclSize", "isInvalid"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderLanguagePopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSearchFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header-language-popover', 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\n            variant=\"ghost\"\n            class=\"ecl-site-header__language-close\"\n            (click)=\"onCloseClick()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.common.CLOSE' | translate }}\n        </span>\n        <ecl-icon icon=\"close-filled\"\n                  size=\"s\">\n        </ecl-icon>\n    </button>\n</div>\n\n<div class=\"ecl-site-header__language-content\" \n    [class.ecl-site-header__language-content--stack]=\"isStack\">\n    <div *ngIf=\"euLanguages.length\" \n        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            <li *ngFor=\"let item of euLanguages\"\n                class=\"ecl-site-header__language-item\">\n                <a eclLink\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)\">\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        </ul>\n    </div>\n    <div *ngIf=\"nonEuLanguages.length\" \n        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            <li *ngFor=\"let item of nonEuLanguages\"\n                class=\"ecl-site-header__language-item\">\n                <a eclLink\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)\">\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        </ul>\n    </div>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { languageCode: [{
-                type: Input
-            }], euLanguages: [{
-                type: Input
-            }], nonEuLanguages: [{
-                type: Input
-            }], euColumnsCount: [{
-                type: Input
-            }], nonEuColumnsCount: [{
-                type: Input
-            }], isHidden: [{
-                type: Input
-            }], isPushRight: [{
-                type: Input
-            }], isStack: [{
+            args: [{ selector: 'ecl-search-form', providers: [ECL_SEARCH_FORM_VALUE_ACCESSOR], template: "<ecl-form-group>\n    <label \n        eclFormLabel \n        for=\"search-input\"\n        class=\"ecl-search-form__label\">\n        {{ 'ecl.common.SEARCH' | translate }}\n    </label>\n    <input eclTextInput\n            [(ngModel)]=\"searchInputText\"\n            (ngModelChange)=\"onModelChange($event)\"\n            type=\"search\"\n            name=\"search-input\"\n            placeholder=\"{{ placeholder || 'ecl.common.SEARCH' | translate }}\"\n            class=\"ecl-search-form__text-input\"/>\n</ecl-form-group>\n<button eclButton\n        aria-label=\"Search\"\n        variant=\"search\"\n        (click)=\"onSearchClick($event)\"\n        class=\"ecl-search-form__button\">\n    <span eclButtonLabel>\n        {{ searchButtonLabel || 'ecl.common.SEARCH' | translate }}\n    </span>\n    <ecl-icon [icon]=\"searchButtonIcon\" size=\"xs\"></ecl-icon>\n</button>\n" }]
+        }], propDecorators: { searchInputText: [{
                 type: Input
-            }], isFull: [{
+            }], placeholder: [{
                 type: Input
-            }], rightPosition: [{
+            }], searchButtonLabel: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.right']
-            }], languageArrowPosition: [{
+            }], searchButtonIcon: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.--ecl-language-arrow-position']
-            }], languageClosed: [{
-                type: Output
-            }], languageSelected: [{
-                type: Output
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], labelledBy: [{
-                type: HostBinding,
-                args: ['attr.aria-labelledby']
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
-            }], isModal: [{
-                type: HostBinding,
-                args: ['attr.aria-modal']
-            }], isDropdownHidden: [{
+            }], role: [{
                 type: HostBinding,
-                args: ['attr.hidden']
+                args: ['attr.role']
+            }], search: [{
+                type: Output
+            }], onEnterKeyDown: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
             }] } });
 
-class EclSiteHeaderLanguageClickEvent extends EclBaseEvent {
-}
-class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
-    get languageCodes() {
-        return this._languageCodes;
-    }
-    set languageCodes(value) {
-        this._languageCodes = value;
-        this.updateLanguages();
-    }
-    get cssClasses() {
-        return [
-            super.getCssClasses('ecl-site-header__language'),
-        ].join(' ').trim();
-    }
-    constructor(eclLanguageService, eclSiteHeader) {
+class EclSiteHeaderSearchEvent extends EclBaseEvent {
+    constructor(keyword) {
         super();
-        this.eclLanguageService = eclLanguageService;
-        this.eclSiteHeader = eclSiteHeader;
-        this.languageCode = 'en';
-        this._languageCodes = [];
-        this.languageClick = new EventEmitter();
-        this.languageSelected = new EventEmitter();
-        this.MOBILE_BREAKPOINT = 768;
-        this.LANGUAGE_MAX_COLUMNS = 8;
-        this.isLanguagesDropdownVisible = false;
-        this.euLanguages = [];
-        this.nonEuLanguages = [];
-        this.euColumnsCount = 1;
-        this.nonEuColumnsCount = 1;
+        this.keyword = keyword;
     }
-    ngOnInit() {
-        this.updateLanguages();
+}
+class EclSiteHeaderSearchToggleEvent extends EclBaseEvent {
+    constructor(isOpen) {
+        super();
+        this.isOpen = isOpen;
     }
-    ngOnChanges(changes) {
-        if (changes['languageCodes']) {
-            this.updateLanguages();
-        }
+}
+const ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => EclSiteHeaderSearchComponent),
+    multi: true,
+};
+const noop$2 = () => { };
+class EclSiteHeaderSearchComponent extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.class = 'ecl-site-header__search-container';
+        this.search = new EventEmitter();
+        this.searchToggle = new EventEmitter();
+        this.isSearchBoxActive = false;
+        this.onChange = noop$2;
+        this.onTouched = noop$2;
     }
-    getLanguageLabel() {
-        return this.eclLanguageService.getLanguageByCode(this.languageCode)?.label;
+    onSearch(evt) {
+        this.search.next(new EclSiteHeaderSearchEvent(evt.keyword));
+        this.onChange(evt.keyword);
+        return false;
     }
-    onLanguageClick(evt) {
-        this.isLanguagesDropdownVisible = !this.isLanguagesDropdownVisible;
-        if (this.isLanguagesDropdownVisible) {
-            this.calculatePopoverPosition();
-        }
-        else {
-            setTimeout(() => {
-                this.isFull = false;
-                this.isStack = false;
-                this.isPushRight = false;
-                this.rightPosition = undefined;
-                this.languageArrowPosition = undefined;
-            });
-        }
-        this.languageClick.next(new EclSiteHeaderLanguageClickEvent());
+    onSearchBoxToggle(evt) {
+        this.isSearchBoxActive = !this.isSearchBoxActive;
+        const event = new EclSiteHeaderSearchToggleEvent(this.isSearchBoxActive);
+        this.searchToggle.next(event);
         evt.preventDefault();
     }
-    onLanguageClosed(evt) {
-        this.isLanguagesDropdownVisible = false;
-    }
-    onLanguageSelected(evt) {
-        this.languageCode = evt.language.code;
-        this.isLanguagesDropdownVisible = false;
-        this.languageSelected.next(new EclSiteHeaderLanguageSelectedEvent(evt.language));
-    }
-    onClickOutside() {
-        this.isLanguagesDropdownVisible = false;
+    getSearchBoxCssClasses() {
+        return [
+            'ecl-site-header__search',
+            this.isSearchBoxActive ? 'ecl-site-header__search--active' : ''
+        ].join(' ');
     }
-    onEscapeKeydownHandler() {
-        this.isLanguagesDropdownVisible = false;
+    onModelChange(newValue) {
+        this.searchInputText = newValue;
+        this.onChange(newValue);
     }
-    hasLanguageCodes() {
-        return this.languageCodes && this.languageCodes.length > 0;
+    writeValue(value) {
+        this.searchInputText = value;
     }
-    updateLanguages() {
-        const languages = this.eclLanguageService.getLanguagesByCodes(this.languageCodes);
-        this.euLanguages = languages.filter(item => {
-            return this.eclLanguageService.isEuLanguage(item.code);
-        });
-        this.nonEuLanguages = languages.filter(item => {
-            return !this.eclLanguageService.isEuLanguage(item.code);
-        });
-        this.euColumnsCount = Math.ceil(this.euLanguages.length / this.LANGUAGE_MAX_COLUMNS);
-        this.nonEuColumnsCount = Math.ceil(this.nonEuLanguages.length / this.LANGUAGE_MAX_COLUMNS);
+    registerOnChange(fn) {
+        this.onChange = fn;
     }
-    calculatePopoverPosition() {
-        setTimeout(() => {
-            if (this.hasLanguageCodes()) {
-                const arrowSize = '0.5rem';
-                const containerElement = this.eclSiteHeader.topContainerElement;
-                const containerRect = containerElement.getBoundingClientRect();
-                const linkRect = this.languageLinkElement.getBoundingClientRect();
-                const popoverRect = this.languagePopoverElement.getBoundingClientRect();
-                const screenWidth = window.innerWidth;
-                const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-                this.isFull = false;
-                this.isStack = false;
-                this.isPushRight = false;
-                this.rightPosition = undefined;
-                this.languageArrowPosition = undefined;
-                if (popoverRect.width > containerRect.width) {
-                    this.isStack = true;
-                    if (this.nonEuLanguages.length) {
-                        this.nonEuColumnsCount = Math.max(this.euColumnsCount, this.nonEuColumnsCount);
-                    }
-                }
-                if (popoverRect.right > screenWidth) {
-                    const arrowPosition = containerRect.right - linkRect.right + linkRect.width / 2;
-                    this.isPushRight = true;
-                    this.rightPosition = `-${containerRect.right - linkRect.right}px`;
-                    this.languageArrowPosition = `calc(${arrowPosition}px - ${arrowSize})`;
-                }
-                if (vw < this.MOBILE_BREAKPOINT) {
-                    const arrowPosition = popoverRect.right - linkRect.right + linkRect.width / 2;
-                    this.isFull = true;
-                    this.languageArrowPosition = `calc(${arrowPosition}px - ${arrowSize})`;
-                }
-            }
-        });
+    registerOnTouched(fn) {
+        this.onTouched = fn;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderLanguageComponent, deps: [{ token: EclLanguageService }, { token: EclSiteHeaderComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclSiteHeaderLanguageComponent, selector: "ecl-site-header-language", inputs: { languageCode: "languageCode", languageCodes: "languageCodes", languageLabel: "languageLabel" }, outputs: { languageClick: "languageClick", languageSelected: "languageSelected" }, host: { listeners: { "eclClickOutside": "onClickOutside()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "languagePopoverElement", first: true, predicate: ["languagePopover"], descendants: true, read: ElementRef }, { propertyName: "languageLinkElement", first: true, predicate: ["languageLink"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<a href=\"#\"\n   #languageLink\n   class=\"ecl-button ecl-button--ghost ecl-site-header__language-selector ecl-u-d-block\"\n   aria-controls=\"language-list-overlay\"\n   [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE' | translate\"\n   [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n   (click)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"language\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        <span class=\"ecl-site-header__language-code\">{{ languageCode }}</span>\n    </span>\n    {{ getLanguageLabel() }}\n</a>\n\n<ecl-site-header-language-popover \n    #languagePopover\n    *ngIf=\"hasLanguageCodes()\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isHidden]=\"!isLanguagesDropdownVisible\" \n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: ["languageCode", "euLanguages", "nonEuLanguages", "euColumnsCount", "nonEuColumnsCount", "isHidden", "isPushRight", "isStack", "isFull", "rightPosition", "languageArrowPosition"], outputs: ["languageClosed", "languageSelected"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclSiteHeaderSearchComponent, selector: "ecl-site-header-search", inputs: { searchInputText: "searchInputText", searchInputPlaceholder: "searchInputPlaceholder", searchButtonLabel: "searchButtonLabel" }, outputs: { search: "search", searchToggle: "searchToggle" }, host: { properties: { "class": "this.class" } }, providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0, template: "<a href=\"#\"\n   class=\"ecl-button ecl-button--ghost 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\"\n              size=\"s\"\n              class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form (search)=\"onSearch($event)\"\n                 [placeholder]=\"searchInputPlaceholder\"\n                 (ngModelChange)=\"onModelChange($event)\"\n                 [(ngModel)]=\"searchInputText\"\n                 [searchButtonLabel]=\"searchButtonLabel\"\n                 [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclSearchFormComponent, selector: "ecl-search-form", inputs: ["searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon"], outputs: ["search"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
-__decorate([
-    coerceElement
-], EclSiteHeaderLanguageComponent.prototype, "languagePopoverElement", void 0);
-__decorate([
-    coerceElement
-], EclSiteHeaderLanguageComponent.prototype, "languageLinkElement", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderLanguageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header-language', hostDirectives: [{
-                            directive: ECLClickOutsideDirective,
-                            outputs: ['eclClickOutside'],
-                        }], template: "<a href=\"#\"\n   #languageLink\n   class=\"ecl-button ecl-button--ghost ecl-site-header__language-selector ecl-u-d-block\"\n   aria-controls=\"language-list-overlay\"\n   [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE' | translate\"\n   [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n   (click)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"language\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        <span class=\"ecl-site-header__language-code\">{{ languageCode }}</span>\n    </span>\n    {{ getLanguageLabel() }}\n</a>\n\n<ecl-site-header-language-popover \n    #languagePopover\n    *ngIf=\"hasLanguageCodes()\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isHidden]=\"!isLanguagesDropdownVisible\" \n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n" }]
-        }], ctorParameters: function () { return [{ type: EclLanguageService }, { type: EclSiteHeaderComponent }]; }, propDecorators: { languageCode: [{
+            args: [{ selector: 'ecl-site-header-search', providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], template: "<a href=\"#\"\n   class=\"ecl-button ecl-button--ghost 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\"\n              size=\"s\"\n              class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form (search)=\"onSearch($event)\"\n                 [placeholder]=\"searchInputPlaceholder\"\n                 (ngModelChange)=\"onModelChange($event)\"\n                 [(ngModel)]=\"searchInputText\"\n                 [searchButtonLabel]=\"searchButtonLabel\"\n                 [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], searchInputText: [{
                 type: Input
-            }], languageCodes: [{
+            }], searchInputPlaceholder: [{
                 type: Input
-            }], languageLabel: [{
+            }], searchButtonLabel: [{
                 type: Input
-            }], languagePopoverElement: [{
-                type: ViewChild,
-                args: ['languagePopover', { read: ElementRef }]
-            }], languageLinkElement: [{
-                type: ViewChild,
-                args: ['languageLink', { read: ElementRef }]
-            }], languageClick: [{
+            }], search: [{
                 type: Output
-            }], languageSelected: [{
+            }], searchToggle: [{
                 type: Output
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], onClickOutside: [{
-                type: HostListener,
-                args: ['eclClickOutside']
-            }], onEscapeKeydownHandler: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
             }] } });
 
 class EclSiteHeaderLogoClickEvent extends EclBaseEvent {
@@ -1429,7 +1437,6 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         this.languageClick = new EventEmitter();
         this.languageCode = 'en';
         this.destroy$ = new Subject();
-        this.handlei18nEvents();
     }
     ngAfterContentInit() {
         if (this.eclLoginComponent && this.eclSearchComponent) {
@@ -1453,6 +1460,15 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
                 .subscribe(evt => {
                 this.languageClick.next(new EclSiteHeaderLanguageClickEvent());
             });
+            this.eclLanguageComponent
+                .languageSelected
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(evt => {
+                this.languageCode = this.getEULanguageCode(evt.language?.code);
+            });
+        }
+        if (this.eclLanguageComponent) {
+            this.languageCode = this.getEULanguageCode(this.eclLanguageComponent?.languageCode);
         }
     }
     ngOnDestroy() {
@@ -1466,14 +1482,6 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
             evt.preventDefault();
         }
     }
-    handlei18nEvents() {
-        this.languageCode = this.getEULanguageCode(this.translateService.currentLang);
-        this.translateService.onLangChange
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((langChangeEvent) => {
-            this.languageCode = this.getEULanguageCode(langChangeEvent.lang);
-        });
-    }
     getEULanguageCode(languageCode) {
         if (!this.eclLanguageService.isEuLanguage(languageCode)) {
             return 'en';
@@ -1481,7 +1489,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         return languageCode;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclSiteHeaderComponent, deps: [{ token: EclLanguageService }, { token: i2$1.TranslateService }, { token: EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclSiteHeaderComponent, selector: "ecl-site-header", inputs: { logoUrl: "logoUrl", siteName: "siteName" }, outputs: { logoClick: "logoClick", languageClick: "languageClick" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "eclLoginComponent", first: true, predicate: EclSiteHeaderLoginComponent, descendants: true }, { propertyName: "eclSearchComponent", first: true, predicate: EclSiteHeaderSearchComponent, descendants: true }, { propertyName: "eclLanguageComponent", first: true, predicate: EclSiteHeaderLanguageComponent, descendants: true }], viewQueries: [{ propertyName: "topContainerElement", first: true, predicate: ["topContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-site-header__header\">\n    <div class=\"ecl-site-header__container ecl-container\">\n        <div #topContainer class=\"ecl-site-header__top\">\n            <a eclLink \n                variant=\"standalone\" \n                class=\"ecl-site-header__logo-link\"\n                href=\"https://ec.europa.eu/info/index_{{ languageCode }}\"\n                (click)=\"onECLogoClick($event)\" \n                [attr.aria-label]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n\n                <ng-content select=\"[eclSiteHeaderEnvironment]\"></ng-content>\n\n                <ng-container *ngIf=\"eclThemeService.isEC$ | async\">\n                    <img alt=\"European Commission logo\" \n                        [attr.title]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\" \n                        class=\"ecl-site-header__logo-image ecl-site-header__logo-image-desktop\" \n                        src=\"./assets/images/ecl/ec/logo/logo-ec--{{ languageCode }}.svg\"/>\n                </ng-container>\n\n                <ng-container *ngIf=\"eclThemeService.isEU$ | async\">\n                    <img alt=\"European Union flag\" \n                        [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\" \n                        class=\"ecl-site-header__logo-image ecl-site-header__logo-image-mobile\" \n                        src=\"./assets/images/ecl/eu/logo/condensed-version/positive/logo-eu--{{ languageCode}}.svg\"/>\n                    <img alt=\"European Union flag\" \n                        [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\" \n                        class=\"ecl-site-header__logo-image ecl-site-header__logo-image-desktop\" \n                        src=\"./assets/images/ecl/eu/logo/standard-version/positive/logo-eu--{{ languageCode}}.svg\"/>\n                </ng-container>\n            </a>\n            <ng-content select=\"ecl-site-header-action\"></ng-content>\n        </div>\n    </div>\n</div>\n\n<ng-content select=\"ecl-site-header-message\"></ng-content>\n<ng-content select=\"ecl-site-header-banner-top\"></ng-content>\n\n<div *ngIf=\"siteName\" class=\"ecl-site-header__banner\">\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<ng-content select=\"ecl-menu\"></ng-content>\n\n<!-- @deprecated language list is replaced with site header language  -->\n<ng-content select=\"ecl-language-list\"></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclSiteHeaderComponent, selector: "ecl-site-header", inputs: { logoUrl: "logoUrl", siteName: "siteName", languageCode: "languageCode" }, outputs: { logoClick: "logoClick", languageClick: "languageClick" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "eclLoginComponent", first: true, predicate: EclSiteHeaderLoginComponent, descendants: true }, { propertyName: "eclSearchComponent", first: true, predicate: EclSiteHeaderSearchComponent, descendants: true }, { propertyName: "eclLanguageComponent", first: true, predicate: EclSiteHeaderLanguageComponent, descendants: true }], viewQueries: [{ propertyName: "topContainerElement", first: true, predicate: ["topContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-site-header__header\">\n    <div class=\"ecl-site-header__container ecl-container\">\n        <div #topContainer class=\"ecl-site-header__top\">\n            <a eclLink \n                variant=\"standalone\" \n                class=\"ecl-site-header__logo-link\"\n                href=\"https://ec.europa.eu/info/index_{{ languageCode }}\"\n                (click)=\"onECLogoClick($event)\" \n                [attr.aria-label]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n\n                <ng-content select=\"[eclSiteHeaderEnvironment]\"></ng-content>\n\n                <ng-container *ngIf=\"eclThemeService.isEC$ | async\">\n                    <img alt=\"European Commission logo\" \n                        [attr.title]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\" \n                        class=\"ecl-site-header__logo-image ecl-site-header__logo-image-desktop\" \n                        src=\"./assets/images/ecl/ec/logo/logo-ec--{{ languageCode }}.svg\"/>\n                </ng-container>\n\n                <ng-container *ngIf=\"eclThemeService.isEU$ | async\">\n                    <img alt=\"European Union flag\" \n                        [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\" \n                        class=\"ecl-site-header__logo-image ecl-site-header__logo-image-mobile\" \n                        src=\"./assets/images/ecl/eu/logo/condensed-version/positive/logo-eu--{{ languageCode}}.svg\"/>\n                    <img alt=\"European Union flag\" \n                        [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\" \n                        class=\"ecl-site-header__logo-image ecl-site-header__logo-image-desktop\" \n                        src=\"./assets/images/ecl/eu/logo/standard-version/positive/logo-eu--{{ languageCode}}.svg\"/>\n                </ng-container>\n            </a>\n            <ng-content select=\"ecl-site-header-action\"></ng-content>\n        </div>\n    </div>\n</div>\n\n<ng-content select=\"ecl-site-header-message\"></ng-content>\n<ng-content select=\"ecl-site-header-banner-top\"></ng-content>\n\n<div *ngIf=\"siteName\" class=\"ecl-site-header__banner\">\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<ng-content select=\"ecl-menu\"></ng-content>\n\n<!-- @deprecated language list is replaced with site header language  -->\n<ng-content select=\"ecl-language-list\"></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
 __decorate([
     coerceElement
@@ -1515,6 +1523,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImpor
             }], eclLanguageComponent: [{
                 type: ContentChild,
                 args: [EclSiteHeaderLanguageComponent]
+            }], languageCode: [{
+                type: Input
             }] } });
 
 /**
@@ -2841,8 +2851,11 @@ class EclAppComponent extends ECLBaseDirective {
     }
     handleLanguageChangeState() {
         this.eclLanguageService.currentLanguage$.pipe(takeUntil$1(this.destroy$)).subscribe(lang => {
-            this.textDirection = lang.isRtl ? 'rtl' : 'ltr';
-            this.eclSiteHeaderLanguage.languageCode = lang.code;
+            setTimeout(() => {
+                this.textDirection = lang.isRtl ? 'rtl' : 'ltr';
+                this.eclSiteHeaderLanguage.languageCode = lang.code;
+                this.eclSiteHeader.languageCode = lang.code;
+            });
         });
     }
     handleUIEvents() {
@@ -2852,7 +2865,7 @@ class EclAppComponent extends ECLBaseDirective {
         });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclAppComponent, deps: [{ token: EclLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclAppComponent, selector: "ecl-app", outputs: { languageDismiss: "languageDismiss" }, host: { properties: { "attr.dir": "this.textDirection" } }, queries: [{ propertyName: "eclSiteHeaderLanguage", first: true, predicate: EclSiteHeaderLanguageComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>" }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclAppComponent, selector: "ecl-app", outputs: { languageDismiss: "languageDismiss" }, host: { properties: { "attr.dir": "this.textDirection" } }, queries: [{ propertyName: "eclSiteHeaderLanguage", first: true, predicate: EclSiteHeaderLanguageComponent, descendants: true }, { propertyName: "eclSiteHeader", first: true, predicate: EclSiteHeaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclAppComponent, decorators: [{
             type: Component,
@@ -2863,6 +2876,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImpor
             }], eclSiteHeaderLanguage: [{
                 type: ContentChild,
                 args: [EclSiteHeaderLanguageComponent]
+            }], eclSiteHeader: [{
+                type: ContentChild,
+                args: [EclSiteHeaderComponent]
             }], languageDismiss: [{
                 type: Output
             }] } });
@@ -4602,8 +4618,10 @@ class EclBreadcrumbComponent extends ECLBaseDirective {
         this.eclEllipsisSegment.isHidden = true;
     }
     truncateBreadcrumb() {
-        this.insertEllipsisSegmentIntoPosition();
-        this.handleOverflownSegments();
+        setTimeout(() => {
+            this.insertEllipsisSegmentIntoPosition();
+            this.handleOverflownSegments();
+        });
     }
     insertEllipsisSegmentIntoPosition() {
         if (this.hasEnoughSegments()) {
@@ -6481,14 +6499,14 @@ class EclExpandableComponent extends ECLBaseDirective {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclExpandableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclExpandableComponent, selector: "ecl-expandable", inputs: { isExpanded: "isExpanded", collapsedLabel: "collapsedLabel", expandedLabel: "expandedLabel" }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<button eclButton\n  variant=\"secondary\"\n  class=\"ecl-expandable__toggle\"\n  [attr.aria-expanded]=\"isExpanded\"\n  (click)=\"onButtonClick()\">\n    <span eclButtonLabel>\n      <ng-container *ngIf=\"!isExpanded\">\n        {{ collapsedLabel || 'ecl.common.EXPAND' | translate }}\n      </ng-container>\n      <ng-container *ngIf=\"isExpanded\">\n        {{ expandedLabel || 'ecl.common.COLLAPSE' | translate }}\n      </ng-container>\n    </span>\n    <ecl-icon icon=\"corner-arrow\" size=\"fluid\" transform=\"rotate-180\"></ecl-icon>\n</button>\n<div class=\"ecl-expandable__content\" [hidden]=\"!isExpanded\">\n  <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: EclExpandableComponent, selector: "ecl-expandable", inputs: { isExpanded: "isExpanded", collapsedLabel: "collapsedLabel", expandedLabel: "expandedLabel" }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<button eclButton\n  variant=\"secondary\"\n  type=\"button\"\n  class=\"ecl-expandable__toggle\"\n  [attr.aria-expanded]=\"isExpanded\"\n  (click)=\"onButtonClick()\">\n    <span eclButtonLabel>\n      <ng-container *ngIf=\"!isExpanded\">\n        {{ collapsedLabel || 'ecl.common.EXPAND' | translate }}\n      </ng-container>\n      <ng-container *ngIf=\"isExpanded\">\n        {{ expandedLabel || 'ecl.common.COLLAPSE' | translate }}\n      </ng-container>\n    </span>\n    <ecl-icon icon=\"corner-arrow\" size=\"fluid\" transform=\"rotate-180\"></ecl-icon>\n</button>\n<div class=\"ecl-expandable__content\" [hidden]=\"!isExpanded\">\n  <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
 __decorate([
     coerceBoolean
 ], EclExpandableComponent.prototype, "isExpanded", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: EclExpandableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-expandable', template: "<button eclButton\n  variant=\"secondary\"\n  class=\"ecl-expandable__toggle\"\n  [attr.aria-expanded]=\"isExpanded\"\n  (click)=\"onButtonClick()\">\n    <span eclButtonLabel>\n      <ng-container *ngIf=\"!isExpanded\">\n        {{ collapsedLabel || 'ecl.common.EXPAND' | translate }}\n      </ng-container>\n      <ng-container *ngIf=\"isExpanded\">\n        {{ expandedLabel || 'ecl.common.COLLAPSE' | translate }}\n      </ng-container>\n    </span>\n    <ecl-icon icon=\"corner-arrow\" size=\"fluid\" transform=\"rotate-180\"></ecl-icon>\n</button>\n<div class=\"ecl-expandable__content\" [hidden]=\"!isExpanded\">\n  <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ecl-expandable', template: "<button eclButton\n  variant=\"secondary\"\n  type=\"button\"\n  class=\"ecl-expandable__toggle\"\n  [attr.aria-expanded]=\"isExpanded\"\n  (click)=\"onButtonClick()\">\n    <span eclButtonLabel>\n      <ng-container *ngIf=\"!isExpanded\">\n        {{ collapsedLabel || 'ecl.common.EXPAND' | translate }}\n      </ng-container>\n      <ng-container *ngIf=\"isExpanded\">\n        {{ expandedLabel || 'ecl.common.COLLAPSE' | translate }}\n      </ng-container>\n    </span>\n    <ecl-icon icon=\"corner-arrow\" size=\"fluid\" transform=\"rotate-180\"></ecl-icon>\n</button>\n<div class=\"ecl-expandable__content\" [hidden]=\"!isExpanded\">\n  <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"] }]
         }], propDecorators: { isExpanded: [{
                 type: Input
             }], collapsedLabel: [{