@eui/ecl 19.0.0-next.1 → 19.0.0-next.3

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

@@ -0,0 +1,1130 @@
+import * as i4$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, HostBinding, Directive, afterNextRender, EventEmitter, ViewChild, Input, Output, HostListener, ElementRef, booleanAttribute, forwardRef, ContentChild, NgModule } from '@angular/core';
+import * as i2$2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3$1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i1$1 from '@eui/ecl/core';
+import { ECLBaseDirective, EclBaseEvent, ECLClickOutsideDirective, EclAreaChangeEvent, EclAreaDataService, EclExpandableItemSetDataService } from '@eui/ecl/core';
+import * as i4 from '@eui/ecl/components/ecl-button';
+import { EclButtonComponentModule } from '@eui/ecl/components/ecl-button';
+import { EclFormGroupComponentModule } from '@eui/ecl/components/ecl-form-group';
+import * as i2$1 from '@eui/ecl/components/ecl-icon';
+import { EclIconComponentModule } from '@eui/ecl/components/ecl-icon';
+import * as i3 from '@eui/ecl/components/ecl-link';
+import { EclLinkDirectiveModule } from '@eui/ecl/components/ecl-link';
+import * as i4$2 from '@eui/ecl/components/ecl-search-form';
+import { EclSearchFormComponentModule } from '@eui/ecl/components/ecl-search-form';
+import { Subject, takeUntil as takeUntil$1, debounceTime } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import * as i1 from '@angular/cdk/layout';
+import { EclMenuComponent } from '@eui/ecl/components/ecl-menu';
+import * as i4$3 from '@eui/ecl/components/ecl-mega-menu';
+import { EclMegaMenuComponent } from '@eui/ecl/components/ecl-mega-menu';
+import * as i2 from '@angular/cdk/scrolling';
+
+class EclSiteHeaderActionComponent extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.class = 'ecl-site-header__action';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclSiteHeaderActionComponent, isStandalone: false, selector: "ecl-site-header-action", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ecl-site-header-login\"></ng-content>\n<ng-content select=\"ecl-site-header-language\"></ng-content>\n<ng-content select=\"ecl-site-header-search\"></ng-content>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-site-header-action', standalone: false, template: "<ng-content select=\"ecl-site-header-login\"></ng-content>\n<ng-content select=\"ecl-site-header-language\"></ng-content>\n<ng-content select=\"ecl-site-header-search\"></ng-content>\n" }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EclSiteHeaderBannerTopComponent extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.className = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderBannerTopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclSiteHeaderBannerTopComponent, isStandalone: false, selector: "ecl-site-header-banner-top", host: { properties: { "class.ecl-site-header__banner-top": "this.className" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-container\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderBannerTopComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-site-header-banner-top', standalone: false, template: "<div class=\"ecl-container\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class.ecl-site-header__banner-top']
+            }] } });
+
+class EclSiteHeaderCtaDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.className = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderCtaDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclSiteHeaderCtaDirective, isStandalone: false, selector: "[eclSiteHeaderCta]", host: { properties: { "class.ecl-site-header__cta": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderCtaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclSiteHeaderCta]',
+                    standalone: false,
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class.ecl-site-header__cta']
+            }] } });
+
+class EclSiteHeaderEnvironmentComponent extends ECLBaseDirective {
+    get cssClasses() {
+        return [super.getCssClasses(''), 'ecl-u-type-xl ecl-u-bg-error ecl-u-type-color-white'].join(' ');
+    }
+    constructor(el, cdkBreakpointObserver, renderer) {
+        super();
+        this.el = el;
+        this.cdkBreakpointObserver = cdkBreakpointObserver;
+        this.renderer = renderer;
+        this.destroy$ = new Subject();
+        this.isMobile = false;
+        afterNextRender(() => {
+            const el = this.el.nativeElement;
+            this.parentEl = this.renderer.parentNode(el);
+            if (this.parentEl) {
+                this.renderer.setStyle(this.parentEl, 'display', 'flex');
+                this.renderer.setStyle(this.parentEl, 'alignItems', 'center');
+                this.renderer.setStyle(this.parentEl, 'position', 'relative');
+            }
+            this.observeBreakpointChanges();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    observeBreakpointChanges() {
+        this.cdkBreakpointObserver
+            .observe(['(max-width: 480px)'])
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((result) => {
+            this.isMobile = result.matches;
+            if (this.isMobile) {
+                this.manageMobile();
+            }
+            else {
+                this.manageDesktop();
+            }
+        });
+    }
+    manageMobile() {
+        if (this.parentEl) {
+            this.renderer.setStyle(this.parentEl, 'display', 'block');
+            this.renderer.setStyle(this.el.nativeElement, 'width', 'unset');
+        }
+    }
+    manageDesktop() {
+        if (this.parentEl) {
+            this.renderer.setStyle(this.parentEl, 'display', 'flex');
+            this.renderer.setStyle(this.el.nativeElement, 'width', '100%');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderEnvironmentComponent, deps: [{ token: i0.ElementRef }, { token: i1.BreakpointObserver }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclSiteHeaderEnvironmentComponent, isStandalone: false, selector: "[eclSiteHeaderEnvironment]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{position:absolute;width:100%;font-size:1.3rem;padding:.3rem;opacity:.6;text-align:center;transform:rotate(-10deg)}@media print{:host{display:none}}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderEnvironmentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[eclSiteHeaderEnvironment]', standalone: false, template: '<ng-content></ng-content>', styles: [":host{position:absolute;width:100%;font-size:1.3rem;padding:.3rem;opacity:.6;text-align:center;transform:rotate(-10deg)}@media print{:host{display:none}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.BreakpointObserver }, { type: i0.Renderer2 }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EclSiteHeaderLoginEvent extends EclBaseEvent {
+}
+class EclSiteHeaderLoginBoxToggleEvent extends EclBaseEvent {
+    constructor(isOpen) {
+        super();
+        this.isOpen = isOpen;
+    }
+}
+
+class EclSiteHeaderLanguageClickEvent extends EclBaseEvent {
+}
+class EclSiteHeaderLanguageSelectedEvent extends EclBaseEvent {
+    constructor(language) {
+        super();
+        this.language = language;
+    }
+}
+class EclSiteHeaderLanguageCloseEvent extends EclBaseEvent {
+}
+
+class EclSiteHeaderLogoClickEvent extends EclBaseEvent {
+}
+
+class EclSiteHeaderSearchEvent extends EclBaseEvent {
+    constructor(keyword) {
+        super();
+        this.keyword = keyword;
+    }
+}
+class EclSiteHeaderSearchToggleEvent extends EclBaseEvent {
+    constructor(isOpen) {
+        super();
+        this.isOpen = isOpen;
+    }
+}
+
+class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
+    get display() {
+        return this.isHidden ? 'none' : 'block';
+    }
+    constructor(el, eclThemeService, scrollDispatcher, zone) {
+        super();
+        this.el = el;
+        this.eclThemeService = eclThemeService;
+        this.scrollDispatcher = scrollDispatcher;
+        this.zone = zone;
+        this.euLanguages = [];
+        this.nonEuLanguages = [];
+        this.isHidden = false;
+        this.isPushRight = false;
+        this.isPushLeft = 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';
+        this.destroy$ = new Subject();
+        afterNextRender(() => {
+            this.subscribeToCDKScrollEvent();
+        });
+    }
+    get cssClasses() {
+        return [
+            super.getCssClasses('ecl-site-header__language-container'),
+            this.isPushRight ? 'ecl-site-header__language-container--push-right' : '',
+            this.isPushLeft ? 'ecl-site-header__language-container--push-left' : '',
+            this.isFull ? 'ecl-site-header__language-container--full' : '',
+        ]
+            .join(' ')
+            .trim();
+    }
+    get isModal() {
+        return !this.isHidden || undefined;
+    }
+    get isDropdownHidden() {
+        return this.isHidden || undefined;
+    }
+    onWindowResize() {
+        setTimeout(() => this.setLanguageContentMaxHeight());
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    onCloseClick() {
+        this.languageClosed.next(new EclSiteHeaderLanguageCloseEvent());
+    }
+    onLanguageClick(language, evt) {
+        this.languageCode = language.code;
+        this.languageSelected.next(new EclSiteHeaderLanguageSelectedEvent(language));
+        evt.preventDefault();
+    }
+    setLanguageContentMaxHeight() {
+        const viewportHeight = window.innerHeight;
+        if (this.languageContent) {
+            const listTop = this.languageContent.nativeElement.getBoundingClientRect().top;
+            const availableSpace = viewportHeight - listTop;
+            if (availableSpace > 0) {
+                this.languageContentMaxHeight = availableSpace;
+            }
+        }
+    }
+    subscribeToCDKScrollEvent() {
+        this.scrollDispatcher.scrolled().pipe(takeUntil$1(this.destroy$)).subscribe(() => {
+            this.zone.run(() => {
+                this.setLanguageContentMaxHeight();
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderLanguagePopoverComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.EclThemeService }, { token: i2.ScrollDispatcher }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.1", type: EclSiteHeaderLanguagePopoverComponent, isStandalone: false, selector: "ecl-site-header-language-popover", inputs: { languageCode: "languageCode", euLanguages: "euLanguages", nonEuLanguages: "nonEuLanguages", euColumnsCount: "euColumnsCount", nonEuColumnsCount: "nonEuColumnsCount", isHidden: "isHidden", isPushRight: "isPushRight", isPushLeft: "isPushLeft", isStack: "isStack", isFull: "isFull", rightPosition: "rightPosition", leftPosition: "leftPosition", languageArrowPosition: "languageArrowPosition" }, outputs: { languageClosed: "languageClosed", languageSelected: "languageSelected" }, host: { listeners: { "window:resize": "onWindowResize($event)" }, properties: { "style.right.px": "this.rightPosition", "style.left.px": "this.leftPosition", "style.--ecl-language-arrow-position": "this.languageArrowPosition", "attr.role": "this.role", "attr.aria-labelledby": "this.labelledBy", "style.display": "this.display", "class": "this.cssClasses", "attr.aria-modal": "this.isModal", "attr.hidden": "this.isDropdownHidden" } }, viewQueries: [{ propertyName: "languageContent", first: true, predicate: ["languageContent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-site-header__language-header\">\n    <div class=\"ecl-site-header__language-title\">\n        {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n    </div>\n    <button eclButton variant=\"tertiary\" isIconOnly class=\"ecl-site-header__language-close\" (click)=\"onCloseClick()\">\n        <span class=\"ecl-button__container\">\n            <span class=\"ecl-button__label\">\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            @if (eclThemeService.isECTheme()) {\n            <ecl-icon icon=\"close\" size=\"m\"> </ecl-icon>\n            } @else {\n            <ecl-icon icon=\"close\" size=\"s\"> </ecl-icon>\n            }\n        </span>\n    </button>\n</div>\n\n<div #languageContent class=\"ecl-site-header__language-content\" [style.max-height.px]=\"languageContentMaxHeight\"\n    [class.ecl-site-header__language-content--stack]=\"isStack\">\n    @if (euLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\">\n                @for (item of euLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            variant=\"standalone\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n    @if (nonEuLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\">\n                @for (item of nonEuLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            variant=\"standalone\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "directive", type: i3.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "component", type: i4.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderLanguagePopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-site-header-language-popover', standalone: false, template: "<div class=\"ecl-site-header__language-header\">\n    <div class=\"ecl-site-header__language-title\">\n        {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n    </div>\n    <button eclButton variant=\"tertiary\" isIconOnly class=\"ecl-site-header__language-close\" (click)=\"onCloseClick()\">\n        <span class=\"ecl-button__container\">\n            <span class=\"ecl-button__label\">\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            @if (eclThemeService.isECTheme()) {\n            <ecl-icon icon=\"close\" size=\"m\"> </ecl-icon>\n            } @else {\n            <ecl-icon icon=\"close\" size=\"s\"> </ecl-icon>\n            }\n        </span>\n    </button>\n</div>\n\n<div #languageContent class=\"ecl-site-header__language-content\" [style.max-height.px]=\"languageContentMaxHeight\"\n    [class.ecl-site-header__language-content--stack]=\"isStack\">\n    @if (euLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\">\n                @for (item of euLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            variant=\"standalone\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n    @if (nonEuLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\">\n                @for (item of nonEuLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            variant=\"standalone\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.EclThemeService }, { type: i2.ScrollDispatcher }, { type: i0.NgZone }], propDecorators: { languageContent: [{
+                type: ViewChild,
+                args: ['languageContent']
+            }], languageCode: [{
+                type: Input
+            }], euLanguages: [{
+                type: Input
+            }], nonEuLanguages: [{
+                type: Input
+            }], euColumnsCount: [{
+                type: Input
+            }], nonEuColumnsCount: [{
+                type: Input
+            }], isHidden: [{
+                type: Input
+            }], isPushRight: [{
+                type: Input
+            }], isPushLeft: [{
+                type: Input
+            }], isStack: [{
+                type: Input
+            }], isFull: [{
+                type: Input
+            }], rightPosition: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.right.px']
+            }], leftPosition: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.left.px']
+            }], 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']
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], isModal: [{
+                type: HostBinding,
+                args: ['attr.aria-modal']
+            }], isDropdownHidden: [{
+                type: HostBinding,
+                args: ['attr.hidden']
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+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, eclAreaDataService, eclRtlService, eclThemeService) {
+        super();
+        this.eclLanguageService = eclLanguageService;
+        this.eclAreaDataService = eclAreaDataService;
+        this.eclRtlService = eclRtlService;
+        this.eclThemeService = eclThemeService;
+        this.languageCode = 'en';
+        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.destroy$ = new Subject();
+        this._languageCodes = [];
+        this.isRtl = false;
+    }
+    ngOnInit() {
+        this.updateLanguages();
+        this.handleRtlChangeState();
+    }
+    ngOnChanges(changes) {
+        if (changes['languageCodes']) {
+            this.updateLanguages();
+        }
+    }
+    ngAfterViewInit() {
+        this.eclAreaDataService.dataSubject$.pipe(takeUntil$1(this.destroy$)).subscribe(parentHeaderRect => {
+            this.calculatePopoverPosition(parentHeaderRect.right, parentHeaderRect.left);
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    getLanguageLabel() {
+        return `${this.eclLanguageService.getLanguageByCode(this.languageCode)?.label} - ${this.languageCode.toUpperCase()}`;
+    }
+    onLanguageClick(evt) {
+        this.isLanguagesDropdownVisible = !this.isLanguagesDropdownVisible;
+        if (!this.isLanguagesDropdownVisible) {
+            setTimeout(() => {
+                this.isFull = false;
+                this.isStack = false;
+                this.isPushRight = false;
+                this.rightPosition = undefined;
+                this.leftPosition = undefined;
+                this.languageArrowPosition = undefined;
+            });
+        }
+        setTimeout(() => this.languagePopover.setLanguageContentMaxHeight());
+        this.languageClick.next(new EclSiteHeaderLanguageClickEvent());
+        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;
+    }
+    onEscapeKeydownHandler() {
+        this.isLanguagesDropdownVisible = false;
+    }
+    hasLanguageCodes() {
+        return this.languageCodes && this.languageCodes.length > 0;
+    }
+    handleRtlChangeState() {
+        this.eclRtlService.currentRtlState$.pipe(takeUntil$1(this.destroy$)).subscribe((rtlState) => {
+            this.isRtl = rtlState;
+        });
+    }
+    updateLanguages() {
+        const languages = this.eclLanguageService.getLanguagesByCodes(this.languageCodes);
+        this.euLanguages = languages.filter((item) => this.eclLanguageService.isEuLanguage(item.code));
+        this.nonEuLanguages = languages.filter((item) => !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(parentHeaderRight, parentHeaderLeft) {
+        setTimeout(() => {
+            if (this.hasLanguageCodes()) {
+                const arrowSize = '0.5rem';
+                const linkRect = this.languageLinkElement.nativeElement.getBoundingClientRect();
+                const popoverRect = this.languagePopover.el.nativeElement.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.isPushLeft = false;
+                this.rightPosition = undefined;
+                this.leftPosition = undefined;
+                this.languageArrowPosition = undefined;
+                if (popoverRect.width > this.parentHeaderWidth) {
+                    this.isStack = true;
+                    if (this.nonEuLanguages.length) {
+                        this.nonEuColumnsCount = Math.max(this.euColumnsCount, this.nonEuColumnsCount);
+                    }
+                }
+                if (this.isRtl && popoverRect.left < 0) {
+                    const arrowPosition = linkRect.right - parentHeaderLeft - linkRect.width / 2;
+                    this.isPushLeft = true;
+                    this.leftPosition = -linkRect.left + parentHeaderLeft;
+                    this.languageArrowPosition = `${arrowPosition}px`;
+                }
+                else if (!this.isRtl && popoverRect.right > screenWidth) {
+                    const arrowPosition = parentHeaderRight - linkRect.right + linkRect.width / 2;
+                    this.isPushRight = true;
+                    this.rightPosition = -parentHeaderRight + linkRect.right;
+                    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})`;
+                }
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderLanguageComponent, deps: [{ token: i1$1.EclLanguageService }, { token: i1$1.EclAreaDataService }, { token: i1$1.EclRtlService }, { token: i1$1.EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.1", type: EclSiteHeaderLanguageComponent, isStandalone: false, selector: "ecl-site-header-language", inputs: { languageCode: "languageCode", languageCodes: "languageCodes" }, outputs: { languageClick: "languageClick", languageSelected: "languageSelected" }, host: { listeners: { "eclClickOutside": "onClickOutside()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "languagePopover", first: true, predicate: EclSiteHeaderLanguagePopoverComponent, descendants: true }, { propertyName: "languageLinkElement", first: true, predicate: ["languageLink"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i1$1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    role=\"button\"\n    [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE-EXT' | translate: { currentLang: getLanguageLabel() }\"\n    [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n    (click)=\"onLanguageClick($event)\"\n    (keydown.space)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"global\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes()) {\n<ecl-site-header-language-popover\n    #languagePopover\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    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: ["languageCode", "euLanguages", "nonEuLanguages", "euColumnsCount", "nonEuColumnsCount", "isHidden", "isPushRight", "isPushLeft", "isStack", "isFull", "rightPosition", "leftPosition", "languageArrowPosition"], outputs: ["languageClosed", "languageSelected"] }, { kind: "pipe", type: i4$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderLanguageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-site-header-language', standalone: false, hostDirectives: [
+                        {
+                            directive: ECLClickOutsideDirective,
+                            outputs: ['eclClickOutside'],
+                        },
+                    ], template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    role=\"button\"\n    [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE-EXT' | translate: { currentLang: getLanguageLabel() }\"\n    [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n    (click)=\"onLanguageClick($event)\"\n    (keydown.space)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"global\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes()) {\n<ecl-site-header-language-popover\n    #languagePopover\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    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.EclLanguageService }, { type: i1$1.EclAreaDataService }, { type: i1$1.EclRtlService }, { type: i1$1.EclThemeService }], propDecorators: { languageCode: [{
+                type: Input
+            }], languageCodes: [{
+                type: Input
+            }], languagePopover: [{
+                type: ViewChild,
+                args: [EclSiteHeaderLanguagePopoverComponent]
+            }], languageLinkElement: [{
+                type: ViewChild,
+                args: ['languageLink', { read: ElementRef }]
+            }], languageClick: [{
+                type: Output
+            }], languageSelected: [{
+                type: Output
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['eclClickOutside']
+            }], onEscapeKeydownHandler: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+class EclSiteHeaderLoginComponent extends ECLBaseDirective {
+    constructor(eclAreaDataService, eclRtlService) {
+        super();
+        this.eclAreaDataService = eclAreaDataService;
+        this.eclRtlService = eclRtlService;
+        this.isLoggedIn = false;
+        this.class = 'ecl-site-header__login-container';
+        this.login = new EventEmitter();
+        this.loginBoxToggle = new EventEmitter();
+        this.isLoginBoxActive = false;
+        this.TABLET_BREAKPOINT = 996;
+        this.destroy$ = new Subject();
+        afterNextRender(() => {
+            this.handleRtlChangeState();
+            this.handleSiteHeaderAreaChangeEvent();
+        });
+    }
+    ngOnChanges(changes) {
+        const isLoggedInChange = changes.isLoggedIn;
+        if (isLoggedInChange && isLoggedInChange.previousValue === true) {
+            this.isLoginBoxActive = false;
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    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();
+    }
+    handleRtlChangeState() {
+        this.eclRtlService.currentRtlState$.pipe(debounceTime(50), takeUntil$1(this.destroy$)).subscribe(() => {
+            this.calculateLoginArrowPosition(this.parentHeaderRight);
+        });
+    }
+    handleSiteHeaderAreaChangeEvent() {
+        this.eclAreaDataService.dataSubject$.pipe(takeUntil$1(this.destroy$)).subscribe(parentHeaderRect => {
+            this.parentHeaderRight = parentHeaderRect.right;
+            this.calculateLoginArrowPosition(this.parentHeaderRight);
+        });
+    }
+    calculateLoginArrowPosition(parentHeaderRight) {
+        const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+        const arrowSize = '0.5rem';
+        const loginLink = this.loginLinkElement?.nativeElement.getBoundingClientRect();
+        const arrowPosition = parentHeaderRight - loginLink?.right + loginLink?.width / 2;
+        if (parentHeaderRight === undefined) {
+            return;
+        }
+        if (this.isLoginBoxActive && vw < this.TABLET_BREAKPOINT) {
+            this.loginArrowPosition = `calc(${arrowPosition}px + ${arrowSize})`;
+        }
+        else if (this.isLoginBoxActive) {
+            this.loginArrowPosition = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderLoginComponent, deps: [{ token: i1$1.EclAreaDataService }, { token: i1$1.EclRtlService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.1", type: EclSiteHeaderLoginComponent, isStandalone: false, selector: "ecl-site-header-login", inputs: { isLoggedIn: ["isLoggedIn", "isLoggedIn", booleanAttribute] }, outputs: { login: "login", loginBoxToggle: "loginBoxToggle" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "loginLinkElement", first: true, predicate: ["loginLink"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (isLoggedIn) {\n    <a\n        #loginLink\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-site-header__login-toggle\"\n        aria-controls=\"login-box-id\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" class=\"ecl-site-header__login-arrow\"></ecl-icon>\n    </a>\n    <div\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderLoginComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-site-header-login', standalone: false, template: "@if (isLoggedIn) {\n    <a\n        #loginLink\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-site-header__login-toggle\"\n        aria-controls=\"login-box-id\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" class=\"ecl-site-header__login-arrow\"></ecl-icon>\n    </a>\n    <div\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.EclAreaDataService }, { type: i1$1.EclRtlService }], propDecorators: { isLoggedIn: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }], loginLinkElement: [{
+                type: ViewChild,
+                args: ['loginLink', { read: ElementRef }]
+            }], login: [{
+                type: Output
+            }], loginBoxToggle: [{
+                type: Output
+            }] } });
+
+class EclSiteHeaderLoginDescriptionDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.className = 'ecl-site-header__login-description';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderLoginDescriptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclSiteHeaderLoginDescriptionDirective, isStandalone: false, selector: "[eclSiteHeaderLoginDescription]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderLoginDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclSiteHeaderLoginDescription]',
+                    standalone: false,
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+class EclSiteHeaderLoginSeparatorDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.className = 'ecl-site-header__login-separator';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderLoginSeparatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclSiteHeaderLoginSeparatorDirective, isStandalone: false, selector: "[eclSiteHeaderLoginSeparator]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderLoginSeparatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclSiteHeaderLoginSeparator]',
+                    standalone: false,
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+const ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => EclSiteHeaderSearchComponent),
+    multi: true,
+};
+const noop = () => {
+    /** empty*/
+};
+class EclSiteHeaderSearchComponent extends ECLBaseDirective {
+    constructor(eclAreaDataService, eclRtlService) {
+        super();
+        this.eclAreaDataService = eclAreaDataService;
+        this.eclRtlService = eclRtlService;
+        this.class = 'ecl-site-header__search-container';
+        this.role = 'search';
+        this.search = new EventEmitter();
+        this.searchToggle = new EventEmitter();
+        this.isSearchBoxActive = false;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.onChange = noop;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.onTouched = noop;
+        this.destroy$ = new Subject();
+        afterNextRender(() => {
+            this.handleRtlChangeState();
+            this.handleSiteHeaderAreaChangeEvent();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    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();
+    }
+    getSearchBoxCssClasses() {
+        return ['ecl-site-header__search', this.isSearchBoxActive ? 'ecl-site-header__search--active' : ''].join(' ');
+    }
+    onModelChange(newValue) {
+        this.searchInputText = newValue;
+        this.onChange(newValue);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    writeValue(value) {
+        this.searchInputText = value;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    handleRtlChangeState() {
+        this.eclRtlService.currentRtlState$.pipe(debounceTime(50), takeUntil$1(this.destroy$)).subscribe(() => {
+            this.calculateSearchFormArrowPosition(this.parentHeaderRight);
+        });
+    }
+    handleSiteHeaderAreaChangeEvent() {
+        this.eclAreaDataService.dataSubject$.pipe(takeUntil$1(this.destroy$)).subscribe(parentHeaderRect => {
+            this.parentHeaderRight = parentHeaderRect.right;
+            this.calculateSearchFormArrowPosition(this.parentHeaderRight);
+        });
+    }
+    calculateSearchFormArrowPosition(parentHeaderRight) {
+        const searchLink = this.searchLinkElement.nativeElement.getBoundingClientRect();
+        const arrowPosition = parentHeaderRight - searchLink.right + searchLink.width / 2;
+        const arrowSize = '0.5rem';
+        if (this.isSearchBoxActive || parentHeaderRight !== undefined) {
+            this.searchArrowPosition = `calc(${arrowPosition}px + ${arrowSize})`;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderSearchComponent, deps: [{ token: i1$1.EclAreaDataService }, { token: i1$1.EclRtlService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclSiteHeaderSearchComponent, isStandalone: false, selector: "ecl-site-header-search", inputs: { searchInputText: "searchInputText", searchInputPlaceholder: "searchInputPlaceholder", searchButtonLabel: "searchButtonLabel" }, outputs: { search: "search", searchToggle: "searchToggle" }, host: { properties: { "class": "this.class", "attr.role": "this.role" } }, providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], viewQueries: [{ propertyName: "searchLinkElement", first: true, predicate: ["searchLink"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<a\n    #searchLink\n    href=\"#\"\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__search-toggle\"\n    data-ecl-search-toggle=\"true\"\n    aria-controls=\"search-form-id\"\n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form\n    [style]=\"{'--ecl-search-arrow-position': searchArrowPosition}\"\n    (search)=\"onSearch($event)\"\n    [placeholder]=\"searchInputPlaceholder\"\n    (ngModelChange)=\"onModelChange($event)\"\n    [(ngModel)]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: i4$2.EclSearchFormComponent, selector: "ecl-search-form", inputs: ["searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon", "buttonExtraClassses", "inputExtraClassses"], outputs: ["search"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-site-header-search', standalone: false, providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], template: "<a\n    #searchLink\n    href=\"#\"\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__search-toggle\"\n    data-ecl-search-toggle=\"true\"\n    aria-controls=\"search-form-id\"\n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form\n    [style]=\"{'--ecl-search-arrow-position': searchArrowPosition}\"\n    (search)=\"onSearch($event)\"\n    [placeholder]=\"searchInputPlaceholder\"\n    (ngModelChange)=\"onModelChange($event)\"\n    [(ngModel)]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.EclAreaDataService }, { type: i1$1.EclRtlService }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], searchInputText: [{
+                type: Input
+            }], searchInputPlaceholder: [{
+                type: Input
+            }], searchButtonLabel: [{
+                type: Input
+            }], searchLinkElement: [{
+                type: ViewChild,
+                args: ['searchLink', { read: ElementRef }]
+            }], search: [{
+                type: Output
+            }], searchToggle: [{
+                type: Output
+            }] } });
+
+class EclSiteHeaderPictureDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.className = 'ecl-site-header__picture ecl-picture';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclSiteHeaderPictureDirective, isStandalone: false, selector: "[eclSiteHeaderPicture]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderPictureDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclSiteHeaderPicture]',
+                    standalone: false,
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+class EclSiteHeaderImageDirective extends ECLBaseDirective {
+    get cssClasses() {
+        return [
+            super.getCssClasses('ecl-site-header__logo-image'),
+            `ecl-site-header__logo-image--${this.logoSize}`,
+        ].join(' ').trim();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclSiteHeaderImageDirective, isStandalone: false, selector: "[eclSiteHeaderImage]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderImageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclSiteHeaderImage]',
+                    standalone: false,
+                }]
+        }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+class EclSiteHeaderLinkDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.className = 'ecl-link ecl-link--standalone ecl-site-header__logo-link';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclSiteHeaderLinkDirective, isStandalone: false, selector: "[eclSiteHeaderLink]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclSiteHeaderLink]',
+                    standalone: false,
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EclSiteHeaderNotificationComponent extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.display = '';
+    }
+    get cssClasses() {
+        return [super.getCssClasses('ecl-site-header__notification')].join(' ').trim();
+    }
+    onHide() {
+        this.display = 'none';
+    }
+    onShow() {
+        this.display = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderNotificationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclSiteHeaderNotificationComponent, isStandalone: false, selector: "ecl-site-header-notification", host: { properties: { "class": "this.cssClasses", "style.display": "this.display" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-container\">\n    <ng-content></ng-content>\n</div>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderNotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-site-header-notification', standalone: false, template: "<div class=\"ecl-container\">\n    <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }] } });
+
+class EclSiteHeaderComponent extends ECLBaseDirective {
+    get cssClasses() {
+        return [
+            super.getCssClasses('ecl-site-header'),
+            `ecl-site-header-with-logo-${this.logoSize}`,
+            this.eclMenuComponent ? 'ecl-site-header--has-menu' : '',
+            this.eclMegaMenuComponent ? 'ecl-site-header--has-mega-menu' : '',
+            this.isEclMegaMenuOpen ? 'ecl-site-header--open-menu' : '',
+            this.isEclMegaMenuStart ? 'ecl-site-header--open-menu-start' : '',
+            this.isRtl ? 'ecl-site-header--rtl' : '',
+        ].join(' ').trim();
+    }
+    constructor(expandableItemSetDataService, eclAreaDataService, eclLanguageService, cdkBreakpointObserver, translateService, el, eclThemeService, eclMegaMenuDataService, eclRtlService) {
+        super();
+        this.expandableItemSetDataService = expandableItemSetDataService;
+        this.eclAreaDataService = eclAreaDataService;
+        this.eclLanguageService = eclLanguageService;
+        this.cdkBreakpointObserver = cdkBreakpointObserver;
+        this.translateService = translateService;
+        this.el = el;
+        this.eclThemeService = eclThemeService;
+        this.eclMegaMenuDataService = eclMegaMenuDataService;
+        this.eclRtlService = eclRtlService;
+        this.languageCode = 'en';
+        this.logoSize = 'm';
+        this.logoClick = new EventEmitter();
+        this.languageClick = new EventEmitter();
+        this.isEclMegaMenuOpen = false;
+        this.isEclMegaMenuStart = false;
+        this.isMobileBreakpoint = false;
+        this.isRtl = false;
+        this.TIMEOUT_INTERVAL = 100;
+        this.destroy$ = new Subject();
+        afterNextRender(() => {
+            this.observeBreakpointChanges();
+            this.subscribeToMegaMenuEvents();
+            new ResizeObserver(() => {
+                setTimeout(() => {
+                    this.sendResizeEventToChildComponents();
+                }, this.TIMEOUT_INTERVAL);
+            }).observe(this.topContainerElement.nativeElement);
+        });
+    }
+    ngAfterContentInit() {
+        this.handleRtlChangeState();
+        if (this.eclHeaderImage) {
+            this.eclHeaderImage.logoSize = this.logoSize;
+        }
+        if (this.eclLoginComponent && this.eclSearchComponent) {
+            this.eclLoginComponent.loginBoxToggle.pipe(takeUntil$1(this.destroy$)).subscribe((evt) => {
+                this.eclSearchComponent.isSearchBoxActive = false;
+                this.sendResizeEventToChildComponents();
+            });
+            this.eclSearchComponent.searchToggle.pipe(takeUntil$1(this.destroy$)).subscribe((evt) => {
+                this.eclLoginComponent.isLoginBoxActive = false;
+                this.sendResizeEventToChildComponents();
+            });
+        }
+        if (this.eclLanguageComponent) {
+            this.eclLanguageComponent.languageClick.pipe(takeUntil$1(this.destroy$)).subscribe((evt) => {
+                this.languageClick.next(new EclSiteHeaderLanguageClickEvent());
+                this.sendResizeEventToChildComponents();
+            });
+            this.eclLanguageComponent.languageSelected.pipe(takeUntil$1(this.destroy$)).subscribe((evt) => {
+                this.languageCode = evt.language?.code;
+            });
+        }
+        if (this.eclLanguageComponent) {
+            this.languageCode = this.eclLanguageComponent?.languageCode;
+        }
+        if (this.eclMenuComponent) {
+            this.eclMenuComponent.openHamburgerMenu.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
+                this.positionMenu();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    onECLogoClick(evt) {
+        const event = new EclSiteHeaderLogoClickEvent();
+        this.logoClick.next(event);
+        if (event.defaultPrevented) {
+            evt.preventDefault();
+        }
+    }
+    hasCustomLink() {
+        return !!this.eclHeaderLink;
+    }
+    getEULanguageCode() {
+        return this.eclLanguageService.getEULanguageOrFallback(this.languageCode).code;
+    }
+    handleRtlChangeState() {
+        this.eclRtlService.currentRtlState$.pipe(takeUntil$1(this.destroy$)).subscribe((rtlState) => {
+            this.isRtl = rtlState;
+        });
+    }
+    sendResizeEventToChildComponents() {
+        if (this.topContainerElement.nativeElement.getBoundingClientRect().width !== undefined) {
+            const topContainerRect = this.topContainerElement.nativeElement.getBoundingClientRect();
+            const siteHeaderAreaChangeEvent = new EclAreaChangeEvent(topContainerRect.width, topContainerRect.left, topContainerRect.right);
+            this.eclAreaDataService.publishEvent(siteHeaderAreaChangeEvent);
+        }
+    }
+    subscribeToMegaMenuEvents() {
+        this.expandableItemSetDataService.isMobileObjectOpen$.pipe(takeUntil$1(this.destroy$)).subscribe(isExpanded => {
+            if (this.isMobileBreakpoint) {
+                this.isEclMegaMenuStart = isExpanded;
+                this.isEclMegaMenuOpen = isExpanded;
+            }
+            if (isExpanded) {
+                const bottomSpaceY = this.el.nativeElement.getBoundingClientRect().bottom;
+                this.eclMegaMenuComponent.positionMenuOverlay(bottomSpaceY);
+            }
+        });
+        this.expandableItemSetDataService.isObjectExpanded$.pipe(takeUntil$1(this.destroy$)).subscribe(isExpanded => {
+            if (this.isMobileBreakpoint) {
+                if (isExpanded) {
+                    this.onMegaMenuItemExpandMobile();
+                }
+                else {
+                    this.onMegaMenuItemCollapseMobile();
+                }
+            }
+            else {
+                this.isEclMegaMenuOpen = isExpanded;
+                if (isExpanded) {
+                    const bottomSpaceY = this.el.nativeElement.getBoundingClientRect().bottom;
+                    this.eclMegaMenuComponent.positionMenuOverlay(bottomSpaceY);
+                }
+            }
+        });
+    }
+    onMegaMenuItemExpandMobile() {
+        this.isEclMegaMenuStart = false;
+        if (this.eclNotificationComponent) {
+            this.eclNotificationComponent.onHide();
+        }
+        if (this.bannerHeader) {
+            this.bannerHeader.nativeElement.style.display = 'none';
+        }
+        const bottomSpaceY = this.siteHeaderHeader.nativeElement.getBoundingClientRect().bottom;
+        this.eclMegaMenuComponent.positionMenuOverlay(bottomSpaceY);
+    }
+    onMegaMenuItemCollapseMobile() {
+        this.isEclMegaMenuStart = true;
+        if (this.eclNotificationComponent) {
+            this.eclNotificationComponent.onShow();
+        }
+        if (this.bannerHeader) {
+            this.bannerHeader.nativeElement.style.display = '';
+        }
+        const bottomSpaceY = this.el.nativeElement.getBoundingClientRect().bottom;
+        this.eclMegaMenuComponent.positionMenuOverlay(bottomSpaceY);
+    }
+    observeBreakpointChanges() {
+        this.cdkBreakpointObserver
+            .observe(['(max-width: 996px)'])
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe((result) => {
+            this.isMobileBreakpoint = result.matches;
+        });
+    }
+    positionMenu() {
+        const bottomSpaceY = this.siteHeaderHeader.nativeElement.getBoundingClientRect().bottom;
+        this.eclMenuComponent.positionMenuOverlay(bottomSpaceY);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderComponent, deps: [{ token: i1$1.EclExpandableItemSetDataService }, { token: i1$1.EclAreaDataService }, { token: i1$1.EclLanguageService }, { token: i1.BreakpointObserver }, { token: i3$1.TranslateService }, { token: i0.ElementRef }, { token: i1$1.EclThemeService }, { token: i4$3.EclMegaMenuDataService }, { token: i1$1.EclRtlService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.1", type: EclSiteHeaderComponent, isStandalone: false, selector: "ecl-site-header", inputs: { siteName: "siteName", languageCode: "languageCode", logoUrl: "logoUrl", logoSize: "logoSize" }, outputs: { logoClick: "logoClick", languageClick: "languageClick" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclLoginComponent", first: true, predicate: EclSiteHeaderLoginComponent, descendants: true }, { propertyName: "eclMenuComponent", first: true, predicate: EclMenuComponent, descendants: true }, { propertyName: "eclMegaMenuComponent", first: true, predicate: EclMegaMenuComponent, descendants: true }, { propertyName: "eclSearchComponent", first: true, predicate: EclSiteHeaderSearchComponent, descendants: true }, { propertyName: "eclLanguageComponent", first: true, predicate: EclSiteHeaderLanguageComponent, descendants: true }, { propertyName: "eclNotificationComponent", first: true, predicate: EclSiteHeaderNotificationComponent, descendants: true }, { propertyName: "eclHeaderLink", first: true, predicate: i0.forwardRef(() => EclSiteHeaderLinkDirective), descendants: true }, { propertyName: "eclHeaderImage", first: true, predicate: i0.forwardRef(() => EclSiteHeaderImageDirective), descendants: true }], viewQueries: [{ propertyName: "topContainerElement", first: true, predicate: ["topContainer"], descendants: true }, { propertyName: "siteHeaderHeader", first: true, predicate: ["siteHeaderHeader"], descendants: true }, { propertyName: "bannerHeader", first: true, predicate: ["bannerHeader"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-site-header__background\">\n    <div class=\"ecl-site-header__header\" #siteHeaderHeader>\n        <div class=\"ecl-site-header__container ecl-container\">\n            <div #topContainer class=\"ecl-site-header__top\">\n                @if(hasCustomLink()) {\n                    <ng-content select=\"[eclSiteHeaderLink]\"></ng-content>\n                } @else {\n                <a eclLink variant=\"standalone\" class=\"ecl-site-header__logo-link\"\n                    href=\"https://ec.europa.eu/info/index_{{ getEULanguageCode() }}\" (click)=\"onECLogoClick($event)\"\n                    [attr.aria-label]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n                    <ng-content select=\"[eclSiteHeaderEnvironment]\"></ng-content>\n\n                    @if (eclThemeService.isEC$ | async) {\n                        <picture eclSiteHeaderPicture\n                                 [attr.title]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n                            <source\n                                srcset=\"./assets/images/ecl/ec/logo/positive/logo-ec--{{  getEULanguageCode() }}.svg\"\n                                media=\"(min-width: 996px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n                                 src=\"./assets/images/ecl/ec/logo/logo-ec--mute.svg\"\n                                 alt=\"European Commission\" />\n                        </picture>\n                    }\n                    @if (eclThemeService.isEU$ | async) {\n                        <picture eclSiteHeaderPicture\n                                 [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n                            <source\n                                srcset=\"./assets/images/ecl/eu/logo/standard-version/positive/logo-eu--{{ getEULanguageCode() }}.svg\"\n                                media=\"(min-width: 996px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n                                 src=\"./assets/images/ecl/eu/logo/condensed-version/positive/logo-eu--{{ getEULanguageCode() }}.svg\"\n                                 alt=\"European Union\" />\n                        </picture>\n                    }\n                </a>\n                }\n                <ng-content select=\"ecl-site-header-action\"></ng-content>\n            </div>\n        </div>\n    </div>\n    <ng-content select=\"ecl-site-header-notification\"></ng-content>\n</div>\n\n\n<ng-content select=\"ecl-site-header-banner-top\"></ng-content>\n@if (siteName) {\n    <div class=\"ecl-site-header__banner\" #bannerHeader>\n        <div class=\"ecl-container\">\n            <div class=\"ecl-site-header__site-name\">{{ siteName }}</div>\n            <ng-content select=\"[eclSiteHeaderCta]\"></ng-content>\n        </div>\n    </div>\n}\n\n<ng-content select=\"ecl-menu\"></ng-content>\n<ng-content select=\"[eclMegaMenu]\"></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i3.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclSiteHeaderPictureDirective, selector: "[eclSiteHeaderPicture]" }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-site-header', standalone: false, template: "<div class=\"ecl-site-header__background\">\n    <div class=\"ecl-site-header__header\" #siteHeaderHeader>\n        <div class=\"ecl-site-header__container ecl-container\">\n            <div #topContainer class=\"ecl-site-header__top\">\n                @if(hasCustomLink()) {\n                    <ng-content select=\"[eclSiteHeaderLink]\"></ng-content>\n                } @else {\n                <a eclLink variant=\"standalone\" class=\"ecl-site-header__logo-link\"\n                    href=\"https://ec.europa.eu/info/index_{{ getEULanguageCode() }}\" (click)=\"onECLogoClick($event)\"\n                    [attr.aria-label]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n                    <ng-content select=\"[eclSiteHeaderEnvironment]\"></ng-content>\n\n                    @if (eclThemeService.isEC$ | async) {\n                        <picture eclSiteHeaderPicture\n                                 [attr.title]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n                            <source\n                                srcset=\"./assets/images/ecl/ec/logo/positive/logo-ec--{{  getEULanguageCode() }}.svg\"\n                                media=\"(min-width: 996px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n                                 src=\"./assets/images/ecl/ec/logo/logo-ec--mute.svg\"\n                                 alt=\"European Commission\" />\n                        </picture>\n                    }\n                    @if (eclThemeService.isEU$ | async) {\n                        <picture eclSiteHeaderPicture\n                                 [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n                            <source\n                                srcset=\"./assets/images/ecl/eu/logo/standard-version/positive/logo-eu--{{ getEULanguageCode() }}.svg\"\n                                media=\"(min-width: 996px)\" />\n                            <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n                                 src=\"./assets/images/ecl/eu/logo/condensed-version/positive/logo-eu--{{ getEULanguageCode() }}.svg\"\n                                 alt=\"European Union\" />\n                        </picture>\n                    }\n                </a>\n                }\n                <ng-content select=\"ecl-site-header-action\"></ng-content>\n            </div>\n        </div>\n    </div>\n    <ng-content select=\"ecl-site-header-notification\"></ng-content>\n</div>\n\n\n<ng-content select=\"ecl-site-header-banner-top\"></ng-content>\n@if (siteName) {\n    <div class=\"ecl-site-header__banner\" #bannerHeader>\n        <div class=\"ecl-container\">\n            <div class=\"ecl-site-header__site-name\">{{ siteName }}</div>\n            <ng-content select=\"[eclSiteHeaderCta]\"></ng-content>\n        </div>\n    </div>\n}\n\n<ng-content select=\"ecl-menu\"></ng-content>\n<ng-content select=\"[eclMegaMenu]\"></ng-content>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.EclExpandableItemSetDataService }, { type: i1$1.EclAreaDataService }, { type: i1$1.EclLanguageService }, { type: i1.BreakpointObserver }, { type: i3$1.TranslateService }, { type: i0.ElementRef }, { type: i1$1.EclThemeService }, { type: i4$3.EclMegaMenuDataService }, { type: i1$1.EclRtlService }], propDecorators: { siteName: [{
+                type: Input
+            }], languageCode: [{
+                type: Input
+            }], logoUrl: [{
+                type: Input
+            }], logoSize: [{
+                type: Input
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], logoClick: [{
+                type: Output
+            }], languageClick: [{
+                type: Output
+            }], topContainerElement: [{
+                type: ViewChild,
+                args: ['topContainer']
+            }], siteHeaderHeader: [{
+                type: ViewChild,
+                args: ['siteHeaderHeader']
+            }], bannerHeader: [{
+                type: ViewChild,
+                args: ['bannerHeader']
+            }], eclLoginComponent: [{
+                type: ContentChild,
+                args: [EclSiteHeaderLoginComponent]
+            }], eclMenuComponent: [{
+                type: ContentChild,
+                args: [EclMenuComponent]
+            }], eclMegaMenuComponent: [{
+                type: ContentChild,
+                args: [EclMegaMenuComponent]
+            }], eclSearchComponent: [{
+                type: ContentChild,
+                args: [EclSiteHeaderSearchComponent]
+            }], eclLanguageComponent: [{
+                type: ContentChild,
+                args: [EclSiteHeaderLanguageComponent]
+            }], eclNotificationComponent: [{
+                type: ContentChild,
+                args: [EclSiteHeaderNotificationComponent]
+            }], eclHeaderLink: [{
+                type: ContentChild,
+                args: [forwardRef(() => EclSiteHeaderLinkDirective), { descendants: true }]
+            }], eclHeaderImage: [{
+                type: ContentChild,
+                args: [forwardRef(() => EclSiteHeaderImageDirective), { descendants: true }]
+            }] } });
+
+const COMPONENTS = [
+    EclSiteHeaderComponent,
+    EclSiteHeaderActionComponent,
+    EclSiteHeaderLoginComponent,
+    EclSiteHeaderLoginDescriptionDirective,
+    EclSiteHeaderLoginSeparatorDirective,
+    EclSiteHeaderLanguageComponent,
+    EclSiteHeaderLanguagePopoverComponent,
+    EclSiteHeaderSearchComponent,
+    EclSiteHeaderBannerTopComponent,
+    EclSiteHeaderEnvironmentComponent,
+    EclSiteHeaderNotificationComponent,
+    EclSiteHeaderCtaDirective,
+    EclSiteHeaderImageDirective,
+    EclSiteHeaderPictureDirective,
+    EclSiteHeaderLinkDirective,
+];
+class EclSiteHeaderComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderComponentModule, declarations: [EclSiteHeaderComponent,
+            EclSiteHeaderActionComponent,
+            EclSiteHeaderLoginComponent,
+            EclSiteHeaderLoginDescriptionDirective,
+            EclSiteHeaderLoginSeparatorDirective,
+            EclSiteHeaderLanguageComponent,
+            EclSiteHeaderLanguagePopoverComponent,
+            EclSiteHeaderSearchComponent,
+            EclSiteHeaderBannerTopComponent,
+            EclSiteHeaderEnvironmentComponent,
+            EclSiteHeaderNotificationComponent,
+            EclSiteHeaderCtaDirective,
+            EclSiteHeaderImageDirective,
+            EclSiteHeaderPictureDirective,
+            EclSiteHeaderLinkDirective], imports: [CommonModule,
+            TranslateModule,
+            FormsModule,
+            ReactiveFormsModule,
+            EclLinkDirectiveModule,
+            EclButtonComponentModule,
+            EclIconComponentModule,
+            EclFormGroupComponentModule,
+            EclSearchFormComponentModule], exports: [EclSiteHeaderComponent,
+            EclSiteHeaderActionComponent,
+            EclSiteHeaderLoginComponent,
+            EclSiteHeaderLoginDescriptionDirective,
+            EclSiteHeaderLoginSeparatorDirective,
+            EclSiteHeaderLanguageComponent,
+            EclSiteHeaderLanguagePopoverComponent,
+            EclSiteHeaderSearchComponent,
+            EclSiteHeaderBannerTopComponent,
+            EclSiteHeaderEnvironmentComponent,
+            EclSiteHeaderNotificationComponent,
+            EclSiteHeaderCtaDirective,
+            EclSiteHeaderImageDirective,
+            EclSiteHeaderPictureDirective,
+            EclSiteHeaderLinkDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderComponentModule, providers: [EclAreaDataService, EclExpandableItemSetDataService], imports: [CommonModule,
+            TranslateModule,
+            FormsModule,
+            ReactiveFormsModule,
+            EclLinkDirectiveModule,
+            EclButtonComponentModule,
+            EclIconComponentModule,
+            EclFormGroupComponentModule,
+            EclSearchFormComponentModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclSiteHeaderComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        TranslateModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        EclLinkDirectiveModule,
+                        EclButtonComponentModule,
+                        EclIconComponentModule,
+                        EclFormGroupComponentModule,
+                        EclSearchFormComponentModule,
+                    ],
+                    exports: [...COMPONENTS],
+                    declarations: [...COMPONENTS],
+                    providers: [EclAreaDataService, EclExpandableItemSetDataService],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR, EclSiteHeaderActionComponent, EclSiteHeaderBannerTopComponent, EclSiteHeaderComponent, EclSiteHeaderComponentModule, EclSiteHeaderCtaDirective, EclSiteHeaderEnvironmentComponent, EclSiteHeaderImageDirective, EclSiteHeaderLanguageClickEvent, EclSiteHeaderLanguageCloseEvent, EclSiteHeaderLanguageComponent, EclSiteHeaderLanguagePopoverComponent, EclSiteHeaderLanguageSelectedEvent, EclSiteHeaderLinkDirective, EclSiteHeaderLoginBoxToggleEvent, EclSiteHeaderLoginComponent, EclSiteHeaderLoginDescriptionDirective, EclSiteHeaderLoginEvent, EclSiteHeaderLoginSeparatorDirective, EclSiteHeaderLogoClickEvent, EclSiteHeaderNotificationComponent, EclSiteHeaderPictureDirective, EclSiteHeaderSearchComponent, EclSiteHeaderSearchEvent, EclSiteHeaderSearchToggleEvent };
+//# sourceMappingURL=eui-ecl-components-ecl-site-header.mjs.map