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

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

@@ -0,0 +1,1286 @@
+import * as i1 from '@angular/cdk/layout';
+import { Breakpoints, LayoutModule } from '@angular/cdk/layout';
+import * as i6 from '@angular/common';
+import { CommonModule } from '@angular/common';
+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 { 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 { EclButtonComponentModule } from '@eui/ecl/components/ecl-button';
+import * as i5 from '@eui/ecl/components/ecl-icon';
+import { EclIconComponentModule } from '@eui/ecl/components/ecl-icon';
+import * as i5$1 from '@eui/ecl/components/ecl-link';
+import { EclLinkDirective, EclLinkDirectiveModule } from '@eui/ecl/components/ecl-link';
+import { Subject, takeUntil } from 'rxjs';
+
+class EclMegaMenuContainerDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.hasClass = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuContainerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclMegaMenuContainerDirective, isStandalone: false, selector: "div[eclMegaMenuContainer]", host: { properties: { "class.ecl": "this.hasClass" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'div[eclMegaMenuContainer]',
+                    standalone: false,
+                }]
+        }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.ecl']
+            }] } });
+
+class EclMegaMenuFeaturedListDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.cmpClass = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuFeaturedListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclMegaMenuFeaturedListDirective, isStandalone: false, selector: "[eclMegaMenuFeaturedList]", host: { properties: { "class.ecl-mega-menu__featured-list": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuFeaturedListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclMegaMenuFeaturedList]',
+                    standalone: false,
+                }]
+        }], propDecorators: { cmpClass: [{
+                type: HostBinding,
+                args: ['class.ecl-mega-menu__featured-list']
+            }] } });
+class EclMegaMenuFeaturedListItemDirective extends ECLBaseDirective {
+    constructor(el) {
+        super();
+        this.el = el;
+        this.cmpClass = true;
+    }
+    getEclMegaMenuFeaturedItemHeight() {
+        return this.el.nativeElement.scrollHeight;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuFeaturedListItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclMegaMenuFeaturedListItemDirective, isStandalone: false, selector: "[eclMegaMenuFeaturedListItem]", host: { properties: { "class.ecl-mega-menu__featured-list__item": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuFeaturedListItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclMegaMenuFeaturedListItem]',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { cmpClass: [{
+                type: HostBinding,
+                args: ['class.ecl-mega-menu__featured-list__item']
+            }] } });
+
+class EclMegaMenuFeaturedPictureDirective extends ECLBaseDirective {
+    get cssClasses() {
+        return [super.getCssClasses('ecl-picture ecl-mega-menu__featured-picture')].join(' ').trim();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuFeaturedPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclMegaMenuFeaturedPictureDirective, isStandalone: false, selector: "[eclMegaMenuFeaturedPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuFeaturedPictureDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclMegaMenuFeaturedPicture]',
+                    standalone: false,
+                }]
+        }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+class EclMegaMenuFeaturedImageDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.cmpClass = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuFeaturedImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclMegaMenuFeaturedImageDirective, isStandalone: false, selector: "[eclMegaMenuFeaturedImage]", host: { properties: { "class.ecl-mega-menu__featured-image": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuFeaturedImageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclMegaMenuFeaturedImage]',
+                    standalone: false,
+                }]
+        }], propDecorators: { cmpClass: [{
+                type: HostBinding,
+                args: ['class.ecl-mega-menu__featured-image']
+            }] } });
+
+class EclMegaMenuFeaturedComponent extends ECLBaseDirective {
+    constructor(el) {
+        super();
+        this.el = el;
+        this.cmpClass = true;
+        this.eclMegaMenuFeaturedStyleHeight = null;
+    }
+    getEclMegaMenuFeaturedHeight() {
+        let result = 0;
+        this.listItems.forEach(it => result += it.getEclMegaMenuFeaturedItemHeight());
+        return result;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuFeaturedComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.1", type: EclMegaMenuFeaturedComponent, isStandalone: false, selector: "div[eclMegaMenuFeatured]", inputs: { title: "title", titleId: "titleId" }, host: { properties: { "class.ecl-mega-menu__featured": "this.cmpClass", "style.height.px": "this.eclMegaMenuFeaturedStyleHeight" } }, queries: [{ propertyName: "listItems", predicate: i0.forwardRef(() => EclMegaMenuFeaturedListItemDirective), descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-mega-menu__featured-scrollable\">\n    <ng-content select=\"[eclMegaMenuFeaturedPicture]\"></ng-content>\n    @if(title) {\n    <span class=\"ecl-mega-menu__featured-title\" id=\"{{titleId}}\">{{ title }}</span>\n    }\n    <ng-content select=\"[eclMegaMenuFeaturedList]\"></ng-content>\n</div>" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuFeaturedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[eclMegaMenuFeatured]', standalone: false, template: "<div class=\"ecl-mega-menu__featured-scrollable\">\n    <ng-content select=\"[eclMegaMenuFeaturedPicture]\"></ng-content>\n    @if(title) {\n    <span class=\"ecl-mega-menu__featured-title\" id=\"{{titleId}}\">{{ title }}</span>\n    }\n    <ng-content select=\"[eclMegaMenuFeaturedList]\"></ng-content>\n</div>" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { cmpClass: [{
+                type: HostBinding,
+                args: ['class.ecl-mega-menu__featured']
+            }], eclMegaMenuFeaturedStyleHeight: [{
+                type: HostBinding,
+                args: ['style.height.px']
+            }], title: [{
+                type: Input
+            }], titleId: [{
+                type: Input
+            }], listItems: [{
+                type: ContentChildren,
+                args: [forwardRef(() => EclMegaMenuFeaturedListItemDirective), { descendants: true }]
+            }] } });
+
+class EclMegaMenuDataService {
+    constructor() {
+        this.eclMegaMenuInfoBottomYSubject = new Subject();
+        this.eclSubItemExpanded = new Subject();
+        this.eclSubItemClicked = new Subject();
+        this.eclSubItemEscape = new Subject();
+        this.eclMegaMenuInfoBottomYSubject$ = this.eclMegaMenuInfoBottomYSubject.asObservable();
+        this.eclSubItemExpanded$ = this.eclSubItemExpanded.asObservable();
+        this.eclSubItemClicked$ = this.eclSubItemClicked.asObservable();
+        this.eclSubItemEscape$ = this.eclSubItemEscape.asObservable();
+    }
+    updateEclMegaMenuInfoSize(value) {
+        this.eclMegaMenuInfoBottomYSubject.next(value);
+    }
+    eclSubItemToggle(isExpanded) {
+        this.eclSubItemExpanded.next(isExpanded);
+    }
+    eclSubItemClick(item) {
+        this.eclSubItemClicked.next(item);
+    }
+    eclSubItemEscapeEvent(value) {
+        this.eclSubItemEscape.next(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuDataService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuDataService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class EclMegaMenuService {
+    constructor(rendererFactory) {
+        this.renderer = rendererFactory.createRenderer(null, null);
+    }
+    setExtraAttributesForLink(link, linkExtraAttributes) {
+        if (linkExtraAttributes) {
+            Object.keys(linkExtraAttributes).forEach((key) => {
+                if (key !== 'href' && key !== 'routerLink') {
+                    this.renderer.setAttribute(link, key, linkExtraAttributes[key]);
+                }
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
+
+class EclMegaMenuSubitemComponent extends ECLBaseDirective {
+    get cssClasses() {
+        return [
+            super.getCssClasses('ecl-mega-menu__subitem'),
+            this.isCurrent ? 'ecl-mega-menu__subitem--current' : '',
+            this.isExpanded ? 'ecl-mega-menu__subitem--expanded' : '',
+            this.isSeeAll ? 'ecl-mega-menu__see-all' : '',
+            this.isParentLink ? 'ecl-mega-menu__parent-link' : '',
+        ]
+            .join(' ')
+            .trim();
+    }
+    constructor(cdkBreakpointObserver, eclMegaMenuDataService, el, eclMegaMenuService) {
+        super();
+        this.cdkBreakpointObserver = cdkBreakpointObserver;
+        this.eclMegaMenuDataService = eclMegaMenuDataService;
+        this.el = el;
+        this.eclMegaMenuService = eclMegaMenuService;
+        this.isExpanded = false;
+        this.label = '';
+        this.isExternal = false;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.routerLink = null;
+        this.queryParams = null;
+        this.queryParamsHandling = null;
+        this.href = '';
+        this.target = '';
+        this.isSeeAll = false;
+        this.megaMenuSubItemClicked = new EventEmitter();
+        this.megaMenuSubItemKeydown = new EventEmitter();
+        this.isCurrent = false;
+        this.isMobileBreakpoint = false;
+        this.level2StyleHeight = null;
+        this.destroy$ = new Subject();
+        this.isParentLink = false;
+        this.display = '';
+        afterNextRender(() => {
+            if (this.subMenuItemLink) {
+                eclMegaMenuService.setExtraAttributesForLink(this.subMenuItemLink.el.nativeElement, this.linkExtraAttributes);
+            }
+            this.observeBreakpointChanges();
+        });
+    }
+    get hasChildren() {
+        return !!this.submenu;
+    }
+    onFocus() {
+        if (this.subMenuItemLink) {
+            this.subMenuItemLink.onFocus();
+        }
+        else if (this.subMenuItemBtn) {
+            this.subMenuItemBtn.onFocus();
+        }
+    }
+    onHide() {
+        this.display = 'none';
+    }
+    onShow() {
+        this.display = '';
+    }
+    getMegaMenuSubItemHeight() {
+        return this.el.nativeElement.getBoundingClientRect().height;
+    }
+    onButtonClick() {
+        this.isCurrent = !this.isCurrent;
+        this.isExpanded = !this.isExpanded;
+        this.eclMegaMenuDataService.eclSubItemToggle(this.isExpanded);
+        this.eclMegaMenuDataService.eclSubItemClick(this);
+        if (this.isMobileBreakpoint) {
+            this.isParentLink = true;
+            setTimeout(() => this.calculateLevel2Styles());
+        }
+        this.megaMenuSubItemClicked.emit();
+    }
+    onLinkClick() {
+        this.eclMegaMenuDataService.eclSubItemClick(this);
+        this.megaMenuSubItemClicked.emit();
+    }
+    onKeydown(evt) {
+        if (evt instanceof KeyboardEvent) {
+            if (!(evt.key === KeyCode.TAB)) {
+                if (evt.key === KeyCode.ESCAPE) {
+                    this.eclMegaMenuDataService.eclSubItemEscapeEvent(true);
+                }
+                else {
+                    this.megaMenuSubItemKeydown.emit(evt);
+                }
+            }
+        }
+    }
+    onSubMenuItemCollapse() {
+        if (this.isExpanded) {
+            this.eclMegaMenuDataService.eclSubItemToggle(false);
+            this.isCurrent = false;
+            this.isExpanded = false;
+            this.isParentLink = false;
+        }
+    }
+    onSubMenuItemExpand() {
+        this.isCurrent = true;
+        this.isExpanded = true;
+        this.eclMegaMenuDataService.eclSubItemToggle(this.isExpanded);
+    }
+    calculateLevel2Styles() {
+        if (this.megaMenuLevel2) {
+            const subMegaRect = this.megaMenuLevel2.nativeElement.getBoundingClientRect();
+            const subMegaTop = subMegaRect.top;
+            const availableHeight = window.innerHeight - subMegaTop;
+            this.level2StyleHeight = availableHeight;
+        }
+    }
+    observeBreakpointChanges() {
+        this.cdkBreakpointObserver
+            .observe([Breakpoints.Handset, Breakpoints.Tablet, Breakpoints.Small])
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((result) => {
+            this.isMobileBreakpoint = result.matches;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", 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-rc.1", 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuSubitemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'li[eclMegaMenuSubitem]', standalone: false, 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>" }]
+        }], ctorParameters: () => [{ type: i1.BreakpointObserver }, { type: EclMegaMenuDataService }, { type: i0.ElementRef }, { type: EclMegaMenuService }], propDecorators: { isExpanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], buttonId: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], isExternal: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], externalIconTitle: [{
+                type: Input
+            }], routerLink: [{
+                type: Input
+            }], queryParams: [{
+                type: Input
+            }], queryParamsHandling: [{
+                type: Input
+            }], href: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], isSeeAll: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], linkExtraAttributes: [{
+                type: Input
+            }], megaMenuLevel2: [{
+                type: ViewChild,
+                args: ['megaMenuLevel2']
+            }], subMenuItemLink: [{
+                type: ViewChild,
+                args: [EclLinkDirective]
+            }], subMenuItemBtn: [{
+                type: ViewChild,
+                args: ['subMenuItemBtn']
+            }], submenu: [{
+                type: ContentChild,
+                args: [forwardRef(() => EclMegaMenuSublistDirective)]
+            }], eclMegaMenuFeatured: [{
+                type: ContentChild,
+                args: [forwardRef(() => EclMegaMenuFeaturedComponent)]
+            }], megaMenuSubItemClicked: [{
+                type: Output
+            }], megaMenuSubItemKeydown: [{
+                type: Output
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }] } });
+
+class EclMegaMenuListDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.cmpClass = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclMegaMenuListDirective, isStandalone: false, selector: "ul[eclMegaMenuList]", host: { properties: { "class.ecl-mega-menu__list": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ul[eclMegaMenuList]',
+                    standalone: false,
+                }]
+        }], propDecorators: { cmpClass: [{
+                type: HostBinding,
+                args: ['class.ecl-mega-menu__list']
+            }] } });
+class EclMegaMenuSpacerDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.cmpClass = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuSpacerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclMegaMenuSpacerDirective, isStandalone: false, selector: "ul[eclMegaMenuSpacer]", host: { properties: { "class.ecl-mega-menu__spacer": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuSpacerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ul[eclMegaMenuSpacer]',
+                    standalone: false,
+                }]
+        }], propDecorators: { cmpClass: [{
+                type: HostBinding,
+                args: ['class.ecl-mega-menu__spacer']
+            }] } });
+class EclMegaMenuSublistDirective extends ECLBaseDirective {
+    constructor(el, cdkBreakpointObserver, differs) {
+        super();
+        this.el = el;
+        this.cdkBreakpointObserver = cdkBreakpointObserver;
+        this.differs = differs;
+        this.cmpClass = true;
+        this.isScrollable = false;
+        this.styleTop = null;
+        this.destroy$ = new Subject();
+        this.isMobileBreakpoint = false;
+        this.differ = this.differs.find([]).create();
+        afterNextRender(() => {
+            this.observeBreakpointChanges();
+        });
+    }
+    ngDoCheck() {
+        const diff = this.differ.diff(this.submenuItems);
+        if (diff) {
+            diff.forEachItem((item) => {
+                this.connectMegaMenuItemEvents(item.item);
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    onParentMegaMenuItemClick(isExpanded) {
+        if (isExpanded) {
+            if (!this.isMobileBreakpoint) {
+                const itemWithChildren = this.submenuItems.find(item => item.hasChildren);
+                itemWithChildren?.onSubMenuItemExpand();
+            }
+        }
+        else {
+            this.submenuItems.forEach(item => {
+                if (item.isExpanded) {
+                    item.onSubMenuItemCollapse();
+                }
+            });
+        }
+    }
+    connectMegaMenuItemEvents(item) {
+        item.megaMenuSubItemClicked.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.onMegaMenuSubItemClicked(item);
+        });
+        item.megaMenuSubItemKeydown.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            this.onMegaMenuSubItemKeydown(item, evt);
+        });
+    }
+    onMegaMenuSubItemClicked(item) {
+        this.submenuItems.filter(subItem => subItem !== item).forEach(el => {
+            el.onSubMenuItemCollapse();
+            if (this.isMobileBreakpoint && item.hasChildren) {
+                el.onHide();
+            }
+        });
+    }
+    onMegaMenuSubItemKeydown(item, evt) {
+        const itemIndex = this.submenuItems.toArray().findIndex(elem => elem === item);
+        switch (evt.key) {
+            case KeyCode.ARROW_DOWN: {
+                evt.preventDefault();
+                this.focusOnNextSibling(itemIndex);
+                break;
+            }
+            case KeyCode.ARROW_UP: {
+                evt.preventDefault();
+                this.focusOnPrevSibling(itemIndex);
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    }
+    focusOnPrevSibling(index) {
+        if (index > 0) {
+            this.submenuItems.get(index - 1).onFocus();
+        }
+    }
+    focusOnNextSibling(index) {
+        if (index < this.submenuItems.length - 1) {
+            this.submenuItems.get(index + 1).onFocus();
+        }
+    }
+    resetStyles() {
+        if (this.isMobileBreakpoint) {
+            this.isScrollable = true;
+        }
+        else {
+            this.isScrollable = false;
+        }
+    }
+    observeBreakpointChanges() {
+        this.cdkBreakpointObserver
+            .observe(['(max-width: 996px)'])
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((result) => {
+            this.isMobileBreakpoint = result.matches;
+            setTimeout(() => this.resetStyles());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuSublistDirective, deps: [{ token: i0.ElementRef }, { token: i1.BreakpointObserver }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclMegaMenuSublistDirective, isStandalone: false, selector: "ul[eclMegaMenuSublist]", host: { properties: { "class.ecl-mega-menu__sublist": "this.cmpClass", "class.ecl-mega-menu__sublist--scrollable": "this.isScrollable", "style.top.px": "this.styleTop" } }, queries: [{ propertyName: "submenuItems", predicate: i0.forwardRef(() => EclMegaMenuSubitemComponent) }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuSublistDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ul[eclMegaMenuSublist]',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.BreakpointObserver }, { type: i0.IterableDiffers }], propDecorators: { cmpClass: [{
+                type: HostBinding,
+                args: ['class.ecl-mega-menu__sublist']
+            }], isScrollable: [{
+                type: HostBinding,
+                args: ['class.ecl-mega-menu__sublist--scrollable']
+            }], styleTop: [{
+                type: HostBinding,
+                args: ['style.top.px']
+            }], submenuItems: [{
+                type: ContentChildren,
+                args: [forwardRef(() => EclMegaMenuSubitemComponent)]
+            }] } });
+
+class EclMegaMenuInfoComponent extends ECLBaseDirective {
+    get cssClasses() {
+        return [
+            super.getCssClasses('ecl-mega-menu__info'),
+            this.linkItem ? 'ecl-mega-menu__info--has-link' : '',
+        ]
+            .join(' ')
+            .trim();
+    }
+    constructor(el, eclMegaMenuDataService) {
+        super();
+        this.el = el;
+        this.eclMegaMenuDataService = eclMegaMenuDataService;
+        this.eclMegaMenuInfoStyleHeight = null;
+        this.eclMegaMenuInfoStyleOpacity = null;
+    }
+    ngAfterViewInit() {
+        if (this.linkItem) {
+            setTimeout(() => this.linkItem.class = 'ecl-mega-menu__info-link');
+        }
+        this.publishSize();
+    }
+    getInfoPanelScrollHeight() {
+        return this.el.nativeElement.scrollHeight;
+    }
+    publishSize() {
+        const bottomY = this.el.nativeElement.getBoundingClientRect().bottom;
+        this.eclMegaMenuDataService.updateEclMegaMenuInfoSize(bottomY);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuInfoComponent, deps: [{ token: i0.ElementRef }, { token: EclMegaMenuDataService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclMegaMenuInfoComponent, isStandalone: false, selector: "div[eclMegaMenuInfo]", inputs: { title: "title" }, host: { properties: { "class": "this.cssClasses", "style.height.px": "this.eclMegaMenuInfoStyleHeight", "style.opacity": "this.eclMegaMenuInfoStyleOpacity" } }, queries: [{ propertyName: "linkItem", first: true, predicate: i0.forwardRef(() => EclLinkDirective), descendants: true }], usesInheritance: true, ngImport: i0, template: "<span class=\"ecl-mega-menu__info-title\">{{ title }}</span>\n<div class=\"ecl-mega-menu__info-scrollable\">\n    <div class=\"ecl-mega-menu__info-content\"><ng-content></ng-content>\n    </div>\n</div>" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[eclMegaMenuInfo]', standalone: false, template: "<span class=\"ecl-mega-menu__info-title\">{{ title }}</span>\n<div class=\"ecl-mega-menu__info-scrollable\">\n    <div class=\"ecl-mega-menu__info-content\"><ng-content></ng-content>\n    </div>\n</div>" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: EclMegaMenuDataService }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], eclMegaMenuInfoStyleHeight: [{
+                type: HostBinding,
+                args: ['style.height.px']
+            }], eclMegaMenuInfoStyleOpacity: [{
+                type: HostBinding,
+                args: ['style.opacity']
+            }], title: [{
+                type: Input
+            }], linkItem: [{
+                type: ContentChild,
+                args: [forwardRef(() => EclLinkDirective)]
+            }] } });
+
+class EclMegaMenuItemComponent extends ECLBaseDirective {
+    get cssClasses() {
+        return [
+            super.getCssClasses('ecl-mega-menu__item'),
+            this.eclMegaMenuSublist ? 'ecl-mega-menu__item--has-children' : '',
+            this.eclMegaMenuContainer ? 'ecl-mega-menu__item--has-container' : '',
+            this.isCurrent ? 'ecl-mega-menu__item--current' : '',
+            this.isExpanded ? 'ecl-mega-menu__item--expanded' : '',
+        ]
+            .join(' ')
+            .trim();
+    }
+    constructor(cdkBreakpointObserver, el, eclMegaMenuDataService, expandableItemSetDataService, eclMegaMenuService, renderer) {
+        super();
+        this.cdkBreakpointObserver = cdkBreakpointObserver;
+        this.el = el;
+        this.eclMegaMenuDataService = eclMegaMenuDataService;
+        this.expandableItemSetDataService = expandableItemSetDataService;
+        this.eclMegaMenuService = eclMegaMenuService;
+        this.renderer = renderer;
+        this.isExpanded = false;
+        this.hasPopup = this.hasChildren ? true : null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.routerLink = null;
+        this.queryParams = null;
+        this.queryParamsHandling = null;
+        this.href = '';
+        this.target = '';
+        this.megaMenuItemClicked = new EventEmitter();
+        this.megaMenuItemKeydown = new EventEmitter();
+        this.containerStyleHeight = null;
+        this.isCurrent = false;
+        this.isMobileBreakpoint = false;
+        this.megaMenuMegaStyleHeight = null;
+        this.megaMenuMegaStyleOpacity = null;
+        this.wrapperStyleHeight = null;
+        this.wrapperStyleTop = null;
+        this.destroy$ = new Subject();
+        this.isLarge = false;
+        afterNextRender(() => {
+            eclMegaMenuDataService.eclMegaMenuInfoBottomYSubject$.pipe(takeUntil(this.destroy$)).subscribe(value => {
+                this.calculateSublistStyle(value);
+            });
+            if (this.menuLink) {
+                eclMegaMenuService.setExtraAttributesForLink(this.menuLink.el.nativeElement, this.linkExtraAttributes);
+            }
+            this.observeBreakpointChanges();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    get hasChildren() {
+        return !!this.eclMegaMenuSublist || !!this.eclMegaMenuContainer;
+    }
+    get hasSublist() {
+        return !!this.eclMegaMenuSublist;
+    }
+    get hasContainer() {
+        return !!this.eclMegaMenuContainer;
+    }
+    onFocus() {
+        if (this.menuLink) {
+            this.menuLink.onFocus();
+        }
+        else if (this.menuBtn) {
+            this.menuBtn.onFocus();
+        }
+    }
+    onResize() {
+        setTimeout(() => {
+            if (this.isExpanded) {
+                this.checkDropdownHeight();
+                this.calculateWrapperStyle();
+            }
+        });
+    }
+    onMegaMenuItemClick() {
+        if (this.hasChildren) {
+            this.isCurrent = !this.isCurrent;
+            this.isExpanded = !this.isExpanded;
+            if (this.eclMegaMenuSublist) {
+                this.eclMegaMenuSublist.onParentMegaMenuItemClick(this.isExpanded);
+            }
+            if (this.isExpanded) {
+                this.expandableItemSetDataService.updateExpanded(this.isExpanded);
+                this.hidePanels();
+                setTimeout(() => {
+                    this.checkDropdownHeight();
+                    this.disableScroll();
+                });
+            }
+            else {
+                this.expandableItemSetDataService.updateExpanded(this.isExpanded);
+                this.enableScroll();
+            }
+        }
+        else {
+            this.expandableItemSetDataService.updateExpanded(this.isExpanded);
+            this.enableScroll();
+        }
+        this.megaMenuItemClicked.emit();
+    }
+    onMegaMenuItemCollapse() {
+        this.isCurrent = false;
+        this.isExpanded = false;
+        if (this.eclMegaMenuSublist) {
+            this.eclMegaMenuSublist.onParentMegaMenuItemClick(this.isExpanded);
+        }
+    }
+    onKeydown(evt) {
+        if (evt instanceof KeyboardEvent) {
+            if (evt.key === KeyCode.TAB && !evt.shiftKey) {
+                // if menu is open, navigate to children
+            }
+            else {
+                this.megaMenuItemKeydown.emit(evt);
+            }
+        }
+    }
+    disableScroll() {
+        const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+        this.renderer.addClass(document.body, 'ecl-mega-menu-prevent-scroll');
+        if (scrollBarWidth > 0) {
+            this.renderer.setStyle(document.body, 'padding-right', `${scrollBarWidth}px`);
+        }
+    }
+    enableScroll() {
+        this.renderer.removeClass(document.body, 'ecl-mega-menu-prevent-scroll');
+        this.renderer.removeStyle(document.body, 'padding-right');
+    }
+    calculateSublistStyle(bottomInfo) {
+        if (this.isMobileBreakpoint) {
+            const availableHeight = window.innerHeight - bottomInfo - 16;
+            this.eclMegaMenuSublist.styleTop = availableHeight;
+        }
+    }
+    calculateWrapperStyle() {
+        if (this.isMobileBreakpoint) {
+            const bottomY = this.el.nativeElement.getBoundingClientRect().bottom;
+            this.wrapperStyleTop = bottomY;
+        }
+    }
+    resetWrapperStyle() {
+        if (this.isMobileBreakpoint) {
+            this.wrapperStyleHeight = null;
+            this.wrapperStyleTop = null;
+        }
+    }
+    hidePanels() {
+        if (this.isMobileBreakpoint) {
+            return;
+        }
+        if (this.eclMegaMenuMega) {
+            this.megaMenuMegaStyleOpacity = 0;
+        }
+        if (this.eclMegaMenuInfo) {
+            this.eclMegaMenuInfo.eclMegaMenuInfoStyleOpacity = 0;
+        }
+    }
+    checkDropdownHeight() {
+        let infoPanelHeight = 0;
+        if (!this.isMobileBreakpoint) {
+            const heights = [];
+            let height = 0;
+            let itemsHeight = 0;
+            let subItemsHeight = 0;
+            let featuredHeight = 0;
+            if (this.hasContainer) {
+                const viewportHeight = window.innerHeight;
+                const mainTop = this.mainPanel.nativeElement.getBoundingClientRect().top;
+                this.containerStyleHeight = viewportHeight - mainTop;
+            }
+            else {
+                if (this.eclMegaMenuInfo) {
+                    infoPanelHeight = this.eclMegaMenuInfo.getInfoPanelScrollHeight() + 16;
+                    if (this.isLarge) {
+                        heights.push(infoPanelHeight);
+                    }
+                    else {
+                        itemsHeight = infoPanelHeight;
+                        subItemsHeight = infoPanelHeight;
+                        featuredHeight = infoPanelHeight;
+                    }
+                    this.eclMegaMenuInfo.eclMegaMenuInfoStyleOpacity = 1;
+                }
+                if (this.eclMegaMenuMega) {
+                    if (this.eclMegaMenuSublist && this.eclMegaMenuSublist.submenuItems.length > 0) {
+                        this.eclMegaMenuSublist.submenuItems.forEach((item) => {
+                            itemsHeight += item.getMegaMenuSubItemHeight();
+                        });
+                        heights.push(itemsHeight);
+                    }
+                    const expandedSubItem = this.eclMegaMenuSublist.submenuItems.find(item => item.hasChildren && item.isExpanded);
+                    if (expandedSubItem !== undefined) {
+                        expandedSubItem.submenu.submenuItems.forEach(item => {
+                            subItemsHeight += item.getMegaMenuSubItemHeight();
+                        });
+                        heights.push(subItemsHeight);
+                        if (expandedSubItem.eclMegaMenuFeatured) {
+                            featuredHeight += expandedSubItem.eclMegaMenuFeatured.getEclMegaMenuFeaturedHeight();
+                            heights.push(featuredHeight);
+                        }
+                    }
+                    const maxHeight = Math.max(...heights);
+                    const containerBounding = this.el.nativeElement.getBoundingClientRect();
+                    const containerBottom = containerBounding.bottom;
+                    // By requirements, limit the height to the 70% of the available space.
+                    const availableHeight = (window.innerHeight - containerBottom) * 0.7;
+                    if (maxHeight > availableHeight) {
+                        height = availableHeight;
+                    }
+                    else {
+                        height = maxHeight;
+                    }
+                    this.wrapperStyleHeight = height;
+                    if (this.eclMegaMenuMega && this.isLarge) {
+                        this.megaMenuMegaStyleHeight = height;
+                    }
+                    else if (this.eclMegaMenuMega && this.eclMegaMenuInfo) {
+                        this.megaMenuMegaStyleHeight = height - infoPanelHeight;
+                    }
+                    if (this.eclMegaMenuInfo && this.isLarge) {
+                        this.eclMegaMenuInfo.eclMegaMenuInfoStyleHeight = height;
+                    }
+                    if (expandedSubItem !== undefined) {
+                        if (this.isLarge) {
+                            expandedSubItem.level2StyleHeight = height;
+                        }
+                        else {
+                            expandedSubItem.level2StyleHeight = height - infoPanelHeight;
+                        }
+                        if (expandedSubItem.eclMegaMenuFeatured) {
+                            if (this.isLarge) {
+                                expandedSubItem.eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = height;
+                            }
+                            else {
+                                expandedSubItem.eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = height - infoPanelHeight;
+                            }
+                        }
+                    }
+                    this.megaMenuMegaStyleOpacity = 1;
+                }
+            }
+        }
+    }
+    observeBreakpointChanges() {
+        this.cdkBreakpointObserver
+            .observe([Breakpoints.Handset, Breakpoints.Tablet, Breakpoints.Small, '(min-width: 1140px)'])
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((result) => {
+            this.isMobileBreakpoint = result.breakpoints[Breakpoints.Handset, Breakpoints.Tablet, Breakpoints.Small];
+            this.isLarge = result.breakpoints['(min-width: 1140px)'];
+            this.resetWrapperStyle();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", 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-rc.1", 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", 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: [{
+                type: HostBinding,
+                args: ['class']
+            }], isExpanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], hasPopup: [{
+                type: HostBinding,
+                args: ['attr.aria-haspopup']
+            }], label: [{
+                type: Input
+            }], routerLink: [{
+                type: Input
+            }], queryParams: [{
+                type: Input
+            }], queryParamsHandling: [{
+                type: Input
+            }], href: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], linkExtraAttributes: [{
+                type: Input
+            }], megaMenuItemClicked: [{
+                type: Output
+            }], megaMenuItemKeydown: [{
+                type: Output
+            }], eclMegaMenuMega: [{
+                type: ViewChild,
+                args: ['eclMegaMenuMega']
+            }], mainPanel: [{
+                type: ViewChild,
+                args: ['mainPanel']
+            }], menuLink: [{
+                type: ViewChild,
+                args: [EclLinkDirective]
+            }], menuBtn: [{
+                type: ViewChild,
+                args: ['menuBtn']
+            }], eclMegaMenuInfo: [{
+                type: ContentChild,
+                args: [forwardRef(() => EclMegaMenuInfoComponent)]
+            }], eclMegaMenuSublist: [{
+                type: ContentChild,
+                args: [forwardRef(() => EclMegaMenuSublistDirective)]
+            }], eclMegaMenuContainer: [{
+                type: ContentChild,
+                args: [forwardRef(() => EclMegaMenuContainerDirective)]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class EclMegaMenuComponent extends ECLBaseDirective {
+    get cssClasses() {
+        return [
+            super.getCssClasses('ecl-mega-menu'),
+            this.isTwoPanels ? 'ecl-mega-menu--two-panels' : '',
+            this.isOnePanel ? 'ecl-mega-menu--one-panel' : '',
+            this.isRtl ? 'ecl-mega-menu--rtl' : '',
+            this.isTablet ? 'ecl-mega-menu--forced-mobile' : '',
+            this.isStartPanel ? 'ecl-mega-menu--start-panel' : '',
+        ].join(' ');
+    }
+    constructor(differs, cdkBreakpointObserver, eclRtlService, eclUserDeviceService, 
+    // private eclSiteHeaderAreaDataService: EclExpandableItemSetDataService,
+    eclExpandableItemSetDataService, eclMegaMenuDataService, el, renderer) {
+        super();
+        this.differs = differs;
+        this.cdkBreakpointObserver = cdkBreakpointObserver;
+        this.eclRtlService = eclRtlService;
+        this.eclUserDeviceService = eclUserDeviceService;
+        this.eclExpandableItemSetDataService = eclExpandableItemSetDataService;
+        this.eclMegaMenuDataService = eclMegaMenuDataService;
+        this.el = el;
+        this.renderer = renderer;
+        this.isExpanded = false;
+        this.role = 'navigation';
+        this.megaMenuItemSelect = new EventEmitter();
+        this.isMobileBreakpoint = false;
+        this.isMobileExpanded = false;
+        this.isOnePanel = false;
+        this.isOpen = false; //used for mobile only
+        this.isStartPanel = false;
+        this.isTwoPanels = false;
+        this.destroy$ = new Subject();
+        this.isRtl = false;
+        this.isTablet = false;
+        this.differ = this.differs.find([]).create();
+        afterNextRender(() => {
+            this.observeBreakpointChanges();
+            this.handleRtlChangeState();
+            this.checkIsTabletDevice();
+            this.subscribeToEvents();
+        });
+    }
+    ngDoCheck() {
+        const diff = this.differ.diff(this.menuItems);
+        if (diff) {
+            diff.forEachItem((item) => {
+                this.connectMegaMenuItemEvents(item.item);
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    onMegaMenuOpen() {
+        if (this.isOpen) {
+            this.onMegaMenuClose();
+        }
+        else {
+            this.disableScroll();
+            this.isExpanded = true;
+            this.isOnePanel = false;
+            this.isTwoPanels = false;
+            if (this.isMobileBreakpoint) {
+                this.isStartPanel = true;
+                this.isMobileExpanded = true;
+            }
+            this.isOpen = true;
+            this.eclExpandableItemSetDataService.updateOpen(true);
+            // Focus first element
+            if (this.menuItems.length > 0) {
+                this.menuItems.first.onFocus();
+            }
+        }
+    }
+    onMegaMenuClose() {
+        this.enableScroll();
+        this.collapseMenu();
+        if (this.isMobileBreakpoint) {
+            this.isStartPanel = false;
+            this.isMobileExpanded = false;
+        }
+        this.isOpen = false;
+        this.eclExpandableItemSetDataService.updateOpen(false);
+    }
+    onMegaMenuBack() {
+        if (this.isOnePanel) {
+            this.onMegaMenuBackToStartPanel();
+        }
+        else if (this.isTwoPanels) {
+            this.onMegaMenuBackToOnePanel();
+        }
+    }
+    positionMenuOverlay(parentHeaderBottomSpaceY) {
+        this.parentHeaderBottomSpaceY = parentHeaderBottomSpaceY;
+        if (this.isMobileBreakpoint && parentHeaderBottomSpaceY) {
+            this.overlayStyleTop = parentHeaderBottomSpaceY;
+            this.innerStyleTop = parentHeaderBottomSpaceY;
+        }
+        else {
+            if (this.parentHeaderBottomSpaceY) {
+                this.overlayStyleTop = parentHeaderBottomSpaceY;
+            }
+            else {
+                const menuBottomY = this.el.nativeElement.getBoundingClientRect().bottom;
+                this.overlayStyleTop = menuBottomY;
+            }
+        }
+    }
+    onMegaMenuBackToOnePanel() {
+        this.isStartPanel = false;
+        this.isTwoPanels = false;
+        this.isOnePanel = true;
+        const currentItem = this.menuItems.find(item => item.isExpanded);
+        const currentSubItem = currentItem.eclMegaMenuSublist.submenuItems.find(item => item.isExpanded);
+        if (this.isMobileBreakpoint) {
+            currentItem.eclMegaMenuSublist.submenuItems.filter(item => !item.isExpanded).forEach(el => {
+                el.onShow();
+            });
+        }
+        currentSubItem.isCurrent = false;
+        currentSubItem.isExpanded = false;
+    }
+    onMegaMenuBackToStartPanel() {
+        this.isOnePanel = false;
+        this.isStartPanel = true;
+        const currentItem = this.menuItems.find(item => item.isExpanded);
+        currentItem.isCurrent = false;
+        currentItem.isExpanded = false;
+        this.eclExpandableItemSetDataService.updateExpanded(false);
+    }
+    subscribeToEvents() {
+        this.eclMegaMenuDataService.eclSubItemExpanded$.pipe(takeUntil(this.destroy$)).subscribe(isExpanded => {
+            this.isTwoPanels = isExpanded;
+            this.isOnePanel = !isExpanded;
+            this.isStartPanel = false;
+        });
+        this.eclMegaMenuDataService.eclSubItemClicked$.pipe(takeUntil(this.destroy$)).subscribe(item => {
+            this.megaMenuItemSelect.emit(item);
+        });
+        this.eclMegaMenuDataService.eclSubItemEscape$.pipe(takeUntil(this.destroy$)).subscribe(item => {
+            this.closeAnyOpenSubMenu();
+        });
+    }
+    connectMegaMenuItemEvents(item) {
+        item.megaMenuItemClicked.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.onMegaMenuItemClicked(item);
+        });
+        item.megaMenuItemKeydown.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            this.onMegaMenuItemKeydown(item, evt);
+        });
+    }
+    onMegaMenuItemClicked(item) {
+        this.menuItems.filter(megaItem => megaItem !== item).forEach(item => item.onMegaMenuItemCollapse());
+        if (item.hasChildren) {
+            if (item.isExpanded) {
+                if (this.isMobileBreakpoint) {
+                    this.isOnePanel = true;
+                    this.isTwoPanels = false;
+                    this.isStartPanel = false;
+                }
+                else {
+                    if (item.eclMegaMenuSublist?.submenuItems.first.hasChildren) {
+                        this.isOnePanel = false;
+                        this.isTwoPanels = true;
+                    }
+                    else {
+                        this.isOnePanel = true;
+                        this.isTwoPanels = false;
+                    }
+                }
+                this.positionMenuOverlay(this.parentHeaderBottomSpaceY);
+                this.isExpanded = true;
+            }
+            else {
+                this.collapseMenu();
+            }
+        }
+        else {
+            this.collapseMenu();
+        }
+        this.megaMenuItemSelect.emit(item);
+    }
+    onMegaMenuItemKeydown(item, evt) {
+        const itemIndex = this.menuItems.toArray().findIndex(elem => elem === item);
+        switch (evt.key) {
+            case KeyCode.ARROW_DOWN: {
+                evt.preventDefault();
+                this.focusOnPrevSibling(itemIndex);
+                break;
+            }
+            case KeyCode.ARROW_UP: {
+                evt.preventDefault();
+                this.focusOnNextSibling(itemIndex);
+                break;
+            }
+            case KeyCode.ARROW_LEFT: {
+                evt.preventDefault();
+                this.focusOnPrevSibling(itemIndex);
+                break;
+            }
+            case KeyCode.ARROW_RIGHT: {
+                evt.preventDefault();
+                this.focusOnNextSibling(itemIndex);
+                break;
+            }
+            case KeyCode.ESCAPE: {
+                this.closeAnyOpenSubMenu();
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    }
+    closeAnyOpenSubMenu() {
+        if (this.isExpanded) {
+            const expandedItem = this.menuItems.find(item => item.isExpanded);
+            if (expandedItem !== undefined) {
+                expandedItem.onMegaMenuItemCollapse();
+            }
+            else {
+                this.collapseMenu();
+            }
+        }
+    }
+    collapseMenu() {
+        this.isExpanded = false;
+        this.isTwoPanels = false;
+        this.isOnePanel = false;
+        this.eclExpandableItemSetDataService.updateExpanded(false);
+    }
+    focusOnPrevSibling(index) {
+        if (index > 0) {
+            this.menuItems.get(index - 1).onFocus();
+        }
+    }
+    focusOnNextSibling(index) {
+        if (index < this.menuItems.length - 1) {
+            this.menuItems.get(index + 1).onFocus();
+        }
+    }
+    checkIsTabletDevice() {
+        const userAgent = navigator.userAgent.toLowerCase();
+        this.isTablet = this.eclUserDeviceService.isTabletDevice(userAgent);
+    }
+    observeBreakpointChanges() {
+        this.cdkBreakpointObserver
+            .observe(['(max-width: 996px)'])
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((result) => {
+            this.isMobileBreakpoint = result.matches;
+        });
+    }
+    handleRtlChangeState() {
+        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {
+            if (rtlState !== undefined) {
+                this.isRtl = rtlState;
+            }
+        });
+    }
+    disableScroll() {
+        const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+        this.renderer.addClass(document.body, 'ecl-mega-menu-prevent-scroll');
+        if (scrollBarWidth > 0) {
+            this.renderer.setStyle(document.body, 'padding-right', `${scrollBarWidth}px`);
+        }
+    }
+    enableScroll() {
+        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-rc.1", 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-rc.1", 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", 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: [{
+                type: HostBinding,
+                args: ['class']
+            }], isExpanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], megaMenuItemSelect: [{
+                type: Output
+            }], menuItems: [{
+                type: ContentChildren,
+                args: [forwardRef(() => EclMegaMenuItemComponent), { descendants: true }]
+            }] } });
+
+const COMPONENTS = [
+    EclMegaMenuComponent,
+    EclMegaMenuItemComponent,
+    EclMegaMenuSubitemComponent,
+    EclMegaMenuInfoComponent,
+    EclMegaMenuFeaturedComponent,
+    EclMegaMenuFeaturedPictureDirective,
+    EclMegaMenuFeaturedImageDirective,
+    EclMegaMenuFeaturedListDirective,
+    EclMegaMenuFeaturedListItemDirective,
+    EclMegaMenuListDirective,
+    EclMegaMenuSublistDirective,
+    EclMegaMenuContainerDirective,
+    EclMegaMenuSpacerDirective,
+];
+class EclMegaMenuComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuComponentModule, declarations: [EclMegaMenuComponent,
+            EclMegaMenuItemComponent,
+            EclMegaMenuSubitemComponent,
+            EclMegaMenuInfoComponent,
+            EclMegaMenuFeaturedComponent,
+            EclMegaMenuFeaturedPictureDirective,
+            EclMegaMenuFeaturedImageDirective,
+            EclMegaMenuFeaturedListDirective,
+            EclMegaMenuFeaturedListItemDirective,
+            EclMegaMenuListDirective,
+            EclMegaMenuSublistDirective,
+            EclMegaMenuContainerDirective,
+            EclMegaMenuSpacerDirective], imports: [EclButtonComponentModule,
+            EclIconComponentModule,
+            EclLinkDirectiveModule,
+            CommonModule,
+            RouterModule,
+            LayoutModule,
+            TranslateModule], exports: [EclMegaMenuComponent,
+            EclMegaMenuItemComponent,
+            EclMegaMenuSubitemComponent,
+            EclMegaMenuInfoComponent,
+            EclMegaMenuFeaturedComponent,
+            EclMegaMenuFeaturedPictureDirective,
+            EclMegaMenuFeaturedImageDirective,
+            EclMegaMenuFeaturedListDirective,
+            EclMegaMenuFeaturedListItemDirective,
+            EclMegaMenuListDirective,
+            EclMegaMenuSublistDirective,
+            EclMegaMenuContainerDirective,
+            EclMegaMenuSpacerDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuComponentModule, providers: [EclExpandableItemSetDataService], imports: [EclButtonComponentModule,
+            EclIconComponentModule,
+            EclLinkDirectiveModule,
+            CommonModule,
+            RouterModule,
+            LayoutModule,
+            TranslateModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMegaMenuComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        EclButtonComponentModule,
+                        EclIconComponentModule,
+                        EclLinkDirectiveModule,
+                        CommonModule,
+                        RouterModule,
+                        LayoutModule,
+                        TranslateModule,
+                    ],
+                    exports: [...COMPONENTS],
+                    declarations: [...COMPONENTS],
+                    providers: [EclExpandableItemSetDataService],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EclMegaMenuComponent, EclMegaMenuComponentModule, EclMegaMenuContainerDirective, EclMegaMenuDataService, EclMegaMenuFeaturedComponent, EclMegaMenuFeaturedImageDirective, EclMegaMenuFeaturedListDirective, EclMegaMenuFeaturedListItemDirective, EclMegaMenuFeaturedPictureDirective, EclMegaMenuInfoComponent, EclMegaMenuItemComponent, EclMegaMenuListDirective, EclMegaMenuService, EclMegaMenuSpacerDirective, EclMegaMenuSubitemComponent, EclMegaMenuSublistDirective };
+//# sourceMappingURL=eui-ecl-components-ecl-mega-menu.mjs.map