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

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Directive, inject, ElementRef, booleanAttribute, Input, input, ContentChildren, forwardRef, ViewChild, Component, Injectable, RendererFactory2, EventEmitter, DOCUMENT, afterNextRender, Output, ContentChild, signal, IterableDiffers, PLATFORM_ID, Renderer2, output, HostListener } from '@angular/core';
+import { HostBinding, Directive, inject, ElementRef, booleanAttribute, Input, viewChild, input, contentChildren, forwardRef, Component, Injectable, RendererFactory2, contentChild, EventEmitter, DOCUMENT, afterNextRender, Output, signal, IterableDiffers, PLATFORM_ID, Renderer2, output, HostListener } from '@angular/core';
 import * as i1$1 from '@eui/ecl/core';
 import { ECLBaseDirective, KeyCode, EclRtlService, ECLClickOutsideDirective } from '@eui/ecl/core';
 import { EuiAppShellService } from '@eui/core';
@@ -29,7 +29,6 @@ class EclMegaMenuContainerDirective extends ECLBaseDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMegaMenuContainerDirective, decorators: [{
             type: Directive,
             args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
                     selector: 'div[eclMegaMenuContainer]',
                 }]
         }], propDecorators: { hasClass: [{
@@ -161,13 +160,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 class EclMegaMenuFeaturedComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
+        this.megaMenuFeaturedScrollable = viewChild('megaMenuFeaturedScrollable', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "megaMenuFeaturedScrollable" }] : /* istanbul ignore next */ []));
         this.cmpClass = true;
         this.eclMegaMenuFeaturedStyleHeight = null;
         this.titleId = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "titleId" }] : /* istanbul ignore next */ []));
+        this.links = contentChildren(forwardRef(() => EclLinkDirective), { ...(ngDevMode ? { debugName: "links" } : /* istanbul ignore next */ {}), descendants: true });
+        this.featuredItems = contentChildren(forwardRef(() => EclMegaMenuFeaturedListItemDirective), { ...(ngDevMode ? { debugName: "featuredItems" } : /* istanbul ignore next */ {}), descendants: true });
     }
     ngAfterContentInit() {
-        this.links?.forEach(link => link.class = 'ecl-mega-menu__featured-link');
+        this.links()?.forEach(link => link.class = 'ecl-mega-menu__featured-link');
     }
     /**
      * Calculates and returns the height of the component. The total height of all the list items.
@@ -175,19 +178,16 @@ class EclMegaMenuFeaturedComponent extends ECLBaseDirective {
      */
     getEclMegaMenuFeaturedHeight() {
         let result = 0;
-        this.featuredItems?.forEach(el => result += el.getEclMegaMenuFeaturedItemHeight());
+        this.featuredItems()?.forEach(el => result += el.getEclMegaMenuFeaturedItemHeight());
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMegaMenuFeaturedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclMegaMenuFeaturedComponent, isStandalone: true, selector: "div[eclMegaMenuFeatured]", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ecl-mega-menu__featured": "this.cmpClass", "style.height.px": "this.eclMegaMenuFeaturedStyleHeight" } }, queries: [{ propertyName: "links", predicate: i0.forwardRef(() => EclLinkDirective), descendants: true }, { propertyName: "featuredItems", predicate: i0.forwardRef(() => EclMegaMenuFeaturedListItemDirective), descendants: true }], viewQueries: [{ propertyName: "megaMenuFeaturedScrollable", first: true, predicate: ["megaMenuFeaturedScrollable"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-mega-menu__featured-scrollable\" #megaMenuFeaturedScrollable>\n    <ng-content select=\"[eclMegaMenuFeaturedPicture]\"></ng-content>\n    @if(title) {\n    <span class=\"ecl-mega-menu__featured-title\" id=\"{{titleId()}}\">{{ title }}</span>\n    }\n    <ng-content select=\"[eclMegaMenuFeaturedList]\"></ng-content>\n</div>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclMegaMenuFeaturedComponent, isStandalone: true, selector: "div[eclMegaMenuFeatured]", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ecl-mega-menu__featured": "this.cmpClass", "style.height.px": "this.eclMegaMenuFeaturedStyleHeight" } }, queries: [{ propertyName: "links", predicate: i0.forwardRef(() => EclLinkDirective), descendants: true, isSignal: true }, { propertyName: "featuredItems", predicate: i0.forwardRef(() => EclMegaMenuFeaturedListItemDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "megaMenuFeaturedScrollable", first: true, predicate: ["megaMenuFeaturedScrollable"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-mega-menu__featured-scrollable\" #megaMenuFeaturedScrollable>\n    <ng-content select=\"[eclMegaMenuFeaturedPicture]\"></ng-content>\n    @if(title) {\n    <span class=\"ecl-mega-menu__featured-title\" id=\"{{titleId()}}\">{{ title }}</span>\n    }\n    <ng-content select=\"[eclMegaMenuFeaturedList]\"></ng-content>\n</div>" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMegaMenuFeaturedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[eclMegaMenuFeatured]', template: "<div class=\"ecl-mega-menu__featured-scrollable\" #megaMenuFeaturedScrollable>\n    <ng-content select=\"[eclMegaMenuFeaturedPicture]\"></ng-content>\n    @if(title) {\n    <span class=\"ecl-mega-menu__featured-title\" id=\"{{titleId()}}\">{{ title }}</span>\n    }\n    <ng-content select=\"[eclMegaMenuFeaturedList]\"></ng-content>\n</div>" }]
-        }], propDecorators: { megaMenuFeaturedScrollable: [{
-                type: ViewChild,
-                args: ['megaMenuFeaturedScrollable']
-            }], cmpClass: [{
+        }], propDecorators: { megaMenuFeaturedScrollable: [{ type: i0.ViewChild, args: ['megaMenuFeaturedScrollable', { isSignal: true }] }], cmpClass: [{
                 type: HostBinding,
                 args: ['class.ecl-mega-menu__featured']
             }], eclMegaMenuFeaturedStyleHeight: [{
@@ -195,13 +195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 args: ['style.height.px']
             }], title: [{
                 type: Input
-            }], titleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleId", required: false }] }], links: [{
-                type: ContentChildren,
-                args: [forwardRef(() => EclLinkDirective), { descendants: true }]
-            }], featuredItems: [{
-                type: ContentChildren,
-                args: [forwardRef(() => EclMegaMenuFeaturedListItemDirective), { descendants: true }]
-            }] } });
+            }], titleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleId", required: false }] }], links: [{ type: i0.ContentChildren, args: [forwardRef(() => EclLinkDirective), { ...{ descendants: true }, isSignal: true }] }], featuredItems: [{ type: i0.ContentChildren, args: [forwardRef(() => EclMegaMenuFeaturedListItemDirective), { ...{ descendants: true }, isSignal: true }] }] } });
 
 class EclMegaMenuDataService {
     constructor() {
@@ -311,6 +305,31 @@ class EclMegaMenuSubitemComponent extends ECLBaseDirective {
          */
         this.linkExtraAttributes = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "linkExtraAttributes" }] : /* istanbul ignore next */ []));
+        /**
+         * Wrapper div element of the second level sub-items.
+         */
+        this.megaMenuLevel2 = viewChild('megaMenuLevel2', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "megaMenuLevel2" }] : /* istanbul ignore next */ []));
+        /**
+         * The link element, if it exists. Item can have either link or button.
+         */
+        this.subMenuItemLink = viewChild(EclLinkDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "subMenuItemLink" }] : /* istanbul ignore next */ []));
+        /**
+         * The button element, if it exists. Item can have either link or button.
+         */
+        this.subMenuItemBtn = viewChild('subMenuItemBtn', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "subMenuItemBtn" }] : /* istanbul ignore next */ []));
+        /**
+         * The directive of the submenu lits.
+         */
+        this.submenu = contentChild(forwardRef(() => EclMegaMenuSublistDirective), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "submenu" }] : /* istanbul ignore next */ []));
+        /**
+         * The component for the featured items.
+         */
+        this.eclMegaMenuFeatured = contentChild(forwardRef(() => EclMegaMenuFeaturedComponent), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclMegaMenuFeatured" }] : /* istanbul ignore next */ []));
         this.megaMenuSubItemClicked = new EventEmitter();
         this.megaMenuSubItemKeydown = new EventEmitter();
         this.isCurrent = false;
@@ -330,27 +349,30 @@ class EclMegaMenuSubitemComponent extends ECLBaseDirective {
         this.appShell = inject(EuiAppShellService);
         const eclMegaMenuService = this.eclMegaMenuService;
         afterNextRender(() => {
-            if (this.subMenuItemLink) {
-                eclMegaMenuService.setExtraAttributesForLink(this.subMenuItemLink.el.nativeElement, this.linkExtraAttributes());
+            const subMenuItemLink = this.subMenuItemLink();
+            if (subMenuItemLink) {
+                eclMegaMenuService.setExtraAttributesForLink(subMenuItemLink.el.nativeElement, this.linkExtraAttributes());
             }
             this.observeBreakpointChanges();
         });
     }
     get hasChildren() {
-        return !!this.submenu;
+        return !!this.submenu();
     }
     get hasFeatured() {
-        return !!this.eclMegaMenuFeatured;
+        return !!this.eclMegaMenuFeatured();
     }
     /**
      * Sets focus on either link or button element.
      */
     onFocus() {
-        if (this.subMenuItemLink) {
-            this.subMenuItemLink.onFocus();
+        const subMenuItemLink = this.subMenuItemLink();
+        const subMenuItemBtn = this.subMenuItemBtn();
+        if (subMenuItemLink) {
+            subMenuItemLink.onFocus();
         }
-        else if (this.subMenuItemBtn) {
-            this.subMenuItemBtn.onFocus();
+        else if (subMenuItemBtn) {
+            subMenuItemBtn.onFocus();
         }
     }
     onHide() {
@@ -415,14 +437,15 @@ class EclMegaMenuSubitemComponent extends ECLBaseDirective {
             // Reset computed heights when switching breakpoints
             if (wasMobile !== isMobile) {
                 this.level2StyleHeight = null;
-                if (this.eclMegaMenuFeatured) {
-                    this.eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = null;
+                const eclMegaMenuFeatured = this.eclMegaMenuFeatured();
+                if (eclMegaMenuFeatured) {
+                    eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = null;
                 }
             }
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMegaMenuSubitemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclMegaMenuSubitemComponent, isStandalone: true, selector: "li[eclMegaMenuSubitem]", inputs: { buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, isExternal: { classPropertyName: "isExternal", publicName: "isExternal", isSignal: true, isRequired: false, transformFunction: null }, externalIconTitle: { classPropertyName: "externalIconTitle", publicName: "externalIconTitle", 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 }, isSeeAll: { classPropertyName: "isSeeAll", publicName: "isSeeAll", isSignal: true, isRequired: false, transformFunction: null }, linkExtraAttributes: { classPropertyName: "linkExtraAttributes", publicName: "linkExtraAttributes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { megaMenuSubItemClicked: "megaMenuSubItemClicked", megaMenuSubItemKeydown: "megaMenuSubItemKeydown" }, host: { properties: { "class": "this.cssClasses", "style.display": "this.display" } }, queries: [{ propertyName: "submenu", first: true, predicate: i0.forwardRef(() => EclMegaMenuSublistDirective), descendants: true }, { propertyName: "eclMegaMenuFeatured", first: true, predicate: i0.forwardRef(() => EclMegaMenuFeaturedComponent), descendants: true }], viewQueries: [{ propertyName: "megaMenuLevel2", first: true, predicate: ["megaMenuLevel2"], descendants: true }, { propertyName: "subMenuItemLink", first: true, predicate: EclLinkDirective, descendants: true }, { propertyName: "subMenuItemBtn", first: true, predicate: ["subMenuItemBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (!isSeeAll()) {\n@if (hasChildren) {\n<button eclButton #subMenuItemBtn variant=\"primary\" class=\"ecl-mega-menu__sublink\" [attr.aria-expanded]=\"isExpanded\"\n    (click)=\"onButtonClick()\" (keydown)=\"onKeydown($event)\" id=\"{{buttonId()}}\">\n    <span eclButtonLabel>{{label}}</span>\n    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"2xs\"></ecl-icon>\n</button>\n} @else if (href) {\n<a eclLink variant=\"standalone\" [href]=\"href\" [target]=\"target()\" class=\"ecl-mega-menu__sublink\"\n    (keydown)=\"onKeydown($event)\" (click)=\"onLinkClick()\">\n    <span eclLinkLabel>{{label}}</span>\n    <ng-container *ngTemplateOutlet=\"eclIcon\"></ng-container>\n</a>\n} @else {\n<a eclLink variant=\"standalone\" [attr.tabindex]=\"tabindex || 0\" [routerLink]=\"routerLink()\"\n    [queryParams]=\"queryParams()\" [queryParamsHandling]=\"queryParamsHandling()\" class=\"ecl-mega-menu__sublink\"\n    (keydown)=\"onKeydown($event)\" (click)=\"onLinkClick()\">\n    <span eclLinkLabel>{{label}}</span>\n    <ng-container *ngTemplateOutlet=\"eclIcon\"></ng-container>\n</a>\n}\n\n@if (hasChildren) {\n<div class=\"ecl-mega-menu__mega ecl-mega-menu__mega--level-2\" #megaMenuLevel2\n    [style.height.px]=\"level2StyleHeight\">\n    <ng-content select=\"[eclMegaMenuSublist]\"></ng-content>\n    <ng-content select=\"[eclMegaMenuFeatured]\"></ng-content>\n</div>\n}\n} @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #eclIcon>\n    @if (isExternal()) {\n        <ecl-icon icon=\"external\" size=\"2xs\" ariaHidden=\"false\" role=\"img\">\n            <title>Links to an external domain</title>\n        </ecl-icon>\n        }\n    <!-- <ng-content select=\"ecl-icon\"></ng-content> -->\n</ng-template>", dependencies: [{ kind: "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: "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: "directive", type: i3.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }, { kind: "directive", type: i3.EclLinkLabelDirective, selector: "[eclLinkLabel]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclMegaMenuSubitemComponent, isStandalone: true, selector: "li[eclMegaMenuSubitem]", inputs: { buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, isExternal: { classPropertyName: "isExternal", publicName: "isExternal", isSignal: true, isRequired: false, transformFunction: null }, externalIconTitle: { classPropertyName: "externalIconTitle", publicName: "externalIconTitle", 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 }, isSeeAll: { classPropertyName: "isSeeAll", publicName: "isSeeAll", isSignal: true, isRequired: false, transformFunction: null }, linkExtraAttributes: { classPropertyName: "linkExtraAttributes", publicName: "linkExtraAttributes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { megaMenuSubItemClicked: "megaMenuSubItemClicked", megaMenuSubItemKeydown: "megaMenuSubItemKeydown" }, host: { properties: { "class": "this.cssClasses", "style.display": "this.display" } }, queries: [{ propertyName: "submenu", first: true, predicate: i0.forwardRef(() => EclMegaMenuSublistDirective), descendants: true, isSignal: true }, { propertyName: "eclMegaMenuFeatured", first: true, predicate: i0.forwardRef(() => EclMegaMenuFeaturedComponent), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "megaMenuLevel2", first: true, predicate: ["megaMenuLevel2"], descendants: true, isSignal: true }, { propertyName: "subMenuItemLink", first: true, predicate: EclLinkDirective, descendants: true, isSignal: true }, { propertyName: "subMenuItemBtn", first: true, predicate: ["subMenuItemBtn"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (!isSeeAll()) {\n@if (hasChildren) {\n<button eclButton #subMenuItemBtn variant=\"primary\" class=\"ecl-mega-menu__sublink\" [attr.aria-expanded]=\"isExpanded\"\n    (click)=\"onButtonClick()\" (keydown)=\"onKeydown($event)\" id=\"{{buttonId()}}\">\n    <span eclButtonLabel>{{label}}</span>\n    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"2xs\"></ecl-icon>\n</button>\n} @else if (href) {\n<a eclLink variant=\"standalone\" [href]=\"href\" [target]=\"target()\" class=\"ecl-mega-menu__sublink\"\n    (keydown)=\"onKeydown($event)\" (click)=\"onLinkClick()\">\n    <span eclLinkLabel>{{label}}</span>\n    <ng-container *ngTemplateOutlet=\"eclIcon\"></ng-container>\n</a>\n} @else {\n<a eclLink variant=\"standalone\" [attr.tabindex]=\"tabindex || 0\" [routerLink]=\"routerLink()\"\n    [queryParams]=\"queryParams()\" [queryParamsHandling]=\"queryParamsHandling()\" class=\"ecl-mega-menu__sublink\"\n    (keydown)=\"onKeydown($event)\" (click)=\"onLinkClick()\">\n    <span eclLinkLabel>{{label}}</span>\n    <ng-container *ngTemplateOutlet=\"eclIcon\"></ng-container>\n</a>\n}\n\n@if (hasChildren) {\n<div class=\"ecl-mega-menu__mega ecl-mega-menu__mega--level-2\" #megaMenuLevel2\n    [style.height.px]=\"level2StyleHeight\">\n    <ng-content select=\"[eclMegaMenuSublist]\"></ng-content>\n    <ng-content select=\"[eclMegaMenuFeatured]\"></ng-content>\n</div>\n}\n} @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #eclIcon>\n    @if (isExternal()) {\n        <ecl-icon icon=\"external\" size=\"2xs\" ariaHidden=\"false\" role=\"img\">\n            <title>Links to an external domain</title>\n        </ecl-icon>\n        }\n    <!-- <ng-content select=\"ecl-icon\"></ng-content> -->\n</ng-template>", dependencies: [{ kind: "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: "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: "directive", type: i3.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }, { kind: "directive", type: i3.EclLinkLabelDirective, selector: "[eclLinkLabel]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMegaMenuSubitemComponent, decorators: [{
             type: Component,
@@ -434,22 +457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 type: Input
             }], isExternal: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExternal", required: false }] }], externalIconTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalIconTitle", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], queryParamsHandling: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParamsHandling", required: false }] }], href: [{
                 type: Input
-            }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], isSeeAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSeeAll", required: false }] }], linkExtraAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkExtraAttributes", required: false }] }], megaMenuLevel2: [{
-                type: ViewChild,
-                args: ['megaMenuLevel2']
-            }], subMenuItemLink: [{
-                type: ViewChild,
-                args: [EclLinkDirective]
-            }], subMenuItemBtn: [{
-                type: ViewChild,
-                args: ['subMenuItemBtn']
-            }], submenu: [{
-                type: ContentChild,
-                args: [forwardRef(() => EclMegaMenuSublistDirective)]
-            }], eclMegaMenuFeatured: [{
-                type: ContentChild,
-                args: [forwardRef(() => EclMegaMenuFeaturedComponent)]
-            }], megaMenuSubItemClicked: [{
+            }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], isSeeAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSeeAll", required: false }] }], linkExtraAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkExtraAttributes", required: false }] }], megaMenuLevel2: [{ type: i0.ViewChild, args: ['megaMenuLevel2', { isSignal: true }] }], subMenuItemLink: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EclLinkDirective), { isSignal: true }] }], subMenuItemBtn: [{ type: i0.ViewChild, args: ['subMenuItemBtn', { isSignal: true }] }], submenu: [{ type: i0.ContentChild, args: [forwardRef(() => EclMegaMenuSublistDirective), { isSignal: true }] }], eclMegaMenuFeatured: [{ type: i0.ContentChild, args: [forwardRef(() => EclMegaMenuFeaturedComponent), { isSignal: true }] }], megaMenuSubItemClicked: [{
                 type: Output
             }], megaMenuSubItemKeydown: [{
                 type: Output
@@ -510,6 +518,10 @@ class EclMegaMenuSublistDirective extends ECLBaseDirective {
         this.styleTop = null;
         this.styleHeight = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "styleHeight" }] : /* istanbul ignore next */ []));
+        this.submenuItems = contentChildren(forwardRef(() => EclMegaMenuSubitemComponent), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "submenuItems" }] : /* istanbul ignore next */ []));
+        this.spacer = contentChild(forwardRef(() => EclMegaMenuSpacerDirective), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "spacer" }] : /* istanbul ignore next */ []));
         this.megaMenuSubItemClicked = new EventEmitter();
         this.destroy$ = new Subject();
         this.isMobileBreakpoint = false;
@@ -522,7 +534,7 @@ class EclMegaMenuSublistDirective extends ECLBaseDirective {
     }
     ngDoCheck() {
         // When a new item is added -> subscribe to item's events.
-        const diff = this.differ.diff(this.submenuItems);
+        const diff = this.differ.diff(this.submenuItems());
         if (diff) {
             diff.forEachItem((item) => {
                 this.connectMegaMenuItemEvents(item.item);
@@ -539,7 +551,7 @@ class EclMegaMenuSublistDirective extends ECLBaseDirective {
      */
     onParentMegaMenuItemClick(isExpanded) {
         if (!isExpanded) {
-            this.submenuItems.forEach(item => {
+            this.submenuItems().forEach(item => {
                 if (item.isExpanded) {
                     item.onSubMenuItemCollapse();
                 }
@@ -555,7 +567,7 @@ class EclMegaMenuSublistDirective extends ECLBaseDirective {
         });
     }
     onMegaMenuSubItemClicked(item) {
-        this.submenuItems.filter(subItem => subItem !== item).forEach(el => {
+        this.submenuItems().filter(subItem => subItem !== item).forEach(el => {
             el.onSubMenuItemCollapse();
             if (this.isMobileBreakpoint && item.hasChildren) {
                 el.onHide();
@@ -564,7 +576,7 @@ class EclMegaMenuSublistDirective extends ECLBaseDirective {
         this.megaMenuSubItemClicked.emit();
     }
     onMegaMenuSubItemKeydown(item, evt) {
-        const itemIndex = this.submenuItems.toArray().findIndex(elem => elem === item);
+        const itemIndex = this.submenuItems().findIndex(elem => elem === item);
         switch (evt.key) {
             case KeyCode.ARROW_DOWN: {
                 evt.preventDefault();
@@ -583,12 +595,12 @@ class EclMegaMenuSublistDirective extends ECLBaseDirective {
     }
     focusOnPrevSibling(index) {
         if (index > 0) {
-            this.submenuItems.get(index - 1).onFocus();
+            this.submenuItems().at(index - 1).onFocus();
         }
     }
     focusOnNextSibling(index) {
-        if (index < this.submenuItems.length - 1) {
-            this.submenuItems.get(index + 1).onFocus();
+        if (index < this.submenuItems().length - 1) {
+            this.submenuItems().at(index + 1).onFocus();
         }
     }
     observeBreakpointChanges() {
@@ -608,7 +620,7 @@ class EclMegaMenuSublistDirective extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMegaMenuSublistDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EclMegaMenuSublistDirective, isStandalone: true, selector: "ul[eclMegaMenuSublist]", outputs: { megaMenuSubItemClicked: "megaMenuSubItemClicked" }, host: { properties: { "style.height.px": "styleHeight()", "class.ecl-mega-menu__sublist": "this.cmpClass", "class.ecl-mega-menu__sublist--scrollable": "this.isScrollable", "style.top.px": "this.styleTop" } }, queries: [{ propertyName: "spacer", first: true, predicate: i0.forwardRef(() => EclMegaMenuSpacerDirective), descendants: true }, { propertyName: "submenuItems", predicate: i0.forwardRef(() => EclMegaMenuSubitemComponent) }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.5", type: EclMegaMenuSublistDirective, isStandalone: true, selector: "ul[eclMegaMenuSublist]", outputs: { megaMenuSubItemClicked: "megaMenuSubItemClicked" }, host: { properties: { "style.height.px": "styleHeight()", "class.ecl-mega-menu__sublist": "this.cmpClass", "class.ecl-mega-menu__sublist--scrollable": "this.isScrollable", "style.top.px": "this.styleTop" } }, queries: [{ propertyName: "submenuItems", predicate: i0.forwardRef(() => EclMegaMenuSubitemComponent), isSignal: true }, { propertyName: "spacer", first: true, predicate: i0.forwardRef(() => EclMegaMenuSpacerDirective), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMegaMenuSublistDirective, decorators: [{
             type: Directive,
@@ -627,13 +639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             }], styleTop: [{
                 type: HostBinding,
                 args: ['style.top.px']
-            }], submenuItems: [{
-                type: ContentChildren,
-                args: [forwardRef(() => EclMegaMenuSubitemComponent)]
-            }], spacer: [{
-                type: ContentChild,
-                args: [forwardRef(() => EclMegaMenuSpacerDirective)]
-            }], megaMenuSubItemClicked: [{
+            }], submenuItems: [{ type: i0.ContentChildren, args: [forwardRef(() => EclMegaMenuSubitemComponent), { isSignal: true }] }], spacer: [{ type: i0.ContentChild, args: [forwardRef(() => EclMegaMenuSpacerDirective), { isSignal: true }] }], megaMenuSubItemClicked: [{
                 type: Output
             }] } });
 
@@ -661,6 +667,11 @@ class EclMegaMenuInfoComponent extends ECLBaseDirective {
         this.doc = inject(DOCUMENT$1);
         this.window = this.doc.defaultView;
         this.destroy$ = new Subject();
+        /**
+         * When the info panel contains link.
+         */
+        this.linkItem = contentChild(forwardRef(() => EclLinkDirective), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linkItem" }] : /* istanbul ignore next */ []));
         this.eclMegaMenuDataService = inject(EclMegaMenuDataService);
     }
     /**
@@ -669,7 +680,7 @@ class EclMegaMenuInfoComponent extends ECLBaseDirective {
     get cssClasses() {
         return [
             super.getCssClasses('ecl-mega-menu__info'),
-            this.linkItem ? 'ecl-mega-menu__info--has-link' : '',
+            this.linkItem() ? 'ecl-mega-menu__info--has-link' : '',
         ]
             .join(' ')
             .trim();
@@ -677,8 +688,8 @@ class EclMegaMenuInfoComponent extends ECLBaseDirective {
     ngAfterViewInit() {
         if (isPlatformBrowser(this.platformId)) {
             // Sets class of the sub link, if any.
-            if (this.linkItem) {
-                setTimeout(() => this.linkItem.class = 'ecl-mega-menu__info-link');
+            if (this.linkItem()) {
+                setTimeout(() => this.linkItem().class = 'ecl-mega-menu__info-link');
             }
             // Emits the bottom value of the element. Needed to calculate the size of the sublist. (for the same parent menu item)
             this.publishSize();
@@ -715,7 +726,7 @@ class EclMegaMenuInfoComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMegaMenuInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: EclMegaMenuInfoComponent, isStandalone: true, selector: "div[eclMegaMenuInfo]", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.opacity": "eclMegaMenuInfoStyleOpacity()", "class": "this.cssClasses", "style.height.px": "this.eclMegaMenuInfoStyleHeight" } }, queries: [{ propertyName: "linkItem", first: true, predicate: i0.forwardRef(() => EclLinkDirective), descendants: true }], usesInheritance: true, ngImport: i0, template: "<span class=\"ecl-mega-menu__info-title\" [attr.id]=\"titleId() || null\">{{ title() }}</span>\n<div class=\"ecl-mega-menu__info-scrollable\">\n    <div class=\"ecl-mega-menu__info-content\"><ng-content></ng-content>\n    </div>\n</div>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: EclMegaMenuInfoComponent, isStandalone: true, selector: "div[eclMegaMenuInfo]", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.opacity": "eclMegaMenuInfoStyleOpacity()", "class": "this.cssClasses", "style.height.px": "this.eclMegaMenuInfoStyleHeight" } }, queries: [{ propertyName: "linkItem", first: true, predicate: i0.forwardRef(() => EclLinkDirective), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<span class=\"ecl-mega-menu__info-title\" [attr.id]=\"titleId() || null\">{{ title() }}</span>\n<div class=\"ecl-mega-menu__info-scrollable\">\n    <div class=\"ecl-mega-menu__info-content\"><ng-content></ng-content>\n    </div>\n</div>" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMegaMenuInfoComponent, decorators: [{
             type: Component,
@@ -728,10 +739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             }], eclMegaMenuInfoStyleHeight: [{
                 type: HostBinding,
                 args: ['style.height.px']
-            }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleId", required: false }] }], linkItem: [{
-                type: ContentChild,
-                args: [forwardRef(() => EclLinkDirective)]
-            }] } });
+            }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleId", required: false }] }], linkItem: [{ type: i0.ContentChild, args: [forwardRef(() => EclLinkDirective), { isSignal: true }] }] } });
 
 /**
  * This component represents a mega menu item. Adds functionality and styling, according to ECL standards.
@@ -743,8 +751,8 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
     get cssClasses() {
         return [
             super.getCssClasses('ecl-mega-menu__item'),
-            this.eclMegaMenuSublist ? 'ecl-mega-menu__item--has-children' : '',
-            this.eclMegaMenuContainer ? 'ecl-mega-menu__item--has-container' : '',
+            this.eclMegaMenuSublist() ? 'ecl-mega-menu__item--has-children' : '',
+            this.eclMegaMenuContainer() ? 'ecl-mega-menu__item--has-container' : '',
             this.isCurrent ? 'ecl-mega-menu__item--current' : '',
             this.isExpanded ? 'ecl-mega-menu__item--expanded' : '',
             this.isPromotional() ? 'ecl-mega-menu__item--promotional' : '',
@@ -785,6 +793,45 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
         ...(ngDevMode ? [{ debugName: "linkExtraAttributes" }] : /* istanbul ignore next */ []));
         this.megaMenuItemClicked = new EventEmitter();
         this.megaMenuItemKeydown = new EventEmitter();
+        /**
+         * The wrapper around the subitems, if any.
+         */
+        this.eclMegaMenuMega = viewChild('eclMegaMenuMega', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclMegaMenuMega" }] : /* istanbul ignore next */ []));
+        /**
+         * This elemend hold some extra content, different from subitems. For example just some text or some custom links, etc.
+         */
+        this.mainPanel = viewChild('mainPanel', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mainPanel" }] : /* istanbul ignore next */ []));
+        /**
+         * Actual link of the menu item. If the menu has no children, but redirects/loads another page.
+         */
+        this.menuLink = viewChild(EclLinkDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuLink" }] : /* istanbul ignore next */ []));
+        /**
+         * Element, tat is rendered if the menu item has children.
+         */
+        this.menuBtn = viewChild('menuBtn', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuBtn" }] : /* istanbul ignore next */ []));
+        /**
+         * Element, that would contain some info about the current item or it's children. First in the container.
+         */
+        this.eclMegaMenuInfo = contentChild(forwardRef(() => EclMegaMenuInfoComponent), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclMegaMenuInfo" }] : /* istanbul ignore next */ []));
+        /**
+         * Element, that holds the sub items of the current menu items.
+         */
+        this.eclMegaMenuSublist = contentChild(forwardRef(() => EclMegaMenuSublistDirective), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclMegaMenuSublist" }] : /* istanbul ignore next */ []));
+        // Get all the sublists including childrens's sublist, to detect if it's only one level submenu.
+        this.eclMegaMenuSublists = contentChildren(forwardRef(() => EclMegaMenuSublistDirective), { ...(ngDevMode ? { debugName: "eclMegaMenuSublists" } : /* istanbul ignore next */ {}), descendants: true });
+        this.eclMegaMenuFeatured = contentChild(forwardRef(() => EclMegaMenuFeaturedComponent), { ...(ngDevMode ? { debugName: "eclMegaMenuFeatured" } : /* istanbul ignore next */ {}), descendants: false });
+        /**
+         * Component, that consist of some custom info, text or whatever. When the menu item has no children, but still some
+         *  sub container is displayed.
+         */
+        this.eclMegaMenuContainer = contentChild(forwardRef(() => EclMegaMenuContainerDirective), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclMegaMenuContainer" }] : /* istanbul ignore next */ []));
         this.containerStyleHeight = null;
         this.isCurrent = false;
         this.isMobileBreakpoint = false;
@@ -806,23 +853,25 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
             this.eclMegaMenuDataService.eclMegaMenuInfoBottomYSubject$.pipe(takeUntil(this.destroy$)).subscribe(value => {
                 this.calculateSublistStyle(value);
             });
-            if (this.menuLink) {
-                this.eclMegaMenuService.setExtraAttributesForLink(this.menuLink.el.nativeElement, this.linkExtraAttributes());
+            const menuLink = this.menuLink();
+            if (menuLink) {
+                this.eclMegaMenuService.setExtraAttributesForLink(menuLink.el.nativeElement, this.linkExtraAttributes());
             }
             this.observeBreakpointChanges();
             this.observeResizeWindow();
         });
     }
     ngAfterContentInit() {
-        this.eclMegaMenuSublist?.megaMenuSubItemClicked.pipe(takeUntil(this.destroy$)).subscribe(() => {
+        this.eclMegaMenuSublist()?.megaMenuSubItemClicked.pipe(takeUntil(this.destroy$)).subscribe(() => {
             if (!this.isExpanded) {
                 return;
             }
             if (!this.isMobileBreakpoint) {
                 // Only hide/show the level-2 panel when switching sub-items
-                const expandedSubItem = this.eclMegaMenuSublist.submenuItems.find(item => item.hasChildren && item.isExpanded);
-                if (expandedSubItem && expandedSubItem.megaMenuLevel2) {
-                    expandedSubItem.megaMenuLevel2.nativeElement.style.opacity = '0';
+                const expandedSubItem = this.eclMegaMenuSublist().submenuItems().find(item => item.hasChildren && item.isExpanded);
+                const megaMenuLevel2 = expandedSubItem.megaMenuLevel2();
+                if (expandedSubItem && megaMenuLevel2) {
+                    megaMenuLevel2.nativeElement.style.opacity = '0';
                 }
             }
             setTimeout(() => this.checkDropdownHeight(false), 100);
@@ -833,29 +882,31 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
         this.destroy$.unsubscribe();
     }
     get hasNoInfo() {
-        return !this.eclMegaMenuInfo;
+        return !this.eclMegaMenuInfo();
     }
     get hasChildren() {
-        return !!this.eclMegaMenuSublist || !!this.eclMegaMenuContainer;
+        return !!this.eclMegaMenuSublist() || !!this.eclMegaMenuContainer();
     }
     get hasSublist() {
-        return !!this.eclMegaMenuSublist;
+        return !!this.eclMegaMenuSublist();
     }
     get hasFeatured() {
-        return !!this.eclMegaMenuFeatured;
+        return !!this.eclMegaMenuFeatured();
     }
     get hasContainer() {
-        return !!this.eclMegaMenuContainer;
+        return !!this.eclMegaMenuContainer();
     }
     /**
      * Set the focus on the sub element - link or button.
      */
     onFocus() {
-        if (this.menuLink) {
-            this.menuLink.onFocus();
+        const menuLink = this.menuLink();
+        const menuBtn = this.menuBtn();
+        if (menuLink) {
+            menuLink.onFocus();
         }
-        else if (this.menuBtn) {
-            this.menuBtn.onFocus();
+        else if (menuBtn) {
+            menuBtn.onFocus();
         }
     }
     /**
@@ -865,8 +916,9 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
         if (this.hasChildren) {
             this.isCurrent = !this.isCurrent;
             this.isExpanded = !this.isExpanded;
-            if (this.eclMegaMenuSublist) {
-                this.eclMegaMenuSublist.onParentMegaMenuItemClick(this.isExpanded);
+            const eclMegaMenuSublist = this.eclMegaMenuSublist();
+            if (eclMegaMenuSublist) {
+                eclMegaMenuSublist.onParentMegaMenuItemClick(this.isExpanded);
             }
             if (this.isExpanded) {
                 this.eclHeaderMenuComunicationService.updateExpanded(this.isExpanded);
@@ -892,8 +944,9 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
     onMegaMenuItemCollapse() {
         this.isCurrent = false;
         this.isExpanded = false;
-        if (this.eclMegaMenuSublist) {
-            this.eclMegaMenuSublist.onParentMegaMenuItemClick(this.isExpanded);
+        const eclMegaMenuSublist = this.eclMegaMenuSublist();
+        if (eclMegaMenuSublist) {
+            eclMegaMenuSublist.onParentMegaMenuItemClick(this.isExpanded);
         }
         this.resetComputedHeights();
     }
@@ -928,9 +981,10 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
         }
     }
     calculateSublistStyle(bottomInfo) {
-        if (this.isMobileBreakpoint && this.eclMegaMenuSublist) {
+        const eclMegaMenuSublist = this.eclMegaMenuSublist();
+        if (this.isMobileBreakpoint && eclMegaMenuSublist) {
             const availableHeight = this.window.innerHeight - bottomInfo - 16;
-            this.eclMegaMenuSublist.styleTop = availableHeight;
+            eclMegaMenuSublist.styleTop = availableHeight;
         }
     }
     calculateWrapperStyle() {
@@ -952,9 +1006,10 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
      * the elements should flow naturally.
      */
     resetComputedHeights() {
-        if (this.eclMegaMenuInfo) {
-            this.eclMegaMenuInfo.eclMegaMenuInfoStyleHeight = null;
-            this.eclMegaMenuInfo.eclMegaMenuInfoStyleOpacity.set(null);
+        const eclMegaMenuInfo = this.eclMegaMenuInfo();
+        if (eclMegaMenuInfo) {
+            eclMegaMenuInfo.eclMegaMenuInfoStyleHeight = null;
+            eclMegaMenuInfo.eclMegaMenuInfoStyleOpacity.set(null);
         }
         this.megaMenuMegaStyleHeight.set(null);
         this.megaMenuMegaStyleOpacity.set(null);
@@ -962,19 +1017,22 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
         this.wrapperStyleTop = null;
         this.containerStyleHeight = null;
         // Reset featured panel height
-        if (this.eclMegaMenuFeatured) {
-            this.eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = null;
+        const eclMegaMenuFeatured = this.eclMegaMenuFeatured();
+        if (eclMegaMenuFeatured) {
+            eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = null;
         }
         // Reset sublist and sub-items heights
-        if (this.eclMegaMenuSublist) {
-            this.eclMegaMenuSublist.styleHeight.set(null);
-            this.eclMegaMenuSublist.styleTop = null;
-            this.eclMegaMenuSublist.isScrollable = false;
+        const eclMegaMenuSublist = this.eclMegaMenuSublist();
+        if (eclMegaMenuSublist) {
+            eclMegaMenuSublist.styleHeight.set(null);
+            eclMegaMenuSublist.styleTop = null;
+            eclMegaMenuSublist.isScrollable = false;
             // Reset level-2 heights on each subitem
-            this.eclMegaMenuSublist.submenuItems?.forEach(subItem => {
+            eclMegaMenuSublist.submenuItems()?.forEach(subItem => {
                 subItem.level2StyleHeight = null;
-                if (subItem.eclMegaMenuFeatured) {
-                    subItem.eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = null;
+                const eclMegaMenuFeatured = subItem.eclMegaMenuFeatured();
+                if (eclMegaMenuFeatured) {
+                    eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = null;
                 }
             });
         }
@@ -983,11 +1041,12 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
         if (this.isMobileBreakpoint) {
             return;
         }
-        if (this.eclMegaMenuMega) {
+        if (this.eclMegaMenuMega()) {
             this.megaMenuMegaStyleOpacity.set(0);
         }
-        if (this.eclMegaMenuInfo) {
-            this.eclMegaMenuInfo.eclMegaMenuInfoStyleOpacity.set(0);
+        const eclMegaMenuInfo = this.eclMegaMenuInfo();
+        if (eclMegaMenuInfo) {
+            eclMegaMenuInfo.eclMegaMenuInfoStyleOpacity.set(0);
         }
     }
     /**
@@ -997,38 +1056,42 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
      * - If no featured, panel 2: height is set on the level-2 div
      */
     calculateMobileHeight() {
-        if (!this.isMobileBreakpoint || !this.eclMegaMenuMega) {
+        const eclMegaMenuMega = this.eclMegaMenuMega();
+        if (!this.isMobileBreakpoint || !eclMegaMenuMega) {
             return;
         }
+        const eclMegaMenuSublistValue = this.eclMegaMenuSublist();
         if (this.hasFeatured) {
             // Has featured → set height on the mega div, no scrollable on sublist
-            const megaRect = this.eclMegaMenuMega.nativeElement.getBoundingClientRect();
+            const megaRect = eclMegaMenuMega.nativeElement.getBoundingClientRect();
             const megaTop = megaRect.top;
             this.megaMenuMegaStyleHeight.set(this.window.innerHeight - megaTop);
-            if (this.eclMegaMenuSublist) {
-                this.eclMegaMenuSublist.isScrollable = false;
-                this.eclMegaMenuSublist.styleHeight.set(null);
+            const eclMegaMenuSublist = this.eclMegaMenuSublist();
+            if (eclMegaMenuSublist) {
+                eclMegaMenuSublist.isScrollable = false;
+                eclMegaMenuSublist.styleHeight.set(null);
             }
         }
-        else if (this.eclMegaMenuSublist) {
+        else if (eclMegaMenuSublistValue) {
             this.megaMenuMegaStyleHeight.set(null);
             // Check if a sub-item with children is expanded (panel 2)
-            const expandedSubItem = this.eclMegaMenuSublist.submenuItems.find(item => item.hasChildren && item.isExpanded);
-            if (expandedSubItem && expandedSubItem.megaMenuLevel2) {
+            const expandedSubItem = eclMegaMenuSublistValue.submenuItems().find(item => item.hasChildren && item.isExpanded);
+            const megaMenuLevel2 = expandedSubItem.megaMenuLevel2();
+            if (expandedSubItem && megaMenuLevel2) {
                 // No featured, panel 2 → set height on the level-2 div
-                const subMegaRect = expandedSubItem.megaMenuLevel2.nativeElement.getBoundingClientRect();
+                const subMegaRect = megaMenuLevel2.nativeElement.getBoundingClientRect();
                 const subMegaTop = subMegaRect.top;
                 expandedSubItem.level2StyleHeight = this.window.innerHeight - subMegaTop;
                 // Clear sublist height and scrollable since panel 2 is now showing
-                this.eclMegaMenuSublist.isScrollable = false;
-                this.eclMegaMenuSublist.styleHeight.set(null);
+                eclMegaMenuSublistValue.isScrollable = false;
+                eclMegaMenuSublistValue.styleHeight.set(null);
             }
             else {
                 // No featured, panel 1 → set height on the sublist
-                const sublistRect = this.eclMegaMenuSublist.el.nativeElement.getBoundingClientRect();
+                const sublistRect = eclMegaMenuSublistValue.el.nativeElement.getBoundingClientRect();
                 const sublistTop = sublistRect.top;
-                this.eclMegaMenuSublist.styleHeight.set(this.window.innerHeight - sublistTop);
-                this.eclMegaMenuSublist.isScrollable = true;
+                eclMegaMenuSublistValue.styleHeight.set(this.window.innerHeight - sublistTop);
+                eclMegaMenuSublistValue.isScrollable = true;
             }
         }
         else {
@@ -1044,8 +1107,9 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
             this.hidePanels();
         }
         let infoPanelHeight = 0;
-        if (this.eclMegaMenuInfo) {
-            this.eclMegaMenuInfo.eclMegaMenuInfoStyleHeight = null;
+        const eclMegaMenuInfo = this.eclMegaMenuInfo();
+        if (eclMegaMenuInfo) {
+            eclMegaMenuInfo.eclMegaMenuInfoStyleHeight = null;
         }
         const heights = [];
         let height = 0;
@@ -1055,12 +1119,12 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
         let featuredHeight2 = 0;
         if (this.hasContainer) {
             const viewportHeight = this.window.innerHeight;
-            const mainTop = this.mainPanel.nativeElement.getBoundingClientRect().top;
+            const mainTop = this.mainPanel().nativeElement.getBoundingClientRect().top;
             this.containerStyleHeight = viewportHeight - mainTop;
         }
         else {
-            if (this.eclMegaMenuInfo) {
-                infoPanelHeight = this.eclMegaMenuInfo.getInfoPanelScrollHeight() + 16;
+            if (eclMegaMenuInfo) {
+                infoPanelHeight = eclMegaMenuInfo.getInfoPanelScrollHeight() + 16;
                 if (this.isLarge) {
                     heights.push(infoPanelHeight);
                 }
@@ -1068,37 +1132,41 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
                     subItemsHeight = infoPanelHeight;
                     featuredHeight = infoPanelHeight;
                 }
-                this.eclMegaMenuInfo.eclMegaMenuInfoStyleOpacity.set(1);
+                eclMegaMenuInfo.eclMegaMenuInfoStyleOpacity.set(1);
             }
-            if (this.eclMegaMenuMega) {
-                if (this.eclMegaMenuSublist && this.eclMegaMenuSublist.submenuItems.length > 0) {
+            const eclMegaMenuMega = this.eclMegaMenuMega();
+            if (eclMegaMenuMega) {
+                const eclMegaMenuSublist = this.eclMegaMenuSublist();
+                if (eclMegaMenuSublist && eclMegaMenuSublist.submenuItems().length > 0) {
                     if (this.isOneLevelOnly()) {
-                        itemsHeight = this.eclMegaMenuSublist.el.nativeElement.offsetHeight;
+                        itemsHeight = eclMegaMenuSublist.el.nativeElement.offsetHeight;
                     }
                     else {
-                        this.eclMegaMenuSublist.submenuItems.forEach((item) => {
+                        eclMegaMenuSublist.submenuItems().forEach((item) => {
                             itemsHeight += item.getMegaMenuSubItemHeight();
                         });
-                        if (this.eclMegaMenuSublist.spacer) {
+                        if (eclMegaMenuSublist.spacer()) {
                             itemsHeight += 25;
                         }
                     }
                     heights.push(itemsHeight);
                 }
-                const expandedSubItem = this.eclMegaMenuSublist.submenuItems.find(item => item.hasChildren && item.isExpanded);
+                const expandedSubItem = eclMegaMenuSublist.submenuItems().find(item => item.hasChildren && item.isExpanded);
+                const eclMegaMenuFeatured = expandedSubItem.eclMegaMenuFeatured();
                 if (expandedSubItem !== undefined) {
-                    expandedSubItem.submenu.submenuItems.forEach(item => {
+                    expandedSubItem.submenu().submenuItems().forEach(item => {
                         subItemsHeight += item.getMegaMenuSubItemHeight();
                     });
                     heights.push(subItemsHeight);
-                    if (expandedSubItem.eclMegaMenuFeatured) {
-                        featuredHeight += expandedSubItem.eclMegaMenuFeatured.getEclMegaMenuFeaturedHeight();
+                    if (eclMegaMenuFeatured) {
+                        featuredHeight += eclMegaMenuFeatured.getEclMegaMenuFeaturedHeight();
                         featuredHeight += 5;
                         heights.push(featuredHeight);
                     }
                 }
-                if (this.eclMegaMenuFeatured) {
-                    featuredHeight2 = this.eclMegaMenuFeatured.getEclMegaMenuFeaturedHeight();
+                const eclMegaMenuFeaturedValue = this.eclMegaMenuFeatured();
+                if (eclMegaMenuFeaturedValue) {
+                    featuredHeight2 = eclMegaMenuFeaturedValue.getEclMegaMenuFeaturedHeight();
                     heights.push(featuredHeight2);
                 }
                 const maxHeight = Math.max(...heights);
@@ -1112,18 +1180,18 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
                 else {
                     height = maxHeight;
                 }
-                this.wrapperStyleHeight = this.eclMegaMenuMega && this.eclMegaMenuInfo && !this.isLarge ?
+                this.wrapperStyleHeight = eclMegaMenuMega && eclMegaMenuInfo && !this.isLarge ?
                     height + infoPanelHeight : height;
                 if (this.wrapperStyleHeight > availableHeight)
                     this.wrapperStyleHeight = availableHeight;
-                if (this.eclMegaMenuMega && this.isLarge) {
+                if (eclMegaMenuMega && this.isLarge) {
                     this.megaMenuMegaStyleHeight.set(height);
                 }
-                else if (this.eclMegaMenuMega && this.eclMegaMenuInfo) {
+                else if (eclMegaMenuMega && eclMegaMenuInfo) {
                     this.megaMenuMegaStyleHeight.set(this.wrapperStyleHeight - infoPanelHeight);
                 }
-                if (this.eclMegaMenuInfo && this.isLarge) {
-                    this.eclMegaMenuInfo.eclMegaMenuInfoStyleHeight = height;
+                if (eclMegaMenuInfo && this.isLarge) {
+                    eclMegaMenuInfo.eclMegaMenuInfoStyleHeight = height;
                 }
                 if (expandedSubItem !== undefined) {
                     if (this.isLarge) {
@@ -1132,24 +1200,25 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
                     else {
                         expandedSubItem.level2StyleHeight = height - infoPanelHeight;
                     }
-                    if (expandedSubItem.megaMenuLevel2) {
-                        expandedSubItem.megaMenuLevel2.nativeElement.style.opacity = '1';
+                    const megaMenuLevel2 = expandedSubItem.megaMenuLevel2();
+                    if (megaMenuLevel2) {
+                        megaMenuLevel2.nativeElement.style.opacity = '1';
                     }
-                    if (expandedSubItem.eclMegaMenuFeatured) {
+                    if (eclMegaMenuFeatured) {
                         if (this.isLarge) {
-                            expandedSubItem.eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = height;
+                            eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = height;
                         }
                         else {
-                            expandedSubItem.eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = height - infoPanelHeight;
+                            eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = height - infoPanelHeight;
                         }
                     }
                 }
-                if (this.eclMegaMenuFeatured) {
+                if (eclMegaMenuFeaturedValue) {
                     if (this.isLarge) {
-                        this.eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = height;
+                        eclMegaMenuFeaturedValue.eclMegaMenuFeaturedStyleHeight = height;
                     }
                     else {
-                        this.eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = this.wrapperStyleHeight - infoPanelHeight;
+                        eclMegaMenuFeaturedValue.eclMegaMenuFeaturedStyleHeight = this.wrapperStyleHeight - infoPanelHeight;
                     }
                 }
                 this.megaMenuMegaStyleOpacity.set(1);
@@ -1190,7 +1259,7 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMegaMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclMegaMenuItemComponent, isStandalone: true, selector: "li[eclMegaMenuItem]", inputs: { isPromotional: { classPropertyName: "isPromotional", publicName: "isPromotional", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", 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 }, isOneLevelOnly: { classPropertyName: "isOneLevelOnly", publicName: "isOneLevelOnly", isSignal: true, isRequired: false, transformFunction: null }, linkExtraAttributes: { classPropertyName: "linkExtraAttributes", publicName: "linkExtraAttributes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { megaMenuItemClicked: "megaMenuItemClicked", megaMenuItemKeydown: "megaMenuItemKeydown" }, host: { properties: { "class": "this.cssClasses", "attr.aria-haspopup": "this.hasPopup" } }, queries: [{ propertyName: "eclMegaMenuInfo", first: true, predicate: i0.forwardRef(() => EclMegaMenuInfoComponent), descendants: true }, { propertyName: "eclMegaMenuSublist", first: true, predicate: i0.forwardRef(() => EclMegaMenuSublistDirective), descendants: true }, { propertyName: "eclMegaMenuFeatured", first: true, predicate: i0.forwardRef(() => EclMegaMenuFeaturedComponent) }, { propertyName: "eclMegaMenuContainer", first: true, predicate: i0.forwardRef(() => EclMegaMenuContainerDirective), descendants: true }, { propertyName: "eclMegaMenuSublists", predicate: i0.forwardRef(() => EclMegaMenuSublistDirective), descendants: true }], viewQueries: [{ propertyName: "eclMegaMenuMega", first: true, predicate: ["eclMegaMenuMega"], descendants: true }, { propertyName: "mainPanel", first: true, predicate: ["mainPanel"], descendants: true }, { propertyName: "menuLink", first: true, predicate: EclLinkDirective, descendants: true }, { propertyName: "menuBtn", first: true, predicate: ["menuBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (hasChildren) {\n<button #menuBtn eclButton variant=\"primary\" class=\"ecl-mega-menu__link\" (click)=\"onMegaMenuItemClick()\"\n    (keydown)=\"onKeydown($event)\">\n    <span eclButtonLabel>{{label()}}</span>\n    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"2xs\"></ecl-icon>\n    <ecl-icon icon=\"arrow-left\" transform=\"flip-horizontal\" size=\"s\"></ecl-icon>\n</button>\n} @else if (href) {\n<a eclLink #menuLink variant=\"standalone\" [href]=\"href\" [target]=\"target()\" class=\"ecl-mega-menu__link\"\n    (keydown)=\"onKeydown($event)\" (click)=\"onMegaMenuItemClick()\">\n    <span eclLinkLabel>{{label()}}</span>\n</a>\n} @else {\n<a eclLink #menuLink variant=\"standalone\" [attr.tabindex]=\"tabindex || 0\" [routerLink]=\"routerLink()\"\n    [queryParams]=\"queryParams()\" [queryParamsHandling]=\"queryParamsHandling()\" class=\"ecl-mega-menu__link\"\n    (keydown)=\"onKeydown($event)\" (click)=\"onMegaMenuItemClick()\">\n    <span eclLinkLabel>{{label()}}</span>\n</a>\n}\n\n@if (hasSublist) {\n<div class=\"ecl-mega-menu__wrapper\" [style.height.px]=\"wrapperStyleHeight\" [style.top.px]=\"wrapperStyleTop\">\n    <div class=\"ecl-container\">\n        <ng-content select=\"[eclMegaMenuInfo]\"></ng-content>\n        <div #eclMegaMenuMega class=\"ecl-mega-menu__mega\" [class.ecl-mega-menu__mega--no-info]=\"hasNoInfo\"\n            [class.ecl-mega-menu__mega--has-featured]=\"hasFeatured\" [style.height.px]=\"megaMenuMegaStyleHeight()\"\n            [style.opacity]=\"megaMenuMegaStyleOpacity()\">\n            <ng-content select=\"[eclMegaMenuSublist]\"></ng-content>\n            <ng-content select=\"[eclMegaMenuFeatured]\"></ng-content>\n        </div>\n    </div>\n</div>\n}\n\n@if (hasContainer) {\n<div #mainPanel class=\"ecl-mega-menu__mega ecl-mega-menu__mega-container\">\n    <div class=\"ecl-container\" [style.height.px]=\"containerStyleHeight\">\n        <div class=\"ecl-mega-menu__mega-container-scrollable\">\n            <ng-content select=\"[eclMegaMenuContainer]\"></ng-content>\n        </div>\n    </div>\n</div>\n}", dependencies: [{ kind: "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: "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: "directive", type: i3.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }, { kind: "directive", type: i3.EclLinkLabelDirective, selector: "[eclLinkLabel]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclMegaMenuItemComponent, isStandalone: true, selector: "li[eclMegaMenuItem]", inputs: { isPromotional: { classPropertyName: "isPromotional", publicName: "isPromotional", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", 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 }, isOneLevelOnly: { classPropertyName: "isOneLevelOnly", publicName: "isOneLevelOnly", isSignal: true, isRequired: false, transformFunction: null }, linkExtraAttributes: { classPropertyName: "linkExtraAttributes", publicName: "linkExtraAttributes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { megaMenuItemClicked: "megaMenuItemClicked", megaMenuItemKeydown: "megaMenuItemKeydown" }, host: { properties: { "class": "this.cssClasses", "attr.aria-haspopup": "this.hasPopup" } }, queries: [{ propertyName: "eclMegaMenuInfo", first: true, predicate: i0.forwardRef(() => EclMegaMenuInfoComponent), descendants: true, isSignal: true }, { propertyName: "eclMegaMenuSublist", first: true, predicate: i0.forwardRef(() => EclMegaMenuSublistDirective), descendants: true, isSignal: true }, { propertyName: "eclMegaMenuSublists", predicate: i0.forwardRef(() => EclMegaMenuSublistDirective), descendants: true, isSignal: true }, { propertyName: "eclMegaMenuFeatured", first: true, predicate: i0.forwardRef(() => EclMegaMenuFeaturedComponent), isSignal: true }, { propertyName: "eclMegaMenuContainer", first: true, predicate: i0.forwardRef(() => EclMegaMenuContainerDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "eclMegaMenuMega", first: true, predicate: ["eclMegaMenuMega"], descendants: true, isSignal: true }, { propertyName: "mainPanel", first: true, predicate: ["mainPanel"], descendants: true, isSignal: true }, { propertyName: "menuLink", first: true, predicate: EclLinkDirective, descendants: true, isSignal: true }, { propertyName: "menuBtn", first: true, predicate: ["menuBtn"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (hasChildren) {\n<button #menuBtn eclButton variant=\"primary\" class=\"ecl-mega-menu__link\" (click)=\"onMegaMenuItemClick()\"\n    (keydown)=\"onKeydown($event)\">\n    <span eclButtonLabel>{{label()}}</span>\n    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"2xs\"></ecl-icon>\n    <ecl-icon icon=\"arrow-left\" transform=\"flip-horizontal\" size=\"s\"></ecl-icon>\n</button>\n} @else if (href) {\n<a eclLink #menuLink variant=\"standalone\" [href]=\"href\" [target]=\"target()\" class=\"ecl-mega-menu__link\"\n    (keydown)=\"onKeydown($event)\" (click)=\"onMegaMenuItemClick()\">\n    <span eclLinkLabel>{{label()}}</span>\n</a>\n} @else {\n<a eclLink #menuLink variant=\"standalone\" [attr.tabindex]=\"tabindex || 0\" [routerLink]=\"routerLink()\"\n    [queryParams]=\"queryParams()\" [queryParamsHandling]=\"queryParamsHandling()\" class=\"ecl-mega-menu__link\"\n    (keydown)=\"onKeydown($event)\" (click)=\"onMegaMenuItemClick()\">\n    <span eclLinkLabel>{{label()}}</span>\n</a>\n}\n\n@if (hasSublist) {\n<div class=\"ecl-mega-menu__wrapper\" [style.height.px]=\"wrapperStyleHeight\" [style.top.px]=\"wrapperStyleTop\">\n    <div class=\"ecl-container\">\n        <ng-content select=\"[eclMegaMenuInfo]\"></ng-content>\n        <div #eclMegaMenuMega class=\"ecl-mega-menu__mega\" [class.ecl-mega-menu__mega--no-info]=\"hasNoInfo\"\n            [class.ecl-mega-menu__mega--has-featured]=\"hasFeatured\" [style.height.px]=\"megaMenuMegaStyleHeight()\"\n            [style.opacity]=\"megaMenuMegaStyleOpacity()\">\n            <ng-content select=\"[eclMegaMenuSublist]\"></ng-content>\n            <ng-content select=\"[eclMegaMenuFeatured]\"></ng-content>\n        </div>\n    </div>\n</div>\n}\n\n@if (hasContainer) {\n<div #mainPanel class=\"ecl-mega-menu__mega ecl-mega-menu__mega-container\">\n    <div class=\"ecl-container\" [style.height.px]=\"containerStyleHeight\">\n        <div class=\"ecl-mega-menu__mega-container-scrollable\">\n            <ng-content select=\"[eclMegaMenuContainer]\"></ng-content>\n        </div>\n    </div>\n</div>\n}", dependencies: [{ kind: "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: "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: "directive", type: i3.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }, { kind: "directive", type: i3.EclLinkLabelDirective, selector: "[eclLinkLabel]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMegaMenuItemComponent, decorators: [{
             type: Component,
@@ -1207,34 +1276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 type: Output
             }], megaMenuItemKeydown: [{
                 type: Output
-            }], eclMegaMenuMega: [{
-                type: ViewChild,
-                args: ['eclMegaMenuMega']
-            }], mainPanel: [{
-                type: ViewChild,
-                args: ['mainPanel']
-            }], menuLink: [{
-                type: ViewChild,
-                args: [EclLinkDirective]
-            }], menuBtn: [{
-                type: ViewChild,
-                args: ['menuBtn']
-            }], eclMegaMenuInfo: [{
-                type: ContentChild,
-                args: [forwardRef(() => EclMegaMenuInfoComponent)]
-            }], eclMegaMenuSublist: [{
-                type: ContentChild,
-                args: [forwardRef(() => EclMegaMenuSublistDirective)]
-            }], eclMegaMenuSublists: [{
-                type: ContentChildren,
-                args: [forwardRef(() => EclMegaMenuSublistDirective), { descendants: true }]
-            }], eclMegaMenuFeatured: [{
-                type: ContentChild,
-                args: [forwardRef(() => EclMegaMenuFeaturedComponent), { descendants: false }]
-            }], eclMegaMenuContainer: [{
-                type: ContentChild,
-                args: [forwardRef(() => EclMegaMenuContainerDirective)]
-            }] } });
+            }], eclMegaMenuMega: [{ type: i0.ViewChild, args: ['eclMegaMenuMega', { isSignal: true }] }], mainPanel: [{ type: i0.ViewChild, args: ['mainPanel', { isSignal: true }] }], menuLink: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EclLinkDirective), { isSignal: true }] }], menuBtn: [{ type: i0.ViewChild, args: ['menuBtn', { isSignal: true }] }], eclMegaMenuInfo: [{ type: i0.ContentChild, args: [forwardRef(() => EclMegaMenuInfoComponent), { isSignal: true }] }], eclMegaMenuSublist: [{ type: i0.ContentChild, args: [forwardRef(() => EclMegaMenuSublistDirective), { isSignal: true }] }], eclMegaMenuSublists: [{ type: i0.ContentChildren, args: [forwardRef(() => EclMegaMenuSublistDirective), { ...{ descendants: true }, isSignal: true }] }], eclMegaMenuFeatured: [{ type: i0.ContentChild, args: [forwardRef(() => EclMegaMenuFeaturedComponent), { ...{ descendants: false }, isSignal: true }] }], eclMegaMenuContainer: [{ type: i0.ContentChild, args: [forwardRef(() => EclMegaMenuContainerDirective), { isSignal: true }] }] } });
 
 /**
  * The 'eclMegaMenu' is an advanced navigation component designed for complex sites with deep hierarchies.
@@ -1277,6 +1319,7 @@ class EclMegaMenuComponent extends ECLBaseDirective {
          * The event that is emitted, when a menu item is selected.
          */
         this.megaMenuItemSelect = output();
+        this.menuItems = contentChildren(forwardRef(() => EclMegaMenuItemComponent), { ...(ngDevMode ? { debugName: "menuItems" } : /* istanbul ignore next */ {}), descendants: true });
         /**
          * If the menu is in mobile mode.
          */
@@ -1335,7 +1378,7 @@ class EclMegaMenuComponent extends ECLBaseDirective {
     }
     ngDoCheck() {
         // For each added menu item - subscribe to item events.
-        const diff = this.differ.diff(this.menuItems);
+        const diff = this.differ.diff(this.menuItems());
         if (diff) {
             diff.forEachItem((item) => {
                 this.connectMegaMenuItemEvents(item.item);
@@ -1370,8 +1413,8 @@ class EclMegaMenuComponent extends ECLBaseDirective {
             this.isOpenMobile = true;
             this.eclHeaderMenuComunicationService.updateOpen(true);
             // Focus first element
-            if (this.menuItems.length > 0) {
-                this.menuItems.first.onFocus();
+            if (this.menuItems().length > 0) {
+                this.menuItems().at(0).onFocus();
             }
         }
     }
@@ -1379,7 +1422,7 @@ class EclMegaMenuComponent extends ECLBaseDirective {
         this.enableScroll();
         // Collapse any expanded menu item (and its sub-items) so that
         // reopening the menu always shows the top-level list cleanly.
-        const expandedItem = this.menuItems?.find(item => item.isExpanded);
+        const expandedItem = this.menuItems()?.find(item => item.isExpanded);
         if (expandedItem) {
             expandedItem.onMegaMenuItemCollapse();
         }
@@ -1422,11 +1465,11 @@ class EclMegaMenuComponent extends ECLBaseDirective {
         this.isStartPanel = false;
         this.isTwoPanels = false;
         this.isOnePanel = true;
-        const currentItem = this.menuItems.find(item => item.isExpanded);
-        const currentSubItem = currentItem.eclMegaMenuSublist.submenuItems.find(item => item.isExpanded);
+        const currentItem = this.menuItems().find(item => item.isExpanded);
+        const currentSubItem = currentItem.eclMegaMenuSublist().submenuItems().find(item => item.isExpanded);
         this.hasSecondaryFeatured = false;
         if (this.isMobileOrTablet) {
-            currentItem.eclMegaMenuSublist.submenuItems.filter(item => !item.isExpanded).forEach(el => {
+            currentItem.eclMegaMenuSublist().submenuItems().filter(item => !item.isExpanded).forEach(el => {
                 el.onShow();
             });
         }
@@ -1436,7 +1479,7 @@ class EclMegaMenuComponent extends ECLBaseDirective {
     onMegaMenuBackToStartPanel() {
         this.isOnePanel = false;
         this.isStartPanel = true;
-        const currentItem = this.menuItems.find(item => item.isExpanded);
+        const currentItem = this.menuItems().find(item => item.isExpanded);
         currentItem.isCurrent = false;
         currentItem.isExpanded = false;
         this.eclHeaderMenuComunicationService.updateExpanded(false);
@@ -1465,7 +1508,7 @@ class EclMegaMenuComponent extends ECLBaseDirective {
     }
     onMegaMenuItemClicked(item) {
         this.hasSecondaryFeatured = false;
-        this.menuItems.filter(megaItem => megaItem !== item).forEach(item => item.onMegaMenuItemCollapse());
+        this.menuItems().filter(megaItem => megaItem !== item).forEach(item => item.onMegaMenuItemCollapse());
         if (item.hasChildren) {
             if (item.isExpanded) {
                 if (this.isMobileOrTablet) {
@@ -1474,7 +1517,7 @@ class EclMegaMenuComponent extends ECLBaseDirective {
                     this.isStartPanel = false;
                 }
                 else {
-                    if (item.eclMegaMenuSublist?.submenuItems.first.hasChildren) {
+                    if (item.eclMegaMenuSublist()?.submenuItems().at(0).hasChildren) {
                         this.isOnePanel = false;
                         this.isTwoPanels = true;
                     }
@@ -1497,7 +1540,7 @@ class EclMegaMenuComponent extends ECLBaseDirective {
         this.megaMenuItemSelect.emit(item);
     }
     onMegaMenuItemKeydown(item, evt) {
-        const itemIndex = this.menuItems.toArray().findIndex(elem => elem === item);
+        const itemIndex = this.menuItems().findIndex(elem => elem === item);
         switch (evt.key) {
             case KeyCode.ARROW_DOWN: {
                 evt.preventDefault();
@@ -1541,7 +1584,7 @@ class EclMegaMenuComponent extends ECLBaseDirective {
     }
     closeMenuAndAnyOpenSubMenu() {
         if (this.isExpanded) {
-            const expandedItem = this.menuItems.find(item => item.isExpanded);
+            const expandedItem = this.menuItems().find(item => item.isExpanded);
             if (expandedItem !== undefined) {
                 expandedItem.onMegaMenuItemCollapse();
             }
@@ -1557,12 +1600,12 @@ class EclMegaMenuComponent extends ECLBaseDirective {
     }
     focusOnPrevSibling(index) {
         if (index > 0) {
-            this.menuItems.get(index - 1).onFocus();
+            this.menuItems().at(index - 1).onFocus();
         }
     }
     focusOnNextSibling(index) {
-        if (index < this.menuItems.length - 1) {
-            this.menuItems.get(index + 1).onFocus();
+        if (index < this.menuItems().length - 1) {
+            this.menuItems().at(index + 1).onFocus();
         }
     }
     subscribeToAppShellBreakpoints() {
@@ -1618,7 +1661,7 @@ class EclMegaMenuComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMegaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: EclMegaMenuComponent, isStandalone: true, selector: "nav[eclMegaMenu]", outputs: { megaMenuItemSelect: "megaMenuItemSelect" }, host: { listeners: { "eclClickOutside": "onClickOutsideMegaMenu()" }, properties: { "class": "this.cssClasses", "attr.data-expanded": "this.expandedAttr", "attr.role": "this.role" } }, queries: [{ propertyName: "menuItems", predicate: i0.forwardRef(() => EclMegaMenuItemComponent), descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.ECLBaseDirective }, { directive: i1$1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<div class=\"ecl-mega-menu__overlay\" [style.top.px]=\"overlayStyleTop\"></div>\n<div class=\"ecl-container ecl-mega-menu__container\">\n    <button class=\"ecl-button ecl-button--tertiary ecl-mega-menu__open ecl-button--icon-only\"\n        type=\"button\" [attr.aria-expanded]=\"isMobileExpanded\" (click)=\"onMegaMenuMobileOpen()\">\n        <ecl-icon icon=\"hamburger\" size=\"m\"></ecl-icon>\n        <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        <span class=\"ecl-button__label\">{{ (isOpenMobile ? 'ecl.common.CLOSE' : 'ecl.menu.MENU') | translate }}</span>\n    </button>\n    <section class=\"ecl-mega-menu__inner\" [class.ecl-mega-menu__inner--expanded]=\"!isStartPanel && isExpanded\"\n        aria-label=\"ecl mega menu\" [style.top.px]=\"innerStyleTop\">\n        <header class=\"ecl-mega-menu__inner-header\">\n            <button eclButton variant=\"tertiary\" eclStyle=\"neutral\" class=\"ecl-mega-menu__back\" type=\"submit\" (click)=\"onMegaMenuBack()\">\n                <ecl-icon icon=\"corner-arrow\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>Back</span>\n            </button>\n        </header>\n        <ng-content></ng-content>\n    </section>\n</div>", dependencies: [{ kind: "component", type: 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.2.0", version: "22.0.5", type: EclMegaMenuComponent, isStandalone: true, selector: "nav[eclMegaMenu]", outputs: { megaMenuItemSelect: "megaMenuItemSelect" }, host: { listeners: { "eclClickOutside": "onClickOutsideMegaMenu()" }, properties: { "class": "this.cssClasses", "attr.data-expanded": "this.expandedAttr", "attr.role": "this.role" } }, queries: [{ propertyName: "menuItems", predicate: i0.forwardRef(() => EclMegaMenuItemComponent), descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.ECLBaseDirective }, { directive: i1$1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<div class=\"ecl-mega-menu__overlay\" [style.top.px]=\"overlayStyleTop\"></div>\n<div class=\"ecl-container ecl-mega-menu__container\">\n    <button class=\"ecl-button ecl-button--tertiary ecl-mega-menu__open ecl-button--icon-only\"\n        type=\"button\" [attr.aria-expanded]=\"isMobileExpanded\" (click)=\"onMegaMenuMobileOpen()\">\n        <ecl-icon icon=\"hamburger\" size=\"m\"></ecl-icon>\n        <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        <span class=\"ecl-button__label\">{{ (isOpenMobile ? 'ecl.common.CLOSE' : 'ecl.menu.MENU') | translate }}</span>\n    </button>\n    <section class=\"ecl-mega-menu__inner\" [class.ecl-mega-menu__inner--expanded]=\"!isStartPanel && isExpanded\"\n        aria-label=\"ecl mega menu\" [style.top.px]=\"innerStyleTop\">\n        <header class=\"ecl-mega-menu__inner-header\">\n            <button eclButton variant=\"tertiary\" eclStyle=\"neutral\" class=\"ecl-mega-menu__back\" type=\"submit\" (click)=\"onMegaMenuBack()\">\n                <ecl-icon icon=\"corner-arrow\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>Back</span>\n            </button>\n        </header>\n        <ng-content></ng-content>\n    </section>\n</div>", dependencies: [{ kind: "component", type: 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: EclMegaMenuComponent, decorators: [{
             type: Component,
@@ -1640,10 +1683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
-            }], megaMenuItemSelect: [{ type: i0.Output, args: ["megaMenuItemSelect"] }], menuItems: [{
-                type: ContentChildren,
-                args: [forwardRef(() => EclMegaMenuItemComponent), { descendants: true }]
-            }], onClickOutsideMegaMenu: [{
+            }], megaMenuItemSelect: [{ type: i0.Output, args: ["megaMenuItemSelect"] }], menuItems: [{ type: i0.ContentChildren, args: [forwardRef(() => EclMegaMenuItemComponent), { ...{ descendants: true }, isSignal: true }] }], onClickOutsideMegaMenu: [{
                 type: HostListener,
                 args: ['eclClickOutside']
             }] } });