@eui/ecl 22.0.0-alpha.7 → 22.0.0-alpha.9

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, viewChild, input, contentChildren, forwardRef, Component, Injectable, RendererFactory2, contentChild, EventEmitter, DOCUMENT, afterNextRender, Output, signal, IterableDiffers, PLATFORM_ID, Renderer2, output, HostListener } from '@angular/core';
+import { Directive, input, booleanAttribute, inject, ElementRef, viewChild, contentChildren, forwardRef, Component, Injectable, RendererFactory2, contentChild, EventEmitter, DOCUMENT, afterNextRender, Output, Input, signal, IterableDiffers, PLATFORM_ID, Renderer2, output } 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';
@@ -19,43 +19,35 @@ import { TranslatePipe } from '@ngx-translate/core';
  * Directive that adds specific class to the mega-menu container.
  */
 class EclMegaMenuContainerDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.hasClass = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuContainerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclMegaMenuContainerDirective, isStandalone: true, selector: "div[eclMegaMenuContainer]", host: { properties: { "class.ecl": "this.hasClass" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclMegaMenuContainerDirective, isStandalone: true, selector: "div[eclMegaMenuContainer]", host: { classAttribute: "ecl" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'div[eclMegaMenuContainer]',
+                    host: {
+                        class: 'ecl',
+                    },
                 }]
-        }], propDecorators: { hasClass: [{
-                type: HostBinding,
-                args: ['class.ecl']
-            }] } });
+        }] });
 
 /**
  * Directive that adds specific class to the mega-menu featured list.
  */
 class EclMegaMenuFeaturedListDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.cmpClass = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuFeaturedListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclMegaMenuFeaturedListDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedList]", host: { properties: { "class.ecl-mega-menu__featured-list": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclMegaMenuFeaturedListDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedList]", host: { classAttribute: "ecl-mega-menu__featured-list" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuFeaturedListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclMegaMenuFeaturedList]',
+                    host: {
+                        class: 'ecl-mega-menu__featured-list',
+                    },
                 }]
-        }], propDecorators: { cmpClass: [{
-                type: HostBinding,
-                args: ['class.ecl-mega-menu__featured-list']
-            }] } });
+        }] });
 /**
  * Directive that adds specific class to a mega-menu featured list item.
  * Also has method that returns item height.
@@ -63,9 +55,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
 class EclMegaMenuFeaturedListItemDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
-        this.cmpClass = true;
-        this.isImageOnly = false;
-        this.isCombo = false;
+        this.isImageOnly = input(false, { ...(ngDevMode ? { debugName: "isImageOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isCombo = input(false, { ...(ngDevMode ? { debugName: "isCombo" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.el = inject(ElementRef);
     }
     getEclMegaMenuFeaturedItemHeight() {
@@ -73,46 +64,32 @@ class EclMegaMenuFeaturedListItemDirective extends ECLBaseDirective {
         return this.el.nativeElement.scrollHeight + parseFloat(computedStyle.marginBottom) + parseFloat(computedStyle.marginTop);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuFeaturedListItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.2", type: EclMegaMenuFeaturedListItemDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedListItem]", inputs: { isImageOnly: ["isImageOnly", "isImageOnly", booleanAttribute], isCombo: ["isCombo", "isCombo", booleanAttribute] }, host: { properties: { "class.ecl-mega-menu__featured-list__item": "this.cmpClass", "class.ecl-mega-menu__featured-list__item--image-only": "this.isImageOnly", "class.ecl-mega-menu__featured-list__item--combo": "this.isCombo" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: EclMegaMenuFeaturedListItemDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedListItem]", inputs: { isImageOnly: { classPropertyName: "isImageOnly", publicName: "isImageOnly", isSignal: true, isRequired: false, transformFunction: null }, isCombo: { classPropertyName: "isCombo", publicName: "isCombo", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ecl-mega-menu__featured-list__item--image-only": "isImageOnly()", "class.ecl-mega-menu__featured-list__item--combo": "isCombo()" }, classAttribute: "ecl-mega-menu__featured-list__item" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuFeaturedListItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclMegaMenuFeaturedListItem]',
+                    host: {
+                        class: 'ecl-mega-menu__featured-list__item',
+                        '[class.ecl-mega-menu__featured-list__item--image-only]': 'isImageOnly()',
+                        '[class.ecl-mega-menu__featured-list__item--combo]': 'isCombo()',
+                    },
                 }]
-        }], propDecorators: { cmpClass: [{
-                type: HostBinding,
-                args: ['class.ecl-mega-menu__featured-list__item']
-            }], isImageOnly: [{
-                type: HostBinding,
-                args: ['class.ecl-mega-menu__featured-list__item--image-only']
-            }, {
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], isCombo: [{
-                type: HostBinding,
-                args: ['class.ecl-mega-menu__featured-list__item--combo']
-            }, {
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+        }], propDecorators: { isImageOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isImageOnly", required: false }] }], isCombo: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCombo", required: false }] }] } });
 class EclMegaMenuFeaturedListItemDescriptionDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.cmpClass = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuFeaturedListItemDescriptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclMegaMenuFeaturedListItemDescriptionDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedListItemDescription]", host: { properties: { "class.ecl-mega-menu__featured-list__item-description": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclMegaMenuFeaturedListItemDescriptionDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedListItemDescription]", host: { classAttribute: "ecl-mega-menu__featured-list__item-description" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuFeaturedListItemDescriptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclMegaMenuFeaturedListItemDescription]',
+                    host: {
+                        class: 'ecl-mega-menu__featured-list__item-description',
+                    },
                 }]
-        }], propDecorators: { cmpClass: [{
-                type: HostBinding,
-                args: ['class.ecl-mega-menu__featured-list__item-description']
-            }] } });
+        }] });
 
 /**
  * Directive that adds specific class to the mega-menu featured picture.
@@ -122,37 +99,33 @@ class EclMegaMenuFeaturedPictureDirective extends ECLBaseDirective {
         return [super.getCssClasses('ecl-picture ecl-mega-menu__featured-picture')].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuFeaturedPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclMegaMenuFeaturedPictureDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclMegaMenuFeaturedPictureDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedPicture]", host: { properties: { "class": "cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuFeaturedPictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclMegaMenuFeaturedPicture]',
+                    host: {
+                        '[class]': 'cssClasses',
+                    },
                 }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 /**
  * Directive that adds specific class to the mega-menu featured image.
  */
 class EclMegaMenuFeaturedImageDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.cmpClass = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuFeaturedImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclMegaMenuFeaturedImageDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedImage]", host: { properties: { "class.ecl-mega-menu__featured-image": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclMegaMenuFeaturedImageDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedImage]", host: { classAttribute: "ecl-mega-menu__featured-image" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuFeaturedImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclMegaMenuFeaturedImage]',
+                    host: {
+                        class: 'ecl-mega-menu__featured-image',
+                    },
                 }]
-        }], propDecorators: { cmpClass: [{
-                type: HostBinding,
-                args: ['class.ecl-mega-menu__featured-image']
-            }] } });
+        }] });
 
 /**
  * This component represents the featured items panel.
@@ -162,8 +135,9 @@ class EclMegaMenuFeaturedComponent extends ECLBaseDirective {
         super(...arguments);
         this.megaMenuFeaturedScrollable = viewChild('megaMenuFeaturedScrollable', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "megaMenuFeaturedScrollable" }] : /* istanbul ignore next */ []));
-        this.cmpClass = true;
         this.eclMegaMenuFeaturedStyleHeight = null;
+        this.title = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         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 });
@@ -182,20 +156,15 @@ class EclMegaMenuFeaturedComponent extends ECLBaseDirective {
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuFeaturedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclMegaMenuFeaturedComponent, isStandalone: true, selector: "div[eclMegaMenuFeatured]", 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.height.px": "eclMegaMenuFeaturedStyleHeight" }, classAttribute: "ecl-mega-menu__featured" }, 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.1.2", 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: i0.ViewChild, args: ['megaMenuFeaturedScrollable', { isSignal: true }] }], cmpClass: [{
-                type: HostBinding,
-                args: ['class.ecl-mega-menu__featured']
-            }], eclMegaMenuFeaturedStyleHeight: [{
-                type: HostBinding,
-                args: ['style.height.px']
-            }], title: [{
-                type: Input
-            }], 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 }] }] } });
+            args: [{ selector: 'div[eclMegaMenuFeatured]', host: {
+                        class: 'ecl-mega-menu__featured',
+                        '[style.height.px]': 'eclMegaMenuFeaturedStyleHeight',
+                    }, 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: i0.ViewChild, args: ['megaMenuFeaturedScrollable', { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], 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() {
@@ -445,15 +414,15 @@ class EclMegaMenuSubitemComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuSubitemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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": "cssClasses", "style.display": "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.1.2", ngImport: i0, type: EclMegaMenuSubitemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'li[eclMegaMenuSubitem]', imports: [NgTemplateOutlet, RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK], 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>" }]
-        }], ctorParameters: () => [], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], buttonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonId", required: false }] }], label: [{
+            args: [{ selector: 'li[eclMegaMenuSubitem]', imports: [NgTemplateOutlet, RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK], host: {
+                        '[class]': 'cssClasses',
+                        '[style.display]': 'display',
+                    }, 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>" }]
+        }], ctorParameters: () => [], propDecorators: { buttonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonId", required: false }] }], label: [{
                 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
@@ -461,51 +430,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                 type: Output
             }], megaMenuSubItemKeydown: [{
                 type: Output
-            }], display: [{
-                type: HostBinding,
-                args: ['style.display']
             }] } });
 
 /**
  * Directive that adds specific class to the mega-menu list.
  */
 class EclMegaMenuListDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.cmpClass = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclMegaMenuListDirective, isStandalone: true, selector: "ul[eclMegaMenuList]", host: { properties: { "class.ecl-mega-menu__list": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclMegaMenuListDirective, isStandalone: true, selector: "ul[eclMegaMenuList]", host: { classAttribute: "ecl-mega-menu__list" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ul[eclMegaMenuList]',
+                    host: {
+                        class: 'ecl-mega-menu__list',
+                    },
                 }]
-        }], propDecorators: { cmpClass: [{
-                type: HostBinding,
-                args: ['class.ecl-mega-menu__list']
-            }] } });
+        }] });
 /**
  * Directive that adds specific class to the mega-menu spacer.
  */
 class EclMegaMenuSpacerDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.cmpClass = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuSpacerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclMegaMenuSpacerDirective, isStandalone: true, selector: "li[eclMegaMenuSpacer]", host: { properties: { "class.ecl-mega-menu__spacer": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclMegaMenuSpacerDirective, isStandalone: true, selector: "li[eclMegaMenuSpacer]", host: { classAttribute: "ecl-mega-menu__spacer" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuSpacerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'li[eclMegaMenuSpacer]',
+                    host: {
+                        class: 'ecl-mega-menu__spacer',
+                    },
                 }]
-        }], propDecorators: { cmpClass: [{
-                type: HostBinding,
-                args: ['class.ecl-mega-menu__spacer']
-            }] } });
+        }] });
 /**
  * Directive that adds specific classes and functionality to the mega-menu sublist.
  */
@@ -513,7 +471,6 @@ class EclMegaMenuSublistDirective extends ECLBaseDirective {
     constructor() {
         super();
         this.el = inject(ElementRef);
-        this.cmpClass = true;
         this.isScrollable = false;
         this.styleTop = null;
         this.styleHeight = signal(null, /* @ts-ignore */
@@ -620,26 +577,20 @@ class EclMegaMenuSublistDirective extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuSublistDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.2", 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.2", type: EclMegaMenuSublistDirective, isStandalone: true, selector: "ul[eclMegaMenuSublist]", outputs: { megaMenuSubItemClicked: "megaMenuSubItemClicked" }, host: { properties: { "class.ecl-mega-menu__sublist--scrollable": "isScrollable", "style.top.px": "styleTop", "style.height.px": "styleHeight()" }, classAttribute: "ecl-mega-menu__sublist" }, 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.1.2", ngImport: i0, type: EclMegaMenuSublistDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ul[eclMegaMenuSublist]',
                     host: {
+                        class: 'ecl-mega-menu__sublist',
+                        '[class.ecl-mega-menu__sublist--scrollable]': 'isScrollable',
+                        '[style.top.px]': 'styleTop',
                         '[style.height.px]': 'styleHeight()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { cmpClass: [{
-                type: HostBinding,
-                args: ['class.ecl-mega-menu__sublist']
-            }], isScrollable: [{
-                type: HostBinding,
-                args: ['class.ecl-mega-menu__sublist--scrollable']
-            }], styleTop: [{
-                type: HostBinding,
-                args: ['style.top.px']
-            }], submenuItems: [{ type: i0.ContentChildren, args: [forwardRef(() => EclMegaMenuSubitemComponent), { isSignal: true }] }], spacer: [{ type: i0.ContentChild, args: [forwardRef(() => EclMegaMenuSpacerDirective), { isSignal: true }] }], megaMenuSubItemClicked: [{
+        }], ctorParameters: () => [], propDecorators: { submenuItems: [{ type: i0.ContentChildren, args: [forwardRef(() => EclMegaMenuSubitemComponent), { isSignal: true }] }], spacer: [{ type: i0.ContentChild, args: [forwardRef(() => EclMegaMenuSpacerDirective), { isSignal: true }] }], megaMenuSubItemClicked: [{
                 type: Output
             }] } });
 
@@ -726,20 +677,16 @@ class EclMegaMenuInfoComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", 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>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", 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: { "class": "cssClasses", "style.height.px": "eclMegaMenuInfoStyleHeight", "style.opacity": "eclMegaMenuInfoStyleOpacity()" } }, 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.1.2", ngImport: i0, type: EclMegaMenuInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[eclMegaMenuInfo]', host: {
+                        '[class]': 'cssClasses',
+                        '[style.height.px]': 'eclMegaMenuInfoStyleHeight',
                         '[style.opacity]': 'eclMegaMenuInfoStyleOpacity()',
                     }, 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>" }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], 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: i0.ContentChild, args: [forwardRef(() => EclLinkDirective), { isSignal: true }] }] } });
+        }], propDecorators: { 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.
@@ -761,12 +708,19 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
             .join(' ')
             .trim();
     }
+    /**
+     * Reflects whether this item has a submenu/container. Evaluated lazily during
+     * change detection (not at construction) so the content-query signals are
+     * resolved before it is read.
+     */
+    get hasPopup() {
+        return this.hasChildren ? true : null;
+    }
     constructor() {
         super();
         this.el = inject(ElementRef);
         this.renderer = inject(Renderer2);
         this.isExpanded = false;
-        this.hasPopup = this.hasChildren ? true : null;
         this.isPromotional = input(false, { ...(ngDevMode ? { debugName: "isPromotional" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.label = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -869,7 +823,7 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
             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);
-                const megaMenuLevel2 = expandedSubItem.megaMenuLevel2();
+                const megaMenuLevel2 = expandedSubItem?.megaMenuLevel2();
                 if (expandedSubItem && megaMenuLevel2) {
                     megaMenuLevel2.nativeElement.style.opacity = '0';
                 }
@@ -1076,7 +1030,7 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
             this.megaMenuMegaStyleHeight.set(null);
             // Check if a sub-item with children is expanded (panel 2)
             const expandedSubItem = eclMegaMenuSublistValue.submenuItems().find(item => item.hasChildren && item.isExpanded);
-            const megaMenuLevel2 = expandedSubItem.megaMenuLevel2();
+            const megaMenuLevel2 = expandedSubItem?.megaMenuLevel2();
             if (expandedSubItem && megaMenuLevel2) {
                 // No featured, panel 2 → set height on the level-2 div
                 const subMegaRect = megaMenuLevel2.nativeElement.getBoundingClientRect();
@@ -1152,8 +1106,8 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
                     heights.push(itemsHeight);
                 }
                 const expandedSubItem = eclMegaMenuSublist.submenuItems().find(item => item.hasChildren && item.isExpanded);
-                const eclMegaMenuFeatured = expandedSubItem.eclMegaMenuFeatured();
                 if (expandedSubItem !== undefined) {
+                    const eclMegaMenuFeatured = expandedSubItem.eclMegaMenuFeatured();
                     expandedSubItem.submenu().submenuItems().forEach(item => {
                         subItemsHeight += item.getMegaMenuSubItemHeight();
                     });
@@ -1204,12 +1158,13 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
                     if (megaMenuLevel2) {
                         megaMenuLevel2.nativeElement.style.opacity = '1';
                     }
-                    if (eclMegaMenuFeatured) {
+                    const expandedSubItemFeatured = expandedSubItem.eclMegaMenuFeatured();
+                    if (expandedSubItemFeatured) {
                         if (this.isLarge) {
-                            eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = height;
+                            expandedSubItemFeatured.eclMegaMenuFeaturedStyleHeight = height;
                         }
                         else {
-                            eclMegaMenuFeatured.eclMegaMenuFeaturedStyleHeight = height - infoPanelHeight;
+                            expandedSubItemFeatured.eclMegaMenuFeaturedStyleHeight = height - infoPanelHeight;
                         }
                     }
                 }
@@ -1259,18 +1214,15 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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": "cssClasses", "attr.aria-haspopup": "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.1.2", ngImport: i0, type: EclMegaMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'li[eclMegaMenuItem]', imports: [RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK], 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}" }]
-        }], ctorParameters: () => [], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], hasPopup: [{
-                type: HostBinding,
-                args: ['attr.aria-haspopup']
-            }], isPromotional: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPromotional", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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: [{
+            args: [{ selector: 'li[eclMegaMenuItem]', imports: [RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK], host: {
+                        '[class]': 'cssClasses',
+                        '[attr.aria-haspopup]': 'hasPopup',
+                    }, 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}" }]
+        }], ctorParameters: () => [], propDecorators: { isPromotional: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPromotional", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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 }] }], isOneLevelOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOneLevelOnly", required: false }] }], linkExtraAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkExtraAttributes", required: false }] }], megaMenuItemClicked: [{
                 type: Output
@@ -1310,11 +1262,6 @@ class EclMegaMenuComponent extends ECLBaseDirective {
     constructor() {
         super();
         this.isExpanded = false;
-        this.document = inject(DOCUMENT);
-        /**
-         * The 'role' attribute of the component is set to 'navigation'. should not be changed.
-         */
-        this.role = 'navigation';
         /**
          * The event that is emitted, when a menu item is selected.
          */
@@ -1367,6 +1314,7 @@ class EclMegaMenuComponent extends ECLBaseDirective {
         this.eclMegaMenuDataService = inject(EclMegaMenuDataService);
         this.el = inject(ElementRef);
         this.renderer = inject(Renderer2);
+        this.document = inject(DOCUMENT);
         this.window = this.document.defaultView;
         this.differ = this.differs.find([]).create();
         afterNextRender(() => {
@@ -1544,12 +1492,12 @@ class EclMegaMenuComponent extends ECLBaseDirective {
         switch (evt.key) {
             case KeyCode.ARROW_DOWN: {
                 evt.preventDefault();
-                this.focusOnPrevSibling(itemIndex);
+                this.focusOnNextSibling(itemIndex);
                 break;
             }
             case KeyCode.ARROW_UP: {
                 evt.preventDefault();
-                this.focusOnNextSibling(itemIndex);
+                this.focusOnPrevSibling(itemIndex);
                 break;
             }
             case KeyCode.ARROW_LEFT: {
@@ -1661,11 +1609,16 @@ class EclMegaMenuComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMegaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclMegaMenuComponent, isStandalone: true, selector: "nav[eclMegaMenu]", outputs: { megaMenuItemSelect: "megaMenuItemSelect" }, host: { attributes: { "role": "navigation" }, listeners: { "eclClickOutside": "onClickOutsideMegaMenu()" }, properties: { "class": "cssClasses", "attr.data-expanded": "expandedAttr" } }, 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.1.2", ngImport: i0, type: EclMegaMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nav[eclMegaMenu]', imports: [TranslatePipe, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON], hostDirectives: [
+            args: [{ selector: 'nav[eclMegaMenu]', imports: [TranslatePipe, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON], host: {
+                        role: 'navigation',
+                        '[class]': 'cssClasses',
+                        '[attr.data-expanded]': 'expandedAttr',
+                        '(eclClickOutside)': 'onClickOutsideMegaMenu()',
+                    }, hostDirectives: [
                         {
                             directive: ECLBaseDirective,
                         },
@@ -1674,19 +1627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                             outputs: ['eclClickOutside'],
                         },
                     ], 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>" }]
-        }], ctorParameters: () => [], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], expandedAttr: [{
-                type: HostBinding,
-                args: ['attr.data-expanded']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], megaMenuItemSelect: [{ type: i0.Output, args: ["megaMenuItemSelect"] }], menuItems: [{ type: i0.ContentChildren, args: [forwardRef(() => EclMegaMenuItemComponent), { ...{ descendants: true }, isSignal: true }] }], onClickOutsideMegaMenu: [{
-                type: HostListener,
-                args: ['eclClickOutside']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { megaMenuItemSelect: [{ type: i0.Output, args: ["megaMenuItemSelect"] }], menuItems: [{ type: i0.ContentChildren, args: [forwardRef(() => EclMegaMenuItemComponent), { ...{ descendants: true }, isSignal: true }] }] } });
 
 const EUI_ECL_MEGA_MENU = [
     EclMegaMenuComponent,