@eui/ecl 23.0.0-alpha.3 → 23.0.0-alpha.5

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, ContentChildren, forwardRef, ViewChild, Component, Injectable, RendererFactory2, EventEmitter, DOCUMENT, afterNextRender, Output, ContentChild, signal, IterableDiffers, PLATFORM_ID, Renderer2, input, output, HostListener } 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 * as i1$1 from '@eui/ecl/core';
 import { ECLBaseDirective, KeyCode, EclRtlService, ECLClickOutsideDirective } from '@eui/ecl/core';
 import { EuiAppShellService } from '@eui/core';
@@ -163,6 +163,8 @@ class EclMegaMenuFeaturedComponent extends ECLBaseDirective {
         super(...arguments);
         this.cmpClass = true;
         this.eclMegaMenuFeaturedStyleHeight = null;
+        this.titleId = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleId" }] : /* istanbul ignore next */ []));
     }
     ngAfterContentInit() {
         this.links?.forEach(link => link.class = 'ecl-mega-menu__featured-link');
@@ -177,11 +179,11 @@ class EclMegaMenuFeaturedComponent extends ECLBaseDirective {
         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: "title", titleId: "titleId" }, 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 }, { 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>" }); }
 }
 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>" }]
+            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']
@@ -193,9 +195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 args: ['style.height.px']
             }], title: [{
                 type: Input
-            }], titleId: [{
-                type: Input
-            }], links: [{
+            }], titleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleId", required: false }] }], links: [{
                 type: ContentChildren,
                 args: [forwardRef(() => EclLinkDirective), { descendants: true }]
             }], featuredItems: [{
@@ -268,7 +268,7 @@ class EclMegaMenuSubitemComponent extends ECLBaseDirective {
             super.getCssClasses('ecl-mega-menu__subitem'),
             this.isCurrent ? 'ecl-mega-menu__subitem--current' : '',
             this.isExpanded ? 'ecl-mega-menu__subitem--expanded' : '',
-            this.isSeeAll ? 'ecl-mega-menu__see-all' : '',
+            this.isSeeAll() ? 'ecl-mega-menu__see-all' : '',
             this.isParentLink ? 'ecl-mega-menu__parent-link' : '',
         ]
             .join(' ')
@@ -277,21 +277,40 @@ class EclMegaMenuSubitemComponent extends ECLBaseDirective {
     constructor() {
         super();
         this.isExpanded = false;
+        /**
+         * Sets id for the button element.
+         */
+        this.buttonId = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonId" }] : /* istanbul ignore next */ []));
         this.label = '';
         /**
          * If the link redirects to external page. Adds an 'external' icon.
          */
-        this.isExternal = false;
+        this.isExternal = input(false, { ...(ngDevMode ? { debugName: "isExternal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * If the link is external, this will be the title of the external icon.
+         */
+        this.externalIconTitle = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "externalIconTitle" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.routerLink = null;
-        this.queryParams = null;
-        this.queryParamsHandling = null;
+        this.routerLink = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
+        this.queryParams = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "queryParams" }] : /* istanbul ignore next */ []));
+        this.queryParamsHandling = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "queryParamsHandling" }] : /* istanbul ignore next */ []));
         this.href = '';
-        this.target = '';
+        this.target = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
         /**
          * Used for the 'View all' link.
          */
-        this.isSeeAll = false;
+        this.isSeeAll = input(false, { ...(ngDevMode ? { debugName: "isSeeAll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Adds custom attributes to an anchor element.
+         */
+        this.linkExtraAttributes = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linkExtraAttributes" }] : /* istanbul ignore next */ []));
         this.megaMenuSubItemClicked = new EventEmitter();
         this.megaMenuSubItemKeydown = new EventEmitter();
         this.isCurrent = false;
@@ -312,7 +331,7 @@ class EclMegaMenuSubitemComponent extends ECLBaseDirective {
         const eclMegaMenuService = this.eclMegaMenuService;
         afterNextRender(() => {
             if (this.subMenuItemLink) {
-                eclMegaMenuService.setExtraAttributesForLink(this.subMenuItemLink.el.nativeElement, this.linkExtraAttributes);
+                eclMegaMenuService.setExtraAttributesForLink(this.subMenuItemLink.el.nativeElement, this.linkExtraAttributes());
             }
             this.observeBreakpointChanges();
         });
@@ -403,39 +422,19 @@ class EclMegaMenuSubitemComponent extends ECLBaseDirective {
         });
     }
     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: "buttonId", label: "label", isExternal: ["isExternal", "isExternal", booleanAttribute], externalIconTitle: "externalIconTitle", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isSeeAll: ["isSeeAll", "isSeeAll", booleanAttribute], linkExtraAttributes: "linkExtraAttributes" }, 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 }, { 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]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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>" }]
+            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: Input
-            }], label: [{
+            }], buttonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonId", required: false }] }], label: [{
                 type: Input
-            }], isExternal: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], externalIconTitle: [{
-                type: Input
-            }], routerLink: [{
-                type: Input
-            }], queryParams: [{
+            }], 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
-            }], queryParamsHandling: [{
-                type: Input
-            }], href: [{
-                type: Input
-            }], target: [{
-                type: Input
-            }], isSeeAll: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], linkExtraAttributes: [{
-                type: Input
-            }], megaMenuLevel2: [{
+            }], 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: [{
@@ -654,6 +653,10 @@ class EclMegaMenuInfoComponent extends ECLBaseDirective {
          */
         this.eclMegaMenuInfoStyleOpacity = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "eclMegaMenuInfoStyleOpacity" }] : /* istanbul ignore next */ []));
+        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.platformId = inject(PLATFORM_ID);
         this.doc = inject(DOCUMENT$1);
         this.window = this.doc.defaultView;
@@ -712,24 +715,20 @@ 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: "14.0.0", version: "22.0.5", type: EclMegaMenuInfoComponent, isStandalone: true, selector: "div[eclMegaMenuInfo]", inputs: { title: "title", titleId: "titleId" }, 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.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>" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMegaMenuInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[eclMegaMenuInfo]', host: {
                         '[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>" }]
+                    }, 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: Input
-            }], titleId: [{
-                type: Input
-            }], linkItem: [{
+            }], 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)]
             }] } });
@@ -748,7 +747,7 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
             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' : '',
+            this.isPromotional() ? 'ecl-mega-menu__item--promotional' : '',
             this.isOneLevelOnly() ? 'ecl-mega-menu__item--one-level-only' : '',
         ]
             .join(' ')
@@ -760,19 +759,30 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
         this.renderer = inject(Renderer2);
         this.isExpanded = false;
         this.hasPopup = this.hasChildren ? true : null;
-        this.isPromotional = false;
+        this.isPromotional = input(false, { ...(ngDevMode ? { debugName: "isPromotional" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.label = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.routerLink = null;
-        this.queryParams = null;
-        this.queryParamsHandling = null;
+        this.routerLink = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
+        this.queryParams = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "queryParams" }] : /* istanbul ignore next */ []));
+        this.queryParamsHandling = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "queryParamsHandling" }] : /* istanbul ignore next */ []));
         this.href = '';
-        this.target = '';
+        this.target = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
         /**
          * This property should be used, when user wants the menu sub-items to use the maximum space available.
          * For example, if we have 10 sub-items, normally they will appear in one column only. If isOneLevelOnly is used, the sub-items
          * will take 2, 3, 4 columns, depending on presence of other sub-components.
          */
         this.isOneLevelOnly = input(false, { ...(ngDevMode ? { debugName: "isOneLevelOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Used in case user wants to set some custom attributes for the anchr tag.
+         */
+        this.linkExtraAttributes = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linkExtraAttributes" }] : /* istanbul ignore next */ []));
         this.megaMenuItemClicked = new EventEmitter();
         this.megaMenuItemKeydown = new EventEmitter();
         this.containerStyleHeight = null;
@@ -797,7 +807,7 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
                 this.calculateSublistStyle(value);
             });
             if (this.menuLink) {
-                this.eclMegaMenuService.setExtraAttributesForLink(this.menuLink.el.nativeElement, this.linkExtraAttributes);
+                this.eclMegaMenuService.setExtraAttributesForLink(this.menuLink.el.nativeElement, this.linkExtraAttributes());
             }
             this.observeBreakpointChanges();
             this.observeResizeWindow();
@@ -1175,35 +1185,20 @@ 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: false, isRequired: false, transformFunction: booleanAttribute }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: false, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: false, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: false, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: false, isRequired: false, transformFunction: null }, isOneLevelOnly: { classPropertyName: "isOneLevelOnly", publicName: "isOneLevelOnly", isSignal: true, isRequired: false, transformFunction: null }, linkExtraAttributes: { classPropertyName: "linkExtraAttributes", publicName: "linkExtraAttributes", isSignal: false, 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 }, { 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]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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}" }]
+            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: Input,
-                args: [{ transform: booleanAttribute }]
-            }], label: [{
-                type: Input
-            }], routerLink: [{
-                type: Input
-            }], queryParams: [{
-                type: Input
-            }], queryParamsHandling: [{
-                type: Input
-            }], href: [{
-                type: Input
-            }], target: [{
-                type: Input
-            }], isOneLevelOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOneLevelOnly", required: false }] }], linkExtraAttributes: [{
+            }], 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
-            }], megaMenuItemClicked: [{
+            }], 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
             }], megaMenuItemKeydown: [{
                 type: Output
@@ -1613,7 +1608,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         },
                         {
                             directive: ECLClickOutsideDirective,
-                            // eslint-disable-next-line @angular-eslint/no-outputs-metadata-property
                             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>" }]