@eui/ecl 18.0.0-next.12 → 18.0.0-next.14

package/esm2022/lib/components/ecl-modal/ecl-modal.component.mjs

@@ -86,10 +86,10 @@ export class EclModalComponent extends ECLBaseDirective {
             }
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclModalComponent, selector: "dialog[eclModal]", inputs: { variant: "variant", isOpen: "isOpen" }, outputs: { modalClose: "modalClose", modalOpen: "modalOpen" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "attr.open": "this.isModalOpened", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclModalHeader", first: true, predicate: i0.forwardRef(() => EclModalHeaderComponent), descendants: true }, { propertyName: "eclModalCloseComponents", predicate: i0.forwardRef(() => EclModalCloseDirective), descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"ecl-modal__container ecl-container\">\n    <div class=\"ecl-modal__content ecl-col-12 ecl-col-m-8 ecl-offset-m-2 ecl-col-l-6 ecl-offset-l-3\">\n        <ng-content></ng-content>\n    </div>\n</div>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclModalComponent, selector: "dialog[eclModal]", inputs: { variant: "variant", isOpen: "isOpen" }, outputs: { modalClose: "modalClose", modalOpen: "modalOpen" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "attr.open": "this.isModalOpened", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclModalHeader", first: true, predicate: i0.forwardRef(() => EclModalHeaderComponent), descendants: true }, { propertyName: "eclModalCloseComponents", predicate: i0.forwardRef(() => EclModalCloseDirective), descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"ecl-modal__container ecl-container\">\n    <div class=\"ecl-modal__content ecl-col-12 ecl-col-m-8 ecl-offset-m-2 ecl-col-l-6 ecl-offset-l-3\">\n        <ng-content></ng-content>\n    </div>\n</div>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dialog[eclModal]', template: "<div class=\"ecl-modal__container ecl-container\">\n    <div class=\"ecl-modal__content ecl-col-12 ecl-col-m-8 ecl-offset-m-2 ecl-col-l-6 ecl-offset-l-3\">\n        <ng-content></ng-content>\n    </div>\n</div>\n" }]
         }], propDecorators: { variant: [{

package/esm2022/lib/components/ecl-modal/ecl-modal.module.mjs

@@ -20,8 +20,8 @@ const COMPONENTS = [
     EclModalTriggerDirective,
 ];
 export class EclModalComponentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalComponentModule, declarations: [EclModalComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalComponentModule, declarations: [EclModalComponent,
             EclModalHeaderComponent,
             EclModalBodyComponent,
             EclModalBodyFixedContentDirective,
@@ -34,9 +34,9 @@ export class EclModalComponentModule {
             EclModalFooterComponent,
             EclModalCloseDirective,
             EclModalTriggerDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalComponentModule, imports: [CommonModule, EclIconComponentModule, EclButtonComponentModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalComponentModule, imports: [CommonModule, EclIconComponentModule, EclButtonComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, EclIconComponentModule, EclButtonComponentModule],

package/esm2022/lib/components/ecl-multiselect/boldText.pipe.mjs

@@ -24,10 +24,10 @@ export class BoldTextPipe {
     clearBoldText(str) {
         return str.replace(/<[/]?b>/g, '');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: BoldTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i0, type: BoldTextPipe, name: "boldText" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: BoldTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: BoldTextPipe, name: "boldText" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: BoldTextPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: BoldTextPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'boldText',

package/esm2022/lib/components/ecl-multiselect/ecl-multiselect-dropdown/ecl-multiselect-dropdown.component.mjs

@@ -412,8 +412,8 @@ export class EclMultiselectDropdownComponent extends ECLBaseDirective {
             this.renderer.setAttribute(label, 'for', this.toggleId);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclMultiselectDropdownComponent, selector: "div[eclMultiselectDropdown]", inputs: { isInvalid: "isInvalid", mainInputPlaceholder: "mainInputPlaceholder", searchFieldPlaceholder: "searchFieldPlaceholder", eclSize: "eclSize", disabled: "disabled" }, outputs: { eclChange: "eclChange" }, host: { listeners: { "document:keyup.escape": "onEscapeKey($event)", "document:click": "onKeyUp($event)" }, properties: { "class": "this.cssClasses", "attr.disabled": "this.disabled" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclMultiselectDropdownComponent, selector: "div[eclMultiselectDropdown]", inputs: { isInvalid: "isInvalid", mainInputPlaceholder: "mainInputPlaceholder", searchFieldPlaceholder: "searchFieldPlaceholder", eclSize: "eclSize", disabled: "disabled" }, outputs: { eclChange: "eclChange" }, host: { listeners: { "document:keyup.escape": "onEscapeKey($event)", "document:click": "onKeyUp($event)" }, properties: { "class": "this.cssClasses", "attr.disabled": "this.disabled" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => EclMultiselectDropdownComponent)),
@@ -427,7 +427,7 @@ __decorate([
 __decorate([
     coerceBoolean
 ], EclMultiselectDropdownComponent.prototype, "disabled", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[eclMultiselectDropdown]', providers: [
                         {

package/esm2022/lib/components/ecl-multiselect/ecl-multiselect-input/ecl-multiselect-input.component.mjs

@@ -55,8 +55,8 @@ export class EclMultiselectInputComponent extends ECLBaseDirective {
     onFocus() {
         this.inputMultiselect.nativeElement.focus();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: { eclSize: "eclSize", toggleId: "toggleId", isDisabled: "isDisabled", isInvalid: "isInvalid", inputPlaceholder: "inputPlaceholder", selectedItems: "selectedItems", isDropdownExpanded: "isDropdownExpanded", ariaControls: "ariaControls", ariaDescribedby: "ariaDescribedby", ariaLabeledby: "ariaLabeledby" }, outputs: { mainInputClick: "mainInputClick", mainInputKeydown: "mainInputKeydown" }, host: { properties: { "class.ecl-select__container--disabled": "this.isDisabled", "class.ecl-select__container--invalid": "this.isInvalid", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "inputMultiselect", first: true, predicate: ["inputMultiselect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class.ecl-select-multiple-selections-counter--visible]=\"isShowCounter\" class=\"ecl-select-multiple-selections-counter\">\n    <span>{{ selectedItemsCount }}</span>\n</div>\n<button\n    class=\"ecl-select ecl-select__multiple-toggle\"\n    #inputMultiselect\n    type=\"button\"\n    [id]=\"toggleId\"\n    [attr.aria-expanded]=\"isDropdownExpanded\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.disabled]=\"isDisabled ? true : undefined\"\n    [attr.aria-labelledby]=\"ariaLabeledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"onClick($event)\"> {{ buttonText }}\n</button>\n<div class=\"ecl-select__icon\">\n    <ecl-icon icon=\"corner-arrow\" size=\"s\" class=\"ecl-select__icon-shape\" transform=\"rotate-180\"></ecl-icon>\n</div>\n", dependencies: [{ kind: "component", type: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: { eclSize: "eclSize", toggleId: "toggleId", isDisabled: "isDisabled", isInvalid: "isInvalid", inputPlaceholder: "inputPlaceholder", selectedItems: "selectedItems", isDropdownExpanded: "isDropdownExpanded", ariaControls: "ariaControls", ariaDescribedby: "ariaDescribedby", ariaLabeledby: "ariaLabeledby" }, outputs: { mainInputClick: "mainInputClick", mainInputKeydown: "mainInputKeydown" }, host: { properties: { "class.ecl-select__container--disabled": "this.isDisabled", "class.ecl-select__container--invalid": "this.isInvalid", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "inputMultiselect", first: true, predicate: ["inputMultiselect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class.ecl-select-multiple-selections-counter--visible]=\"isShowCounter\" class=\"ecl-select-multiple-selections-counter\">\n    <span>{{ selectedItemsCount }}</span>\n</div>\n<button\n    class=\"ecl-select ecl-select__multiple-toggle\"\n    #inputMultiselect\n    type=\"button\"\n    [id]=\"toggleId\"\n    [attr.aria-expanded]=\"isDropdownExpanded\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.disabled]=\"isDisabled ? true : undefined\"\n    [attr.aria-labelledby]=\"ariaLabeledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"onClick($event)\"> {{ buttonText }}\n</button>\n<div class=\"ecl-select__icon\">\n    <ecl-icon icon=\"corner-arrow\" size=\"s\" class=\"ecl-select__icon-shape\" transform=\"rotate-180\"></ecl-icon>\n</div>\n", dependencies: [{ kind: "component", type: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] }); }
 }
 __decorate([
     coerceBoolean
@@ -64,7 +64,7 @@ __decorate([
 __decorate([
     coerceBoolean
 ], EclMultiselectInputComponent.prototype, "isInvalid", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[eclMultiselectInput]', template: "<div [class.ecl-select-multiple-selections-counter--visible]=\"isShowCounter\" class=\"ecl-select-multiple-selections-counter\">\n    <span>{{ selectedItemsCount }}</span>\n</div>\n<button\n    class=\"ecl-select ecl-select__multiple-toggle\"\n    #inputMultiselect\n    type=\"button\"\n    [id]=\"toggleId\"\n    [attr.aria-expanded]=\"isDropdownExpanded\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.disabled]=\"isDisabled ? true : undefined\"\n    [attr.aria-labelledby]=\"ariaLabeledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"onClick($event)\"> {{ buttonText }}\n</button>\n<div class=\"ecl-select__icon\">\n    <ecl-icon icon=\"corner-arrow\" size=\"s\" class=\"ecl-select__icon-shape\" transform=\"rotate-180\"></ecl-icon>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { eclSize: [{

package/esm2022/lib/components/ecl-multiselect/ecl-multiselect-optgroup/ecl-multiselect-optgroup.component.mjs

@@ -16,10 +16,10 @@ export class EclMultiselectOptgroupComponent extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-select__multiple-group')].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectOptgroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclMultiselectOptgroupComponent, selector: "fieldset[eclMultiselectOptgroup]", inputs: { label: "label" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<legend class=\"ecl-select__multiple-group__title\">{{ label }}</legend>\n<ng-content></ng-content>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectOptgroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclMultiselectOptgroupComponent, selector: "fieldset[eclMultiselectOptgroup]", inputs: { label: "label" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<legend class=\"ecl-select__multiple-group__title\">{{ label }}</legend>\n<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectOptgroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectOptgroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fieldset[eclMultiselectOptgroup]', template: "<legend class=\"ecl-select__multiple-group__title\">{{ label }}</legend>\n<ng-content></ng-content>\n" }]
         }], propDecorators: { label: [{

package/esm2022/lib/components/ecl-multiselect/ecl-multiselect-option/ecl-multiselect-option.component.mjs

@@ -88,13 +88,13 @@ export class EclMultiselectOptionComponent extends ECLBaseDirective {
     createId() {
         return uuidgen();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: { value: "value", label: "label", disabled: "disabled", isChecked: "isChecked" }, outputs: { optionClick: "optionClick", optionKeydown: "optionKeydown" }, host: { properties: { "class.ecl-checkbox--disabled": "this.disabled", "attr.disabled": "this.disabled", "style.display": "this.display", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "eclCheckboxInput", first: true, predicate: ["checkboxInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i1.EclCheckboxDirective }], ngImport: i0, template: "<input\n    eclCheckboxInput\n    type=\"checkbox\"\n    [id]=\"id\"\n    [value]=\"value\"\n    (click)=\"onOptionClick()\"\n    (keydown)=\"onOptionKeydown($event)\"\n    [checked]=\"isChecked\"\n    [disabled]=\"disabled\"\n    #checkboxInput />\n<label [for]=\"id\" eclCheckboxLabel><span [innerHTML]=\"label | boldText: keyword\"></span></label>\n", dependencies: [{ kind: "component", type: i2.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled"] }, { kind: "directive", type: i3.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "pipe", type: i4.BoldTextPipe, name: "boldText" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: { value: "value", label: "label", disabled: "disabled", isChecked: "isChecked" }, outputs: { optionClick: "optionClick", optionKeydown: "optionKeydown" }, host: { properties: { "class.ecl-checkbox--disabled": "this.disabled", "attr.disabled": "this.disabled", "style.display": "this.display", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "eclCheckboxInput", first: true, predicate: ["checkboxInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i1.EclCheckboxDirective }], ngImport: i0, template: "<input\n    eclCheckboxInput\n    type=\"checkbox\"\n    [id]=\"id\"\n    [value]=\"value\"\n    (click)=\"onOptionClick()\"\n    (keydown)=\"onOptionKeydown($event)\"\n    [checked]=\"isChecked\"\n    [disabled]=\"disabled\"\n    #checkboxInput />\n<label [for]=\"id\" eclCheckboxLabel><span [innerHTML]=\"label | boldText: keyword\"></span></label>\n", dependencies: [{ kind: "component", type: i2.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled"] }, { kind: "directive", type: i3.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "pipe", type: i4.BoldTextPipe, name: "boldText" }] }); }
 }
 __decorate([
     coerceBoolean
 ], EclMultiselectOptionComponent.prototype, "disabled", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[eclMultiselectOption]', hostDirectives: [EclCheckboxDirective], template: "<input\n    eclCheckboxInput\n    type=\"checkbox\"\n    [id]=\"id\"\n    [value]=\"value\"\n    (click)=\"onOptionClick()\"\n    (keydown)=\"onOptionKeydown($event)\"\n    [checked]=\"isChecked\"\n    [disabled]=\"disabled\"\n    #checkboxInput />\n<label [for]=\"id\" eclCheckboxLabel><span [innerHTML]=\"label | boldText: keyword\"></span></label>\n" }]
         }], ctorParameters: () => [], propDecorators: { eclCheckboxInput: [{

package/esm2022/lib/components/ecl-multiselect/ecl-multiselect-option.directive.mjs

@@ -29,10 +29,10 @@ export class EclMultiselectOptionDirective extends ECLBaseDirective {
     isOptGroup() {
         return this.elRef.nativeElement.nodeName === 'OPTGROUP';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclMultiselectOptionDirective, selector: "optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]", inputs: { value: "value", label: "label", disabled: "disabled", selected: "selected" }, host: { properties: { "attr.disabled": "this.disabled", "attr.selected": "this.selected", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclOptionItems", predicate: EclMultiselectOptionDirective }], usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclMultiselectOptionDirective, selector: "optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]", inputs: { value: "value", label: "label", disabled: "disabled", selected: "selected" }, host: { properties: { "attr.disabled": "this.disabled", "attr.selected": "this.selected", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclOptionItems", predicate: EclMultiselectOptionDirective }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]',

package/esm2022/lib/components/ecl-multiselect/ecl-multiselect.component.mjs

@@ -128,8 +128,8 @@ export class EclMultiselectComponent extends ECLBaseDirective {
             this.multiselectComponent.multiOptionDirectives = this.eclOptionItems.toArray();
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclMultiselectComponent, selector: "select[eclMultiselect]", inputs: { ariaDescribedby: "ariaDescribedby", ariaLabeledby: "ariaLabeledby", id: "id", isInvalid: "isInvalid", disabled: "disabled", eclPlaceholder: "eclPlaceholder", eclSize: "eclSize" }, outputs: { eclChange: "eclChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclMultiselectComponent, selector: "select[eclMultiselect]", inputs: { ariaDescribedby: "ariaDescribedby", ariaLabeledby: "ariaLabeledby", id: "id", isInvalid: "isInvalid", disabled: "disabled", eclPlaceholder: "eclPlaceholder", eclSize: "eclSize" }, outputs: { eclChange: "eclChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => EclMultiselectComponent)),
@@ -140,7 +140,7 @@ export class EclMultiselectComponent extends ECLBaseDirective {
 __decorate([
     coerceBoolean
 ], EclMultiselectComponent.prototype, "isInvalid", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'select[eclMultiselect]', encapsulation: ViewEncapsulation.None, providers: [
                         {

package/esm2022/lib/components/ecl-multiselect/ecl-multiselect.module.mjs

@@ -15,8 +15,8 @@ import { BoldTextPipe } from './boldText.pipe';
 import * as i0 from "@angular/core";
 const COMPONENTS = [EclMultiselectComponent, EclMultiselectOptionDirective];
 export class EclMultiselectComponentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectComponentModule, declarations: [EclMultiselectComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectComponentModule, declarations: [EclMultiselectComponent,
             EclMultiselectOptionDirective,
             EclMultiselectOptionComponent,
             EclMultiselectInputComponent,
@@ -28,14 +28,14 @@ export class EclMultiselectComponentModule {
             EclCheckboxModule,
             EclTextInputDirectiveModule,
             EclButtonComponentModule], exports: [EclMultiselectComponent, EclMultiselectOptionDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectComponentModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectComponentModule, imports: [CommonModule,
             TranslateModule,
             EclIconComponentModule,
             EclCheckboxModule,
             EclTextInputDirectiveModule,
             EclButtonComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/components/ecl-navigation-list/ecl-navigation-list-image/ecl-navigation-list-image.component.mjs

@@ -9,10 +9,10 @@ export class EclNavigationListImageComponent extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-picture ecl-navigation-list__picture')].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNavigationListImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclNavigationListImageComponent, selector: "div[eclNavigationListImage]", inputs: { imageUrl: "imageUrl" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<img class=\"ecl-navigation-list__image\" [src]=\"imageUrl\" alt=\"Alt text for the image\" />\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNavigationListImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclNavigationListImageComponent, selector: "div[eclNavigationListImage]", inputs: { imageUrl: "imageUrl" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<img class=\"ecl-navigation-list__image\" [src]=\"imageUrl\" alt=\"Alt text for the image\" />\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNavigationListImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNavigationListImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[eclNavigationListImage]', template: "<img class=\"ecl-navigation-list__image\" [src]=\"imageUrl\" alt=\"Alt text for the image\" />\n" }]
         }], propDecorators: { imageUrl: [{

package/esm2022/lib/components/ecl-navigation-list/ecl-navigation-list-item.component.mjs

@@ -16,10 +16,10 @@ export class EclNavigationListItemComponent extends ECLBaseDirective {
             this.eclContentBlock.class = 'ecl-navigation-list__content-block';
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNavigationListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclNavigationListItemComponent, selector: "ecl-navigation-list-item", inputs: { columns: "columns" }, host: { properties: { "attr.role": "this.role", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclContentBlock", first: true, predicate: i0.forwardRef(() => EclContentBlockComponent), descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNavigationListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclNavigationListItemComponent, selector: "ecl-navigation-list-item", inputs: { columns: "columns" }, host: { properties: { "attr.role": "this.role", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclContentBlock", first: true, predicate: i0.forwardRef(() => EclContentBlockComponent), descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNavigationListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNavigationListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-navigation-list-item', template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { columns: [{

package/esm2022/lib/components/ecl-navigation-list/ecl-navigation-list-picture.directive.mjs

@@ -5,10 +5,10 @@ export class EclNavigationListPictureDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-picture ecl-navigation-list__picture')].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNavigationListPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclNavigationListPictureDirective, selector: "picture[eclNavigationListPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNavigationListPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclNavigationListPictureDirective, selector: "picture[eclNavigationListPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNavigationListPictureDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNavigationListPictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'picture[eclNavigationListPicture]',
@@ -21,10 +21,10 @@ export class EclNavigationListImageDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-navigation-list__image')].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNavigationListImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclNavigationListImageDirective, selector: "img[eclNavigationListImage]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNavigationListImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclNavigationListImageDirective, selector: "img[eclNavigationListImage]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNavigationListImageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNavigationListImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'img[eclNavigationListImage]',

package/esm2022/lib/components/ecl-navigation-list/ecl-navigation-list.component.mjs

@@ -12,13 +12,13 @@ export class EclNavigationListComponent extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-navigation-list'), `ecl-navigation-list--col-${this.columns}`].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNavigationListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclNavigationListComponent, selector: "ecl-navigation-list", inputs: { columns: "columns" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNavigationListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclNavigationListComponent, selector: "ecl-navigation-list", inputs: { columns: "columns" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
 __decorate([
     coerceNumber
 ], EclNavigationListComponent.prototype, "columns", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNavigationListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNavigationListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-navigation-list', template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { columns: [{

package/esm2022/lib/components/ecl-navigation-list/ecl-navigation-list.module.mjs

@@ -13,8 +13,8 @@ const COMPONENTS = [
     EclNavigationListPictureDirective,
 ];
 export class EclNavigationListComponentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNavigationListComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNavigationListComponentModule, declarations: [EclNavigationListComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNavigationListComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNavigationListComponentModule, declarations: [EclNavigationListComponent,
             EclNavigationListItemComponent,
             EclNavigationListImageDirective,
             EclNavigationListImageComponent,
@@ -23,9 +23,9 @@ export class EclNavigationListComponentModule {
             EclNavigationListImageDirective,
             EclNavigationListImageComponent,
             EclNavigationListPictureDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNavigationListComponentModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNavigationListComponentModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNavigationListComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNavigationListComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/esm2022/lib/components/ecl-news-ticker/ecl-news-ticker-item.component.mjs

@@ -54,10 +54,10 @@ export class EclNewsTickerItemComponent extends ECLBaseDirective {
             this.eclLink.tabindex = -1;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNewsTickerItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclNewsTickerItemComponent, selector: "ecl-news-ticker-item", outputs: { itemFocused: "itemFocused" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.aria-hidden": "this.isAriahidden", "attr.inert": "this.isInert" } }, queries: [{ propertyName: "eclLink", first: true, predicate: EclLinkDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNewsTickerItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclNewsTickerItemComponent, selector: "ecl-news-ticker-item", outputs: { itemFocused: "itemFocused" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.aria-hidden": "this.isAriahidden", "attr.inert": "this.isInert" } }, queries: [{ propertyName: "eclLink", first: true, predicate: EclLinkDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNewsTickerItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNewsTickerItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-news-ticker-item', template: "<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { eclLink: [{

package/esm2022/lib/components/ecl-news-ticker/ecl-news-ticker.component.mjs

@@ -195,10 +195,10 @@ export class EclNewsTickerComponent extends ECLBaseDirective {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNewsTickerComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.2", type: EclNewsTickerComponent, selector: "ecl-news-ticker", inputs: { isAutoplay: ["isAutoplay", "isAutoplay", booleanAttribute] }, outputs: { itemSwitch: "itemSwitch" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "newsTickerItems", predicate: EclNewsTickerItemComponent }], viewQueries: [{ propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-news-ticker__container\" [style.height.px]=\"containerHeight\">\n    <ecl-icon icon=\"information\" size=\"m\" class=\"ecl-news-ticker__icon\"></ecl-icon>\n    <div class=\"ecl-news-ticker__content\" [style.height.px]=\"contentHeight\">\n        <ul\n            class=\"ecl-news-ticker__slides\"\n            [style.transition-duration.s]=\"transitionDuration\"\n            [style.transform]=\"slidesTransform\"\n            (mouseover)=\"onNewsTickerItemMouseOver()\"\n            (mouseout)=\"onNewsTickerItemMouseOut()\"\n            #slidesContainer>\n            @if(isShowControls) {\n                <ecl-news-ticker-item #firstHiddenItem></ecl-news-ticker-item>\n            }\n            <ng-content></ng-content>\n            @if(isShowControls) {\n                <ecl-news-ticker-item #lastHiddenItem></ecl-news-ticker-item>\n            }\n        </ul>\n    </div>\n</div>\n\n@if(isShowControls) {\n<div class=\"ecl-news-ticker__controls\">\n    <button eclButton class=\"ecl-news-ticker__prev\" variant=\"primary\" isIconOnly (click)=\"onPrevious()\">\n        <span eclButtonLabel>\n            {{ 'ecl.news-ticker.PREV-ITEM' | translate }}\n        </span>\n        <ecl-icon isInverted icon=\"corner-arrow\" size=\"l\" transform=\"rotate-270\" class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <button eclButton class=\"ecl-news-ticker__next\" variant=\"primary\" isIconOnly (click)=\"onNext()\">\n        <span eclButtonLabel>\n            {{ 'ecl.news-ticker.NEXT-ITEM' | translate }}\n        </span>\n        <ecl-icon isInverted icon=\"corner-arrow\" size=\"l\" transform=\"rotate-90\" class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <button eclButton class=\"ecl-news-ticker__play\" variant=\"primary\" isIconOnly [class.ecl-u-d-none]=\"playing\" (click)=\"startAutoplay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.AUTO-PLAY' | translate }}\n        </span>\n        <ecl-icon isInverted icon=\"play-outline\" size=\"l\" class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <button eclButton class=\"ecl-news-ticker__pause\" variant=\"primary\" isIconOnly [class.ecl-u-d-none]=\"!playing\" (click)=\"cancelAutoplay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.PAUSE' | translate }}\n        </span>\n        <ecl-icon isInverted icon=\"pause\" size=\"l\" class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <div class=\"ecl-news-ticker__counter\">\n        <span class=\"ecl-news-ticker__counter--current\"> {{ itemIndex }}</span>\n        {{ 'ecl.common.OF' | translate }}\n        <span class=\"ecl-news-ticker__counter--max\">{{ itemsCount }}</span>\n    </div>\n</div>\n}", dependencies: [{ kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i2.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: i4.EclNewsTickerItemComponent, selector: "ecl-news-ticker-item", outputs: ["itemFocused"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNewsTickerComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: EclNewsTickerComponent, selector: "ecl-news-ticker", inputs: { isAutoplay: ["isAutoplay", "isAutoplay", booleanAttribute] }, outputs: { itemSwitch: "itemSwitch" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "newsTickerItems", predicate: EclNewsTickerItemComponent }], viewQueries: [{ propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-news-ticker__container\" [style.height.px]=\"containerHeight\">\n    <ecl-icon icon=\"information\" size=\"m\" class=\"ecl-news-ticker__icon\"></ecl-icon>\n    <div class=\"ecl-news-ticker__content\" [style.height.px]=\"contentHeight\">\n        <ul\n            class=\"ecl-news-ticker__slides\"\n            [style.transition-duration.s]=\"transitionDuration\"\n            [style.transform]=\"slidesTransform\"\n            (mouseover)=\"onNewsTickerItemMouseOver()\"\n            (mouseout)=\"onNewsTickerItemMouseOut()\"\n            #slidesContainer>\n            @if(isShowControls) {\n                <ecl-news-ticker-item #firstHiddenItem></ecl-news-ticker-item>\n            }\n            <ng-content></ng-content>\n            @if(isShowControls) {\n                <ecl-news-ticker-item #lastHiddenItem></ecl-news-ticker-item>\n            }\n        </ul>\n    </div>\n</div>\n\n@if(isShowControls) {\n<div class=\"ecl-news-ticker__controls\">\n    <button eclButton class=\"ecl-news-ticker__prev\" variant=\"primary\" isIconOnly (click)=\"onPrevious()\">\n        <span eclButtonLabel>\n            {{ 'ecl.news-ticker.PREV-ITEM' | translate }}\n        </span>\n        <ecl-icon isInverted icon=\"corner-arrow\" size=\"l\" transform=\"rotate-270\" class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <button eclButton class=\"ecl-news-ticker__next\" variant=\"primary\" isIconOnly (click)=\"onNext()\">\n        <span eclButtonLabel>\n            {{ 'ecl.news-ticker.NEXT-ITEM' | translate }}\n        </span>\n        <ecl-icon isInverted icon=\"corner-arrow\" size=\"l\" transform=\"rotate-90\" class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <button eclButton class=\"ecl-news-ticker__play\" variant=\"primary\" isIconOnly [class.ecl-u-d-none]=\"playing\" (click)=\"startAutoplay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.AUTO-PLAY' | translate }}\n        </span>\n        <ecl-icon isInverted icon=\"play-outline\" size=\"l\" class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <button eclButton class=\"ecl-news-ticker__pause\" variant=\"primary\" isIconOnly [class.ecl-u-d-none]=\"!playing\" (click)=\"cancelAutoplay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.PAUSE' | translate }}\n        </span>\n        <ecl-icon isInverted icon=\"pause\" size=\"l\" class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <div class=\"ecl-news-ticker__counter\">\n        <span class=\"ecl-news-ticker__counter--current\"> {{ itemIndex }}</span>\n        {{ 'ecl.common.OF' | translate }}\n        <span class=\"ecl-news-ticker__counter--max\">{{ itemsCount }}</span>\n    </div>\n</div>\n}", dependencies: [{ kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i2.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: i4.EclNewsTickerItemComponent, selector: "ecl-news-ticker-item", outputs: ["itemFocused"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNewsTickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNewsTickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-news-ticker', template: "<div class=\"ecl-news-ticker__container\" [style.height.px]=\"containerHeight\">\n    <ecl-icon icon=\"information\" size=\"m\" class=\"ecl-news-ticker__icon\"></ecl-icon>\n    <div class=\"ecl-news-ticker__content\" [style.height.px]=\"contentHeight\">\n        <ul\n            class=\"ecl-news-ticker__slides\"\n            [style.transition-duration.s]=\"transitionDuration\"\n            [style.transform]=\"slidesTransform\"\n            (mouseover)=\"onNewsTickerItemMouseOver()\"\n            (mouseout)=\"onNewsTickerItemMouseOut()\"\n            #slidesContainer>\n            @if(isShowControls) {\n                <ecl-news-ticker-item #firstHiddenItem></ecl-news-ticker-item>\n            }\n            <ng-content></ng-content>\n            @if(isShowControls) {\n                <ecl-news-ticker-item #lastHiddenItem></ecl-news-ticker-item>\n            }\n        </ul>\n    </div>\n</div>\n\n@if(isShowControls) {\n<div class=\"ecl-news-ticker__controls\">\n    <button eclButton class=\"ecl-news-ticker__prev\" variant=\"primary\" isIconOnly (click)=\"onPrevious()\">\n        <span eclButtonLabel>\n            {{ 'ecl.news-ticker.PREV-ITEM' | translate }}\n        </span>\n        <ecl-icon isInverted icon=\"corner-arrow\" size=\"l\" transform=\"rotate-270\" class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <button eclButton class=\"ecl-news-ticker__next\" variant=\"primary\" isIconOnly (click)=\"onNext()\">\n        <span eclButtonLabel>\n            {{ 'ecl.news-ticker.NEXT-ITEM' | translate }}\n        </span>\n        <ecl-icon isInverted icon=\"corner-arrow\" size=\"l\" transform=\"rotate-90\" class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <button eclButton class=\"ecl-news-ticker__play\" variant=\"primary\" isIconOnly [class.ecl-u-d-none]=\"playing\" (click)=\"startAutoplay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.AUTO-PLAY' | translate }}\n        </span>\n        <ecl-icon isInverted icon=\"play-outline\" size=\"l\" class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <button eclButton class=\"ecl-news-ticker__pause\" variant=\"primary\" isIconOnly [class.ecl-u-d-none]=\"!playing\" (click)=\"cancelAutoplay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.PAUSE' | translate }}\n        </span>\n        <ecl-icon isInverted icon=\"pause\" size=\"l\" class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <div class=\"ecl-news-ticker__counter\">\n        <span class=\"ecl-news-ticker__counter--current\"> {{ itemIndex }}</span>\n        {{ 'ecl.common.OF' | translate }}\n        <span class=\"ecl-news-ticker__counter--max\">{{ itemsCount }}</span>\n    </div>\n</div>\n}" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { isAutoplay: [{

package/esm2022/lib/components/ecl-news-ticker/ecl-news-ticker.module.mjs

@@ -8,11 +8,11 @@ import { EclNewsTickerComponent } from './ecl-news-ticker.component';
 import { EclNewsTickerItemComponent } from './ecl-news-ticker-item.component';
 import * as i0 from "@angular/core";
 export class EclNewsTickerComponentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNewsTickerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNewsTickerComponentModule, declarations: [EclNewsTickerComponent, EclNewsTickerItemComponent], imports: [CommonModule, TranslateModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule], exports: [EclNewsTickerComponent, EclNewsTickerItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNewsTickerComponentModule, imports: [CommonModule, TranslateModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNewsTickerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNewsTickerComponentModule, declarations: [EclNewsTickerComponent, EclNewsTickerItemComponent], imports: [CommonModule, TranslateModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule], exports: [EclNewsTickerComponent, EclNewsTickerItemComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNewsTickerComponentModule, imports: [CommonModule, TranslateModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNewsTickerComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNewsTickerComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, TranslateModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule],

package/esm2022/lib/components/ecl-notification/ecl-notification-title.directive.mjs

@@ -5,10 +5,10 @@ export class EclNotificationTitleDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-notification__title')].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNotificationTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclNotificationTitleDirective, selector: "[eclNotificationTitle]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNotificationTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclNotificationTitleDirective, selector: "[eclNotificationTitle]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNotificationTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNotificationTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclNotificationTitle]',

package/esm2022/lib/components/ecl-notification/ecl-notification.component.mjs

@@ -51,10 +51,10 @@ export class EclNotificationComponent extends ECLBaseDirective {
             this.isVisible = false;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNotificationComponent, deps: [{ token: i1.EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.2", type: EclNotificationComponent, selector: "ecl-notification", inputs: { notificationTitle: "notificationTitle", variant: "variant", isVisible: ["isVisible", "isVisible", booleanAttribute], isCloseable: ["isCloseable", "isCloseable", booleanAttribute] }, outputs: { close: "close" }, host: { properties: { "attr.role": "this.role", "class.ecl-u-d-none": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "@if( eclThemeService.isEC$ | async ){\n    <ecl-icon size=\"l\" class=\"ecl-notification__icon\" [icon]=\"icon\" [ariaHidden]=\"false\" role=\"img\">\n        <title>{{ icon | titlecase }}</title>\n    </ecl-icon>\n} @else {\n    <ecl-icon size=\"m\" class=\"ecl-notification__icon\" [icon]=\"icon\" [ariaHidden]=\"false\" role=\"img\">\n        <title>{{ icon | titlecase }}</title>\n    </ecl-icon>\n}\n\n<div class=\"ecl-notification__content\">\n    @if(isCloseable){\n        @if( eclThemeService.isEC$ | async ){\n            <button eclButton variant=\"tertiary\" class=\"ecl-notification__close\" isIconOnly (click)=\"onCloseClick($event)\">\n                <span eclButtonLabel>\n                    {{ 'ecl.common.CLOSE' | translate }}\n                </span>\n                <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n            </button>\n        }  @else {\n            <button  eclButton variant=\"tertiary\" class=\"ecl-notification__close\" (click)=\"onCloseClick($event)\">\n                <span eclButtonLabel>\n                    {{ 'ecl.common.CLOSE' | translate }}\n                </span>\n                <ecl-icon class=\"ecl-button__icon\" icon=\"close-filled\" size=\"s\"></ecl-icon>\n            </button>\n        }\n    }\n\n    <ng-content select=\"[eclNotificationTitle]\"></ng-content>\n    <div class=\"ecl-notification__description\"><ng-content></ng-content></div>\n</div>\n", dependencies: [{ kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i4.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNotificationComponent, deps: [{ token: i1.EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: EclNotificationComponent, selector: "ecl-notification", inputs: { notificationTitle: "notificationTitle", variant: "variant", isVisible: ["isVisible", "isVisible", booleanAttribute], isCloseable: ["isCloseable", "isCloseable", booleanAttribute] }, outputs: { close: "close" }, host: { properties: { "attr.role": "this.role", "class.ecl-u-d-none": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "@if( eclThemeService.isEC$ | async ){\n    <ecl-icon size=\"l\" class=\"ecl-notification__icon\" [icon]=\"icon\" [ariaHidden]=\"false\" role=\"img\">\n        <title>{{ icon | titlecase }}</title>\n    </ecl-icon>\n} @else {\n    <ecl-icon size=\"m\" class=\"ecl-notification__icon\" [icon]=\"icon\" [ariaHidden]=\"false\" role=\"img\">\n        <title>{{ icon | titlecase }}</title>\n    </ecl-icon>\n}\n\n<div class=\"ecl-notification__content\">\n    @if(isCloseable){\n        @if( eclThemeService.isEC$ | async ){\n            <button eclButton variant=\"tertiary\" class=\"ecl-notification__close\" isIconOnly (click)=\"onCloseClick($event)\">\n                <span eclButtonLabel>\n                    {{ 'ecl.common.CLOSE' | translate }}\n                </span>\n                <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n            </button>\n        }  @else {\n            <button  eclButton variant=\"tertiary\" class=\"ecl-notification__close\" (click)=\"onCloseClick($event)\">\n                <span eclButtonLabel>\n                    {{ 'ecl.common.CLOSE' | translate }}\n                </span>\n                <ecl-icon class=\"ecl-button__icon\" icon=\"close-filled\" size=\"s\"></ecl-icon>\n            </button>\n        }\n    }\n\n    <ng-content select=\"[eclNotificationTitle]\"></ng-content>\n    <div class=\"ecl-notification__description\"><ng-content></ng-content></div>\n</div>\n", dependencies: [{ kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i4.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNotificationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNotificationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-notification', template: "@if( eclThemeService.isEC$ | async ){\n    <ecl-icon size=\"l\" class=\"ecl-notification__icon\" [icon]=\"icon\" [ariaHidden]=\"false\" role=\"img\">\n        <title>{{ icon | titlecase }}</title>\n    </ecl-icon>\n} @else {\n    <ecl-icon size=\"m\" class=\"ecl-notification__icon\" [icon]=\"icon\" [ariaHidden]=\"false\" role=\"img\">\n        <title>{{ icon | titlecase }}</title>\n    </ecl-icon>\n}\n\n<div class=\"ecl-notification__content\">\n    @if(isCloseable){\n        @if( eclThemeService.isEC$ | async ){\n            <button eclButton variant=\"tertiary\" class=\"ecl-notification__close\" isIconOnly (click)=\"onCloseClick($event)\">\n                <span eclButtonLabel>\n                    {{ 'ecl.common.CLOSE' | translate }}\n                </span>\n                <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n            </button>\n        }  @else {\n            <button  eclButton variant=\"tertiary\" class=\"ecl-notification__close\" (click)=\"onCloseClick($event)\">\n                <span eclButtonLabel>\n                    {{ 'ecl.common.CLOSE' | translate }}\n                </span>\n                <ecl-icon class=\"ecl-button__icon\" icon=\"close-filled\" size=\"s\"></ecl-icon>\n            </button>\n        }\n    }\n\n    <ng-content select=\"[eclNotificationTitle]\"></ng-content>\n    <div class=\"ecl-notification__description\"><ng-content></ng-content></div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.EclThemeService }], propDecorators: { notificationTitle: [{

package/esm2022/lib/components/ecl-notification/ecl-notification.module.mjs

@@ -8,11 +8,11 @@ import { EclNotificationTitleDirective } from './ecl-notification-title.directiv
 import { EclSiteFooterComponentModule } from '../ecl-site-footer';
 import * as i0 from "@angular/core";
 export class EclNotificationComponentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNotificationComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNotificationComponentModule, declarations: [EclNotificationComponent, EclNotificationTitleDirective], imports: [CommonModule, EclButtonComponentModule, EclIconComponentModule, TranslateModule, EclSiteFooterComponentModule], exports: [EclNotificationComponent, EclNotificationTitleDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNotificationComponentModule, imports: [CommonModule, EclButtonComponentModule, EclIconComponentModule, TranslateModule, EclSiteFooterComponentModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNotificationComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNotificationComponentModule, declarations: [EclNotificationComponent, EclNotificationTitleDirective], imports: [CommonModule, EclButtonComponentModule, EclIconComponentModule, TranslateModule, EclSiteFooterComponentModule], exports: [EclNotificationComponent, EclNotificationTitleDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNotificationComponentModule, imports: [CommonModule, EclButtonComponentModule, EclIconComponentModule, TranslateModule, EclSiteFooterComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclNotificationComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclNotificationComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, EclButtonComponentModule, EclIconComponentModule, TranslateModule, EclSiteFooterComponentModule],

package/esm2022/lib/components/ecl-page-header/ecl-page-header-background.directive.mjs

@@ -6,10 +6,10 @@ export class EclPageHeaderBackgroundPictureDirective extends ECLBaseDirective {
         super(...arguments);
         this.className = 'ecl-picture ecl-page-header__picture-background';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclPageHeaderBackgroundPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclPageHeaderBackgroundPictureDirective, selector: "[eclPageHeaderBackgroundPicture]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclPageHeaderBackgroundPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclPageHeaderBackgroundPictureDirective, selector: "[eclPageHeaderBackgroundPicture]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclPageHeaderBackgroundPictureDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclPageHeaderBackgroundPictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclPageHeaderBackgroundPicture]',
@@ -23,10 +23,10 @@ export class EclPageHeaderBackgroundImageDirective extends ECLBaseDirective {
         super(...arguments);
         this.className = 'ecl-page-header__background';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclPageHeaderBackgroundImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclPageHeaderBackgroundImageDirective, selector: "[eclPageHeaderBackgroundImage]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclPageHeaderBackgroundImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclPageHeaderBackgroundImageDirective, selector: "[eclPageHeaderBackgroundImage]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclPageHeaderBackgroundImageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclPageHeaderBackgroundImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclPageHeaderBackgroundImage]',

package/esm2022/lib/components/ecl-page-header/ecl-page-header-description/ecl-page-header-description.component.mjs

@@ -25,10 +25,10 @@ export class EclPageHeaderDescriptionContainerComponent extends ECLBaseDirective
         }
         return false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclPageHeaderDescriptionContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclPageHeaderDescriptionContainerComponent, selector: "[eclPageHeaderDescriptionContainer]", host: { properties: { "class.ecl-page-header__description-container": "this.className" } }, queries: [{ propertyName: "thumbnail", first: true, predicate: EclPageHeaderDescriptionThumbnailDirective, descendants: true }, { propertyName: "eclDescriptionPicture", first: true, predicate: EclPageHeaderDescriptionPictureDirective, descendants: true }, { propertyName: "eclImage", first: true, predicate: EclPageHeaderDescriptionThumbnailDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"isAddingPictureTagRequired\">\n    <picture eclPageHeaderDescriptionPicture>\n        <ng-content select=\"[eclPageHeaderDescriptionThumbnail]\"></ng-content>\n    </picture>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"content\"> </ng-container>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.EclPageHeaderDescriptionPictureDirective, selector: "[eclPageHeaderDescriptionPicture]" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclPageHeaderDescriptionContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclPageHeaderDescriptionContainerComponent, selector: "[eclPageHeaderDescriptionContainer]", host: { properties: { "class.ecl-page-header__description-container": "this.className" } }, queries: [{ propertyName: "thumbnail", first: true, predicate: EclPageHeaderDescriptionThumbnailDirective, descendants: true }, { propertyName: "eclDescriptionPicture", first: true, predicate: EclPageHeaderDescriptionPictureDirective, descendants: true }, { propertyName: "eclImage", first: true, predicate: EclPageHeaderDescriptionThumbnailDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"isAddingPictureTagRequired\">\n    <picture eclPageHeaderDescriptionPicture>\n        <ng-content select=\"[eclPageHeaderDescriptionThumbnail]\"></ng-content>\n    </picture>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"content\"> </ng-container>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.EclPageHeaderDescriptionPictureDirective, selector: "[eclPageHeaderDescriptionPicture]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclPageHeaderDescriptionContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclPageHeaderDescriptionContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: '[eclPageHeaderDescriptionContainer]', template: "<ng-container *ngIf=\"isAddingPictureTagRequired\">\n    <picture eclPageHeaderDescriptionPicture>\n        <ng-content select=\"[eclPageHeaderDescriptionThumbnail]\"></ng-content>\n    </picture>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"content\"> </ng-container>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { className: [{