@eui/ecl 21.0.0-alpha.14 → 21.0.0-alpha.16

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

@@ -7,14 +7,13 @@ import { TranslateModule } from '@ngx-translate/core';
 import { Subject, of } from 'rxjs';
 import { mergeWith, takeUntil } from 'rxjs/operators';
 import { EclDomEvent, ECLBaseDirective, KeyCode, EclRtlService, EclUserDeviceService } from '@eui/ecl/core';
-import * as i1$1 from '@eui/ecl/components/ecl-button';
-import { EclButtonModule, EclButtonComponent } from '@eui/ecl/components/ecl-button';
-import * as i1 from '@angular/router';
-import { RouterModule } from '@angular/router';
-import * as i4 from '@eui/ecl/components/ecl-link';
-import { EclLinkDirective, EclLinkModule } from '@eui/ecl/components/ecl-link';
-import * as i3 from '@eui/ecl/components/ecl-icon';
-import { EclIconComponent, EclIconModule } from '@eui/ecl/components/ecl-icon';
+import * as i1 from '@eui/ecl/components/ecl-button';
+import { EclButtonComponent, EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';
+import { RouterLink, RouterLinkWithHref } from '@angular/router';
+import * as i3 from '@eui/ecl/components/ecl-link';
+import { EclLinkDirective, EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';
+import * as i2 from '@eui/ecl/components/ecl-icon';
+import { EclIconComponent, EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';
 
 class EclMenuItemSelectEvent extends EclDomEvent {
     constructor(menuItem, domEvent = null) {
@@ -157,12 +156,12 @@ class EclMenuMegaItemComponent extends ECLBaseDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMenuMegaItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.1", type: EclMenuMegaItemComponent, isStandalone: true, 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMenuMegaItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EclMenuMegaItemComponent, isStandalone: true, 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMenuMegaItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMenuMegaItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-menu-mega-item', imports: [NgTemplateOutlet, RouterModule], 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"] }]
+            args: [{ selector: 'ecl-menu-mega-item', imports: [NgTemplateOutlet, RouterLink], 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"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], label: [{
@@ -348,10 +347,10 @@ class EclMenuMegaComponent extends ECLBaseDirective {
     getMegaMenuItemsArray() {
         return this.eclMenuMegaItems.toArray();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMenuMegaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclMenuMegaComponent, isStandalone: true, 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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMenuMegaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclMenuMegaComponent, isStandalone: true, 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: "21.0.0-next.1", ngImport: i0, type: EclMenuMegaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMenuMegaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-menu-mega', template: "<ul class=\"ecl-menu__sublist\">\n    <ng-content></ng-content>\n</ul>\n" }]
         }], ctorParameters: () => [], propDecorators: { isRtlDisplay: [{
@@ -605,7 +604,6 @@ class EclMenuItemComponent extends ECLBaseDirective {
                 break;
             }
             case KeyCode.ENTER: {
-                evt.preventDefault();
                 this.onItemClick(evt);
                 break;
             }
@@ -739,12 +737,12 @@ class EclMenuItemComponent extends ECLBaseDirective {
             this.isMobileBreakpoint = result.matches;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.1", type: EclMenuItemComponent, isStandalone: true, 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: EclButtonModule }, { kind: "component", type: i1$1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "ngmodule", type: EclIconModule }, { kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "ngmodule", type: EclLinkModule }, { kind: "directive", type: i4.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EclMenuItemComponent, isStandalone: true, 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i3.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-menu-item', imports: [NgTemplateOutlet, RouterModule, EclButtonModule, EclIconModule, EclLinkModule], 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" }]
+            args: [{ selector: 'ecl-menu-item', imports: [NgTemplateOutlet, RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK], 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: () => [], propDecorators: { id: [{
                 type: Input
             }], label: [{
@@ -1449,12 +1447,12 @@ class EclMenuComponent extends ECLBaseDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.1", type: EclMenuComponent, isStandalone: true, selector: "ecl-menu", inputs: { maxLines: ["maxLines", "maxLines", numberAttribute] }, outputs: { menuItemSelect: "menuItemSelect", openHamburgerMenu: "openHamburgerMenu" }, host: { listeners: { "keydown": "keyEvent($event)" }, 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\" [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: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: EclButtonModule }, { kind: "component", type: i1$1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i1$1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "ngmodule", type: EclIconModule }, { kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EclMenuComponent, isStandalone: true, selector: "ecl-menu", inputs: { maxLines: ["maxLines", "maxLines", numberAttribute] }, outputs: { menuItemSelect: "menuItemSelect", openHamburgerMenu: "openHamburgerMenu" }, host: { listeners: { "keydown": "keyEvent($event)" }, 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\" [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: "ngmodule", type: TranslateModule }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-menu', imports: [TranslateModule, EclButtonModule, EclIconModule], template: "<div class=\"ecl-menu__overlay\" [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"] }]
+            args: [{ selector: 'ecl-menu', imports: [TranslateModule, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON], template: "<div class=\"ecl-menu__overlay\" [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: () => [], propDecorators: { maxLines: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
@@ -1507,11 +1505,11 @@ const COMPONENTS = [EclMenuComponent, EclMenuItemComponent, EclMenuMegaComponent
  * @deprecated Use {@link EUI_ECL_MENU} instead.
  */
 class EclMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMenuModule, imports: [EclMenuComponent, EclMenuItemComponent, EclMenuMegaComponent, EclMenuMegaItemComponent], exports: [EclMenuComponent, EclMenuItemComponent, EclMenuMegaComponent, EclMenuMegaItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMenuModule, imports: [EclMenuComponent, EclMenuItemComponent, EclMenuMegaItemComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMenuModule, imports: [EclMenuComponent, EclMenuItemComponent, EclMenuMegaComponent, EclMenuMegaItemComponent], exports: [EclMenuComponent, EclMenuItemComponent, EclMenuMegaComponent, EclMenuMegaItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMenuModule, imports: [EclMenuComponent, EclMenuItemComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...COMPONENTS],