@eui/ecl 21.0.0-next.9 → 21.0.0-rc.1

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

@@ -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, 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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"}
+{"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/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 { 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.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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Directive, inject, ElementRef, booleanAttribute, Input, Injectable, RendererFactory2, forwardRef, ContentChildren, ViewChild, Component, EventEmitter, afterNextRender, Output, ContentChild, IterableDiffers, Renderer2, ChangeDetectorRef, HostListener, NgModule } from '@angular/core';
+import { HostBinding, Directive, inject, ElementRef, booleanAttribute, Input, Injectable, RendererFactory2, forwardRef, ContentChildren, ViewChild, Component, EventEmitter, afterNextRender, Output, ContentChild, IterableDiffers, Renderer2, ChangeDetectorRef, HostListener } from '@angular/core';
 import * as i1$1 from '@eui/ecl/core';
 import { ECLBaseDirective, KeyCode, EclRtlService, ECLClickOutsideDirective } from '@eui/ecl/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
@@ -25,10 +25,10 @@ class EclMegaMenuContainerDirective extends ECLBaseDirective {
         super(...arguments);
         this.hasClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuContainerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-rc.2", 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.3", ngImport: i0, type: EclMegaMenuContainerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.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-rc.2", ngImport: i0, type: EclMegaMenuContainerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -47,10 +47,10 @@ class EclMegaMenuFeaturedListDirective extends ECLBaseDirective {
         super(...arguments);
         this.cmpClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuFeaturedListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-rc.2", 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.3", ngImport: i0, type: EclMegaMenuFeaturedListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.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-rc.2", ngImport: i0, type: EclMegaMenuFeaturedListDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuFeaturedListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclMegaMenuFeaturedList]',
@@ -74,10 +74,10 @@ class EclMegaMenuFeaturedListItemDirective extends ECLBaseDirective {
     getEclMegaMenuFeaturedItemHeight() {
         return this.el.nativeElement.scrollHeight;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuFeaturedListItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.0-rc.2", type: EclMegaMenuFeaturedListItemDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedListItem]", inputs: { isImageOnly: ["isImageOnly", "isImageOnly", booleanAttribute], isCombo: ["isCombo", "isCombo", booleanAttribute] }, host: { properties: { "class.ecl-mega-menu__featured-list__item": "this.cmpClass", "class.ecl-mega-menu__featured-list__item--image-only": "this.isImageOnly", "class.ecl-mega-menu__featured-list__item--combo": "this.isCombo" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuFeaturedListItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.3", type: EclMegaMenuFeaturedListItemDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedListItem]", inputs: { isImageOnly: ["isImageOnly", "isImageOnly", booleanAttribute], isCombo: ["isCombo", "isCombo", booleanAttribute] }, host: { properties: { "class.ecl-mega-menu__featured-list__item": "this.cmpClass", "class.ecl-mega-menu__featured-list__item--image-only": "this.isImageOnly", "class.ecl-mega-menu__featured-list__item--combo": "this.isCombo" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuFeaturedListItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuFeaturedListItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclMegaMenuFeaturedListItem]',
@@ -103,10 +103,10 @@ class EclMegaMenuFeaturedListItemDescriptionDirective extends ECLBaseDirective {
         super(...arguments);
         this.cmpClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuFeaturedListItemDescriptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-rc.2", type: EclMegaMenuFeaturedListItemDescriptionDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedListItemDescription]", host: { properties: { "class.ecl-mega-menu__featured-list__item-description": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuFeaturedListItemDescriptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: EclMegaMenuFeaturedListItemDescriptionDirective, isStandalone: true, selector: "[eclMegaMenuFeaturedListItemDescription]", host: { properties: { "class.ecl-mega-menu__featured-list__item-description": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuFeaturedListItemDescriptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuFeaturedListItemDescriptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclMegaMenuFeaturedListItemDescription]',
@@ -123,10 +123,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-rc.2", ngImport: i0, type: EclMegaMenuFeaturedPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-rc.2", 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.3", ngImport: i0, type: EclMegaMenuFeaturedPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.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-rc.2", ngImport: i0, type: EclMegaMenuFeaturedPictureDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuFeaturedPictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclMegaMenuFeaturedPicture]',
@@ -143,10 +143,10 @@ class EclMegaMenuFeaturedImageDirective extends ECLBaseDirective {
         super(...arguments);
         this.cmpClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuFeaturedImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-rc.2", 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.3", ngImport: i0, type: EclMegaMenuFeaturedImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.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-rc.2", ngImport: i0, type: EclMegaMenuFeaturedImageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuFeaturedImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclMegaMenuFeaturedImage]',
@@ -182,10 +182,10 @@ class EclMegaMenuDataService {
     eclSubItemEscapeEvent(value) {
         this.eclSubItemEscape.next(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuDataService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuDataService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuDataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuDataService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -204,10 +204,10 @@ class EclMegaMenuService {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -233,10 +233,10 @@ class EclMegaMenuFeaturedComponent extends ECLBaseDirective {
         this.featuredItems?.forEach(el => result += el.getEclMegaMenuFeaturedItemHeight());
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuFeaturedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-rc.2", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuFeaturedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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: "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: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuFeaturedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuFeaturedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[eclMegaMenuFeatured]', template: "<div class=\"ecl-mega-menu__featured-scrollable\" #megaMenuFeaturedScrollable>\n    <ng-content select=\"[eclMegaMenuFeaturedPicture]\"></ng-content>\n    @if(title) {\n    <span class=\"ecl-mega-menu__featured-title\" id=\"{{titleId}}\">{{ title }}</span>\n    }\n    <ng-content select=\"[eclMegaMenuFeaturedList]\"></ng-content>\n</div>" }]
         }], propDecorators: { megaMenuFeaturedScrollable: [{
@@ -404,10 +404,10 @@ class EclMegaMenuSubitemComponent extends ECLBaseDirective {
             this.isMobileBreakpoint = result.matches;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuSubitemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-rc.2", 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: 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", "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: ["isInverted", "isIconOnly", "isHighlight", "isNoVisited", "variant"] }, { kind: "directive", type: i3.EclLinkLabelDirective, selector: "[eclLinkLabel]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuSubitemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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: { "class": "this.cssClasses", "style.display": "this.display" } }, queries: [{ propertyName: "submenu", first: true, predicate: 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", "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", "variant"] }, { kind: "directive", type: i3.EclLinkLabelDirective, selector: "[eclLinkLabel]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuSubitemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", 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\" 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: [{
@@ -469,10 +469,10 @@ class EclMegaMenuListDirective extends ECLBaseDirective {
         super(...arguments);
         this.cmpClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-rc.2", 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.3", ngImport: i0, type: EclMegaMenuListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.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-rc.2", ngImport: i0, type: EclMegaMenuListDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ul[eclMegaMenuList]',
@@ -489,10 +489,10 @@ class EclMegaMenuSpacerDirective extends ECLBaseDirective {
         super(...arguments);
         this.cmpClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuSpacerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-rc.2", type: EclMegaMenuSpacerDirective, isStandalone: true, selector: "li[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.3", ngImport: i0, type: EclMegaMenuSpacerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: EclMegaMenuSpacerDirective, isStandalone: true, selector: "li[eclMegaMenuSpacer]", host: { properties: { "class.ecl-mega-menu__spacer": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuSpacerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuSpacerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'li[eclMegaMenuSpacer]',
@@ -616,10 +616,10 @@ class EclMegaMenuSublistDirective extends ECLBaseDirective {
             setTimeout(() => this.resetStyles());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuSublistDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-rc.2", type: EclMegaMenuSublistDirective, isStandalone: true, selector: "ul[eclMegaMenuSublist]", outputs: { megaMenuSubItemClicked: "megaMenuSubItemClicked" }, host: { properties: { "class.ecl-mega-menu__sublist": "this.cmpClass", "class.ecl-mega-menu__sublist--scrollable": "this.isScrollable", "style.top.px": "this.styleTop" } }, queries: [{ propertyName: "spacer", first: true, predicate: i0.forwardRef(() => EclMegaMenuSpacerDirective), descendants: true }, { propertyName: "submenuItems", predicate: i0.forwardRef(() => EclMegaMenuSubitemComponent) }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuSublistDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: EclMegaMenuSublistDirective, isStandalone: true, selector: "ul[eclMegaMenuSublist]", outputs: { megaMenuSubItemClicked: "megaMenuSubItemClicked" }, host: { properties: { "class.ecl-mega-menu__sublist": "this.cmpClass", "class.ecl-mega-menu__sublist--scrollable": "this.isScrollable", "style.top.px": "this.styleTop" } }, queries: [{ propertyName: "spacer", first: true, predicate: i0.forwardRef(() => EclMegaMenuSpacerDirective), descendants: true }, { propertyName: "submenuItems", predicate: i0.forwardRef(() => EclMegaMenuSubitemComponent) }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuSublistDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuSublistDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ul[eclMegaMenuSublist]',
@@ -693,10 +693,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-rc.2", ngImport: i0, type: EclMegaMenuInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-rc.2", 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.3", ngImport: i0, type: EclMegaMenuInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.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-rc.2", ngImport: i0, type: EclMegaMenuInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.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: [{
@@ -1012,10 +1012,10 @@ class EclMegaMenuItemComponent extends ECLBaseDirective {
             this.resetWrapperStyle();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-rc.2", type: EclMegaMenuItemComponent, isStandalone: true, selector: "li[eclMegaMenuItem]", inputs: { isPromotional: ["isPromotional", "isPromotional", booleanAttribute], 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-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 }], 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--has-featured]=\"hasFeatured\" [style.height.px]=\"megaMenuMegaStyleHeight\" [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", "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: ["isInverted", "isIconOnly", "isHighlight", "isNoVisited", "variant"] }, { kind: "directive", type: i3.EclLinkLabelDirective, selector: "[eclLinkLabel]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EclMegaMenuItemComponent, isStandalone: true, selector: "li[eclMegaMenuItem]", inputs: { isPromotional: ["isPromotional", "isPromotional", booleanAttribute], 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-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 }], 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--has-featured]=\"hasFeatured\" [style.height.px]=\"megaMenuMegaStyleHeight\" [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", "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", "variant"] }, { kind: "directive", type: i3.EclLinkLabelDirective, selector: "[eclLinkLabel]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", 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--has-featured]=\"hasFeatured\" [style.height.px]=\"megaMenuMegaStyleHeight\" [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: [{
@@ -1421,10 +1421,10 @@ 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-rc.2", ngImport: i0, type: EclMegaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-rc.2", type: EclMegaMenuComponent, isStandalone: true, selector: "nav[eclMegaMenu]", outputs: { megaMenuItemSelect: "megaMenuItemSelect" }, host: { listeners: { "eclClickOutside": "onClickOutsideMegaMenu()" }, properties: { "class": "this.cssClasses", "attr.data-expanded": "this.expandedAttr", "attr.role": "this.role" } }, queries: [{ propertyName: "menuItems", predicate: i0.forwardRef(() => EclMegaMenuItemComponent), descendants: true }], 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=\"tertiary\" eclStyle=\"neutral\" class=\"ecl-mega-menu__back\" type=\"submit\" (click)=\"onMegaMenuBack()\">\n                <ecl-icon icon=\"corner-arrow\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>Back</span>\n            </button>\n        </header>\n        <ng-content></ng-content>\n    </section>\n</div>", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EclMegaMenuComponent, isStandalone: true, selector: "nav[eclMegaMenu]", outputs: { megaMenuItemSelect: "megaMenuItemSelect" }, host: { listeners: { "eclClickOutside": "onClickOutsideMegaMenu()" }, properties: { "class": "this.cssClasses", "attr.data-expanded": "this.expandedAttr", "attr.role": "this.role" } }, queries: [{ propertyName: "menuItems", predicate: i0.forwardRef(() => EclMegaMenuItemComponent), descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.ECLBaseDirective }, { directive: i1$1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<div class=\"ecl-mega-menu__overlay\" [style.top.px]=\"overlayStyleTop\"></div>\n<div class=\"ecl-container ecl-mega-menu__container\">\n    <button class=\"ecl-button ecl-button--tertiary ecl-mega-menu__open ecl-button--icon-only\"\n        type=\"button\" 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=\"tertiary\" eclStyle=\"neutral\" class=\"ecl-mega-menu__back\" type=\"submit\" (click)=\"onMegaMenuBack()\">\n                <ecl-icon icon=\"corner-arrow\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>Back</span>\n            </button>\n        </header>\n        <ng-content></ng-content>\n    </section>\n</div>", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EclMegaMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nav[eclMegaMenu]', imports: [TranslateModule, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON], hostDirectives: [
                         {
@@ -1455,68 +1455,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ng
                 args: ['eclClickOutside']
             }] } });
 
-const COMPONENTS = [
-    EclMegaMenuComponent,
-    EclMegaMenuItemComponent,
-    EclMegaMenuSubitemComponent,
-    EclMegaMenuInfoComponent,
-    EclMegaMenuFeaturedComponent,
-    EclMegaMenuFeaturedPictureDirective,
-    EclMegaMenuFeaturedImageDirective,
-    EclMegaMenuFeaturedListDirective,
-    EclMegaMenuFeaturedListItemDirective,
-    EclMegaMenuFeaturedListItemDescriptionDirective,
-    EclMegaMenuListDirective,
-    EclMegaMenuSublistDirective,
-    EclMegaMenuContainerDirective,
-    EclMegaMenuSpacerDirective,
-];
-/**
- * Module that provides the EclMegaMenuComponent and its dependencies.
- *
- * @deprecated Use {@link EUI_ECL_MEGA_MENU} instead.
- */
-class EclMegaMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuModule, imports: [EclMegaMenuComponent,
-            EclMegaMenuItemComponent,
-            EclMegaMenuSubitemComponent,
-            EclMegaMenuInfoComponent,
-            EclMegaMenuFeaturedComponent,
-            EclMegaMenuFeaturedPictureDirective,
-            EclMegaMenuFeaturedImageDirective,
-            EclMegaMenuFeaturedListDirective,
-            EclMegaMenuFeaturedListItemDirective,
-            EclMegaMenuFeaturedListItemDescriptionDirective,
-            EclMegaMenuListDirective,
-            EclMegaMenuSublistDirective,
-            EclMegaMenuContainerDirective,
-            EclMegaMenuSpacerDirective], exports: [EclMegaMenuComponent,
-            EclMegaMenuItemComponent,
-            EclMegaMenuSubitemComponent,
-            EclMegaMenuInfoComponent,
-            EclMegaMenuFeaturedComponent,
-            EclMegaMenuFeaturedPictureDirective,
-            EclMegaMenuFeaturedImageDirective,
-            EclMegaMenuFeaturedListDirective,
-            EclMegaMenuFeaturedListItemDirective,
-            EclMegaMenuFeaturedListItemDescriptionDirective,
-            EclMegaMenuListDirective,
-            EclMegaMenuSublistDirective,
-            EclMegaMenuContainerDirective,
-            EclMegaMenuSpacerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuModule, imports: [EclMegaMenuComponent,
-            EclMegaMenuItemComponent,
-            EclMegaMenuSubitemComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclMegaMenuModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [...COMPONENTS],
-                    exports: [...COMPONENTS],
-                }]
-        }] });
-
 const EUI_ECL_MEGA_MENU = [
     EclMegaMenuComponent,
     EclMegaMenuItemComponent,
@@ -1538,5 +1476,5 @@ const EUI_ECL_MEGA_MENU = [
  * Generated bundle index. Do not edit.
  */
 
-export { EUI_ECL_MEGA_MENU, EclMegaMenuComponent, EclMegaMenuContainerDirective, EclMegaMenuDataService, EclMegaMenuFeaturedComponent, EclMegaMenuFeaturedImageDirective, EclMegaMenuFeaturedListDirective, EclMegaMenuFeaturedListItemDescriptionDirective, EclMegaMenuFeaturedListItemDirective, EclMegaMenuFeaturedPictureDirective, EclMegaMenuInfoComponent, EclMegaMenuItemComponent, EclMegaMenuListDirective, EclMegaMenuModule, EclMegaMenuService, EclMegaMenuSpacerDirective, EclMegaMenuSubitemComponent, EclMegaMenuSublistDirective };
+export { EUI_ECL_MEGA_MENU, EclMegaMenuComponent, EclMegaMenuContainerDirective, EclMegaMenuDataService, EclMegaMenuFeaturedComponent, EclMegaMenuFeaturedImageDirective, EclMegaMenuFeaturedListDirective, EclMegaMenuFeaturedListItemDescriptionDirective, EclMegaMenuFeaturedListItemDirective, EclMegaMenuFeaturedPictureDirective, EclMegaMenuInfoComponent, EclMegaMenuItemComponent, EclMegaMenuListDirective, EclMegaMenuService, EclMegaMenuSpacerDirective, EclMegaMenuSubitemComponent, EclMegaMenuSublistDirective };
 //# sourceMappingURL=eui-ecl-components-ecl-mega-menu.mjs.map