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

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

@@ -0,0 +1,1421 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, booleanAttribute, Component, Input, HostBinding, ContentChildren, forwardRef, ViewChild, Output, HostListener, afterNextRender, ViewEncapsulation, ContentChild, PLATFORM_ID, numberAttribute, Inject, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/cdk/layout';
+import { Breakpoints, LayoutModule } from '@angular/cdk/layout';
+import * as i2 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i5 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i2$1 from '@eui/ecl/core';
+import { EclDomEvent, ECLBaseDirective, KeyCode, EclExpandableItemSetDataService } from '@eui/ecl/core';
+import * as i4 from '@eui/ecl/components/ecl-link';
+import { EclLinkDirective, EclLinkDirectiveModule } from '@eui/ecl/components/ecl-link';
+import * as i3$1 from '@eui/ecl/components/ecl-icon';
+import { EclIconComponent, EclIconComponentModule } from '@eui/ecl/components/ecl-icon';
+import * as i3 from '@eui/ecl/components/ecl-button';
+import { EclButtonComponent, EclButtonComponentModule } from '@eui/ecl/components/ecl-button';
+import { Subject, of } from 'rxjs';
+import { mergeWith, takeUntil } from 'rxjs/operators';
+
+class EclMenuItemSelectEvent extends EclDomEvent {
+    constructor(menuItem, domEvent = null) {
+        super(domEvent);
+        this.menuItem = menuItem;
+        this.domEvent = domEvent;
+    }
+}
+class EclMenuItemHoverEvent extends EclDomEvent {
+    constructor(menuItem, domEvent = null) {
+        super(domEvent);
+        this.menuItem = menuItem;
+        this.domEvent = domEvent;
+    }
+}
+class EclMenuItemHoverOutEvent extends EclDomEvent {
+    constructor(menuItem, domEvent = null) {
+        super(domEvent);
+        this.menuItem = menuItem;
+        this.domEvent = domEvent;
+    }
+}
+class EclMenuItemFocusEvent extends EclDomEvent {
+    constructor(menuItem, domEvent = null) {
+        super(domEvent);
+        this.menuItem = menuItem;
+        this.domEvent = domEvent;
+    }
+}
+class EclMenuItemCaretEvent extends EclDomEvent {
+    constructor(menuItem, domEvent = null) {
+        super(domEvent);
+        this.menuItem = menuItem;
+        this.domEvent = domEvent;
+    }
+}
+class EclMenuItemKeydownEvent extends EclDomEvent {
+    constructor(menuItem, domEvent = null) {
+        super(domEvent);
+        this.menuItem = menuItem;
+        this.domEvent = domEvent;
+    }
+}
+class EclMenuItemParentFocusEvent {
+    constructor(menuItem) {
+        this.menuItem = menuItem;
+    }
+}
+
+class EclMenuMegaItemComponent extends ECLBaseDirective {
+    constructor(renderer) {
+        super();
+        this.renderer = renderer;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.routerLink = null;
+        this.queryParams = null;
+        this.queryParamsHandling = null;
+        this.href = '';
+        this.target = '';
+        this.cmpClass = true;
+        this.role = 'listitem';
+        this.isCurrent = false;
+        this.isSeeAll = false;
+        this.menuItemSelect = new EventEmitter();
+        this.menuItemKeydown = new EventEmitter();
+        this.hasChildren = false;
+        this.isExpanded = true;
+        this.children = [];
+    }
+    ngAfterViewInit() {
+        this.manageContentChildren();
+        this.setExtraAttributesForLink(this.megaMenuLink?.nativeElement, this.linkExtraAttributes);
+    }
+    onItemClick(evt) {
+        this.menuItemSelect.next(new EclMenuItemSelectEvent(this, evt));
+        if (!this.href) {
+            evt.preventDefault();
+        }
+    }
+    onHostClick(evt) {
+        evt.stopPropagation();
+    }
+    get ariaCurrent() {
+        return this.isCurrent ? 'page' : null;
+    }
+    onFocus() {
+        this.megaMenuLink.nativeElement.focus();
+    }
+    onKeydown(evt) {
+        if (evt.key === KeyCode.ENTER) {
+            this.onItemClick(evt);
+        }
+        this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
+    }
+    manageContentChildren() {
+        if (this.iconComponents) {
+            setTimeout(() => {
+                this.iconComponents.forEach((icn) => {
+                    icn.baseDirective.class = 'ecl-menu__sublink-icon';
+                });
+            });
+        }
+        if (this.links) {
+            setTimeout(() => {
+                this.links.forEach((icn) => {
+                    icn.class = icn.class ? icn.class + ' ecl-menu__sublink' : 'ecl-menu__sublink';
+                });
+            });
+        }
+    }
+    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: EclMenuMegaItemComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.1", type: EclMenuMegaItemComponent, isStandalone: false, selector: "ecl-menu-mega-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: ["isCurrent", "isCurrent", booleanAttribute], isSeeAll: ["isSeeAll", "isSeeAll", booleanAttribute], linkExtraAttributes: "linkExtraAttributes" }, outputs: { menuItemSelect: "menuItemSelect", menuItemKeydown: "menuItemKeydown" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.ecl-menu__subitem": "this.cmpClass", "attr.role": "this.role", "class.ecl-menu__subitem--current": "this.isCurrent", "class.ecl-menu__see-all": "this.isSeeAll" } }, queries: [{ propertyName: "iconComponents", predicate: i0.forwardRef(() => EclIconComponent) }, { propertyName: "links", predicate: i0.forwardRef(() => EclLinkDirective) }], viewQueries: [{ propertyName: "megaMenuLink", first: true, predicate: ["megaMenuLink"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (!isSeeAll) {\n    @if (href) {\n        <a  #megaMenuLink\n            [href]=\"href\"\n            [target]=\"target\"\n            class=\"ecl-link ecl-link--standalone ecl-menu__sublink\"\n            [class.ecl-menu__sublink--current]=\"isCurrent\"\n            [attr.aria-current]=\"ariaCurrent\"\n            (click)=\"onItemClick($event)\"\n            (keydown)=\"onKeydown($event)\">\n            {{ label }}\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </a>\n    } @else {\n        <a  #megaMenuLink\n            tabindex=\"0\"\n            [routerLink]=\"routerLink\"\n            [queryParams]=\"queryParams\"\n            [queryParamsHandling]=\"queryParamsHandling\"\n            class=\"ecl-link ecl-link--standalone ecl-menu__sublink\"\n            [class.ecl-menu__sublink--current]=\"isCurrent\"\n            [attr.aria-current]=\"ariaCurrent\"\n            (click)=\"onItemClick($event)\"\n            (keydown)=\"onKeydown($event)\">\n            {{ label }}\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </a>\n    }\n} @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: EclMenuMegaItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-menu-mega-item', standalone: false, template: "@if (!isSeeAll) {\n    @if (href) {\n        <a  #megaMenuLink\n            [href]=\"href\"\n            [target]=\"target\"\n            class=\"ecl-link ecl-link--standalone ecl-menu__sublink\"\n            [class.ecl-menu__sublink--current]=\"isCurrent\"\n            [attr.aria-current]=\"ariaCurrent\"\n            (click)=\"onItemClick($event)\"\n            (keydown)=\"onKeydown($event)\">\n            {{ label }}\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </a>\n    } @else {\n        <a  #megaMenuLink\n            tabindex=\"0\"\n            [routerLink]=\"routerLink\"\n            [queryParams]=\"queryParams\"\n            [queryParamsHandling]=\"queryParamsHandling\"\n            class=\"ecl-link ecl-link--standalone ecl-menu__sublink\"\n            [class.ecl-menu__sublink--current]=\"isCurrent\"\n            [attr.aria-current]=\"ariaCurrent\"\n            (click)=\"onItemClick($event)\"\n            (keydown)=\"onKeydown($event)\">\n            {{ label }}\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </a>\n    }\n} @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:list-item}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], routerLink: [{
+                type: Input
+            }], queryParams: [{
+                type: Input
+            }], queryParamsHandling: [{
+                type: Input
+            }], href: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], cmpClass: [{
+                type: HostBinding,
+                args: ['class.ecl-menu__subitem']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], isCurrent: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }, {
+                type: HostBinding,
+                args: ['class.ecl-menu__subitem--current']
+            }], isSeeAll: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }, {
+                type: HostBinding,
+                args: ['class.ecl-menu__see-all']
+            }], linkExtraAttributes: [{
+                type: Input
+            }], iconComponents: [{
+                type: ContentChildren,
+                args: [forwardRef(() => EclIconComponent)]
+            }], links: [{
+                type: ContentChildren,
+                args: [forwardRef(() => EclLinkDirective)]
+            }], megaMenuLink: [{
+                type: ViewChild,
+                args: ['megaMenuLink']
+            }], menuItemSelect: [{
+                type: Output
+            }], menuItemKeydown: [{
+                type: Output
+            }], onHostClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class EclMenuMegaComponent extends ECLBaseDirective {
+    get cssClasses() {
+        return [super.getCssClasses('ecl-menu__mega')].join(' ');
+    }
+    constructor(differs, el) {
+        super();
+        this.differs = differs;
+        this.el = el;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.isRtlDisplay = false;
+        this.menuItemSelect = new EventEmitter();
+        this.menuMegaItemParentFocus = new EventEmitter();
+        this.menuMegaLastItemTab = new EventEmitter();
+        this.destroy$ = new Subject();
+        this.differ = this.differs.find([]).create();
+    }
+    ngAfterContentInit() {
+        this.diff = this.differ.diff(this.eclMenuMegaItems);
+        this.createContentChildrenMenuObservable().subscribe(this.onMenuItemChanges.bind(this));
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    selectFirstSubItem() {
+        if (this.eclMenuMegaItems.length > 0) {
+            this.eclMenuMegaItems.first.onFocus();
+        }
+    }
+    createContentChildrenMenuObservable() {
+        return of(this.eclMenuMegaItems).pipe(mergeWith(this.eclMenuMegaItems.changes), takeUntil(this.destroy$));
+    }
+    onMenuItemChanges() {
+        this.diff = this.differ.diff(this.eclMenuMegaItems);
+        if (!this.diff) {
+            this.eclMenuMegaItems.forEach((rootItem) => {
+                this.connectMenuItemEvents(rootItem);
+            });
+        }
+        else {
+            this.diff.forEachAddedItem((change) => {
+                this.connectMenuItemEvents(change.item);
+            });
+        }
+    }
+    connectMenuItemEvents(item) {
+        item.menuItemSelect.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            this.onMenuItemSelected(item, evt);
+        });
+        item.menuItemKeydown.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            this.onMenuItemKeydown(item, evt);
+        });
+    }
+    onMenuItemKeydown(item, evt) {
+        switch (evt.domEvent.key) {
+            case KeyCode.ARROW_DOWN: {
+                evt.preventDefault();
+                this.onNextMenuItemFocus(item);
+                break;
+            }
+            case KeyCode.ARROW_UP: {
+                evt.preventDefault();
+                this.onPrevMenuItemFocus(item);
+                break;
+            }
+            case KeyCode.ESCAPE: {
+                evt.preventDefault();
+                this.menuMegaItemParentFocus.next(new EclMenuItemSelectEvent(item));
+                break;
+            }
+            case KeyCode.TAB: {
+                if (this.isLastItem(item)) {
+                    evt.preventDefault();
+                    this.menuMegaLastItemTab.next();
+                }
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    }
+    isLastItem(item) {
+        return this.eclMenuMegaItems.last === item;
+    }
+    geMenuMegaItemsArray() {
+        return this.eclMenuMegaItems.toArray();
+    }
+    onPrevMenuItemFocus(item) {
+        const index = this.geMenuMegaItemsArray().findIndex(el => item === el);
+        if (index !== 0) {
+            this.getMegaMenuItemsArray()[index - 1].onFocus();
+        }
+        else {
+            this.menuMegaItemParentFocus.next(new EclMenuItemSelectEvent(item));
+        }
+    }
+    onNextMenuItemFocus(item) {
+        const index = this.geMenuMegaItemsArray().findIndex(el => item === el);
+        if (index !== this.getMegaMenuItemsArray().length - 1) {
+            this.getMegaMenuItemsArray()[index + 1].onFocus();
+        }
+    }
+    onMenuItemSelected(item, evt) {
+        this.deselectAllMenuItems(this.eclMenuMegaItems.toArray());
+        this.selectMenuItem(item);
+        this.sendMenuItemSelectEvent(evt);
+    }
+    selectMenuItem(item) {
+        item.isCurrent = true;
+    }
+    deselectAllMenuItems(items) {
+        items.forEach((it) => {
+            it.isCurrent = false;
+        });
+    }
+    sendMenuItemSelectEvent(evt) {
+        this.menuItemSelect.next(new EclMenuItemSelectEvent(evt.menuItem, evt.domEvent));
+    }
+    getMegaMenuItemsArray() {
+        return this.eclMenuMegaItems.toArray();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMenuMegaComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclMenuMegaComponent, isStandalone: false, selector: "ecl-menu-mega", outputs: { menuItemSelect: "menuItemSelect", menuMegaItemParentFocus: "menuMegaItemParentFocus", menuMegaLastItemTab: "menuMegaLastItemTab" }, host: { properties: { "class.ecl-menu__mega--rtl": "this.isRtlDisplay", "style.left.px": "this.offsetLeft", "style.right.px": "this.offsetRight", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclMenuMegaItems", predicate: EclMenuMegaItemComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ecl-menu__sublist\">\n    <ng-content></ng-content>\n</ul>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMenuMegaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-menu-mega', standalone: false, template: "<ul class=\"ecl-menu__sublist\">\n    <ng-content></ng-content>\n</ul>\n" }]
+        }], ctorParameters: () => [{ type: i0.IterableDiffers }, { type: i0.ElementRef }], propDecorators: { isRtlDisplay: [{
+                type: HostBinding,
+                args: ['class.ecl-menu__mega--rtl']
+            }], eclMenuMegaItems: [{
+                type: ContentChildren,
+                args: [EclMenuMegaItemComponent]
+            }], menuItemSelect: [{
+                type: Output
+            }], menuMegaItemParentFocus: [{
+                type: Output
+            }], menuMegaLastItemTab: [{
+                type: Output
+            }], offsetLeft: [{
+                type: HostBinding,
+                args: ['style.left.px']
+            }], offsetRight: [{
+                type: HostBinding,
+                args: ['style.right.px']
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EclMenuItemComponent extends ECLBaseDirective {
+    get cssClasses() {
+        return [
+            super.getCssClasses('ecl-menu__item'),
+            this.isCurrent ? 'ecl-menu__item--current' : '',
+            this.isExpanded ? 'ecl-menu__item--expanded' : '',
+            this.getClassDependingChildrenCnt(),
+        ]
+            .join(' ')
+            .trim();
+    }
+    get hasEclChildrenDataAttribute() {
+        return this.hasChildren || undefined;
+    }
+    get isAriaExpanded() {
+        return this.hasChildren ? this.isHovered : null;
+    }
+    get ariaCurrent() {
+        return this.isCurrent ? true : null;
+    }
+    get hasChildren() {
+        return !!this.submenu;
+    }
+    get children() {
+        return this.hasChildren ? this.submenu.eclMenuMegaItems.toArray() : [];
+    }
+    constructor(el, renderer, cdkBreakpointObserver) {
+        super();
+        this.el = el;
+        this.renderer = renderer;
+        this.cdkBreakpointObserver = cdkBreakpointObserver;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.routerLink = null;
+        this.queryParams = null;
+        this.queryParamsHandling = null;
+        this.href = '';
+        this.target = '';
+        this.isCurrent = false;
+        this.isFull = false;
+        this.isHovered = false;
+        this.isMobileBreakpoint = false;
+        this.isVisible = true;
+        this.role = 'listitem';
+        this.menuItemSelect = new EventEmitter();
+        this.menuItemCaret = new EventEmitter();
+        this.menuItemHover = new EventEmitter();
+        this.menuItemHoverOut = new EventEmitter();
+        this.menuMegaItemSelect = new EventEmitter();
+        this.menuItemFocus = new EventEmitter();
+        this.menuItemKeydown = new EventEmitter();
+        this.menuMegaLastItemTab = new EventEmitter();
+        this.destroy$ = new Subject();
+        afterNextRender(() => {
+            this.observeBreakpointChanges();
+            this.setExtraAttributesForLink(this.menuLink?.nativeElement, this.linkExtraAttributes);
+        });
+    }
+    onItemMouseEnter(evt) {
+        this.menuItemHover.next(new EclMenuItemHoverEvent(this, evt));
+    }
+    onItemMouseLeave(evt) {
+        this.menuItemHoverOut.next(new EclMenuItemHoverOutEvent(this, evt));
+    }
+    ngAfterContentInit() {
+        if (this.submenu) {
+            this.submenu.menuItemSelect.pipe(takeUntil(this.destroy$)).subscribe((it) => {
+                this.menuMegaItemSelect.next(new EclMenuItemSelectEvent(it.menuItem, it.domEvent));
+            });
+            this.submenu.menuMegaItemParentFocus.pipe(takeUntil(this.destroy$)).subscribe((it) => {
+                if (!this.isMobileBreakpoint) {
+                    this.onFocusFromSubmenu();
+                }
+            });
+            this.submenu.menuMegaLastItemTab.pipe(takeUntil(this.destroy$)).subscribe(() => {
+                if (this.isMobileBreakpoint) {
+                    this.menuMegaLastItemTab.next();
+                }
+            });
+            if (this.hasSubmenuAnySelections()) {
+                this.isCurrent = true;
+            }
+        }
+        // this.tabindex = this.routerLink || this.href ? 0 : -1;
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    onItemFocus(evt) {
+        this.menuItemFocus.next(new EclMenuItemFocusEvent(this, evt));
+    }
+    onItemClick(evt) {
+        this.menuItemSelect.next(new EclMenuItemSelectEvent(this, evt));
+        if (!this.href) {
+            evt.stopPropagation();
+        }
+    }
+    onItemCaretClick(evt) {
+        this.menuItemCaret.next(new EclMenuItemCaretEvent(this, evt));
+    }
+    onFocusFromSubmenu() {
+        this.onButtonFocus();
+        this.isHovered = false;
+        this.isExpanded = false;
+    }
+    onFocusFromNext() {
+        if (this.menuButton) {
+            this.onButtonFocus();
+        }
+        else {
+            this.onLinkFocus();
+        }
+    }
+    onFocusFromPrev() {
+        this.onLinkFocus();
+    }
+    onButtonKeydown(evt) {
+        switch (evt.key) {
+            case KeyCode.ARROW_DOWN: {
+                evt.preventDefault();
+                if (this.isHovered) {
+                    this.selectFirstMegaMenuItem();
+                }
+                else {
+                    this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
+                }
+                break;
+            }
+            case KeyCode.ARROW_UP: {
+                evt.preventDefault();
+                this.onLinkFocus();
+                break;
+            }
+            case KeyCode.ARROW_RIGHT: {
+                evt.preventDefault();
+                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
+                break;
+            }
+            case KeyCode.ARROW_LEFT: {
+                evt.preventDefault();
+                this.onLinkFocus();
+                break;
+            }
+            case KeyCode.TAB: {
+                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
+                break;
+            }
+            case KeyCode.ENTER: {
+                evt.preventDefault();
+                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
+                break;
+            }
+            case KeyCode.ESCAPE: {
+                evt.preventDefault();
+                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    }
+    onLinkKeydown(evt) {
+        switch (evt.key) {
+            case KeyCode.ARROW_DOWN: {
+                evt.preventDefault();
+                this.onLinkNextFocus(evt);
+                break;
+            }
+            case KeyCode.ARROW_UP: {
+                evt.preventDefault();
+                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
+                break;
+            }
+            case KeyCode.ARROW_RIGHT: {
+                evt.preventDefault();
+                this.onLinkNextFocus(evt);
+                break;
+            }
+            case KeyCode.ARROW_LEFT: {
+                evt.preventDefault();
+                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
+                break;
+            }
+            case KeyCode.ENTER: {
+                evt.preventDefault();
+                this.onItemClick(evt);
+                break;
+            }
+            case KeyCode.ESCAPE: {
+                evt.preventDefault();
+                this.onLinkEscape(evt);
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    }
+    checkMenuItem(maxLines, isMobileBreakpoint) {
+        if (maxLines < 1)
+            return;
+        const currentItem = this.el.nativeElement;
+        const currentLink = this.menuLink.nativeElement;
+        if (isMobileBreakpoint) {
+            this.renderer.setStyle(currentLink, 'width', '100%');
+            return;
+        }
+        this.renderer.setStyle(currentItem, 'alignItems', 'flex-start');
+        const linkStyle = window.getComputedStyle(currentLink);
+        const maxHeight = this.getMenuItemLinkMaxHeight(linkStyle, maxLines);
+        if (currentLink.offsetHeight > maxHeight) {
+            this.changeMenuItemLinkWidth(currentLink, maxLines, linkStyle);
+        }
+        this.renderer.removeStyle(currentItem, 'alignItems');
+    }
+    onLinkEscape(evt) {
+        if (this.menuButton) {
+            this.menuButton.el.nativeElement.focus();
+            evt.stopPropagation();
+        }
+        else {
+            this.menuLink.nativeElement.blur();
+        }
+    }
+    selectFirstMegaMenuItem() {
+        this.submenu.selectFirstSubItem();
+    }
+    onLinkFocus() {
+        this.menuLink.nativeElement.focus();
+    }
+    onLinkNextFocus(evt) {
+        if (this.menuButton) {
+            this.onButtonFocus();
+        }
+        else {
+            this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
+        }
+    }
+    onButtonFocus() {
+        this.menuButton.el.nativeElement.focus();
+    }
+    getMenuItemLinkMaxHeight(linkStyle, maxLines) {
+        return parseInt(linkStyle.lineHeight, 10) * maxLines + parseInt(linkStyle.paddingTop, 10) + parseInt(linkStyle.paddingBottom, 10);
+    }
+    changeMenuItemLinkWidth(currentLink, maxLines, linkStyle) {
+        this.renderer.setStyle(currentLink, 'white-space', 'nowrap');
+        const linkWidth = currentLink.offsetWidth;
+        if (maxLines === 1) {
+            this.renderer.setStyle(currentLink, 'width', `${linkWidth + parseInt(linkStyle.paddingLeft, 10) + parseInt(linkStyle.paddingRight, 10)}px`);
+            this.renderer.removeStyle(currentLink, 'white-space');
+            return;
+        }
+        const textSize = currentLink.text.length;
+        const letterWidth = Math.ceil(linkWidth / textSize);
+        const wordsArray = currentLink.text.trim().split(' ');
+        const goalWidth = Math.ceil(linkWidth / maxLines);
+        const firstWord = wordsArray[0];
+        let cnt = 1;
+        let wordWidth = Math.ceil((firstWord.length + 1) * letterWidth);
+        while (wordWidth < goalWidth) {
+            wordWidth += Math.ceil((wordsArray[cnt].length + 1) * letterWidth);
+            cnt++;
+        }
+        this.renderer.setStyle(currentLink, 'width', `${wordWidth + parseInt(linkStyle.paddingLeft, 10) + parseInt(linkStyle.paddingRight, 10)}px`);
+        this.renderer.removeStyle(currentLink, 'white-space');
+    }
+    getClassDependingChildrenCnt() {
+        if (this.hasChildren) {
+            if (this.submenu.eclMenuMegaItems.length < 5 /* ColTrigger.COL1_TRIGGER */) {
+                return 'ecl-menu__item--col1';
+            }
+            else if (this.submenu.eclMenuMegaItems.length < 9 /* ColTrigger.COL2_TRIGGER */) {
+                return 'ecl-menu__item--col2';
+            }
+            else if (this.submenu.eclMenuMegaItems.length < 13 /* ColTrigger.COL3_TRIGGER */) {
+                return 'ecl-menu__item--col3';
+            }
+            else {
+                this.isFull = true;
+                return 'ecl-menu__item--full';
+            }
+        }
+        return '';
+    }
+    hasSubmenuAnySelections() {
+        return this.submenu && !!this.submenu.eclMenuMegaItems.find((it) => it.isCurrent);
+    }
+    setExtraAttributesForLink(link, linkExtraAttributes) {
+        if (linkExtraAttributes) {
+            Object.keys(linkExtraAttributes).forEach((key) => {
+                if (key !== 'href' && key !== 'routerLink') {
+                    this.renderer.setAttribute(link, key, linkExtraAttributes[key]);
+                }
+            });
+        }
+    }
+    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: EclMenuItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.1", type: EclMenuItemComponent, isStandalone: false, selector: "ecl-menu-item", inputs: { id: "id", label: "label", toggleAriaLabel: "toggleAriaLabel", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: "isCurrent", linkExtraAttributes: "linkExtraAttributes" }, outputs: { menuItemSelect: "menuItemSelect", menuItemCaret: "menuItemCaret", menuItemHover: "menuItemHover", menuItemHoverOut: "menuItemHoverOut", menuMegaItemSelect: "menuMegaItemSelect", menuItemFocus: "menuItemFocus", menuItemKeydown: "menuItemKeydown", menuMegaLastItemTab: "menuMegaLastItemTab" }, host: { listeners: { "mouseenter": "onItemMouseEnter($event)", "mouseleave": "onItemMouseLeave($event)" }, properties: { "attr.role": "this.role", "class": "this.cssClasses", "class.ecl-menu__item--has-children": "this.hasEclChildrenDataAttribute", "attr.aria-haspopup": "this.hasEclChildrenDataAttribute", "attr.aria-expanded": "this.isAriaExpanded" } }, queries: [{ propertyName: "submenu", first: true, predicate: i0.forwardRef(() => EclMenuMegaComponent), descendants: true }], viewQueries: [{ propertyName: "menuLink", first: true, predicate: ["menuLink"], descendants: true }, { propertyName: "menuButton", first: true, predicate: EclButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (href) {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [href]=\"href\"\n        [target]=\"target\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent\"\n        [attr.aria-current]=\"ariaCurrent\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n} @else {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [attr.tabindex]=\"tabindex || 0\"\n        [routerLink]=\"routerLink\"\n        [queryParams]=\"queryParams\"\n        [queryParamsHandling]=\"queryParamsHandling\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent\"\n        [attr.aria-current]=\"ariaCurrent\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n}\n\n@if (hasChildren) {\n    @if (isMobileBreakpoint) {\n        <button\n            eclButton\n            isIconOnly\n            variant=\"ghost\"\n            class=\"ecl-menu__button-caret\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel || 'Access item children'\"\n            (click)=\"onItemCaretClick($event)\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    } @else {\n        <button\n            eclButton\n            isIconOnly\n            variant=\"ghost\"\n            class=\"ecl-menu__button-caret\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel || 'Access item children'\"\n            [attr.aria-expanded]=\"isAriaExpanded\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    }\n}\n\n<ng-content select=\"ecl-menu-mega\"></ng-content>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: i3$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i4.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-menu-item', standalone: false, encapsulation: ViewEncapsulation.None, template: "@if (href) {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [href]=\"href\"\n        [target]=\"target\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent\"\n        [attr.aria-current]=\"ariaCurrent\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n} @else {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [attr.tabindex]=\"tabindex || 0\"\n        [routerLink]=\"routerLink\"\n        [queryParams]=\"queryParams\"\n        [queryParamsHandling]=\"queryParamsHandling\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent\"\n        [attr.aria-current]=\"ariaCurrent\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n}\n\n@if (hasChildren) {\n    @if (isMobileBreakpoint) {\n        <button\n            eclButton\n            isIconOnly\n            variant=\"ghost\"\n            class=\"ecl-menu__button-caret\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel || 'Access item children'\"\n            (click)=\"onItemCaretClick($event)\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    } @else {\n        <button\n            eclButton\n            isIconOnly\n            variant=\"ghost\"\n            class=\"ecl-menu__button-caret\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel || 'Access item children'\"\n            [attr.aria-expanded]=\"isAriaExpanded\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    }\n}\n\n<ng-content select=\"ecl-menu-mega\"></ng-content>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.BreakpointObserver }], propDecorators: { id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], toggleAriaLabel: [{
+                type: Input
+            }], routerLink: [{
+                type: Input
+            }], queryParams: [{
+                type: Input
+            }], queryParamsHandling: [{
+                type: Input
+            }], href: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], isCurrent: [{
+                type: Input
+            }], linkExtraAttributes: [{
+                type: Input
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], submenu: [{
+                type: ContentChild,
+                args: [forwardRef(() => EclMenuMegaComponent)]
+            }], menuLink: [{
+                type: ViewChild,
+                args: ['menuLink']
+            }], menuButton: [{
+                type: ViewChild,
+                args: [EclButtonComponent]
+            }], menuItemSelect: [{
+                type: Output
+            }], menuItemCaret: [{
+                type: Output
+            }], menuItemHover: [{
+                type: Output
+            }], menuItemHoverOut: [{
+                type: Output
+            }], menuMegaItemSelect: [{
+                type: Output
+            }], menuItemFocus: [{
+                type: Output
+            }], menuItemKeydown: [{
+                type: Output
+            }], menuMegaLastItemTab: [{
+                type: Output
+            }], hasEclChildrenDataAttribute: [{
+                type: HostBinding,
+                args: ['class.ecl-menu__item--has-children']
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-haspopup']
+            }], isAriaExpanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], onItemMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter', ['$event']]
+            }], onItemMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave', ['$event']]
+            }] } });
+
+class EclMenuComponent extends ECLBaseDirective {
+    get cssClasses() {
+        return [
+            super.getCssClasses('ecl-menu'),
+            'ecl-menu--transition',
+            this.isRtl ? 'ecl-menu--rtl' : '',
+        ].join(' ');
+    }
+    constructor(el, differs, cdkBreakpointObserver, renderer, eclRtlService, eclUserDeviceService, expandableItemSetDataService, platformId) {
+        super();
+        this.el = el;
+        this.differs = differs;
+        this.cdkBreakpointObserver = cdkBreakpointObserver;
+        this.renderer = renderer;
+        this.eclRtlService = eclRtlService;
+        this.eclUserDeviceService = eclUserDeviceService;
+        this.expandableItemSetDataService = expandableItemSetDataService;
+        this.platformId = platformId;
+        /**
+         * @deprecated To be removed in v19.
+         */
+        this.group = '1';
+        this.maxLines = 0;
+        this.menuItemSelect = new EventEmitter();
+        this.openHamburgerMenu = new EventEmitter();
+        this.isHamburgerMenuOpened = false;
+        this.role = 'navigation';
+        this.isTablet = false;
+        this.isMenuHidden = false;
+        this.isMobileBreakpoint = false;
+        this.hasOverflow = false;
+        this.isShowPrevBtn = false;
+        this.isShowNextBtn = false;
+        this.isPrevBtnCurrentClass = false;
+        this.menuListStyleRight = 'auto';
+        this.menuListStyleLeft = 'auto';
+        this.overlayStyleTop = null;
+        this.innerStyleTop = null;
+        this.destroy$ = new Subject();
+        this.isRtl = false;
+        this.totalItemsWidth = 0;
+        this.offsetLeft = 0;
+        this.TIMEOUT_INTERVAL = 150;
+        this.differ = this.differs.find([]).create();
+        afterNextRender(() => {
+            expandableItemSetDataService.bottomSpaceY$.pipe(takeUntil(this.destroy$)).subscribe(value => {
+                this.parentHeaderBottomSpaceY = value;
+            });
+            clearTimeout(this.resizeTimer);
+            this.resizeTimer = setTimeout(() => {
+                this.checkMenuItemsWidth();
+                this.checkMenuOverflow();
+            }, this.TIMEOUT_INTERVAL);
+            this.checkIsTabletDevice();
+        });
+    }
+    keyEvent(event) {
+        if (event.key === 'Escape') {
+            this.closeRootMenu();
+            this.hideMenu();
+            this.onCloseHamburgerMenu();
+        }
+    }
+    onResize() {
+        clearTimeout(this.resizeTimer);
+        this.resizeTimer = setTimeout(() => {
+            this.renderer.removeClass(this.el.nativeElement, 'ecl-menu--transition');
+            this.totalItemsWidth = 0;
+            this.checkMenuItemsWidth();
+            this.checkMenuOverflow();
+            this.renderer.addClass(this.el.nativeElement, 'ecl-menu--transition');
+        }, this.TIMEOUT_INTERVAL);
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.handleRtlChangeState();
+            this.observeBreakpointChanges();
+            this.observeSwipeGestures();
+        }
+    }
+    ngAfterContentInit() {
+        this.observeRootMenuItemsChanges();
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+        this.hammertime?.off('swipeleft');
+        this.hammertime?.off('swiperight');
+    }
+    onSwipeLeft() {
+        if (this.isMobileBreakpoint) {
+            this.onOpenHamburgerMenu();
+        }
+    }
+    onSwipeRight() {
+        if (this.isMobileBreakpoint) {
+            this.onCloseHamburgerMenu();
+        }
+    }
+    onOverlayClick() {
+        this.onCloseHamburgerMenu();
+    }
+    onMenuOpenCloseClick(evt) {
+        if (this.isHamburgerMenuOpened) {
+            this.onCloseHamburgerMenu();
+        }
+        else {
+            this.onOpenHamburgerMenu();
+        }
+        evt.preventDefault();
+    }
+    onMenuCloseClick(evt) {
+        this.onCloseHamburgerMenu();
+        this.closeRootMenu();
+        evt.preventDefault();
+    }
+    onMenuBackClick(evt) {
+        this.closeRootMenu();
+        evt.preventDefault();
+    }
+    onPrevBtnClick() {
+        this.slideMenuInitialState();
+        this.refreshDisplay();
+    }
+    onNextBtnClick() {
+        this.isShowPrevBtn = true;
+        this.isShowNextBtn = false;
+        if (this.isRtl) {
+            this.showNextSlideRtl();
+        }
+        else {
+            this.showNextSlideLtr();
+        }
+        this.refreshDisplay();
+    }
+    positionMenuOverlay(bottomSpaceY) {
+        if (this.isMobileBreakpoint && bottomSpaceY) {
+            this.overlayStyleTop = bottomSpaceY;
+            this.innerStyleTop = bottomSpaceY;
+        }
+        else {
+            this.overlayStyleTop = null;
+            this.innerStyleTop = null;
+        }
+    }
+    checkIsTabletDevice() {
+        const userAgent = navigator.userAgent.toLowerCase();
+        this.isTablet = this.eclUserDeviceService.isTabletDevice(userAgent);
+    }
+    slideMenuInitialState() {
+        this.offsetLeft = 0;
+        if (this.isRtl) {
+            this.menuListStyleRight = '0px';
+            this.menuListStyleLeft = 'auto';
+        }
+        else {
+            this.menuListStyleLeft = '0px';
+            this.menuListStyleRight = 'auto';
+        }
+        this.isShowPrevBtn = false;
+        this.isShowNextBtn = true;
+    }
+    showNextSlideLtr() {
+        const btnOffsetWidth = this.btnNext.el.nativeElement.offsetWidth;
+        this.offsetLeft =
+            this.lastVisibleItem.el.nativeElement.getBoundingClientRect().left -
+                this.itemsList.nativeElement.getBoundingClientRect().left -
+                btnOffsetWidth;
+        this.menuListStyleLeft = `-${this.offsetLeft}px`;
+        this.menuListStyleRight = 'auto';
+    }
+    showNextSlideRtl() {
+        const btnOffsetWidth = this.btnNext.el.nativeElement.offsetWidth;
+        this.offsetLeft =
+            this.itemsList.nativeElement.getBoundingClientRect().right -
+                this.lastVisibleItem.el.nativeElement.getBoundingClientRect().right -
+                btnOffsetWidth;
+        this.menuListStyleRight = `-${this.offsetLeft}px`;
+        this.menuListStyleLeft = 'auto';
+    }
+    refreshDisplay() {
+        this.eclRootMenuItems.forEach((item) => {
+            item.checkMenuItem(this.maxLines, this.isMobileBreakpoint);
+            item.isVisible = !item.isVisible;
+        });
+    }
+    checkMenuOverflow() {
+        this.hasOverflow = this.totalItemsWidth > this.innerSection.nativeElement.offsetWidth;
+        if (!this.hasOverflow || this.isMobileBreakpoint) {
+            this.resetOverflowValues();
+            return;
+        }
+        this.setClassForPrevNextButtons();
+        this.resetVisibilityIndicator();
+        if (this.offsetLeft === 0) {
+            this.manageOverflowEnd();
+        }
+        else {
+            this.manageOverflowBeginning();
+        }
+    }
+    manageOverflowBeginning() {
+        if (this.isRtl) {
+            this.eclRootMenuItems
+                .filter((item) => item.el.nativeElement.getBoundingClientRect().right <=
+                this.innerSection.nativeElement.getBoundingClientRect().right)
+                .forEach((el) => (el.isVisible = true));
+        }
+        else {
+            this.eclRootMenuItems
+                .filter((item) => item.el.nativeElement.getBoundingClientRect().left >= this.innerSection.nativeElement.getBoundingClientRect().left)
+                .forEach((el) => (el.isVisible = true));
+        }
+    }
+    manageOverflowEnd() {
+        this.isShowNextBtn = true;
+        if (this.isRtl) {
+            for (const item of this.eclRootMenuItems) {
+                if (item.el.nativeElement.getBoundingClientRect().left < this.itemsList.nativeElement.getBoundingClientRect().left) {
+                    this.lastVisibleItem = item;
+                    break;
+                }
+                item.isVisible = true;
+            }
+        }
+        else {
+            for (const item of this.eclRootMenuItems) {
+                if (item.el.nativeElement.getBoundingClientRect().right > this.itemsList.nativeElement.getBoundingClientRect().right) {
+                    this.lastVisibleItem = item;
+                    break;
+                }
+                item.isVisible = true;
+            }
+        }
+    }
+    resetVisibilityIndicator() {
+        this.eclRootMenuItems.forEach((item) => (item.isVisible = false));
+    }
+    resetOverflowValues() {
+        this.isShowPrevBtn = false;
+        this.isShowNextBtn = false;
+        this.hasOverflow = false;
+        this.menuListStyleLeft = '0px';
+        this.offsetLeft = 0;
+        this.totalItemsWidth = 0;
+        this.lastVisibleItem = null;
+    }
+    setClassForPrevNextButtons() {
+        this.currentItem = this.eclRootMenuItems.find((item) => item.isCurrent);
+        if (this.currentItem) {
+            if (this.currentItem.isVisible) {
+                this.isPrevBtnCurrentClass = true;
+            }
+            else {
+                this.isPrevBtnCurrentClass = false;
+            }
+        }
+    }
+    checkMenuItemsWidth() {
+        this.eclRootMenuItems.forEach((item) => {
+            item.checkMenuItem(this.maxLines, this.isMobileBreakpoint);
+            this.totalItemsWidth += item.el.nativeElement.offsetWidth;
+        });
+    }
+    get isMenuExpandedInMobile() {
+        return this.isMobileBreakpoint && this.isAnyRootMenuItemExpanded();
+    }
+    isAnyRootMenuItemExpanded() {
+        return this.eclRootMenuItems.some((item) => item.isExpanded);
+    }
+    createRootMenuItemsChangesObservable() {
+        return of(this.eclRootMenuItems).pipe(mergeWith(this.eclRootMenuItems.changes), takeUntil(this.destroy$));
+    }
+    onMenuItemChanges() {
+        this.diff = this.differ.diff(this.eclRootMenuItems);
+        if (!this.diff) {
+            this.eclRootMenuItems.forEach((rootItem) => {
+                this.connectMenuItemEvents(rootItem);
+            });
+        }
+        else {
+            this.diff.forEachAddedItem((change) => {
+                this.connectMenuItemEvents(change.item);
+            });
+        }
+    }
+    connectMenuItemEvents(item) {
+        item.menuItemSelect.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            this.onRootMenuItemSelected(evt);
+        });
+        item.menuItemHover.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            this.onRootMenuItemHovered(evt);
+        });
+        item.menuItemHoverOut.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            this.onRootMenuItemHoveredOut(evt);
+        });
+        item.menuItemCaret.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            this.onRootMenuItemCaret(evt);
+        });
+        item.menuMegaItemSelect.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            this.onMenuMegaItemSelected(item, evt);
+        });
+        item.menuItemFocus.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            this.onRootMenuItemFocused(item);
+        });
+        item.menuItemKeydown.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            this.onRootMenuItemKeydown(item, evt);
+        });
+        item.menuMegaLastItemTab.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            this.openCloseButton.onFocus();
+        });
+    }
+    onRootMenuItemFocused(item) {
+        const index = this.findIndexInArray(item);
+        if (!this.isMobileBreakpoint) {
+            this.closeRootMenu();
+        }
+        if (this.isMovePrevOverflow(index)) {
+            this.onPrevBtnClick();
+        }
+        else if (this.isMoveNextOverflow(index)) {
+            this.onNextBtnClick();
+        }
+    }
+    onRootMenuItemKeydown(item, evt) {
+        switch (evt.domEvent.key) {
+            case KeyCode.ARROW_DOWN: {
+                this.onRootMenuItemEnter(item);
+                break;
+            }
+            case KeyCode.ARROW_RIGHT: {
+                this.onNextMenuItemFocus(item);
+                break;
+            }
+            case KeyCode.ARROW_UP: {
+                this.onPrevMenuItemFocus(item);
+                break;
+            }
+            case KeyCode.ARROW_LEFT: {
+                this.onPrevMenuItemFocus(item);
+                break;
+            }
+            case KeyCode.ENTER: {
+                this.onRootMenuItemEnter(item);
+                break;
+            }
+            case KeyCode.ESCAPE: {
+                this.onRootMenuItemEscape(item, evt.domEvent);
+                break;
+            }
+            case KeyCode.TAB: {
+                if (this.isMobileBreakpoint && this.isLastItem(item)) {
+                    evt.preventDefault();
+                    this.openCloseButton.onFocus();
+                }
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    }
+    isLastItem(item) {
+        return this.eclRootMenuItems.last === item;
+    }
+    onRootMenuItemEscape(item, evt) {
+        if (item.isHovered) {
+            this.closeRootMenu();
+        }
+        evt.stopPropagation();
+    }
+    onPrevMenuItemFocus(item) {
+        const index = this.findIndexInArray(item);
+        if (index !== 0) {
+            this.getRootMenuItemsArray()[index - 1].onFocusFromNext();
+        }
+    }
+    onNextMenuItemFocus(item) {
+        const index = this.findIndexInArray(item);
+        if (index !== this.getRootMenuItemsArray().length - 1) {
+            this.getRootMenuItemsArray()[index + 1].onFocusFromPrev();
+        }
+    }
+    findIndexInArray(item) {
+        return this.getRootMenuItemsArray().findIndex(el => item === el);
+    }
+    isMoveNextOverflow(index) {
+        return !this.getRootMenuItemsArray()[index].isVisible && this.isShowNextBtn;
+    }
+    isMovePrevOverflow(index) {
+        return !this.getRootMenuItemsArray()[index].isVisible && this.isShowPrevBtn;
+    }
+    onRootMenuItemSelected(evt) {
+        const requestedRootMenuItem = evt.menuItem;
+        this.closeRootMenu();
+        this.deselectAllRootMenuItems();
+        this.deselectAllSubmenusItems();
+        this.selectMenuItem(requestedRootMenuItem);
+        this.onCloseHamburgerMenu();
+        if (this.hasOverflow) {
+            this.managePrevNextButtonsClassOnItemSelected();
+        }
+        this.sendMenuItemSelectEvent(evt);
+    }
+    managePrevNextButtonsClassOnItemSelected() {
+        if (this.isShowNextBtn) {
+            this.isPrevBtnCurrentClass = true;
+        }
+        else {
+            this.isPrevBtnCurrentClass = false;
+        }
+    }
+    onRootMenuItemHovered(evt) {
+        this.openSubmenu(evt.menuItem);
+    }
+    onRootMenuItemEnter(item) {
+        if (this.isMobileBreakpoint) {
+            this.closeRootMenuButOneItem(item);
+            this.toggleExpandedForMenuItem(item);
+        }
+        else {
+            if (!item.isHovered) {
+                this.openSubmenu(item);
+            }
+            else {
+                this.closeRootMenu();
+            }
+        }
+    }
+    openSubmenu(item) {
+        if (item.isVisible) {
+            if (!this.isMobileBreakpoint && item.submenu) {
+                this.checkMegaMenu(item);
+            }
+            item.isHovered = true;
+            this.closeRootMenuButOneItem(item);
+            this.showMenu();
+        }
+    }
+    getRootMenuItemsArray() {
+        return this.eclRootMenuItems.toArray();
+    }
+    checkMegaMenu(menuItem) {
+        if (menuItem.isFull) {
+            if (this.isRtl) {
+                menuItem.submenu.offsetRight = this.offsetLeft;
+            }
+            else {
+                menuItem.submenu.offsetLeft = this.offsetLeft;
+            }
+            return;
+        }
+        this.checkEnoughSpaceForMegaMenu(menuItem);
+    }
+    checkEnoughSpaceForMegaMenu(menuItem) {
+        const megaBounding = menuItem.submenu.el.nativeElement.getBoundingClientRect();
+        const containerBounding = this.innerSection.nativeElement.getBoundingClientRect();
+        const menuItemBounding = menuItem.el.nativeElement.getBoundingClientRect();
+        const megaWidth = megaBounding.width;
+        const containerWidth = containerBounding.width;
+        const menuItemPosition = menuItemBounding.left - containerBounding.left;
+        if (menuItemPosition + megaWidth > containerWidth) {
+            menuItem.submenu.isRtlDisplay = true;
+        }
+        else {
+            menuItem.submenu.isRtlDisplay = false;
+        }
+    }
+    onRootMenuItemHoveredOut(evt) {
+        if (!this.isMobileBreakpoint) {
+            this.closeRootMenu();
+        }
+    }
+    onRootMenuItemCaret(evt) {
+        const requestedRootMenuItem = evt.menuItem;
+        this.closeRootMenuButOneItem(requestedRootMenuItem);
+        this.toggleExpandedForMenuItem(requestedRootMenuItem);
+    }
+    onMenuMegaItemSelected(rootMenuItem, evt) {
+        const requestedSubmenuItem = evt.menuItem;
+        this.closeRootMenu();
+        this.deselectAllRootMenuItems();
+        this.deselectAllSubmenusItems();
+        this.selectMenuItem(rootMenuItem);
+        this.selectMenuItem(requestedSubmenuItem);
+        this.onCloseHamburgerMenu();
+        if (this.hasOverflow) {
+            this.managePrevNextButtonsClassOnItemSelected();
+        }
+        this.sendMenuItemSelectEvent(evt);
+        this.hideMenu();
+    }
+    deselectAllRootMenuItems() {
+        this.deselectMenuItems(this.eclRootMenuItems.toArray());
+    }
+    deselectAllSubmenusItems() {
+        this.eclRootMenuItems.forEach((rootItem) => {
+            this.deselectMenuItems(rootItem.children);
+        });
+    }
+    deselectMenuItems(items) {
+        items.forEach((it) => {
+            it.isCurrent = false;
+        });
+    }
+    selectMenuItem(item) {
+        item.isCurrent = true;
+        this.currentItem = item;
+    }
+    hideMenu() {
+        this.isMenuHidden = true;
+    }
+    showMenu() {
+        this.isMenuHidden = false;
+    }
+    closeRootMenu() {
+        this.eclRootMenuItems.forEach((it) => {
+            it.isExpanded = false;
+            it.isHovered = false;
+        });
+    }
+    closeRootMenuButOneItem(item) {
+        this.eclRootMenuItems
+            .filter((it) => it !== item)
+            .forEach((it) => {
+            it.isExpanded = false;
+            it.isHovered = false;
+        });
+    }
+    handleRtlChangeState() {
+        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {
+            if (rtlState !== undefined && this.isRtl !== rtlState) {
+                this.isRtl = rtlState;
+                if (this.hasOverflow) {
+                    this.slideMenuInitialState();
+                    setTimeout(() => this.checkMenuOverflow());
+                }
+            }
+        });
+    }
+    toggleExpandedForMenuItem(item) {
+        item.isExpanded = !item.isExpanded;
+    }
+    onOpenHamburgerMenu() {
+        this.disableScroll();
+        this.isHamburgerMenuOpened = true;
+        this.openHamburgerMenu.emit();
+        this.focusOnFirstItem();
+    }
+    onCloseHamburgerMenu() {
+        this.isHamburgerMenuOpened = false;
+        this.enableScroll();
+    }
+    disableScroll() {
+        document.body.classList.add('no-scroll');
+    }
+    enableScroll() {
+        document.body.classList.remove('no-scroll');
+    }
+    focusOnFirstItem() {
+        this.eclRootMenuItems.first.onFocusFromPrev();
+    }
+    sendMenuItemSelectEvent(evt) {
+        this.menuItemSelect.next(new EclMenuItemSelectEvent(evt.menuItem, evt.domEvent));
+    }
+    observeRootMenuItemsChanges() {
+        this.diff = this.differ.diff(this.eclRootMenuItems);
+        this.createRootMenuItemsChangesObservable().pipe(takeUntil(this.destroy$)).subscribe(this.onMenuItemChanges.bind(this));
+    }
+    observeSwipeGestures() {
+        // load hammerjs only on browser
+        if (isPlatformBrowser(this.platformId)) {
+            import('hammerjs').then((Hammer) => {
+                this.hammertime = new Hammer.default(document, { inputClass: Hammer.TouchInput });
+                this.hammertime.on('swipeleft', this.onSwipeLeft.bind(this));
+                this.hammertime.on('swiperight', this.onSwipeRight.bind(this));
+            }).catch((error) => {
+                console.error('Error loading HammerJS', error);
+            });
+        }
+    }
+    observeBreakpointChanges() {
+        this.cdkBreakpointObserver
+            .observe([('(max-width: 996px)')])
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((result) => {
+            this.isMobileBreakpoint = result.matches;
+            if (!this.isMobileBreakpoint) {
+                this.overlayStyleTop = null;
+                this.innerStyleTop = null;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i1$1.BreakpointObserver }, { token: i0.Renderer2 }, { token: i2$1.EclRtlService }, { token: i2$1.EclUserDeviceService }, { token: i2$1.EclExpandableItemSetDataService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.1", type: EclMenuComponent, isStandalone: false, selector: "ecl-menu", inputs: { group: "group", maxLines: ["maxLines", "maxLines", numberAttribute] }, outputs: { menuItemSelect: "menuItemSelect", openHamburgerMenu: "openHamburgerMenu" }, host: { listeners: { "keydown": "keyEvent($event)", "window:resize": "onResize()" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isHamburgerMenuOpened", "attr.role": "this.role", "class.ecl-menu--forced-mobile": "this.isTablet", "class.ecl-menu--forced-close": "this.isMenuHidden" } }, queries: [{ propertyName: "eclRootMenuItems", predicate: EclMenuItemComponent }], viewQueries: [{ propertyName: "innerSection", first: true, predicate: ["innerSection"], descendants: true }, { propertyName: "itemsList", first: true, predicate: ["itemsList"], descendants: true }, { propertyName: "btnPrevious", first: true, predicate: ["btnPrevious"], descendants: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true }, { propertyName: "openCloseButton", first: true, predicate: ["openCloseButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-menu__overlay\" (click)=\"onOverlayClick()\" [style.top.px]=\"overlayStyleTop\"></div>\n<div class=\"ecl-container ecl-menu__container\">\n    <button #openCloseButton eclButton isIconOnly variant=\"tertiary\" type=\"button\" class=\"ecl-menu__open\"\n        (click)=\"onMenuOpenCloseClick($event)\" [attr.aria-expanded]=\"isHamburgerMenuOpened\">\n        <ecl-icon icon=\"hamburger\" size=\"m\"></ecl-icon>\n        <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        @if (isHamburgerMenuOpened) {\n        <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n        } @else {\n        <span eclButtonLabel>{{ 'ecl.menu.MENU' | translate }}</span>\n        }\n    </button>\n\n    <section\n        class=\"ecl-menu__inner\"\n        #innerSection\n        [class.ecl-menu__inner--expanded]=\"isMenuExpandedInMobile\"\n        [class.ecl-menu__inner--has-overflow]=\"hasOverflow\"\n        aria-label=\"Menu\" [style.top.px]=\"innerStyleTop\">\n        <header class=\"ecl-menu__inner-header\">\n            <button\n                eclButton\n                variant=\"ghost\"\n                class=\"ecl-menu__close\"\n                containerStyleClass=\"ecl-menu__close-container\"\n                (click)=\"onMenuCloseClick($event)\">\n                <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n                <ecl-icon icon=\"close\" size=\"s\"></ecl-icon>\n            </button>\n\n            <div class=\"ecl-menu__title\">{{ 'ecl.menu.MENU' | translate }}</div>\n\n            <button eclButton variant=\"ghost\" class=\"ecl-menu__back\" (click)=\"onMenuBackClick($event)\">\n                <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.BACK' | translate }}</span>\n            </button>\n        </header>\n        <button\n            eclButton\n            #btnPrevious\n            tabindex=\"-1\"\n            variant=\"ghost\"\n            isIconOnly\n            class=\"ecl-menu__item ecl-menu__items-previous\"\n            [class.ecl-menu__item--current]=\"isPrevBtnCurrentClass\"\n            [style.display]=\"isShowPrevBtn ? 'flex' : 'none'\"\n            (click)=\"onPrevBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.PREVIOUS' | translate }}</span>\n        </button>\n        <button\n            eclButton\n            #btnNext\n            variant=\"ghost\"\n            tabindex=\"-1\"\n            isIconOnly\n            class=\"ecl-menu__item ecl-menu__items-next\"\n            [class.ecl-menu__item--current]=\"!isPrevBtnCurrentClass\"\n            [style.display]=\"isShowNextBtn ? 'flex' : 'none'\"\n            (click)=\"onNextBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.NEXT' | translate }}</span>\n        </button>\n        <ul class=\"ecl-menu__list\" #itemsList [style.right]=\"menuListStyleRight\" [style.left]=\"menuListStyleLeft\">\n            <ng-content></ng-content>\n        </ul>\n    </section>\n</div>\n", styles: [":host{display:block}\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: i3$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-menu', standalone: false, template: "<div class=\"ecl-menu__overlay\" (click)=\"onOverlayClick()\" [style.top.px]=\"overlayStyleTop\"></div>\n<div class=\"ecl-container ecl-menu__container\">\n    <button #openCloseButton eclButton isIconOnly variant=\"tertiary\" type=\"button\" class=\"ecl-menu__open\"\n        (click)=\"onMenuOpenCloseClick($event)\" [attr.aria-expanded]=\"isHamburgerMenuOpened\">\n        <ecl-icon icon=\"hamburger\" size=\"m\"></ecl-icon>\n        <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        @if (isHamburgerMenuOpened) {\n        <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n        } @else {\n        <span eclButtonLabel>{{ 'ecl.menu.MENU' | translate }}</span>\n        }\n    </button>\n\n    <section\n        class=\"ecl-menu__inner\"\n        #innerSection\n        [class.ecl-menu__inner--expanded]=\"isMenuExpandedInMobile\"\n        [class.ecl-menu__inner--has-overflow]=\"hasOverflow\"\n        aria-label=\"Menu\" [style.top.px]=\"innerStyleTop\">\n        <header class=\"ecl-menu__inner-header\">\n            <button\n                eclButton\n                variant=\"ghost\"\n                class=\"ecl-menu__close\"\n                containerStyleClass=\"ecl-menu__close-container\"\n                (click)=\"onMenuCloseClick($event)\">\n                <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n                <ecl-icon icon=\"close\" size=\"s\"></ecl-icon>\n            </button>\n\n            <div class=\"ecl-menu__title\">{{ 'ecl.menu.MENU' | translate }}</div>\n\n            <button eclButton variant=\"ghost\" class=\"ecl-menu__back\" (click)=\"onMenuBackClick($event)\">\n                <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.BACK' | translate }}</span>\n            </button>\n        </header>\n        <button\n            eclButton\n            #btnPrevious\n            tabindex=\"-1\"\n            variant=\"ghost\"\n            isIconOnly\n            class=\"ecl-menu__item ecl-menu__items-previous\"\n            [class.ecl-menu__item--current]=\"isPrevBtnCurrentClass\"\n            [style.display]=\"isShowPrevBtn ? 'flex' : 'none'\"\n            (click)=\"onPrevBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.PREVIOUS' | translate }}</span>\n        </button>\n        <button\n            eclButton\n            #btnNext\n            variant=\"ghost\"\n            tabindex=\"-1\"\n            isIconOnly\n            class=\"ecl-menu__item ecl-menu__items-next\"\n            [class.ecl-menu__item--current]=\"!isPrevBtnCurrentClass\"\n            [style.display]=\"isShowNextBtn ? 'flex' : 'none'\"\n            (click)=\"onNextBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.NEXT' | translate }}</span>\n        </button>\n        <ul class=\"ecl-menu__list\" #itemsList [style.right]=\"menuListStyleRight\" [style.left]=\"menuListStyleLeft\">\n            <ng-content></ng-content>\n        </ul>\n    </section>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: i1$1.BreakpointObserver }, { type: i0.Renderer2 }, { type: i2$1.EclRtlService }, { type: i2$1.EclUserDeviceService }, { type: i2$1.EclExpandableItemSetDataService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { group: [{
+                type: Input
+            }], maxLines: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], eclRootMenuItems: [{
+                type: ContentChildren,
+                args: [EclMenuItemComponent]
+            }], innerSection: [{
+                type: ViewChild,
+                args: ['innerSection']
+            }], itemsList: [{
+                type: ViewChild,
+                args: ['itemsList']
+            }], btnPrevious: [{
+                type: ViewChild,
+                args: ['btnPrevious']
+            }], btnNext: [{
+                type: ViewChild,
+                args: ['btnNext']
+            }], openCloseButton: [{
+                type: ViewChild,
+                args: ['openCloseButton']
+            }], menuItemSelect: [{
+                type: Output
+            }], openHamburgerMenu: [{
+                type: Output
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], isHamburgerMenuOpened: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], isTablet: [{
+                type: HostBinding,
+                args: ['class.ecl-menu--forced-mobile']
+            }], isMenuHidden: [{
+                type: HostBinding,
+                args: ['class.ecl-menu--forced-close']
+            }], keyEvent: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+const COMPONENTS = [EclMenuComponent, EclMenuItemComponent, EclMenuMegaComponent, EclMenuMegaItemComponent];
+class EclMenuComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMenuComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMenuComponentModule, declarations: [EclMenuComponent, EclMenuItemComponent, EclMenuMegaComponent, EclMenuMegaItemComponent], imports: [EclButtonComponentModule,
+            EclIconComponentModule,
+            EclLinkDirectiveModule,
+            CommonModule,
+            RouterModule,
+            LayoutModule,
+            TranslateModule], exports: [EclMenuComponent, EclMenuItemComponent, EclMenuMegaComponent, EclMenuMegaItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclMenuComponentModule, 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: EclMenuComponentModule, 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 { EclMenuComponent, EclMenuComponentModule, EclMenuItemCaretEvent, EclMenuItemComponent, EclMenuItemFocusEvent, EclMenuItemHoverEvent, EclMenuItemHoverOutEvent, EclMenuItemKeydownEvent, EclMenuItemParentFocusEvent, EclMenuItemSelectEvent, EclMenuMegaComponent, EclMenuMegaItemComponent };
+//# sourceMappingURL=eui-ecl-components-ecl-menu.mjs.map