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

package/fesm2022/eui-ecl-components-ecl-accordion.mjs

@@ -5,7 +5,7 @@ import * as i1 from '@eui/ecl/core';
 import { ECLBaseDirective, EclBaseEvent } from '@eui/ecl/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i2 from '@eui/ecl/components/ecl-icon';
-import { EclIconModule } from '@eui/ecl/components/ecl-icon';
+import { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';
 
 /**
  * Accordion component that manages the expansion and collapsing state of accordion items.
@@ -33,12 +33,12 @@ class EclAccordionComponent {
     get cssClasses() {
         return [this.baseDirective.getCssClasses('ecl-accordion')].join(' ').trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclAccordionComponent, isStandalone: true, selector: "ecl-accordion", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.ECLBaseDirective }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: EclIconModule }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclAccordionComponent, isStandalone: true, selector: "ecl-accordion", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.ECLBaseDirective }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclAccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclAccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-accordion', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, EclIconModule, TranslateModule], hostDirectives: [
+            args: [{ selector: 'ecl-accordion', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, ...EUI_ECL_ICON, TranslateModule], hostDirectives: [
                         {
                             directive: ECLBaseDirective,
                         },
@@ -100,12 +100,12 @@ class EclAccordionItemComponent {
             this.isExpanded = nextExpandedState;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.0-next.1", type: EclAccordionItemComponent, isStandalone: true, selector: "ecl-accordion-item", inputs: { label: "label", isExpanded: ["isExpanded", "isExpanded", booleanAttribute] }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.ECLBaseDirective }], ngImport: i0, template: "<h3 class=\"ecl-accordion__title\" [id]=\"titleId\">\n    <button\n        type=\"button\"\n        (click)=\"onItemClick($event)\"\n        [attr.aria-expanded]=\"isExpanded\"\n        class=\"ecl-accordion__toggle\"\n        [attr.aria-controls]=\"contentId\">\n        <span class=\"ecl-accordion__toggle-flex\">\n            <span class=\"ecl-accordion__toggle-title\">{{ label }}</span>\n            <span class=\"ecl-accordion__toggle-indicator\">\n                <ecl-icon icon=\"plus\" size=\"s\" class=\"ecl-accordion__toggle-icon\" ariaHidden=\"true\">\n                </ecl-icon>\n                <ecl-icon icon=\"minus\" size=\"s\" class=\"ecl-accordion__toggle-icon\" ariaHidden=\"true\">\n                </ecl-icon>\n            </span>\n        </span>\n    </button>\n</h3>\n<div class=\"ecl-accordion__content\" [hidden]=\"!isExpanded\" role=\"region\" [attr.aria-labelledby]=\"titleId\" [id]=\"contentId\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: EclIconModule }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.0-next.3", type: EclAccordionItemComponent, isStandalone: true, selector: "ecl-accordion-item", inputs: { label: "label", isExpanded: ["isExpanded", "isExpanded", booleanAttribute] }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.ECLBaseDirective }], ngImport: i0, template: "<h3 class=\"ecl-accordion__title\" [id]=\"titleId\">\n    <button\n        type=\"button\"\n        (click)=\"onItemClick($event)\"\n        [attr.aria-expanded]=\"isExpanded\"\n        class=\"ecl-accordion__toggle\"\n        [attr.aria-controls]=\"contentId\">\n        <span class=\"ecl-accordion__toggle-flex\">\n            <span class=\"ecl-accordion__toggle-title\">{{ label }}</span>\n            <span class=\"ecl-accordion__toggle-indicator\">\n                <ecl-icon icon=\"plus\" size=\"s\" class=\"ecl-accordion__toggle-icon\" ariaHidden=\"true\">\n                </ecl-icon>\n                <ecl-icon icon=\"minus\" size=\"s\" class=\"ecl-accordion__toggle-icon\" ariaHidden=\"true\">\n                </ecl-icon>\n            </span>\n        </span>\n    </button>\n</h3>\n<div class=\"ecl-accordion__content\" [hidden]=\"!isExpanded\" role=\"region\" [attr.aria-labelledby]=\"titleId\" [id]=\"contentId\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclAccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclAccordionItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, EclIconModule, TranslateModule], hostDirectives: [
+            args: [{ selector: 'ecl-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, ...EUI_ECL_ICON, TranslateModule], hostDirectives: [
                         {
                             directive: ECLBaseDirective,
                         },
@@ -129,11 +129,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1",
  * @deprecated Use {@link EUI_ECL_ACCORDION} instead.
  */
 class EclAccordionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclAccordionModule, imports: [EclAccordionComponent, EclAccordionItemComponent], exports: [EclAccordionComponent, EclAccordionItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclAccordionModule, imports: [EclAccordionComponent, EclAccordionItemComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclAccordionModule, imports: [EclAccordionComponent, EclAccordionItemComponent], exports: [EclAccordionComponent, EclAccordionItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclAccordionModule, imports: [EclAccordionComponent, EclAccordionItemComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclAccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [EclAccordionComponent, EclAccordionItemComponent],

package/fesm2022/eui-ecl-components-ecl-accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-ecl-components-ecl-accordion.mjs","sources":["../../components/ecl-accordion/ecl-accordion.component.ts","../../components/ecl-accordion/ecl-accordion.component.html","../../components/ecl-accordion/events/ecl-accordion-toggle.event.ts","../../components/ecl-accordion/ecl-accordion-item.component.ts","../../components/ecl-accordion/ecl-accordion-item.component.html","../../components/ecl-accordion/ecl-accordion.module.ts","../../components/ecl-accordion/index.ts","../../components/ecl-accordion/eui-ecl-components-ecl-accordion.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    HostBinding,\n    inject,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { EclIconModule } from '@eui/ecl/components/ecl-icon';\n\n/**\n * Accordion component that manages the expansion and collapsing state of accordion items.\n * Uses the `ECLBaseDirective` to apply appropriate CSS classes and manage the visual styling.\n *\n * @description\n * This is the main component for the accordion container, responsible for managing the expansion\n * of individual items within the accordion. It provides the functionality to group and organize content\n * in expandable sections.\n *\n * @property {string} cssClasses - Returns a string of CSS classes applied to the host element.\n *                                 The main class is `ecl-accordion`, which can be extended with additional classes.\n */\n@Component({\n    selector: 'ecl-accordion',\n    templateUrl: './ecl-accordion.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [CommonModule, EclIconModule, TranslateModule],\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n    ],\n})\nexport class EclAccordionComponent {\n    baseDirective = inject(ECLBaseDirective);\n\n    /**\n     * @description\n     * Retrieves and returns the CSS classes for the component based on its current state.\n     * Uses `baseDirective` to fetch the appropriate CSS classes.\n     *\n     * @returns {string} - A string of CSS class names.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [this.baseDirective.getCssClasses('ecl-accordion')].join(' ').trim();\n    }\n}\n","<ng-content></ng-content>\n","import { EclBaseEvent } from '@eui/ecl/core';\n\nexport class EclAccordionToggleEvent extends EclBaseEvent {\n\tconstructor(public isExpanded: boolean) {\n\t\tsuper();\n\t}\n}","import {\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    HostBinding,\n    Input,\n    OnInit,\n    Output,\n    booleanAttribute,\n    ChangeDetectorRef,\n    inject,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclAccordionToggleEvent } from './events/ecl-accordion-toggle.event';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { EclIconModule } from '@eui/ecl/components/ecl-icon';\n\n/**\n * Represents an individual item within an ECL Accordion.\n * This component allows for expand/collapse behavior and emits toggle events on interaction.\n */\n@Component({\n    selector: 'ecl-accordion-item',\n    templateUrl: './ecl-accordion-item.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [CommonModule, EclIconModule, TranslateModule],\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n    ],\n})\nexport class EclAccordionItemComponent implements OnInit {\n    baseDirective = inject(ECLBaseDirective);\n    /**\n     * The label for the accordion header.\n     * This value is displayed as the clickable title of the item.\n     */\n    @Input() label: string;\n\n    /**\n     * Whether the accordion item is expanded by default.\n     * Can be controlled externally.\n     * @default false\n     */\n    @Input({ transform: booleanAttribute }) isExpanded = false;\n\n    /**\n     * Event emitted when the item is toggled (expanded/collapsed).\n     * The emitted value contains the next expanded state.\n     */\n    // eslint-disable-next-line\n    @Output() toggle = new EventEmitter<EclAccordionToggleEvent>();\n\n    contentId = '';\n    titleId = '';\n    private cd = inject(ChangeDetectorRef);\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [this.baseDirective.getCssClasses('ecl-accordion__item')].join(' ').trim();\n    }\n\n    ngOnInit(): void {\n        this.titleId = crypto.randomUUID();\n        this.contentId = crypto.randomUUID();\n    }\n\n    /**\n     * Handles click on the accordion item header.\n     * Toggles the item and emits a toggle event.\n     * If the event is not prevented, the item's state is updated.\n     *\n     * @param evt - The mouse click event\n     */\n    onItemClick(evt: MouseEvent): void {\n        const nextExpandedState = !this.isExpanded;\n        const event = new EclAccordionToggleEvent(nextExpandedState);\n\n        this.toggle.next(event);\n\n        if (!event.defaultPrevented) {\n            this.isExpanded = nextExpandedState;\n        }\n    }\n}\n","<h3 class=\"ecl-accordion__title\" [id]=\"titleId\">\n    <button\n        type=\"button\"\n        (click)=\"onItemClick($event)\"\n        [attr.aria-expanded]=\"isExpanded\"\n        class=\"ecl-accordion__toggle\"\n        [attr.aria-controls]=\"contentId\">\n        <span class=\"ecl-accordion__toggle-flex\">\n            <span class=\"ecl-accordion__toggle-title\">{{ label }}</span>\n            <span class=\"ecl-accordion__toggle-indicator\">\n                <ecl-icon icon=\"plus\" size=\"s\" class=\"ecl-accordion__toggle-icon\" ariaHidden=\"true\">\n                </ecl-icon>\n                <ecl-icon icon=\"minus\" size=\"s\" class=\"ecl-accordion__toggle-icon\" ariaHidden=\"true\">\n                </ecl-icon>\n            </span>\n        </span>\n    </button>\n</h3>\n<div class=\"ecl-accordion__content\" [hidden]=\"!isExpanded\" role=\"region\" [attr.aria-labelledby]=\"titleId\" [id]=\"contentId\">\n    <ng-content></ng-content>\n</div>\n","import { NgModule } from '@angular/core';\nimport { EclAccordionComponent } from './ecl-accordion.component';\nimport { EclAccordionItemComponent } from './ecl-accordion-item.component';\n\n/**\n * @description\n * Module that provides the EclAccordion component and its dependencies.\n *\n * @deprecated Use {@link EUI_ECL_ACCORDION} instead.\n */\n@NgModule({\n  imports: [EclAccordionComponent, EclAccordionItemComponent],\n  exports: [EclAccordionComponent, EclAccordionItemComponent],\n})\nexport class EclAccordionModule {}\n","import { EclAccordionComponent } from './ecl-accordion.component';\nimport { EclAccordionItemComponent } from './ecl-accordion-item.component';\n\nexport * from './ecl-accordion.module';\nexport * from './ecl-accordion.component';\nexport * from './ecl-accordion-item.component';\nexport * from './events/ecl-accordion-toggle.event';\n\nexport const EUI_ECL_ACCORDION = [\n  EclAccordionComponent,\n  EclAccordionItemComponent,\n] as const;\n","/**\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-accordion.mjs","sources":["../../components/ecl-accordion/ecl-accordion.component.ts","../../components/ecl-accordion/ecl-accordion.component.html","../../components/ecl-accordion/events/ecl-accordion-toggle.event.ts","../../components/ecl-accordion/ecl-accordion-item.component.ts","../../components/ecl-accordion/ecl-accordion-item.component.html","../../components/ecl-accordion/ecl-accordion.module.ts","../../components/ecl-accordion/index.ts","../../components/ecl-accordion/eui-ecl-components-ecl-accordion.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    HostBinding,\n    inject,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n/**\n * Accordion component that manages the expansion and collapsing state of accordion items.\n * Uses the `ECLBaseDirective` to apply appropriate CSS classes and manage the visual styling.\n *\n * @description\n * This is the main component for the accordion container, responsible for managing the expansion\n * of individual items within the accordion. It provides the functionality to group and organize content\n * in expandable sections.\n *\n * @property {string} cssClasses - Returns a string of CSS classes applied to the host element.\n *                                 The main class is `ecl-accordion`, which can be extended with additional classes.\n */\n@Component({\n    selector: 'ecl-accordion',\n    templateUrl: './ecl-accordion.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [CommonModule, ...EUI_ECL_ICON, TranslateModule],\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n    ],\n})\nexport class EclAccordionComponent {\n    baseDirective = inject(ECLBaseDirective);\n\n    /**\n     * @description\n     * Retrieves and returns the CSS classes for the component based on its current state.\n     * Uses `baseDirective` to fetch the appropriate CSS classes.\n     *\n     * @returns {string} - A string of CSS class names.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [this.baseDirective.getCssClasses('ecl-accordion')].join(' ').trim();\n    }\n}\n","<ng-content></ng-content>\n","import { EclBaseEvent } from '@eui/ecl/core';\n\nexport class EclAccordionToggleEvent extends EclBaseEvent {\n\tconstructor(public isExpanded: boolean) {\n\t\tsuper();\n\t}\n}","import {\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    HostBinding,\n    Input,\n    OnInit,\n    Output,\n    booleanAttribute,\n    ChangeDetectorRef,\n    inject,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclAccordionToggleEvent } from './events/ecl-accordion-toggle.event';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n/**\n * Represents an individual item within an ECL Accordion.\n * This component allows for expand/collapse behavior and emits toggle events on interaction.\n */\n@Component({\n    selector: 'ecl-accordion-item',\n    templateUrl: './ecl-accordion-item.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [CommonModule, ...EUI_ECL_ICON, TranslateModule],\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n    ],\n})\nexport class EclAccordionItemComponent implements OnInit {\n    baseDirective = inject(ECLBaseDirective);\n    /**\n     * The label for the accordion header.\n     * This value is displayed as the clickable title of the item.\n     */\n    @Input() label: string;\n\n    /**\n     * Whether the accordion item is expanded by default.\n     * Can be controlled externally.\n     * @default false\n     */\n    @Input({ transform: booleanAttribute }) isExpanded = false;\n\n    /**\n     * Event emitted when the item is toggled (expanded/collapsed).\n     * The emitted value contains the next expanded state.\n     */\n    // eslint-disable-next-line\n    @Output() toggle = new EventEmitter<EclAccordionToggleEvent>();\n\n    contentId = '';\n    titleId = '';\n    private cd = inject(ChangeDetectorRef);\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [this.baseDirective.getCssClasses('ecl-accordion__item')].join(' ').trim();\n    }\n\n    ngOnInit(): void {\n        this.titleId = crypto.randomUUID();\n        this.contentId = crypto.randomUUID();\n    }\n\n    /**\n     * Handles click on the accordion item header.\n     * Toggles the item and emits a toggle event.\n     * If the event is not prevented, the item's state is updated.\n     *\n     * @param evt - The mouse click event\n     */\n    onItemClick(evt: MouseEvent): void {\n        const nextExpandedState = !this.isExpanded;\n        const event = new EclAccordionToggleEvent(nextExpandedState);\n\n        this.toggle.next(event);\n\n        if (!event.defaultPrevented) {\n            this.isExpanded = nextExpandedState;\n        }\n    }\n}\n","<h3 class=\"ecl-accordion__title\" [id]=\"titleId\">\n    <button\n        type=\"button\"\n        (click)=\"onItemClick($event)\"\n        [attr.aria-expanded]=\"isExpanded\"\n        class=\"ecl-accordion__toggle\"\n        [attr.aria-controls]=\"contentId\">\n        <span class=\"ecl-accordion__toggle-flex\">\n            <span class=\"ecl-accordion__toggle-title\">{{ label }}</span>\n            <span class=\"ecl-accordion__toggle-indicator\">\n                <ecl-icon icon=\"plus\" size=\"s\" class=\"ecl-accordion__toggle-icon\" ariaHidden=\"true\">\n                </ecl-icon>\n                <ecl-icon icon=\"minus\" size=\"s\" class=\"ecl-accordion__toggle-icon\" ariaHidden=\"true\">\n                </ecl-icon>\n            </span>\n        </span>\n    </button>\n</h3>\n<div class=\"ecl-accordion__content\" [hidden]=\"!isExpanded\" role=\"region\" [attr.aria-labelledby]=\"titleId\" [id]=\"contentId\">\n    <ng-content></ng-content>\n</div>\n","import { NgModule } from '@angular/core';\nimport { EclAccordionComponent } from './ecl-accordion.component';\nimport { EclAccordionItemComponent } from './ecl-accordion-item.component';\n\n/**\n * @description\n * Module that provides the EclAccordion component and its dependencies.\n *\n * @deprecated Use {@link EUI_ECL_ACCORDION} instead.\n */\n@NgModule({\n  imports: [EclAccordionComponent, EclAccordionItemComponent],\n  exports: [EclAccordionComponent, EclAccordionItemComponent],\n})\nexport class EclAccordionModule {}\n","import { EclAccordionComponent } from './ecl-accordion.component';\nimport { EclAccordionItemComponent } from './ecl-accordion-item.component';\n\nexport * from './ecl-accordion.module';\nexport * from './ecl-accordion.component';\nexport * from './ecl-accordion-item.component';\nexport * from './events/ecl-accordion-toggle.event';\n\nexport const EUI_ECL_ACCORDION = [\n  EclAccordionComponent,\n  EclAccordionItemComponent,\n] as const;\n","/**\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-app.mjs

@@ -59,10 +59,10 @@ class EclAppComponent extends ECLBaseDirective {
             this.languageDismiss.next(new EclAppLanguageDismissEvent(evt.language));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclAppComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclAppComponent, isStandalone: true, selector: "ecl-app", outputs: { languageDismiss: "languageDismiss" }, host: { properties: { "attr.dir": "this.textDirection" } }, queries: [{ propertyName: "eclSiteHeaderLanguage", first: true, predicate: EclSiteHeaderLanguageComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclAppComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclAppComponent, isStandalone: true, selector: "ecl-app", outputs: { languageDismiss: "languageDismiss" }, host: { properties: { "attr.dir": "this.textDirection" } }, queries: [{ propertyName: "eclSiteHeaderLanguage", first: true, predicate: EclSiteHeaderLanguageComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclAppComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclAppComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-app', template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { textDirection: [{
@@ -81,11 +81,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1",
  * @deprecated Use {@link EUI_ECL_APP} instead.
  */
 class EclAppModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclAppModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclAppModule, imports: [EclAppComponent], exports: [EclAppComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclAppModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclAppModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclAppModule, imports: [EclAppComponent], exports: [EclAppComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclAppModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclAppModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclAppModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [EclAppComponent],

package/fesm2022/eui-ecl-components-ecl-banner.mjs

@@ -5,10 +5,10 @@ import { Subject, takeUntil, delay } from 'rxjs';
 import { ECLBaseDirective } from '@eui/ecl/core';
 import { EclLinkDirective } from '@eui/ecl/components/ecl-link';
 import * as i1 from '@eui/ecl/components/ecl-icon';
-import { EclIconModule } from '@eui/ecl/components/ecl-icon';
+import { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i2 from '@eui/ecl/components/ecl-button';
-import { EclButtonModule } from '@eui/ecl/components/ecl-button';
+import { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';
 
 /**
  * Directive applied to the <picture> element within the banner.
@@ -18,10 +18,10 @@ class EclBannerPictureDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-picture ecl-banner__picture')].join(' ').trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclBannerPictureDirective, isStandalone: true, selector: "picture[eclBannerPicture]", 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: EclBannerPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclBannerPictureDirective, isStandalone: true, selector: "picture[eclBannerPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerPictureDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerPictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'picture[eclBannerPicture]',
@@ -40,10 +40,10 @@ class EclBannerImageDirective extends ECLBaseDirective {
         this.el = inject(ElementRef);
         this.className = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclBannerImageDirective, isStandalone: true, selector: "img[eclBannerImage]", host: { properties: { "class.ecl-banner__image": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclBannerImageDirective, isStandalone: true, selector: "img[eclBannerImage]", host: { properties: { "class.ecl-banner__image": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerImageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'img[eclBannerImage]',
@@ -66,10 +66,10 @@ class EclBannerVideoDirective extends ECLBaseDirective {
          */
         this.videoClasses = 'ecl-video ecl-banner__video';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerVideoDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclBannerVideoDirective, isStandalone: true, selector: "video[eclBannerVideo]", host: { properties: { "class": "this.videoClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerVideoDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclBannerVideoDirective, isStandalone: true, selector: "video[eclBannerVideo]", host: { properties: { "class": "this.videoClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerVideoDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerVideoDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'video[eclBannerVideo]',
@@ -150,11 +150,13 @@ class EclBannerComponent extends ECLBaseDirective {
         this.isPlaying = false;
         this.BANNER_PADDING = 16;
         this.destroy$ = new Subject();
-        this.bannerWidth = 0;
+        this.breakpoint = 996;
+        this.bannerVPadding = 8;
         this.isTabletBreakpoint = true;
         this.TIMEOUT_INTERVAL = 200;
         this.renderer = inject(Renderer2);
         this.cdkBreakpointObserver = inject(BreakpointObserver);
+        this.maxIterations = 10;
         afterNextRender(() => {
             this.observeBreakpointChanges();
             this.observeElementSizeChanges();
@@ -237,55 +239,66 @@ class EclBannerComponent extends ECLBaseDirective {
     observeElementSizeChanges() {
         new ResizeObserver(() => {
             setTimeout(() => {
-                if (this.bannerWidth !== this.bannerContainer.nativeElement.offsetWidth) {
-                    this.bannerWidth = this.bannerContainer.nativeElement.offsetWidth;
-                    if (this.eclBannerImage || this.eclBannerVideo) {
-                        this.setBannerHeight();
-                    }
-                }
+                this.checkViewport();
             }, this.TIMEOUT_INTERVAL);
         }).observe(this.bannerContainer.nativeElement);
     }
-    setBannerHeight() {
-        if (!this.bannerContainer) {
-            return;
-        }
-        const bannerContainerHeight = this.bannerContainer.nativeElement.offsetHeight + this.BANNER_PADDING;
-        const ratioArray = this.getRatioArray();
-        const elHeight = parseInt(window.getComputedStyle(this.el.nativeElement).getPropertyValue('width'), 10) * ratioArray[1] / ratioArray[0];
-        if (this.isTabletBreakpoint && bannerContainerHeight > elHeight) {
-            if (this.eclBannerImage) {
-                this.renderer.setStyle(this.eclBannerImage.el.nativeElement, 'aspectRatio', 'auto');
-            }
-            else if (this.eclBannerVideo) {
-                this.renderer.setStyle(this.eclBannerVideo.el.nativeElement, 'aspectRatio', 'auto');
-            }
-            this.renderer.setStyle(this.el.nativeElement, 'height', `${bannerContainerHeight}px`);
+    checkViewport() {
+        if (window.innerWidth > this.breakpoint) {
+            this.setBannerHeight();
         }
         else {
-            this.resetHeight();
-        }
-        if (this.bannerFooter) {
-            this.bannerFooterHeight = this.bannerFooter.nativeElement.offsetHeight;
+            this.resetBannerHeight();
         }
     }
-    resetHeight() {
-        this.renderer.setStyle(this.el.nativeElement, 'height', 'auto');
-        if (this.eclBannerImage) {
-            const aspectRatio = window.getComputedStyle(this.eclBannerImage.el.nativeElement).getPropertyValue('--css-aspect-ratio');
-            this.renderer.setStyle(this.eclBannerImage.el.nativeElement, 'aspectRatio', aspectRatio);
+    waitForAspectRatioToBeDefined(attemptCounter) {
+        attemptCounter = attemptCounter + 1;
+        const aspectRatio = window.getComputedStyle(this.el.nativeElement).getPropertyValue('--css-aspect-ratio');
+        if ((typeof aspectRatio === 'undefined' || aspectRatio === '') &&
+            this.maxIterations > attemptCounter) {
+            setTimeout(() => this.waitForAspectRatioToBeDefined(attemptCounter), 100);
         }
-        if (this.eclBannerVideo) {
-            this.renderer.setStyle(this.eclBannerVideo.el.nativeElement, 'aspectRatio', this.getDefaultRatio());
+        else {
+            this.setHeight(aspectRatio);
         }
     }
-    getRatioArray() {
-        if (this.eclBannerImage) {
-            const aspectRatio = window.getComputedStyle(this.eclBannerImage.el.nativeElement).getPropertyValue('--css-aspect-ratio');
-            return aspectRatio.split('/').map(Number);
+    setBannerHeight() {
+        if (this.eclBannerImage || this.eclBannerVideo) {
+            this.waitForAspectRatioToBeDefined(0);
         }
         else {
-            return this.getDefaultRatio().split('/').map(Number);
+            this.setHeight(this.getDefaultRatio());
+        }
+    }
+    setHeight(ratio) {
+        if (this.bannerContainer) {
+            const bannerHeight = this.bannerContainer.nativeElement.offsetHeight + 2 * this.bannerVPadding;
+            const bannerWidth = parseInt(window.getComputedStyle(this.el.nativeElement).getPropertyValue('width'), 10);
+            const [denominator, numerator] = ratio.split('/').map(Number);
+            const currentHeight = (bannerWidth * numerator) / denominator;
+            if (bannerHeight > currentHeight) {
+                this.renderer.setStyle(this.el.nativeElement, 'aspect-ratio', 'auto');
+                this.renderer.setStyle(this.el.nativeElement, 'height', `${bannerHeight}px`);
+            }
+            else {
+                this.resetBannerHeight();
+            }
+        }
+        // Add margin to the banner container when there is a footer
+        // This is needed to keep the vertical alignment
+        if (this.bannerFooter) {
+            this.renderer.setStyle(this.el.nativeElement, '--banner-footer-height', `${this.bannerFooter.nativeElement.offsetHeight}px`);
+        }
+    }
+    resetBannerHeight() {
+        // remove aspect-ratio
+        this.renderer.removeStyle(this.el.nativeElement, 'aspect-ratio');
+        // set height to auto
+        this.renderer.setStyle(this.el.nativeElement, 'height', 'auto');
+        // update footer height if bannerFooter exists
+        if (this.bannerFooter) {
+            const footerHeight = `${this.bannerFooter.nativeElement.offsetHeight}px`;
+            this.renderer.setStyle(this.el.nativeElement, '--banner-footer-height', footerHeight);
         }
     }
     getDefaultRatio() {
@@ -317,14 +330,14 @@ class EclBannerComponent extends ECLBaseDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.1", type: EclBannerComponent, isStandalone: true, selector: "ecl-banner", inputs: { eclSize: "eclSize", fontColor: "fontColor", fontSize: "fontSize", boxBackground: "boxBackground", horizontalAlignment: "horizontalAlignment", verticalAlignment: "verticalAlignment", copyright: "copyright", isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute] }, host: { properties: { "style.--banner-footer-height.px": "this.bannerFooterHeight", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclBannerImage", first: true, predicate: EclBannerImageDirective, descendants: true }, { propertyName: "eclBannerVideo", first: true, predicate: EclBannerVideoDirective, descendants: true }, { propertyName: "eclLinkComponents", predicate: i0.forwardRef(() => EclLinkDirective) }], viewQueries: [{ propertyName: "bannerFooter", first: true, predicate: ["bannerFooter"], descendants: true }, { propertyName: "bannerContainer", first: true, predicate: ["bannerContainer"], descendants: true }, { propertyName: "playBtn", first: true, predicate: ["playBtn"], descendants: true }, { propertyName: "pauseBtn", first: true, predicate: ["pauseBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if(hasImage) {\n<figure class=\"ecl-banner__picture-container\">\n    <ng-content select=\"[eclBannerPicture]\"></ng-content>\n    @if(copyright) {\n        <ng-container *ngTemplateOutlet=\"bannerFooterTemplate\"></ng-container>\n    }\n</figure>\n}\n\n@if(hasVideo) {\n<div class=\"ecl-banner__video-container\">\n    <ng-content select=\"[eclBannerVideo]\"></ng-content>\n    @if(copyright) {\n        <ng-container *ngTemplateOutlet=\"bannerFooterTemplate\"></ng-container>\n    }\n    <button #playBtn eclButton variant=\"tertiary\" isIconOnly class=\"ecl-banner__play\" (click)=\"onVideoPlay()\"\n        [style.display]=\"isPlaying ? 'none' : 'block'\" (keydown.enter)=\"onKeydownEnterPlay()\">\n        <span eclButtonLabel>Play video</span>\n        <ecl-icon icon=\"play-outline\" size=\"m\"></ecl-icon>\n    </button>\n    <button #pauseBtn eclButton variant=\"tertiary\" isIconOnly class=\"ecl-banner__pause\" (click)=\"onVideoPause()\"\n        [style.display]=\"isPlaying ? 'block' : 'none'\" (keydown.enter)=\"onKeydownEnterPause()\">\n        <span eclButtonLabel>Pause video</span>\n        <ecl-icon icon=\"pause-outline\" size=\"m\"></ecl-icon>\n    </button>\n</div>\n}\n<div class=\"ecl-container ecl-banner__info\">\n    <div #bannerContainer class=\"ecl-banner__container \">\n        <div class=\"ecl-banner__content\">\n            <ng-content select=\"[eclBannerTitle]\"></ng-content>\n            <ng-content select=\"[eclBannerDescription]\"></ng-content>\n            @if (hasCtaLink) {\n                <div class=\"ecl-banner__cta\">\n                    <ng-content select=\"[eclLink]\"></ng-content>\n                </div>\n            }\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n\n<ng-template #bannerFooterTemplate>\n    <div #bannerFooter class=\"ecl-banner__credit\"><div class=\"ecl-container\">\u00A9 {{copyright}}</div></div>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: EclIconModule }, { kind: "component", type: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EclBannerComponent, isStandalone: true, selector: "ecl-banner", inputs: { eclSize: "eclSize", fontColor: "fontColor", fontSize: "fontSize", boxBackground: "boxBackground", horizontalAlignment: "horizontalAlignment", verticalAlignment: "verticalAlignment", copyright: "copyright", isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute] }, host: { properties: { "style.--banner-footer-height.px": "this.bannerFooterHeight", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclBannerImage", first: true, predicate: EclBannerImageDirective, descendants: true }, { propertyName: "eclBannerVideo", first: true, predicate: EclBannerVideoDirective, descendants: true }, { propertyName: "eclLinkComponents", predicate: i0.forwardRef(() => EclLinkDirective) }], viewQueries: [{ propertyName: "bannerFooter", first: true, predicate: ["bannerFooter"], descendants: true }, { propertyName: "bannerContainer", first: true, predicate: ["bannerContainer"], descendants: true }, { propertyName: "playBtn", first: true, predicate: ["playBtn"], descendants: true }, { propertyName: "pauseBtn", first: true, predicate: ["pauseBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if(hasImage) {\n<figure class=\"ecl-banner__picture-container\">\n    <ng-content select=\"[eclBannerPicture]\"></ng-content>\n    @if(copyright) {\n        <ng-container *ngTemplateOutlet=\"bannerFooterTemplate\"></ng-container>\n    }\n</figure>\n}\n\n@if(hasVideo) {\n<div class=\"ecl-banner__video-container\">\n    <ng-content select=\"[eclBannerVideo]\"></ng-content>\n    @if(copyright) {\n        <ng-container *ngTemplateOutlet=\"bannerFooterTemplate\"></ng-container>\n    }\n    <button #playBtn eclButton variant=\"tertiary\" isIconOnly class=\"ecl-banner__play\" (click)=\"onVideoPlay()\"\n        [style.display]=\"isPlaying ? 'none' : 'block'\" (keydown.enter)=\"onKeydownEnterPlay()\">\n        <span eclButtonLabel>Play video</span>\n        <ecl-icon icon=\"play-outline\" size=\"m\"></ecl-icon>\n    </button>\n    <button #pauseBtn eclButton variant=\"tertiary\" isIconOnly class=\"ecl-banner__pause\" (click)=\"onVideoPause()\"\n        [style.display]=\"isPlaying ? 'block' : 'none'\" (keydown.enter)=\"onKeydownEnterPause()\">\n        <span eclButtonLabel>Pause video</span>\n        <ecl-icon icon=\"pause-outline\" size=\"m\"></ecl-icon>\n    </button>\n</div>\n}\n<div class=\"ecl-container ecl-banner__info\">\n    <div #bannerContainer class=\"ecl-banner__container \">\n        <div class=\"ecl-banner__content\">\n            <ng-content select=\"[eclBannerTitle]\"></ng-content>\n            <ng-content select=\"[eclBannerDescription]\"></ng-content>\n            @if (hasCtaLink) {\n                <div class=\"ecl-banner__cta\">\n                    <ng-content select=\"[eclLink]\"></ng-content>\n                </div>\n            }\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n\n<ng-template #bannerFooterTemplate>\n    <div #bannerFooter class=\"ecl-banner__credit\"><div class=\"ecl-container\">\u00A9 {{copyright}}</div></div>\n</ng-template>", dependencies: [{ kind: "component", type: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-banner', imports: [
-                        EclIconModule,
-                        EclButtonModule,
+                        ...EUI_ECL_ICON,
+                        ...EUI_ECL_BUTTON,
                         NgTemplateOutlet,
                     ], template: "@if(hasImage) {\n<figure class=\"ecl-banner__picture-container\">\n    <ng-content select=\"[eclBannerPicture]\"></ng-content>\n    @if(copyright) {\n        <ng-container *ngTemplateOutlet=\"bannerFooterTemplate\"></ng-container>\n    }\n</figure>\n}\n\n@if(hasVideo) {\n<div class=\"ecl-banner__video-container\">\n    <ng-content select=\"[eclBannerVideo]\"></ng-content>\n    @if(copyright) {\n        <ng-container *ngTemplateOutlet=\"bannerFooterTemplate\"></ng-container>\n    }\n    <button #playBtn eclButton variant=\"tertiary\" isIconOnly class=\"ecl-banner__play\" (click)=\"onVideoPlay()\"\n        [style.display]=\"isPlaying ? 'none' : 'block'\" (keydown.enter)=\"onKeydownEnterPlay()\">\n        <span eclButtonLabel>Play video</span>\n        <ecl-icon icon=\"play-outline\" size=\"m\"></ecl-icon>\n    </button>\n    <button #pauseBtn eclButton variant=\"tertiary\" isIconOnly class=\"ecl-banner__pause\" (click)=\"onVideoPause()\"\n        [style.display]=\"isPlaying ? 'block' : 'none'\" (keydown.enter)=\"onKeydownEnterPause()\">\n        <span eclButtonLabel>Pause video</span>\n        <ecl-icon icon=\"pause-outline\" size=\"m\"></ecl-icon>\n    </button>\n</div>\n}\n<div class=\"ecl-container ecl-banner__info\">\n    <div #bannerContainer class=\"ecl-banner__container \">\n        <div class=\"ecl-banner__content\">\n            <ng-content select=\"[eclBannerTitle]\"></ng-content>\n            <ng-content select=\"[eclBannerDescription]\"></ng-content>\n            @if (hasCtaLink) {\n                <div class=\"ecl-banner__cta\">\n                    <ng-content select=\"[eclLink]\"></ng-content>\n                </div>\n            }\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n\n<ng-template #bannerFooterTemplate>\n    <div #bannerFooter class=\"ecl-banner__credit\"><div class=\"ecl-container\">\u00A9 {{copyright}}</div></div>\n</ng-template>" }]
         }], ctorParameters: () => [], propDecorators: { eclSize: [{
@@ -382,10 +395,10 @@ class EclBannerTitleDirective extends ECLBaseDirective {
         super(...arguments);
         this.className = 'ecl-banner__title';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclBannerTitleDirective, isStandalone: true, selector: "[eclBannerTitle]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclBannerTitleDirective, isStandalone: true, selector: "[eclBannerTitle]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclBannerTitle]',
@@ -403,10 +416,10 @@ class EclBannerTitleTextDirective extends ECLBaseDirective {
         super(...arguments);
         this.className = 'ecl-banner__title-text';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerTitleTextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclBannerTitleTextDirective, isStandalone: true, selector: "[eclBannerTitleText]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerTitleTextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclBannerTitleTextDirective, isStandalone: true, selector: "[eclBannerTitleText]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerTitleTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerTitleTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclBannerTitleText]',
@@ -424,10 +437,10 @@ class EclBannerTitleLinkDirective extends ECLBaseDirective {
         super(...arguments);
         this.className = 'ecl-link ecl-banner__title-link';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerTitleLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclBannerTitleLinkDirective, isStandalone: true, selector: "[eclBannerTitleLink]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerTitleLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclBannerTitleLinkDirective, isStandalone: true, selector: "[eclBannerTitleLink]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerTitleLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerTitleLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclBannerTitleLink]',
@@ -445,10 +458,10 @@ class EclBannerDescriptionDirective extends ECLBaseDirective {
         super(...arguments);
         this.className = 'ecl-banner__description';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerDescriptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclBannerDescriptionDirective, isStandalone: true, selector: "[eclBannerDescription]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerDescriptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclBannerDescriptionDirective, isStandalone: true, selector: "[eclBannerDescription]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerDescriptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerDescriptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclBannerDescription]',
@@ -465,10 +478,10 @@ class EclBannerDescriptionTextDirective extends ECLBaseDirective {
         super(...arguments);
         this.className = 'ecl-banner__description-text';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerDescriptionTextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclBannerDescriptionTextDirective, isStandalone: true, selector: "[eclBannerDescriptionText]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerDescriptionTextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclBannerDescriptionTextDirective, isStandalone: true, selector: "[eclBannerDescriptionText]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerDescriptionTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerDescriptionTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclBannerDescriptionText]',
@@ -485,10 +498,10 @@ class EclBannerDescriptionLinkDirective extends ECLBaseDirective {
         super(...arguments);
         this.className = 'ecl-link ecl-banner__description-link';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerDescriptionLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EclBannerDescriptionLinkDirective, isStandalone: true, selector: "[eclBannerDescriptionLink]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerDescriptionLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EclBannerDescriptionLinkDirective, isStandalone: true, selector: "[eclBannerDescriptionLink]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerDescriptionLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerDescriptionLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclBannerDescriptionLink]',
@@ -517,8 +530,8 @@ const COMPONENTS = [
  * @deprecated Use {@link EUI_ECL_BANNER} instead.
  */
 class EclBannerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerModule, imports: [EclBannerComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerModule, imports: [EclBannerComponent,
             EclBannerTitleDirective,
             EclBannerTitleTextDirective,
             EclBannerDescriptionDirective,
@@ -537,9 +550,9 @@ class EclBannerModule {
             EclBannerTitleLinkDirective,
             EclBannerVideoDirective,
             EclBannerDescriptionLinkDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerModule, imports: [EclBannerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerModule, imports: [EclBannerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EclBannerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EclBannerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...COMPONENTS],