@eui/ecl 22.0.0-alpha.2 → 22.0.0-alpha.21

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Component, inject, PLATFORM_ID, Directive, EventEmitter, contentChild, forwardRef, HostListener, Output, Input, ElementRef, Renderer2, afterNextRender, viewChild, input, booleanAttribute, output, NgZone, DOCUMENT, Injectable, ChangeDetectorRef } from '@angular/core';
+import { HostBinding, Component, inject, PLATFORM_ID, Directive, EventEmitter, contentChild, forwardRef, HostListener, Output, Input, ElementRef, Renderer2, afterNextRender, viewChild, input, booleanAttribute, output, NgZone, DOCUMENT, signal, Injectable } from '@angular/core';
 import * as i1 from '@eui/ecl/core';
 import { ECLBaseDirective, ECLClickOutsideDirective, EclBaseEvent, EclThemeService, EclRtlService, logoLanguageCode } from '@eui/ecl/core';
 import { isPlatformBrowser, UpperCasePipe, AsyncPipe } from '@angular/common';
@@ -21,9 +21,9 @@ import { EclMenuComponent } from '@eui/ecl/components/ecl-menu';
 import { EclHeaderMenuComunicationService } from '@eui/ecl/shared';
 import { TranslatePipe } from '@ngx-translate/core';
 import { ScrollDispatcher } from '@angular/cdk/scrolling';
-import * as i1$1 from '@angular/forms';
+import * as i2$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import * as i2$2 from '@eui/ecl/components/ecl-search-form';
+import * as i3$2 from '@eui/ecl/components/ecl-search-form';
 import { EUI_ECL_SEARCH_FORM } from '@eui/ecl/components/ecl-search-form';
 
 /**
@@ -404,9 +404,6 @@ class EclAreaChangeEvent {
  * Emits events when language is selected and when dialog is closed.
  */
 class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
-    get display() {
-        return this.isHidden() ? 'none' : 'block';
-    }
     constructor() {
         super();
         this.el = inject(ElementRef);
@@ -416,8 +413,15 @@ class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
          */
         this.languageContent = viewChild('languageContent', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "languageContent" }] : /* istanbul ignore next */ []));
-        this.euLanguages = [];
-        this.nonEuLanguages = [];
+        /**
+         * Current language
+         */
+        this.languageCode = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "languageCode" }] : /* istanbul ignore next */ []));
+        this.euLanguages = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "euLanguages" }] : /* istanbul ignore next */ []));
+        this.nonEuLanguages = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nonEuLanguages" }] : /* istanbul ignore next */ []));
         /**
          * Number of columns for eu languages. Calculated by the parent component 'ecl-site-header-language'.
          */
@@ -448,13 +452,23 @@ class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
          * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
          */
         this.isFull = input(false, { ...(ngDevMode ? { debugName: "isFull" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.languageClosed = output();
-        this.languageSelected = output();
         /**
-         * The role of the dialog is 'dialog'. Should not be changed.
+         * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
+         */
+        this.rightPosition = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rightPosition" }] : /* istanbul ignore next */ []));
+        /**
+         * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
+         */
+        this.leftPosition = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "leftPosition" }] : /* istanbul ignore next */ []));
+        /**
+         * Property to position the arrow of the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
          */
-        this.role = 'dialog';
-        this.labelledBy = 'ecl-site-header__language-title';
+        this.languageArrowPosition = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "languageArrowPosition" }] : /* istanbul ignore next */ []));
+        this.languageClosed = output();
+        this.languageSelected = output();
         this.destroy$ = new Subject();
         this.scrollDispatcher = inject(ScrollDispatcher);
         this.zone = inject(NgZone);
@@ -478,6 +492,9 @@ class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
             .join(' ')
             .trim();
     }
+    get display() {
+        return this.isHidden() ? 'none' : 'block';
+    }
     get isModal() {
         return !this.isHidden() || undefined;
     }
@@ -492,7 +509,6 @@ class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
         this.languageClosed.emit(new EclSiteHeaderLanguageCloseEvent());
     }
     onLanguageClick(language, evt) {
-        this.languageCode = language.code;
         this.languageSelected.emit(new EclSiteHeaderLanguageSelectedEvent(language));
         evt.preventDefault();
     }
@@ -518,76 +534,26 @@ class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderLanguagePopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclSiteHeaderLanguagePopoverComponent, isStandalone: true, selector: "ecl-site-header-language-popover", inputs: { languageCode: { classPropertyName: "languageCode", publicName: "languageCode", isSignal: false, isRequired: false, transformFunction: null }, euLanguages: { classPropertyName: "euLanguages", publicName: "euLanguages", isSignal: false, isRequired: false, transformFunction: null }, nonEuLanguages: { classPropertyName: "nonEuLanguages", publicName: "nonEuLanguages", isSignal: false, isRequired: false, transformFunction: null }, euColumnsCount: { classPropertyName: "euColumnsCount", publicName: "euColumnsCount", isSignal: true, isRequired: false, transformFunction: null }, nonEuColumnsCount: { classPropertyName: "nonEuColumnsCount", publicName: "nonEuColumnsCount", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null }, isPushRight: { classPropertyName: "isPushRight", publicName: "isPushRight", isSignal: true, isRequired: false, transformFunction: null }, isPushLeft: { classPropertyName: "isPushLeft", publicName: "isPushLeft", isSignal: true, isRequired: false, transformFunction: null }, isStack: { classPropertyName: "isStack", publicName: "isStack", isSignal: true, isRequired: false, transformFunction: null }, isFull: { classPropertyName: "isFull", publicName: "isFull", isSignal: true, isRequired: false, transformFunction: null }, rightPosition: { classPropertyName: "rightPosition", publicName: "rightPosition", isSignal: false, isRequired: false, transformFunction: null }, leftPosition: { classPropertyName: "leftPosition", publicName: "leftPosition", isSignal: false, isRequired: false, transformFunction: null }, languageArrowPosition: { classPropertyName: "languageArrowPosition", publicName: "languageArrowPosition", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { languageClosed: "languageClosed", languageSelected: "languageSelected" }, host: { properties: { "style.right.px": "this.rightPosition", "style.left.px": "this.leftPosition", "style.--ecl-language-arrow-position": "this.languageArrowPosition", "attr.role": "this.role", "attr.aria-labelledby": "this.labelledBy", "style.display": "this.display", "class": "this.cssClasses", "attr.aria-modal": "this.isModal", "attr.hidden": "this.isDropdownHidden" } }, viewQueries: [{ propertyName: "languageContent", first: true, predicate: ["languageContent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-site-header__language-header\">\n    <div class=\"ecl-site-header__language-title\">\n        {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n    </div>\n    <button eclButton variant=\"tertiary\" eclStyle=\"neutral\" isIconOnly class=\"ecl-site-header__language-close\" (click)=\"onCloseClick()\">\n        <span class=\"ecl-button__container\">\n            <span class=\"ecl-button__label\">\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </span>\n    </button>\n</div>\n\n<div #languageContent class=\"ecl-site-header__language-content\" [style.max-height.px]=\"languageContentMaxHeight\"\n    [class.ecl-site-header__language-content--stack]=\"isStack()\">\n    @if (euLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount() }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" [attr.translate]=\"'no'\">\n                @for (item of euLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            variant=\"standalone\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n    @if (nonEuLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount() }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" [attr.translate]=\"'no'\">\n                @for (item of nonEuLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            variant=\"standalone\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i3$1.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclSiteHeaderLanguagePopoverComponent, isStandalone: true, selector: "ecl-site-header-language-popover", inputs: { languageCode: { classPropertyName: "languageCode", publicName: "languageCode", isSignal: true, isRequired: false, transformFunction: null }, euLanguages: { classPropertyName: "euLanguages", publicName: "euLanguages", isSignal: true, isRequired: false, transformFunction: null }, nonEuLanguages: { classPropertyName: "nonEuLanguages", publicName: "nonEuLanguages", isSignal: true, isRequired: false, transformFunction: null }, euColumnsCount: { classPropertyName: "euColumnsCount", publicName: "euColumnsCount", isSignal: true, isRequired: false, transformFunction: null }, nonEuColumnsCount: { classPropertyName: "nonEuColumnsCount", publicName: "nonEuColumnsCount", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null }, isPushRight: { classPropertyName: "isPushRight", publicName: "isPushRight", isSignal: true, isRequired: false, transformFunction: null }, isPushLeft: { classPropertyName: "isPushLeft", publicName: "isPushLeft", isSignal: true, isRequired: false, transformFunction: null }, isStack: { classPropertyName: "isStack", publicName: "isStack", isSignal: true, isRequired: false, transformFunction: null }, isFull: { classPropertyName: "isFull", publicName: "isFull", isSignal: true, isRequired: false, transformFunction: null }, rightPosition: { classPropertyName: "rightPosition", publicName: "rightPosition", isSignal: true, isRequired: false, transformFunction: null }, leftPosition: { classPropertyName: "leftPosition", publicName: "leftPosition", isSignal: true, isRequired: false, transformFunction: null }, languageArrowPosition: { classPropertyName: "languageArrowPosition", publicName: "languageArrowPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { languageClosed: "languageClosed", languageSelected: "languageSelected" }, host: { attributes: { "role": "dialog", "aria-labelledby": "ecl-site-header__language-title" }, properties: { "class": "cssClasses", "style.display": "display", "style.right.px": "rightPosition()", "style.left.px": "leftPosition()", "style.--ecl-overlay-arrow-position": "languageArrowPosition()", "attr.aria-modal": "isModal", "attr.hidden": "isDropdownHidden" } }, viewQueries: [{ propertyName: "languageContent", first: true, predicate: ["languageContent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-site-header__language-header\">\n    <div class=\"ecl-site-header__language-title\">\n        {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n    </div>\n    <button eclButton variant=\"tertiary\" eclStyle=\"neutral\" isIconOnly class=\"ecl-site-header__language-close\" (click)=\"onCloseClick()\">\n        <span class=\"ecl-button__container\">\n            <span class=\"ecl-button__label\">\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </span>\n    </button>\n</div>\n\n<div #languageContent class=\"ecl-site-header__language-content\" [style.max-height.px]=\"languageContentMaxHeight\"\n    [class.ecl-site-header__language-content--stack]=\"isStack()\">\n    @if (euLanguages().length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount() }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" [attr.translate]=\"'no'\">\n                @for (item of euLanguages(); track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            variant=\"standalone\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode()\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n    @if (nonEuLanguages().length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount() }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" [attr.translate]=\"'no'\">\n                @for (item of nonEuLanguages(); track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            variant=\"standalone\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode()\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i3$1.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderLanguagePopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header-language-popover', imports: [TranslatePipe, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK], template: "<div class=\"ecl-site-header__language-header\">\n    <div class=\"ecl-site-header__language-title\">\n        {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n    </div>\n    <button eclButton variant=\"tertiary\" eclStyle=\"neutral\" isIconOnly class=\"ecl-site-header__language-close\" (click)=\"onCloseClick()\">\n        <span class=\"ecl-button__container\">\n            <span class=\"ecl-button__label\">\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </span>\n    </button>\n</div>\n\n<div #languageContent class=\"ecl-site-header__language-content\" [style.max-height.px]=\"languageContentMaxHeight\"\n    [class.ecl-site-header__language-content--stack]=\"isStack()\">\n    @if (euLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount() }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" [attr.translate]=\"'no'\">\n                @for (item of euLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            variant=\"standalone\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n    @if (nonEuLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount() }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" [attr.translate]=\"'no'\">\n                @for (item of nonEuLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            variant=\"standalone\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { languageContent: [{ type: i0.ViewChild, args: ['languageContent', { isSignal: true }] }], languageCode: [{
-                type: Input
-            }], euLanguages: [{
-                type: Input
-            }], nonEuLanguages: [{
-                type: Input
-            }], euColumnsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "euColumnsCount", required: false }] }], nonEuColumnsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "nonEuColumnsCount", required: false }] }], isHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHidden", required: false }] }], isPushRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPushRight", required: false }] }], isPushLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPushLeft", required: false }] }], isStack: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStack", required: false }] }], isFull: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFull", required: false }] }], rightPosition: [{
-                type: 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: i0.Output, args: ["languageClosed"] }], languageSelected: [{ type: i0.Output, args: ["languageSelected"] }], 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']
-            }] } });
-
-/**
- * This class is used for methods, that serve for communication between the components in ecl-side-header.
- */
-class EclAreaDataService {
-    constructor() {
-        this.dataSubject = new Subject();
-        this.dataSubject$ = this.dataSubject.asObservable();
-    }
-    /**
-     * When header is resized, some of it's chidren parameters for positioning on the screen need to be recalculated.
-     * This event publishes the new site header position, so that the chidren can adjust their position accordingly.
-     * @param event
-     */
-    publishEvent(event) {
-        this.dataSubject.next(event);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclAreaDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclAreaDataService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclAreaDataService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'ecl-site-header-language-popover', imports: [TranslatePipe, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK], host: {
+                        // The role of the dialog is 'dialog'. Should not be changed.
+                        role: 'dialog',
+                        'aria-labelledby': 'ecl-site-header__language-title',
+                        '[class]': 'cssClasses',
+                        '[style.display]': 'display',
+                        '[style.right.px]': 'rightPosition()',
+                        '[style.left.px]': 'leftPosition()',
+                        '[style.--ecl-overlay-arrow-position]': 'languageArrowPosition()',
+                        '[attr.aria-modal]': 'isModal',
+                        '[attr.hidden]': 'isDropdownHidden',
+                    }, template: "<div class=\"ecl-site-header__language-header\">\n    <div class=\"ecl-site-header__language-title\">\n        {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n    </div>\n    <button eclButton variant=\"tertiary\" eclStyle=\"neutral\" isIconOnly class=\"ecl-site-header__language-close\" (click)=\"onCloseClick()\">\n        <span class=\"ecl-button__container\">\n            <span class=\"ecl-button__label\">\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </span>\n    </button>\n</div>\n\n<div #languageContent class=\"ecl-site-header__language-content\" [style.max-height.px]=\"languageContentMaxHeight\"\n    [class.ecl-site-header__language-content--stack]=\"isStack()\">\n    @if (euLanguages().length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount() }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" [attr.translate]=\"'no'\">\n                @for (item of euLanguages(); track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            variant=\"standalone\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode()\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n    @if (nonEuLanguages().length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount() }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" [attr.translate]=\"'no'\">\n                @for (item of nonEuLanguages(); track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            variant=\"standalone\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode()\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { languageContent: [{ type: i0.ViewChild, args: ['languageContent', { isSignal: true }] }], languageCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "languageCode", required: false }] }], euLanguages: [{ type: i0.Input, args: [{ isSignal: true, alias: "euLanguages", required: false }] }], nonEuLanguages: [{ type: i0.Input, args: [{ isSignal: true, alias: "nonEuLanguages", required: false }] }], euColumnsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "euColumnsCount", required: false }] }], nonEuColumnsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "nonEuColumnsCount", required: false }] }], isHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHidden", required: false }] }], isPushRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPushRight", required: false }] }], isPushLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPushLeft", required: false }] }], isStack: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStack", required: false }] }], isFull: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFull", required: false }] }], rightPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightPosition", required: false }] }], leftPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftPosition", required: false }] }], languageArrowPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "languageArrowPosition", required: false }] }], languageClosed: [{ type: i0.Output, args: ["languageClosed"] }], languageSelected: [{ type: i0.Output, args: ["languageSelected"] }] } });
 
+/** Half the arrow's own width, matching ECL's `arrowSize`. */
+const ARROW_SIZE$2 = '0.5rem';
 /**
  * This component is used to switch between the languages of the application. Shows the current language, when clicked,
  *  opens a language selector.
@@ -598,15 +564,6 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
         this.eclThemeService = inject(EclThemeService);
         this.config = inject(GLOBAL_CONFIG_TOKEN, { optional: true });
         this.i18nService = inject(I18nService);
-        /**
-         * The language popover, that shows all available languages (configured in the config file of the current site).
-         */
-        this.languagePopover = viewChild(EclSiteHeaderLanguagePopoverComponent, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "languagePopover" }] : /* istanbul ignore next */ []));
-        /**
-         * The link to open the popover dialog.
-         */
-        this.languageLinkElement = viewChild('languageLink', { ...(ngDevMode ? { debugName: "languageLinkElement" } : /* istanbul ignore next */ {}), read: ElementRef });
         /**
          * Thie event is emited, when language link, showing the current language is clicked.
          */
@@ -615,8 +572,6 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
          * Thie event is emited, when user selects a new language from the dropdown.
          */
         this.languageSelected = new EventEmitter();
-        this.MOBILE_BREAKPOINT = 768;
-        this.LANGUAGE_MAX_COLUMNS = 8;
         this.isLanguagesDropdownVisible = false;
         this.languageCode = 'en';
         /**
@@ -629,11 +584,23 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
         this.nonEuLanguages = [];
         this.euColumnsCount = 1;
         this.nonEuColumnsCount = 1;
+        /**
+         * The language popover, that shows all available languages (configured in the config file of the current site).
+         */
+        this.languagePopover = viewChild(EclSiteHeaderLanguagePopoverComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "languagePopover" }] : /* istanbul ignore next */ []));
+        /**
+         * The link to open the popover dialog.
+         */
+        this.languageLinkElement = viewChild('languageLink', { ...(ngDevMode ? { debugName: "languageLinkElement" } : /* istanbul ignore next */ {}), read: ElementRef });
+        this.MOBILE_BREAKPOINT = 768;
+        this.LANGUAGE_MAX_COLUMNS = 8;
+        this.RESIZE_DEBOUNCE = 200;
         this.destroy$ = new Subject();
         this._languages = [];
         this.isRtl = false;
-        this.eclAreaDataService = inject(EclAreaDataService);
         this.eclRtlService = inject(EclRtlService);
+        this.el = inject(ElementRef);
         this.document = inject(DOCUMENT);
         this.window = this.document.defaultView; // Window | null
     }
@@ -644,13 +611,11 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
         this.handleRtlChangeState();
     }
     /**
-     * After view is initialized -> calculate popover position and initialize languages, that are configured in the config file
+     * After view is initialized -> set up resize repositioning and initialize languages, that are configured in the config file
      *  of the current site.
      */
     ngAfterViewInit() {
-        this.eclAreaDataService.dataSubject$.pipe(takeUntil(this.destroy$)).subscribe(parentHeaderRect => {
-            this.calculatePopoverPosition(parentHeaderRect.right, parentHeaderRect.left);
-        });
+        this.handleResize();
         this.handleInitialConfiguredLanguages();
     }
     ngOnDestroy() {
@@ -667,18 +632,14 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
     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.resetPositioning());
         }
         // If the dropdown is visible, we set the max-height of the dropdown, so that it can be scrolled.
         if (this.isLanguagesDropdownVisible) {
             setTimeout(() => this.languagePopover().setLanguageContentMaxHeight());
+            // Position the popover and its arrow after the popover is rendered and reflowed.
+            // Matches ECL's updateOverlayPosition call in toggleOverlay.
+            requestAnimationFrame(() => this.calculatePopoverPosition());
         }
         this.languageClick.next(new EclSiteHeaderLanguageClickEvent());
         evt.preventDefault();
@@ -710,6 +671,9 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
     handleRtlChangeState() {
         this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {
             this.isRtl = rtlState;
+            if (this.isLanguagesDropdownVisible) {
+                this.calculatePopoverPosition();
+            }
         });
     }
     /**
@@ -721,44 +685,80 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
         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 = this.window.innerWidth;
-                const vw = Math.max(document.documentElement.clientWidth || 0, this.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})`;
-                }
+    /**
+     * Clears every positioning flag/offset so a fresh calculation (or a close) starts from a known state.
+     */
+    resetPositioning() {
+        this.isFull = false;
+        this.isStack = false;
+        this.isPushRight = false;
+        this.isPushLeft = false;
+        this.rightPosition = undefined;
+        this.leftPosition = undefined;
+        this.languageArrowPosition = undefined;
+    }
+    /**
+     * Positions the language popover and its arrow, matching ECL's updateOverlayPosition.
+     * The container is the site-header top area (ECL's '[data-ecl-site-header-top]'), resolved from
+     * the DOM rather than a shared service so the measurement is taken at the right time (on open/resize).
+     */
+    calculatePopoverPosition() {
+        if (!this.isLanguagesDropdownVisible || !this.hasLanguageCodes())
+            return;
+        const container = this.el.nativeElement.closest('.ecl-site-header__top');
+        const languagePopover = this.languagePopover();
+        if (!container || !languagePopover)
+            return;
+        const toggleButtonRect = this.languageLinkElement().nativeElement.getBoundingClientRect();
+        const popoverRect = languagePopover.el.nativeElement.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        const screenWidth = this.window.innerWidth;
+        const clientWidth = Math.max(this.document.documentElement.clientWidth || 0, this.window.innerWidth || 0);
+        this.resetPositioning();
+        // Stack the EU / non-EU lists when the popover is wider than the container.
+        if (popoverRect.width > containerRect.width) {
+            this.isStack = true;
+            if (this.nonEuLanguages.length) {
+                this.nonEuColumnsCount = Math.max(this.euColumnsCount, this.nonEuColumnsCount);
+            }
+        }
+        // Mobile: the popover is full width. The arrow is anchored from the box's right edge,
+        // so the offset is measured against popoverRect.right. Exclusive with push-right/left,
+        // matching ECL's updateOverlayPosition (mobile branch returns early).
+        if (clientWidth < this.MOBILE_BREAKPOINT) {
+            const arrowOffset = popoverRect.right - toggleButtonRect.right + toggleButtonRect.width / 2;
+            this.isFull = true;
+            this.languageArrowPosition = `calc(${arrowOffset}px - ${ARROW_SIZE$2})`;
+            return;
+        }
+        // RTL: popover overflows the left edge -> push it right against the container's left edge.
+        if (this.isRtl && popoverRect.left < 0) {
+            const arrowOffset = toggleButtonRect.right - containerRect.left - toggleButtonRect.width / 2;
+            this.isPushLeft = true;
+            this.leftPosition = -toggleButtonRect.left + containerRect.left;
+            this.languageArrowPosition = `${arrowOffset}px`;
+        }
+        else if (!this.isRtl && popoverRect.right > screenWidth) {
+            // LTR: popover overflows the right edge -> push it left against the container's right edge.
+            const arrowOffset = containerRect.right - toggleButtonRect.right + toggleButtonRect.width / 2;
+            this.isPushRight = true;
+            this.rightPosition = -containerRect.right + toggleButtonRect.right;
+            this.languageArrowPosition = `calc(${arrowOffset}px - ${ARROW_SIZE$2})`;
+        }
+    }
+    /**
+     * On window resize -> reposition the popover, but only while it is open.
+     * Debounced for performance, matching ECL's handleResize.
+     */
+    handleResize() {
+        const win = this.window;
+        if (!win)
+            return;
+        fromEvent(win, 'resize')
+            .pipe(debounceTime(this.RESIZE_DEBOUNCE), takeUntil(this.destroy$))
+            .subscribe(() => {
+            if (this.isLanguagesDropdownVisible) {
+                this.calculatePopoverPosition();
             }
         });
     }
@@ -790,7 +790,7 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderLanguageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclSiteHeaderLanguageComponent, isStandalone: true, selector: "ecl-site-header-language", outputs: { languageClick: "languageClick", languageSelected: "languageSelected" }, host: { listeners: { "eclClickOutside": "onClickOutside()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "languagePopover", first: true, predicate: EclSiteHeaderLanguagePopoverComponent, descendants: true, isSignal: true }, { propertyName: "languageLinkElement", first: true, predicate: ["languageLink"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    role=\"button\"\n    [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE-EXT' | translate: { currentLang: getLanguageLabel() }\"\n    [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n    (click)=\"onLanguageClick($event)\"\n    (keydown.space)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"global\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes() && isLanguagesDropdownVisible) {\n<ecl-site-header-language-popover\n    #languagePopover\n    cdkTrapFocus\n    cdkTrapFocusAutoCapture\n    id=\"language-list-overlay\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: ["languageCode", "euLanguages", "nonEuLanguages", "euColumnsCount", "nonEuColumnsCount", "isHidden", "isPushRight", "isPushLeft", "isStack", "isFull", "rightPosition", "leftPosition", "languageArrowPosition"], outputs: ["languageClosed", "languageSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclSiteHeaderLanguageComponent, isStandalone: true, selector: "ecl-site-header-language", outputs: { languageClick: "languageClick", languageSelected: "languageSelected" }, host: { listeners: { "eclClickOutside": "onClickOutside()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "cssClasses" } }, viewQueries: [{ propertyName: "languagePopover", first: true, predicate: EclSiteHeaderLanguagePopoverComponent, descendants: true, isSignal: true }, { propertyName: "languageLinkElement", first: true, predicate: ["languageLink"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    role=\"button\"\n    [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE-EXT' | translate: { currentLang: getLanguageLabel() }\"\n    [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n    (click)=\"onLanguageClick($event)\"\n    (keydown.space)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"global\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes() && isLanguagesDropdownVisible) {\n<ecl-site-header-language-popover\n    #languagePopover\n    cdkTrapFocus\n    cdkTrapFocusAutoCapture\n    id=\"language-list-overlay\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: ["languageCode", "euLanguages", "nonEuLanguages", "euColumnsCount", "nonEuColumnsCount", "isHidden", "isPushRight", "isPushLeft", "isStack", "isFull", "rightPosition", "leftPosition", "languageArrowPosition"], outputs: ["languageClosed", "languageSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderLanguageComponent, decorators: [{
             type: Component,
@@ -799,22 +799,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                             directive: ECLClickOutsideDirective,
                             outputs: ['eclClickOutside'],
                         },
-                    ], template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    role=\"button\"\n    [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE-EXT' | translate: { currentLang: getLanguageLabel() }\"\n    [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n    (click)=\"onLanguageClick($event)\"\n    (keydown.space)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"global\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes() && isLanguagesDropdownVisible) {\n<ecl-site-header-language-popover\n    #languagePopover\n    cdkTrapFocus\n    cdkTrapFocusAutoCapture\n    id=\"language-list-overlay\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { languagePopover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EclSiteHeaderLanguagePopoverComponent), { isSignal: true }] }], languageLinkElement: [{ type: i0.ViewChild, args: ['languageLink', { ...{ read: ElementRef }, isSignal: true }] }], languageClick: [{
+                    ], host: {
+                        '[class]': 'cssClasses',
+                        '(eclClickOutside)': 'onClickOutside()',
+                        '(document:keydown.escape)': 'onEscapeKeydownHandler()',
+                    }, template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    role=\"button\"\n    [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE-EXT' | translate: { currentLang: getLanguageLabel() }\"\n    [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n    (click)=\"onLanguageClick($event)\"\n    (keydown.space)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"global\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes() && isLanguagesDropdownVisible) {\n<ecl-site-header-language-popover\n    #languagePopover\n    cdkTrapFocus\n    cdkTrapFocusAutoCapture\n    id=\"language-list-overlay\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { languageClick: [{
                 type: Output
             }], languageSelected: [{
                 type: Output
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], onClickOutside: [{
-                type: HostListener,
-                args: ['eclClickOutside']
-            }], onEscapeKeydownHandler: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }] } });
+            }], languagePopover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EclSiteHeaderLanguagePopoverComponent), { isSignal: true }] }], languageLinkElement: [{ type: i0.ViewChild, args: ['languageLink', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
+/** Half the arrow's own width, matching ECL's `arrowSize`. */
+const ARROW_SIZE$1 = '0.5rem';
+/** Debounce for the resize recomputation, matching ECL's `handleResize`. */
+const RESIZE_DEBOUNCE$1 = 200;
 /**
  * Component for login/logout as part of the harmonised site header. Emits events when user logs in and when user opens the
  * login dropdown.
@@ -823,22 +822,42 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
     constructor() {
         super();
         this.isLoggedIn = input(false, { ...(ngDevMode ? { debugName: "isLoggedIn" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.class = 'ecl-site-header__login-container';
-        this.loginLinkElement = viewChild('loginLink', { ...(ngDevMode ? { debugName: "loginLinkElement" } : /* istanbul ignore next */ {}), read: ElementRef });
         this.login = output();
         this.loginBoxToggle = new EventEmitter();
         /**
-         * If login popover is open (true) or closed (false).
+         * If login popover is open (true) or closed (false). Kept public because the parent
+         * `ecl-site-header` resets it directly when the search box opens.
          */
         this.isLoginBoxActive = false;
-        this.TABLET_BREAKPOINT = 996;
+        /**
+         * The position of the arrow of the popover, when in mobile (full-width) mode.
+         */
+        this.loginArrowPosition = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loginArrowPosition" }] : /* istanbul ignore next */ []));
+        /**
+         * The login link element from the view, i.e. the login button (the toggle).
+         */
+        this.loginLinkElement = viewChild('loginLink', { ...(ngDevMode ? { debugName: "loginLinkElement" } : /* istanbul ignore next */ {}), read: ElementRef });
+        /**
+         * The login box element from the view, i.e. the dropdown the arrow points at.
+         */
+        this.loginBoxElement = viewChild('loginBox', { ...(ngDevMode ? { debugName: "loginBoxElement" } : /* istanbul ignore next */ {}), read: ElementRef });
         this.destroy$ = new Subject();
-        this.eclAreaDataService = inject(EclAreaDataService);
         this.eclRtlService = inject(EclRtlService);
         this.document = inject(DOCUMENT);
+        this.window = this.document.defaultView;
         afterNextRender(() => {
-            this.handleRtlChangeState();
-            this.handleSiteHeaderAreaChangeEvent();
+            // Recompute the arrow only while the box is open.
+            this.eclRtlService.currentRtlState$.pipe(debounceTime(50), takeUntil(this.destroy$)).subscribe(() => {
+                if (this.isLoginBoxActive)
+                    this.setLoginArrow();
+            });
+            if (this.window) {
+                fromEvent(this.window, 'resize').pipe(debounceTime(RESIZE_DEBOUNCE$1), takeUntil(this.destroy$)).subscribe(() => {
+                    if (this.isLoginBoxActive)
+                        this.setLoginArrow();
+                });
+            }
         });
     }
     ngOnChanges(changes) {
@@ -854,7 +873,7 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
     /**
      * Close the login popover on click outside.
      */
-    onClickOutsideMegaMenu() {
+    onClickOutside() {
         this.onLoginBoxClose();
     }
     /**
@@ -873,66 +892,56 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
         const event = new EclSiteHeaderLoginBoxToggleEvent(this.isLoginBoxActive);
         this.loginBoxToggle.next(event);
         evt.preventDefault();
+        if (this.isLoginBoxActive) {
+            // Measure after the '--active' class is applied and the box reflows to full width.
+            this.window?.requestAnimationFrame(() => this.setLoginArrow());
+        }
     }
     onLoginBoxClose() {
         if (this.isLoginBoxActive) {
             this.isLoginBoxActive = false;
             const event = new EclSiteHeaderLoginBoxToggleEvent(this.isLoginBoxActive);
             this.loginBoxToggle.next(event);
+            this.loginArrowPosition.set(undefined);
         }
     }
-    handleRtlChangeState() {
-        this.eclRtlService.currentRtlState$.pipe(debounceTime(50), takeUntil(this.destroy$)).subscribe(() => {
-            this.calculateLoginArrowPosition(this.parentHeaderRight);
-        });
-    }
     /**
-     * On resize -> calculate the popover arrow position, using parent element ecl-header html parameters.
+     * Position the dropdown arrow so it points at the toggle button.
+     * The arrow only exists on the mobile full-width dropdown, so the calculation is gated on the box
+     *  spanning (almost) the full viewport width. The offset is relative to the box's own left edge.
+     * Mirrors ECL's 'setLoginArrow' in site-header.js.
      */
-    handleSiteHeaderAreaChangeEvent() {
-        this.eclAreaDataService.dataSubject$.pipe(takeUntil(this.destroy$)).subscribe(parentHeaderRect => {
-            this.parentHeaderRight = parentHeaderRect.right;
-            this.calculateLoginArrowPosition(this.parentHeaderRight);
-        });
-    }
-    calculateLoginArrowPosition(parentHeaderRight) {
-        const vw = this.document.documentElement.clientWidth;
-        const arrowSize = '0.5rem';
-        const loginLink = this.loginLinkElement()?.nativeElement.getBoundingClientRect();
-        const arrowPosition = parentHeaderRight - loginLink?.right + loginLink?.width / 2;
-        if (parentHeaderRight === undefined) {
+    setLoginArrow() {
+        const loginBoxRect = this.loginBoxElement()?.nativeElement.getBoundingClientRect();
+        const toggleButtonRect = this.loginLinkElement()?.nativeElement.getBoundingClientRect();
+        if (!loginBoxRect || !toggleButtonRect)
             return;
+        const clientWidth = this.document.documentElement.clientWidth;
+        if (loginBoxRect.width >= clientWidth - 1) {
+            const arrowOffset = toggleButtonRect.left - loginBoxRect.left + toggleButtonRect.width / 2;
+            this.loginArrowPosition.set(`calc(${arrowOffset}px - ${ARROW_SIZE$1})`);
         }
-        if (this.isLoginBoxActive && vw < this.TABLET_BREAKPOINT) {
-            this.loginArrowPosition = `calc(${arrowPosition}px + ${arrowSize})`;
-        }
-        else if (this.isLoginBoxActive) {
-            this.loginArrowPosition = null;
+        else {
+            this.loginArrowPosition.set(undefined);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderLoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclSiteHeaderLoginComponent, isStandalone: true, selector: "ecl-site-header-login", inputs: { isLoggedIn: { classPropertyName: "isLoggedIn", publicName: "isLoggedIn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", loginBoxToggle: "loginBoxToggle" }, host: { listeners: { "eclClickOutside": "onClickOutsideMegaMenu()" }, properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "loginLinkElement", first: true, predicate: ["loginLink"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i1.ECLBaseDirective }, { directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "@if (isLoggedIn()) {\n    <a\n        #loginLink\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        aria-controls=\"login-box-id\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n    </a>\n    <div\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclSiteHeaderLoginComponent, isStandalone: true, selector: "ecl-site-header-login", inputs: { isLoggedIn: { classPropertyName: "isLoggedIn", publicName: "isLoggedIn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", loginBoxToggle: "loginBoxToggle" }, host: { listeners: { "eclClickOutside": "onClickOutside()" }, classAttribute: "ecl-site-header__login-container" }, viewQueries: [{ propertyName: "loginLinkElement", first: true, predicate: ["loginLink"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "loginBoxElement", first: true, predicate: ["loginBox"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "@if (isLoggedIn()) {\n    <a\n        #loginLink\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        aria-controls=\"login-box-id\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n    </a>\n    <div\n        #loginBox\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition()}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderLoginComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-site-header-login', imports: [TranslatePipe, ...EUI_ECL_ICON], hostDirectives: [
-                        {
-                            directive: ECLBaseDirective,
-                        },
                         {
                             directive: ECLClickOutsideDirective,
                             outputs: ['eclClickOutside'],
                         },
-                    ], template: "@if (isLoggedIn()) {\n    <a\n        #loginLink\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        aria-controls=\"login-box-id\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n    </a>\n    <div\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { isLoggedIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoggedIn", required: false }] }], class: [{
-                type: HostBinding,
-                args: ['class']
-            }], loginLinkElement: [{ type: i0.ViewChild, args: ['loginLink', { ...{ read: ElementRef }, isSignal: true }] }], login: [{ type: i0.Output, args: ["login"] }], loginBoxToggle: [{
+                    ], host: {
+                        class: 'ecl-site-header__login-container',
+                        '(eclClickOutside)': 'onClickOutside()',
+                    }, template: "@if (isLoggedIn()) {\n    <a\n        #loginLink\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        aria-controls=\"login-box-id\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n    </a>\n    <div\n        #loginBox\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition()}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isLoggedIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoggedIn", required: false }] }], login: [{ type: i0.Output, args: ["login"] }], loginBoxToggle: [{
                 type: Output
-            }], onClickOutsideMegaMenu: [{
-                type: HostListener,
-                args: ['eclClickOutside']
-            }] } });
+            }], loginLinkElement: [{ type: i0.ViewChild, args: ['loginLink', { ...{ read: ElementRef }, isSignal: true }] }], loginBoxElement: [{ type: i0.ViewChild, args: ['loginBox', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 /**
  * This directive is used to add specific class for the login description element, within the login dropdown.
@@ -1079,6 +1088,10 @@ const ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR = {
 const noop = () => {
     /** empty*/
 };
+/** Half the arrow's own width, matching ECL's `arrowSize`. */
+const ARROW_SIZE = '0.5rem';
+/** Debounce for the resize recomputation, matching ECL's `handleResize`. */
+const RESIZE_DEBOUNCE = 200;
 /**
  * This component builds the search box in the ecl-site-header component. Adds specific style and functionality, emits
  *  events on search and search toggle.
@@ -1086,51 +1099,74 @@ const noop = () => {
 class EclSiteHeaderSearchComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
-        this.class = 'ecl-site-header__search-container';
-        /**
-         * The default role of the component is 'search', should not be changed.
-         */
-        this.role = 'search';
         this.searchInputPlaceholder = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchInputPlaceholder" }] : /* istanbul ignore next */ []));
         this.searchButtonLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchButtonLabel" }] : /* istanbul ignore next */ []));
-        /**
-         * The search link element from the view, i.e. the search button.
-         */
-        this.searchLinkElement = viewChild('searchLink', { ...(ngDevMode ? { debugName: "searchLinkElement" } : /* istanbul ignore next */ {}), read: ElementRef });
         this.searchEvent = output();
         this.searchToggle = new EventEmitter();
+        /**
+         * Whether the search dropdown is open. Kept public because the parent
+         * `ecl-site-header` resets it directly when the login box opens.
+         */
         this.isSearchBoxActive = false;
+        /**
+         * The arrow position of the search dropdown, when in mobile (full-width) mode.
+         */
+        this.searchArrowPosition = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchArrowPosition" }] : /* istanbul ignore next */ []));
+        /**
+         * The search link element from the view, i.e. the search button (the toggle).
+         */
+        this.searchLinkElement = viewChild('searchLink', { ...(ngDevMode ? { debugName: "searchLinkElement" } : /* istanbul ignore next */ {}), read: ElementRef });
+        /**
+         * The search form element from the view, i.e. the dropdown box the arrow points from.
+         */
+        this.searchFormElement = viewChild('searchForm', { ...(ngDevMode ? { debugName: "searchFormElement" } : /* istanbul ignore next */ {}), read: ElementRef });
         // 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();
-        this.eclAreaDataService = inject(EclAreaDataService);
         this.eclRtlService = inject(EclRtlService);
-        this.cdr = inject(ChangeDetectorRef);
         this.platformId = inject(PLATFORM_ID);
         this.document = inject(DOCUMENT);
+        this.window = this.document.defaultView; // Window | null
     }
     ngAfterViewInit() {
         if (!isPlatformBrowser(this.platformId))
             return;
-        this.handleRtlChangeState();
-        this.handleSiteHeaderAreaChangeEvent();
-        const el = this.elementRef?.nativeElement ?? null; // if ECLBaseDirective exposes it
-        if (!el)
-            return;
-        this.ro = new ResizeObserver(() => {
-            this.calculateSearchFormArrowPosition(this.parentHeaderRight);
-        });
-        this.ro.observe(el);
+        // Recompute while open on resize (debounced, matching ECL's handleResize).
+        if (this.window) {
+            fromEvent(this.window, 'resize')
+                .pipe(debounceTime(RESIZE_DEBOUNCE), takeUntil(this.destroy$))
+                .subscribe(() => this.setSearchArrow());
+        }
+        // Recompute while open on RTL direction change.
+        this.eclRtlService.currentRtlState$.pipe(debounceTime(50), takeUntil(this.destroy$)).subscribe(() => this.setSearchArrow());
     }
     ngOnDestroy() {
-        this.ro?.disconnect();
         this.destroy$.next(true);
         this.destroy$.complete();
     }
+    // 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;
+    }
+    /**
+     * Close the search dropdown on click outside, matching ECL's `handleClickGlobal`.
+     */
+    onClickOutside() {
+        this.closeSearchBox();
+    }
     onSearch(evt) {
         this.searchEvent.emit(new EclSiteHeaderSearchEvent(evt.keyword));
         this.onChange(evt.keyword);
@@ -1141,6 +1177,11 @@ class EclSiteHeaderSearchComponent extends ECLBaseDirective {
         const event = new EclSiteHeaderSearchToggleEvent(this.isSearchBoxActive);
         this.searchToggle.next(event);
         evt.preventDefault();
+        // Measure after the `--active` class is applied and the box reflows to
+        // full width (matching ECL's toggleSearch -> setSearchArrow order).
+        if (this.isSearchBoxActive) {
+            this.window?.requestAnimationFrame(() => this.setSearchArrow());
+        }
     }
     /**
      *
@@ -1153,56 +1194,80 @@ class EclSiteHeaderSearchComponent extends ECLBaseDirective {
         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(this.destroy$)).subscribe(() => {
-            this.calculateSearchFormArrowPosition(this.parentHeaderRight);
-        });
-    }
-    handleSiteHeaderAreaChangeEvent() {
-        this.eclAreaDataService.dataSubject$.pipe(takeUntil(this.destroy$)).subscribe(parentHeaderRect => {
-            this.parentHeaderRight = parentHeaderRect.right;
-            this.calculateSearchFormArrowPosition(this.parentHeaderRight);
-        });
+    closeSearchBox() {
+        if (!this.isSearchBoxActive)
+            return;
+        this.isSearchBoxActive = false;
+        this.searchToggle.next(new EclSiteHeaderSearchToggleEvent(this.isSearchBoxActive));
+        this.searchArrowPosition.set(undefined);
     }
-    calculateSearchFormArrowPosition(parentHeaderRight) {
-        const searchLink = this.searchLinkElement().nativeElement.getBoundingClientRect();
-        const viewportWidth = this.document.documentElement.clientWidth;
-        const arrowPosition = viewportWidth - searchLink.right + searchLink.width / 2;
-        const arrowSize = '0.5rem';
-        if (this.isSearchBoxActive || parentHeaderRight !== undefined) {
-            this.searchArrowPosition = `calc(${arrowPosition}px + ${arrowSize})`;
-            this.cdr.detectChanges();
+    /**
+     * Positions the dropdown arrow so it points at the center of the search toggle button.
+     * Mirrors ECL's `setSearchArrow`: the arrow position is an offset relative to the
+     * search form's own left edge, and it only applies to the mobile full-width dropdown
+     * (`searchFormRect.width >= clientWidth - 1`, the `- 1` absorbing subpixel rounding).
+     */
+    setSearchArrow() {
+        if (!this.isSearchBoxActive)
+            return;
+        const searchFormRect = this.searchFormElement()?.nativeElement.getBoundingClientRect();
+        const toggleButtonRect = this.searchLinkElement()?.nativeElement.getBoundingClientRect();
+        if (!searchFormRect || !toggleButtonRect)
+            return;
+        const clientWidth = this.document.documentElement.clientWidth;
+        if (searchFormRect.width >= clientWidth - 1) {
+            const arrowOffset = toggleButtonRect.left - searchFormRect.left + toggleButtonRect.width / 2;
+            this.searchArrowPosition.set(`calc(${arrowOffset}px - ${ARROW_SIZE})`);
+        }
+        else {
+            this.searchArrowPosition.set(undefined);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclSiteHeaderSearchComponent, isStandalone: true, selector: "ecl-site-header-search", inputs: { searchInputText: { classPropertyName: "searchInputText", publicName: "searchInputText", isSignal: false, isRequired: false, transformFunction: null }, searchInputPlaceholder: { classPropertyName: "searchInputPlaceholder", publicName: "searchInputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchButtonLabel: { classPropertyName: "searchButtonLabel", publicName: "searchButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchEvent: "searchEvent", searchToggle: "searchToggle" }, host: { properties: { "class": "this.class", "attr.role": "this.role" } }, providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], viewQueries: [{ propertyName: "searchLinkElement", first: true, predicate: ["searchLink"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<a\n    #searchLink\n    href=\"#\"\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__search-toggle ecl-button--neutral\"\n    data-ecl-search-toggle=\"true\"\n    aria-controls=\"search-form-id\"\n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form\n    [style]=\"{'--ecl-search-arrow-position': searchArrowPosition}\"\n    (searchEvent)=\"onSearch($event)\"\n    [placeholder]=\"searchInputPlaceholder()\"\n    (ngModelChange)=\"onModelChange($event)\"\n    [(ngModel)]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel()\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.EclSearchFormComponent, selector: "ecl-search-form", inputs: ["searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon", "buttonExtraClassses", "inputExtraClassses"], outputs: ["searchInputTextChange", "searchEvent"] }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclSiteHeaderSearchComponent, isStandalone: true, selector: "ecl-site-header-search", inputs: { searchInputText: { classPropertyName: "searchInputText", publicName: "searchInputText", isSignal: false, isRequired: false, transformFunction: null }, searchInputPlaceholder: { classPropertyName: "searchInputPlaceholder", publicName: "searchInputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchButtonLabel: { classPropertyName: "searchButtonLabel", publicName: "searchButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchEvent: "searchEvent", searchToggle: "searchToggle" }, host: { attributes: { "role": "search" }, listeners: { "eclClickOutside": "onClickOutside()" }, classAttribute: "ecl-site-header__search-container" }, providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], viewQueries: [{ propertyName: "searchLinkElement", first: true, predicate: ["searchLink"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchFormElement", first: true, predicate: ["searchForm"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<a\n    #searchLink\n    href=\"#\"\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__search-toggle ecl-button--neutral\"\n    data-ecl-search-toggle=\"true\"\n    aria-controls=\"search-form-id\"\n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form\n    #searchForm\n    [style]=\"{'--ecl-search-arrow-position': searchArrowPosition()}\"\n    (searchEvent)=\"onSearch($event)\"\n    [placeholder]=\"searchInputPlaceholder()\"\n    (ngModelChange)=\"onModelChange($event)\"\n    [(ngModel)]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel()\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.EclSearchFormComponent, selector: "ecl-search-form", inputs: ["searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon", "buttonExtraClassses", "inputExtraClassses"], outputs: ["searchInputTextChange", "searchEvent"] }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclSiteHeaderSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header-search', imports: [FormsModule, TranslatePipe, ...EUI_ECL_SEARCH_FORM, ...EUI_ECL_ICON], 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 ecl-button--neutral\"\n    data-ecl-search-toggle=\"true\"\n    aria-controls=\"search-form-id\"\n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form\n    [style]=\"{'--ecl-search-arrow-position': searchArrowPosition}\"\n    (searchEvent)=\"onSearch($event)\"\n    [placeholder]=\"searchInputPlaceholder()\"\n    (ngModelChange)=\"onModelChange($event)\"\n    [(ngModel)]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel()\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], searchInputText: [{
+            args: [{ selector: 'ecl-site-header-search', imports: [FormsModule, TranslatePipe, ...EUI_ECL_SEARCH_FORM, ...EUI_ECL_ICON], providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], hostDirectives: [
+                        {
+                            directive: ECLClickOutsideDirective,
+                            outputs: ['eclClickOutside'],
+                        },
+                    ], host: {
+                        class: 'ecl-site-header__search-container',
+                        // The default role of the component is 'search', should not be changed.
+                        role: 'search',
+                        '(eclClickOutside)': 'onClickOutside()',
+                    }, template: "<a\n    #searchLink\n    href=\"#\"\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__search-toggle ecl-button--neutral\"\n    data-ecl-search-toggle=\"true\"\n    aria-controls=\"search-form-id\"\n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form\n    #searchForm\n    [style]=\"{'--ecl-search-arrow-position': searchArrowPosition()}\"\n    (searchEvent)=\"onSearch($event)\"\n    [placeholder]=\"searchInputPlaceholder()\"\n    (ngModelChange)=\"onModelChange($event)\"\n    [(ngModel)]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel()\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { searchInputText: [{
                 type: Input
-            }], searchInputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchInputPlaceholder", required: false }] }], searchButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchButtonLabel", required: false }] }], searchLinkElement: [{ type: i0.ViewChild, args: ['searchLink', { ...{ read: ElementRef }, isSignal: true }] }], searchEvent: [{ type: i0.Output, args: ["searchEvent"] }], searchToggle: [{
+            }], searchInputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchInputPlaceholder", required: false }] }], searchButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchButtonLabel", required: false }] }], searchEvent: [{ type: i0.Output, args: ["searchEvent"] }], searchToggle: [{
                 type: Output
-            }] } });
+            }], searchLinkElement: [{ type: i0.ViewChild, args: ['searchLink', { ...{ read: ElementRef }, isSignal: true }] }], searchFormElement: [{ type: i0.ViewChild, args: ['searchForm', { ...{ read: ElementRef }, isSignal: true }] }] } });
+
+/**
+ * This class is used for methods, that serve for communication between the components in ecl-side-header.
+ */
+class EclAreaDataService {
+    constructor() {
+        this.dataSubject = new Subject();
+        this.dataSubject$ = this.dataSubject.asObservable();
+    }
+    /**
+     * When header is resized, some of it's chidren parameters for positioning on the screen need to be recalculated.
+     * This event publishes the new site header position, so that the chidren can adjust their position accordingly.
+     * @param event
+     */
+    publishEvent(event) {
+        this.dataSubject.next(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclAreaDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclAreaDataService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclAreaDataService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
 
 /**
  * The Site header offers easily recognisable elements (such as the logo) and the most essential functionality of