npm - @eui/ecl - Versions diffs - 19.3.3-snapshot-1754912586607 → 21.0.0-alpha.2 - Mend

@eui/ecl 19.3.3-snapshot-1754912586607 → 21.0.0-alpha.2

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

Files changed (1107) hide show

package/docs/properties.html CHANGED Viewed

@@ -103,7 +103,7 @@
     </ol>
     <ul class="properties-list">
         <li>
-            <b>Version</b> : 19.3.3-snapshot-1754912586607</li>
+            <b>Version</b> : 21.0.0-alpha.2</li>
     </ul>

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, ChangeDetectionStrategy, Component, EventEmitter, booleanAttribute, Output, Input, NgModule } from '@angular/core';
+import { inject, HostBinding, ChangeDetectionStrategy, Component, EventEmitter, ChangeDetectorRef, booleanAttribute, Output, Input, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@eui/ecl/core';
 import { ECLBaseDirective, EclBaseEvent } from '@eui/ecl/core';
@@ -20,6 +20,9 @@ import { EclIconModule } from '@eui/ecl/components/ecl-icon';
  *                                 The main class is `ecl-accordion`, which can be extended with additional classes.
  */
 class EclAccordionComponent {
+    constructor() {
+        this.baseDirective = inject(ECLBaseDirective);
+    }
     /**
      * @description
      * Retrieves and returns the CSS classes for the component based on its current state.
@@ -30,20 +33,17 @@ class EclAccordionComponent {
     get cssClasses() {
         return [this.baseDirective.getCssClasses('ecl-accordion')].join(' ').trim();
     }
-    constructor(baseDirective) {
-        this.baseDirective = baseDirective;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclAccordionComponent, deps: [{ token: i1.ECLBaseDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "20.1.6", ngImport: i0, type: EclAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclAccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclAccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-accordion', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, EclIconModule, TranslateModule], hostDirectives: [
                         {
                             directive: ECLBaseDirective,
                         },
                     ], template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i1.ECLBaseDirective }], propDecorators: { cssClasses: [{
+        }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -60,12 +60,8 @@ class EclAccordionToggleEvent extends EclBaseEvent {
  * This component allows for expand/collapse behavior and emits toggle events on interaction.
  */
 class EclAccordionItemComponent {
-    get cssClasses() {
-        return [this.baseDirective.getCssClasses('ecl-accordion__item')].join(' ').trim();
-    }
-    constructor(baseDirective, cd) {
-        this.baseDirective = baseDirective;
-        this.cd = cd;
+    constructor() {
+        this.baseDirective = inject(ECLBaseDirective);
         /**
          * Whether the accordion item is expanded by default.
          * Can be controlled externally.
@@ -80,6 +76,10 @@ class EclAccordionItemComponent {
         this.toggle = new EventEmitter();
         this.contentId = '';
         this.titleId = '';
+        this.cd = inject(ChangeDetectorRef);
+    }
+    get cssClasses() {
+        return [this.baseDirective.getCssClasses('ecl-accordion__item')].join(' ').trim();
     }
     ngOnInit() {
         this.titleId = crypto.randomUUID();
@@ -100,26 +100,26 @@ class EclAccordionItemComponent {
             this.isExpanded = nextExpandedState;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclAccordionItemComponent, deps: [{ token: i1.ECLBaseDirective }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.14", 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: "20.1.6", ngImport: i0, type: EclAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclAccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclAccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, EclIconModule, TranslateModule], hostDirectives: [
                         {
                             directive: ECLBaseDirective,
                         },
                     ], 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"] }]
-        }], ctorParameters: () => [{ type: i1.ECLBaseDirective }, { type: i0.ChangeDetectorRef }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], label: [{
+        }], propDecorators: { label: [{
                 type: Input
             }], isExpanded: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], toggle: [{
                 type: Output
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 /**
@@ -129,11 +129,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * @deprecated Use {@link EUI_ECL_ACCORDION} instead.
  */
 class EclAccordionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: EclAccordionModule, imports: [EclAccordionComponent, EclAccordionItemComponent], exports: [EclAccordionComponent, EclAccordionItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclAccordionModule, imports: [EclAccordionComponent, EclAccordionItemComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: EclAccordionModule, imports: [EclAccordionComponent, EclAccordionItemComponent], exports: [EclAccordionComponent, EclAccordionItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclAccordionModule, imports: [EclAccordionComponent, EclAccordionItemComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclAccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [EclAccordionComponent, EclAccordionItemComponent],

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

	@@ -1 +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} 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 /\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 constructor(public baseDirective: ECLBaseDirective) { }\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} 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 @HostBinding('class')\n get cssClasses(): string {\n return [this.baseDirective.getCssClasses('ecl-accordion__item')].join(' ').trim();\n }\n\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\n constructor(public baseDirective: ECLBaseDirective, private cd: ChangeDetectorRef) {}\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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"}
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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"}

package/fesm2022/eui-ecl-components-ecl-app.mjs CHANGED Viewed

@@ -1,10 +1,9 @@
 import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, ContentChild, HostBinding, Inject, Component, NgModule } from '@angular/core';
+import { EventEmitter, inject, Output, ContentChild, HostBinding, Component, NgModule } from '@angular/core';
 import { CssUtils } from '@eui/core';
 import { EclSiteHeaderLanguageComponent } from '@eui/ecl/components/ecl-site-header';
-import * as i1 from '@eui/ecl/core';
-import { EclBaseEvent, ECLBaseDirective } from '@eui/ecl/core';
+import { EclBaseEvent, ECLBaseDirective, EclRtlService } from '@eui/ecl/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -18,10 +17,8 @@ class EclAppLanguageDismissEvent extends EclBaseEvent {
     }
 }
 class EclAppComponent extends ECLBaseDirective {
-    constructor(eclRtlService, document) {
-        super();
-        this.eclRtlService = eclRtlService;
-        this.document = document;
+    constructor() {
+        super(...arguments);
         /**
          * Text direction, by default is 'ltr' - left-to-write. Can also be 'rtl' - right-to-left, which will
          *  make all components within <ecl-app> to lign to the right, and apply some special styling and functionality.
@@ -29,6 +26,8 @@ class EclAppComponent extends ECLBaseDirective {
         this.textDirection = 'ltr';
         this.languageDismiss = new EventEmitter();
         this.destroy$ = new Subject();
+        this.eclRtlService = inject(EclRtlService);
+        this.document = inject(DOCUMENT);
     }
     ngAfterViewInit() {
         // Adds global class, which is used to apply the correct styling for eui-19.
@@ -60,16 +59,13 @@ class EclAppComponent extends ECLBaseDirective {
             this.languageDismiss.next(new EclAppLanguageDismissEvent(evt.language));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclAppComponent, deps: [{ token: i1.EclRtlService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: "20.1.6", ngImport: i0, type: EclAppComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", 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: "19.2.14", ngImport: i0, type: EclAppComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclAppComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-app', template: "<ng-content></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: i1.EclRtlService }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { textDirection: [{
+        }], propDecorators: { textDirection: [{
                 type: HostBinding,
                 args: ['attr.dir']
             }], eclSiteHeaderLanguage: [{
@@ -85,11 +81,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * @deprecated Use {@link EUI_ECL_APP} instead.
  */
 class EclAppModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclAppModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: EclAppModule, imports: [EclAppComponent], exports: [EclAppComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclAppModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclAppModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: EclAppModule, imports: [EclAppComponent], exports: [EclAppComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclAppModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclAppModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclAppModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [EclAppComponent],

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

	@@ -1 +1 @@
1	- {"version":3,"file":"eui-ecl-components-ecl-app.mjs","sources":["../../components/ecl-app/ecl-app.component.ts","../../components/ecl-app/ecl-app.component.html","../../components/ecl-app/ecl-app.module.ts","../../components/ecl-app/index.ts","../../components/ecl-app/eui-ecl-components-ecl-app.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { AfterViewInit, Component, ContentChild, EventEmitter, HostBinding, ~~Inject,~~ OnDestroy, Output } from '@angular/core';\nimport { CssUtils } from '@eui/core';\nimport { EuiLanguage } from '@eui/base';\nimport { EclSiteHeaderLanguageComponent, EclSiteHeaderLanguageSelectedEvent } from '@eui/ecl/components/ecl-site-header';\nimport { ECLBaseDirective, EclBaseEvent, EclRtlService } from '@eui/ecl/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\n/*\n The wrapper component for an ecl application. Has some important global properties.\n /\nexport class EclAppLanguageDismissEvent extends EclBaseEvent {\n constructor(public language?: EuiLanguage) {\n super();\n }\n}\n\n@Component({\n selector: 'ecl-app',\n templateUrl: './ecl-app.component.html',\n})\nexport class EclAppComponent extends ECLBaseDirective implements AfterViewInit, OnDestroy {\n /\n Text direction, by default is 'ltr' - left-to-write. Can also be 'rtl' - right-to-left, which will\n * make all components within <ecl-app> to lign to the right, and apply some special styling and functionality.\n /\n @HostBinding('attr.dir') textDirection = 'ltr';\n\n @ContentChild(EclSiteHeaderLanguageComponent) eclSiteHeaderLanguage: EclSiteHeaderLanguageComponent;\n\n @Output() languageDismiss = new EventEmitter<EclAppLanguageDismissEvent>();\n\n protected destroy$: Subject<boolean> = new Subject<boolean>();\n\n ~~constructor(~~private eclRtlService: ~~EclRtlService,~~ ~~@Inject~~(~~DOCUMENT~~) private document: Document~~) {\n super~~();\n }\n\n ngAfterViewInit(): void {\n // Adds global class, which is used to apply the correct styling for eui-19.\n CssUtils.setHtmlClass('eui-19', this.document);\n this.handleRtlChangeState();\n this.handleUIEvents();\n }\n\n ngOnDestroy(): void {\n this.destroy$.next(true);\n this.destroy$.unsubscribe();\n }\n\n /\n Changes the text direction from 'ltr' to 'rtl' and vice versa.\n /\n private handleRtlChangeState(): void {\n this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n if (rtlState) {\n this.textDirection = 'rtl';\n } else {\n this.textDirection = 'ltr';\n }\n });\n }\n\n private handleUIEvents(): void {\n this.eclSiteHeaderLanguage?.languageSelected\n .pipe(takeUntil(this.destroy$))\n .subscribe((evt: EclSiteHeaderLanguageSelectedEvent) => {\n this.languageDismiss.next(new EclAppLanguageDismissEvent(evt.language));\n });\n }\n}\n","<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { EclAppComponent } from './ecl-app.component';\n\n/\n Module that provides the EclAppComponent.\n \n @deprecated Use {@link EUI_ECL_APP} instead.\n /\n@NgModule({\n imports: [EclAppComponent],\n exports: [EclAppComponent],\n})\nexport class EclAppModule {}\n","import { EclAppComponent } from './ecl-app.component';\n\nexport from './ecl-app.module';\nexport * from './ecl-app.component';\n\nexport const EUI_ECL_APP = [\n EclAppComponent,\n] as const;","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"~~;;;;;;;;;;~~AASA;;AAEG;AACG,MAAO,0BAA2B,SAAQ,YAAY,CAAA;AACxD,IAAA,WAAA,CAAmB,QAAsB,EAAA;AACrC,QAAA,KAAK,EAAE;QADQ,IAAA,CAAA,QAAQ,GAAR,QAAQ;IAE3B;AACH;AAMK,MAAO,eAAgB,SAAQ,gBAAgB,CAAA;~~IAajD~~,~~WAAA,CAAoB,aAA4B,EAA4B,QAAkB,EAAA;AAC1F,QAAA,KAAK,EAAE;QADS,~~IAAA,~~CAAA~~,~~aAAa,GAAb,aAAa;QAA2C,IAAA,CAAA,QAAQ,GAAR,QAAQ;AAZpF~~;;;AAGG;QACsB,IAAA,CAAA,aAAa,GAAG,KAAK;AAIpC,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,YAAY,EAA8B;AAEhE,QAAA,IAAA,CAAA,QAAQ,GAAqB,IAAI,OAAO,EAAW;~~IAI7D~~;~~IAEA~~,eAAe,GAAA;;QAEX,QAAQ,CAAC,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC;QAC9C,IAAI,CAAC,oBAAoB,EAAE;QAC3B,IAAI,CAAC,cAAc,EAAE;IACzB;IAEA,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;AACxB,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;IAC/B;AAEA;;AAEG;IACK,oBAAoB,GAAA;QACxB,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,QAAQ,KAAI;YACtF,IAAI,QAAQ,EAAE;AACV,gBAAA,IAAI,CAAC,aAAa,GAAG,KAAK;YAC9B;iBAAO;AACH,gBAAA,IAAI,CAAC,aAAa,GAAG,KAAK;YAC9B;AACJ,QAAA,CAAC,CAAC;IACN;IAEQ,cAAc,GAAA;QAClB,IAAI,CAAC,qBAAqB,EAAE;AACvB,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC7B,aAAA,SAAS,CAAC,CAAC,GAAuC,KAAI;AACnD,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,0BAA0B,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AAC3E,QAAA,CAAC,CAAC;IACV;~~AAhDS~~,~~IAAA~~,~~SAAA~~,IAAA,~~CAAA,IAAA,GAAA,~~EAAA,~~CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,~~IAAA,EAAA,~~eAAe,+CAakC,QAAQ,EAAA,CAAA,EAAA,~~MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;~~mGAbzD~~,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,uBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAOV,8BAA8B,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC7BhD,6BACA,EAAA,CAAA,CAAA;;~~4FDqBa~~,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,SAAS;+BACI,SAAS,EAAA,QAAA,EAAA,6BAAA,EAAA~~;;0BAgBgC,MAAM~~;~~2BAAC~~,~~QAAQ;yCARzC,~~aAAa,EAAA,CAAA;sBAArC,WAAW;uBAAC,UAAU;gBAEuB,qBAAqB,EAAA,CAAA;sBAAlE,YAAY;uBAAC,8BAA8B;gBAElC,eAAe,EAAA,CAAA;sBAAxB;;;AE5BL;;;;AAIG;MAKU,YAAY,CAAA~~;+GAAZ~~,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA~~;gHAAZ~~,YAAY,EAAA,OAAA,EAAA,CAHX,eAAe,CAAA,EAAA,OAAA,EAAA,CACf,eAAe,CAAA,EAAA,CAAA,CAAA~~;gHAEhB~~,YAAY,EAAA,CAAA,CAAA;;~~4FAAZ~~,YAAY,EAAA,UAAA,EAAA,CAAA;kBAJxB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,eAAe,CAAC;oBAC1B,OAAO,EAAE,CAAC,eAAe,CAAC;AAC7B,iBAAA;;;ACNM,MAAM,WAAW,GAAG;IACvB,eAAe;;;ACNnB;;AAEG;;;;"}
1	+ {"version":3,"file":"eui-ecl-components-ecl-app.mjs","sources":["../../components/ecl-app/ecl-app.component.ts","../../components/ecl-app/ecl-app.component.html","../../components/ecl-app/ecl-app.module.ts","../../components/ecl-app/index.ts","../../components/ecl-app/eui-ecl-components-ecl-app.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { AfterViewInit, Component, ContentChild, EventEmitter, HostBinding, OnDestroy, Output, inject } from '@angular/core';\nimport { CssUtils } from '@eui/core';\nimport { EuiLanguage } from '@eui/base';\nimport { EclSiteHeaderLanguageComponent, EclSiteHeaderLanguageSelectedEvent } from '@eui/ecl/components/ecl-site-header';\nimport { ECLBaseDirective, EclBaseEvent, EclRtlService } from '@eui/ecl/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\n/*\n The wrapper component for an ecl application. Has some important global properties.\n /\nexport class EclAppLanguageDismissEvent extends EclBaseEvent {\n constructor(public language?: EuiLanguage) {\n super();\n }\n}\n\n@Component({\n selector: 'ecl-app',\n templateUrl: './ecl-app.component.html',\n})\nexport class EclAppComponent extends ECLBaseDirective implements AfterViewInit, OnDestroy {\n /\n Text direction, by default is 'ltr' - left-to-write. Can also be 'rtl' - right-to-left, which will\n * make all components within <ecl-app> to lign to the right, and apply some special styling and functionality.\n /\n @HostBinding('attr.dir') textDirection = 'ltr';\n\n @ContentChild(EclSiteHeaderLanguageComponent) eclSiteHeaderLanguage: EclSiteHeaderLanguageComponent;\n\n @Output() languageDismiss = new EventEmitter<EclAppLanguageDismissEvent>();\n\n protected destroy$: Subject<boolean> = new Subject<boolean>();\n private eclRtlService = inject(EclRtlService);\n private document = inject<Document>(DOCUMENT);\n\n ngAfterViewInit(): void {\n // Adds global class, which is used to apply the correct styling for eui-19.\n CssUtils.setHtmlClass('eui-19', this.document);\n this.handleRtlChangeState();\n this.handleUIEvents();\n }\n\n ngOnDestroy(): void {\n this.destroy$.next(true);\n this.destroy$.unsubscribe();\n }\n\n /\n Changes the text direction from 'ltr' to 'rtl' and vice versa.\n /\n private handleRtlChangeState(): void {\n this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n if (rtlState) {\n this.textDirection = 'rtl';\n } else {\n this.textDirection = 'ltr';\n }\n });\n }\n\n private handleUIEvents(): void {\n this.eclSiteHeaderLanguage?.languageSelected\n .pipe(takeUntil(this.destroy$))\n .subscribe((evt: EclSiteHeaderLanguageSelectedEvent) => {\n this.languageDismiss.next(new EclAppLanguageDismissEvent(evt.language));\n });\n }\n}\n","<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { EclAppComponent } from './ecl-app.component';\n\n/\n Module that provides the EclAppComponent.\n \n @deprecated Use {@link EUI_ECL_APP} instead.\n /\n@NgModule({\n imports: [EclAppComponent],\n exports: [EclAppComponent],\n})\nexport class EclAppModule {}\n","import { EclAppComponent } from './ecl-app.component';\n\nexport from './ecl-app.module';\nexport * from './ecl-app.component';\n\nexport const EUI_ECL_APP = [\n EclAppComponent,\n] as const;","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;AASA;;AAEG;AACG,MAAO,0BAA2B,SAAQ,YAAY,CAAA;AACxD,IAAA,WAAA,CAAmB,QAAsB,EAAA;AACrC,QAAA,KAAK,EAAE;QADQ,IAAA,CAAA,QAAQ,GAAR,QAAQ;IAE3B;AACH;AAMK,MAAO,eAAgB,SAAQ,gBAAgB,CAAA;AAJrD,IAAA,WAAA,GAAA;;AAKI;;;AAGG;QACsB,IAAA,CAAA,aAAa,GAAG,KAAK;AAIpC,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,YAAY,EAA8B;AAEhE,QAAA,IAAA,CAAA,QAAQ,GAAqB,IAAI,OAAO,EAAW;AACrD,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC;AACrC,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAW,QAAQ,CAAC;AAkChD,IAAA;IAhCG,eAAe,GAAA;;QAEX,QAAQ,CAAC,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC;QAC9C,IAAI,CAAC,oBAAoB,EAAE;QAC3B,IAAI,CAAC,cAAc,EAAE;IACzB;IAEA,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;AACxB,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;IAC/B;AAEA;;AAEG;IACK,oBAAoB,GAAA;QACxB,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,QAAQ,KAAI;YACtF,IAAI,QAAQ,EAAE;AACV,gBAAA,IAAI,CAAC,aAAa,GAAG,KAAK;YAC9B;iBAAO;AACH,gBAAA,IAAI,CAAC,aAAa,GAAG,KAAK;YAC9B;AACJ,QAAA,CAAC,CAAC;IACN;IAEQ,cAAc,GAAA;QAClB,IAAI,CAAC,qBAAqB,EAAE;AACvB,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC7B,aAAA,SAAS,CAAC,CAAC,GAAuC,KAAI;AACnD,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,0BAA0B,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AAC3E,QAAA,CAAC,CAAC;IACV;8GA9CS,eAAe,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,uBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAOV,8BAA8B,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC7BhD,6BACA,EAAA,CAAA,CAAA;;2FDqBa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,SAAS;+BACI,SAAS,EAAA,QAAA,EAAA,6BAAA,EAAA;8BAQM,aAAa,EAAA,CAAA;sBAArC,WAAW;uBAAC,UAAU;gBAEuB,qBAAqB,EAAA,CAAA;sBAAlE,YAAY;uBAAC,8BAA8B;gBAElC,eAAe,EAAA,CAAA;sBAAxB;;;AE5BL;;;;AAIG;MAKU,YAAY,CAAA;8GAAZ,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAZ,YAAY,EAAA,OAAA,EAAA,CAHX,eAAe,CAAA,EAAA,OAAA,EAAA,CACf,eAAe,CAAA,EAAA,CAAA,CAAA;+GAEhB,YAAY,EAAA,CAAA,CAAA;;2FAAZ,YAAY,EAAA,UAAA,EAAA,CAAA;kBAJxB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,eAAe,CAAC;oBAC1B,OAAO,EAAE,CAAC,eAAe,CAAC;AAC7B,iBAAA;;;ACNM,MAAM,WAAW,GAAG;IACvB,eAAe;;;ACNnB;;AAEG;;;;"}

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

@@ -1,14 +1,14 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
 import * as i0 from '@angular/core';
-import { HostBinding, Directive, afterNextRender, booleanAttribute, ViewChild, ContentChild, forwardRef, ContentChildren, Input, Component, NgModule } from '@angular/core';
+import { HostBinding, Directive, inject, ElementRef, Renderer2, afterNextRender, booleanAttribute, ViewChild, ContentChild, forwardRef, ContentChildren, Input, Component, NgModule } from '@angular/core';
 import { Subject, takeUntil, delay } from 'rxjs';
 import { ECLBaseDirective } from '@eui/ecl/core';
 import { EclLinkDirective } from '@eui/ecl/components/ecl-link';
-import * as i2 from '@eui/ecl/components/ecl-icon';
+import * as i1 from '@eui/ecl/components/ecl-icon';
 import { EclIconModule } from '@eui/ecl/components/ecl-icon';
 import { NgTemplateOutlet } from '@angular/common';
-import * as i3 from '@eui/ecl/components/ecl-button';
+import * as i2 from '@eui/ecl/components/ecl-button';
 import { EclButtonModule } from '@eui/ecl/components/ecl-button';
-import * as i1 from '@angular/cdk/layout';
 /**
  * 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: "19.2.14", ngImport: i0, type: EclBannerPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", 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: "20.1.6", ngImport: i0, type: EclBannerPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: EclBannerPictureDirective, isStandalone: true, selector: "picture[eclBannerPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerPictureDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclBannerPictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'picture[eclBannerPicture]',
@@ -35,23 +35,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Enables class binding and exposes the element reference.
  */
 class EclBannerImageDirective extends ECLBaseDirective {
-    /**
-     * Reference to the host image element.
-     */
-    constructor(el) {
-        super();
-        this.el = el;
+    constructor() {
+        super(...arguments);
+        this.el = inject(ElementRef);
         this.className = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerImageDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", 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: "20.1.6", ngImport: i0, type: EclBannerImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", 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: "19.2.14", ngImport: i0, type: EclBannerImageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclBannerImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'img[eclBannerImage]',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { className: [{
+        }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class.ecl-banner__image']
             }] } });
@@ -61,26 +58,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Adds appropriate styling classes to the host element.
  */
 class EclBannerVideoDirective extends ECLBaseDirective {
-    /**
-     * Reference to the native video element.
-     */
-    constructor(el) {
-        super();
-        this.el = el;
+    constructor() {
+        super(...arguments);
+        this.el = inject(ElementRef);
         /**
          * CSS classes applied to the host video element.
          */
         this.videoClasses = 'ecl-video ecl-banner__video';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerVideoDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", 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: "20.1.6", ngImport: i0, type: EclBannerVideoDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: EclBannerVideoDirective, isStandalone: true, selector: "video[eclBannerVideo]", host: { properties: { "class": "this.videoClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerVideoDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclBannerVideoDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'video[eclBannerVideo]',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { videoClasses: [{
+        }], propDecorators: { videoClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -104,11 +98,9 @@ class EclBannerComponent extends ECLBaseDirective {
             .join(' ')
             .trim();
     }
-    constructor(el, renderer, cdkBreakpointObserver) {
+    constructor() {
         super();
-        this.el = el;
-        this.renderer = renderer;
-        this.cdkBreakpointObserver = cdkBreakpointObserver;
+        this.el = inject(ElementRef);
         /**
          * Defines the size of the banner. Affects its height-to-width aspect ratio.
          * Allowed values: 'xs' | 's' | 'm' | 'l'.
@@ -161,6 +153,8 @@ class EclBannerComponent extends ECLBaseDirective {
         this.bannerWidth = 0;
         this.isTabletBreakpoint = true;
         this.TIMEOUT_INTERVAL = 200;
+        this.renderer = inject(Renderer2);
+        this.cdkBreakpointObserver = inject(BreakpointObserver);
         afterNextRender(() => {
             this.observeBreakpointChanges();
             this.observeElementSizeChanges();
@@ -323,17 +317,17 @@ class EclBannerComponent extends ECLBaseDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "ngmodule", type: EclButtonModule }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclBannerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-banner', imports: [
                         EclIconModule,
                         EclButtonModule,
                         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: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.BreakpointObserver }], propDecorators: { eclSize: [{
+        }], ctorParameters: () => [], propDecorators: { eclSize: [{
                 type: Input
             }], fontColor: [{
                 type: Input
@@ -388,10 +382,10 @@ class EclBannerTitleDirective extends ECLBaseDirective {
         super(...arguments);
         this.className = 'ecl-banner__title';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", 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: "20.1.6", ngImport: i0, type: EclBannerTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: EclBannerTitleDirective, isStandalone: true, selector: "[eclBannerTitle]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclBannerTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclBannerTitle]',
@@ -409,10 +403,10 @@ class EclBannerTitleTextDirective extends ECLBaseDirective {
         super(...arguments);
         this.className = 'ecl-banner__title-text';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerTitleTextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", 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: "20.1.6", ngImport: i0, type: EclBannerTitleTextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: EclBannerTitleTextDirective, isStandalone: true, selector: "[eclBannerTitleText]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerTitleTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclBannerTitleTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclBannerTitleText]',
@@ -430,10 +424,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: "19.2.14", ngImport: i0, type: EclBannerTitleLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", 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: "20.1.6", ngImport: i0, type: EclBannerTitleLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: EclBannerTitleLinkDirective, isStandalone: true, selector: "[eclBannerTitleLink]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerTitleLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclBannerTitleLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclBannerTitleLink]',
@@ -451,10 +445,10 @@ class EclBannerDescriptionDirective extends ECLBaseDirective {
         super(...arguments);
         this.className = 'ecl-banner__description';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerDescriptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", 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: "20.1.6", ngImport: i0, type: EclBannerDescriptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: EclBannerDescriptionDirective, isStandalone: true, selector: "[eclBannerDescription]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerDescriptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclBannerDescriptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclBannerDescription]',
@@ -471,10 +465,10 @@ class EclBannerDescriptionTextDirective extends ECLBaseDirective {
         super(...arguments);
         this.className = 'ecl-banner__description-text';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerDescriptionTextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", 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: "20.1.6", ngImport: i0, type: EclBannerDescriptionTextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: EclBannerDescriptionTextDirective, isStandalone: true, selector: "[eclBannerDescriptionText]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerDescriptionTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclBannerDescriptionTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclBannerDescriptionText]',
@@ -491,10 +485,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: "19.2.14", ngImport: i0, type: EclBannerDescriptionLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", 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: "20.1.6", ngImport: i0, type: EclBannerDescriptionLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: EclBannerDescriptionLinkDirective, isStandalone: true, selector: "[eclBannerDescriptionLink]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerDescriptionLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclBannerDescriptionLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclBannerDescriptionLink]',
@@ -523,8 +517,8 @@ const COMPONENTS = [
  * @deprecated Use {@link EUI_ECL_BANNER} instead.
  */
 class EclBannerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: EclBannerModule, imports: [EclBannerComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclBannerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: EclBannerModule, imports: [EclBannerComponent,
             EclBannerTitleDirective,
             EclBannerTitleTextDirective,
             EclBannerDescriptionDirective,
@@ -543,9 +537,9 @@ class EclBannerModule {
             EclBannerTitleLinkDirective,
             EclBannerVideoDirective,
             EclBannerDescriptionLinkDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerModule, imports: [EclBannerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclBannerModule, imports: [EclBannerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclBannerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EclBannerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...COMPONENTS],