npm - @eui/ecl - Versions diffs - 21.0.0-alpha.14 → 21.0.0-alpha.16 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (239) hide show

package/fesm2022/eui-ecl-components-ecl-media-container.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"eui-ecl-components-ecl-media-container.mjs","sources":["../../components/ecl-media-container/ecl-media-container-iframe.directive.ts","../../components/ecl-media-container/ecl-media-container-item-audio-description.directive.ts","../../components/ecl-media-container/ecl-media-container-item.directive.ts","../../components/ecl-media-container/ecl-media-container-picture.directive.ts","../../components/ecl-media-container/ecl-media-container.component.ts","../../components/ecl-media-container/ecl-media-container.component.html","../../components/ecl-media-container/ecl-media-container.module.ts","../../components/ecl-media-container/index.ts","../../components/ecl-media-container/eui-ecl-components-ecl-media-container.ts"],"sourcesContent":["import { Directive, ElementRef, HostBinding, Input, inject } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/*\n Adds styling and attributes to the iframe element.\n /\n@Directive({\n selector: 'iframe[eclMediaContainerIframe]',\n})\nexport class EclMediaContainerIframeDirective extends ECLBaseDirective {\n @Input() width;\n @Input() height;\n @Input()\n @HostBinding('style.aspect-ratio')\n get ratio(): string {\n return this.hasCustomRatio ? this.calculateCustomRatio() : null;\n }\n\n hasCustomRatio = false;\n private elem = inject(ElementRef);\n\n calculateCustomRatio(): string {\n let iframeHeight = this.height;\n let iframeWidth = this.width;\n if (!iframeWidth \|\| !iframeHeight) {\n iframeWidth = this.elem.nativeElement.offsetWidth;\n iframeHeight = this.elem.nativeElement.offsetHeight;\n }\n return `${iframeWidth}/${iframeHeight}`;\n }\n}\n","import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/\n Adds styling to the media container description.\n /\n@Directive({\n\tselector: '[eclMediaContainerItemAudioDescription]',\n})\nexport class EclMediaContainerItemAudioDescriptionDirective extends ECLBaseDirective {\n\t@HostBinding('class')\n\tget cssClasses(): string {\n\t\treturn [super.getCssClasses('ecl-media-container__media-audio')].join(' ').trim();\n\t}\n}\n","import { AfterContentInit, ContentChild, Directive, ElementRef, HostBinding, Input, afterNextRender, inject } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclMediaContainerIframeDirective } from './ecl-media-container-iframe.directive';\n\n/\n Adds styling and functionality to the media container item /image.\n /\n@Directive({\n selector: '[eclMediaContainerItem], img[eclMediaContainerImage]',\n})\nexport class EclMediaContainerItemDirective extends ECLBaseDirective implements AfterContentInit {\n el = inject(ElementRef);\n\n @Input() ratio: string;\n @ContentChild(EclMediaContainerIframeDirective, { static: false }) contentIframe: EclMediaContainerIframeDirective;\n\n @HostBinding('class')\n get cssClasses(): string {\n return [\n super.getCssClasses('ecl-media-container__media'),\n this.ratio ? `ecl-media-container__media--ratio-${this.ratio}` : '',\n this.isVideo ? 'ecl-video' : '',\n ]\n .join(' ')\n .trim();\n }\n\n public isVideo = false;\n\n constructor() {\n super();\n afterNextRender(() => {\n this.setIframeUrl();\n });\n }\n\n ngAfterContentInit(): void {\n if (this.contentIframe) {\n this.contentIframe.hasCustomRatio = this.ratio ? false : true;\n }\n const selector = this.el.nativeElement.tagName;\n this.isVideo = selector === 'VIDEO';\n }\n\n // TODO: is this really needed?\n setIframeUrl(): void {\n if (this.el.nativeElement.lastChild && this.el.nativeElement.lastChild.nodeName === 'IFRAME') {\n const iframe = this.el.nativeElement.lastChild;\n const iframeUrl = new URL(iframe.src);\n if (iframeUrl.host.includes('youtube')) {\n iframe.src = iframeUrl;\n }\n }\n }\n}\n","import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/\n Applies styles for the picture element.\n /\n@Directive({\n selector: 'picture[eclMediaContainerPicture]',\n})\nexport class EclMediaContainerPictureDirective extends ECLBaseDirective {\n @HostBinding('class')\n get cssClasses(): string {\n return [super.getCssClasses('ecl-picture ecl-media-container__picture')].join(' ').trim();\n }\n}\n","import { AfterContentInit, Component, ContentChild, HostBinding, Input, Renderer2, ViewChild, booleanAttribute, ViewChildren, QueryList, inject } from '@angular/core';\nimport { take, timer } from 'rxjs'\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclExpandableComponent } from '@eui/ecl/components/ecl-expandable';\nimport { EclMediaContainerItemDirective } from './ecl-media-container-item.directive';\nimport { EclButtonComponent, EclButtonModule } from '@eui/ecl/components/ecl-button';\nimport { EclIconModule } from '@eui/ecl/components/ecl-icon';\n\n/\n A media container is used to display media items (video, audio, image or other data) with a caption.\n /\n@Component({\n selector: 'ecl-media-container',\n templateUrl: './ecl-media-container.component.html',\n imports: [EclButtonModule, EclIconModule],\n styles: [\n `\n :host {\n display: block;\n }\n `,\n ],\n})\nexport class EclMediaContainerComponent extends ECLBaseDirective implements AfterContentInit {\n @Input({ transform: booleanAttribute }) isFullWidth = false;\n /\n Used for a video only - if the video should play immediately.\n /\n @Input({ transform: booleanAttribute }) eclAutoplay = false;\n\n @ContentChild(EclExpandableComponent) expandable: EclExpandableComponent;\n @ContentChild(EclMediaContainerItemDirective) eclMediaContainerItem: EclMediaContainerItemDirective;\n @ViewChildren(EclButtonComponent) eclButtons: QueryList<EclButtonComponent>;\n @ViewChild('pauseButton') pauseButton: EclButtonComponent;\n @ViewChild('playButton') playButton: EclButtonComponent;\n\n /\n Applies specific classes for the component.\n /\n @HostBinding('class')\n get cssClasses(): string {\n return [super.getCssClasses('ecl-media-container')].join(' ').trim();\n }\n\n public isPlaying = false;\n private readonly DELAY = 0;\n private renderer = inject(Renderer2);\n\n ngAfterContentInit(): void {\n // Manage additional attributes, if component includes video and should be played by default.\n if(this.hasVideo && this.eclAutoplay ) {\n const videoEl = this.eclMediaContainerItem.el.nativeElement;\n\n this.renderer.listen(videoEl, 'play', () => {\n this.isPlaying = true;\n })\n\n this.renderer.listen(videoEl, 'pause', () => {\n this.isPlaying = false;\n })\n\n this.renderer.setAttribute(this.eclMediaContainerItem.el.nativeElement, 'loop', '');\n this.renderer.setAttribute(this.eclMediaContainerItem.el.nativeElement, 'muted', '');\n this.renderer.setProperty(this.eclMediaContainerItem.el.nativeElement, 'muted', true);\n this.renderer.removeAttribute(this.eclMediaContainerItem.el.nativeElement, 'controls');\n }\n\n if (this.expandable) {\n this.expandable.class = [this.expandable.class, 'ecl-media-container__expandable'].join(' ');\n }\n }\n\n get hasVideo(): boolean {\n return this.eclMediaContainerItem?.isVideo;\n }\n\n /\n When user clicks on 'play' button -> start the video and move the focus to the 'pause' button.\n /\n onVideoPlay(): void {\n const videoEl = this.eclMediaContainerItem.el.nativeElement;\n videoEl.play();\n\n timer(this.DELAY).pipe(take(1)).subscribe(() => {\n const pauseButton = this.eclButtons.find(\n button => button === this.pauseButton );\n this.focusOnButton(pauseButton);\n });\n }\n\n /\n When user clicks on 'pause' button -> pause the video and move the focus to the 'play' button.\n /\n onVideoPause(): void {\n const videoEl = this.eclMediaContainerItem.el.nativeElement;\n videoEl.pause();\n\n timer(this.DELAY).pipe(take(1)).subscribe(() => {\n const playButton = this.eclButtons.find(\n button => button === this.playButton);\n this.focusOnButton(playButton);\n });\n }\n\n private focusOnButton(button: EclButtonComponent): void {\n if (!button) {\n return;\n }\n button.onFocus();\n }\n}\n","<figure class=\"ecl-media-container__figure\" [class.ecl-media-container--full-width]=\"isFullWidth\">\n @if (hasVideo) {\n <div class=\"ecl-media-container__video-wrapper\">\n <ng-content select=\"video[eclMediaContainerItem]\"></ng-content>\n @if (eclAutoplay) {\n <button #playButton eclButton variant=\"tertiary\" isIconOnly class=\"ecl-media-container__play\" (click)=\"onVideoPlay()\"\n [style.display]=\"isPlaying ? 'none' : 'flex'\" type=\"button\">\n <span eclButtonLabel>Play</span>\n <ecl-icon icon=\"play-outline\" size=\"m\"></ecl-icon>\n </button>\n <button #pauseButton eclButton variant=\"tertiary\" isIconOnly class=\"ecl-media-container__pause\" (click)=\"onVideoPause()\"\n [style.display]=\"isPlaying ? 'flex' : 'none'\" type=\"button\">\n <span eclButtonLabel>Pause</span>\n <ecl-icon icon=\"pause-outline\" size=\"m\"></ecl-icon>\n </button>\n }\n </div>\n }\n <ng-content select=\"div[eclMediaContainerItem]\"></ng-content>\n <ng-content select=\"picture[eclMediaContainerPicture]\"></ng-content>\n\n <figcaption class=\"ecl-media-container__caption\">\n <ng-content></ng-content>\n </figcaption>\n <ng-content select=\"ecl-expandable\"></ng-content>\n</figure>\n","import { NgModule } from '@angular/core';\nimport { EclMediaContainerIframeDirective } from './ecl-media-container-iframe.directive';\nimport { EclMediaContainerItemAudioDescriptionDirective } from './ecl-media-container-item-audio-description.directive';\nimport { EclMediaContainerItemDirective } from './ecl-media-container-item.directive';\nimport { EclMediaContainerPictureDirective } from './ecl-media-container-picture.directive';\nimport { EclMediaContainerComponent } from './ecl-media-container.component';\n\nconst COMPONENTS = [\n EclMediaContainerComponent,\n EclMediaContainerItemDirective,\n EclMediaContainerIframeDirective,\n EclMediaContainerPictureDirective,\n EclMediaContainerItemAudioDescriptionDirective,\n];\n\n/\n Module that provides the EclMediaContainerComponent and its dependencies.\n \n @deprecated Use {@link EUI_ECL_MEDIA_CONTAINER} instead.\n /\n@NgModule({\n imports: [...COMPONENTS],\n exports: [...COMPONENTS],\n})\nexport class EclMediaContainerModule {}\n","import { EclMediaContainerIframeDirective } from './ecl-media-container-iframe.directive';\nimport { EclMediaContainerItemAudioDescriptionDirective } from './ecl-media-container-item-audio-description.directive';\nimport { EclMediaContainerItemDirective } from './ecl-media-container-item.directive';\nimport { EclMediaContainerPictureDirective } from './ecl-media-container-picture.directive';\nimport { EclMediaContainerComponent } from './ecl-media-container.component';\n\nexport from './ecl-media-container.module';\nexport * from './ecl-media-container.component';\nexport * from './ecl-media-container-item.directive';\nexport * from './ecl-media-container-iframe.directive';\nexport * from './ecl-media-container-picture.directive';\nexport * from './ecl-media-container-item-audio-description.directive';\n\nexport const EUI_ECL_MEDIA_CONTAINER = [\n EclMediaContainerComponent,\n EclMediaContainerItemDirective,\n EclMediaContainerIframeDirective,\n EclMediaContainerPictureDirective,\n EclMediaContainerItemAudioDescriptionDirective,\n] as const;","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"eui-ecl-components-ecl-media-container.mjs","sources":["../../components/ecl-media-container/ecl-media-container-iframe.directive.ts","../../components/ecl-media-container/ecl-media-container-item-audio-description.directive.ts","../../components/ecl-media-container/ecl-media-container-item.directive.ts","../../components/ecl-media-container/ecl-media-container-picture.directive.ts","../../components/ecl-media-container/ecl-media-container.component.ts","../../components/ecl-media-container/ecl-media-container.component.html","../../components/ecl-media-container/ecl-media-container.module.ts","../../components/ecl-media-container/index.ts","../../components/ecl-media-container/eui-ecl-components-ecl-media-container.ts"],"sourcesContent":["import { Directive, ElementRef, HostBinding, Input, inject } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/*\n Adds styling and attributes to the iframe element.\n /\n@Directive({\n selector: 'iframe[eclMediaContainerIframe]',\n})\nexport class EclMediaContainerIframeDirective extends ECLBaseDirective {\n @Input() width;\n @Input() height;\n @Input()\n @HostBinding('style.aspect-ratio')\n get ratio(): string {\n return this.hasCustomRatio ? this.calculateCustomRatio() : null;\n }\n\n hasCustomRatio = false;\n private elem = inject(ElementRef);\n\n calculateCustomRatio(): string {\n let iframeHeight = this.height;\n let iframeWidth = this.width;\n if (!iframeWidth \|\| !iframeHeight) {\n iframeWidth = this.elem.nativeElement.offsetWidth;\n iframeHeight = this.elem.nativeElement.offsetHeight;\n }\n return `${iframeWidth}/${iframeHeight}`;\n }\n}\n","import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/\n Adds styling to the media container description.\n /\n@Directive({\n\tselector: '[eclMediaContainerItemAudioDescription]',\n})\nexport class EclMediaContainerItemAudioDescriptionDirective extends ECLBaseDirective {\n\t@HostBinding('class')\n\tget cssClasses(): string {\n\t\treturn [super.getCssClasses('ecl-media-container__media-audio')].join(' ').trim();\n\t}\n}\n","import { AfterContentInit, ContentChild, Directive, ElementRef, HostBinding, Input, afterNextRender, inject } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclMediaContainerIframeDirective } from './ecl-media-container-iframe.directive';\n\n/\n Adds styling and functionality to the media container item /image.\n /\n@Directive({\n selector: '[eclMediaContainerItem], img[eclMediaContainerImage]',\n})\nexport class EclMediaContainerItemDirective extends ECLBaseDirective implements AfterContentInit {\n el = inject(ElementRef);\n\n @Input() ratio: string;\n @ContentChild(EclMediaContainerIframeDirective, { static: false }) contentIframe: EclMediaContainerIframeDirective;\n\n @HostBinding('class')\n get cssClasses(): string {\n return [\n super.getCssClasses('ecl-media-container__media'),\n this.ratio ? `ecl-media-container__media--ratio-${this.ratio}` : '',\n this.isVideo ? 'ecl-video' : '',\n ]\n .join(' ')\n .trim();\n }\n\n public isVideo = false;\n\n constructor() {\n super();\n afterNextRender(() => {\n this.setIframeUrl();\n });\n }\n\n ngAfterContentInit(): void {\n if (this.contentIframe) {\n this.contentIframe.hasCustomRatio = this.ratio ? false : true;\n }\n const selector = this.el.nativeElement.tagName;\n this.isVideo = selector === 'VIDEO';\n }\n\n // TODO: is this really needed?\n setIframeUrl(): void {\n if (this.el.nativeElement.lastChild && this.el.nativeElement.lastChild.nodeName === 'IFRAME') {\n const iframe = this.el.nativeElement.lastChild;\n const iframeUrl = new URL(iframe.src);\n if (iframeUrl.host.includes('youtube')) {\n iframe.src = iframeUrl;\n }\n }\n }\n}\n","import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/\n Applies styles for the picture element.\n /\n@Directive({\n selector: 'picture[eclMediaContainerPicture]',\n})\nexport class EclMediaContainerPictureDirective extends ECLBaseDirective {\n @HostBinding('class')\n get cssClasses(): string {\n return [super.getCssClasses('ecl-picture ecl-media-container__picture')].join(' ').trim();\n }\n}\n","import { AfterContentInit, Component, ContentChild, HostBinding, Input, Renderer2, ViewChild, booleanAttribute, ViewChildren, QueryList, inject } from '@angular/core';\nimport { take, timer } from 'rxjs'\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclExpandableComponent } from '@eui/ecl/components/ecl-expandable';\nimport { EclMediaContainerItemDirective } from './ecl-media-container-item.directive';\nimport { EclButtonComponent, EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n/\n A media container is used to display media items (video, audio, image or other data) with a caption.\n /\n@Component({\n selector: 'ecl-media-container',\n templateUrl: './ecl-media-container.component.html',\n imports: [...EUI_ECL_BUTTON, ...EUI_ECL_ICON],\n styles: [\n `\n :host {\n display: block;\n }\n `,\n ],\n})\nexport class EclMediaContainerComponent extends ECLBaseDirective implements AfterContentInit {\n @Input({ transform: booleanAttribute }) isFullWidth = false;\n /\n Used for a video only - if the video should play immediately.\n /\n @Input({ transform: booleanAttribute }) eclAutoplay = false;\n\n @ContentChild(EclExpandableComponent) expandable: EclExpandableComponent;\n @ContentChild(EclMediaContainerItemDirective) eclMediaContainerItem: EclMediaContainerItemDirective;\n @ViewChildren(EclButtonComponent) eclButtons: QueryList<EclButtonComponent>;\n @ViewChild('pauseButton') pauseButton: EclButtonComponent;\n @ViewChild('playButton') playButton: EclButtonComponent;\n\n /\n Applies specific classes for the component.\n /\n @HostBinding('class')\n get cssClasses(): string {\n return [super.getCssClasses('ecl-media-container')].join(' ').trim();\n }\n\n public isPlaying = false;\n private readonly DELAY = 0;\n private renderer = inject(Renderer2);\n\n ngAfterContentInit(): void {\n // Manage additional attributes, if component includes video and should be played by default.\n if(this.hasVideo && this.eclAutoplay ) {\n const videoEl = this.eclMediaContainerItem.el.nativeElement;\n\n this.renderer.listen(videoEl, 'play', () => {\n this.isPlaying = true;\n })\n\n this.renderer.listen(videoEl, 'pause', () => {\n this.isPlaying = false;\n })\n\n this.renderer.setAttribute(this.eclMediaContainerItem.el.nativeElement, 'loop', '');\n this.renderer.setAttribute(this.eclMediaContainerItem.el.nativeElement, 'muted', '');\n this.renderer.setProperty(this.eclMediaContainerItem.el.nativeElement, 'muted', true);\n this.renderer.removeAttribute(this.eclMediaContainerItem.el.nativeElement, 'controls');\n }\n\n if (this.expandable) {\n this.expandable.class = [this.expandable.class, 'ecl-media-container__expandable'].join(' ');\n }\n }\n\n get hasVideo(): boolean {\n return this.eclMediaContainerItem?.isVideo;\n }\n\n /\n When user clicks on 'play' button -> start the video and move the focus to the 'pause' button.\n /\n onVideoPlay(): void {\n const videoEl = this.eclMediaContainerItem.el.nativeElement;\n videoEl.play();\n\n timer(this.DELAY).pipe(take(1)).subscribe(() => {\n const pauseButton = this.eclButtons.find(\n button => button === this.pauseButton );\n this.focusOnButton(pauseButton);\n });\n }\n\n /\n When user clicks on 'pause' button -> pause the video and move the focus to the 'play' button.\n /\n onVideoPause(): void {\n const videoEl = this.eclMediaContainerItem.el.nativeElement;\n videoEl.pause();\n\n timer(this.DELAY).pipe(take(1)).subscribe(() => {\n const playButton = this.eclButtons.find(\n button => button === this.playButton);\n this.focusOnButton(playButton);\n });\n }\n\n private focusOnButton(button: EclButtonComponent): void {\n if (!button) {\n return;\n }\n button.onFocus();\n }\n}\n","<figure class=\"ecl-media-container__figure\" [class.ecl-media-container--full-width]=\"isFullWidth\">\n @if (hasVideo) {\n <div class=\"ecl-media-container__video-wrapper\">\n <ng-content select=\"video[eclMediaContainerItem]\"></ng-content>\n @if (eclAutoplay) {\n <button #playButton eclButton variant=\"tertiary\" isIconOnly class=\"ecl-media-container__play\" (click)=\"onVideoPlay()\"\n [style.display]=\"isPlaying ? 'none' : 'flex'\" type=\"button\">\n <span eclButtonLabel>Play</span>\n <ecl-icon icon=\"play-outline\" size=\"m\"></ecl-icon>\n </button>\n <button #pauseButton eclButton variant=\"tertiary\" isIconOnly class=\"ecl-media-container__pause\" (click)=\"onVideoPause()\"\n [style.display]=\"isPlaying ? 'flex' : 'none'\" type=\"button\">\n <span eclButtonLabel>Pause</span>\n <ecl-icon icon=\"pause-outline\" size=\"m\"></ecl-icon>\n </button>\n }\n </div>\n }\n <ng-content select=\"div[eclMediaContainerItem]\"></ng-content>\n <ng-content select=\"picture[eclMediaContainerPicture]\"></ng-content>\n\n <figcaption class=\"ecl-media-container__caption\">\n <ng-content></ng-content>\n </figcaption>\n <ng-content select=\"ecl-expandable\"></ng-content>\n</figure>\n","import { NgModule } from '@angular/core';\nimport { EclMediaContainerIframeDirective } from './ecl-media-container-iframe.directive';\nimport { EclMediaContainerItemAudioDescriptionDirective } from './ecl-media-container-item-audio-description.directive';\nimport { EclMediaContainerItemDirective } from './ecl-media-container-item.directive';\nimport { EclMediaContainerPictureDirective } from './ecl-media-container-picture.directive';\nimport { EclMediaContainerComponent } from './ecl-media-container.component';\n\nconst COMPONENTS = [\n EclMediaContainerComponent,\n EclMediaContainerItemDirective,\n EclMediaContainerIframeDirective,\n EclMediaContainerPictureDirective,\n EclMediaContainerItemAudioDescriptionDirective,\n];\n\n/\n Module that provides the EclMediaContainerComponent and its dependencies.\n \n @deprecated Use {@link EUI_ECL_MEDIA_CONTAINER} instead.\n /\n@NgModule({\n imports: [...COMPONENTS],\n exports: [...COMPONENTS],\n})\nexport class EclMediaContainerModule {}\n","import { EclMediaContainerIframeDirective } from './ecl-media-container-iframe.directive';\nimport { EclMediaContainerItemAudioDescriptionDirective } from './ecl-media-container-item-audio-description.directive';\nimport { EclMediaContainerItemDirective } from './ecl-media-container-item.directive';\nimport { EclMediaContainerPictureDirective } from './ecl-media-container-picture.directive';\nimport { EclMediaContainerComponent } from './ecl-media-container.component';\n\nexport from './ecl-media-container.module';\nexport * from './ecl-media-container.component';\nexport * from './ecl-media-container-item.directive';\nexport * from './ecl-media-container-iframe.directive';\nexport * from './ecl-media-container-picture.directive';\nexport * from './ecl-media-container-item-audio-description.directive';\n\nexport const EUI_ECL_MEDIA_CONTAINER = [\n EclMediaContainerComponent,\n EclMediaContainerItemDirective,\n EclMediaContainerIframeDirective,\n EclMediaContainerPictureDirective,\n EclMediaContainerItemAudioDescriptionDirective,\n] as const;","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

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

@@ -5,16 +5,15 @@ import { ECLBaseDirective, KeyCode, EclRtlService, EclUserDeviceService, ECLClic
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { Subject, takeUntil } from 'rxjs';
 import { NgTemplateOutlet } from '@angular/common';
-import * as i1 from '@angular/router';
-import { RouterModule } from '@angular/router';
-import * as i4 from '@eui/ecl/components/ecl-link';
-import { EclLinkModule, EclLinkDirective } from '@eui/ecl/components/ecl-link';
-import * as i2 from '@eui/ecl/components/ecl-button';
-import { EclButtonModule } from '@eui/ecl/components/ecl-button';
-import * as i3 from '@eui/ecl/components/ecl-icon';
-import { EclIconModule } from '@eui/ecl/components/ecl-icon';
+import { RouterLink, RouterLinkWithHref } from '@angular/router';
+import * as i3 from '@eui/ecl/components/ecl-link';
+import { EclLinkDirective, EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';
+import * as i1 from '@eui/ecl/components/ecl-button';
+import { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';
+import * as i2 from '@eui/ecl/components/ecl-icon';
+import { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';
 import { EclHeaderMenuComunicationService } from '@eui/ecl/shared';
-import * as i4$1 from '@ngx-translate/core';
+import * as i4 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 /**
@@ -25,10 +24,10 @@ class EclMegaMenuContainerDirective extends ECLBaseDirective {
         super(...arguments);
         this.hasClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuContainerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclMegaMenuContainerDirective, isStandalone: true, selector: "div[eclMegaMenuContainer]", host: { properties: { "class.ecl": "this.hasClass" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuContainerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclMegaMenuContainerDirective, isStandalone: true, selector: "div[eclMegaMenuContainer]", host: { properties: { "class.ecl": "this.hasClass" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuContainerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -47,10 +46,10 @@ class EclMegaMenuFeaturedListDirective extends ECLBaseDirective {
         super(...arguments);
         this.cmpClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuFeaturedListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclMegaMenuFeaturedListDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedList]", host: { properties: { "class.ecl-mega-menu__featured-list": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuFeaturedListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclMegaMenuFeaturedListDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedList]", host: { properties: { "class.ecl-mega-menu__featured-list": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuFeaturedListDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuFeaturedListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclMegaMenuFeaturedList]',
@@ -72,10 +71,10 @@ class EclMegaMenuFeaturedListItemDirective extends ECLBaseDirective {
     getEclMegaMenuFeaturedItemHeight() {
         return this.el.nativeElement.scrollHeight;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuFeaturedListItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclMegaMenuFeaturedListItemDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedListItem]", host: { properties: { "class.ecl-mega-menu__featured-list__item": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuFeaturedListItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclMegaMenuFeaturedListItemDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedListItem]", host: { properties: { "class.ecl-mega-menu__featured-list__item": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuFeaturedListItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuFeaturedListItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclMegaMenuFeaturedListItem]',
@@ -92,10 +91,10 @@ class EclMegaMenuFeaturedPictureDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-picture ecl-mega-menu__featured-picture')].join(' ').trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuFeaturedPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclMegaMenuFeaturedPictureDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuFeaturedPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclMegaMenuFeaturedPictureDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuFeaturedPictureDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuFeaturedPictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclMegaMenuFeaturedPicture]',
@@ -112,10 +111,10 @@ class EclMegaMenuFeaturedImageDirective extends ECLBaseDirective {
         super(...arguments);
         this.cmpClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuFeaturedImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclMegaMenuFeaturedImageDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedImage]", host: { properties: { "class.ecl-mega-menu__featured-image": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuFeaturedImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclMegaMenuFeaturedImageDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedImage]", host: { properties: { "class.ecl-mega-menu__featured-image": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuFeaturedImageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuFeaturedImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclMegaMenuFeaturedImage]',
@@ -151,10 +150,10 @@ class EclMegaMenuDataService {
     eclSubItemEscapeEvent(value) {
         this.eclSubItemEscape.next(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuDataService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuDataService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuDataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuDataService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -173,10 +172,10 @@ class EclMegaMenuService {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -200,10 +199,10 @@ class EclMegaMenuFeaturedComponent extends ECLBaseDirective {
         this.listItems.forEach(it => result += it.getEclMegaMenuFeaturedItemHeight());
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuFeaturedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.1", 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: "listItems", predicate: i0.forwardRef(() => EclMegaMenuFeaturedListItemDirective), descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-mega-menu__featured-scrollable\">\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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuFeaturedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", 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: "listItems", predicate: i0.forwardRef(() => EclMegaMenuFeaturedListItemDirective), descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-mega-menu__featured-scrollable\">\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: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuFeaturedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuFeaturedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[eclMegaMenuFeatured]', template: "<div class=\"ecl-mega-menu__featured-scrollable\">\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: { cmpClass: [{
@@ -262,9 +261,9 @@ class EclMegaMenuSubitemComponent extends ECLBaseDirective {
          * Used to set the height of the second level subitems container.
          */
         this.level2StyleHeight = null;
+        this.display = '';
         this.destroy$ = new Subject();
         this.isParentLink = false;
-        this.display = '';
         this.cdkBreakpointObserver = inject(BreakpointObserver);
         this.eclMegaMenuDataService = inject(EclMegaMenuDataService);
         this.el = inject(ElementRef);
@@ -362,12 +361,12 @@ class EclMegaMenuSubitemComponent extends ECLBaseDirective {
             this.isMobileBreakpoint = result.matches;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuSubitemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.1", 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: { "attr.aria-expanded": "this.isExpanded", "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\" 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: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: EclButtonModule }, { kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i2.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "ngmodule", type: EclIconModule }, { kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "ngmodule", type: EclLinkModule }, { kind: "directive", type: i4.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: i4.EclLinkLabelDirective, selector: "[eclLinkLabel]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuSubitemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", 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: { "attr.aria-expanded": "this.isExpanded", "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\" 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", "routerLink"] }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i3.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: i3.EclLinkLabelDirective, selector: "[eclLinkLabel]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuSubitemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuSubitemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'li[eclMegaMenuSubitem]', imports: [NgTemplateOutlet, RouterModule, EclButtonModule, EclIconModule, EclLinkModule], 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\" 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\" 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: { isExpanded: [{
                 type: HostBinding,
                 args: ['attr.aria-expanded']
@@ -430,10 +429,10 @@ class EclMegaMenuListDirective extends ECLBaseDirective {
         super(...arguments);
         this.cmpClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclMegaMenuListDirective, isStandalone: true, selector: "ul[eclMegaMenuList]", host: { properties: { "class.ecl-mega-menu__list": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclMegaMenuListDirective, isStandalone: true, selector: "ul[eclMegaMenuList]", host: { properties: { "class.ecl-mega-menu__list": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuListDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ul[eclMegaMenuList]',
@@ -450,10 +449,10 @@ class EclMegaMenuSpacerDirective extends ECLBaseDirective {
         super(...arguments);
         this.cmpClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuSpacerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclMegaMenuSpacerDirective, isStandalone: true, selector: "ul[eclMegaMenuSpacer]", host: { properties: { "class.ecl-mega-menu__spacer": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuSpacerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclMegaMenuSpacerDirective, isStandalone: true, selector: "ul[eclMegaMenuSpacer]", host: { properties: { "class.ecl-mega-menu__spacer": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuSpacerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuSpacerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ul[eclMegaMenuSpacer]',
@@ -575,10 +574,10 @@ class EclMegaMenuSublistDirective extends ECLBaseDirective {
             setTimeout(() => this.resetStyles());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuSublistDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclMegaMenuSublistDirective, isStandalone: true, selector: "ul[eclMegaMenuSublist]", host: { properties: { "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) }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuSublistDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclMegaMenuSublistDirective, isStandalone: true, selector: "ul[eclMegaMenuSublist]", host: { properties: { "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) }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuSublistDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuSublistDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ul[eclMegaMenuSublist]',
@@ -647,10 +646,10 @@ class EclMegaMenuInfoComponent extends ECLBaseDirective {
         const bottomY = this.el.nativeElement.getBoundingClientRect().bottom;
         this.eclMegaMenuDataService.updateEclMegaMenuInfoSize(bottomY);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclMegaMenuInfoComponent, isStandalone: true, selector: "div[eclMegaMenuInfo]", inputs: { title: "title" }, host: { properties: { "class": "this.cssClasses", "style.height.px": "this.eclMegaMenuInfoStyleHeight", "style.opacity": "this.eclMegaMenuInfoStyleOpacity" } }, queries: [{ propertyName: "linkItem", first: true, predicate: i0.forwardRef(() => EclLinkDirective), descendants: true }], usesInheritance: true, ngImport: i0, template: "<span class=\"ecl-mega-menu__info-title\">{{ 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclMegaMenuInfoComponent, isStandalone: true, selector: "div[eclMegaMenuInfo]", inputs: { title: "title" }, host: { properties: { "class": "this.cssClasses", "style.height.px": "this.eclMegaMenuInfoStyleHeight", "style.opacity": "this.eclMegaMenuInfoStyleOpacity" } }, queries: [{ propertyName: "linkItem", first: true, predicate: i0.forwardRef(() => EclLinkDirective), descendants: true }], usesInheritance: true, ngImport: i0, template: "<span class=\"ecl-mega-menu__info-title\">{{ 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: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[eclMegaMenuInfo]', template: "<span class=\"ecl-mega-menu__info-title\">{{ 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: [{
@@ -932,12 +931,12 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
             this.resetWrapperStyle();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.1", type: EclMegaMenuItemComponent, isStandalone: true, selector: "li[eclMegaMenuItem]", inputs: { label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", linkExtraAttributes: "linkExtraAttributes" }, outputs: { megaMenuItemClicked: "megaMenuItemClicked", megaMenuItemKeydown: "megaMenuItemKeydown" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isExpanded", "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: "eclMegaMenuContainer", first: true, predicate: i0.forwardRef(() => EclMegaMenuContainerDirective), 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\" [style.height.px]=\"megaMenuMegaStyleHeight\" [style.opacity]=\"megaMenuMegaStyleOpacity\">\n            <ng-content select=\"[eclMegaMenuSublist]\"></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: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: EclButtonModule }, { kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i2.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "ngmodule", type: EclIconModule }, { kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "ngmodule", type: EclLinkModule }, { kind: "directive", type: i4.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: i4.EclLinkLabelDirective, selector: "[eclLinkLabel]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EclMegaMenuItemComponent, isStandalone: true, selector: "li[eclMegaMenuItem]", inputs: { label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", linkExtraAttributes: "linkExtraAttributes" }, outputs: { megaMenuItemClicked: "megaMenuItemClicked", megaMenuItemKeydown: "megaMenuItemKeydown" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isExpanded", "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: "eclMegaMenuContainer", first: true, predicate: i0.forwardRef(() => EclMegaMenuContainerDirective), 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\" [style.height.px]=\"megaMenuMegaStyleHeight\" [style.opacity]=\"megaMenuMegaStyleOpacity\">\n            <ng-content select=\"[eclMegaMenuSublist]\"></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", "routerLink"] }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i3.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: i3.EclLinkLabelDirective, selector: "[eclLinkLabel]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'li[eclMegaMenuItem]', imports: [RouterModule, EclButtonModule, EclIconModule, EclLinkModule], 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\" [style.height.px]=\"megaMenuMegaStyleHeight\" [style.opacity]=\"megaMenuMegaStyleOpacity\">\n            <ng-content select=\"[eclMegaMenuSublist]\"></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\" [style.height.px]=\"megaMenuMegaStyleHeight\" [style.opacity]=\"megaMenuMegaStyleOpacity\">\n            <ng-content select=\"[eclMegaMenuSublist]\"></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']
@@ -1305,12 +1304,12 @@ class EclMegaMenuComponent extends ECLBaseDirective {
     enableScroll() {
         this.renderer.removeClass(document.body, 'ecl-mega-menu-prevent-scroll');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.1", type: EclMegaMenuComponent, isStandalone: true, selector: "nav[eclMegaMenu]", outputs: { megaMenuItemSelect: "megaMenuItemSelect" }, host: { listeners: { "eclClickOutside": "onClickOutsideMegaMenu()" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isExpanded", "attr.role": "this.role" } }, queries: [{ propertyName: "menuItems", predicate: i0.forwardRef(() => EclMegaMenuItemComponent), descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.ECLBaseDirective }, { directive: i1$1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<div class=\"ecl-mega-menu__overlay\" [style.top.px]=\"overlayStyleTop\"></div>\n<div class=\"ecl-container ecl-mega-menu__container\">\n    <button class=\"ecl-button ecl-button--tertiary ecl-mega-menu__open ecl-button--icon-only\"\n        type=\"button\" aria-expanded=\"isMobileExpanded\" (click)=\"onMegaMenuMobileOpen()\">\n        <ecl-icon icon=\"hamburger\" size=\"m\"></ecl-icon>\n        <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        @if (isOpenMobile) {\n            <span class=\"ecl-button__label\">{{ 'ecl.common.CLOSE' | translate }}</span>\n        } @else {\n            <span class=\"ecl-button__label\">{{ 'ecl.menu.MENU' | translate }}</span>\n        }\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=\"ghost\" 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: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: EclButtonModule }, { kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i2.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "ngmodule", type: EclIconModule }, { kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EclMegaMenuComponent, isStandalone: true, selector: "nav[eclMegaMenu]", outputs: { megaMenuItemSelect: "megaMenuItemSelect" }, host: { listeners: { "eclClickOutside": "onClickOutsideMegaMenu()" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isExpanded", "attr.role": "this.role" } }, queries: [{ propertyName: "menuItems", predicate: i0.forwardRef(() => EclMegaMenuItemComponent), descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.ECLBaseDirective }, { directive: i1$1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<div class=\"ecl-mega-menu__overlay\" [style.top.px]=\"overlayStyleTop\"></div>\n<div class=\"ecl-container ecl-mega-menu__container\">\n    <button class=\"ecl-button ecl-button--tertiary ecl-mega-menu__open ecl-button--icon-only\"\n        type=\"button\" aria-expanded=\"isMobileExpanded\" (click)=\"onMegaMenuMobileOpen()\">\n        <ecl-icon icon=\"hamburger\" size=\"m\"></ecl-icon>\n        <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        @if (isOpenMobile) {\n            <span class=\"ecl-button__label\">{{ 'ecl.common.CLOSE' | translate }}</span>\n        } @else {\n            <span class=\"ecl-button__label\">{{ 'ecl.menu.MENU' | translate }}</span>\n        }\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=\"ghost\" 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: "ngmodule", type: TranslateModule }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nav[eclMegaMenu]', imports: [TranslateModule, EclButtonModule, EclIconModule], hostDirectives: [
+            args: [{ selector: 'nav[eclMegaMenu]', imports: [TranslateModule, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON], hostDirectives: [
                         {
                             directive: ECLBaseDirective,
                         },
@@ -1360,8 +1359,8 @@ const COMPONENTS = [
  * @deprecated Use {@link EUI_ECL_MEGA_MENU} instead.
  */
 class EclMegaMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuModule, imports: [EclMegaMenuComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuModule, imports: [EclMegaMenuComponent,
             EclMegaMenuItemComponent,
             EclMegaMenuSubitemComponent,
             EclMegaMenuInfoComponent,
@@ -1386,11 +1385,11 @@ class EclMegaMenuModule {
             EclMegaMenuSublistDirective,
             EclMegaMenuContainerDirective,
             EclMegaMenuSpacerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuModule, imports: [EclMegaMenuComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuModule, imports: [EclMegaMenuComponent,
             EclMegaMenuItemComponent,
             EclMegaMenuSubitemComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclMegaMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclMegaMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...COMPONENTS],