@eui/ecl 19.0.0-next.13 → 19.0.0-next.14

package/docs/modules/EclMegaMenuModule.html

@@ -150,15 +150,6 @@
                         </li>
                     </ul>
                 </div>
-                <div class="col-sm-3">
-                    <h3>Providers<a href="https://angular.io/api/core/NgModule#providers" target="_blank" rel="noopener noreferrer"
-                            title="Official documentation about module providers"><span class="icon ion-ios-information-circle-outline"></a></h3>
-                    <ul class="list-group">
-                        <li class="list-group-item">
-                            <a href="../injectables/EclExpandableItemSetDataService.html">EclExpandableItemSetDataService</a>
-                        </li>
-                    </ul>
-                </div>
                 <div class="col-sm-3">
                     <h3>Imports<a href="https://angular.io/api/core/NgModule#imports" target="_blank" rel="noopener noreferrer"
                             title="Official documentation about module imports"><span

package/docs/modules/EclMenuModule.html

@@ -150,15 +150,6 @@
                         </li>
                     </ul>
                 </div>
-                <div class="col-sm-3">
-                    <h3>Providers<a href="https://angular.io/api/core/NgModule#providers" target="_blank" rel="noopener noreferrer"
-                            title="Official documentation about module providers"><span class="icon ion-ios-information-circle-outline"></a></h3>
-                    <ul class="list-group">
-                        <li class="list-group-item">
-                            <a href="../injectables/EclExpandableItemSetDataService.html">EclExpandableItemSetDataService</a>
-                        </li>
-                    </ul>
-                </div>
                 <div class="col-sm-3">
                     <h3>Imports<a href="https://angular.io/api/core/NgModule#imports" target="_blank" rel="noopener noreferrer"
                             title="Official documentation about module imports"><span

package/docs/modules/EclSiteHeaderModule.html

@@ -157,9 +157,6 @@
                         <li class="list-group-item">
                             <a href="../injectables/EclAreaDataService.html">EclAreaDataService</a>
                         </li>
-                        <li class="list-group-item">
-                            <a href="../injectables/EclExpandableItemSetDataService.html">EclExpandableItemSetDataService</a>
-                        </li>
                     </ul>
                 </div>
                 <div class="col-sm-3">

package/fesm2022/eui-ecl-components-ecl-mega-menu.mjs

@@ -6,17 +6,18 @@ import * as i0 from '@angular/core';
 import { Directive, HostBinding, Component, Input, ContentChildren, forwardRef, Injectable, EventEmitter, afterNextRender, booleanAttribute, ViewChild, ContentChild, Output, HostListener, NgModule } from '@angular/core';
 import * as i7 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i6$1 from '@ngx-translate/core';
+import * as i7$1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i2 from '@eui/ecl/core';
-import { ECLBaseDirective, KeyCode, EclExpandableItemSetDataService } from '@eui/ecl/core';
-import * as i4 from '@eui/ecl/components/ecl-button';
+import * as i3 from '@eui/ecl/components/ecl-button';
 import { EclButtonModule } from '@eui/ecl/components/ecl-button';
-import * as i5 from '@eui/ecl/components/ecl-icon';
+import * as i4 from '@eui/ecl/components/ecl-icon';
 import { EclIconModule } from '@eui/ecl/components/ecl-icon';
-import * as i5$1 from '@eui/ecl/components/ecl-link';
+import * as i5 from '@eui/ecl/components/ecl-link';
 import { EclLinkDirective, EclLinkModule } from '@eui/ecl/components/ecl-link';
+import * as i2 from '@eui/ecl/core';
+import { ECLBaseDirective, KeyCode } from '@eui/ecl/core';
 import { Subject, takeUntil } from 'rxjs';
+import * as i3$1 from '@eui/ecl/shared';
 
 class EclMegaMenuContainerDirective extends ECLBaseDirective {
     constructor() {
@@ -320,7 +321,7 @@ class EclMegaMenuSubitemComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EclMegaMenuSubitemComponent, deps: [{ token: i1.BreakpointObserver }, { token: EclMegaMenuDataService }, { token: i0.ElementRef }, { token: EclMegaMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: EclMegaMenuSubitemComponent, isStandalone: false, selector: "li[eclMegaMenuSubitem]", inputs: { buttonId: "buttonId", label: "label", isExternal: ["isExternal", "isExternal", booleanAttribute], externalIconTitle: "externalIconTitle", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isSeeAll: ["isSeeAll", "isSeeAll", booleanAttribute], linkExtraAttributes: "linkExtraAttributes" }, outputs: { megaMenuSubItemClicked: "megaMenuSubItemClicked", megaMenuSubItemKeydown: "megaMenuSubItemKeydown" }, host: { properties: { "attr.aria-expanded": "this.isExpanded", "class": "this.cssClasses", "style.display": "this.display" } }, queries: [{ propertyName: "submenu", first: true, predicate: i0.forwardRef(() => EclMegaMenuSublistDirective), descendants: true }, { propertyName: "eclMegaMenuFeatured", first: true, predicate: i0.forwardRef(() => EclMegaMenuFeaturedComponent), descendants: true }], viewQueries: [{ propertyName: "megaMenuLevel2", first: true, predicate: ["megaMenuLevel2"], descendants: true }, { propertyName: "subMenuItemLink", first: true, predicate: EclLinkDirective, descendants: true }, { propertyName: "subMenuItemBtn", first: true, predicate: ["subMenuItemBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (!isSeeAll) {\n@if (hasChildren) {\n<button eclButton #subMenuItemBtn variant=\"primary\" class=\"ecl-mega-menu__sublink\" [attr.aria-expanded]=\"isExpanded\"\n    (click)=\"onButtonClick()\" (keydown)=\"onKeydown($event)\" id=\"{{buttonId}}\">\n    <span eclButtonLabel>{{label}}</span>\n    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"2xs\"></ecl-icon>\n</button>\n} @else if (href) {\n<a eclLink variant=\"standalone\" [href]=\"href\" class=\"ecl-mega-menu__sublink\"\n    (keydown)=\"onKeydown($event)\" (click)=\"onLinkClick()\">\n    <span eclLinkLabel>{{label}}</span>\n    <ng-container *ngTemplateOutlet=\"eclIcon\"></ng-container>\n</a>\n} @else {\n<a eclLink variant=\"standalone\" [attr.tabindex]=\"tabindex || 0\" [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\" [queryParamsHandling]=\"queryParamsHandling\" class=\"ecl-mega-menu__sublink\"\n    (keydown)=\"onKeydown($event)\" (click)=\"onLinkClick()\">\n    <span eclLinkLabel>{{label}}</span>\n    <ng-container *ngTemplateOutlet=\"eclIcon\"></ng-container>\n</a>\n}\n\n@if (hasChildren) {\n<div class=\"ecl-mega-menu__mega ecl-mega-menu__mega--level-2\" #megaMenuLevel2\n    [style.height.px]=\"level2StyleHeight\">\n    <ng-content select=\"[eclMegaMenuSublist]\"></ng-content>\n    <ng-content select=\"[eclMegaMenuFeatured]\"></ng-content>\n</div>\n}\n} @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #eclIcon>\n    @if (isExternal) {\n        <ecl-icon icon=\"external\" size=\"2xs\" ariaHidden=\"false\" role=\"img\">\n            <title>Links to an external domain</title>\n        </ecl-icon>\n        }\n    <!-- <ng-content select=\"ecl-icon\"></ng-content> -->\n</ng-template>", dependencies: [{ kind: "component", type: i4.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i4.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i5.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i5$1.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: i5$1.EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: EclMegaMenuSubitemComponent, isStandalone: false, selector: "li[eclMegaMenuSubitem]", inputs: { buttonId: "buttonId", label: "label", isExternal: ["isExternal", "isExternal", booleanAttribute], externalIconTitle: "externalIconTitle", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isSeeAll: ["isSeeAll", "isSeeAll", booleanAttribute], linkExtraAttributes: "linkExtraAttributes" }, outputs: { megaMenuSubItemClicked: "megaMenuSubItemClicked", megaMenuSubItemKeydown: "megaMenuSubItemKeydown" }, host: { properties: { "attr.aria-expanded": "this.isExpanded", "class": "this.cssClasses", "style.display": "this.display" } }, queries: [{ propertyName: "submenu", first: true, predicate: i0.forwardRef(() => EclMegaMenuSublistDirective), descendants: true }, { propertyName: "eclMegaMenuFeatured", first: true, predicate: i0.forwardRef(() => EclMegaMenuFeaturedComponent), descendants: true }], viewQueries: [{ propertyName: "megaMenuLevel2", first: true, predicate: ["megaMenuLevel2"], descendants: true }, { propertyName: "subMenuItemLink", first: true, predicate: EclLinkDirective, descendants: true }, { propertyName: "subMenuItemBtn", first: true, predicate: ["subMenuItemBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (!isSeeAll) {\n@if (hasChildren) {\n<button eclButton #subMenuItemBtn variant=\"primary\" class=\"ecl-mega-menu__sublink\" [attr.aria-expanded]=\"isExpanded\"\n    (click)=\"onButtonClick()\" (keydown)=\"onKeydown($event)\" id=\"{{buttonId}}\">\n    <span eclButtonLabel>{{label}}</span>\n    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"2xs\"></ecl-icon>\n</button>\n} @else if (href) {\n<a eclLink variant=\"standalone\" [href]=\"href\" class=\"ecl-mega-menu__sublink\"\n    (keydown)=\"onKeydown($event)\" (click)=\"onLinkClick()\">\n    <span eclLinkLabel>{{label}}</span>\n    <ng-container *ngTemplateOutlet=\"eclIcon\"></ng-container>\n</a>\n} @else {\n<a eclLink variant=\"standalone\" [attr.tabindex]=\"tabindex || 0\" [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\" [queryParamsHandling]=\"queryParamsHandling\" class=\"ecl-mega-menu__sublink\"\n    (keydown)=\"onKeydown($event)\" (click)=\"onLinkClick()\">\n    <span eclLinkLabel>{{label}}</span>\n    <ng-container *ngTemplateOutlet=\"eclIcon\"></ng-container>\n</a>\n}\n\n@if (hasChildren) {\n<div class=\"ecl-mega-menu__mega ecl-mega-menu__mega--level-2\" #megaMenuLevel2\n    [style.height.px]=\"level2StyleHeight\">\n    <ng-content select=\"[eclMegaMenuSublist]\"></ng-content>\n    <ng-content select=\"[eclMegaMenuFeatured]\"></ng-content>\n</div>\n}\n} @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #eclIcon>\n    @if (isExternal) {\n        <ecl-icon icon=\"external\" size=\"2xs\" ariaHidden=\"false\" role=\"img\">\n            <title>Links to an external domain</title>\n        </ecl-icon>\n        }\n    <!-- <ng-content select=\"ecl-icon\"></ng-content> -->\n</ng-template>", dependencies: [{ kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i4.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i5.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: i5.EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EclMegaMenuSubitemComponent, decorators: [{
             type: Component,
@@ -605,12 +606,12 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
             .join(' ')
             .trim();
     }
-    constructor(cdkBreakpointObserver, el, eclMegaMenuDataService, expandableItemSetDataService, eclMegaMenuService, renderer) {
+    constructor(cdkBreakpointObserver, el, eclMegaMenuDataService, eclHeaderMenuComunicationService, eclMegaMenuService, renderer) {
         super();
         this.cdkBreakpointObserver = cdkBreakpointObserver;
         this.el = el;
         this.eclMegaMenuDataService = eclMegaMenuDataService;
-        this.expandableItemSetDataService = expandableItemSetDataService;
+        this.eclHeaderMenuComunicationService = eclHeaderMenuComunicationService;
         this.eclMegaMenuService = eclMegaMenuService;
         this.renderer = renderer;
         this.isExpanded = false;
@@ -679,7 +680,7 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
                 this.eclMegaMenuSublist.onParentMegaMenuItemClick(this.isExpanded);
             }
             if (this.isExpanded) {
-                this.expandableItemSetDataService.updateExpanded(this.isExpanded);
+                this.eclHeaderMenuComunicationService.updateExpanded(this.isExpanded);
                 this.hidePanels();
                 setTimeout(() => {
                     this.checkDropdownHeight();
@@ -687,12 +688,12 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
                 });
             }
             else {
-                this.expandableItemSetDataService.updateExpanded(this.isExpanded);
+                this.eclHeaderMenuComunicationService.updateExpanded(this.isExpanded);
                 this.enableScroll();
             }
         }
         else {
-            this.expandableItemSetDataService.updateExpanded(this.isExpanded);
+            this.eclHeaderMenuComunicationService.updateExpanded(this.isExpanded);
             this.enableScroll();
         }
         this.megaMenuItemClicked.emit();
@@ -850,13 +851,13 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
             this.resetWrapperStyle();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EclMegaMenuItemComponent, deps: [{ token: i1.BreakpointObserver }, { token: i0.ElementRef }, { token: EclMegaMenuDataService }, { token: i2.EclExpandableItemSetDataService }, { token: EclMegaMenuService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: EclMegaMenuItemComponent, isStandalone: false, selector: "li[eclMegaMenuItem]", inputs: { label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", linkExtraAttributes: "linkExtraAttributes" }, outputs: { megaMenuItemClicked: "megaMenuItemClicked", megaMenuItemKeydown: "megaMenuItemKeydown" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isExpanded", "attr.aria-haspopup": "this.hasPopup" } }, queries: [{ propertyName: "eclMegaMenuInfo", first: true, predicate: i0.forwardRef(() => EclMegaMenuInfoComponent), descendants: true }, { propertyName: "eclMegaMenuSublist", first: true, predicate: i0.forwardRef(() => EclMegaMenuSublistDirective), descendants: true }, { propertyName: "eclMegaMenuContainer", first: true, predicate: i0.forwardRef(() => EclMegaMenuContainerDirective), descendants: true }], viewQueries: [{ propertyName: "eclMegaMenuMega", first: true, predicate: ["eclMegaMenuMega"], descendants: true }, { propertyName: "mainPanel", first: true, predicate: ["mainPanel"], descendants: true }, { propertyName: "menuLink", first: true, predicate: EclLinkDirective, descendants: true }, { propertyName: "menuBtn", first: true, predicate: ["menuBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (hasChildren) {\n<button #menuBtn eclButton variant=\"primary\" class=\"ecl-mega-menu__link\" (click)=\"onMegaMenuItemClick()\"\n    (keydown)=\"onKeydown($event)\">\n    <span eclButtonLabel>{{label}}</span>\n    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"2xs\"></ecl-icon>\n    <ecl-icon icon=\"arrow-left\" transform=\"flip-horizontal\" size=\"s\"></ecl-icon>\n</button>\n} @else if (href) {\n<a eclLink #menuLink variant=\"standalone\" [href]=\"href\" [target]=\"target\" class=\"ecl-mega-menu__link\"\n    (keydown)=\"onKeydown($event)\" (click)=\"onMegaMenuItemClick()\">\n    <span eclLinkLabel>{{label}}</span>\n</a>\n} @else {\n<a eclLink #menuLink variant=\"standalone\" [attr.tabindex]=\"tabindex || 0\" [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\" [queryParamsHandling]=\"queryParamsHandling\" class=\"ecl-mega-menu__link\"\n    (keydown)=\"onKeydown($event)\" (click)=\"onMegaMenuItemClick()\">\n    <span eclLinkLabel>{{label}}</span>\n</a>\n}\n\n@if (hasSublist) {\n<div class=\"ecl-mega-menu__wrapper\" [style.height.px]=\"wrapperStyleHeight\" [style.top.px]=\"wrapperStyleTop\">\n    <div class=\"ecl-container\">\n        <ng-content select=\"[eclMegaMenuInfo]\"></ng-content>\n        <div #eclMegaMenuMega class=\"ecl-mega-menu__mega\" [style.height.px]=\"megaMenuMegaStyleHeight\" [style.opacity]=\"megaMenuMegaStyleOpacity\">\n            <ng-content select=\"[eclMegaMenuSublist]\"></ng-content>\n        </div>\n    </div>\n</div>\n}\n\n@if (hasContainer) {\n<div #mainPanel class=\"ecl-mega-menu__mega ecl-mega-menu__mega-container\">\n    <div class=\"ecl-container\" [style.height.px]=\"containerStyleHeight\">\n        <div class=\"ecl-mega-menu__mega-container-scrollable\">\n            <ng-content select=\"[eclMegaMenuContainer]\"></ng-content>\n        </div>\n    </div>\n</div>\n}", dependencies: [{ kind: "component", type: i4.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i4.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i5.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i5$1.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: i5$1.EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EclMegaMenuItemComponent, deps: [{ token: i1.BreakpointObserver }, { token: i0.ElementRef }, { token: EclMegaMenuDataService }, { token: i3$1.EclHeaderMenuComunicationService }, { token: EclMegaMenuService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: EclMegaMenuItemComponent, isStandalone: false, selector: "li[eclMegaMenuItem]", inputs: { label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", linkExtraAttributes: "linkExtraAttributes" }, outputs: { megaMenuItemClicked: "megaMenuItemClicked", megaMenuItemKeydown: "megaMenuItemKeydown" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isExpanded", "attr.aria-haspopup": "this.hasPopup" } }, queries: [{ propertyName: "eclMegaMenuInfo", first: true, predicate: i0.forwardRef(() => EclMegaMenuInfoComponent), descendants: true }, { propertyName: "eclMegaMenuSublist", first: true, predicate: i0.forwardRef(() => EclMegaMenuSublistDirective), descendants: true }, { propertyName: "eclMegaMenuContainer", first: true, predicate: i0.forwardRef(() => EclMegaMenuContainerDirective), descendants: true }], viewQueries: [{ propertyName: "eclMegaMenuMega", first: true, predicate: ["eclMegaMenuMega"], descendants: true }, { propertyName: "mainPanel", first: true, predicate: ["mainPanel"], descendants: true }, { propertyName: "menuLink", first: true, predicate: EclLinkDirective, descendants: true }, { propertyName: "menuBtn", first: true, predicate: ["menuBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (hasChildren) {\n<button #menuBtn eclButton variant=\"primary\" class=\"ecl-mega-menu__link\" (click)=\"onMegaMenuItemClick()\"\n    (keydown)=\"onKeydown($event)\">\n    <span eclButtonLabel>{{label}}</span>\n    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"2xs\"></ecl-icon>\n    <ecl-icon icon=\"arrow-left\" transform=\"flip-horizontal\" size=\"s\"></ecl-icon>\n</button>\n} @else if (href) {\n<a eclLink #menuLink variant=\"standalone\" [href]=\"href\" [target]=\"target\" class=\"ecl-mega-menu__link\"\n    (keydown)=\"onKeydown($event)\" (click)=\"onMegaMenuItemClick()\">\n    <span eclLinkLabel>{{label}}</span>\n</a>\n} @else {\n<a eclLink #menuLink variant=\"standalone\" [attr.tabindex]=\"tabindex || 0\" [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\" [queryParamsHandling]=\"queryParamsHandling\" class=\"ecl-mega-menu__link\"\n    (keydown)=\"onKeydown($event)\" (click)=\"onMegaMenuItemClick()\">\n    <span eclLinkLabel>{{label}}</span>\n</a>\n}\n\n@if (hasSublist) {\n<div class=\"ecl-mega-menu__wrapper\" [style.height.px]=\"wrapperStyleHeight\" [style.top.px]=\"wrapperStyleTop\">\n    <div class=\"ecl-container\">\n        <ng-content select=\"[eclMegaMenuInfo]\"></ng-content>\n        <div #eclMegaMenuMega class=\"ecl-mega-menu__mega\" [style.height.px]=\"megaMenuMegaStyleHeight\" [style.opacity]=\"megaMenuMegaStyleOpacity\">\n            <ng-content select=\"[eclMegaMenuSublist]\"></ng-content>\n        </div>\n    </div>\n</div>\n}\n\n@if (hasContainer) {\n<div #mainPanel class=\"ecl-mega-menu__mega ecl-mega-menu__mega-container\">\n    <div class=\"ecl-container\" [style.height.px]=\"containerStyleHeight\">\n        <div class=\"ecl-mega-menu__mega-container-scrollable\">\n            <ng-content select=\"[eclMegaMenuContainer]\"></ng-content>\n        </div>\n    </div>\n</div>\n}", dependencies: [{ kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i4.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i5.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: i5.EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EclMegaMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'li[eclMegaMenuItem]', standalone: false, template: "@if (hasChildren) {\n<button #menuBtn eclButton variant=\"primary\" class=\"ecl-mega-menu__link\" (click)=\"onMegaMenuItemClick()\"\n    (keydown)=\"onKeydown($event)\">\n    <span eclButtonLabel>{{label}}</span>\n    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"2xs\"></ecl-icon>\n    <ecl-icon icon=\"arrow-left\" transform=\"flip-horizontal\" size=\"s\"></ecl-icon>\n</button>\n} @else if (href) {\n<a eclLink #menuLink variant=\"standalone\" [href]=\"href\" [target]=\"target\" class=\"ecl-mega-menu__link\"\n    (keydown)=\"onKeydown($event)\" (click)=\"onMegaMenuItemClick()\">\n    <span eclLinkLabel>{{label}}</span>\n</a>\n} @else {\n<a eclLink #menuLink variant=\"standalone\" [attr.tabindex]=\"tabindex || 0\" [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\" [queryParamsHandling]=\"queryParamsHandling\" class=\"ecl-mega-menu__link\"\n    (keydown)=\"onKeydown($event)\" (click)=\"onMegaMenuItemClick()\">\n    <span eclLinkLabel>{{label}}</span>\n</a>\n}\n\n@if (hasSublist) {\n<div class=\"ecl-mega-menu__wrapper\" [style.height.px]=\"wrapperStyleHeight\" [style.top.px]=\"wrapperStyleTop\">\n    <div class=\"ecl-container\">\n        <ng-content select=\"[eclMegaMenuInfo]\"></ng-content>\n        <div #eclMegaMenuMega class=\"ecl-mega-menu__mega\" [style.height.px]=\"megaMenuMegaStyleHeight\" [style.opacity]=\"megaMenuMegaStyleOpacity\">\n            <ng-content select=\"[eclMegaMenuSublist]\"></ng-content>\n        </div>\n    </div>\n</div>\n}\n\n@if (hasContainer) {\n<div #mainPanel class=\"ecl-mega-menu__mega ecl-mega-menu__mega-container\">\n    <div class=\"ecl-container\" [style.height.px]=\"containerStyleHeight\">\n        <div class=\"ecl-mega-menu__mega-container-scrollable\">\n            <ng-content select=\"[eclMegaMenuContainer]\"></ng-content>\n        </div>\n    </div>\n</div>\n}" }]
-        }], ctorParameters: () => [{ type: i1.BreakpointObserver }, { type: i0.ElementRef }, { type: EclMegaMenuDataService }, { type: i2.EclExpandableItemSetDataService }, { type: EclMegaMenuService }, { type: i0.Renderer2 }], propDecorators: { cssClasses: [{
+        }], ctorParameters: () => [{ type: i1.BreakpointObserver }, { type: i0.ElementRef }, { type: EclMegaMenuDataService }, { type: i3$1.EclHeaderMenuComunicationService }, { type: EclMegaMenuService }, { type: i0.Renderer2 }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], isExpanded: [{
@@ -920,15 +921,13 @@ class EclMegaMenuComponent extends ECLBaseDirective {
             this.isStartPanel ? 'ecl-mega-menu--start-panel' : '',
         ].join(' ');
     }
-    constructor(differs, cdkBreakpointObserver, eclRtlService, eclUserDeviceService, 
-    // private eclSiteHeaderAreaDataService: EclExpandableItemSetDataService,
-    eclExpandableItemSetDataService, eclMegaMenuDataService, el, renderer) {
+    constructor(differs, cdkBreakpointObserver, eclRtlService, eclUserDeviceService, eclHeaderMenuComunicationService, eclMegaMenuDataService, el, renderer) {
         super();
         this.differs = differs;
         this.cdkBreakpointObserver = cdkBreakpointObserver;
         this.eclRtlService = eclRtlService;
         this.eclUserDeviceService = eclUserDeviceService;
-        this.eclExpandableItemSetDataService = eclExpandableItemSetDataService;
+        this.eclHeaderMenuComunicationService = eclHeaderMenuComunicationService;
         this.eclMegaMenuDataService = eclMegaMenuDataService;
         this.el = el;
         this.renderer = renderer;
@@ -978,7 +977,7 @@ class EclMegaMenuComponent extends ECLBaseDirective {
                 this.isMobileExpanded = true;
             }
             this.isOpen = true;
-            this.eclExpandableItemSetDataService.updateOpen(true);
+            this.eclHeaderMenuComunicationService.updateOpen(true);
             // Focus first element
             if (this.menuItems.length > 0) {
                 this.menuItems.first.onFocus();
@@ -993,7 +992,7 @@ class EclMegaMenuComponent extends ECLBaseDirective {
             this.isMobileExpanded = false;
         }
         this.isOpen = false;
-        this.eclExpandableItemSetDataService.updateOpen(false);
+        this.eclHeaderMenuComunicationService.updateOpen(false);
     }
     onMegaMenuBack() {
         if (this.isOnePanel) {
@@ -1039,7 +1038,7 @@ class EclMegaMenuComponent extends ECLBaseDirective {
         const currentItem = this.menuItems.find(item => item.isExpanded);
         currentItem.isCurrent = false;
         currentItem.isExpanded = false;
-        this.eclExpandableItemSetDataService.updateExpanded(false);
+        this.eclHeaderMenuComunicationService.updateExpanded(false);
     }
     subscribeToEvents() {
         this.eclMegaMenuDataService.eclSubItemExpanded$.pipe(takeUntil(this.destroy$)).subscribe(isExpanded => {
@@ -1140,7 +1139,7 @@ class EclMegaMenuComponent extends ECLBaseDirective {
         this.isExpanded = false;
         this.isTwoPanels = false;
         this.isOnePanel = false;
-        this.eclExpandableItemSetDataService.updateExpanded(false);
+        this.eclHeaderMenuComunicationService.updateExpanded(false);
     }
     focusOnPrevSibling(index) {
         if (index > 0) {
@@ -1182,13 +1181,13 @@ class EclMegaMenuComponent extends ECLBaseDirective {
         this.renderer.removeClass(document.body, 'ecl-mega-menu-prevent-scroll');
         this.renderer.removeStyle(document.body, 'padding-right');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EclMegaMenuComponent, deps: [{ token: i0.IterableDiffers }, { token: i1.BreakpointObserver }, { token: i2.EclRtlService }, { token: i2.EclUserDeviceService }, { token: i2.EclExpandableItemSetDataService }, { token: EclMegaMenuDataService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: EclMegaMenuComponent, isStandalone: false, selector: "nav[eclMegaMenu]", outputs: { megaMenuItemSelect: "megaMenuItemSelect" }, host: { properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isExpanded", "attr.role": "this.role" } }, queries: [{ propertyName: "menuItems", predicate: i0.forwardRef(() => EclMegaMenuItemComponent), descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-mega-menu__overlay\" [style.top.px]=\"overlayStyleTop\"></div>\n<div class=\"ecl-container ecl-mega-menu__container\">\n    <button class=\"ecl-button ecl-button--tertiary ecl-mega-menu__open ecl-button--icon-only\"\n        type=\"button\" aria-expanded=\"isMobileExpanded\" (click)=\"onMegaMenuOpen()\">\n        <ecl-icon icon=\"hamburger\" size=\"m\"></ecl-icon>\n        <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        @if (isOpen) {\n            <span class=\"ecl-button__label\">{{ 'ecl.common.CLOSE' | translate }}</span>\n        } @else {\n            <span class=\"ecl-button__label\">{{ 'ecl.menu.MENU' | translate }}</span>\n        }\n    </button>\n    <section class=\"ecl-mega-menu__inner\" [class.ecl-mega-menu__inner--expanded]=\"!isStartPanel && isExpanded\"\n        aria-label=\"ecl mega menu\" [style.top.px]=\"innerStyleTop\">\n        <header class=\"ecl-mega-menu__inner-header\">\n            <button eclButton variant=\"ghost\" class=\"ecl-mega-menu__back\" type=\"submit\" (click)=\"onMegaMenuBack()\">\n                <ecl-icon icon=\"corner-arrow\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>Back</span>\n            </button>\n        </header>\n        <ng-content></ng-content>\n    </section>\n</div>", dependencies: [{ kind: "component", type: i4.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i4.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i5.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EclMegaMenuComponent, deps: [{ token: i0.IterableDiffers }, { token: i1.BreakpointObserver }, { token: i2.EclRtlService }, { token: i2.EclUserDeviceService }, { token: i3$1.EclHeaderMenuComunicationService }, { token: EclMegaMenuDataService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: EclMegaMenuComponent, isStandalone: false, selector: "nav[eclMegaMenu]", outputs: { megaMenuItemSelect: "megaMenuItemSelect" }, host: { properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isExpanded", "attr.role": "this.role" } }, queries: [{ propertyName: "menuItems", predicate: i0.forwardRef(() => EclMegaMenuItemComponent), descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-mega-menu__overlay\" [style.top.px]=\"overlayStyleTop\"></div>\n<div class=\"ecl-container ecl-mega-menu__container\">\n    <button class=\"ecl-button ecl-button--tertiary ecl-mega-menu__open ecl-button--icon-only\"\n        type=\"button\" aria-expanded=\"isMobileExpanded\" (click)=\"onMegaMenuOpen()\">\n        <ecl-icon icon=\"hamburger\" size=\"m\"></ecl-icon>\n        <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        @if (isOpen) {\n            <span class=\"ecl-button__label\">{{ 'ecl.common.CLOSE' | translate }}</span>\n        } @else {\n            <span class=\"ecl-button__label\">{{ 'ecl.menu.MENU' | translate }}</span>\n        }\n    </button>\n    <section class=\"ecl-mega-menu__inner\" [class.ecl-mega-menu__inner--expanded]=\"!isStartPanel && isExpanded\"\n        aria-label=\"ecl mega menu\" [style.top.px]=\"innerStyleTop\">\n        <header class=\"ecl-mega-menu__inner-header\">\n            <button eclButton variant=\"ghost\" class=\"ecl-mega-menu__back\" type=\"submit\" (click)=\"onMegaMenuBack()\">\n                <ecl-icon icon=\"corner-arrow\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>Back</span>\n            </button>\n        </header>\n        <ng-content></ng-content>\n    </section>\n</div>", dependencies: [{ kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i4.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i7$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EclMegaMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nav[eclMegaMenu]', standalone: false, template: "<div class=\"ecl-mega-menu__overlay\" [style.top.px]=\"overlayStyleTop\"></div>\n<div class=\"ecl-container ecl-mega-menu__container\">\n    <button class=\"ecl-button ecl-button--tertiary ecl-mega-menu__open ecl-button--icon-only\"\n        type=\"button\" aria-expanded=\"isMobileExpanded\" (click)=\"onMegaMenuOpen()\">\n        <ecl-icon icon=\"hamburger\" size=\"m\"></ecl-icon>\n        <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        @if (isOpen) {\n            <span class=\"ecl-button__label\">{{ 'ecl.common.CLOSE' | translate }}</span>\n        } @else {\n            <span class=\"ecl-button__label\">{{ 'ecl.menu.MENU' | translate }}</span>\n        }\n    </button>\n    <section class=\"ecl-mega-menu__inner\" [class.ecl-mega-menu__inner--expanded]=\"!isStartPanel && isExpanded\"\n        aria-label=\"ecl mega menu\" [style.top.px]=\"innerStyleTop\">\n        <header class=\"ecl-mega-menu__inner-header\">\n            <button eclButton variant=\"ghost\" class=\"ecl-mega-menu__back\" type=\"submit\" (click)=\"onMegaMenuBack()\">\n                <ecl-icon icon=\"corner-arrow\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>Back</span>\n            </button>\n        </header>\n        <ng-content></ng-content>\n    </section>\n</div>" }]
-        }], ctorParameters: () => [{ type: i0.IterableDiffers }, { type: i1.BreakpointObserver }, { type: i2.EclRtlService }, { type: i2.EclUserDeviceService }, { type: i2.EclExpandableItemSetDataService }, { type: EclMegaMenuDataService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { cssClasses: [{
+        }], ctorParameters: () => [{ type: i0.IterableDiffers }, { type: i1.BreakpointObserver }, { type: i2.EclRtlService }, { type: i2.EclUserDeviceService }, { type: i3$1.EclHeaderMenuComunicationService }, { type: EclMegaMenuDataService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], isExpanded: [{
@@ -1252,7 +1251,7 @@ class EclMegaMenuModule {
             EclMegaMenuSublistDirective,
             EclMegaMenuContainerDirective,
             EclMegaMenuSpacerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EclMegaMenuModule, providers: [EclExpandableItemSetDataService], imports: [EclButtonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EclMegaMenuModule, imports: [EclButtonModule,
             EclIconModule,
             EclLinkModule,
             CommonModule,
@@ -1274,7 +1273,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                     ],
                     exports: [...COMPONENTS],
                     declarations: [...COMPONENTS],
-                    providers: [EclExpandableItemSetDataService],
                 }]
         }] });