@eui/ecl 23.0.0-alpha.6 → 23.0.0-alpha.8

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

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, EventEmitter, inject, Renderer2, booleanAttribute, HostListener, Output, ViewChild, ContentChildren, forwardRef, Input, HostBinding, Component, ElementRef, IterableDiffers, DOCUMENT, afterNextRender, ContentChild, ViewEncapsulation, numberAttribute, output, signal, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
+import { input, contentChildren, forwardRef, viewChild, EventEmitter, inject, Renderer2, booleanAttribute, HostListener, Output, Input, HostBinding, Component, ElementRef, IterableDiffers, ContentChildren, DOCUMENT, contentChild, afterNextRender, ViewEncapsulation, numberAttribute, output, signal, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
 import { EuiAppShellService } from '@eui/core';
 import * as i1 from '@eui/ecl/components/ecl-button';
 import { EclButtonComponent, EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';
@@ -91,6 +91,21 @@ class EclMenuMegaItemComponent extends ECLBaseDirective {
         this.isSeeAll = false;
         this.linkExtraAttributes = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "linkExtraAttributes" }] : /* istanbul ignore next */ []));
+        /**
+         * If menu item includes any icon, added by the user (for example for 'external' link).
+         */
+        this.iconComponents = contentChildren(forwardRef(() => EclIconComponent), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconComponents" }] : /* istanbul ignore next */ []));
+        /**
+         * If menu item includes any links, added by the user.
+         */
+        this.links = contentChildren(forwardRef(() => EclLinkDirective), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "links" }] : /* istanbul ignore next */ []));
+        /**
+         * The actual link of the menu item.
+         */
+        this.megaMenuLink = viewChild('megaMenuLink', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "megaMenuLink" }] : /* istanbul ignore next */ []));
         this.menuItemSelect = new EventEmitter();
         this.menuItemKeydown = new EventEmitter();
         this.hasChildren = false;
@@ -100,7 +115,7 @@ class EclMenuMegaItemComponent extends ECLBaseDirective {
     }
     ngAfterViewInit() {
         this.manageContentChildren();
-        this.setExtraAttributesForLink(this.megaMenuLink?.nativeElement, this.linkExtraAttributes());
+        this.setExtraAttributesForLink(this.megaMenuLink()?.nativeElement, this.linkExtraAttributes());
     }
     /**
      *
@@ -125,7 +140,7 @@ class EclMenuMegaItemComponent extends ECLBaseDirective {
      * Focus should be set on the underlying <a> element.
      */
     onFocus() {
-        this.megaMenuLink.nativeElement.focus();
+        this.megaMenuLink().nativeElement.focus();
     }
     onKeydown(evt) {
         if (evt.key === KeyCode.ENTER) {
@@ -137,16 +152,16 @@ class EclMenuMegaItemComponent extends ECLBaseDirective {
      * Adds specific classes to content children (icons or links).
      */
     manageContentChildren() {
-        if (this.iconComponents) {
+        if (this.iconComponents()) {
             setTimeout(() => {
-                this.iconComponents.forEach((icn) => {
+                this.iconComponents().forEach((icn) => {
                     icn.baseDirective.class = 'ecl-menu__sublink-icon';
                 });
             });
         }
-        if (this.links) {
+        if (this.links()) {
             setTimeout(() => {
-                this.links.forEach((icn) => {
+                this.links().forEach((icn) => {
                     icn.class = icn.class ? icn.class + ' ecl-menu__sublink' : 'ecl-menu__sublink';
                 });
             });
@@ -162,7 +177,7 @@ class EclMenuMegaItemComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMenuMegaItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclMenuMegaItemComponent, isStandalone: true, selector: "ecl-menu-mega-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, isCurrent: { classPropertyName: "isCurrent", publicName: "isCurrent", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, isSeeAll: { classPropertyName: "isSeeAll", publicName: "isSeeAll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, linkExtraAttributes: { classPropertyName: "linkExtraAttributes", publicName: "linkExtraAttributes", isSignal: true, isRequired: false, transformFunction: null } }, 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", "browserUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclMenuMegaItemComponent, isStandalone: true, selector: "ecl-menu-mega-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, isCurrent: { classPropertyName: "isCurrent", publicName: "isCurrent", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, isSeeAll: { classPropertyName: "isSeeAll", publicName: "isSeeAll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, linkExtraAttributes: { classPropertyName: "linkExtraAttributes", publicName: "linkExtraAttributes", isSignal: true, isRequired: false, transformFunction: null } }, 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), isSignal: true }, { propertyName: "links", predicate: i0.forwardRef(() => EclLinkDirective), isSignal: true }], viewQueries: [{ propertyName: "megaMenuLink", first: true, predicate: ["megaMenuLink"], descendants: true, isSignal: 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", "browserUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMenuMegaItemComponent, decorators: [{
             type: Component,
@@ -191,16 +206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             }, {
                 type: HostBinding,
                 args: ['class.ecl-menu__see-all']
-            }], linkExtraAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkExtraAttributes", required: false }] }], iconComponents: [{
-                type: ContentChildren,
-                args: [forwardRef(() => EclIconComponent)]
-            }], links: [{
-                type: ContentChildren,
-                args: [forwardRef(() => EclLinkDirective)]
-            }], megaMenuLink: [{
-                type: ViewChild,
-                args: ['megaMenuLink']
-            }], menuItemSelect: [{
+            }], linkExtraAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkExtraAttributes", required: false }] }], iconComponents: [{ type: i0.ContentChildren, args: [forwardRef(() => EclIconComponent), { isSignal: true }] }], links: [{ type: i0.ContentChildren, args: [forwardRef(() => EclLinkDirective), { isSignal: true }] }], megaMenuLink: [{ type: i0.ViewChild, args: ['megaMenuLink', { isSignal: true }] }], menuItemSelect: [{
                 type: Output
             }], menuItemKeydown: [{
                 type: Output
@@ -398,10 +404,10 @@ class EclMenuItemComponent extends ECLBaseDirective {
         return this.isCurrent ? true : null;
     }
     get hasChildren() {
-        return !!this.submenu;
+        return !!this.submenu();
     }
     get children() {
-        return this.hasChildren ? this.submenu.eclMenuMegaItems.toArray() : [];
+        return this.hasChildren ? this.submenu().eclMenuMegaItems.toArray() : [];
     }
     constructor() {
         super();
@@ -439,6 +445,18 @@ class EclMenuItemComponent extends ECLBaseDirective {
         this.isVisible = true;
         this.doc = inject(DOCUMENT);
         this.window = this.doc.defaultView; // Window | null
+        this.submenu = contentChild(forwardRef(() => EclMenuMegaComponent), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "submenu" }] : /* istanbul ignore next */ []));
+        /**
+         * The <a> element of the menu item, when there are no children.
+         */
+        this.menuLink = viewChild('menuLink', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuLink" }] : /* istanbul ignore next */ []));
+        /**
+         * The <button> element of the menu item, when item has children.
+         */
+        this.menuButton = viewChild(EclButtonComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuButton" }] : /* istanbul ignore next */ []));
         this.menuItemSelect = new EventEmitter();
         this.menuItemCaret = new EventEmitter();
         /**
@@ -459,7 +477,7 @@ class EclMenuItemComponent extends ECLBaseDirective {
         this.appShell = inject(EuiAppShellService);
         afterNextRender(() => {
             this.observeBreakpointChanges();
-            this.setExtraAttributesForLink(this.menuLink?.nativeElement, this.linkExtraAttributes());
+            this.setExtraAttributesForLink(this.menuLink()?.nativeElement, this.linkExtraAttributes());
         });
     }
     onItemMouseEnter(evt) {
@@ -474,16 +492,17 @@ class EclMenuItemComponent extends ECLBaseDirective {
     }
     ngAfterContentInit() {
         // Subscibe to submenu component events.
-        if (this.submenu) {
-            this.submenu.menuItemSelect.pipe(takeUntil(this.destroy$)).subscribe((it) => {
+        const submenu = this.submenu();
+        if (submenu) {
+            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) => {
+            submenu.menuMegaItemParentFocus.pipe(takeUntil(this.destroy$)).subscribe((it) => {
                 if (!this.isMobileBreakpoint) {
                     this.onFocusFromSubmenu();
                 }
             });
-            this.submenu.menuMegaLastItemTab.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            submenu.menuMegaLastItemTab.pipe(takeUntil(this.destroy$)).subscribe(() => {
                 if (this.isMobileBreakpoint) {
                     this.menuMegaLastItemTab.next();
                 }
@@ -527,7 +546,7 @@ class EclMenuItemComponent extends ECLBaseDirective {
      *  the next root menu item.
      */
     onFocusFromNext() {
-        if (this.menuButton) {
+        if (this.menuButton()) {
             this.onButtonFocus();
         }
         else {
@@ -642,7 +661,7 @@ class EclMenuItemComponent extends ECLBaseDirective {
         if (maxLines < 1)
             return;
         const currentItem = this.el.nativeElement;
-        const currentLink = this.menuLink.nativeElement;
+        const currentLink = this.menuLink().nativeElement;
         if (isMobileBreakpoint) {
             this.renderer.setStyle(currentLink, 'width', '100%');
             return;
@@ -656,22 +675,23 @@ class EclMenuItemComponent extends ECLBaseDirective {
         this.renderer.removeStyle(currentItem, 'alignItems');
     }
     onLinkEscape(evt) {
-        if (this.menuButton) {
-            this.menuButton.el.nativeElement.focus();
+        const menuButton = this.menuButton();
+        if (menuButton) {
+            menuButton.el.nativeElement.focus();
             evt.stopPropagation();
         }
         else {
-            this.menuLink.nativeElement.blur();
+            this.menuLink().nativeElement.blur();
         }
     }
     selectFirstMegaMenuItem() {
-        this.submenu.selectFirstSubItem();
+        this.submenu().selectFirstSubItem();
     }
     onLinkFocus() {
-        this.menuLink.nativeElement.focus();
+        this.menuLink().nativeElement.focus();
     }
     onLinkNextFocus(evt) {
-        if (this.menuButton) {
+        if (this.menuButton()) {
             this.onButtonFocus();
         }
         else {
@@ -679,7 +699,7 @@ class EclMenuItemComponent extends ECLBaseDirective {
         }
     }
     onButtonFocus() {
-        this.menuButton.el.nativeElement.focus();
+        this.menuButton().el.nativeElement.focus();
     }
     getMenuItemLinkMaxHeight(linkStyle, maxLines) {
         return parseInt(linkStyle.lineHeight, 10) * maxLines + parseInt(linkStyle.paddingTop, 10) + parseInt(linkStyle.paddingBottom, 10);
@@ -715,13 +735,13 @@ class EclMenuItemComponent extends ECLBaseDirective {
     }
     getClassDependingChildrenCnt() {
         if (this.hasChildren) {
-            if (this.submenu.eclMenuMegaItems.length < 5 /* ColTrigger.COL1_TRIGGER */) {
+            if (this.submenu().eclMenuMegaItems.length < 5 /* ColTrigger.COL1_TRIGGER */) {
                 return 'ecl-menu__item--col1';
             }
-            else if (this.submenu.eclMenuMegaItems.length < 9 /* ColTrigger.COL2_TRIGGER */) {
+            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 */) {
+            else if (this.submenu().eclMenuMegaItems.length < 13 /* ColTrigger.COL3_TRIGGER */) {
                 return 'ecl-menu__item--col3';
             }
             else {
@@ -732,7 +752,8 @@ class EclMenuItemComponent extends ECLBaseDirective {
         return '';
     }
     hasSubmenuAnySelections() {
-        return this.submenu && !!this.submenu.eclMenuMegaItems.find((it) => it.isCurrent);
+        const submenu = this.submenu();
+        return submenu && !!submenu.eclMenuMegaItems.find((it) => it.isCurrent);
     }
     setExtraAttributesForLink(link, linkExtraAttributes) {
         if (linkExtraAttributes) {
@@ -752,12 +773,12 @@ class EclMenuItemComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclMenuItemComponent, isStandalone: true, selector: "ecl-menu-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, toggleAriaLabel: { classPropertyName: "toggleAriaLabel", publicName: "toggleAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, isCurrent: { classPropertyName: "isCurrent", publicName: "isCurrent", isSignal: false, isRequired: false, transformFunction: null }, linkExtraAttributes: { classPropertyName: "linkExtraAttributes", publicName: "linkExtraAttributes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemSelect: "menuItemSelect", menuItemCaret: "menuItemCaret", menuItemHover: "menuItemHover", menuItemHoverOut: "menuItemHoverOut", menuMegaItemSelect: "menuMegaItemSelect", menuItemFocus: "menuItemFocus", menuItemKeydown: "menuItemKeydown", menuMegaLastItemTab: "menuMegaLastItemTab" }, host: { attributes: { "role": "listitem" }, listeners: { "mouseenter": "onItemMouseEnter($event)", "mouseleave": "onItemMouseLeave($event)" }, properties: { "class": "cssClasses", "class.ecl-menu__item--has-children": "hasEclChildrenDataAttribute", "attr.aria-haspopup": "hasEclChildrenDataAttribute", "attr.data-expanded": "isDataExpanded" } }, 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            variant=\"tertiary\"\n            class=\"ecl-menu__button-caret ecl-button--neutral\"\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=\"m\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    } @else {\n        <button\n            eclButton\n            variant=\"tertiary\"\n            class=\"ecl-menu__button-caret ecl-button--neutral\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel() || 'Access item children'\"\n            [attr.data-expanded]=\"isDataExpanded\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"m\" 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", "browserUrl", "routerLink"] }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "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: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclMenuItemComponent, isStandalone: true, selector: "ecl-menu-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, toggleAriaLabel: { classPropertyName: "toggleAriaLabel", publicName: "toggleAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, isCurrent: { classPropertyName: "isCurrent", publicName: "isCurrent", isSignal: false, isRequired: false, transformFunction: null }, linkExtraAttributes: { classPropertyName: "linkExtraAttributes", publicName: "linkExtraAttributes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemSelect: "menuItemSelect", menuItemCaret: "menuItemCaret", menuItemHover: "menuItemHover", menuItemHoverOut: "menuItemHoverOut", menuMegaItemSelect: "menuMegaItemSelect", menuItemFocus: "menuItemFocus", menuItemKeydown: "menuItemKeydown", menuMegaLastItemTab: "menuMegaLastItemTab" }, host: { attributes: { "role": "listitem" }, listeners: { "mouseenter": "onItemMouseEnter($event)", "mouseleave": "onItemMouseLeave($event)" }, properties: { "class": "cssClasses", "class.ecl-menu__item--has-children": "hasEclChildrenDataAttribute", "attr.aria-haspopup": "hasEclChildrenDataAttribute", "attr.data-expanded": "isDataExpanded" } }, queries: [{ propertyName: "submenu", first: true, predicate: i0.forwardRef(() => EclMenuMegaComponent), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menuLink", first: true, predicate: ["menuLink"], descendants: true, isSignal: true }, { propertyName: "menuButton", first: true, predicate: EclButtonComponent, descendants: true, isSignal: 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            variant=\"tertiary\"\n            class=\"ecl-menu__button-caret ecl-button--neutral\"\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=\"m\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    } @else {\n        <button\n            eclButton\n            variant=\"tertiary\"\n            class=\"ecl-menu__button-caret ecl-button--neutral\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel() || 'Access item children'\"\n            [attr.data-expanded]=\"isDataExpanded\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"m\" 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", "browserUrl", "routerLink"] }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "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: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-menu-item', imports: [NgTemplateOutlet, RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK], encapsulation: ViewEncapsulation.None, host: {
-                        'role': 'listitem',
+                        role: 'listitem',
                         '[class]': 'cssClasses',
                         '[class.ecl-menu__item--has-children]': 'hasEclChildrenDataAttribute',
                         '[attr.aria-haspopup]': 'hasEclChildrenDataAttribute',
@@ -773,16 +794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 type: Input
             }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], isCurrent: [{
                 type: Input
-            }], linkExtraAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkExtraAttributes", required: false }] }], submenu: [{
-                type: ContentChild,
-                args: [forwardRef(() => EclMenuMegaComponent)]
-            }], menuLink: [{
-                type: ViewChild,
-                args: ['menuLink']
-            }], menuButton: [{
-                type: ViewChild,
-                args: [EclButtonComponent]
-            }], menuItemSelect: [{
+            }], linkExtraAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkExtraAttributes", required: false }] }], submenu: [{ type: i0.ContentChild, args: [forwardRef(() => EclMenuMegaComponent), { isSignal: true }] }], menuLink: [{ type: i0.ViewChild, args: ['menuLink', { isSignal: true }] }], menuButton: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EclButtonComponent), { isSignal: true }] }], menuItemSelect: [{
                 type: Output
             }], menuItemCaret: [{
                 type: Output
@@ -819,6 +831,31 @@ class EclMenuComponent extends ECLBaseDirective {
          *  Depending on that value, the labels can drop on 2-3 lines, if they are longer.
          */
         this.maxLines = input(0, { ...(ngDevMode ? { debugName: "maxLines" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * The element, that wraps the main menu items and the back and forth button.
+         */
+        this.innerSection = viewChild('innerSection', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "innerSection" }] : /* istanbul ignore next */ []));
+        /**
+         * The element that wraps the main menu items.
+         */
+        this.itemsList = viewChild('itemsList', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemsList" }] : /* istanbul ignore next */ []));
+        /**
+         * When there is an overflow of the menu, the 'previous' button to navigate back to first hidden items.
+         */
+        this.btnPrevious = viewChild('btnPrevious', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "btnPrevious" }] : /* istanbul ignore next */ []));
+        /**
+         * When there is an overflow of the menu, the 'next' button to navigate to next hidden items.
+         */
+        this.btnNext = viewChild('btnNext', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "btnNext" }] : /* istanbul ignore next */ []));
+        /**
+         * The button to open/close menu in mobile mode.
+         */
+        this.openCloseButton = viewChild('openCloseButton', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openCloseButton" }] : /* istanbul ignore next */ []));
         this.menuItemSelect = output();
         this.openHamburgerMenu = output();
         this.closeHamburgerMenu = output();
@@ -1016,7 +1053,7 @@ class EclMenuComponent extends ECLBaseDirective {
                 // Re-enable hover after resize completes
                 this.ignoreHover = false;
             }, this.TIMEOUT_INTERVAL);
-        }).observe(this.innerSection.nativeElement);
+        }).observe(this.innerSection().nativeElement);
     }
     slideMenuInitialState() {
         this.offsetLeft = 0;
@@ -1032,18 +1069,18 @@ class EclMenuComponent extends ECLBaseDirective {
         this.isShowNextBtn.set(true);
     }
     showNextSlideLtr() {
-        const btnOffsetWidth = this.btnNext.el.nativeElement.offsetWidth;
+        const btnOffsetWidth = this.btnNext().el.nativeElement.offsetWidth;
         this.offsetLeft =
             this.lastVisibleItem.el.nativeElement.getBoundingClientRect().left -
-                this.itemsList.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;
+        const btnOffsetWidth = this.btnNext().el.nativeElement.offsetWidth;
         this.offsetLeft =
-            this.itemsList.nativeElement.getBoundingClientRect().right -
+            this.itemsList().nativeElement.getBoundingClientRect().right -
                 this.lastVisibleItem.el.nativeElement.getBoundingClientRect().right -
                 btnOffsetWidth;
         this.menuListStyleRight = `-${this.offsetLeft}px`;
@@ -1056,7 +1093,7 @@ class EclMenuComponent extends ECLBaseDirective {
         });
     }
     checkMenuOverflow() {
-        this.hasOverflow = this.totalItemsWidth > this.innerSection.nativeElement.offsetWidth + 16;
+        this.hasOverflow = this.totalItemsWidth > this.innerSection().nativeElement.offsetWidth + 16;
         if (!this.hasOverflow || this.isMobileBreakpoint || this.isTablet) {
             this.resetOverflowValues();
             return;
@@ -1077,12 +1114,12 @@ class EclMenuComponent extends ECLBaseDirective {
         if (this.isRtl) {
             this.eclRootMenuItems
                 .filter((item) => item.el.nativeElement.getBoundingClientRect().right <=
-                this.innerSection.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)
+                .filter((item) => item.el.nativeElement.getBoundingClientRect().left >= this.innerSection().nativeElement.getBoundingClientRect().left)
                 .forEach((el) => (el.isVisible = true));
         }
     }
@@ -1095,7 +1132,7 @@ class EclMenuComponent extends ECLBaseDirective {
         this.menuListStyleRight = 'auto';
         if (this.isRtl) {
             for (const item of this.eclRootMenuItems) {
-                if (item.el.nativeElement.getBoundingClientRect().left < this.itemsList.nativeElement.getBoundingClientRect().left) {
+                if (item.el.nativeElement.getBoundingClientRect().left < this.itemsList().nativeElement.getBoundingClientRect().left) {
                     this.lastVisibleItem = item;
                     break;
                 }
@@ -1104,7 +1141,7 @@ class EclMenuComponent extends ECLBaseDirective {
         }
         else {
             for (const item of this.eclRootMenuItems) {
-                if (item.el.nativeElement.getBoundingClientRect().right > this.itemsList.nativeElement.getBoundingClientRect().right) {
+                if (item.el.nativeElement.getBoundingClientRect().right > this.itemsList().nativeElement.getBoundingClientRect().right) {
                     this.lastVisibleItem = item;
                     break;
                 }
@@ -1186,7 +1223,7 @@ class EclMenuComponent extends ECLBaseDirective {
             this.onRootMenuItemKeydown(item, evt);
         });
         item.menuMegaLastItemTab.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
-            this.openCloseButton.onFocus();
+            this.openCloseButton().onFocus();
         });
     }
     onRootMenuItemFocused(item) {
@@ -1230,7 +1267,7 @@ class EclMenuComponent extends ECLBaseDirective {
             case KeyCode.TAB: {
                 if ((this.isMobileBreakpoint || this.isTablet) && this.isLastItem(item)) {
                     evt.preventDefault();
-                    this.openCloseButton.onFocus();
+                    this.openCloseButton().onFocus();
                 }
                 break;
             }
@@ -1310,7 +1347,7 @@ class EclMenuComponent extends ECLBaseDirective {
     }
     openSubmenu(item) {
         if (item.isVisible) {
-            if (!this.isMobileBreakpoint && !this.isTablet && item.submenu) {
+            if (!this.isMobileBreakpoint && !this.isTablet && item.submenu()) {
                 this.checkMegaMenu(item);
             }
             item.isHovered = true;
@@ -1324,27 +1361,27 @@ class EclMenuComponent extends ECLBaseDirective {
     checkMegaMenu(menuItem) {
         if (menuItem.isFull) {
             if (this.isRtl) {
-                menuItem.submenu.offsetRight = this.offsetLeft;
+                menuItem.submenu().offsetRight = this.offsetLeft;
             }
             else {
-                menuItem.submenu.offsetLeft = this.offsetLeft;
+                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 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;
+            menuItem.submenu().isRtlDisplay = true;
         }
         else {
-            menuItem.submenu.isRtlDisplay = false;
+            menuItem.submenu().isRtlDisplay = false;
         }
     }
     onRootMenuItemHoveredOut(evt) {
@@ -1487,7 +1524,7 @@ class EclMenuComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclMenuComponent, isStandalone: true, selector: "ecl-menu", inputs: { maxLines: { classPropertyName: "maxLines", publicName: "maxLines", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemSelect: "menuItemSelect", openHamburgerMenu: "openHamburgerMenu", closeHamburgerMenu: "closeHamburgerMenu" }, host: { attributes: { "role": "navigation" }, listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "onEscapePress($event)" }, properties: { "class": "cssClasses", "class.ecl-menu--forced-mobile": "isTablet", "class.ecl-menu--forced-close": "isMenuHidden", "attr.data-expanded": "isHamburgerMenuOpened ? \"\" : null" } }, 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\" eclStyle=\"neutral\" 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=\"tertiary\"\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=\"tertiary\" 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=\"tertiary\"\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=\"tertiary\"\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: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "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: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclMenuComponent, isStandalone: true, selector: "ecl-menu", inputs: { maxLines: { classPropertyName: "maxLines", publicName: "maxLines", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemSelect: "menuItemSelect", openHamburgerMenu: "openHamburgerMenu", closeHamburgerMenu: "closeHamburgerMenu" }, host: { attributes: { "role": "navigation" }, listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "onEscapePress($event)" }, properties: { "class": "cssClasses", "class.ecl-menu--forced-mobile": "isTablet", "class.ecl-menu--forced-close": "isMenuHidden", "attr.data-expanded": "isHamburgerMenuOpened ? \"\" : null" } }, queries: [{ propertyName: "eclRootMenuItems", predicate: EclMenuItemComponent }], viewQueries: [{ propertyName: "innerSection", first: true, predicate: ["innerSection"], descendants: true, isSignal: true }, { propertyName: "itemsList", first: true, predicate: ["itemsList"], descendants: true, isSignal: true }, { propertyName: "btnPrevious", first: true, predicate: ["btnPrevious"], descendants: true, isSignal: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true, isSignal: true }, { propertyName: "openCloseButton", first: true, predicate: ["openCloseButton"], descendants: true, isSignal: 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\" eclStyle=\"neutral\" 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=\"tertiary\"\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=\"tertiary\" 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=\"tertiary\"\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=\"tertiary\"\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: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "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: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMenuComponent, decorators: [{
             type: Component,
@@ -1503,22 +1540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }], ctorParameters: () => [], propDecorators: { maxLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLines", required: false }] }], 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: i0.Output, args: ["menuItemSelect"] }], openHamburgerMenu: [{ type: i0.Output, args: ["openHamburgerMenu"] }], closeHamburgerMenu: [{ type: i0.Output, args: ["closeHamburgerMenu"] }] } });
+            }], innerSection: [{ type: i0.ViewChild, args: ['innerSection', { isSignal: true }] }], itemsList: [{ type: i0.ViewChild, args: ['itemsList', { isSignal: true }] }], btnPrevious: [{ type: i0.ViewChild, args: ['btnPrevious', { isSignal: true }] }], btnNext: [{ type: i0.ViewChild, args: ['btnNext', { isSignal: true }] }], openCloseButton: [{ type: i0.ViewChild, args: ['openCloseButton', { isSignal: true }] }], menuItemSelect: [{ type: i0.Output, args: ["menuItemSelect"] }], openHamburgerMenu: [{ type: i0.Output, args: ["openHamburgerMenu"] }], closeHamburgerMenu: [{ type: i0.Output, args: ["closeHamburgerMenu"] }] } });
 
 const EUI_ECL_MENU = [
     EclMenuComponent, EclMenuItemComponent, EclMenuMegaComponent, EclMenuMegaItemComponent,