@eui/ecl 18.0.0-next.73 → 18.0.0-next.75

package/fesm2022/eui-ecl.mjs

@@ -19,12 +19,13 @@ var ECLBaseDirective = class _ECLBaseDirective {
     this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: _ECLBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.1", type: _ECLBaseDirective, selector: "[eclBase]", inputs: { class: "class", e2eAttr: "e2eAttr", tabindex: ["tabindex", "tabindex", numberAttribute] }, host: { properties: { "attr.data-e2e": "this.e2eAttr", "attr.tabindex": "this.tabindex" } }, ngImport: i0 });
+    this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.1", type: _ECLBaseDirective, isStandalone: true, selector: "[eclBase]", inputs: { class: "class", e2eAttr: "e2eAttr", tabindex: ["tabindex", "tabindex", numberAttribute] }, host: { properties: { "attr.data-e2e": "this.e2eAttr", "attr.tabindex": "this.tabindex" } }, ngImport: i0 });
   }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: ECLBaseDirective, decorators: [{
   type: Directive,
   args: [{
+    standalone: true,
     selector: "[eclBase]"
   }]
 }], propDecorators: { class: [{
@@ -470,16 +471,15 @@ i04.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", n
 }] }, { type: EclThemeService }, { type: EclDefaultLanguageService }] });
 
 // lib/components/ecl-icon/ecl-icon.component.mjs
-import { Component, HostBinding as HostBinding2, Input as Input2, ViewChild, booleanAttribute } from "@angular/core";
+import { Component, HostBinding as HostBinding2, Inject as Inject4, Input as Input2, ViewChild, booleanAttribute, forwardRef } from "@angular/core";
 import { of, switchMap } from "rxjs";
 import * as i05 from "@angular/core";
-import * as i2 from "@angular/common";
-var EclIconComponent = class _EclIconComponent extends ECLBaseDirective {
+import * as i3 from "@angular/common";
+var EclIconComponent = class _EclIconComponent {
   get isColorInverted() {
     return this.color === "inverted";
   }
-  constructor(el, renderer, eclThemeService) {
-    super();
+  constructor(el, renderer, eclThemeService, baseDirective) {
     this.el = el;
     this.renderer = renderer;
     this.eclThemeService = eclThemeService;
@@ -488,6 +488,7 @@ var EclIconComponent = class _EclIconComponent extends ECLBaseDirective {
     this.color = null;
     this.ariaHidden = true;
     this.focusable = false;
+    this.baseDirective = baseDirective;
   }
   ngOnChanges(changes) {
     if (changes["icon"]) {
@@ -520,7 +521,7 @@ var EclIconComponent = class _EclIconComponent extends ECLBaseDirective {
   getClasses() {
     const hostClasses = this.el.nativeElement.classList.toString();
     return {
-      [super.getCssClasses("ecl-icon")]: true,
+      [this.baseDirective.getCssClasses("ecl-icon")]: true,
       [`ecl-icon--${this.size}`]: this.size,
       [`ecl-icon--${this.transform}`]: this.transform,
       [`ecl-icon--${this.color}`]: this.color,
@@ -546,16 +547,23 @@ var EclIconComponent = class _EclIconComponent extends ECLBaseDirective {
     }));
   }
   static {
-    this.ɵfac = i05.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i05, type: _EclIconComponent, deps: [{ token: i05.ElementRef }, { token: i05.Renderer2 }, { token: EclThemeService }], target: i05.ɵɵFactoryTarget.Component });
+    this.ɵfac = i05.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i05, type: _EclIconComponent, deps: [{ token: i05.ElementRef }, { token: i05.Renderer2 }, { token: EclThemeService }, { token: forwardRef(() => ECLBaseDirective) }], target: i05.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i05.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.1", type: _EclIconComponent, selector: "ecl-icon", inputs: { iconSet: "iconSet", icon: "icon", size: "size", color: "color", transform: "transform", ariaLabelledby: "ariaLabelledby", role: "role", ariaHidden: ["ariaHidden", "ariaHidden", booleanAttribute], focusable: ["focusable", "focusable", booleanAttribute] }, host: { properties: { "class.ecl-u-bg-dark": "this.isColorInverted" } }, viewQueries: [{ propertyName: "svgEl", first: true, predicate: ["svg"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i05, template: '<svg\n    #svg\n    [ngClass]="getClasses()"\n    [attr.aria-hidden]="ariaHidden"\n    [attr.aria-labelledby]="ariaLabelledby || null"\n    [attr.role]="role || null"\n    [attr.focusable]="focusable">\n    <use [attr.xlink:href]="iconUrl$ | async"></use>\n    <ng-content></ng-content>\n</svg>\n', dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+    this.ɵcmp = i05.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.1", type: _EclIconComponent, selector: "ecl-icon", inputs: { iconSet: "iconSet", icon: "icon", size: "size", color: "color", transform: "transform", ariaLabelledby: "ariaLabelledby", role: "role", ariaHidden: ["ariaHidden", "ariaHidden", booleanAttribute], focusable: ["focusable", "focusable", booleanAttribute] }, host: { properties: { "class.ecl-u-bg-dark": "this.isColorInverted" } }, viewQueries: [{ propertyName: "svgEl", first: true, predicate: ["svg"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: ECLBaseDirective }], ngImport: i05, template: '<svg\n    #svg\n    [ngClass]="getClasses()"\n    [attr.aria-hidden]="ariaHidden"\n    [attr.aria-labelledby]="ariaLabelledby || null"\n    [attr.role]="role || null"\n    [attr.focusable]="focusable">\n    <use [attr.xlink:href]="iconUrl$ | async"></use>\n    <ng-content></ng-content>\n</svg>\n', dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
   }
 };
 i05.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i05, type: EclIconComponent, decorators: [{
   type: Component,
-  args: [{ selector: "ecl-icon", template: '<svg\n    #svg\n    [ngClass]="getClasses()"\n    [attr.aria-hidden]="ariaHidden"\n    [attr.aria-labelledby]="ariaLabelledby || null"\n    [attr.role]="role || null"\n    [attr.focusable]="focusable">\n    <use [attr.xlink:href]="iconUrl$ | async"></use>\n    <ng-content></ng-content>\n</svg>\n' }]
-}], ctorParameters: () => [{ type: i05.ElementRef }, { type: i05.Renderer2 }, { type: EclThemeService }], propDecorators: { iconSet: [{
+  args: [{ selector: "ecl-icon", hostDirectives: [
+    {
+      directive: ECLBaseDirective
+    }
+  ], template: '<svg\n    #svg\n    [ngClass]="getClasses()"\n    [attr.aria-hidden]="ariaHidden"\n    [attr.aria-labelledby]="ariaLabelledby || null"\n    [attr.role]="role || null"\n    [attr.focusable]="focusable">\n    <use [attr.xlink:href]="iconUrl$ | async"></use>\n    <ng-content></ng-content>\n</svg>\n' }]
+}], ctorParameters: () => [{ type: i05.ElementRef }, { type: i05.Renderer2 }, { type: EclThemeService }, { type: void 0, decorators: [{
+  type: Inject4,
+  args: [forwardRef(() => ECLBaseDirective)]
+}] }], propDecorators: { iconSet: [{
   type: Input2
 }], icon: [{
   type: Input2
@@ -593,12 +601,12 @@ var EclAccordionToggleEvent = class extends EclBaseEvent {
     this.isExpanded = isExpanded;
   }
 };
-var EclAccordionItemComponent = class _EclAccordionItemComponent extends ECLBaseDirective {
+var EclAccordionItemComponent = class _EclAccordionItemComponent {
   get cssClasses() {
-    return [this.getCssClasses("ecl-accordion__item")].join(" ").trim();
+    return [this.baseDirective.getCssClasses("ecl-accordion__item")].join(" ").trim();
   }
-  constructor(cd) {
-    super();
+  constructor(baseDirective, cd) {
+    this.baseDirective = baseDirective;
     this.cd = cd;
     this.isExpanded = false;
     this.toggle = new EventEmitter();
@@ -624,16 +632,20 @@ var EclAccordionItemComponent = class _EclAccordionItemComponent extends ECLBase
     this.cd.detectChanges();
   }
   static {
-    this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i06, type: _EclAccordionItemComponent, deps: [{ token: i06.ChangeDetectorRef }], target: i06.ɵɵFactoryTarget.Component });
+    this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i06, type: _EclAccordionItemComponent, deps: [{ token: ECLBaseDirective }, { token: i06.ChangeDetectorRef }], target: i06.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i06.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: _EclAccordionItemComponent, selector: "ecl-accordion-item", inputs: { label: "label", isExpanded: ["isExpanded", "isExpanded", booleanAttribute2] }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i06, 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        [class.ecl-accordion__toggle--active]="isActive"\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                @if(!isExpanded) {\n                <ecl-icon icon="plus" size="s" class="ecl-accordion__toggle-icon" [attr.aria-hidden]="!isExpanded">\n                </ecl-icon>\n                } @else {\n                <ecl-icon icon="minus" size="s" class="ecl-accordion__toggle-icon" [attr.aria-hidden]="isExpanded">\n                </ecl-icon>\n                }\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: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }], changeDetection: i06.ChangeDetectionStrategy.OnPush });
+    this.ɵcmp = i06.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: _EclAccordionItemComponent, selector: "ecl-accordion-item", inputs: { label: "label", isExpanded: ["isExpanded", "isExpanded", booleanAttribute2] }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: ECLBaseDirective }], ngImport: i06, 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        [class.ecl-accordion__toggle--active]="isActive"\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                @if(!isExpanded) {\n                <ecl-icon icon="plus" size="s" class="ecl-accordion__toggle-icon" [attr.aria-hidden]="!isExpanded">\n                </ecl-icon>\n                } @else {\n                <ecl-icon icon="minus" size="s" class="ecl-accordion__toggle-icon" [attr.aria-hidden]="isExpanded">\n                </ecl-icon>\n                }\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: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }], changeDetection: i06.ChangeDetectionStrategy.OnPush });
   }
 };
 i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i06, type: EclAccordionItemComponent, decorators: [{
   type: Component2,
-  args: [{ selector: "ecl-accordion-item", changeDetection: ChangeDetectionStrategy.OnPush, 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        [class.ecl-accordion__toggle--active]="isActive"\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                @if(!isExpanded) {\n                <ecl-icon icon="plus" size="s" class="ecl-accordion__toggle-icon" [attr.aria-hidden]="!isExpanded">\n                </ecl-icon>\n                } @else {\n                <ecl-icon icon="minus" size="s" class="ecl-accordion__toggle-icon" [attr.aria-hidden]="isExpanded">\n                </ecl-icon>\n                }\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: i06.ChangeDetectorRef }], propDecorators: { cssClasses: [{
+  args: [{ selector: "ecl-accordion-item", changeDetection: ChangeDetectionStrategy.OnPush, 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        [class.ecl-accordion__toggle--active]="isActive"\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                @if(!isExpanded) {\n                <ecl-icon icon="plus" size="s" class="ecl-accordion__toggle-icon" [attr.aria-hidden]="!isExpanded">\n                </ecl-icon>\n                } @else {\n                <ecl-icon icon="minus" size="s" class="ecl-accordion__toggle-icon" [attr.aria-hidden]="isExpanded">\n                </ecl-icon>\n                }\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: ECLBaseDirective }, { type: i06.ChangeDetectorRef }], propDecorators: { cssClasses: [{
   type: HostBinding3,
   args: ["class"]
 }], label: [{
@@ -773,16 +785,16 @@ var KeyCode;
 })(KeyCode || (KeyCode = {}));
 
 // lib/components/ecl-accordion/ecl-accordion.component.mjs
-import { ChangeDetectionStrategy as ChangeDetectionStrategy3, Component as Component3, ContentChildren, HostBinding as HostBinding5, HostListener as HostListener2, forwardRef } from "@angular/core";
+import { ChangeDetectionStrategy as ChangeDetectionStrategy3, Component as Component3, ContentChildren, HostBinding as HostBinding5, HostListener as HostListener2, forwardRef as forwardRef2 } from "@angular/core";
 import { Subject as Subject3 } from "rxjs";
 import { takeUntil as takeUntil3 } from "rxjs/operators";
 import * as i010 from "@angular/core";
-var EclAccordionComponent = class _EclAccordionComponent extends ECLBaseDirective {
+var EclAccordionComponent = class _EclAccordionComponent {
   get cssClasses() {
-    return [this.getCssClasses("ecl-accordion")].join(" ").trim();
+    return [this.baseDirective.getCssClasses("ecl-accordion")].join(" ").trim();
   }
-  constructor(cd, differs) {
-    super();
+  constructor(baseDirective, cd, differs) {
+    this.baseDirective = baseDirective;
     this.cd = cd;
     this.differs = differs;
     this.destroy$ = new Subject3();
@@ -816,27 +828,30 @@ var EclAccordionComponent = class _EclAccordionComponent extends ECLBaseDirectiv
     });
   }
   static {
-    this.ɵfac = i010.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i010, type: _EclAccordionComponent, deps: [{ token: i010.ChangeDetectorRef }, { token: i010.IterableDiffers }], target: i010.ɵɵFactoryTarget.Component });
+    this.ɵfac = i010.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i010, type: _EclAccordionComponent, deps: [{ token: ECLBaseDirective }, { token: i010.ChangeDetectorRef }, { token: i010.IterableDiffers }], target: i010.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i010.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.1", type: _EclAccordionComponent, selector: "ecl-accordion", host: { listeners: { "eclClickOutside": "onClickOutsideAccordion()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "accordionItems", predicate: i010.forwardRef(() => EclAccordionItemComponent) }], usesInheritance: true, hostDirectives: [{ directive: ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i010, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"], changeDetection: i010.ChangeDetectionStrategy.OnPush });
+    this.ɵcmp = i010.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.1", type: _EclAccordionComponent, selector: "ecl-accordion", host: { listeners: { "eclClickOutside": "onClickOutsideAccordion()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "accordionItems", predicate: i010.forwardRef(() => EclAccordionItemComponent) }], hostDirectives: [{ directive: ECLBaseDirective }, { directive: ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i010, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"], changeDetection: i010.ChangeDetectionStrategy.OnPush });
   }
 };
 i010.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i010, type: EclAccordionComponent, decorators: [{
   type: Component3,
   args: [{ selector: "ecl-accordion", changeDetection: ChangeDetectionStrategy3.OnPush, hostDirectives: [
+    {
+      directive: ECLBaseDirective
+    },
     {
       directive: ECLClickOutsideDirective,
       // eslint-disable-next-line @angular-eslint/no-outputs-metadata-property
       outputs: ["eclClickOutside"]
     }
   ], template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
-}], ctorParameters: () => [{ type: i010.ChangeDetectorRef }, { type: i010.IterableDiffers }], propDecorators: { cssClasses: [{
+}], ctorParameters: () => [{ type: ECLBaseDirective }, { type: i010.ChangeDetectorRef }, { type: i010.IterableDiffers }], propDecorators: { cssClasses: [{
   type: HostBinding5,
   args: ["class"]
 }], accordionItems: [{
   type: ContentChildren,
-  args: [forwardRef(() => EclAccordionItemComponent)]
+  args: [forwardRef2(() => EclAccordionItemComponent)]
 }], onClickOutsideAccordion: [{
   type: HostListener2,
   args: ["eclClickOutside"]
@@ -906,7 +921,7 @@ var EclDomEvent = class extends EclBaseEvent {
 };
 
 // lib/components/ecl-button/ecl-button.component.mjs
-import { booleanAttribute as booleanAttribute3, Component as Component4, ContentChildren as ContentChildren2, forwardRef as forwardRef3, HostBinding as HostBinding6, Input as Input5 } from "@angular/core";
+import { booleanAttribute as booleanAttribute3, Component as Component4, ContentChildren as ContentChildren2, forwardRef as forwardRef4, HostBinding as HostBinding6, Input as Input5 } from "@angular/core";
 import * as i013 from "@angular/core";
 import * as i12 from "@angular/common";
 var EclButtonComponent = class _EclButtonComponent extends ECLBaseDirective {
@@ -930,7 +945,7 @@ var EclButtonComponent = class _EclButtonComponent extends ECLBaseDirective {
     if (this.iconComponents) {
       setTimeout(() => {
         this.iconComponents.forEach((icn) => {
-          icn.class = "ecl-button__icon";
+          icn.baseDirective.class = "ecl-button__icon";
         });
       });
     }
@@ -954,7 +969,7 @@ i013.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   type: Input5
 }], iconComponents: [{
   type: ContentChildren2,
-  args: [forwardRef3(() => EclIconComponent)]
+  args: [forwardRef4(() => EclIconComponent)]
 }], cssClasses: [{
   type: HostBinding6,
   args: ["class"]
@@ -1141,7 +1156,7 @@ i019.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] });
 
 // lib/components/ecl-link/ecl-link.directive.mjs
-import { Directive as Directive5, HostBinding as HostBinding10, Input as Input7, forwardRef as forwardRef5, ContentChildren as ContentChildren3, booleanAttribute as booleanAttribute5 } from "@angular/core";
+import { Directive as Directive5, HostBinding as HostBinding10, Input as Input7, forwardRef as forwardRef6, ContentChildren as ContentChildren3, booleanAttribute as booleanAttribute5 } from "@angular/core";
 import * as i020 from "@angular/core";
 var EclLinkDirective = class _EclLinkDirective extends ECLBaseDirective {
   get cssClasses() {
@@ -1163,7 +1178,7 @@ var EclLinkDirective = class _EclLinkDirective extends ECLBaseDirective {
     if (this.eclIconComponents) {
       setTimeout(() => {
         this.eclIconComponents.forEach((icn) => {
-          icn.class = icn.class ? icn.class + " ecl-link__icon" : "ecl-link__icon";
+          icn.baseDirective.class = icn.baseDirective.class ? icn.baseDirective.class + " ecl-link__icon" : "ecl-link__icon";
         });
       });
     }
@@ -1208,7 +1223,7 @@ i020.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   type: Input7
 }], eclIconComponents: [{
   type: ContentChildren3,
-  args: [forwardRef5(() => EclIconComponent)]
+  args: [forwardRef6(() => EclIconComponent)]
 }] } });
 
 // lib/components/ecl-link/ecl-link-label.directive.mjs
@@ -1338,10 +1353,10 @@ i024.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] });
 
 // lib/components/ecl-search-form/ecl-search-form.component.mjs
-import { Component as Component7, EventEmitter as EventEmitter3, forwardRef as forwardRef7, HostBinding as HostBinding13, HostListener as HostListener3, Input as Input9, Output as Output3 } from "@angular/core";
+import { Component as Component7, EventEmitter as EventEmitter3, forwardRef as forwardRef8, HostBinding as HostBinding13, HostListener as HostListener3, Input as Input9, Output as Output3 } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import * as i025 from "@angular/core";
-import * as i22 from "@angular/forms";
+import * as i2 from "@angular/forms";
 import * as i9 from "@ngx-translate/core";
 var EclSearchFormEvent = class extends EclBaseEvent {
   constructor(keyword) {
@@ -1351,7 +1366,7 @@ var EclSearchFormEvent = class extends EclBaseEvent {
 };
 var ECL_SEARCH_FORM_VALUE_ACCESSOR = {
   provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef7(() => EclSearchFormComponent),
+  useExisting: forwardRef8(() => EclSearchFormComponent),
   multi: true
 };
 var noop = () => {
@@ -1417,7 +1432,7 @@ var EclSearchFormComponent = class _EclSearchFormComponent extends ECLBaseDirect
         {{ searchButtonLabel || 'ecl.common.SEARCH' | translate }}
     </span>
 </button>
-`, dependencies: [{ kind: "directive", type: i22.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i22.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclFormGroupComponent, selector: "[eclFormGroup], ecl-form-group" }, { kind: "component", type: EclFormLabelComponent, selector: "[eclFormLabel]", inputs: ["isOptional", "isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: EclTextInputDirective, selector: "input[eclTextInput]", inputs: ["eclSize", "isInvalid"] }, { kind: "directive", type: i22.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclFormGroupComponent, selector: "[eclFormGroup], ecl-form-group" }, { kind: "component", type: EclFormLabelComponent, selector: "[eclFormLabel]", inputs: ["isOptional", "isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: EclTextInputDirective, selector: "input[eclTextInput]", inputs: ["eclSize", "isInvalid"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] });
   }
 };
 i025.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i025, type: EclSearchFormComponent, decorators: [{
@@ -2165,7 +2180,7 @@ i032.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 // lib/components/ecl-site-header/login/ecl-site-header-login.component.mjs
 import { Component as Component13, EventEmitter as EventEmitter6, HostBinding as HostBinding20, Input as Input12, Output as Output6, booleanAttribute as booleanAttribute7 } from "@angular/core";
 import * as i033 from "@angular/core";
-import * as i23 from "@ngx-translate/core";
+import * as i22 from "@ngx-translate/core";
 var EclSiteHeaderLoginEvent = class extends EclBaseEvent {
 };
 var EclSiteHeaderLoginBoxToggleEvent = class extends EclBaseEvent {
@@ -2231,7 +2246,7 @@ var EclSiteHeaderLoginComponent = class _EclSiteHeaderLoginComponent extends ECL
         {{ 'ecl.site-header.LOGIN' | translate }}
     </a>
 }
-`, styles: [".ecl-site-header__login-toggle .ecl-site-header__login-arrow{display:inline-flex}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i23.TranslatePipe, name: "translate" }] });
+`, styles: [".ecl-site-header__login-toggle .ecl-site-header__login-arrow{display:inline-flex}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i22.TranslatePipe, name: "translate" }] });
   }
 };
 i033.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i033, type: EclSiteHeaderLoginComponent, decorators: [{
@@ -2274,7 +2289,7 @@ i033.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] } });
 
 // lib/components/ecl-site-header/search/ecl-site-header-search.component.mjs
-import { Component as Component14, EventEmitter as EventEmitter7, forwardRef as forwardRef8, HostBinding as HostBinding21, Input as Input13, Output as Output7 } from "@angular/core";
+import { Component as Component14, EventEmitter as EventEmitter7, forwardRef as forwardRef9, HostBinding as HostBinding21, Input as Input13, Output as Output7 } from "@angular/core";
 import { NG_VALUE_ACCESSOR as NG_VALUE_ACCESSOR2 } from "@angular/forms";
 import * as i034 from "@angular/core";
 import * as i16 from "@angular/forms";
@@ -2293,7 +2308,7 @@ var EclSiteHeaderSearchToggleEvent = class extends EclBaseEvent {
 };
 var ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR = {
   provide: NG_VALUE_ACCESSOR2,
-  useExisting: forwardRef8(() => EclSiteHeaderSearchComponent),
+  useExisting: forwardRef9(() => EclSiteHeaderSearchComponent),
   multi: true
 };
 var noop2 = () => {
@@ -2409,7 +2424,7 @@ i034.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 import { Component as Component15, ContentChild, EventEmitter as EventEmitter8, HostBinding as HostBinding22, Input as Input14, Output as Output8, ViewChild as ViewChild3 } from "@angular/core";
 import { Subject as Subject6, takeUntil as takeUntil6 } from "rxjs";
 import * as i035 from "@angular/core";
-import * as i24 from "@ngx-translate/core";
+import * as i23 from "@ngx-translate/core";
 import * as i52 from "@angular/common";
 var EclSiteHeaderLogoClickEvent = class extends EclBaseEvent {
 };
@@ -2466,7 +2481,7 @@ var EclSiteHeaderComponent = class _EclSiteHeaderComponent extends ECLBaseDirect
     return this.eclLanguageService.getEULanguageOrFallback(this.languageCode).code;
   }
   static {
-    this.ɵfac = i035.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i035, type: _EclSiteHeaderComponent, deps: [{ token: EclLanguageService }, { token: i24.TranslateService }, { token: EclThemeService }], target: i035.ɵɵFactoryTarget.Component });
+    this.ɵfac = i035.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i035, type: _EclSiteHeaderComponent, deps: [{ token: EclLanguageService }, { token: i23.TranslateService }, { token: EclThemeService }], target: i035.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i035.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: _EclSiteHeaderComponent, selector: "ecl-site-header", inputs: { logoUrl: "logoUrl", siteName: "siteName", languageCode: "languageCode" }, outputs: { logoClick: "logoClick", languageClick: "languageClick" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclLoginComponent", first: true, predicate: EclSiteHeaderLoginComponent, descendants: true }, { propertyName: "eclSearchComponent", first: true, predicate: EclSiteHeaderSearchComponent, descendants: true }, { propertyName: "eclLanguageComponent", first: true, predicate: EclSiteHeaderLanguageComponent, descendants: true }, { propertyName: "eclHeaderLink", first: true, predicate: EclSiteHeaderLinkDirective, descendants: true }], viewQueries: [{ propertyName: "topContainerElement", first: true, predicate: ["topContainer"], descendants: true }], usesInheritance: true, ngImport: i035, template: `<div class="ecl-site-header__background">
@@ -2524,7 +2539,7 @@ var EclSiteHeaderComponent = class _EclSiteHeaderComponent extends ECLBaseDirect
 }
 
 <ng-content select="ecl-menu"></ng-content>
-`, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "pipe", type: i52.AsyncPipe, name: "async" }, { kind: "pipe", type: i24.TranslatePipe, name: "translate" }] });
+`, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "pipe", type: i52.AsyncPipe, name: "async" }, { kind: "pipe", type: i23.TranslatePipe, name: "translate" }] });
   }
 };
 i035.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i035, type: EclSiteHeaderComponent, decorators: [{
@@ -2585,7 +2600,7 @@ i035.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 
 <ng-content select="ecl-menu"></ng-content>
 `, styles: [":host{display:block}\n"] }]
-}], ctorParameters: () => [{ type: EclLanguageService }, { type: i24.TranslateService }, { type: EclThemeService }], propDecorators: { logoUrl: [{
+}], ctorParameters: () => [{ type: EclLanguageService }, { type: i23.TranslateService }, { type: EclThemeService }], propDecorators: { logoUrl: [{
   type: Input14
 }], cssClasses: [{
   type: HostBinding22,
@@ -3107,7 +3122,7 @@ i044.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] } });
 
 // lib/components/ecl-banner/ecl-banner.component.mjs
-import { Component as Component18, ContentChild as ContentChild3, ContentChildren as ContentChildren4, HostBinding as HostBinding30, Input as Input15, ViewChild as ViewChild4, booleanAttribute as booleanAttribute8, forwardRef as forwardRef9 } from "@angular/core";
+import { Component as Component18, ContentChild as ContentChild3, ContentChildren as ContentChildren4, HostBinding as HostBinding30, Input as Input15, ViewChild as ViewChild4, booleanAttribute as booleanAttribute8, forwardRef as forwardRef10 } from "@angular/core";
 import { Subject as Subject8, delay, takeUntil as takeUntil8 } from "rxjs";
 import * as i045 from "@angular/core";
 import * as i17 from "@angular/cdk/layout";
@@ -3239,7 +3254,7 @@ i045.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: [{ transform: booleanAttribute8 }]
 }], eclLinkComponents: [{
   type: ContentChildren4,
-  args: [forwardRef9(() => EclLinkDirective)]
+  args: [forwardRef10(() => EclLinkDirective)]
 }], eclBannerImage: [{
   type: ContentChild3,
   args: [EclBannerImageDirective]
@@ -3415,7 +3430,7 @@ i049.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 import { Component as Component20, EventEmitter as EventEmitter10, HostBinding as HostBinding33, Input as Input17, Output as Output10, ViewEncapsulation as ViewEncapsulation3, booleanAttribute as booleanAttribute9 } from "@angular/core";
 import * as i050 from "@angular/core";
 import * as i19 from "@angular/common";
-import * as i25 from "@angular/router";
+import * as i24 from "@angular/router";
 var EclBreadcrumbSegmentClickEvent = class extends EclBaseEvent {
 };
 var EclBreadcrumbSegmentComponent = class _EclBreadcrumbSegmentComponent extends ECLBaseDirective {
@@ -3451,7 +3466,7 @@ var EclBreadcrumbSegmentComponent = class _EclBreadcrumbSegmentComponent extends
     this.ɵfac = i050.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i050, type: _EclBreadcrumbSegmentComponent, deps: [{ token: i050.ElementRef }, { token: i050.Renderer2 }], target: i050.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i050.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: _EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment", inputs: { routerLink: "routerLink", queryParams: "queryParams", href: "href", queryParamsHandling: "queryParamsHandling", isEllipsis: ["isEllipsis", "isEllipsis", booleanAttribute9], isCurrentPage: ["isCurrentPage", "isCurrentPage", booleanAttribute9], isHidden: ["isHidden", "isHidden", booleanAttribute9] }, outputs: { segmentClick: "segmentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.role": "this.role", "attr.aria-hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i050, template: '@if (!isEllipsis) {\n@if (!isCurrentPage && href) {\n<a eclLink variant="standalone" [isNoVisited]="true" [href]="href" tabindex="0" (click)="onSegmentClick($event)"\n    class="ecl-breadcrumb__link">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</a>\n}\n@if (!isCurrentPage && !href) {\n<a eclLink [routerLink]="routerLink" [queryParams]="queryParams" [queryParamsHandling]="queryParamsHandling"\n    variant="standalone" [isNoVisited]="true" tabindex="0" (click)="onSegmentClick($event)"\n    class="ecl-breadcrumb__link">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</a>\n}\n} @else {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n}\n\n@if (isCurrentPage) {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n} @else {\n<ecl-icon role="presentation" icon="corner-arrow" ariaHidden="true" focusable="false" size="fluid"\n    class="ecl-breadcrumb__icon">\n</ecl-icon>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>', dependencies: [{ kind: "directive", type: i19.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i25.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }], encapsulation: i050.ViewEncapsulation.None });
+    this.ɵcmp = i050.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: _EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment", inputs: { routerLink: "routerLink", queryParams: "queryParams", href: "href", queryParamsHandling: "queryParamsHandling", isEllipsis: ["isEllipsis", "isEllipsis", booleanAttribute9], isCurrentPage: ["isCurrentPage", "isCurrentPage", booleanAttribute9], isHidden: ["isHidden", "isHidden", booleanAttribute9] }, outputs: { segmentClick: "segmentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.role": "this.role", "attr.aria-hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i050, template: '@if (!isEllipsis) {\n@if (!isCurrentPage && href) {\n<a eclLink variant="standalone" [isNoVisited]="true" [href]="href" tabindex="0" (click)="onSegmentClick($event)"\n    class="ecl-breadcrumb__link">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</a>\n}\n@if (!isCurrentPage && !href) {\n<a eclLink [routerLink]="routerLink" [queryParams]="queryParams" [queryParamsHandling]="queryParamsHandling"\n    variant="standalone" [isNoVisited]="true" tabindex="0" (click)="onSegmentClick($event)"\n    class="ecl-breadcrumb__link">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</a>\n}\n} @else {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n}\n\n@if (isCurrentPage) {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n} @else {\n<ecl-icon role="presentation" icon="corner-arrow" ariaHidden="true" focusable="false" size="fluid"\n    class="ecl-breadcrumb__icon">\n</ecl-icon>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>', dependencies: [{ kind: "directive", type: i19.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i24.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }], encapsulation: i050.ViewEncapsulation.None });
   }
 };
 i050.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i050, type: EclBreadcrumbSegmentComponent, decorators: [{
@@ -3491,7 +3506,7 @@ i050.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] } });
 
 // lib/components/ecl-breadcrumb/ecl-breadcrumb.component.mjs
-import { Component as Component21, ContentChildren as ContentChildren5, HostBinding as HostBinding34, Input as Input18, ViewChild as ViewChild5, booleanAttribute as booleanAttribute10, forwardRef as forwardRef11, HostListener as HostListener5 } from "@angular/core";
+import { Component as Component21, ContentChildren as ContentChildren5, HostBinding as HostBinding34, Input as Input18, ViewChild as ViewChild5, booleanAttribute as booleanAttribute10, forwardRef as forwardRef12, HostListener as HostListener5 } from "@angular/core";
 import { Subject as Subject9, takeUntil as takeUntil9 } from "rxjs";
 import * as i051 from "@angular/core";
 import * as i110 from "@ngx-translate/core";
@@ -3659,7 +3674,7 @@ i051.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: ["breadcrumbContainer"]
 }], eclSegments: [{
   type: ContentChildren5,
-  args: [forwardRef11(() => EclBreadcrumbSegmentComponent)]
+  args: [forwardRef12(() => EclBreadcrumbSegmentComponent)]
 }], cssClasses: [{
   type: HostBinding34,
   args: ["class"]
@@ -4271,7 +4286,7 @@ i059.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] } });
 
 // lib/components/ecl-card/ecl-card.component.mjs
-import { Component as Component24, HostBinding as HostBinding40, ContentChild as ContentChild5, forwardRef as forwardRef13 } from "@angular/core";
+import { Component as Component24, HostBinding as HostBinding40, ContentChild as ContentChild5, forwardRef as forwardRef14 } from "@angular/core";
 import * as i060 from "@angular/core";
 var EclCardComponent = class _EclCardComponent extends ECLBaseDirective {
   get cssClasses() {
@@ -4316,13 +4331,13 @@ i060.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: ["class"]
 }], eclContentBlock: [{
   type: ContentChild5,
-  args: [forwardRef13(() => EclContentBlockComponent), { descendants: true }]
+  args: [forwardRef14(() => EclContentBlockComponent), { descendants: true }]
 }], eclContentBlockTitle: [{
   type: ContentChild5,
-  args: [forwardRef13(() => EclContentBlockTitleDirective), { descendants: true }]
+  args: [forwardRef14(() => EclContentBlockTitleDirective), { descendants: true }]
 }], eclCardImage: [{
   type: ContentChild5,
-  args: [forwardRef13(() => EclCardImageDirective), { descendants: true }]
+  args: [forwardRef14(() => EclCardImageDirective), { descendants: true }]
 }] } });
 
 // lib/components/ecl-card/ecl-card.module.mjs
@@ -4360,13 +4375,14 @@ var EclSlideEvent = class extends EclBaseEvent {
 };
 
 // lib/components/ecl-carousel/ecl-carousel-item.component.mjs
-import { Component as Component25, EventEmitter as EventEmitter11, HostBinding as HostBinding41, HostListener as HostListener6, Input as Input20, Output as Output11, booleanAttribute as booleanAttribute11, ContentChild as ContentChild6, forwardRef as forwardRef15 } from "@angular/core";
+import { Component as Component25, EventEmitter as EventEmitter11, HostBinding as HostBinding41, HostListener as HostListener6, Input as Input20, Output as Output11, booleanAttribute as booleanAttribute11, ContentChild as ContentChild6, forwardRef as forwardRef16 } from "@angular/core";
 import * as i062 from "@angular/core";
 var EclCarouselItemComponent = class _EclCarouselItemComponent extends ECLBaseDirective {
   constructor(el) {
     super();
     this.el = el;
     this.role = "group";
+    this.roleDescription = "slide";
     this.isCurrent = false;
     this.slideClick = new EventEmitter11();
   }
@@ -4383,7 +4399,7 @@ var EclCarouselItemComponent = class _EclCarouselItemComponent extends ECLBaseDi
     this.ɵfac = i062.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i062, type: _EclCarouselItemComponent, deps: [{ token: i062.ElementRef }], target: i062.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i062.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.1", type: _EclCarouselItemComponent, selector: "ecl-carousel-item", inputs: { id: "id", isCurrent: ["isCurrent", "isCurrent", booleanAttribute11] }, outputs: { slideClick: "slideClick" }, host: { listeners: { "click": "onSlideClick()" }, properties: { "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "style.width.%": "this.width", "class": "this.cssClasses", "attr.inert": "this.isInert" } }, queries: [{ propertyName: "banner", first: true, predicate: i062.forwardRef(() => EclBannerComponent), descendants: true }], usesInheritance: true, ngImport: i062, template: "<ng-content></ng-content>\n", styles: [":host:before{left:0!important;display:none}\n"] });
+    this.ɵcmp = i062.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.1", type: _EclCarouselItemComponent, selector: "ecl-carousel-item", inputs: { id: "id", isCurrent: ["isCurrent", "isCurrent", booleanAttribute11] }, outputs: { slideClick: "slideClick" }, host: { listeners: { "click": "onSlideClick()" }, properties: { "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "attr.aria-roledescription": "this.roleDescription", "style.width.%": "this.width", "class": "this.cssClasses", "attr.inert": "this.isInert" } }, queries: [{ propertyName: "banner", first: true, predicate: i062.forwardRef(() => EclBannerComponent), descendants: true }], usesInheritance: true, ngImport: i062, template: "<ng-content></ng-content>\n", styles: [":host:before{left:0!important;display:none}\n"] });
   }
 };
 i062.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i062, type: EclCarouselItemComponent, decorators: [{
@@ -4395,6 +4411,9 @@ i062.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }], role: [{
   type: HostBinding41,
   args: ["attr.role"]
+}], roleDescription: [{
+  type: HostBinding41,
+  args: ["attr.aria-roledescription"]
 }], width: [{
   type: HostBinding41,
   args: ["style.width.%"]
@@ -4407,7 +4426,7 @@ i062.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   type: Output11
 }], banner: [{
   type: ContentChild6,
-  args: [forwardRef15(() => EclBannerComponent)]
+  args: [forwardRef16(() => EclBannerComponent)]
 }], cssClasses: [{
   type: HostBinding41,
   args: ["class"]
@@ -4420,7 +4439,7 @@ i062.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] } });
 
 // lib/components/ecl-carousel/ecl-carousel.component.mjs
-import { Component as Component26, ContentChildren as ContentChildren6, EventEmitter as EventEmitter12, HostBinding as HostBinding42, Input as Input21, Output as Output12, ViewChild as ViewChild6, ViewChildren, booleanAttribute as booleanAttribute12, forwardRef as forwardRef17, numberAttribute as numberAttribute2 } from "@angular/core";
+import { Component as Component26, ContentChildren as ContentChildren6, EventEmitter as EventEmitter12, HostBinding as HostBinding42, Input as Input21, Output as Output12, ViewChild as ViewChild6, ViewChildren, booleanAttribute as booleanAttribute12, forwardRef as forwardRef18, numberAttribute as numberAttribute2 } from "@angular/core";
 import { Subject as Subject10, Subscription, fromEvent as fromEvent2, interval, switchMap as switchMap2, takeUntil as takeUntil10 } from "rxjs";
 import * as i063 from "@angular/core";
 import * as i111 from "@angular/cdk/layout";
@@ -4749,35 +4768,11 @@ var EclCarouselComponent = class _EclCarouselComponent extends ECLBaseDirective
         this.stopPlaying();
       }
     }
-    if (this.isFirstButton(index)) {
-      if (this.playButton) {
-        this.focusOnButton(this.playButton);
-      }
-      if (this.pauseButton) {
-        this.focusOnButton(this.pauseButton);
-      }
-    } else {
-      setTimeout(() => {
-        this.goToPreviousSlide(false);
-        const button2 = this.navigationButtons.get(this.getCurrentSlideIndex());
-        this.focusOnButton(button2);
-      }, this.TIMEOUT_INTERVAL);
-    }
-    e.preventDefault();
+    this.onNavigationButtonArrowLeft(e, index);
   }
   onNavigationButtonTab(e, index) {
-    if (this.isLastButton(index)) {
-      if (this.isButtonVisible(this.prevButton)) {
-        this.focusOnButton(this.prevButton);
-        e.preventDefault();
-      }
-    } else {
-      setTimeout(() => {
-        this.goToNextSlide(false);
-        const button = this.navigationButtons.get(this.getCurrentSlideIndex());
-        this.focusOnButton(button);
-      }, this.TIMEOUT_INTERVAL);
-      e.preventDefault();
+    if (!this.isLastButton(index)) {
+      this.onNavigationButtonArrowRight(e);
     }
   }
   onNavigationButtonArrowRight(e) {
@@ -4921,6 +4916,16 @@ var EclCarouselComponent = class _EclCarouselComponent extends ECLBaseDirective
         <ecl-icon icon="corner-arrow" size="m" transform="rotate-270" class="ecl-button__icon"> </ecl-icon>
     </span>
 </button>
+
+<button #nextButton class="ecl-button ecl-button--ghost ecl-carousel__next ecl-button--icon-only" type="button"
+    (click)="onNextSlideClick()">
+    <span class="ecl-button__container">
+        <span class="ecl-button__label">
+            {{ 'ecl.carousel.NEXT-SLIDES' | translate }}
+        </span>
+        <ecl-icon icon="corner-arrow" size="m" transform="rotate-90" class="ecl-button__icon"> </ecl-icon>
+    </span>
+</button>
 }
 
 @if(hasControls()){
@@ -4937,7 +4942,6 @@ var EclCarouselComponent = class _EclCarouselComponent extends ECLBaseDirective
                     <ecl-icon icon="play-outline" size="m" class="ecl-button__icon ecl-carousel__icon-default">
                     </ecl-icon>
                 </span>
-
             </button>
 
             <button #pauseButton class="ecl-button ecl-button--ghost ecl-carousel__pause ecl-button--icon-only"
@@ -4964,20 +4968,7 @@ var EclCarouselComponent = class _EclCarouselComponent extends ECLBaseDirective
         </div>
     </div>
 </div>
-}
-@if(isButtonNavVisible) {
-<button #nextButton class="ecl-button ecl-button--ghost ecl-carousel__next ecl-button--icon-only" type="button"
-    (click)="onNextSlideClick()">
-    <span class="ecl-button__container">
-        <span class="ecl-button__label">
-            {{ 'ecl.carousel.NEXT-SLIDES' | translate }}
-        </span>
-        <ecl-icon icon="corner-arrow" size="m" transform="rotate-90" class="ecl-button__icon"> </ecl-icon>
-    </span>
-
-</button>
-}
-`, styles: [":host{display:block}.ecl-carousel__container{width:100%}.ecl-carousel__slides{transition-duration:.4s}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclCarouselItemComponent, selector: "ecl-carousel-item", inputs: ["id", "isCurrent"], outputs: ["slideClick"] }, { kind: "pipe", type: i53.TranslatePipe, name: "translate" }] });
+}`, styles: [":host{display:block}.ecl-carousel__container{width:100%}.ecl-carousel__slides{transition-duration:.4s}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclCarouselItemComponent, selector: "ecl-carousel-item", inputs: ["id", "isCurrent"], outputs: ["slideClick"] }, { kind: "pipe", type: i53.TranslatePipe, name: "translate" }] });
   }
 };
 i063.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i063, type: EclCarouselComponent, decorators: [{
@@ -5009,6 +5000,16 @@ i063.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
         <ecl-icon icon="corner-arrow" size="m" transform="rotate-270" class="ecl-button__icon"> </ecl-icon>
     </span>
 </button>
+
+<button #nextButton class="ecl-button ecl-button--ghost ecl-carousel__next ecl-button--icon-only" type="button"
+    (click)="onNextSlideClick()">
+    <span class="ecl-button__container">
+        <span class="ecl-button__label">
+            {{ 'ecl.carousel.NEXT-SLIDES' | translate }}
+        </span>
+        <ecl-icon icon="corner-arrow" size="m" transform="rotate-90" class="ecl-button__icon"> </ecl-icon>
+    </span>
+</button>
 }
 
 @if(hasControls()){
@@ -5025,7 +5026,6 @@ i063.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
                     <ecl-icon icon="play-outline" size="m" class="ecl-button__icon ecl-carousel__icon-default">
                     </ecl-icon>
                 </span>
-
             </button>
 
             <button #pauseButton class="ecl-button ecl-button--ghost ecl-carousel__pause ecl-button--icon-only"
@@ -5052,20 +5052,7 @@ i063.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
         </div>
     </div>
 </div>
-}
-@if(isButtonNavVisible) {
-<button #nextButton class="ecl-button ecl-button--ghost ecl-carousel__next ecl-button--icon-only" type="button"
-    (click)="onNextSlideClick()">
-    <span class="ecl-button__container">
-        <span class="ecl-button__label">
-            {{ 'ecl.carousel.NEXT-SLIDES' | translate }}
-        </span>
-        <ecl-icon icon="corner-arrow" size="m" transform="rotate-90" class="ecl-button__icon"> </ecl-icon>
-    </span>
-
-</button>
-}
-`, styles: [":host{display:block}.ecl-carousel__container{width:100%}.ecl-carousel__slides{transition-duration:.4s}\n"] }]
+}`, styles: [":host{display:block}.ecl-carousel__container{width:100%}.ecl-carousel__slides{transition-duration:.4s}\n"] }]
 }], ctorParameters: () => [{ type: i111.BreakpointObserver }, { type: i063.ChangeDetectorRef }, { type: i063.Renderer2 }, { type: EclRtlService }], propDecorators: { ariaLabel: [{
   type: HostBinding42,
   args: ["attr.aria-label"]
@@ -5088,7 +5075,7 @@ i063.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: ["carouselContainer"]
 }], slides: [{
   type: ContentChildren6,
-  args: [forwardRef17(() => EclCarouselItemComponent)]
+  args: [forwardRef18(() => EclCarouselItemComponent)]
 }], navigationButtons: [{
   type: ViewChildren,
   args: ["currButton"]
@@ -5153,7 +5140,7 @@ var EclCategoryFilterItemSelectEvent = class extends EclBaseEvent {
 };
 
 // lib/components/ecl-category-filter/ecl-category-filter-list/ecl-category-filter-list.component.mjs
-import { Component as Component27, ContentChildren as ContentChildren7, forwardRef as forwardRef19, HostBinding as HostBinding43 } from "@angular/core";
+import { Component as Component27, ContentChildren as ContentChildren7, forwardRef as forwardRef20, HostBinding as HostBinding43 } from "@angular/core";
 import * as i065 from "@angular/core";
 var EclCategoryFilterListComponent = class _EclCategoryFilterListComponent extends ECLBaseDirective {
   constructor() {
@@ -5200,13 +5187,13 @@ i065.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: ["attr.aria-controls"]
 }], eclCategoryFilterItems: [{
   type: ContentChildren7,
-  args: [forwardRef19(() => EclCategoryFilterItemComponent)]
+  args: [forwardRef20(() => EclCategoryFilterItemComponent)]
 }] } });
 
 // lib/components/ecl-category-filter/ecl-category-filter-list/ecl-category-filter-item.component.mjs
-import { Component as Component28, ContentChild as ContentChild7, EventEmitter as EventEmitter13, forwardRef as forwardRef21, HostBinding as HostBinding44, Input as Input22, Output as Output13 } from "@angular/core";
+import { Component as Component28, ContentChild as ContentChild7, EventEmitter as EventEmitter13, forwardRef as forwardRef22, HostBinding as HostBinding44, Input as Input22, Output as Output13 } from "@angular/core";
 import * as i066 from "@angular/core";
-import * as i26 from "@angular/common";
+import * as i25 from "@angular/common";
 var EclCategoryFilterItemComponent = class _EclCategoryFilterItemComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -5265,7 +5252,7 @@ var EclCategoryFilterItemComponent = class _EclCategoryFilterItemComponent exten
     this.ɵfac = i066.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i066, type: _EclCategoryFilterItemComponent, deps: null, target: i066.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i066.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: _EclCategoryFilterItemComponent, selector: "ecl-category-filter-item", inputs: { href: "href", id: "id" }, outputs: { itemSelect: "itemSelect" }, host: { properties: { "class.ecl-category-filter__list-item": "this.className", "attr.role": "this.role", "class.ecl-category-filter__list-item--open": "this.isAriaExpanded" } }, queries: [{ propertyName: "eclCategoryList", first: true, predicate: i066.forwardRef(() => EclCategoryFilterListComponent), descendants: true }], usesInheritance: true, ngImport: i066, template: '@if (hasChildren) {\n    <button\n        class="ecl-category-filter__item {{ levelClass }}"\n        [class.ecl-category-filter__item--has-children]="hasChildren"\n        [class.ecl-category-filter__item--current]="isCurrent"\n        [attr.aria-current]="isCurrent ? true : null"\n        [attr.aria-expanded] = "isExpanded"\n        [attr.aria-controls]="id"\n        (click)="onItemClick($event)">\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n        @if(isChildItemWithChildren) {\n            <ecl-icon icon="solid-arrow" size="xs" transform="rotate-90" class="ecl-category-filter__item-icon"> </ecl-icon>\n        }\n        @if(isRootItemWithChildren) {\n            <ecl-icon icon="corner-arrow" size="xs" transform="rotate-180" class="ecl-category-filter__item-icon"> </ecl-icon>\n        }\n    </button>\n} @else {\n    <a\n        [href]="href"\n        class="ecl-category-filter__item {{ levelClass }}"\n        [class.ecl-category-filter__item--has-children]="hasChildren"\n        (click)="onItemClick($event)">\n        @if(isChildItemWithChildren) {\n            <ecl-icon icon="solid-arrow" size="xs" transform="rotate-90" class="ecl-category-filter__item-icon"> </ecl-icon>\n        }\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n        @if(isRootItemWithChildren) {\n            <ecl-icon icon="corner-arrow" size="xs" transform="rotate-180" class="ecl-category-filter__item-icon"> </ecl-icon>\n        }\n    </a>\n}\n<ng-content select="ecl-category-filter-list"></ng-content>\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: i26.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    this.ɵcmp = i066.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: _EclCategoryFilterItemComponent, selector: "ecl-category-filter-item", inputs: { href: "href", id: "id" }, outputs: { itemSelect: "itemSelect" }, host: { properties: { "class.ecl-category-filter__list-item": "this.className", "attr.role": "this.role", "class.ecl-category-filter__list-item--open": "this.isAriaExpanded" } }, queries: [{ propertyName: "eclCategoryList", first: true, predicate: i066.forwardRef(() => EclCategoryFilterListComponent), descendants: true }], usesInheritance: true, ngImport: i066, template: '@if (hasChildren) {\n    <button\n        class="ecl-category-filter__item {{ levelClass }}"\n        [class.ecl-category-filter__item--has-children]="hasChildren"\n        [class.ecl-category-filter__item--current]="isCurrent"\n        [attr.aria-current]="isCurrent ? true : null"\n        [attr.aria-expanded] = "isExpanded"\n        [attr.aria-controls]="id"\n        (click)="onItemClick($event)">\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n        @if(isChildItemWithChildren) {\n            <ecl-icon icon="solid-arrow" size="xs" transform="rotate-90" class="ecl-category-filter__item-icon"> </ecl-icon>\n        }\n        @if(isRootItemWithChildren) {\n            <ecl-icon icon="corner-arrow" size="xs" transform="rotate-180" class="ecl-category-filter__item-icon"> </ecl-icon>\n        }\n    </button>\n} @else {\n    <a\n        [href]="href"\n        class="ecl-category-filter__item {{ levelClass }}"\n        [class.ecl-category-filter__item--has-children]="hasChildren"\n        (click)="onItemClick($event)">\n        @if(isChildItemWithChildren) {\n            <ecl-icon icon="solid-arrow" size="xs" transform="rotate-90" class="ecl-category-filter__item-icon"> </ecl-icon>\n        }\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n        @if(isRootItemWithChildren) {\n            <ecl-icon icon="corner-arrow" size="xs" transform="rotate-180" class="ecl-category-filter__item-icon"> </ecl-icon>\n        }\n    </a>\n}\n<ng-content select="ecl-category-filter-list"></ng-content>\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: i25.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
   }
 };
 i066.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i066, type: EclCategoryFilterItemComponent, decorators: [{
@@ -5288,11 +5275,11 @@ i066.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: ["class.ecl-category-filter__list-item--open"]
 }], eclCategoryList: [{
   type: ContentChild7,
-  args: [forwardRef21(() => EclCategoryFilterListComponent)]
+  args: [forwardRef22(() => EclCategoryFilterListComponent)]
 }] } });
 
 // lib/components/ecl-category-filter/ecl-category-filter/ecl-category-filter.component.mjs
-import { Component as Component29, ContentChild as ContentChild8, ContentChildren as ContentChildren8, forwardRef as forwardRef23, HostBinding as HostBinding45, Input as Input23 } from "@angular/core";
+import { Component as Component29, ContentChild as ContentChild8, ContentChildren as ContentChildren8, forwardRef as forwardRef24, HostBinding as HostBinding45, Input as Input23 } from "@angular/core";
 import { Subject as Subject11, takeUntil as takeUntil11 } from "rxjs";
 import { v4 as uuidgen2 } from "uuid";
 import * as i067 from "@angular/core";
@@ -5404,10 +5391,10 @@ i067.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: ["aria-label"]
 }], eclCategoryList: [{
   type: ContentChild8,
-  args: [forwardRef23(() => EclCategoryFilterListComponent)]
+  args: [forwardRef24(() => EclCategoryFilterListComponent)]
 }], eclCategoryFilterItemsAll: [{
   type: ContentChildren8,
-  args: [forwardRef23(() => EclCategoryFilterItemComponent), { descendants: true }]
+  args: [forwardRef24(() => EclCategoryFilterItemComponent), { descendants: true }]
 }] } });
 
 // lib/components/ecl-category-filter/ecl-category-filter.module.mjs
@@ -5537,7 +5524,7 @@ i071.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] } });
 
 // lib/components/ecl-checkbox/ecl-checkbox.directive.mjs
-import { ContentChild as ContentChild9, Directive as Directive19, HostBinding as HostBinding49, Input as Input27, booleanAttribute as booleanAttribute16, forwardRef as forwardRef25 } from "@angular/core";
+import { ContentChild as ContentChild9, Directive as Directive19, HostBinding as HostBinding49, Input as Input27, booleanAttribute as booleanAttribute16, forwardRef as forwardRef26 } from "@angular/core";
 import * as i072 from "@angular/core";
 var EclCheckboxDirective = class _EclCheckboxDirective extends ECLBaseDirective {
   constructor() {
@@ -5597,23 +5584,23 @@ i072.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: ["class.ecl-checkbox--single"]
 }], eclCheckboxLabelComponent: [{
   type: ContentChild9,
-  args: [forwardRef25(() => EclCheckboxLabelComponent)]
+  args: [forwardRef26(() => EclCheckboxLabelComponent)]
 }], eclCheckboxHelpComponent: [{
   type: ContentChild9,
-  args: [forwardRef25(() => EclCheckboxHelpComponent)]
+  args: [forwardRef26(() => EclCheckboxHelpComponent)]
 }], eclFormLabelDirective: [{
   type: ContentChild9,
-  args: [forwardRef25(() => EclFormLabelComponent)]
+  args: [forwardRef26(() => EclFormLabelComponent)]
 }], eclHelpBlockDirective: [{
   type: ContentChild9,
-  args: [forwardRef25(() => EclHelpBlockDirective)]
+  args: [forwardRef26(() => EclHelpBlockDirective)]
 }], cssClasses: [{
   type: HostBinding49,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-checkbox/ecl-checkbox-input.directive.mjs
-import { Directive as Directive20, forwardRef as forwardRef27, HostBinding as HostBinding50, Inject as Inject4, Optional as Optional4, Self as Self2 } from "@angular/core";
+import { Directive as Directive20, forwardRef as forwardRef28, HostBinding as HostBinding50, Inject as Inject5, Optional as Optional4, Self as Self2 } from "@angular/core";
 import * as i073 from "@angular/core";
 import * as i112 from "@angular/forms";
 var EclCheckboxInputDirective = class _EclCheckboxInputDirective extends ECLBaseDirective {
@@ -5634,7 +5621,7 @@ var EclCheckboxInputDirective = class _EclCheckboxInputDirective extends ECLBase
     }
   }
   static {
-    this.ɵfac = i073.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i073, type: _EclCheckboxInputDirective, deps: [{ token: forwardRef27(() => EclCheckboxDirective) }, { token: i112.NgControl, optional: true, self: true }], target: i073.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i073.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i073, type: _EclCheckboxInputDirective, deps: [{ token: forwardRef28(() => EclCheckboxDirective) }, { token: i112.NgControl, optional: true, self: true }], target: i073.ɵɵFactoryTarget.Directive });
   }
   static {
     this.ɵdir = i073.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.1", type: _EclCheckboxInputDirective, selector: "input[eclCheckboxInput]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i073 });
@@ -5646,8 +5633,8 @@ i073.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
     selector: "input[eclCheckboxInput]"
   }]
 }], ctorParameters: () => [{ type: EclCheckboxDirective, decorators: [{
-  type: Inject4,
-  args: [forwardRef27(() => EclCheckboxDirective)]
+  type: Inject5,
+  args: [forwardRef28(() => EclCheckboxDirective)]
 }] }, { type: i112.NgControl, decorators: [{
   type: Optional4
 }, {
@@ -5748,7 +5735,7 @@ import { formatDate } from "@angular/common";
 import { Component as Component32, Input as Input29, HostBinding as HostBinding52 } from "@angular/core";
 import * as i076 from "@angular/core";
 import * as i113 from "@ngx-translate/core";
-import * as i27 from "@angular/common";
+import * as i26 from "@angular/common";
 var EclDateBlockComponent = class _EclDateBlockComponent extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-date-block"), this.variant ? `ecl-date-block--${this.variant}` : ""].join(" ").trim();
@@ -5788,7 +5775,7 @@ var EclDateBlockComponent = class _EclDateBlockComponent extends ECLBaseDirectiv
     {{ month || (date | date: 'MMM' : '' : locale) }}
 </abbr>
 <span class="ecl-date-block__year" aria-hidden="true">{{ year || (date | date: 'yyyy') }}</span>
-`, dependencies: [{ kind: "pipe", type: i27.DatePipe, name: "date" }] });
+`, dependencies: [{ kind: "pipe", type: i26.DatePipe, name: "date" }] });
   }
 };
 i076.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i076, type: EclDateBlockComponent, decorators: [{
@@ -5825,7 +5812,7 @@ i076.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] } });
 
 // lib/components/ecl-content-item/ecl-content-item.component.mjs
-import { Component as Component33, ContentChild as ContentChild10, forwardRef as forwardRef28, HostBinding as HostBinding53 } from "@angular/core";
+import { Component as Component33, ContentChild as ContentChild10, forwardRef as forwardRef29, HostBinding as HostBinding53 } from "@angular/core";
 import * as i077 from "@angular/core";
 var EclContentItemComponent = class _EclContentItemComponent extends ECLBaseDirective {
   get cssClasses() {
@@ -5877,19 +5864,19 @@ i077.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: [{ selector: "ecl-content-item", template: "<ng-content></ng-content>\n" }]
 }], ctorParameters: () => [{ type: i077.Renderer2 }], propDecorators: { eclContentBlock: [{
   type: ContentChild10,
-  args: [forwardRef28(() => EclContentBlockComponent)]
+  args: [forwardRef29(() => EclContentBlockComponent)]
 }], eclDateBlock: [{
   type: ContentChild10,
-  args: [forwardRef28(() => EclDateBlockComponent)]
+  args: [forwardRef29(() => EclDateBlockComponent)]
 }], eclContentItemPicture: [{
   type: ContentChild10,
-  args: [forwardRef28(() => EclContentItemPictureDirective)]
+  args: [forwardRef29(() => EclContentItemPictureDirective)]
 }], eclContentBlockTitle: [{
   type: ContentChild10,
-  args: [forwardRef28(() => EclContentBlockTitleDirective), { descendants: true }]
+  args: [forwardRef29(() => EclContentBlockTitleDirective), { descendants: true }]
 }], eclContentItemImage: [{
   type: ContentChild10,
-  args: [forwardRef28(() => EclContentItemImageDirective), { descendants: true }]
+  args: [forwardRef29(() => EclContentItemImageDirective), { descendants: true }]
 }], role: [{
   type: HostBinding53,
   args: ["attr.role"]
@@ -5973,7 +5960,7 @@ i079.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] });
 
 // lib/components/ecl-date-picker/ecl-date-picker.directive.mjs
-import { Directive as Directive22, HostBinding as HostBinding54, Input as Input30, Output as Output14, EventEmitter as EventEmitter14, forwardRef as forwardRef30, HostListener as HostListener7, Inject as Inject5, PLATFORM_ID } from "@angular/core";
+import { Directive as Directive22, HostBinding as HostBinding54, Input as Input30, Output as Output14, EventEmitter as EventEmitter14, forwardRef as forwardRef31, HostListener as HostListener7, Inject as Inject6, PLATFORM_ID } from "@angular/core";
 import { NG_VALUE_ACCESSOR as NG_VALUE_ACCESSOR3 } from "@angular/forms";
 import { isPlatformBrowser } from "@angular/common";
 import Pikaday from "pikaday";
@@ -5995,7 +5982,7 @@ var EclDatePickerDatePickedEvent = class extends EclBaseEvent {
 };
 var ECL_DATE_PICKER_VALUE_ACCESSOR = {
   provide: NG_VALUE_ACCESSOR3,
-  useExisting: forwardRef30(() => EclDatePickerDirective),
+  useExisting: forwardRef31(() => EclDatePickerDirective),
   multi: true
 };
 var noop3 = () => {
@@ -6136,7 +6123,7 @@ var EclDatePickerDirective = class _EclDatePickerDirective extends ECLBaseDirect
     const eclIconComponent = this.viewContainerRef.createComponent(EclIconComponent);
     eclIconComponent.instance.size = "xs";
     eclIconComponent.instance.icon = "calendar";
-    eclIconComponent.instance.class = "ecl-datepicker__icon";
+    eclIconComponent.instance.baseDirective.class = "ecl-datepicker__icon";
     return eclIconComponent.location.nativeElement;
   }
   static {
@@ -6153,7 +6140,7 @@ i080.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
     providers: [ECL_DATE_PICKER_VALUE_ACCESSOR]
   }]
 }], ctorParameters: () => [{ type: i080.ElementRef }, { type: i080.ViewContainerRef }, { type: i114.TranslateService }, { type: EclLanguageService }, { type: i080.Renderer2 }, { type: void 0, decorators: [{
-  type: Inject5,
+  type: Inject6,
   args: [PLATFORM_ID]
 }] }], propDecorators: { yearRange: [{
   type: Input30
@@ -6360,7 +6347,7 @@ var EclFactFiguresItemComponent = class _EclFactFiguresItemComponent extends ECL
   ngAfterContentInit() {
     if (this.eclIconComponents) {
       this.eclIconComponents.forEach((eclIcon) => {
-        eclIcon.class = [eclIcon.class, "ecl-fact-figures__icon"].join(" ");
+        eclIcon.baseDirective.class = [eclIcon.baseDirective.class, "ecl-fact-figures__icon"].join(" ");
       });
     }
   }
@@ -6953,7 +6940,7 @@ i0101.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] });
 
 // lib/components/ecl-feedback-message/ecl-feedback-message.directive.mjs
-import { ContentChildren as ContentChildren10, Directive as Directive27, forwardRef as forwardRef31, HostBinding as HostBinding71 } from "@angular/core";
+import { ContentChildren as ContentChildren10, Directive as Directive27, forwardRef as forwardRef32, HostBinding as HostBinding71 } from "@angular/core";
 import * as i0102 from "@angular/core";
 var EclFeedbackMessageDirective = class _EclFeedbackMessageDirective extends ECLBaseDirective {
   get cssClasses() {
@@ -6963,7 +6950,7 @@ var EclFeedbackMessageDirective = class _EclFeedbackMessageDirective extends ECL
     if (this.eclIconComponents) {
       setTimeout(() => {
         this.eclIconComponents.forEach((icn) => {
-          icn.class = [icn.class, "ecl-feedback-message__icon"].join(" ");
+          icn.baseDirective.class = [icn.baseDirective.class, "ecl-feedback-message__icon"].join(" ");
         });
       });
     }
@@ -6985,7 +6972,7 @@ i0102.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: ["class"]
 }], eclIconComponents: [{
   type: ContentChildren10,
-  args: [forwardRef31(() => EclIconComponent)]
+  args: [forwardRef32(() => EclIconComponent)]
 }] } });
 
 // lib/components/ecl-feedback-message/ecl-feedback-message.module.mjs
@@ -7018,7 +7005,7 @@ import { takeUntil as takeUntil13 } from "rxjs/operators";
 import { Subject as Subject13 } from "rxjs";
 import * as i0104 from "@angular/core";
 import * as i115 from "@angular/forms";
-import * as i28 from "@ngx-translate/core";
+import * as i27 from "@ngx-translate/core";
 var EclFileUploadFileSelectedEvent = class extends EclBaseEvent {
   constructor(files) {
     super();
@@ -7177,7 +7164,7 @@ var EclFileUploadDirective = class _EclFileUploadDirective extends ECLBaseDirect
     return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
   }
   static {
-    this.ɵfac = i0104.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0104, type: _EclFileUploadDirective, deps: [{ token: i115.NgControl, optional: true, self: true }, { token: i0104.ElementRef }, { token: i28.TranslateService }, { token: i0104.Renderer2 }], target: i0104.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0104.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0104, type: _EclFileUploadDirective, deps: [{ token: i115.NgControl, optional: true, self: true }, { token: i0104.ElementRef }, { token: i27.TranslateService }, { token: i0104.Renderer2 }], target: i0104.ɵɵFactoryTarget.Directive });
   }
   static {
     this.ɵdir = i0104.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.1", type: _EclFileUploadDirective, selector: "[eclFileUpload]", inputs: { variant: "variant", isInvalid: "isInvalid", id: "id", disabled: ["disabled", "disabled", booleanAttribute20], multiple: ["multiple", "multiple", booleanAttribute20] }, outputs: { filesSelected: "filesSelected" }, host: { listeners: { "click": "onClick($event)", "change": "onFilesSelected($event)" }, properties: { "attr.id": "this.id", "attr.disabled": "this.disabled", "attr.multiple": "this.multiple", "attr.type": "this.type", "class": "this.cssClasses", "class.ecl-file-upload--invalid": "this.invalidState" } }, usesInheritance: true, ngImport: i0104 });
@@ -7192,7 +7179,7 @@ i0104.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   type: Optional5
 }, {
   type: Self3
-}] }, { type: i0104.ElementRef }, { type: i28.TranslateService }, { type: i0104.Renderer2 }], propDecorators: { variant: [{
+}] }, { type: i0104.ElementRef }, { type: i27.TranslateService }, { type: i0104.Renderer2 }], propDecorators: { variant: [{
   type: Input38
 }], isInvalid: [{
   type: Input38
@@ -7634,7 +7621,7 @@ i0112.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 // lib/components/ecl-gallery/ecl-gallery-footer.component.mjs
 import { Component as Component50, EventEmitter as EventEmitter18, Output as Output18 } from "@angular/core";
 import * as i0113 from "@angular/core";
-import * as i29 from "@ngx-translate/core";
+import * as i28 from "@ngx-translate/core";
 var EclGalleryToggleItemsEvent = class extends EclBaseEvent {
   constructor(expandAll) {
     super();
@@ -7695,7 +7682,7 @@ var EclGalleryFooterComponent = class _EclGalleryFooterComponent {
         <ng-content></ng-content>
     </div>
 </div>
-`, dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "pipe", type: i29.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "pipe", type: i28.TranslatePipe, name: "translate" }] });
   }
 };
 i0113.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0113, type: EclGalleryFooterComponent, decorators: [{
@@ -8847,7 +8834,7 @@ i0123.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] });
 
 // lib/components/ecl-list-illustration/ecl-list-illustration-item.component.mjs
-import { Component as Component56, ContentChildren as ContentChildren14, forwardRef as forwardRef33, HostBinding as HostBinding84, Input as Input49 } from "@angular/core";
+import { Component as Component56, ContentChildren as ContentChildren14, forwardRef as forwardRef34, HostBinding as HostBinding84, Input as Input49 } from "@angular/core";
 import * as i0124 from "@angular/core";
 var EclListIllustrationItemComponent = class _EclListIllustrationItemComponent extends ECLBaseDirective {
   constructor() {
@@ -8881,7 +8868,7 @@ i0124.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: ["class.ecl-list-illustration__item"]
 }], eclIllustrationIcons: [{
   type: ContentChildren14,
-  args: [forwardRef33(() => EclListIllustrationIconDirective)]
+  args: [forwardRef34(() => EclListIllustrationIconDirective)]
 }] } });
 
 // lib/components/ecl-list-illustration/ecl-list-illustration-icon.directive.mjs
@@ -9105,7 +9092,7 @@ i0129.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 // lib/components/ecl-list/ecl-description-list-definition/ecl-description-list-definition.component.mjs
 import { Component as Component58, ContentChildren as ContentChildren15, HostBinding as HostBinding89, Input as Input52 } from "@angular/core";
 import * as i0130 from "@angular/core";
-import * as i210 from "@ngx-translate/core";
+import * as i29 from "@ngx-translate/core";
 var EclDescriptionListDefinitionComponent = class _EclDescriptionListDefinitionComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -9166,7 +9153,7 @@ var EclDescriptionListDefinitionComponent = class _EclDescriptionListDefinitionC
 <a eclLink class="ecl-description-list__see_more" href (click)="onShowAllItems($event)">{{
     'ecl.list.SEE-ALL-ITEMS' | translate
     }}</a>
-}`, dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "pipe", type: i210.TranslatePipe, name: "translate" }] });
+}`, dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "pipe", type: i29.TranslatePipe, name: "translate" }] });
   }
 };
 i0130.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0130, type: EclDescriptionListDefinitionComponent, decorators: [{
@@ -9461,10 +9448,10 @@ var EclMenuItemParentFocusEvent = class {
 
 // lib/components/ecl-menu/ecl-menu-mega/ecl-menu-mega-item.component.mjs
 import { ENTER } from "@angular/cdk/keycodes";
-import { Component as Component59, ContentChildren as ContentChildren17, EventEmitter as EventEmitter23, HostBinding as HostBinding91, HostListener as HostListener11, Input as Input54, Output as Output23, ViewChild as ViewChild8, booleanAttribute as booleanAttribute29, forwardRef as forwardRef35 } from "@angular/core";
+import { Component as Component59, ContentChildren as ContentChildren17, EventEmitter as EventEmitter23, HostBinding as HostBinding91, HostListener as HostListener11, Input as Input54, Output as Output23, ViewChild as ViewChild8, booleanAttribute as booleanAttribute29, forwardRef as forwardRef36 } from "@angular/core";
 import * as i0133 from "@angular/core";
 import * as i119 from "@angular/common";
-import * as i211 from "@angular/router";
+import * as i210 from "@angular/router";
 var EclMenuMegaItemComponent = class _EclMenuMegaItemComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -9508,7 +9495,7 @@ var EclMenuMegaItemComponent = class _EclMenuMegaItemComponent extends ECLBaseDi
     if (this.iconComponents) {
       setTimeout(() => {
         this.iconComponents.forEach((icn) => {
-          icn.class = "ecl-menu__sublink-icon";
+          icn.baseDirective.class = "ecl-menu__sublink-icon";
         });
       });
     }
@@ -9524,12 +9511,12 @@ var EclMenuMegaItemComponent = class _EclMenuMegaItemComponent extends ECLBaseDi
     this.ɵfac = i0133.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0133, type: _EclMenuMegaItemComponent, deps: null, target: i0133.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0133.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: _EclMenuMegaItemComponent, selector: "ecl-menu-mega-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: ["isCurrent", "isCurrent", booleanAttribute29], isSeeAll: ["isSeeAll", "isSeeAll", booleanAttribute29] }, outputs: { menuItemSelect: "menuItemSelect", menuItemKeydown: "menuItemKeydown" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.ecl-menu__subitem": "this.cmpClass", "attr.role": "this.role", "class.ecl-menu__subitem--current": "this.isCurrent", "class.ecl-menu__see-all": "this.isSeeAll" } }, queries: [{ propertyName: "iconComponents", predicate: i0133.forwardRef(() => EclIconComponent) }, { propertyName: "links", predicate: i0133.forwardRef(() => EclLinkDirective) }], viewQueries: [{ propertyName: "megaMenuLink", first: true, predicate: ["megaMenuLink"], descendants: true }], usesInheritance: true, ngImport: i0133, template: '@if (!isSeeAll) {\n    @if (href) {\n        <a  #megaMenuLink\n            [href]="href"\n            [target]="target"\n            class="ecl-menu__sublink"\n            [class.ecl-menu__sublink--current]="isCurrent"\n            (click)="onItemClick($event)"\n            (keydown)="onKeydown($event)">\n            {{ label }}\n            <ng-container *ngTemplateOutlet="content"></ng-container>\n        </a>\n    } @else {\n        <a  #megaMenuLink\n            tabindex="0"\n            [routerLink]="routerLink"\n            [queryParams]="queryParams"\n            [queryParamsHandling]="queryParamsHandling"\n            class="ecl-menu__sublink"\n            [class.ecl-menu__sublink--current]="isCurrent"\n            (click)="onItemClick($event)"\n            (keydown)="onKeydown($event)">\n            {{ label }}\n            <ng-container *ngTemplateOutlet="content"></ng-container>\n        </a>\n    }\n} @else {\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i119.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i211.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    this.ɵcmp = i0133.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: _EclMenuMegaItemComponent, selector: "ecl-menu-mega-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: ["isCurrent", "isCurrent", booleanAttribute29], isSeeAll: ["isSeeAll", "isSeeAll", booleanAttribute29] }, outputs: { menuItemSelect: "menuItemSelect", menuItemKeydown: "menuItemKeydown" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.ecl-menu__subitem": "this.cmpClass", "attr.role": "this.role", "class.ecl-menu__subitem--current": "this.isCurrent", "class.ecl-menu__see-all": "this.isSeeAll" } }, queries: [{ propertyName: "iconComponents", predicate: i0133.forwardRef(() => EclIconComponent) }, { propertyName: "links", predicate: i0133.forwardRef(() => EclLinkDirective) }], viewQueries: [{ propertyName: "megaMenuLink", first: true, predicate: ["megaMenuLink"], descendants: true }], usesInheritance: true, ngImport: i0133, template: '@if (!isSeeAll) {\n    @if (href) {\n        <a  #megaMenuLink\n            [href]="href"\n            [target]="target"\n            class="ecl-link ecl-link--standalone ecl-menu__sublink"\n            [class.ecl-menu__sublink--current]="isCurrent"\n            (click)="onItemClick($event)"\n            (keydown)="onKeydown($event)">\n            {{ label }}\n            <ng-container *ngTemplateOutlet="content"></ng-container>\n        </a>\n    } @else {\n        <a  #megaMenuLink\n            tabindex="0"\n            [routerLink]="routerLink"\n            [queryParams]="queryParams"\n            [queryParamsHandling]="queryParamsHandling"\n            class="ecl-link ecl-link--standalone ecl-menu__sublink"\n            [class.ecl-menu__sublink--current]="isCurrent"\n            (click)="onItemClick($event)"\n            (keydown)="onKeydown($event)">\n            {{ label }}\n            <ng-container *ngTemplateOutlet="content"></ng-container>\n        </a>\n    }\n} @else {\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i119.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i210.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
   }
 };
 i0133.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0133, type: EclMenuMegaItemComponent, decorators: [{
   type: Component59,
-  args: [{ selector: "ecl-menu-mega-item", template: '@if (!isSeeAll) {\n    @if (href) {\n        <a  #megaMenuLink\n            [href]="href"\n            [target]="target"\n            class="ecl-menu__sublink"\n            [class.ecl-menu__sublink--current]="isCurrent"\n            (click)="onItemClick($event)"\n            (keydown)="onKeydown($event)">\n            {{ label }}\n            <ng-container *ngTemplateOutlet="content"></ng-container>\n        </a>\n    } @else {\n        <a  #megaMenuLink\n            tabindex="0"\n            [routerLink]="routerLink"\n            [queryParams]="queryParams"\n            [queryParamsHandling]="queryParamsHandling"\n            class="ecl-menu__sublink"\n            [class.ecl-menu__sublink--current]="isCurrent"\n            (click)="onItemClick($event)"\n            (keydown)="onKeydown($event)">\n            {{ label }}\n            <ng-container *ngTemplateOutlet="content"></ng-container>\n        </a>\n    }\n} @else {\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', styles: [":host{display:list-item}\n"] }]
+  args: [{ selector: "ecl-menu-mega-item", template: '@if (!isSeeAll) {\n    @if (href) {\n        <a  #megaMenuLink\n            [href]="href"\n            [target]="target"\n            class="ecl-link ecl-link--standalone ecl-menu__sublink"\n            [class.ecl-menu__sublink--current]="isCurrent"\n            (click)="onItemClick($event)"\n            (keydown)="onKeydown($event)">\n            {{ label }}\n            <ng-container *ngTemplateOutlet="content"></ng-container>\n        </a>\n    } @else {\n        <a  #megaMenuLink\n            tabindex="0"\n            [routerLink]="routerLink"\n            [queryParams]="queryParams"\n            [queryParamsHandling]="queryParamsHandling"\n            class="ecl-link ecl-link--standalone ecl-menu__sublink"\n            [class.ecl-menu__sublink--current]="isCurrent"\n            (click)="onItemClick($event)"\n            (keydown)="onKeydown($event)">\n            {{ label }}\n            <ng-container *ngTemplateOutlet="content"></ng-container>\n        </a>\n    }\n} @else {\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', styles: [":host{display:list-item}\n"] }]
 }], propDecorators: { id: [{
   type: Input54
 }], label: [{
@@ -9564,10 +9551,10 @@ i0133.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: ["class.ecl-menu__see-all"]
 }], iconComponents: [{
   type: ContentChildren17,
-  args: [forwardRef35(() => EclIconComponent)]
+  args: [forwardRef36(() => EclIconComponent)]
 }], links: [{
   type: ContentChildren17,
-  args: [forwardRef35(() => EclLinkDirective)]
+  args: [forwardRef36(() => EclLinkDirective)]
 }], megaMenuLink: [{
   type: ViewChild8,
   args: ["megaMenuLink"]
@@ -9725,7 +9712,7 @@ i0134.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] } });
 
 // lib/components/ecl-menu/ecl-menu/ecl-menu-item.component.mjs
-import { Component as Component61, ContentChild as ContentChild18, EventEmitter as EventEmitter25, forwardRef as forwardRef37, HostBinding as HostBinding93, HostListener as HostListener12, Input as Input55, Output as Output25, ViewChild as ViewChild9, ViewEncapsulation as ViewEncapsulation7 } from "@angular/core";
+import { Component as Component61, ContentChild as ContentChild18, EventEmitter as EventEmitter25, forwardRef as forwardRef38, HostBinding as HostBinding93, HostListener as HostListener12, Input as Input55, Output as Output25, ViewChild as ViewChild9, ViewEncapsulation as ViewEncapsulation7 } from "@angular/core";
 import { Subject as Subject18 } from "rxjs";
 import { takeUntil as takeUntil18 } from "rxjs/operators";
 import { Breakpoints as Breakpoints2 } from "@angular/cdk/layout";
@@ -9754,11 +9741,10 @@ var EclMenuItemComponent = class _EclMenuItemComponent extends ECLBaseDirective
   get children() {
     return this.hasChildren ? this.submenu.eclMenuMegaItems.toArray() : [];
   }
-  constructor(el, renderer, arf, cdkBreakpointObserver) {
+  constructor(el, renderer, cdkBreakpointObserver) {
     super();
     this.el = el;
     this.renderer = renderer;
-    this.arf = arf;
     this.cdkBreakpointObserver = cdkBreakpointObserver;
     this.routerLink = null;
     this.queryParams = null;
@@ -10003,7 +9989,7 @@ var EclMenuItemComponent = class _EclMenuItemComponent extends ECLBaseDirective
     });
   }
   static {
-    this.ɵfac = i0135.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0135, type: _EclMenuItemComponent, deps: [{ token: i0135.ElementRef }, { token: i0135.Renderer2 }, { token: i0135.ApplicationRef }, { token: i120.BreakpointObserver }], target: i0135.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0135.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0135, type: _EclMenuItemComponent, deps: [{ token: i0135.ElementRef }, { token: i0135.Renderer2 }, { token: i120.BreakpointObserver }], target: i0135.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i0135.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: _EclMenuItemComponent, selector: "ecl-menu-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: "isCurrent" }, outputs: { menuItemSelect: "menuItemSelect", menuItemCaret: "menuItemCaret", menuItemHover: "menuItemHover", menuItemHoverOut: "menuItemHoverOut", menuMegaItemSelect: "menuMegaItemSelect", menuItemFocus: "menuItemFocus", menuItemKeydown: "menuItemKeydown" }, host: { listeners: { "mouseenter": "onItemMouseEnter($event)", "mouseleave": "onItemMouseLeave($event)" }, properties: { "attr.role": "this.role", "class": "this.cssClasses", "class.ecl-menu__item--has-children": "this.hasEclChildrenDataAttribute", "attr.aria-haspopup": "this.hasEclChildrenDataAttribute", "attr.aria-expanded": "this.isAriaExpanded" } }, queries: [{ propertyName: "submenu", first: true, predicate: i0135.forwardRef(() => EclMenuMegaComponent), descendants: true }], viewQueries: [{ propertyName: "menuLink", first: true, predicate: ["menuLink"], descendants: true }, { propertyName: "menuButton", first: true, predicate: EclButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0135, template: `@if (href) {
@@ -10142,7 +10128,7 @@ i0135.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
     <ng-content></ng-content>
 </ng-template>
 ` }]
-}], ctorParameters: () => [{ type: i0135.ElementRef }, { type: i0135.Renderer2 }, { type: i0135.ApplicationRef }, { type: i120.BreakpointObserver }], propDecorators: { id: [{
+}], ctorParameters: () => [{ type: i0135.ElementRef }, { type: i0135.Renderer2 }, { type: i120.BreakpointObserver }], propDecorators: { id: [{
   type: Input55
 }], label: [{
   type: Input55
@@ -10166,7 +10152,7 @@ i0135.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: ["class"]
 }], submenu: [{
   type: ContentChild18,
-  args: [forwardRef37(() => EclMenuMegaComponent)]
+  args: [forwardRef38(() => EclMenuMegaComponent)]
 }], menuLink: [{
   type: ViewChild9,
   args: ["menuLink"]
@@ -11034,7 +11020,7 @@ i0139.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 
 // lib/components/ecl-modal/ecl-modal.component.mjs
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
-import { Component as Component64, ContentChild as ContentChild19, ContentChildren as ContentChildren20, EventEmitter as EventEmitter29, forwardRef as forwardRef39, HostBinding as HostBinding96, HostListener as HostListener15, Input as Input59, Output as Output29 } from "@angular/core";
+import { Component as Component64, ContentChild as ContentChild19, ContentChildren as ContentChildren20, EventEmitter as EventEmitter29, forwardRef as forwardRef40, HostBinding as HostBinding96, HostListener as HostListener15, Input as Input59, Output as Output29 } from "@angular/core";
 import { Subject as Subject20, takeUntil as takeUntil20 } from "rxjs";
 import * as i0140 from "@angular/core";
 var EclModalOpenEvent = class extends EclBaseEvent {
@@ -11134,10 +11120,10 @@ i0140.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   type: Output29
 }], eclModalHeader: [{
   type: ContentChild19,
-  args: [forwardRef39(() => EclModalHeaderComponent)]
+  args: [forwardRef40(() => EclModalHeaderComponent)]
 }], eclModalCloseComponents: [{
   type: ContentChildren20,
-  args: [forwardRef39(() => EclModalCloseDirective), { descendants: true }]
+  args: [forwardRef40(() => EclModalCloseDirective), { descendants: true }]
 }], isModalOpened: [{
   type: HostBinding96,
   args: ["attr.open"]
@@ -11183,7 +11169,7 @@ i0141.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] } });
 
 // lib/components/ecl-modal/ecl-modal-footer.component.mjs
-import { Component as Component66, ContentChildren as ContentChildren21, forwardRef as forwardRef41, HostBinding as HostBinding98 } from "@angular/core";
+import { Component as Component66, ContentChildren as ContentChildren21, forwardRef as forwardRef42, HostBinding as HostBinding98 } from "@angular/core";
 import * as i0142 from "@angular/core";
 var EclModalFooterComponent = class _EclModalFooterComponent extends ECLBaseDirective {
   get cssClasses() {
@@ -11210,7 +11196,7 @@ i0142.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: [{ selector: "[eclModalFooter]", template: '<div class="ecl-modal__footer-content">\n    <ng-content></ng-content>\n</div>\n' }]
 }], propDecorators: { buttonComponents: [{
   type: ContentChildren21,
-  args: [forwardRef41(() => EclButtonComponent), { descendants: true }]
+  args: [forwardRef42(() => EclButtonComponent), { descendants: true }]
 }], cssClasses: [{
   type: HostBinding98,
   args: ["class"]
@@ -11684,7 +11670,7 @@ i0149.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] } });
 
 // lib/components/ecl-multiselect/ecl-multiselect-dropdown/ecl-multiselect-dropdown.component.mjs
-import { booleanAttribute as booleanAttribute33, Component as Component70, ElementRef as ElementRef24, EventEmitter as EventEmitter32, forwardRef as forwardRef43, HostBinding as HostBinding103, HostListener as HostListener17, Input as Input65, Output as Output32, ViewChild as ViewChild13, ViewChildren as ViewChildren2 } from "@angular/core";
+import { booleanAttribute as booleanAttribute33, Component as Component70, ElementRef as ElementRef24, EventEmitter as EventEmitter32, forwardRef as forwardRef44, HostBinding as HostBinding103, HostListener as HostListener17, Input as Input65, Output as Output32, ViewChild as ViewChild13, ViewChildren as ViewChildren2 } from "@angular/core";
 import { NG_VALUE_ACCESSOR as NG_VALUE_ACCESSOR4 } from "@angular/forms";
 import { Subject as Subject22 } from "rxjs";
 import { v4 as uuidgen4 } from "uuid";
@@ -12072,7 +12058,7 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
     this.ɵcmp = i0150.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: _EclMultiselectDropdownComponent, selector: "div[eclMultiselectDropdown]", inputs: { isInvalid: ["isInvalid", "isInvalid", booleanAttribute33], mainInputPlaceholder: "mainInputPlaceholder", searchFieldPlaceholder: "searchFieldPlaceholder", eclSize: "eclSize", disabled: ["disabled", "disabled", booleanAttribute33] }, 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_ACCESSOR4,
-        useExisting: forwardRef43(() => _EclMultiselectDropdownComponent),
+        useExisting: forwardRef44(() => _EclMultiselectDropdownComponent),
         multi: true
       }
     ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "eclMultiselectInput", first: true, predicate: ["eclMultiselectInput"], descendants: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true }, { propertyName: "selectAll", first: true, predicate: ["selectAll"], descendants: true }, { propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, read: ElementRef24 }, { propertyName: "clearAllBtn", first: true, predicate: ["clearAllBtn"], descendants: true, read: ElementRef24 }, { propertyName: "multiOptionComponents", predicate: EclMultiselectOptionComponent, descendants: true }], usesInheritance: true, ngImport: i0150, template: `<div eclMultiselectInput #eclMultiselectInput [inputPlaceholder]="mainInputPlaceholder" [selectedItems]="selectedItems"
@@ -12173,7 +12159,7 @@ i0150.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: [{ selector: "div[eclMultiselectDropdown]", providers: [
     {
       provide: NG_VALUE_ACCESSOR4,
-      useExisting: forwardRef43(() => EclMultiselectDropdownComponent),
+      useExisting: forwardRef44(() => EclMultiselectDropdownComponent),
       multi: true
     }
   ], template: `<div eclMultiselectInput #eclMultiselectInput [inputPlaceholder]="mainInputPlaceholder" [selectedItems]="selectedItems"
@@ -12383,7 +12369,7 @@ i0151.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 
 // lib/components/ecl-multiselect/ecl-multiselect.component.mjs
 import { coerceBooleanProperty as coerceBooleanProperty3 } from "@angular/cdk/coercion";
-import { booleanAttribute as booleanAttribute34, Component as Component71, ContentChildren as ContentChildren23, EventEmitter as EventEmitter33, forwardRef as forwardRef44, HostBinding as HostBinding105, Input as Input67, Output as Output33, ViewEncapsulation as ViewEncapsulation9 } from "@angular/core";
+import { booleanAttribute as booleanAttribute34, Component as Component71, ContentChildren as ContentChildren23, EventEmitter as EventEmitter33, forwardRef as forwardRef45, HostBinding as HostBinding105, Input as Input67, Output as Output33, ViewEncapsulation as ViewEncapsulation9 } from "@angular/core";
 import { NG_VALUE_ACCESSOR as NG_VALUE_ACCESSOR5, NgControl as NgControl4 } from "@angular/forms";
 import { Subject as Subject24, takeUntil as takeUntil21 } from "rxjs";
 import * as i0152 from "@angular/core";
@@ -12521,7 +12507,7 @@ var EclMultiselectComponent = class _EclMultiselectComponent extends ECLBaseDire
     this.ɵcmp = i0152.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.1", type: _EclMultiselectComponent, selector: "select[eclMultiselect]", inputs: { ariaDescribedby: "ariaDescribedby", ariaLabeledby: "ariaLabeledby", id: "id", toggleLabel: "toggleLabel", isInvalid: ["isInvalid", "isInvalid", booleanAttribute34], disabled: "disabled", eclPlaceholder: "eclPlaceholder", eclSize: "eclSize" }, outputs: { eclChange: "eclChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [
       {
         provide: NG_VALUE_ACCESSOR5,
-        useExisting: forwardRef44(() => _EclMultiselectComponent),
+        useExisting: forwardRef45(() => _EclMultiselectComponent),
         multi: true
       }
     ], queries: [{ propertyName: "eclOptionItems", predicate: i0152.forwardRef(() => EclMultiselectOptionDirective) }], usesInheritance: true, ngImport: i0152, template: "<ng-content></ng-content>\n", encapsulation: i0152.ViewEncapsulation.None });
@@ -12532,13 +12518,13 @@ i0152.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: [{ selector: "select[eclMultiselect]", encapsulation: ViewEncapsulation9.None, providers: [
     {
       provide: NG_VALUE_ACCESSOR5,
-      useExisting: forwardRef44(() => EclMultiselectComponent),
+      useExisting: forwardRef45(() => EclMultiselectComponent),
       multi: true
     }
   ], template: "<ng-content></ng-content>\n" }]
 }], ctorParameters: () => [{ type: i0152.Injector }, { type: i0152.ElementRef }, { type: i0152.ViewContainerRef }, { type: i0152.IterableDiffers }, { type: i0152.Renderer2 }], propDecorators: { eclOptionItems: [{
   type: ContentChildren23,
-  args: [forwardRef44(() => EclMultiselectOptionDirective)]
+  args: [forwardRef45(() => EclMultiselectOptionDirective)]
 }], ariaDescribedby: [{
   type: Input67
 }], ariaLabeledby: [{
@@ -12630,7 +12616,7 @@ i0153.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] });
 
 // lib/components/ecl-navigation-list/ecl-navigation-list-item.component.mjs
-import { Component as Component72, ContentChild as ContentChild20, forwardRef as forwardRef46, HostBinding as HostBinding106, Input as Input68 } from "@angular/core";
+import { Component as Component72, ContentChild as ContentChild20, forwardRef as forwardRef47, HostBinding as HostBinding106, Input as Input68 } from "@angular/core";
 import * as i0154 from "@angular/core";
 var EclNavigationListItemComponent = class _EclNavigationListItemComponent extends ECLBaseDirective {
   constructor() {
@@ -12671,11 +12657,11 @@ i0154.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   type: Input68
 }], eclContentBlock: [{
   type: ContentChild20,
-  args: [forwardRef46(() => EclContentBlockComponent)]
+  args: [forwardRef47(() => EclContentBlockComponent)]
 }] } });
 
 // lib/components/ecl-navigation-list/ecl-navigation-list.component.mjs
-import { Component as Component73, ContentChildren as ContentChildren24, HostBinding as HostBinding107, Input as Input69, booleanAttribute as booleanAttribute35, forwardRef as forwardRef48, numberAttribute as numberAttribute7 } from "@angular/core";
+import { Component as Component73, ContentChildren as ContentChildren24, HostBinding as HostBinding107, Input as Input69, booleanAttribute as booleanAttribute35, forwardRef as forwardRef49, numberAttribute as numberAttribute7 } from "@angular/core";
 import * as i0155 from "@angular/core";
 var EclNavigationListComponent = class _EclNavigationListComponent extends ECLBaseDirective {
   constructor() {
@@ -12715,7 +12701,7 @@ i0155.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: [{ transform: booleanAttribute35 }]
 }], listItems: [{
   type: ContentChildren24,
-  args: [forwardRef48(() => EclNavigationListItemComponent)]
+  args: [forwardRef49(() => EclNavigationListItemComponent)]
 }] } });
 
 // lib/components/ecl-navigation-list/ecl-navigation-list-picture.directive.mjs
@@ -13839,7 +13825,7 @@ i0169.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 import { Component as Component78, Input as Input76, booleanAttribute as booleanAttribute41 } from "@angular/core";
 import * as i0170 from "@angular/core";
 import * as i123 from "@ngx-translate/core";
-import * as i3 from "@angular/common";
+import * as i32 from "@angular/common";
 var EclSiteFooterFixedContentECComponent = class _EclSiteFooterFixedContentECComponent extends ECLBaseDirective {
   constructor(translateService, eclLanguageService) {
     super();
@@ -14294,7 +14280,7 @@ var EclSiteFooterFixedContentECComponent = class _EclSiteFooterFixedContentECCom
         </div>
     </div>
 }
-`, dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclSiteFooterSectionDirective, selector: "[eclSiteFooterSection]", inputs: ["isCondensed", "isSiteInfo", "isSplitList", "hasSeparator"] }, { kind: "directive", type: EclSiteFooterListDirective, selector: "[eclSiteFooterList]", inputs: ["isInline", "isColumns"] }, { kind: "directive", type: EclSiteFooterLinkDirective, selector: "[eclSiteFooterLink]" }, { kind: "directive", type: EclSiteFooterColumnDirective, selector: "[eclSiteFooterColumn]" }, { kind: "directive", type: EclSiteFooterListItemDirective, selector: "[eclSiteFooterListItem]" }, { kind: "directive", type: EclSiteFooterRowDirective, selector: "[eclSiteFooterRow]" }, { kind: "directive", type: EclSiteFooterLogoLinkDirective, selector: "[eclSiteFooterLogoLink]" }, { kind: "directive", type: EclSiteFooterPictureDirective, selector: "picture[eclSiteFooterPicture]" }, { kind: "directive", type: EclSiteFooterLogoImageDirective, selector: "img[eclSiteFooterLogoImage]" }, { kind: "pipe", type: i123.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "directive", type: i32.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclSiteFooterSectionDirective, selector: "[eclSiteFooterSection]", inputs: ["isCondensed", "isSiteInfo", "isSplitList", "hasSeparator"] }, { kind: "directive", type: EclSiteFooterListDirective, selector: "[eclSiteFooterList]", inputs: ["isInline", "isColumns"] }, { kind: "directive", type: EclSiteFooterLinkDirective, selector: "[eclSiteFooterLink]" }, { kind: "directive", type: EclSiteFooterColumnDirective, selector: "[eclSiteFooterColumn]" }, { kind: "directive", type: EclSiteFooterListItemDirective, selector: "[eclSiteFooterListItem]" }, { kind: "directive", type: EclSiteFooterRowDirective, selector: "[eclSiteFooterRow]" }, { kind: "directive", type: EclSiteFooterLogoLinkDirective, selector: "[eclSiteFooterLogoLink]" }, { kind: "directive", type: EclSiteFooterPictureDirective, selector: "picture[eclSiteFooterPicture]" }, { kind: "directive", type: EclSiteFooterLogoImageDirective, selector: "img[eclSiteFooterLogoImage]" }, { kind: "pipe", type: i123.TranslatePipe, name: "translate" }] });
   }
 };
 i0170.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0170, type: EclSiteFooterFixedContentECComponent, decorators: [{
@@ -14758,7 +14744,7 @@ i0170.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 import { Component as Component79, Input as Input77, booleanAttribute as booleanAttribute42 } from "@angular/core";
 import * as i0171 from "@angular/core";
 import * as i124 from "@ngx-translate/core";
-import * as i32 from "@angular/common";
+import * as i33 from "@angular/common";
 var EclSiteFooterFixedContentEUComponent = class _EclSiteFooterFixedContentEUComponent extends ECLBaseDirective {
   constructor(translateService, eclLanguageService) {
     super();
@@ -15432,7 +15418,7 @@ var EclSiteFooterFixedContentEUComponent = class _EclSiteFooterFixedContentEUCom
         </div>
     </div>
 }
-`, dependencies: [{ kind: "directive", type: i32.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclSiteFooterSectionDirective, selector: "[eclSiteFooterSection]", inputs: ["isCondensed", "isSiteInfo", "isSplitList", "hasSeparator"] }, { kind: "directive", type: EclSiteFooterTitleDirective, selector: "[eclSiteFooterTitle]", inputs: ["isSeparator"] }, { kind: "directive", type: EclSiteFooterListDirective, selector: "[eclSiteFooterList]", inputs: ["isInline", "isColumns"] }, { kind: "directive", type: EclSiteFooterLinkDirective, selector: "[eclSiteFooterLink]" }, { kind: "directive", type: EclSiteFooterColumnDirective, selector: "[eclSiteFooterColumn]" }, { kind: "directive", type: EclSiteFooterListItemDirective, selector: "[eclSiteFooterListItem]" }, { kind: "directive", type: EclSiteFooterRowDirective, selector: "[eclSiteFooterRow]" }, { kind: "directive", type: EclSiteFooterLogoLinkDirective, selector: "[eclSiteFooterLogoLink]" }, { kind: "directive", type: EclSiteFooterPictureDirective, selector: "picture[eclSiteFooterPicture]" }, { kind: "directive", type: EclSiteFooterLogoImageDirective, selector: "img[eclSiteFooterLogoImage]" }, { kind: "pipe", type: i124.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "directive", type: i33.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclSiteFooterSectionDirective, selector: "[eclSiteFooterSection]", inputs: ["isCondensed", "isSiteInfo", "isSplitList", "hasSeparator"] }, { kind: "directive", type: EclSiteFooterTitleDirective, selector: "[eclSiteFooterTitle]", inputs: ["isSeparator"] }, { kind: "directive", type: EclSiteFooterListDirective, selector: "[eclSiteFooterList]", inputs: ["isInline", "isColumns"] }, { kind: "directive", type: EclSiteFooterLinkDirective, selector: "[eclSiteFooterLink]" }, { kind: "directive", type: EclSiteFooterColumnDirective, selector: "[eclSiteFooterColumn]" }, { kind: "directive", type: EclSiteFooterListItemDirective, selector: "[eclSiteFooterListItem]" }, { kind: "directive", type: EclSiteFooterRowDirective, selector: "[eclSiteFooterRow]" }, { kind: "directive", type: EclSiteFooterLogoLinkDirective, selector: "[eclSiteFooterLogoLink]" }, { kind: "directive", type: EclSiteFooterPictureDirective, selector: "picture[eclSiteFooterPicture]" }, { kind: "directive", type: EclSiteFooterLogoImageDirective, selector: "img[eclSiteFooterLogoImage]" }, { kind: "pipe", type: i124.TranslatePipe, name: "translate" }] });
   }
 };
 i0171.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0171, type: EclSiteFooterFixedContentEUComponent, decorators: [{
@@ -16617,7 +16603,7 @@ i0181.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 // lib/components/ecl-pagination/ecl-pagination-item.component.mjs
 import { Component as Component82, EventEmitter as EventEmitter37, HostBinding as HostBinding127, Input as Input81, Output as Output37, ViewEncapsulation as ViewEncapsulation11, booleanAttribute as booleanAttribute45 } from "@angular/core";
 import * as i0182 from "@angular/core";
-import * as i212 from "@angular/router";
+import * as i211 from "@angular/router";
 import * as i63 from "@ngx-translate/core";
 var EclPaginationItemClickEvent = class extends EclBaseEvent {
 };
@@ -16736,7 +16722,7 @@ var EclPaginationItemComponent = class _EclPaginationItemComponent extends ECLBa
             }
     </span>
 }
-`, dependencies: [{ kind: "directive", type: i212.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i63.TranslatePipe, name: "translate" }], encapsulation: i0182.ViewEncapsulation.None });
+`, dependencies: [{ kind: "directive", type: i211.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i63.TranslatePipe, name: "translate" }], encapsulation: i0182.ViewEncapsulation.None });
   }
 };
 i0182.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0182, type: EclPaginationItemComponent, decorators: [{
@@ -17358,7 +17344,7 @@ i0190.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] } });
 
 // lib/components/ecl-radio/ecl-radio.directive.mjs
-import { booleanAttribute as booleanAttribute48, ContentChild as ContentChild24, Directive as Directive55, forwardRef as forwardRef50, HostBinding as HostBinding134, Input as Input85 } from "@angular/core";
+import { booleanAttribute as booleanAttribute48, ContentChild as ContentChild24, Directive as Directive55, forwardRef as forwardRef51, HostBinding as HostBinding134, Input as Input85 } from "@angular/core";
 import * as i0191 from "@angular/core";
 var EclRadioDirective = class _EclRadioDirective extends ECLBaseDirective {
   constructor() {
@@ -17410,17 +17396,17 @@ i0191.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: ["class.ecl-radio--invalid"]
 }], eclRadioLabelComponent: [{
   type: ContentChild24,
-  args: [forwardRef50(() => EclRadioLabelComponent)]
+  args: [forwardRef51(() => EclRadioLabelComponent)]
 }], eclRadioHelpComponent: [{
   type: ContentChild24,
-  args: [forwardRef50(() => EclRadioHelpComponent)]
+  args: [forwardRef51(() => EclRadioHelpComponent)]
 }], cssClasses: [{
   type: HostBinding134,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-radio/ecl-radio-input.directive.mjs
-import { Directive as Directive56, HostBinding as HostBinding135, Optional as Optional6, Self as Self4, Inject as Inject6, forwardRef as forwardRef52 } from "@angular/core";
+import { Directive as Directive56, HostBinding as HostBinding135, Optional as Optional6, Self as Self4, Inject as Inject7, forwardRef as forwardRef53 } from "@angular/core";
 import * as i0192 from "@angular/core";
 import * as i127 from "@angular/forms";
 var EclRadioInputDirective = class _EclRadioInputDirective extends ECLBaseDirective {
@@ -17442,7 +17428,7 @@ var EclRadioInputDirective = class _EclRadioInputDirective extends ECLBaseDirect
     }
   }
   static {
-    this.ɵfac = i0192.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0192, type: _EclRadioInputDirective, deps: [{ token: forwardRef52(() => EclRadioDirective) }, { token: i127.NgControl, optional: true, self: true }, { token: i0192.ChangeDetectorRef }], target: i0192.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0192.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0192, type: _EclRadioInputDirective, deps: [{ token: forwardRef53(() => EclRadioDirective) }, { token: i127.NgControl, optional: true, self: true }, { token: i0192.ChangeDetectorRef }], target: i0192.ɵɵFactoryTarget.Directive });
   }
   static {
     this.ɵdir = i0192.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.1", type: _EclRadioInputDirective, selector: "input[eclRadioInput]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0192 });
@@ -17454,8 +17440,8 @@ i0192.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
     selector: "input[eclRadioInput]"
   }]
 }], ctorParameters: () => [{ type: EclRadioDirective, decorators: [{
-  type: Inject6,
-  args: [forwardRef52(() => EclRadioDirective)]
+  type: Inject7,
+  args: [forwardRef53(() => EclRadioDirective)]
 }] }, { type: i127.NgControl, decorators: [{
   type: Optional6
 }, {
@@ -17490,7 +17476,7 @@ i0193.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] });
 
 // lib/components/ecl-rating-field/ecl-rating-field.component.mjs
-import { booleanAttribute as booleanAttribute49, Component as Component87, EventEmitter as EventEmitter40, forwardRef as forwardRef53, HostBinding as HostBinding136, Input as Input86, Output as Output40 } from "@angular/core";
+import { booleanAttribute as booleanAttribute49, Component as Component87, EventEmitter as EventEmitter40, forwardRef as forwardRef54, HostBinding as HostBinding136, Input as Input86, Output as Output40 } from "@angular/core";
 import { NG_VALUE_ACCESSOR as NG_VALUE_ACCESSOR6 } from "@angular/forms";
 import * as i0194 from "@angular/core";
 var EclRatingChangeEvent = class extends EclBaseEvent {
@@ -17501,7 +17487,7 @@ var EclRatingChangeEvent = class extends EclBaseEvent {
 };
 var ECL_RATINGFIELD_VALUE_ACCESSOR = {
   provide: NG_VALUE_ACCESSOR6,
-  useExisting: forwardRef53(() => EclRatingFieldComponent),
+  useExisting: forwardRef54(() => EclRatingFieldComponent),
   multi: true
 };
 var noop4 = () => {
@@ -17941,7 +17927,7 @@ i0202.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 import { Component as Component91, EventEmitter as EventEmitter42, HostBinding as HostBinding142, Input as Input92, Output as Output42 } from "@angular/core";
 import * as i0203 from "@angular/core";
 import * as i131 from "@angular/common";
-import * as i213 from "@angular/router";
+import * as i212 from "@angular/router";
 var EclSocialMediaFollowItemClickEvent = class extends EclBaseEvent {
 };
 var EclSocialMediaFollowItemComponent = class _EclSocialMediaFollowItemComponent extends ECLBaseDirective {
@@ -17967,7 +17953,7 @@ var EclSocialMediaFollowItemComponent = class _EclSocialMediaFollowItemComponent
     this.ɵfac = i0203.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0203, type: _EclSocialMediaFollowItemComponent, deps: null, target: i0203.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0203.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: _EclSocialMediaFollowItemComponent, selector: "ecl-social-media-follow-item", inputs: { icon: "icon", iconSet: "iconSet", href: "href", routerLink: "routerLink", target: "target", size: "size" }, outputs: { itemClick: "itemClick" }, host: { properties: { "attr.role": "this.role", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0203, template: '@if(href) {\n<a eclLink (click)="onItemClick($event)" variant="standalone" [href]="href" [attr.target]="target"\n    class="ecl-social-media-follow__link">\n    @if(icon) {\n    <ecl-icon [iconSet]="iconSet" icon="{{ icon }}" [size]="size" class="ecl-social-media-follow__icon"> </ecl-icon>\n    }\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n    </span>\n</a>\n}\n\n@if(!href && routerLink) {\n<a eclLink (click)="onItemClick($event)" variant="standalone" [routerLink]="routerLink" [attr.target]="target"\n    class="ecl-social-media-follow__link">\n    @if(icon) {\n    <ecl-icon [iconSet]="iconSet" icon="{{ icon }}" [size]="size" class="ecl-social-media-follow__icon"> </ecl-icon>\n    }\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n    </span>\n</a>\n}\n\n@if(!href && !routerLink) {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>', dependencies: [{ kind: "directive", type: i131.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i213.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }] });
+    this.ɵcmp = i0203.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: _EclSocialMediaFollowItemComponent, selector: "ecl-social-media-follow-item", inputs: { icon: "icon", iconSet: "iconSet", href: "href", routerLink: "routerLink", target: "target", size: "size" }, outputs: { itemClick: "itemClick" }, host: { properties: { "attr.role": "this.role", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0203, template: '@if(href) {\n<a eclLink (click)="onItemClick($event)" variant="standalone" [href]="href" [attr.target]="target"\n    class="ecl-social-media-follow__link">\n    @if(icon) {\n    <ecl-icon [iconSet]="iconSet" icon="{{ icon }}" [size]="size" class="ecl-social-media-follow__icon"> </ecl-icon>\n    }\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n    </span>\n</a>\n}\n\n@if(!href && routerLink) {\n<a eclLink (click)="onItemClick($event)" variant="standalone" [routerLink]="routerLink" [attr.target]="target"\n    class="ecl-social-media-follow__link">\n    @if(icon) {\n    <ecl-icon [iconSet]="iconSet" icon="{{ icon }}" [size]="size" class="ecl-social-media-follow__icon"> </ecl-icon>\n    }\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n    </span>\n</a>\n}\n\n@if(!href && !routerLink) {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>', dependencies: [{ kind: "directive", type: i131.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i212.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }] });
   }
 };
 i0203.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0203, type: EclSocialMediaFollowItemComponent, decorators: [{
@@ -18004,7 +17990,7 @@ var EclSocialMediaFollowLinkDirective = class _EclSocialMediaFollowLinkDirective
   }
   ngAfterContentInit() {
     if (this.eclIcon) {
-      setTimeout(() => this.eclIcon.class = [this.eclIcon.class, "ecl-social-media-follow__icon"].join(" "));
+      setTimeout(() => this.eclIcon.baseDirective.class = [this.eclIcon.baseDirective.class, "ecl-social-media-follow__icon"].join(" "));
     }
   }
   static {
@@ -18147,7 +18133,7 @@ var EclSocialMediaShareLinkDirective = class _EclSocialMediaShareLinkDirective e
   }
   ngAfterContentInit() {
     if (this.eclIcon) {
-      setTimeout(() => this.eclIcon.class = [this.eclIcon.class, "ecl-social-media-share__icon"].join(" "));
+      setTimeout(() => this.eclIcon.baseDirective.class = [this.eclIcon.baseDirective.class, "ecl-social-media-share__icon"].join(" "));
     }
   }
   static {
@@ -18316,7 +18302,7 @@ i0213.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 // lib/components/ecl-table/ecl-table-sort-button.component.mjs
 import { Component as Component95, HostBinding as HostBinding150 } from "@angular/core";
 import * as i0214 from "@angular/core";
-import * as i33 from "@angular/common";
+import * as i34 from "@angular/common";
 var EclTableSortButtonComponent = class _EclTableSortButtonComponent extends ECLBaseDirective {
   constructor(eclThemeService) {
     super();
@@ -18332,7 +18318,7 @@ var EclTableSortButtonComponent = class _EclTableSortButtonComponent extends ECL
   static {
     this.ɵcmp = i0214.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.1", type: _EclTableSortButtonComponent, selector: "button[eclTableSortButton]", host: { properties: { "attr.aria-label": "this.ariaLabel", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0214, template: `<ecl-icon icon="solid-arrow" class="ecl-table__icon ecl-table__icon-up" [size]="(eclThemeService.isEC$ | async) ? 'xs' : 'm'"> </ecl-icon>
 <ecl-icon icon="solid-arrow" class="ecl-table__icon ecl-table__icon-down" [size]="(eclThemeService.isEC$ | async) ? 'xs' : 'm'"> </ecl-icon>
-`, dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i33.AsyncPipe, name: "async" }] });
+`, dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i34.AsyncPipe, name: "async" }] });
   }
 };
 i0214.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0214, type: EclTableSortButtonComponent, decorators: [{
@@ -18349,7 +18335,7 @@ i0214.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] } });
 
 // lib/components/ecl-table/ecl-table.directive.mjs
-import { ContentChildren as ContentChildren26, Directive as Directive63, EventEmitter as EventEmitter44, forwardRef as forwardRef54, HostBinding as HostBinding151, HostListener as HostListener22, Input as Input96, Output as Output44, booleanAttribute as booleanAttribute56 } from "@angular/core";
+import { ContentChildren as ContentChildren26, Directive as Directive63, EventEmitter as EventEmitter44, forwardRef as forwardRef55, HostBinding as HostBinding151, HostListener as HostListener22, Input as Input96, Output as Output44, booleanAttribute as booleanAttribute56 } from "@angular/core";
 import { Subject as Subject28 } from "rxjs";
 import { takeUntil as takeUntil25 } from "rxjs/operators";
 import * as i0215 from "@angular/core";
@@ -18416,7 +18402,7 @@ i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   type: Output44
 }], eclTableHeaders: [{
   type: ContentChildren26,
-  args: [forwardRef54(() => EclTableHeaderDirective), { descendants: true }]
+  args: [forwardRef55(() => EclTableHeaderDirective), { descendants: true }]
 }] } });
 var EclTableHeadDirective = class _EclTableHeadDirective extends ECLBaseDirective {
   get cssClasses() {
@@ -18461,7 +18447,7 @@ i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: ["class"]
 }], eclTableHeaders: [{
   type: ContentChildren26,
-  args: [forwardRef54(() => EclTableHeaderDirective), { descendants: true }]
+  args: [forwardRef55(() => EclTableHeaderDirective), { descendants: true }]
 }] } });
 var EclTableHeaderDirective = class _EclTableHeaderDirective extends ECLBaseDirective {
   get cssClasses() {
@@ -18863,12 +18849,12 @@ i0219.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] } });
 
 // lib/components/ecl-tabs/ecl-tabs.component.mjs
-import { Component as Component99, ContentChildren as ContentChildren27, EventEmitter as EventEmitter46, forwardRef as forwardRef56, HostListener as HostListener23, Input as Input99, Output as Output46, ViewChild as ViewChild17, ViewEncapsulation as ViewEncapsulation15 } from "@angular/core";
+import { Component as Component99, ContentChildren as ContentChildren27, EventEmitter as EventEmitter46, forwardRef as forwardRef57, HostListener as HostListener23, Input as Input99, Output as Output46, ViewChild as ViewChild17, ViewEncapsulation as ViewEncapsulation15 } from "@angular/core";
 import { of as of4, Subject as Subject29 } from "rxjs";
 import { mergeWith as mergeWith3, takeUntil as takeUntil26 } from "rxjs/operators";
 import * as i0220 from "@angular/core";
 import * as i133 from "@angular/cdk/layout";
-import * as i34 from "@angular/common";
+import * as i35 from "@angular/common";
 import * as i10 from "@ngx-translate/core";
 var ShiftDirection;
 (function(ShiftDirection2) {
@@ -19354,7 +19340,7 @@ var EclTabsComponent = class _EclTabsComponent extends ECLBaseDirective {
         </div>
     }
 }
-`, dependencies: [{ kind: "directive", type: i34.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclTabComponent, selector: "ecl-tab, [eclTab]", inputs: ["id", "isHidden", "isActive"], outputs: ["selectTab", "keydownTab"] }, { kind: "component", type: EclTabLabelComponent, selector: "ecl-tab-label" }, { kind: "component", type: EclTabMoreComponent, selector: "ecl-tab-more", inputs: ["isHidden"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], encapsulation: i0220.ViewEncapsulation.None });
+`, dependencies: [{ kind: "directive", type: i35.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclTabComponent, selector: "ecl-tab, [eclTab]", inputs: ["id", "isHidden", "isActive"], outputs: ["selectTab", "keydownTab"] }, { kind: "component", type: EclTabLabelComponent, selector: "ecl-tab-label" }, { kind: "component", type: EclTabMoreComponent, selector: "ecl-tab-more", inputs: ["isHidden"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], encapsulation: i0220.ViewEncapsulation.None });
   }
 };
 i0220.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0220, type: EclTabsComponent, decorators: [{
@@ -19442,7 +19428,7 @@ i0220.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   type: Output46
 }], tabs: [{
   type: ContentChildren27,
-  args: [forwardRef56(() => EclTabComponent)]
+  args: [forwardRef57(() => EclTabComponent)]
 }], tabsList: [{
   type: ViewChild17,
   args: ["tabsList"]
@@ -19515,7 +19501,7 @@ i0221.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 // lib/components/ecl-tag/ecl-tag.component.mjs
 import { Component as Component100, Input as Input100, HostBinding as HostBinding154, Output as Output47, EventEmitter as EventEmitter47, booleanAttribute as booleanAttribute59 } from "@angular/core";
 import * as i0222 from "@angular/core";
-import * as i214 from "@angular/common";
+import * as i213 from "@angular/common";
 var EclTagRemoveEvent = class extends EclBaseEvent {
 };
 var EclTagComponent = class _EclTagComponent extends ECLBaseDirective {
@@ -19550,7 +19536,7 @@ var EclTagComponent = class _EclTagComponent extends ECLBaseDirective {
     this.ɵfac = i0222.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0222, type: _EclTagComponent, deps: null, target: i0222.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0222.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: _EclTagComponent, selector: "ecl-tag, [eclTag]", inputs: { variant: "variant", isWrapped: ["isWrapped", "isWrapped", booleanAttribute59] }, outputs: { remove: "remove" }, host: { properties: { "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0222, template: '<ng-content></ng-content>\n@if(isRemovable) {\n    <span class="ecl-tag__icon" (click)="onRemoveClick($event)">\n    <ecl-icon icon="close-outline" class="ecl-tag__icon-close" role="img">\n        <title>{{title | titlecase}}</title>\n    </ecl-icon>\n</span>\n}\n', dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i214.TitleCasePipe, name: "titlecase" }] });
+    this.ɵcmp = i0222.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: _EclTagComponent, selector: "ecl-tag, [eclTag]", inputs: { variant: "variant", isWrapped: ["isWrapped", "isWrapped", booleanAttribute59] }, outputs: { remove: "remove" }, host: { properties: { "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0222, template: '<ng-content></ng-content>\n@if(isRemovable) {\n    <span class="ecl-tag__icon" (click)="onRemoveClick($event)">\n    <ecl-icon icon="close-outline" class="ecl-tag__icon-close" role="img">\n        <title>{{title | titlecase}}</title>\n    </ecl-icon>\n</span>\n}\n', dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i213.TitleCasePipe, name: "titlecase" }] });
   }
 };
 i0222.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0222, type: EclTagComponent, decorators: [{
@@ -19770,7 +19756,7 @@ i0229.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] } });
 
 // lib/components/ecl-timeline/ecl-timeline-item.component.mjs
-import { Component as Component102, Input as Input102, HostBinding as HostBinding159, ViewEncapsulation as ViewEncapsulation17, Output as Output49, EventEmitter as EventEmitter49, ContentChild as ContentChild28, forwardRef as forwardRef58, booleanAttribute as booleanAttribute61 } from "@angular/core";
+import { Component as Component102, Input as Input102, HostBinding as HostBinding159, ViewEncapsulation as ViewEncapsulation17, Output as Output49, EventEmitter as EventEmitter49, ContentChild as ContentChild28, forwardRef as forwardRef59, booleanAttribute as booleanAttribute61 } from "@angular/core";
 import { Subject as Subject30 } from "rxjs";
 import { takeUntil as takeUntil27 } from "rxjs/operators";
 import * as i0230 from "@angular/core";
@@ -19931,7 +19917,7 @@ i0230.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: ["class"]
 }], timelineItemToggler: [{
   type: ContentChild28,
-  args: [forwardRef58(() => EclTimelineItemTogglerComponent)]
+  args: [forwardRef59(() => EclTimelineItemTogglerComponent)]
 }], isCollapsed: [{
   type: Input102
 }, {
@@ -19949,7 +19935,7 @@ i0230.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
 }] } });
 
 // lib/components/ecl-timeline/ecl-timeline.component.mjs
-import { Component as Component103, ContentChildren as ContentChildren28, forwardRef as forwardRef60, HostBinding as HostBinding160 } from "@angular/core";
+import { Component as Component103, ContentChildren as ContentChildren28, forwardRef as forwardRef61, HostBinding as HostBinding160 } from "@angular/core";
 import { Subject as Subject31 } from "rxjs";
 import { takeUntil as takeUntil28 } from "rxjs/operators";
 import * as i0231 from "@angular/core";
@@ -19995,7 +19981,7 @@ i0231.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1",
   args: ["class"]
 }], timelineItems: [{
   type: ContentChildren28,
-  args: [forwardRef60(() => EclTimelineItemComponent)]
+  args: [forwardRef61(() => EclTimelineItemComponent)]
 }] } });
 
 // lib/components/ecl-timeline/ecl-timeline.module.mjs