@eui/ecl 18.0.0-next.32 → 18.0.0-next.34

package/fesm2022/eui-ecl.mjs

@@ -1363,8 +1363,8 @@ i024.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4"
 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 { NG_VALUE_ACCESSOR } from "@angular/forms";
 import * as i025 from "@angular/core";
-import * as i15 from "@angular/forms";
-import * as i8 from "@ngx-translate/core";
+import * as i23 from "@angular/forms";
+import * as i9 from "@ngx-translate/core";
 var EclSearchFormEvent = class extends EclBaseEvent {
   constructor(keyword) {
     super();
@@ -1379,17 +1379,18 @@ var ECL_SEARCH_FORM_VALUE_ACCESSOR = {
 var noop = () => {
 };
 var EclSearchFormComponent = class _EclSearchFormComponent extends ECLBaseDirective {
-  constructor() {
-    super(...arguments);
+  get cssClasses() {
+    return [super.getCssClasses("ecl-search-form")].join(" ").trim();
+  }
+  constructor(eclThemeService) {
+    super();
+    this.eclThemeService = eclThemeService;
     this.searchButtonIcon = "search";
     this.role = "search";
     this.search = new EventEmitter3();
     this.onChange = noop;
     this.onTouched = noop;
   }
-  get cssClasses() {
-    return [super.getCssClasses("ecl-search-form")].join(" ").trim();
-  }
   onSearchClick(evt) {
     this.search.next(new EclSearchFormEvent(this.searchInputText));
     evt.preventDefault();
@@ -1415,7 +1416,7 @@ var EclSearchFormComponent = class _EclSearchFormComponent extends ECLBaseDirect
     this.onTouched = fn;
   }
   static {
-    this.ɵfac = i025.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i025, type: _EclSearchFormComponent, deps: null, target: i025.ɵɵFactoryTarget.Component });
+    this.ɵfac = i025.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i025, type: _EclSearchFormComponent, deps: [{ token: EclThemeService }], target: i025.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i025.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclSearchFormComponent, selector: "ecl-search-form", inputs: { searchInputText: "searchInputText", placeholder: "placeholder", searchButtonLabel: "searchButtonLabel", searchButtonIcon: "searchButtonIcon" }, outputs: { search: "search" }, host: { listeners: { "keydown.enter": "onEnterKeyDown($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, providers: [ECL_SEARCH_FORM_VALUE_ACCESSOR], usesInheritance: true, ngImport: i025, template: `<ecl-form-group>
@@ -1431,13 +1432,14 @@ var EclSearchFormComponent = class _EclSearchFormComponent extends ECLBaseDirect
         placeholder="{{ placeholder || 'ecl.common.SEARCH' | translate }}"
         class="ecl-search-form__text-input" />
 </ecl-form-group>
-<button eclButton aria-label="Search" variant="ghost" (click)="onSearchClick($event)" class="ecl-search-form__button">
+<button eclButton aria-label="Search" type="submit" [variant]="eclThemeService.isECTheme() ? 'ghost': 'primary'" (click)="onSearchClick($event)"
+    class="ecl-search-form__button" aria-label="Search">
+    <ecl-icon [icon]="searchButtonIcon" size="xs"></ecl-icon>
     <span eclButtonLabel>
         {{ searchButtonLabel || 'ecl.common.SEARCH' | translate }}
     </span>
-    <ecl-icon [icon]="searchButtonIcon" size="xs"></ecl-icon>
 </button>
-`, dependencies: [{ kind: "directive", type: i15.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: i15.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: i15.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "directive", type: i23.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: i23.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: i23.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-next.4", ngImport: i025, type: EclSearchFormComponent, decorators: [{
@@ -1455,14 +1457,15 @@ i025.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4"
         placeholder="{{ placeholder || 'ecl.common.SEARCH' | translate }}"
         class="ecl-search-form__text-input" />
 </ecl-form-group>
-<button eclButton aria-label="Search" variant="ghost" (click)="onSearchClick($event)" class="ecl-search-form__button">
+<button eclButton aria-label="Search" type="submit" [variant]="eclThemeService.isECTheme() ? 'ghost': 'primary'" (click)="onSearchClick($event)"
+    class="ecl-search-form__button" aria-label="Search">
+    <ecl-icon [icon]="searchButtonIcon" size="xs"></ecl-icon>
     <span eclButtonLabel>
         {{ searchButtonLabel || 'ecl.common.SEARCH' | translate }}
     </span>
-    <ecl-icon [icon]="searchButtonIcon" size="xs"></ecl-icon>
 </button>
 ` }]
-}], propDecorators: { searchInputText: [{
+}], ctorParameters: () => [{ type: EclThemeService }], propDecorators: { searchInputText: [{
   type: Input9
 }], placeholder: [{
   type: Input9
@@ -1608,7 +1611,7 @@ import { Component as Component10, HostBinding as HostBinding16 } from "@angular
 import { Subject as Subject4 } from "rxjs";
 import { takeUntil as takeUntil4 } from "rxjs/operators";
 import * as i030 from "@angular/core";
-import * as i16 from "@angular/cdk/layout";
+import * as i15 from "@angular/cdk/layout";
 var EclSiteHeaderEnvironmentComponent = class _EclSiteHeaderEnvironmentComponent extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses(""), "ecl-u-type-xl ecl-u-bg-red ecl-u-type-color-white"].join(" ");
@@ -1653,7 +1656,7 @@ var EclSiteHeaderEnvironmentComponent = class _EclSiteHeaderEnvironmentComponent
     }
   }
   static {
-    this.ɵfac = i030.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i030, type: _EclSiteHeaderEnvironmentComponent, deps: [{ token: i030.ElementRef }, { token: i16.BreakpointObserver }], target: i030.ɵɵFactoryTarget.Component });
+    this.ɵfac = i030.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i030, type: _EclSiteHeaderEnvironmentComponent, deps: [{ token: i030.ElementRef }, { token: i15.BreakpointObserver }], target: i030.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i030.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclSiteHeaderEnvironmentComponent, selector: "[eclSiteHeaderEnvironment]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i030, template: "<ng-content></ng-content>", isInline: true, styles: [":host{position:absolute;width:100%;font-size:1.3rem;padding:.3rem;opacity:.6;text-align:center;transform:rotate(-10deg)}@media print{:host{display:none}}\n"] });
@@ -1662,7 +1665,7 @@ var EclSiteHeaderEnvironmentComponent = class _EclSiteHeaderEnvironmentComponent
 i030.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i030, type: EclSiteHeaderEnvironmentComponent, decorators: [{
   type: Component10,
   args: [{ selector: "[eclSiteHeaderEnvironment]", template: "<ng-content></ng-content>", styles: [":host{position:absolute;width:100%;font-size:1.3rem;padding:.3rem;opacity:.6;text-align:center;transform:rotate(-10deg)}@media print{:host{display:none}}\n"] }]
-}], ctorParameters: () => [{ type: i030.ElementRef }, { type: i16.BreakpointObserver }], propDecorators: { cssClasses: [{
+}], ctorParameters: () => [{ type: i030.ElementRef }, { type: i15.BreakpointObserver }], propDecorators: { cssClasses: [{
   type: HostBinding16,
   args: ["class"]
 }] } });
@@ -1670,7 +1673,7 @@ i030.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4"
 // lib/components/ecl-site-header/language/ecl-site-header-language-popover.component.mjs
 import { Component as Component11, EventEmitter as EventEmitter4, HostBinding as HostBinding17, Input as Input10, Output as Output4 } from "@angular/core";
 import * as i031 from "@angular/core";
-import * as i17 from "@angular/common";
+import * as i16 from "@angular/common";
 import * as i5 from "@ngx-translate/core";
 var EclSiteHeaderLanguageSelectedEvent = class extends EclBaseEvent {
   constructor(language) {
@@ -1778,7 +1781,7 @@ var EclSiteHeaderLanguagePopoverComponent = class _EclSiteHeaderLanguagePopoverC
         </ul>
     </div>
 </div>
-`, dependencies: [{ kind: "directive", type: i17.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i17.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "directive", type: i16.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
   }
 };
 i031.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i031, type: EclSiteHeaderLanguagePopoverComponent, decorators: [{
@@ -2147,7 +2150,7 @@ import { __decorate as __decorate4 } from "tslib";
 import { Component as Component13, EventEmitter as EventEmitter6, HostBinding as HostBinding19, Input as Input12, Output as Output6 } from "@angular/core";
 import { coerceBoolean as coerceBoolean3 } from "@eui/base";
 import * as i033 from "@angular/core";
-import * as i18 from "@angular/common";
+import * as i17 from "@angular/common";
 import * as i3 from "@ngx-translate/core";
 var EclSiteHeaderLoginEvent = class extends EclBaseEvent {
 };
@@ -2215,7 +2218,7 @@ var EclSiteHeaderLoginComponent = class _EclSiteHeaderLoginComponent extends ECL
         <ng-content></ng-content>
     </div>
 </ng-container>
-`, styles: [".ecl-site-header__login-toggle .ecl-site-header__login-arrow{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i18.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+`, styles: [".ecl-site-header__login-toggle .ecl-site-header__login-arrow{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i17.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
   }
 };
 __decorate4([
@@ -2264,7 +2267,7 @@ i033.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4"
 import { Component as Component14, EventEmitter as EventEmitter7, forwardRef as forwardRef8, HostBinding as HostBinding20, 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 i19 from "@angular/forms";
+import * as i18 from "@angular/forms";
 import * as i42 from "@ngx-translate/core";
 var EclSiteHeaderSearchEvent = class extends EclBaseEvent {
   constructor(keyword) {
@@ -2349,7 +2352,7 @@ var EclSiteHeaderSearchComponent = class _EclSiteHeaderSearchComponent extends E
     [searchButtonLabel]="searchButtonLabel"
     [class]="getSearchBoxCssClasses()">
 </ecl-search-form>
-`, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i19.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i19.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclSearchFormComponent, selector: "ecl-search-form", inputs: ["searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon"], outputs: ["search"] }, { kind: "pipe", type: i42.TranslatePipe, name: "translate" }] });
+`, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i18.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i18.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclSearchFormComponent, selector: "ecl-search-form", inputs: ["searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon"], outputs: ["search"] }, { kind: "pipe", type: i42.TranslatePipe, name: "translate" }] });
   }
 };
 i034.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i034, type: EclSiteHeaderSearchComponent, decorators: [{
@@ -2398,7 +2401,7 @@ import { Component as Component15, ContentChild, EventEmitter as EventEmitter8,
 import { coerceElement as coerceElement2 } from "@eui/base";
 import { Subject as Subject6, takeUntil as takeUntil6 } from "rxjs";
 import * as i035 from "@angular/core";
-import * as i23 from "@ngx-translate/core";
+import * as i24 from "@ngx-translate/core";
 import * as i43 from "@angular/common";
 var EclSiteHeaderLogoClickEvent = class extends EclBaseEvent {
 };
@@ -2453,7 +2456,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-next.4", ngImport: i035, type: _EclSiteHeaderComponent, deps: [{ token: EclLanguageService }, { token: i23.TranslateService }, { token: EclThemeService }], target: i035.ɵɵFactoryTarget.Component });
+    this.ɵfac = i035.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i035, type: _EclSiteHeaderComponent, deps: [{ token: EclLanguageService }, { token: i24.TranslateService }, { token: EclThemeService }], target: i035.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i035.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclSiteHeaderComponent, selector: "ecl-site-header", inputs: { logoUrl: "logoUrl", siteName: "siteName", languageCode: "languageCode" }, outputs: { logoClick: "logoClick", languageClick: "languageClick" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, 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 }], viewQueries: [{ propertyName: "topContainerElement", first: true, predicate: ["topContainer"], descendants: true }], usesInheritance: true, ngImport: i035, template: `<div class="ecl-site-header__header">
@@ -2509,7 +2512,7 @@ var EclSiteHeaderComponent = class _EclSiteHeaderComponent extends ECLBaseDirect
 
 <!-- @deprecated language list is replaced with site header language  -->
 <ng-content select="ecl-language-list"></ng-content>
-`, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i43.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "pipe", type: i43.AsyncPipe, name: "async" }, { kind: "pipe", type: i23.TranslatePipe, name: "translate" }] });
+`, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i43.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "pipe", type: i43.AsyncPipe, name: "async" }, { kind: "pipe", type: i24.TranslatePipe, name: "translate" }] });
   }
 };
 __decorate5([
@@ -2571,7 +2574,7 @@ i035.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4"
 <!-- @deprecated language list is replaced with site header language  -->
 <ng-content select="ecl-language-list"></ng-content>
 `, styles: [":host{display:block}\n"] }]
-}], ctorParameters: () => [{ type: EclLanguageService }, { type: i23.TranslateService }, { type: EclThemeService }], propDecorators: { logoUrl: [{
+}], ctorParameters: () => [{ type: EclLanguageService }, { type: i24.TranslateService }, { type: EclThemeService }], propDecorators: { logoUrl: [{
   type: Input14
 }], cssClasses: [{
   type: HostBinding21,
@@ -3019,7 +3022,7 @@ i043.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4"
 // lib/components/ecl-banner/ecl-banner.component.mjs
 import { Component as Component18, ContentChild as ContentChild3, ContentChildren as ContentChildren4, HostBinding as HostBinding28, Input as Input15, ViewChild as ViewChild4, booleanAttribute as booleanAttribute5, forwardRef as forwardRef9 } from "@angular/core";
 import * as i044 from "@angular/core";
-import * as i110 from "@angular/common";
+import * as i19 from "@angular/common";
 var EclBannerComponent = class _EclBannerComponent extends ECLBaseDirective {
   get cssClasses() {
     return [
@@ -3090,7 +3093,7 @@ var EclBannerComponent = class _EclBannerComponent extends ECLBaseDirective {
     this.ɵfac = i044.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i044, type: _EclBannerComponent, deps: [{ token: i044.ElementRef }, { token: i044.Renderer2 }], target: i044.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i044.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclBannerComponent, selector: "ecl-banner", inputs: { variant: "variant", eclSize: "eclSize", copyright: "copyright", isCentered: ["isCentered", "isCentered", booleanAttribute5], isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute5] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclBannerImage", first: true, predicate: EclBannerImageDirective, descendants: true }, { propertyName: "eclLinkComponents", predicate: i044.forwardRef(() => EclLinkDirective) }], viewQueries: [{ propertyName: "bannerContainer", first: true, predicate: ["bannerContainer"], descendants: true }], usesInheritance: true, ngImport: i044, template: '<figure class="ecl-banner__picture-container">\n    <ng-content select="[eclBannerPicture]"></ng-content>\n    @if(copyright) {\n        <footer class="ecl-banner__credit"><small>© {{copyright}}</small></footer>\n    }\n</figure>\n\n<div class="ecl-container">\n    <div #bannerContainer class="ecl-banner__container">\n        <div class="ecl-banner__content">\n            <ng-content select="[eclBannerTitle]"></ng-content>\n            <ng-content select="[eclBannerDescription]"></ng-content>\n            <div *ngIf="hasCtaLink" class="ecl-banner__cta">\n                <ng-content select="[eclLink]"></ng-content>\n            </div>\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>', dependencies: [{ kind: "directive", type: i110.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    this.ɵcmp = i044.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclBannerComponent, selector: "ecl-banner", inputs: { variant: "variant", eclSize: "eclSize", copyright: "copyright", isCentered: ["isCentered", "isCentered", booleanAttribute5], isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute5] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclBannerImage", first: true, predicate: EclBannerImageDirective, descendants: true }, { propertyName: "eclLinkComponents", predicate: i044.forwardRef(() => EclLinkDirective) }], viewQueries: [{ propertyName: "bannerContainer", first: true, predicate: ["bannerContainer"], descendants: true }], usesInheritance: true, ngImport: i044, template: '<figure class="ecl-banner__picture-container">\n    <ng-content select="[eclBannerPicture]"></ng-content>\n    @if(copyright) {\n        <footer class="ecl-banner__credit"><small>© {{copyright}}</small></footer>\n    }\n</figure>\n\n<div class="ecl-container">\n    <div #bannerContainer class="ecl-banner__container">\n        <div class="ecl-banner__content">\n            <ng-content select="[eclBannerTitle]"></ng-content>\n            <ng-content select="[eclBannerDescription]"></ng-content>\n            <div *ngIf="hasCtaLink" class="ecl-banner__cta">\n                <ng-content select="[eclLink]"></ng-content>\n            </div>\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>', dependencies: [{ kind: "directive", type: i19.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   }
 };
 i044.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i044, type: EclBannerComponent, decorators: [{
@@ -3202,7 +3205,7 @@ i046.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4"
 // lib/components/ecl-blockquote/ecl-blockquote.component.mjs
 import { Component as Component19, Input as Input16, HostBinding as HostBinding30, ChangeDetectionStrategy as ChangeDetectionStrategy7, ViewEncapsulation } from "@angular/core";
 import * as i047 from "@angular/core";
-import * as i111 from "@ngx-translate/core";
+import * as i110 from "@ngx-translate/core";
 var EclBlockquoteComponent = class _EclBlockquoteComponent extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-blockquote")].join(" ").trim();
@@ -3226,7 +3229,7 @@ var EclBlockquoteComponent = class _EclBlockquoteComponent extends ECLBaseDirect
     return language.code;
   }
   static {
-    this.ɵfac = i047.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i047, type: _EclBlockquoteComponent, deps: [{ token: i047.ChangeDetectorRef }, { token: i111.TranslateService }, { token: EclLanguageService }], target: i047.ɵɵFactoryTarget.Component });
+    this.ɵfac = i047.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i047, type: _EclBlockquoteComponent, deps: [{ token: i047.ChangeDetectorRef }, { token: i110.TranslateService }, { token: EclLanguageService }], target: i047.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i047.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclBlockquoteComponent, selector: "[eclBlockquote]", inputs: { author: "author" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i047, template: '<ng-content select="picture[eclBlockquotePicture]"></ng-content>\n<div class="ecl-blockquote__body">\n    <blockquote class="ecl-blockquote__quote">\n        <p class="ecl-blockquote__citation" [attr.lang]="getLanguageCode()">\n            <ng-content></ng-content>\n        </p>\n        @if (hasAuthor) {\n            <footer class="ecl-blockquote__attribution">\n                <cite class="ecl-blockquote__author">{{ author }}</cite>\n            </footer>\n        }\n    </blockquote>\n</div>\n', changeDetection: i047.ChangeDetectionStrategy.OnPush, encapsulation: i047.ViewEncapsulation.None });
@@ -3235,7 +3238,7 @@ var EclBlockquoteComponent = class _EclBlockquoteComponent extends ECLBaseDirect
 i047.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i047, type: EclBlockquoteComponent, decorators: [{
   type: Component19,
   args: [{ selector: "[eclBlockquote]", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy7.OnPush, template: '<ng-content select="picture[eclBlockquotePicture]"></ng-content>\n<div class="ecl-blockquote__body">\n    <blockquote class="ecl-blockquote__quote">\n        <p class="ecl-blockquote__citation" [attr.lang]="getLanguageCode()">\n            <ng-content></ng-content>\n        </p>\n        @if (hasAuthor) {\n            <footer class="ecl-blockquote__attribution">\n                <cite class="ecl-blockquote__author">{{ author }}</cite>\n            </footer>\n        }\n    </blockquote>\n</div>\n' }]
-}], ctorParameters: () => [{ type: i047.ChangeDetectorRef }, { type: i111.TranslateService }, { type: EclLanguageService }], propDecorators: { author: [{
+}], ctorParameters: () => [{ type: i047.ChangeDetectorRef }, { type: i110.TranslateService }, { type: EclLanguageService }], propDecorators: { author: [{
   type: Input16
 }], cssClasses: [{
   type: HostBinding30,
@@ -3313,8 +3316,8 @@ i049.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4"
 // lib/components/ecl-breadcrumb/ecl-breadcrumb-segment.component.mjs
 import { Component as Component20, EventEmitter as EventEmitter10, HostBinding as HostBinding32, Input as Input17, Output as Output10, ViewEncapsulation as ViewEncapsulation3, booleanAttribute as booleanAttribute6 } from "@angular/core";
 import * as i050 from "@angular/core";
-import * as i112 from "@angular/common";
-import * as i24 from "@angular/router";
+import * as i111 from "@angular/common";
+import * as i25 from "@angular/router";
 var EclBreadcrumbSegmentClickEvent = class extends EclBaseEvent {
 };
 var EclBreadcrumbSegmentComponent = class _EclBreadcrumbSegmentComponent extends ECLBaseDirective {
@@ -3350,7 +3353,7 @@ var EclBreadcrumbSegmentComponent = class _EclBreadcrumbSegmentComponent extends
     this.ɵfac = i050.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i050, type: _EclBreadcrumbSegmentComponent, deps: [{ token: i050.ElementRef }], target: i050.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i050.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment", inputs: { routerLink: "routerLink", queryParams: "queryParams", href: "href", queryParamsHandling: "queryParamsHandling", isCurrentPage: ["isCurrentPage", "isCurrentPage", booleanAttribute6], isHidden: ["isHidden", "isHidden", booleanAttribute6] }, 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: i112.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 });
+    this.ɵcmp = i050.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment", inputs: { routerLink: "routerLink", queryParams: "queryParams", href: "href", queryParamsHandling: "queryParamsHandling", isCurrentPage: ["isCurrentPage", "isCurrentPage", booleanAttribute6], isHidden: ["isHidden", "isHidden", booleanAttribute6] }, 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: i111.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 });
   }
 };
 i050.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i050, type: EclBreadcrumbSegmentComponent, decorators: [{
@@ -3390,7 +3393,7 @@ i050.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4"
 import { Component as Component21, ContentChildren as ContentChildren5, HostBinding as HostBinding33, Input as Input18, ViewChild as ViewChild5, booleanAttribute as booleanAttribute7, forwardRef as forwardRef11, HostListener as HostListener5 } from "@angular/core";
 import { Subject as Subject8, takeUntil as takeUntil8 } from "rxjs";
 import * as i051 from "@angular/core";
-import * as i113 from "@ngx-translate/core";
+import * as i112 from "@ngx-translate/core";
 var EclBreadcrumbComponent = class _EclBreadcrumbComponent extends ECLBaseDirective {
   constructor(el, translate, renderer) {
     super();
@@ -3510,7 +3513,7 @@ var EclBreadcrumbComponent = class _EclBreadcrumbComponent extends ECLBaseDirect
     return this.eclSegments.reduce((width, segmentComponent) => width + segmentComponent.el.nativeElement.offsetWidth, 0);
   }
   static {
-    this.ɵfac = i051.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i051, type: _EclBreadcrumbComponent, deps: [{ token: i051.ElementRef }, { token: i113.TranslateService }, { token: i051.Renderer2 }], target: i051.ɵɵFactoryTarget.Component });
+    this.ɵfac = i051.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i051, type: _EclBreadcrumbComponent, deps: [{ token: i051.ElementRef }, { token: i112.TranslateService }, { token: i051.Renderer2 }], target: i051.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i051.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EclBreadcrumbComponent, selector: "ecl-breadcrumb", inputs: { isExpanded: ["isExpanded", "isExpanded", booleanAttribute7] }, host: { listeners: { "window:resize": "onWindowResize($event)" }, properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclSegments", predicate: i051.forwardRef(() => EclBreadcrumbSegmentComponent) }], viewQueries: [{ propertyName: "eclEllipsisSegment", first: true, predicate: ["ellipsisSegment"], descendants: true }, { propertyName: "breadcrumbContainer", first: true, predicate: ["breadcrumbContainer"], descendants: true }], usesInheritance: true, ngImport: i051, template: `<ol class="ecl-breadcrumb__container" #breadcrumbContainer>
@@ -3527,7 +3530,7 @@ var EclBreadcrumbComponent = class _EclBreadcrumbComponent extends ECLBaseDirect
     </ecl-breadcrumb-segment>
     <ng-content></ng-content>
 </ol>
-`, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment", inputs: ["routerLink", "queryParams", "href", "queryParamsHandling", "isCurrentPage", "isHidden"], outputs: ["segmentClick"] }, { kind: "pipe", type: i113.TranslatePipe, name: "translate" }] });
+`, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment", inputs: ["routerLink", "queryParams", "href", "queryParamsHandling", "isCurrentPage", "isHidden"], outputs: ["segmentClick"] }, { kind: "pipe", type: i112.TranslatePipe, name: "translate" }] });
   }
 };
 i051.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i051, type: EclBreadcrumbComponent, decorators: [{
@@ -3547,7 +3550,7 @@ i051.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4"
     <ng-content></ng-content>
 </ol>
 `, styles: [":host{display:block}\n"] }]
-}], ctorParameters: () => [{ type: i051.ElementRef }, { type: i113.TranslateService }, { type: i051.Renderer2 }], propDecorators: { isExpanded: [{
+}], ctorParameters: () => [{ type: i051.ElementRef }, { type: i112.TranslateService }, { type: i051.Renderer2 }], propDecorators: { isExpanded: [{
   type: Input18,
   args: [{ transform: booleanAttribute7 }]
 }], role: [{
@@ -4328,7 +4331,7 @@ i062.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4"
 import { Component as Component26, ContentChildren as ContentChildren6, EventEmitter as EventEmitter12, HostBinding as HostBinding41, Input as Input21, Output as Output12, ViewChild as ViewChild6, ViewChildren, booleanAttribute as booleanAttribute9, forwardRef as forwardRef17, numberAttribute as numberAttribute2 } from "@angular/core";
 import { Subject as Subject9, interval, switchMap as switchMap2, takeUntil as takeUntil9 } from "rxjs";
 import * as i063 from "@angular/core";
-import * as i114 from "@angular/cdk/layout";
+import * as i113 from "@angular/cdk/layout";
 import * as i52 from "@ngx-translate/core";
 var EclCarouselComponent = class _EclCarouselComponent extends ECLBaseDirective {
   constructor(cdkBreakpointObserver, cd, renderer2, eclRtlService) {
@@ -4793,7 +4796,7 @@ var EclCarouselComponent = class _EclCarouselComponent extends ECLBaseDirective
     }
   }
   static {
-    this.ɵfac = i063.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i063, type: _EclCarouselComponent, deps: [{ token: i114.BreakpointObserver }, { token: i063.ChangeDetectorRef }, { token: i063.Renderer2 }, { token: EclRtlService }], target: i063.ɵɵFactoryTarget.Component });
+    this.ɵfac = i063.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i063, type: _EclCarouselComponent, deps: [{ token: i113.BreakpointObserver }, { token: i063.ChangeDetectorRef }, { token: i063.Renderer2 }, { token: EclRtlService }], target: i063.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i063.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclCarouselComponent, selector: "ecl-carousel", inputs: { ariaLabel: ["aria-label", "ariaLabel"], isAutoplay: ["isAutoplay", "isAutoplay", booleanAttribute9], playInterval: ["playInterval", "playInterval", numberAttribute2] }, outputs: { slide: "slide" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.aria-roledescription": "this.ariaRoleDescription", "class": "this.cssClasses" } }, queries: [{ propertyName: "slides", predicate: i063.forwardRef(() => EclCarouselItemComponent) }], viewQueries: [{ propertyName: "carouselContainerElement", first: true, predicate: ["carouselContainer"], descendants: true }, { propertyName: "playButton", first: true, predicate: ["playButton"], descendants: true }, { propertyName: "pauseButton", first: true, predicate: ["pauseButton"], descendants: true }, { propertyName: "prevButton", first: true, predicate: ["prevButton"], descendants: true }, { propertyName: "nextButton", first: true, predicate: ["nextButton"], descendants: true }, { propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }, { propertyName: "navigationButtons", predicate: ["currButton"], descendants: true }], usesInheritance: true, ngImport: i063, template: `<div #carouselContainer class="ecl-carousel__container" [class.ecl-carousel-container--padded]="isPadded()">
@@ -4966,7 +4969,7 @@ i063.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4"
 
 </button>
 }`, styles: [":host{display:block}.ecl-carousel__container{width:100%}.ecl-carousel__slides{transition-duration:.4s}\n"] }]
-}], ctorParameters: () => [{ type: i114.BreakpointObserver }, { type: i063.ChangeDetectorRef }, { type: i063.Renderer2 }, { type: EclRtlService }], propDecorators: { ariaLabel: [{
+}], ctorParameters: () => [{ type: i113.BreakpointObserver }, { type: i063.ChangeDetectorRef }, { type: i063.Renderer2 }, { type: EclRtlService }], propDecorators: { ariaLabel: [{
   type: HostBinding41,
   args: ["attr.aria-label"]
 }, {
@@ -5106,7 +5109,7 @@ i065.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4"
 // 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 HostBinding43, Input as Input22, Output as Output13 } from "@angular/core";
 import * as i066 from "@angular/core";
-import * as i25 from "@angular/common";
+import * as i26 from "@angular/common";
 var EclCategoryFilterItemComponent = class _EclCategoryFilterItemComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -5165,7 +5168,7 @@ var EclCategoryFilterItemComponent = class _EclCategoryFilterItemComponent exten
     this.ɵfac = i066.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i066, type: _EclCategoryFilterItemComponent, deps: null, target: i066.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i066.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", 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"] }] });
+    this.ɵcmp = i066.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", 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"] }] });
   }
 };
 i066.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i066, type: EclCategoryFilterItemComponent, decorators: [{
@@ -5519,7 +5522,7 @@ i072.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4"
 // lib/components/ecl-checkbox/ecl-checkbox-input.directive.mjs
 import { Directive as Directive20, forwardRef as forwardRef27, HostBinding as HostBinding49, Inject as Inject4, Optional as Optional4, Self as Self2 } from "@angular/core";
 import * as i073 from "@angular/core";
-import * as i115 from "@angular/forms";
+import * as i114 from "@angular/forms";
 var EclCheckboxInputDirective = class _EclCheckboxInputDirective extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-checkbox__input")].join(" ");
@@ -5538,7 +5541,7 @@ var EclCheckboxInputDirective = class _EclCheckboxInputDirective extends ECLBase
     }
   }
   static {
-    this.ɵfac = i073.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i073, type: _EclCheckboxInputDirective, deps: [{ token: forwardRef27(() => EclCheckboxDirective) }, { token: i115.NgControl, optional: true, self: true }], target: i073.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i073.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i073, type: _EclCheckboxInputDirective, deps: [{ token: forwardRef27(() => EclCheckboxDirective) }, { token: i114.NgControl, optional: true, self: true }], target: i073.ɵɵFactoryTarget.Directive });
   }
   static {
     this.ɵdir = i073.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclCheckboxInputDirective, selector: "input[eclCheckboxInput]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i073 });
@@ -5552,7 +5555,7 @@ i073.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4"
 }], ctorParameters: () => [{ type: EclCheckboxDirective, decorators: [{
   type: Inject4,
   args: [forwardRef27(() => EclCheckboxDirective)]
-}] }, { type: i115.NgControl, decorators: [{
+}] }, { type: i114.NgControl, decorators: [{
   type: Optional4
 }, {
   type: Self2
@@ -5651,8 +5654,8 @@ i075.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4"
 import { formatDate } from "@angular/common";
 import { Component as Component32, Input as Input29, HostBinding as HostBinding51 } from "@angular/core";
 import * as i076 from "@angular/core";
-import * as i116 from "@ngx-translate/core";
-import * as i26 from "@angular/common";
+import * as i115 from "@ngx-translate/core";
+import * as i27 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();
@@ -5683,7 +5686,7 @@ var EclDateBlockComponent = class _EclDateBlockComponent extends ECLBaseDirectiv
     }
   }
   static {
-    this.ɵfac = i076.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i076, type: _EclDateBlockComponent, deps: [{ token: i116.TranslateService }], target: i076.ɵɵFactoryTarget.Component });
+    this.ɵfac = i076.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i076, type: _EclDateBlockComponent, deps: [{ token: i115.TranslateService }], target: i076.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i076.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclDateBlockComponent, selector: "time[eclDateBlock]", inputs: { date: "date", dateFormat: "dateFormat", variant: "variant", day: "day", month: "month", monthTitle: "monthTitle", year: "year", datetime: "datetime" }, host: { properties: { "class": "this.cssClasses", "attr.datetime": "this.datetime" } }, usesInheritance: true, ngImport: i076, template: `<span class="ecl-date-block__daytime">{{ datetime || (date | date: dateFormat) }}</span>
@@ -5692,7 +5695,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: i26.DatePipe, name: "date" }] });
+`, dependencies: [{ kind: "pipe", type: i27.DatePipe, name: "date" }] });
   }
 };
 i076.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i076, type: EclDateBlockComponent, decorators: [{
@@ -5704,7 +5707,7 @@ i076.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4"
 </abbr>
 <span class="ecl-date-block__year" aria-hidden="true">{{ year || (date | date: 'yyyy') }}</span>
 ` }]
-}], ctorParameters: () => [{ type: i116.TranslateService }], propDecorators: { date: [{
+}], ctorParameters: () => [{ type: i115.TranslateService }], propDecorators: { date: [{
   type: Input29
 }], dateFormat: [{
   type: Input29
@@ -5876,7 +5879,7 @@ import { NG_VALUE_ACCESSOR as NG_VALUE_ACCESSOR3 } from "@angular/forms";
 import Pikaday from "pikaday";
 import { Subject as Subject11, takeUntil as takeUntil11 } from "rxjs";
 import * as i080 from "@angular/core";
-import * as i117 from "@ngx-translate/core";
+import * as i116 from "@ngx-translate/core";
 var pikadayDefaultI18n = {
   previousMonth: "Previous Month",
   nextMonth: "Next Month",
@@ -6022,7 +6025,7 @@ var EclDatePickerDirective = class _EclDatePickerDirective extends ECLBaseDirect
     return eclIconComponent.location.nativeElement;
   }
   static {
-    this.ɵfac = i080.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i080, type: _EclDatePickerDirective, deps: [{ token: i080.ElementRef }, { token: i080.ViewContainerRef }, { token: i117.TranslateService }, { token: EclLanguageService }], target: i080.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i080.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i080, type: _EclDatePickerDirective, deps: [{ token: i080.ElementRef }, { token: i080.ViewContainerRef }, { token: i116.TranslateService }, { token: EclLanguageService }], target: i080.ɵɵFactoryTarget.Directive });
   }
   static {
     this.ɵdir = i080.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclDatePickerDirective, selector: "input[eclDatePicker]", inputs: { yearRange: "yearRange", format: "format" }, outputs: { datePicked: "datePicked" }, host: { listeners: { "click": "onClick()", "blur": "onBlur()" }, properties: { "attr.type": "this.type", "class": "this.cssClasses", "attr.disabled": "this.isDisabled" } }, providers: [ECL_DATE_PICKER_VALUE_ACCESSOR], usesInheritance: true, ngImport: i080 });
@@ -6034,7 +6037,7 @@ i080.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4"
     selector: "input[eclDatePicker]",
     providers: [ECL_DATE_PICKER_VALUE_ACCESSOR]
   }]
-}], ctorParameters: () => [{ type: i080.ElementRef }, { type: i080.ViewContainerRef }, { type: i117.TranslateService }, { type: EclLanguageService }], propDecorators: { yearRange: [{
+}], ctorParameters: () => [{ type: i080.ElementRef }, { type: i080.ViewContainerRef }, { type: i116.TranslateService }, { type: EclLanguageService }], propDecorators: { yearRange: [{
   type: Input30
 }], format: [{
   type: Input30
@@ -6898,8 +6901,8 @@ import { takeUntil as takeUntil12 } from "rxjs/operators";
 import { Subject as Subject12 } from "rxjs";
 import { coerceBoolean as coerceBoolean7 } from "@eui/base";
 import * as i0104 from "@angular/core";
-import * as i118 from "@angular/forms";
-import * as i27 from "@ngx-translate/core";
+import * as i117 from "@angular/forms";
+import * as i28 from "@ngx-translate/core";
 var EclFileUploadFileSelectedEvent = class extends EclBaseEvent {
   constructor(files) {
     super();
@@ -7051,7 +7054,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-next.4", ngImport: i0104, type: _EclFileUploadDirective, deps: [{ token: i118.NgControl, optional: true, self: true }, { token: i0104.ElementRef }, { token: i27.TranslateService }], target: i0104.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0104.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0104, type: _EclFileUploadDirective, deps: [{ token: i117.NgControl, optional: true, self: true }, { token: i0104.ElementRef }, { token: i28.TranslateService }], target: i0104.ɵɵFactoryTarget.Directive });
   }
   static {
     this.ɵdir = i0104.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclFileUploadDirective, selector: "[eclFileUpload]", inputs: { variant: "variant", isInvalid: "isInvalid", id: "id", disabled: "disabled", multiple: "multiple" }, 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 });
@@ -7068,11 +7071,11 @@ i0104.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
   args: [{
     selector: "[eclFileUpload]"
   }]
-}], ctorParameters: () => [{ type: i118.NgControl, decorators: [{
+}], ctorParameters: () => [{ type: i117.NgControl, decorators: [{
   type: Optional5
 }, {
   type: Self3
-}] }, { type: i0104.ElementRef }, { type: i27.TranslateService }], propDecorators: {
+}] }, { type: i0104.ElementRef }, { type: i28.TranslateService }], propDecorators: {
   variant: [{
     type: Input38
   }],
@@ -7219,7 +7222,7 @@ i0106.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 // lib/components/ecl-file/ecl-file.component.mjs
 import { Component as Component46, ContentChild as ContentChild15, HostBinding as HostBinding73, Input as Input40 } from "@angular/core";
 import * as i0107 from "@angular/core";
-import * as i28 from "@angular/common";
+import * as i29 from "@angular/common";
 var EclFileComponent = class _EclFileComponent extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-file"), this.isThumbnail ? "ecl-file--thumbnail" : ""].join(" ").trim();
@@ -7235,7 +7238,7 @@ var EclFileComponent = class _EclFileComponent extends ECLBaseDirective {
     this.ɵfac = i0107.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0107, type: _EclFileComponent, deps: [{ token: EclThemeService }], target: i0107.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0107.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclFileComponent, selector: "ecl-file", inputs: { description: "description", id: "id", langId: "langId", labelInfo: "labelInfo", language: "language", detailMeta: "detailMeta", meta: "meta" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclPictureContent", first: true, predicate: EclFilePictureDirective, descendants: true }], usesInheritance: true, ngImport: i0107, template: '<div class="ecl-file__container">\n    @if(!isThumbnail) {\n        @if(eclThemeService.isECTheme()) {\n            <ecl-icon icon="file" class="ecl-file__icon" size="2xl"></ecl-icon>\n        } @else {\n            <ecl-icon icon="file" class="ecl-file__icon" size="m"></ecl-icon>\n        }\n    } @else {\n    <ng-content select="[eclFilePicture]"></ng-content>\n    }\n    <div class="ecl-file__info">\n        @if(labelInfo) {\n        <div class="ecl-file__label">\n            <span eclLabel variant="highlight">{{ labelInfo }}</span>\n        </div>\n        }\n        @if(detailMeta) {\n        <div class="ecl-file__detail-meta">\n            <span class="ecl-file__detail-meta-item" *ngFor="let el of detailMeta">{{ el }}</span>\n        </div>\n        }\n        <ng-content select="[eclFileTitle]"></ng-content>\n        @if(description) {\n            <div class="ecl-file__description">{{ description }}</div>\n        }\n        <ng-content select="ecl-file-taxonomy"></ng-content>\n    </div>\n    \n    </div>\n    <div class="ecl-file__footer">\n        <div class="ecl-file__language" [id]="langId">{{ language }}</div>\n        <div class="ecl-file__meta">{{ meta }}</div>\n        <ng-content select="[eclFileDownload]"></ng-content>\n    </div>\n<ng-content></ng-content>', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i28.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLabelDirective, selector: "[eclLabel]", inputs: ["variant"] }] });
+    this.ɵcmp = i0107.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclFileComponent, selector: "ecl-file", inputs: { description: "description", id: "id", langId: "langId", labelInfo: "labelInfo", language: "language", detailMeta: "detailMeta", meta: "meta" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclPictureContent", first: true, predicate: EclFilePictureDirective, descendants: true }], usesInheritance: true, ngImport: i0107, template: '<div class="ecl-file__container">\n    @if(!isThumbnail) {\n        @if(eclThemeService.isECTheme()) {\n            <ecl-icon icon="file" class="ecl-file__icon" size="2xl"></ecl-icon>\n        } @else {\n            <ecl-icon icon="file" class="ecl-file__icon" size="m"></ecl-icon>\n        }\n    } @else {\n    <ng-content select="[eclFilePicture]"></ng-content>\n    }\n    <div class="ecl-file__info">\n        @if(labelInfo) {\n        <div class="ecl-file__label">\n            <span eclLabel variant="highlight">{{ labelInfo }}</span>\n        </div>\n        }\n        @if(detailMeta) {\n        <div class="ecl-file__detail-meta">\n            <span class="ecl-file__detail-meta-item" *ngFor="let el of detailMeta">{{ el }}</span>\n        </div>\n        }\n        <ng-content select="[eclFileTitle]"></ng-content>\n        @if(description) {\n            <div class="ecl-file__description">{{ description }}</div>\n        }\n        <ng-content select="ecl-file-taxonomy"></ng-content>\n    </div>\n    \n    </div>\n    <div class="ecl-file__footer">\n        <div class="ecl-file__language" [id]="langId">{{ language }}</div>\n        <div class="ecl-file__meta">{{ meta }}</div>\n        <ng-content select="[eclFileDownload]"></ng-content>\n    </div>\n<ng-content></ng-content>', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i29.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLabelDirective, selector: "[eclLabel]", inputs: ["variant"] }] });
   }
 };
 i0107.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0107, type: EclFileComponent, decorators: [{
@@ -7266,7 +7269,7 @@ i0107.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 // lib/components/ecl-file/ecl-file-item/ecl-file-item.component.mjs
 import { Component as Component47, HostBinding as HostBinding74, Input as Input41, booleanAttribute as booleanAttribute13 } from "@angular/core";
 import * as i0108 from "@angular/core";
-import * as i29 from "@angular/common";
+import * as i210 from "@angular/common";
 var EclFileItemComponent = class _EclFileItemComponent extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-file__translation-item"), this.isDescription ? "ecl-file__translation-description" : ""].join(" ").trim();
@@ -7283,7 +7286,7 @@ var EclFileItemComponent = class _EclFileItemComponent extends ECLBaseDirective
     this.ɵfac = i0108.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0108, type: _EclFileItemComponent, deps: [{ token: EclFileComponent }], target: i0108.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0108.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EclFileItemComponent, selector: "ecl-file-item", inputs: { isDescription: ["isDescription", "isDescription", booleanAttribute13], eclTitle: "eclTitle", titleId: "titleId", meta: "meta", label: "label", langDetail: "langDetail" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0108, template: '<ng-template [ngIf]="!isDescription">\n    <div class="ecl-file__translation-info">\n        <div class="ecl-file__translation-title" [id]="titleId" [attr.lang]="langDetail">{{ eclTitle }}</div>    \n        <div class="ecl-file__translation-meta">{{ meta }}</div>\n    </div>\n        <ng-content select="[eclFileTranslationDownload]"></ng-content>\n</ng-template>\n<ng-template [ngIf]="isDescription">\n    <ng-content></ng-content>\n</ng-template>', dependencies: [{ kind: "directive", type: i29.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    this.ɵcmp = i0108.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EclFileItemComponent, selector: "ecl-file-item", inputs: { isDescription: ["isDescription", "isDescription", booleanAttribute13], eclTitle: "eclTitle", titleId: "titleId", meta: "meta", label: "label", langDetail: "langDetail" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0108, template: '<ng-template [ngIf]="!isDescription">\n    <div class="ecl-file__translation-info">\n        <div class="ecl-file__translation-title" [id]="titleId" [attr.lang]="langDetail">{{ eclTitle }}</div>    \n        <div class="ecl-file__translation-meta">{{ meta }}</div>\n    </div>\n        <ng-content select="[eclFileTranslationDownload]"></ng-content>\n</ng-template>\n<ng-template [ngIf]="isDescription">\n    <ng-content></ng-content>\n</ng-template>', dependencies: [{ kind: "directive", type: i210.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   }
 };
 i0108.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0108, type: EclFileItemComponent, decorators: [{
@@ -7528,7 +7531,7 @@ i0112.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 // 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 i210 from "@ngx-translate/core";
+import * as i211 from "@ngx-translate/core";
 var EclGalleryToggleItemsEvent = class extends EclBaseEvent {
   constructor(expandAll) {
     super();
@@ -7589,7 +7592,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: i210.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "pipe", type: i211.TranslatePipe, name: "translate" }] });
   }
 };
 i0113.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0113, type: EclGalleryFooterComponent, decorators: [{
@@ -7702,7 +7705,7 @@ i0114.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 // lib/components/ecl-gallery/ecl-gallery-item.component.mjs
 import { Component as Component51, ContentChild as ContentChild16, EventEmitter as EventEmitter19, HostBinding as HostBinding79, HostListener as HostListener9, Input as Input44, Output as Output19, booleanAttribute as booleanAttribute15 } from "@angular/core";
 import * as i0115 from "@angular/core";
-import * as i119 from "@angular/platform-browser";
+import * as i118 from "@angular/platform-browser";
 var EclGalleryItemClickEvent = class extends EclBaseEvent {
 };
 var EclGalleryItemComponent = class _EclGalleryItemComponent extends ECLBaseDirective {
@@ -7755,7 +7758,7 @@ var EclGalleryItemComponent = class _EclGalleryItemComponent extends ECLBaseDire
     return this.mediaType !== "externalVideo";
   }
   static {
-    this.ɵfac = i0115.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0115, type: _EclGalleryItemComponent, deps: [{ token: i119.DomSanitizer }, { token: i0115.ElementRef }], target: i0115.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0115.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0115, type: _EclGalleryItemComponent, deps: [{ token: i118.DomSanitizer }, { token: i0115.ElementRef }], target: i0115.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i0115.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclGalleryItemComponent, selector: "ecl-gallery-item", inputs: { isShareable: ["isShareable", "isShareable", booleanAttribute15], mediaType: "mediaType", src: "src", label: "label", meta: "meta", description: "description", icon: "icon" }, outputs: { itemClick: "itemClick" }, host: { listeners: { "click": "onItemClick($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "mediaChild", first: true, predicate: EclGalleryMediaDirective, descendants: true }], usesInheritance: true, ngImport: i0115, template: `<a [href]="src" class="ecl-gallery__item-link" [attr.aria-label]="label" [class.ecl-gallery__item__link--frozen]="isNoOverlay">
@@ -7800,7 +7803,7 @@ i0115.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
         </figcaption>
     </figure>
 </a>`, styles: [".ecl-gallery__description{width:100%}\n"] }]
-}], ctorParameters: () => [{ type: i119.DomSanitizer }, { type: i0115.ElementRef }], propDecorators: { isShareable: [{
+}], ctorParameters: () => [{ type: i118.DomSanitizer }, { type: i0115.ElementRef }], propDecorators: { isShareable: [{
   type: Input44,
   args: [{ transform: booleanAttribute15 }]
 }], mediaType: [{
@@ -7837,9 +7840,9 @@ import { Component as Component52, ContentChild as ContentChild17, ContentChildr
 import { Subject as Subject13, delay } from "rxjs";
 import { takeUntil as takeUntil13 } from "rxjs/operators";
 import * as i0116 from "@angular/core";
-import * as i120 from "@angular/cdk/layout";
-import * as i211 from "@angular/common";
-import * as i82 from "@ngx-translate/core";
+import * as i119 from "@angular/cdk/layout";
+import * as i212 from "@angular/common";
+import * as i8 from "@ngx-translate/core";
 var EclGalleryShowEvent = class extends EclBaseEvent {
 };
 var EclGalleryHideEvent = class extends EclBaseEvent {
@@ -8059,7 +8062,7 @@ var EclGalleryComponent = class _EclGalleryComponent extends ECLBaseDirective {
     return this.galleryItems.filter((item, cnt) => cnt < this.maxVisibleItems);
   }
   static {
-    this.ɵfac = i0116.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0116, type: _EclGalleryComponent, deps: [{ token: i120.BreakpointObserver }], target: i0116.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0116.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0116, type: _EclGalleryComponent, deps: [{ token: i119.BreakpointObserver }], target: i0116.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i0116.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclGalleryComponent, selector: "ecl-gallery", inputs: { isOpenInFullScreenPossible: ["isOpenInFullScreenPossible", "isOpenInFullScreenPossible", booleanAttribute16], isShareable: ["isShareable", "isShareable", booleanAttribute16], isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute16], isNoOverlay: ["isNoOverlay", "isNoOverlay", booleanAttribute16], maxVisibleItems: ["maxVisibleItems", "maxVisibleItems", numberAttribute3] }, outputs: { show: "show", hide: "hide", openFullScreen: "openFullScreen", share: "share", itemSwitch: "itemSwitch" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler($event)", "window:resize": "iframeResize($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "galleryFooter", first: true, predicate: EclGalleryFooterComponent, descendants: true }, { propertyName: "galleryItems", predicate: EclGalleryItemComponent }], viewQueries: [{ propertyName: "videoChild", first: true, predicate: ["video"], descendants: true }, { propertyName: "imageChild", first: true, predicate: ["image"], descendants: true }, { propertyName: "externalVideoChild", first: true, predicate: ["externalVideo"], descendants: true }, { propertyName: "overlayChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "headerChild", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerChild", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, ngImport: i0116, template: `<ul class="ecl-gallery__list">
@@ -8150,7 +8153,7 @@ var EclGalleryComponent = class _EclGalleryComponent extends ECLBaseDirective {
             }
         </div>
     </footer>
-</dialog>`, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i211.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i82.TranslatePipe, name: "translate" }] });
+</dialog>`, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i212.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] });
   }
 };
 i0116.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0116, type: EclGalleryComponent, decorators: [{
@@ -8244,7 +8247,7 @@ i0116.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
         </div>
     </footer>
 </dialog>`, styles: [":host{display:block}\n"] }]
-}], ctorParameters: () => [{ type: i120.BreakpointObserver }], propDecorators: { isOpenInFullScreenPossible: [{
+}], ctorParameters: () => [{ type: i119.BreakpointObserver }], propDecorators: { isOpenInFullScreenPossible: [{
   type: Input45,
   args: [{ transform: booleanAttribute16 }]
 }], isShareable: [{
@@ -8429,7 +8432,7 @@ import { Component as Component54, HostBinding as HostBinding82, Input as Input4
 import { Subject as Subject14, delay as delay2 } from "rxjs";
 import { takeUntil as takeUntil14 } from "rxjs/operators";
 import * as i0120 from "@angular/core";
-import * as i121 from "@angular/cdk/layout";
+import * as i120 from "@angular/cdk/layout";
 var EclStickyContainerComponent = class _EclStickyContainerComponent extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-sticky-container"), !this.isEnabled ? "ecl-sticky-container--disabled" : ""].join(" ").trim();
@@ -8468,7 +8471,7 @@ var EclStickyContainerComponent = class _EclStickyContainerComponent extends ECL
     });
   }
   static {
-    this.ɵfac = i0120.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0120, type: _EclStickyContainerComponent, deps: [{ token: i121.BreakpointObserver }, { token: i0120.Renderer2 }, { token: i0120.ElementRef }], target: i0120.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0120.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0120, type: _EclStickyContainerComponent, deps: [{ token: i120.BreakpointObserver }, { token: i0120.Renderer2 }, { token: i0120.ElementRef }], target: i0120.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i0120.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: { isEnabled: ["isEnabled", "isEnabled", booleanAttribute17], marginTop: "marginTop", marginBottom: "marginBottom" }, host: { properties: { "class": "this.cssClasses", "style.top.px": "this.top", "style.bottom.px": "this.bottom" } }, usesInheritance: true, ngImport: i0120, template: "<ng-content></ng-content>\n", styles: [":host{display:block;align-self:flex-start;top:0;position:sticky;position:-webkit-sticky}:host.ecl-sticky-container--disabled{position:static}\n"] });
@@ -8477,7 +8480,7 @@ var EclStickyContainerComponent = class _EclStickyContainerComponent extends ECL
 i0120.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0120, type: EclStickyContainerComponent, decorators: [{
   type: Component54,
   args: [{ selector: "ecl-sticky-container", template: "<ng-content></ng-content>\n", styles: [":host{display:block;align-self:flex-start;top:0;position:sticky;position:-webkit-sticky}:host.ecl-sticky-container--disabled{position:static}\n"] }]
-}], ctorParameters: () => [{ type: i121.BreakpointObserver }, { type: i0120.Renderer2 }, { type: i0120.ElementRef }], propDecorators: { isEnabled: [{
+}], ctorParameters: () => [{ type: i120.BreakpointObserver }, { type: i0120.Renderer2 }, { type: i0120.ElementRef }], propDecorators: { isEnabled: [{
   type: Input47,
   args: [{ transform: booleanAttribute17 }]
 }], marginTop: [{
@@ -8742,7 +8745,7 @@ i0123.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 // lib/components/ecl-list-illustration/ecl-list-illustration-item.component.mjs
 import { Component as Component56, ContentChildren as ContentChildren14, forwardRef as forwardRef33, HostBinding as HostBinding83, Input as Input49 } from "@angular/core";
 import * as i0124 from "@angular/core";
-import * as i122 from "@angular/common";
+import * as i121 from "@angular/common";
 var EclListIllustrationItemComponent = class _EclListIllustrationItemComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -8760,7 +8763,7 @@ var EclListIllustrationItemComponent = class _EclListIllustrationItemComponent e
     this.ɵfac = i0124.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0124, type: _EclListIllustrationItemComponent, deps: null, target: i0124.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0124.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclListIllustrationItemComponent, selector: "ecl-list-illustration-item", inputs: { eclTitle: "eclTitle", eclValue: "eclValue" }, host: { properties: { "class.ecl-list-illustration__item": "this.className" } }, queries: [{ propertyName: "eclIllustrationIcons", predicate: i0124.forwardRef(() => EclListIllustrationIconDirective) }], usesInheritance: true, ngImport: i0124, template: '<ng-content select="[eclListIllustrationImage],[eclListIllustrationPicture]"></ng-content>\n<div class="ecl-list-illustration__detail">\n    <div *ngIf="hasTitle || hasValue" class="ecl-list-illustration__title-container">\n        <ng-content select="[eclListIllustrationIcon]"></ng-content>\n        <div *ngIf="hasValue" class="ecl-list-illustration__value">{{ eclValue }}</div>\n        <div class="ecl-list-illustration__title">{{ eclTitle }}</div>\n    </div>\n    <div class="ecl-list-illustration__description">\n        <ng-content></ng-content>\n    </div>\n</div>\n', dependencies: [{ kind: "directive", type: i122.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    this.ɵcmp = i0124.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclListIllustrationItemComponent, selector: "ecl-list-illustration-item", inputs: { eclTitle: "eclTitle", eclValue: "eclValue" }, host: { properties: { "class.ecl-list-illustration__item": "this.className" } }, queries: [{ propertyName: "eclIllustrationIcons", predicate: i0124.forwardRef(() => EclListIllustrationIconDirective) }], usesInheritance: true, ngImport: i0124, template: '<ng-content select="[eclListIllustrationImage],[eclListIllustrationPicture]"></ng-content>\n<div class="ecl-list-illustration__detail">\n    <div *ngIf="hasTitle || hasValue" class="ecl-list-illustration__title-container">\n        <ng-content select="[eclListIllustrationIcon]"></ng-content>\n        <div *ngIf="hasValue" class="ecl-list-illustration__value">{{ eclValue }}</div>\n        <div class="ecl-list-illustration__title">{{ eclTitle }}</div>\n    </div>\n    <div class="ecl-list-illustration__description">\n        <ng-content></ng-content>\n    </div>\n</div>\n', dependencies: [{ kind: "directive", type: i121.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   }
 };
 i0124.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0124, type: EclListIllustrationItemComponent, decorators: [{
@@ -8999,7 +9002,7 @@ i0129.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 // lib/components/ecl-list/ecl-description-list-definition/ecl-description-list-definition.component.mjs
 import { Component as Component58, ContentChildren as ContentChildren15, HostBinding as HostBinding88, Input as Input52 } from "@angular/core";
 import * as i0130 from "@angular/core";
-import * as i212 from "@ngx-translate/core";
+import * as i213 from "@ngx-translate/core";
 var EclDescriptionListDefinitionComponent = class _EclDescriptionListDefinitionComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -9060,7 +9063,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: i212.TranslatePipe, name: "translate" }] });
+}`, dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "pipe", type: i213.TranslatePipe, name: "translate" }] });
   }
 };
 i0130.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0130, type: EclDescriptionListDefinitionComponent, decorators: [{
@@ -9357,8 +9360,8 @@ var EclMenuItemParentFocusEvent = class {
 import { ENTER } from "@angular/cdk/keycodes";
 import { Component as Component59, ContentChildren as ContentChildren17, EventEmitter as EventEmitter23, HostBinding as HostBinding90, HostListener as HostListener11, Input as Input54, Output as Output23, ViewChild as ViewChild8, booleanAttribute as booleanAttribute21, forwardRef as forwardRef35 } from "@angular/core";
 import * as i0133 from "@angular/core";
-import * as i123 from "@angular/common";
-import * as i213 from "@angular/router";
+import * as i122 from "@angular/common";
+import * as i214 from "@angular/router";
 var EclMenuMegaItemComponent = class _EclMenuMegaItemComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -9418,7 +9421,7 @@ var EclMenuMegaItemComponent = class _EclMenuMegaItemComponent extends ECLBaseDi
     this.ɵfac = i0133.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0133, type: _EclMenuMegaItemComponent, deps: null, target: i0133.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0133.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", 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", booleanAttribute21], isSeeAll: ["isSeeAll", "isSeeAll", booleanAttribute21] }, 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<a  #megaMenuLink\n    *ngIf="href"\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\n<a  #megaMenuLink\n    *ngIf="!href"\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} @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: i123.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i123.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"] }] });
+    this.ɵcmp = i0133.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", 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", booleanAttribute21], isSeeAll: ["isSeeAll", "isSeeAll", booleanAttribute21] }, 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<a  #megaMenuLink\n    *ngIf="href"\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\n<a  #megaMenuLink\n    *ngIf="!href"\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} @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: i122.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i122.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i214.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-next.4", ngImport: i0133, type: EclMenuMegaItemComponent, decorators: [{
@@ -9624,7 +9627,7 @@ import { Subject as Subject17 } from "rxjs";
 import { takeUntil as takeUntil17 } from "rxjs/operators";
 import { Breakpoints as Breakpoints2 } from "@angular/cdk/layout";
 import * as i0135 from "@angular/core";
-import * as i124 from "@angular/cdk/layout";
+import * as i123 from "@angular/cdk/layout";
 import * as i47 from "@angular/common";
 import * as i53 from "@angular/router";
 var EclMenuItemComponent = class _EclMenuItemComponent extends ECLBaseDirective {
@@ -9897,7 +9900,7 @@ var EclMenuItemComponent = class _EclMenuItemComponent extends ECLBaseDirective
     });
   }
   static {
-    this.ɵfac = i0135.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0135, type: _EclMenuItemComponent, deps: [{ token: i0135.ElementRef }, { token: i0135.Renderer2 }, { token: i0135.ApplicationRef }, { token: i124.BreakpointObserver }], target: i0135.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0135.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0135, type: _EclMenuItemComponent, deps: [{ token: i0135.ElementRef }, { token: i0135.Renderer2 }, { token: i0135.ApplicationRef }, { token: i123.BreakpointObserver }], target: i0135.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i0135.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", 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: `<a
@@ -10024,7 +10027,7 @@ i0135.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
     <ng-content></ng-content>
 </ng-template>
 ` }]
-}], ctorParameters: () => [{ type: i0135.ElementRef }, { type: i0135.Renderer2 }, { type: i0135.ApplicationRef }, { type: i124.BreakpointObserver }], propDecorators: { id: [{
+}], ctorParameters: () => [{ type: i0135.ElementRef }, { type: i0135.Renderer2 }, { type: i0135.ApplicationRef }, { type: i123.BreakpointObserver }], propDecorators: { id: [{
   type: Input55
 }], label: [{
   type: Input55
@@ -10093,8 +10096,8 @@ import Hammer from "hammerjs";
 import { Subject as Subject18, of as of3 } from "rxjs";
 import { mergeWith as mergeWith2, takeUntil as takeUntil18 } from "rxjs/operators";
 import * as i0136 from "@angular/core";
-import * as i125 from "@angular/cdk/layout";
-import * as i83 from "@ngx-translate/core";
+import * as i124 from "@angular/cdk/layout";
+import * as i82 from "@ngx-translate/core";
 var EclMenuComponent = class _EclMenuComponent extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-menu"), "ecl-menu--transition", `ecl-menu--group${this.group}`].join(" ");
@@ -10584,7 +10587,7 @@ var EclMenuComponent = class _EclMenuComponent extends ECLBaseDirective {
     });
   }
   static {
-    this.ɵfac = i0136.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0136, type: _EclMenuComponent, deps: [{ token: i0136.ElementRef }, { token: i0136.IterableDiffers }, { token: i125.BreakpointObserver }, { token: i0136.Renderer2 }, { token: EclRtlService }], target: i0136.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0136.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0136, type: _EclMenuComponent, deps: [{ token: i0136.ElementRef }, { token: i0136.IterableDiffers }, { token: i124.BreakpointObserver }, { token: i0136.Renderer2 }, { token: EclRtlService }], target: i0136.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i0136.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclMenuComponent, selector: "ecl-menu", inputs: { group: "group", maxLines: ["maxLines", "maxLines", numberAttribute6] }, outputs: { menuItemSelect: "menuItemSelect" }, host: { listeners: { "keydown": "keyEvent($event)", "window:resize": "onResize()" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isHamburgerMenuOpened", "attr.role": "this.role", "class.ecl-menu--forced-mobile": "this.isMobileBreakpoint", "class.ecl-menu--forced-close": "this.isMenuHidden" } }, queries: [{ propertyName: "eclRootMenuItems", predicate: EclMenuItemComponent }], viewQueries: [{ propertyName: "innerSection", first: true, predicate: ["innerSection"], descendants: true }, { propertyName: "itemsList", first: true, predicate: ["itemsList"], descendants: true }, { propertyName: "btnPrevious", first: true, predicate: ["btnPrevious"], descendants: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true }], usesInheritance: true, ngImport: i0136, template: `<div class="ecl-menu__overlay" (click)="onOverlayClick()"></div>
@@ -10654,7 +10657,7 @@ var EclMenuComponent = class _EclMenuComponent extends ECLBaseDirective {
         </ul>
     </section>
 </div>
-`, styles: [":host{display:block}\n"], dependencies: [{ 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: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i83.TranslatePipe, name: "translate" }] });
+`, styles: [":host{display:block}\n"], dependencies: [{ 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: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i82.TranslatePipe, name: "translate" }] });
   }
 };
 i0136.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0136, type: EclMenuComponent, decorators: [{
@@ -10727,7 +10730,7 @@ i0136.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
     </section>
 </div>
 `, styles: [":host{display:block}\n"] }]
-}], ctorParameters: () => [{ type: i0136.ElementRef }, { type: i0136.IterableDiffers }, { type: i125.BreakpointObserver }, { type: i0136.Renderer2 }, { type: EclRtlService }], propDecorators: { group: [{
+}], ctorParameters: () => [{ type: i0136.ElementRef }, { type: i0136.IterableDiffers }, { type: i124.BreakpointObserver }, { type: i0136.Renderer2 }, { type: EclRtlService }], propDecorators: { group: [{
   type: Input56
 }], maxLines: [{
   type: Input56,
@@ -11034,7 +11037,7 @@ i0140.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 // lib/components/ecl-modal/ecl-modal-body.component.mjs
 import { Component as Component65, HostBinding as HostBinding96, Input as Input60, booleanAttribute as booleanAttribute22 } from "@angular/core";
 import * as i0141 from "@angular/core";
-import * as i126 from "@angular/common";
+import * as i125 from "@angular/common";
 var EclModalBodyComponent = class _EclModalBodyComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -11050,7 +11053,7 @@ var EclModalBodyComponent = class _EclModalBodyComponent extends ECLBaseDirectiv
     this.ɵfac = i0141.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0141, type: _EclModalBodyComponent, deps: null, target: i0141.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0141.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclModalBodyComponent, selector: "[eclModalBody]", inputs: { isScrollable: ["isScrollable", "isScrollable", booleanAttribute22] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0141, template: '@if (isScrollable) {\n<div class="ecl-modal__body-scroll">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</div>\n<div class="ecl-modal__body-overflow" aria-hidden="true"></div>\n<ng-content select="[eclModalBodyFixedContent]"></ng-content>\n} @else {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>', dependencies: [{ kind: "directive", type: i126.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    this.ɵcmp = i0141.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclModalBodyComponent, selector: "[eclModalBody]", inputs: { isScrollable: ["isScrollable", "isScrollable", booleanAttribute22] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0141, template: '@if (isScrollable) {\n<div class="ecl-modal__body-scroll">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</div>\n<div class="ecl-modal__body-overflow" aria-hidden="true"></div>\n<ng-content select="[eclModalBodyFixedContent]"></ng-content>\n} @else {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>', dependencies: [{ kind: "directive", type: i125.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
   }
 };
 i0141.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0141, type: EclModalBodyComponent, decorators: [{
@@ -11525,8 +11528,8 @@ import { coerceBoolean as coerceBoolean10 } from "@eui/base";
 import { Subject as Subject21 } from "rxjs";
 import { v4 as uuidgen4 } from "uuid";
 import * as i0150 from "@angular/core";
-import * as i127 from "@angular/common";
-import * as i9 from "@ngx-translate/core";
+import * as i126 from "@angular/common";
+import * as i92 from "@ngx-translate/core";
 var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent extends ECLBaseDirective {
   get isInvalid() {
     return this._isInvalid;
@@ -11992,7 +11995,7 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
         </button>
     </div>
 </div>
-`, dependencies: [{ kind: "directive", type: i127.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i127.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclCheckboxDirective, selector: "[eclCheckbox]", inputs: ["isDisabled", "isInvalid"] }, { kind: "component", type: EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled"] }, { kind: "directive", type: EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: ["value", "label", "disabled", "isChecked"], outputs: ["optionClick", "optionKeydown"] }, { kind: "component", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: ["eclSize", "toggleId", "isDisabled", "isInvalid", "inputPlaceholder", "selectedItems", "isDropdownExpanded", "ariaControls", "ariaDescribedby", "ariaLabeledby"], outputs: ["mainInputClick", "mainInputKeydown"] }, { kind: "component", type: EclMultiselectOptgroupComponent, selector: "fieldset[eclMultiselectOptgroup]", inputs: ["label"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "directive", type: i126.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i126.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclCheckboxDirective, selector: "[eclCheckbox]", inputs: ["isDisabled", "isInvalid"] }, { kind: "component", type: EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled"] }, { kind: "directive", type: EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: ["value", "label", "disabled", "isChecked"], outputs: ["optionClick", "optionKeydown"] }, { kind: "component", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: ["eclSize", "toggleId", "isDisabled", "isInvalid", "inputPlaceholder", "selectedItems", "isDropdownExpanded", "ariaControls", "ariaDescribedby", "ariaLabeledby"], outputs: ["mainInputClick", "mainInputKeydown"] }, { kind: "component", type: EclMultiselectOptgroupComponent, selector: "fieldset[eclMultiselectOptgroup]", inputs: ["label"] }, { kind: "pipe", type: i92.TranslatePipe, name: "translate" }] });
   }
 };
 __decorate12([
@@ -13697,7 +13700,7 @@ import { __decorate as __decorate17 } from "tslib";
 import { Component as Component78, Input as Input76 } from "@angular/core";
 import { coerceBoolean as coerceBoolean15 } from "@eui/base";
 import * as i0170 from "@angular/core";
-import * as i128 from "@ngx-translate/core";
+import * as i127 from "@ngx-translate/core";
 import * as i32 from "@angular/common";
 var EclSiteFooterFixedContentECComponent = class _EclSiteFooterFixedContentECComponent extends ECLBaseDirective {
   constructor(translateService, eclLanguageService) {
@@ -13707,7 +13710,7 @@ var EclSiteFooterFixedContentECComponent = class _EclSiteFooterFixedContentECCom
     this.isCore = false;
   }
   static {
-    this.ɵfac = i0170.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0170, type: _EclSiteFooterFixedContentECComponent, deps: [{ token: i128.TranslateService }, { token: EclLanguageService }], target: i0170.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0170.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0170, type: _EclSiteFooterFixedContentECComponent, deps: [{ token: i127.TranslateService }, { token: EclLanguageService }], target: i0170.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i0170.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclSiteFooterFixedContentECComponent, selector: "ecl-site-footer-fixed-content-ec", inputs: { isCore: "isCore", languageCode: "languageCode", ecLogoLanguageCode: "ecLogoLanguageCode", content: "content" }, usesInheritance: true, ngImport: i0170, template: `<ng-container *ngIf="isCore">
@@ -14128,7 +14131,7 @@ var EclSiteFooterFixedContentECComponent = class _EclSiteFooterFixedContentECCom
         </div>
     </div>
 </ng-container>
-`, dependencies: [{ kind: "directive", type: i32.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i32.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { 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: EclSiteFooterTitleLinkDirective, selector: "[eclSiteFooterTitleLink]" }, { kind: "directive", type: EclSiteFooterLogoLinkDirective, selector: "[eclSiteFooterLogoLink]" }, { kind: "directive", type: EclSiteFooterPictureDirective, selector: "picture[eclSiteFooterPicture]" }, { kind: "directive", type: EclSiteFooterLogoImageDirective, selector: "img[eclSiteFooterLogoImage]" }, { kind: "pipe", type: i128.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "directive", type: i32.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i32.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { 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: EclSiteFooterTitleLinkDirective, selector: "[eclSiteFooterTitleLink]" }, { kind: "directive", type: EclSiteFooterLogoLinkDirective, selector: "[eclSiteFooterLogoLink]" }, { kind: "directive", type: EclSiteFooterPictureDirective, selector: "picture[eclSiteFooterPicture]" }, { kind: "directive", type: EclSiteFooterLogoImageDirective, selector: "img[eclSiteFooterLogoImage]" }, { kind: "pipe", type: i127.TranslatePipe, name: "translate" }] });
   }
 };
 __decorate17([
@@ -14555,7 +14558,7 @@ i0170.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
     </div>
 </ng-container>
 ` }]
-}], ctorParameters: () => [{ type: i128.TranslateService }, { type: EclLanguageService }], propDecorators: { isCore: [{
+}], ctorParameters: () => [{ type: i127.TranslateService }, { type: EclLanguageService }], propDecorators: { isCore: [{
   type: Input76
 }], languageCode: [{
   type: Input76
@@ -14570,7 +14573,7 @@ import { __decorate as __decorate18 } from "tslib";
 import { Component as Component79, Input as Input77 } from "@angular/core";
 import { coerceBoolean as coerceBoolean16 } from "@eui/base";
 import * as i0171 from "@angular/core";
-import * as i129 from "@ngx-translate/core";
+import * as i128 from "@ngx-translate/core";
 import * as i33 from "@angular/common";
 var EclSiteFooterFixedContentEUComponent = class _EclSiteFooterFixedContentEUComponent extends ECLBaseDirective {
   constructor(translateService, eclLanguageService) {
@@ -14589,7 +14592,7 @@ var EclSiteFooterFixedContentEUComponent = class _EclSiteFooterFixedContentEUCom
     }
   }
   static {
-    this.ɵfac = i0171.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0171, type: _EclSiteFooterFixedContentEUComponent, deps: [{ token: i129.TranslateService }, { token: EclLanguageService }], target: i0171.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0171.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0171, type: _EclSiteFooterFixedContentEUComponent, deps: [{ token: i128.TranslateService }, { token: EclLanguageService }], target: i0171.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i0171.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclSiteFooterFixedContentEUComponent, selector: "ecl-site-footer-fixed-content-eu", inputs: { isCore: "isCore", languageCode: "languageCode", ecLogoLanguageCode: "ecLogoLanguageCode", content: "content" }, usesInheritance: true, ngImport: i0171, template: `<ng-container *ngIf="isCore">
@@ -15246,7 +15249,7 @@ var EclSiteFooterFixedContentEUComponent = class _EclSiteFooterFixedContentEUCom
         </div>
     </div>
 </ng-container>
-`, dependencies: [{ kind: "directive", type: i33.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i129.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "directive", type: i33.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i128.TranslatePipe, name: "translate" }] });
   }
 };
 __decorate18([
@@ -15909,7 +15912,7 @@ i0171.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
     </div>
 </ng-container>
 ` }]
-}], ctorParameters: () => [{ type: i129.TranslateService }, { type: EclLanguageService }], propDecorators: { isCore: [{
+}], ctorParameters: () => [{ type: i128.TranslateService }, { type: EclLanguageService }], propDecorators: { isCore: [{
   type: Input77
 }], languageCode: [{
   type: Input77
@@ -15924,7 +15927,7 @@ import { __decorate as __decorate19 } from "tslib";
 import { Component as Component80, HostBinding as HostBinding119, Input as Input78 } from "@angular/core";
 import { coerceBoolean as coerceBoolean17 } from "@eui/base";
 import * as i0172 from "@angular/core";
-import * as i130 from "@ngx-translate/core";
+import * as i129 from "@ngx-translate/core";
 import * as i34 from "@angular/common";
 var EclSiteFooterComponent = class _EclSiteFooterComponent extends ECLBaseDirective {
   get cssClasses() {
@@ -15951,7 +15954,7 @@ var EclSiteFooterComponent = class _EclSiteFooterComponent extends ECLBaseDirect
     });
   }
   static {
-    this.ɵfac = i0172.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0172, type: _EclSiteFooterComponent, deps: [{ token: i130.TranslateService }, { token: EclLanguageService }, { token: EclThemeService }], target: i0172.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0172.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0172, type: _EclSiteFooterComponent, deps: [{ token: i129.TranslateService }, { token: EclLanguageService }, { token: EclThemeService }], target: i0172.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i0172.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclSiteFooterComponent, selector: "ecl-site-footer", inputs: { isCore: "isCore" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0172, template: '<div class="ecl-container ecl-site-footer__container">\n    <ecl-site-footer-fixed-content-ec\n        *ngIf="eclThemeService.isEC$ | async"\n        [isCore]="isCore"\n        [languageCode]="languageCode"\n        [ecLogoLanguageCode]="getLanguageCode()"\n        [content]="content">\n    </ecl-site-footer-fixed-content-ec>\n\n    <ecl-site-footer-fixed-content-eu\n        *ngIf="eclThemeService.isEU$ | async"\n        [isCore]="isCore"\n        [languageCode]="languageCode"\n        [ecLogoLanguageCode]="getLanguageCode()"\n        [content]="content">\n    </ecl-site-footer-fixed-content-eu>\n\n    <ng-template #content>\n        <ng-content></ng-content>\n    </ng-template>\n</div>\n', dependencies: [{ kind: "directive", type: i34.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclSiteFooterFixedContentECComponent, selector: "ecl-site-footer-fixed-content-ec", inputs: ["isCore", "languageCode", "ecLogoLanguageCode", "content"] }, { kind: "component", type: EclSiteFooterFixedContentEUComponent, selector: "ecl-site-footer-fixed-content-eu", inputs: ["isCore", "languageCode", "ecLogoLanguageCode", "content"] }, { kind: "pipe", type: i34.AsyncPipe, name: "async" }] });
@@ -15963,7 +15966,7 @@ __decorate19([
 i0172.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0172, type: EclSiteFooterComponent, decorators: [{
   type: Component80,
   args: [{ selector: "ecl-site-footer", template: '<div class="ecl-container ecl-site-footer__container">\n    <ecl-site-footer-fixed-content-ec\n        *ngIf="eclThemeService.isEC$ | async"\n        [isCore]="isCore"\n        [languageCode]="languageCode"\n        [ecLogoLanguageCode]="getLanguageCode()"\n        [content]="content">\n    </ecl-site-footer-fixed-content-ec>\n\n    <ecl-site-footer-fixed-content-eu\n        *ngIf="eclThemeService.isEU$ | async"\n        [isCore]="isCore"\n        [languageCode]="languageCode"\n        [ecLogoLanguageCode]="getLanguageCode()"\n        [content]="content">\n    </ecl-site-footer-fixed-content-eu>\n\n    <ng-template #content>\n        <ng-content></ng-content>\n    </ng-template>\n</div>\n' }]
-}], ctorParameters: () => [{ type: i130.TranslateService }, { type: EclLanguageService }, { type: EclThemeService }], propDecorators: { isCore: [{
+}], ctorParameters: () => [{ type: i129.TranslateService }, { type: EclLanguageService }, { type: EclThemeService }], propDecorators: { isCore: [{
   type: Input78
 }], cssClasses: [{
   type: HostBinding119,
@@ -16093,6 +16096,27 @@ i0174.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 // lib/components/ecl-page-header/ecl-page-header-description.directive.mjs
 import { Directive as Directive48, HostBinding as HostBinding120 } from "@angular/core";
 import * as i0175 from "@angular/core";
+var EclPageHeaderDescriptionContainerDirective = class _EclPageHeaderDescriptionContainerDirective extends ECLBaseDirective {
+  constructor() {
+    super(...arguments);
+    this.className = "ecl-page-header__description-container";
+  }
+  static {
+    this.ɵfac = i0175.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0175, type: _EclPageHeaderDescriptionContainerDirective, deps: null, target: i0175.ɵɵFactoryTarget.Directive });
+  }
+  static {
+    this.ɵdir = i0175.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclPageHeaderDescriptionContainerDirective, selector: "[eclPageHeaderDescriptionContainer]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0175 });
+  }
+};
+i0175.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0175, type: EclPageHeaderDescriptionContainerDirective, decorators: [{
+  type: Directive48,
+  args: [{
+    selector: "[eclPageHeaderDescriptionContainer]"
+  }]
+}], propDecorators: { className: [{
+  type: HostBinding120,
+  args: ["class"]
+}] } });
 var EclPageHeaderDescriptionPictureDirective = class _EclPageHeaderDescriptionPictureDirective extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -16158,18 +16182,21 @@ i0175.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] } });
 
 // lib/components/ecl-page-header/ecl-page-header-title.directive.mjs
-import { Directive as Directive49, HostBinding as HostBinding121 } from "@angular/core";
+import { Directive as Directive49, HostBinding as HostBinding121, Input as Input79, booleanAttribute as booleanAttribute26 } from "@angular/core";
 import * as i0176 from "@angular/core";
 var EclPageHeaderTitleDirective = class _EclPageHeaderTitleDirective extends ECLBaseDirective {
   constructor() {
     super(...arguments);
-    this.className = "ecl-page-header__title";
+    this.isTitleVisible = true;
+  }
+  get cssClasses() {
+    return [super.getCssClasses("ecl-page-header__title"), !this.isTitleVisible ? "ecl-u-sr-only" : ""].join(" ").trim();
   }
   static {
     this.ɵfac = i0176.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0176, type: _EclPageHeaderTitleDirective, deps: null, target: i0176.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0176.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclPageHeaderTitleDirective, selector: "[eclPageHeaderTitle]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0176 });
+    this.ɵdir = i0176.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EclPageHeaderTitleDirective, selector: "[eclPageHeaderTitle]", inputs: { isTitleVisible: ["isTitleVisible", "isTitleVisible", booleanAttribute26] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0176 });
   }
 };
 i0176.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0176, type: EclPageHeaderTitleDirective, decorators: [{
@@ -16177,7 +16204,10 @@ i0176.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
   args: [{
     selector: "[eclPageHeaderTitle]"
   }]
-}], propDecorators: { className: [{
+}], propDecorators: { isTitleVisible: [{
+  type: Input79,
+  args: [{ transform: booleanAttribute26 }]
+}], cssClasses: [{
   type: HostBinding121,
   args: ["class"]
 }] } });
@@ -16275,105 +16305,79 @@ i0178.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] } });
 
 // lib/components/ecl-page-header/ecl-page-header.component.mjs
-import { __decorate as __decorate20 } from "tslib";
-import { Component as Component81, ContentChild as ContentChild22, HostBinding as HostBinding124, Input as Input79 } from "@angular/core";
-import { coerceBoolean as coerceBoolean18 } from "@eui/base";
+import { Component as Component81, ContentChild as ContentChild22, HostBinding as HostBinding124, Input as Input80 } from "@angular/core";
 import * as i0179 from "@angular/core";
-import * as i131 from "@angular/common";
+import * as i130 from "@angular/common";
 var EclPageHeaderComponent = class _EclPageHeaderComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
-    this.backgroundImage = null;
+    this.variantForImage = null;
     this.BREADCRUMB_CLASS = "ecl-page-header__breadcrumb";
   }
   get cssClasses() {
-    return [super.getCssClasses("ecl-page-header"), this.hasBackgroundImage || this.hasPicture ? "ecl-page-header--image" : ""].join(" ").trim();
+    return [
+      super.getCssClasses("ecl-page-header"),
+      this.hasPicture ? "ecl-page-header--image" : "",
+      this.isOverlayPossible ? `ecl-page-header--overlay-${this.variantForImage}` : ""
+    ].join(" ").trim();
   }
   ngAfterContentInit() {
     if (this.eclBreadcrumbComponent) {
       this.eclBreadcrumbComponent.class = this.BREADCRUMB_CLASS;
     }
   }
-  get hasBackgroundImage() {
-    return !!this.backgroundImage;
-  }
   get hasPicture() {
     return !!this.eclBackgroundPicture;
   }
+  get isOverlayPossible() {
+    return this.hasPicture && !!this.variantForImage;
+  }
   static {
     this.ɵfac = i0179.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0179, type: _EclPageHeaderComponent, deps: null, target: i0179.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0179.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclPageHeaderComponent, selector: "ecl-page-header", inputs: { backgroundImage: "backgroundImage", isNegative: "isNegative" }, host: { properties: { "class.ecl-page-header--negative": "this.isNegative", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclBreadcrumbComponent", first: true, predicate: EclBreadcrumbComponent, descendants: true }, { propertyName: "eclBackgroundPicture", first: true, predicate: EclPageHeaderBackgroundPictureDirective, descendants: true }], usesInheritance: true, ngImport: i0179, template: '<div *ngIf="hasBackgroundImage" class="ecl-page-header__background-container" aria-hidden="true">\n    <picture eclPageHeaderBackgroundPicture>\n        <img eclPageHeaderBackgroundImage [src]="backgroundImage" />\n    </picture>\n</div>\n\n<div *ngIf="hasPicture" class="ecl-page-header__background-container" aria-hidden="true">\n    <ng-content select="[eclPageHeaderBackgroundPicture]"></ng-content>\n</div>\n\n<div class="ecl-container">\n    <ng-container *ngTemplateOutlet="content"> </ng-container>\n</div>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i131.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i131.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclPageHeaderBackgroundPictureDirective, selector: "[eclPageHeaderBackgroundPicture]" }, { kind: "directive", type: EclPageHeaderBackgroundImageDirective, selector: "[eclPageHeaderBackgroundImage]" }] });
+    this.ɵcmp = i0179.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclPageHeaderComponent, selector: "ecl-page-header", inputs: { variantForImage: "variantForImage" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclBreadcrumbComponent", first: true, predicate: EclBreadcrumbComponent, descendants: true }, { propertyName: "eclBackgroundPicture", first: true, predicate: EclPageHeaderBackgroundPictureDirective, descendants: true }], usesInheritance: true, ngImport: i0179, template: '@if(hasPicture){\n    <div class="ecl-page-header__background-container" aria-hidden="true">\n        <ng-content select="[eclPageHeaderBackgroundPicture]"></ng-content>\n    </div>\n}\n\n<div class="ecl-container">\n    <ng-container *ngTemplateOutlet="content"> </ng-container>\n</div>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i130.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
   }
 };
-__decorate20([
-  coerceBoolean18
-], EclPageHeaderComponent.prototype, "isNegative", void 0);
 i0179.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0179, type: EclPageHeaderComponent, decorators: [{
   type: Component81,
-  args: [{ selector: "ecl-page-header", template: '<div *ngIf="hasBackgroundImage" class="ecl-page-header__background-container" aria-hidden="true">\n    <picture eclPageHeaderBackgroundPicture>\n        <img eclPageHeaderBackgroundImage [src]="backgroundImage" />\n    </picture>\n</div>\n\n<div *ngIf="hasPicture" class="ecl-page-header__background-container" aria-hidden="true">\n    <ng-content select="[eclPageHeaderBackgroundPicture]"></ng-content>\n</div>\n\n<div class="ecl-container">\n    <ng-container *ngTemplateOutlet="content"> </ng-container>\n</div>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', styles: [":host{display:block}\n"] }]
-}], propDecorators: { backgroundImage: [{
-  type: Input79
-}], isNegative: [{
-  type: Input79
-}, {
+  args: [{ selector: "ecl-page-header", template: '@if(hasPicture){\n    <div class="ecl-page-header__background-container" aria-hidden="true">\n        <ng-content select="[eclPageHeaderBackgroundPicture]"></ng-content>\n    </div>\n}\n\n<div class="ecl-container">\n    <ng-container *ngTemplateOutlet="content"> </ng-container>\n</div>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', styles: [":host{display:block}\n"] }]
+}], propDecorators: { variantForImage: [{
+  type: Input80
+}], cssClasses: [{
   type: HostBinding124,
-  args: ["class.ecl-page-header--negative"]
+  args: ["class"]
 }], eclBreadcrumbComponent: [{
   type: ContentChild22,
   args: [EclBreadcrumbComponent]
 }], eclBackgroundPicture: [{
   type: ContentChild22,
   args: [EclPageHeaderBackgroundPictureDirective]
-}], cssClasses: [{
-  type: HostBinding124,
-  args: ["class"]
 }] } });
 
-// lib/components/ecl-page-header/ecl-page-header-description/ecl-page-header-description.component.mjs
-import { Component as Component82, ContentChild as ContentChild23, HostBinding as HostBinding125 } from "@angular/core";
+// lib/components/ecl-page-header/ecl-page-header-info.directive.mjs
+import { Directive as Directive52, HostBinding as HostBinding125 } from "@angular/core";
 import * as i0180 from "@angular/core";
-import * as i132 from "@angular/common";
-var EclPageHeaderDescriptionContainerComponent = class _EclPageHeaderDescriptionContainerComponent extends ECLBaseDirective {
+var EclPageHeaderInfoDirective = class _EclPageHeaderInfoDirective extends ECLBaseDirective {
   constructor() {
     super(...arguments);
-    this.className = true;
-  }
-  get hasDescriptionPicture() {
-    return !!this.eclDescriptionPicture;
-  }
-  get hasImage() {
-    return !!this.eclImage;
-  }
-  get isAddingPictureTagRequired() {
-    if (this.thumbnail && this.hasImage && !this.hasDescriptionPicture) {
-      return true;
-    }
-    return false;
+    this.className = "ecl-page-header__info";
   }
   static {
-    this.ɵfac = i0180.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0180, type: _EclPageHeaderDescriptionContainerComponent, deps: null, target: i0180.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0180.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0180, type: _EclPageHeaderInfoDirective, deps: null, target: i0180.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵcmp = i0180.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclPageHeaderDescriptionContainerComponent, selector: "[eclPageHeaderDescriptionContainer]", host: { properties: { "class.ecl-page-header__description-container": "this.className" } }, queries: [{ propertyName: "thumbnail", first: true, predicate: EclPageHeaderDescriptionThumbnailDirective, descendants: true }, { propertyName: "eclDescriptionPicture", first: true, predicate: EclPageHeaderDescriptionPictureDirective, descendants: true }, { propertyName: "eclImage", first: true, predicate: EclPageHeaderDescriptionThumbnailDirective, descendants: true }], usesInheritance: true, ngImport: i0180, template: '<ng-container *ngIf="isAddingPictureTagRequired">\n    <picture eclPageHeaderDescriptionPicture>\n        <ng-content select="[eclPageHeaderDescriptionThumbnail]"></ng-content>\n    </picture>\n</ng-container>\n<ng-container *ngTemplateOutlet="content"> </ng-container>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "directive", type: i132.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i132.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclPageHeaderDescriptionPictureDirective, selector: "[eclPageHeaderDescriptionPicture]" }] });
+    this.ɵdir = i0180.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclPageHeaderInfoDirective, selector: "[eclPageHeaderInfo]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0180 });
   }
 };
-i0180.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0180, type: EclPageHeaderDescriptionContainerComponent, decorators: [{
-  type: Component82,
-  args: [{ selector: "[eclPageHeaderDescriptionContainer]", template: '<ng-container *ngIf="isAddingPictureTagRequired">\n    <picture eclPageHeaderDescriptionPicture>\n        <ng-content select="[eclPageHeaderDescriptionThumbnail]"></ng-content>\n    </picture>\n</ng-container>\n<ng-container *ngTemplateOutlet="content"> </ng-container>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n' }]
+i0180.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0180, type: EclPageHeaderInfoDirective, decorators: [{
+  type: Directive52,
+  args: [{
+    selector: "[eclPageHeaderInfo]"
+  }]
 }], propDecorators: { className: [{
   type: HostBinding125,
-  args: ["class.ecl-page-header__description-container"]
-}], thumbnail: [{
-  type: ContentChild23,
-  args: [EclPageHeaderDescriptionThumbnailDirective]
-}], eclDescriptionPicture: [{
-  type: ContentChild23,
-  args: [EclPageHeaderDescriptionPictureDirective]
-}], eclImage: [{
-  type: ContentChild23,
-  args: [EclPageHeaderDescriptionThumbnailDirective]
+  args: ["class"]
 }] } });
 
 // lib/components/ecl-page-header/ecl-page-header.module.mjs
@@ -16382,12 +16386,13 @@ import { CommonModule as CommonModule44 } from "@angular/common";
 import * as i0181 from "@angular/core";
 var COMPONENTS20 = [
   EclPageHeaderComponent,
+  EclPageHeaderInfoDirective,
   EclPageHeaderMetaDirective,
   EclPageHeaderMetaItemDirective,
   EclPageHeaderTitleDirective,
-  EclPageHeaderDescriptionContainerComponent,
   EclPageHeaderDescriptionDirective,
   EclPageHeaderDescriptionThumbnailDirective,
+  EclPageHeaderDescriptionContainerDirective,
   EclPageHeaderDescriptionPictureDirective,
   EclPageHeaderBackgroundPictureDirective,
   EclPageHeaderBackgroundImageDirective
@@ -16399,23 +16404,25 @@ var EclPageHeaderComponentModule = class _EclPageHeaderComponentModule {
   static {
     this.ɵmod = i0181.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.4", ngImport: i0181, type: _EclPageHeaderComponentModule, declarations: [
       EclPageHeaderComponent,
+      EclPageHeaderInfoDirective,
       EclPageHeaderMetaDirective,
       EclPageHeaderMetaItemDirective,
       EclPageHeaderTitleDirective,
-      EclPageHeaderDescriptionContainerComponent,
       EclPageHeaderDescriptionDirective,
       EclPageHeaderDescriptionThumbnailDirective,
+      EclPageHeaderDescriptionContainerDirective,
       EclPageHeaderDescriptionPictureDirective,
       EclPageHeaderBackgroundPictureDirective,
       EclPageHeaderBackgroundImageDirective
     ], imports: [CommonModule44], exports: [
       EclPageHeaderComponent,
+      EclPageHeaderInfoDirective,
       EclPageHeaderMetaDirective,
       EclPageHeaderMetaItemDirective,
       EclPageHeaderTitleDirective,
-      EclPageHeaderDescriptionContainerComponent,
       EclPageHeaderDescriptionDirective,
       EclPageHeaderDescriptionThumbnailDirective,
+      EclPageHeaderDescriptionContainerDirective,
       EclPageHeaderDescriptionPictureDirective,
       EclPageHeaderBackgroundPictureDirective,
       EclPageHeaderBackgroundImageDirective
@@ -16435,24 +16442,13 @@ i0181.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] });
 
 // lib/components/ecl-pagination/ecl-pagination-item.component.mjs
-import { __decorate as __decorate21 } from "tslib";
-import { Component as Component83, EventEmitter as EventEmitter37, HostBinding as HostBinding126, Input as Input80, Output as Output37, ViewEncapsulation as ViewEncapsulation11 } from "@angular/core";
-import { coerceBoolean as coerceBoolean19 } from "@eui/base";
+import { Component as Component82, EventEmitter as EventEmitter37, HostBinding as HostBinding126, Input as Input81, Output as Output37, ViewEncapsulation as ViewEncapsulation11, booleanAttribute as booleanAttribute27 } from "@angular/core";
 import * as i0182 from "@angular/core";
-import * as i133 from "@angular/common";
-import * as i214 from "@angular/router";
+import * as i215 from "@angular/router";
 import * as i62 from "@ngx-translate/core";
 var EclPaginationItemClickEvent = class extends EclBaseEvent {
 };
 var EclPaginationItemComponent = class _EclPaginationItemComponent extends ECLBaseDirective {
-  constructor() {
-    super(...arguments);
-    this.role = "listitem";
-    this.routerLink = null;
-    this.queryParams = null;
-    this.queryParamsHandling = null;
-    this.pageClick = new EventEmitter37();
-  }
   get cssClasses() {
     return [
       super.getCssClasses("ecl-pagination__item"),
@@ -16461,6 +16457,19 @@ var EclPaginationItemComponent = class _EclPaginationItemComponent extends ECLBa
       this.isPrevious ? "ecl-pagination__item--previous" : ""
     ].join(" ").trim();
   }
+  constructor(eclThemeService) {
+    super();
+    this.eclThemeService = eclThemeService;
+    this.role = "listitem";
+    this.isTruncated = false;
+    this.routerLink = null;
+    this.queryParams = null;
+    this.queryParamsHandling = null;
+    this.pageClick = new EventEmitter37();
+  }
+  get isIconOnly() {
+    return this.eclThemeService.isECTheme();
+  }
   onPageClick(evt) {
     this.pageClick.next(new EclPaginationItemClickEvent());
     if (!this.href) {
@@ -16487,124 +16496,183 @@ var EclPaginationItemComponent = class _EclPaginationItemComponent extends ECLBa
     }
     return key;
   }
+  isPrevOrNextVisible() {
+    return this.isPrevious || this.isNext;
+  }
   static {
-    this.ɵfac = i0182.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0182, type: _EclPaginationItemComponent, deps: null, target: i0182.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0182.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0182, type: _EclPaginationItemComponent, deps: [{ token: EclThemeService }], target: i0182.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0182.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: { label: "label", ariaLabel: "ariaLabel", isCurrent: "isCurrent", isNext: "isNext", isPrevious: "isPrevious", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href" }, outputs: { pageClick: "pageClick" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0182, template: `@if (!isCurrent) {
-<a *ngIf="routerLink" eclLink (click)="onPageClick($event)" variant="standalone"
-    attr.aria-label="{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}"
-    [routerLink]="routerLink" [queryParams]="queryParams" [queryParamsHandling]="queryParamsHandling"
-    class="ecl-pagination__link" tabindex="{{tabindex}}">
-    @if (isPrevious) {
-    <ecl-icon icon="corner-arrow" size="xs" transform="rotate-270"></ecl-icon>
-    }
-    <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>
-    @if (isNext) {
-    <ecl-icon icon="corner-arrow" size="xs" transform="rotate-90"></ecl-icon>
-    }
-</a>
-<a *ngIf="!routerLink" eclLink (click)="onPageClick($event)" variant="standalone"
-    attr.aria-label="{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}" [attr.href]="href"
-    class="ecl-pagination__link" tabindex="{{tabindex}}">
-    @if (isPrevious) {
-    <ecl-icon icon="corner-arrow" size="xs" transform="rotate-270"></ecl-icon>
-    }
-    <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>
-    @if (isNext) {
-    <ecl-icon icon="corner-arrow" size="xs" transform="rotate-90"></ecl-icon>
+    this.ɵcmp = i0182.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: { label: "label", ariaLabel: "ariaLabel", pagesCount: "pagesCount", isCurrent: ["isCurrent", "isCurrent", booleanAttribute27], isNext: ["isNext", "isNext", booleanAttribute27], isPrevious: ["isPrevious", "isPrevious", booleanAttribute27], isTruncated: ["isTruncated", "isTruncated", booleanAttribute27], routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href" }, outputs: { pageClick: "pageClick" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "class.ecl-pagination__item--truncation": "this.isTruncated" } }, usesInheritance: true, ngImport: i0182, template: `@if (!isCurrent && !isTruncated) {
+    @if(routerLink && !isPrevOrNextVisible()){
+        <a  eclLink (click)="onPageClick($event)" variant="standalone"
+           attr.aria-label="{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}"
+           [routerLink]="routerLink" [queryParams]="queryParams" [queryParamsHandling]="queryParamsHandling"
+           class="ecl-pagination__link">
+            {{ label || geti18nPageLabelKey() | translate }}
+        </a>
+    } @else if (routerLink && isPrevOrNextVisible()){
+        <a  eclLink  [isIconOnly]="isIconOnly" (click)="onPageClick($event)" variant="standalone"
+           attr.aria-label="{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}" [attr.href]="href"
+           class="ecl-pagination__link">
+            @if (isPrevious) {
+                <ecl-icon icon="corner-arrow" size="xs" transform="rotate-270"></ecl-icon>
+            }
+            <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>
+            @if (isNext) {
+                <ecl-icon icon="corner-arrow" size="xs" transform="rotate-90"></ecl-icon>
+            }
+        </a>
+    }
+
+    @if (!routerLink && !isPrevOrNextVisible()) {
+        <a eclLink (click)="onPageClick($event)" variant="standalone"
+           attr.aria-label="{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}" [attr.href]="href"
+           class="ecl-pagination__link">
+            {{ label || geti18nPageLabelKey() | translate }}
+        </a>
+    } @else if (!routerLink && isPrevOrNextVisible()) {
+        <a eclLink [isIconOnly]="isIconOnly"  (click)="onPageClick($event)" variant="standalone"
+           attr.aria-label="{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}" [attr.href]="href"
+           class="ecl-pagination__link">
+            @if (isPrevious) {
+                <ecl-icon icon="corner-arrow" size="xs" transform="rotate-270"></ecl-icon>
+            }
+            <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>
+            @if (isNext) {
+                <ecl-icon icon="corner-arrow" size="xs" transform="rotate-90"></ecl-icon>
+            }
+        </a>
     }
-</a>
 }
-@else {
-<span class="ecl-pagination__text ecl-pagination__text--summary" aria-current="true">
+
+@else if (isTruncated) {
+    <span class="ecl-pagination__text ecl-pagination__text--summary" aria-current="true">
     {{ label }}
-</span>
-<span class="ecl-pagination__text ecl-pagination__text--full" aria-current="true">
-    {{ 'ecl.pagination.PAGE' | translate: { pageNumber: label } }}
-</span>
-}`, dependencies: [{ kind: "directive", type: i133.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i214.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: i62.TranslatePipe, name: "translate" }], encapsulation: i0182.ViewEncapsulation.None });
+    </span>
+}
+@else {
+    <span class="ecl-pagination__text ecl-pagination__text--summary" aria-current="true">
+        {{ label }}
+    </span>
+
+    <span class="ecl-pagination__text ecl-pagination__text--full" aria-current="true">
+        {{ 'ecl.pagination.PAGE' | translate: { pageNumber: label }    }}
+            @if(pagesCount) {
+                {{ 'ecl.common.OF' | translate}} {{pagesCount}}
+            }
+    </span>
+}
+`, dependencies: [{ kind: "directive", type: i215.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: i62.TranslatePipe, name: "translate" }], encapsulation: i0182.ViewEncapsulation.None });
   }
 };
-__decorate21([
-  coerceBoolean19
-], EclPaginationItemComponent.prototype, "isCurrent", void 0);
-__decorate21([
-  coerceBoolean19
-], EclPaginationItemComponent.prototype, "isNext", void 0);
-__decorate21([
-  coerceBoolean19
-], EclPaginationItemComponent.prototype, "isPrevious", void 0);
 i0182.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0182, type: EclPaginationItemComponent, decorators: [{
-  type: Component83,
-  args: [{ selector: "ecl-pagination-item", encapsulation: ViewEncapsulation11.None, template: `@if (!isCurrent) {
-<a *ngIf="routerLink" eclLink (click)="onPageClick($event)" variant="standalone"
-    attr.aria-label="{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}"
-    [routerLink]="routerLink" [queryParams]="queryParams" [queryParamsHandling]="queryParamsHandling"
-    class="ecl-pagination__link" tabindex="{{tabindex}}">
-    @if (isPrevious) {
-    <ecl-icon icon="corner-arrow" size="xs" transform="rotate-270"></ecl-icon>
-    }
-    <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>
-    @if (isNext) {
-    <ecl-icon icon="corner-arrow" size="xs" transform="rotate-90"></ecl-icon>
-    }
-</a>
-<a *ngIf="!routerLink" eclLink (click)="onPageClick($event)" variant="standalone"
-    attr.aria-label="{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}" [attr.href]="href"
-    class="ecl-pagination__link" tabindex="{{tabindex}}">
-    @if (isPrevious) {
-    <ecl-icon icon="corner-arrow" size="xs" transform="rotate-270"></ecl-icon>
-    }
-    <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>
-    @if (isNext) {
-    <ecl-icon icon="corner-arrow" size="xs" transform="rotate-90"></ecl-icon>
+  type: Component82,
+  args: [{ selector: "ecl-pagination-item", encapsulation: ViewEncapsulation11.None, template: `@if (!isCurrent && !isTruncated) {
+    @if(routerLink && !isPrevOrNextVisible()){
+        <a  eclLink (click)="onPageClick($event)" variant="standalone"
+           attr.aria-label="{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}"
+           [routerLink]="routerLink" [queryParams]="queryParams" [queryParamsHandling]="queryParamsHandling"
+           class="ecl-pagination__link">
+            {{ label || geti18nPageLabelKey() | translate }}
+        </a>
+    } @else if (routerLink && isPrevOrNextVisible()){
+        <a  eclLink  [isIconOnly]="isIconOnly" (click)="onPageClick($event)" variant="standalone"
+           attr.aria-label="{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}" [attr.href]="href"
+           class="ecl-pagination__link">
+            @if (isPrevious) {
+                <ecl-icon icon="corner-arrow" size="xs" transform="rotate-270"></ecl-icon>
+            }
+            <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>
+            @if (isNext) {
+                <ecl-icon icon="corner-arrow" size="xs" transform="rotate-90"></ecl-icon>
+            }
+        </a>
+    }
+
+    @if (!routerLink && !isPrevOrNextVisible()) {
+        <a eclLink (click)="onPageClick($event)" variant="standalone"
+           attr.aria-label="{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}" [attr.href]="href"
+           class="ecl-pagination__link">
+            {{ label || geti18nPageLabelKey() | translate }}
+        </a>
+    } @else if (!routerLink && isPrevOrNextVisible()) {
+        <a eclLink [isIconOnly]="isIconOnly"  (click)="onPageClick($event)" variant="standalone"
+           attr.aria-label="{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}" [attr.href]="href"
+           class="ecl-pagination__link">
+            @if (isPrevious) {
+                <ecl-icon icon="corner-arrow" size="xs" transform="rotate-270"></ecl-icon>
+            }
+            <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>
+            @if (isNext) {
+                <ecl-icon icon="corner-arrow" size="xs" transform="rotate-90"></ecl-icon>
+            }
+        </a>
     }
-</a>
 }
-@else {
-<span class="ecl-pagination__text ecl-pagination__text--summary" aria-current="true">
+
+@else if (isTruncated) {
+    <span class="ecl-pagination__text ecl-pagination__text--summary" aria-current="true">
     {{ label }}
-</span>
-<span class="ecl-pagination__text ecl-pagination__text--full" aria-current="true">
-    {{ 'ecl.pagination.PAGE' | translate: { pageNumber: label } }}
-</span>
-}` }]
-}], propDecorators: { cssClasses: [{
+    </span>
+}
+@else {
+    <span class="ecl-pagination__text ecl-pagination__text--summary" aria-current="true">
+        {{ label }}
+    </span>
+
+    <span class="ecl-pagination__text ecl-pagination__text--full" aria-current="true">
+        {{ 'ecl.pagination.PAGE' | translate: { pageNumber: label }    }}
+            @if(pagesCount) {
+                {{ 'ecl.common.OF' | translate}} {{pagesCount}}
+            }
+    </span>
+}
+` }]
+}], ctorParameters: () => [{ type: EclThemeService }], propDecorators: { cssClasses: [{
   type: HostBinding126,
   args: ["class"]
 }], role: [{
   type: HostBinding126,
   args: ["attr.role"]
 }], label: [{
-  type: Input80
+  type: Input81
 }], ariaLabel: [{
-  type: Input80
+  type: Input81
+}], pagesCount: [{
+  type: Input81
 }], isCurrent: [{
-  type: Input80
+  type: Input81,
+  args: [{ transform: booleanAttribute27 }]
 }], isNext: [{
-  type: Input80
+  type: Input81,
+  args: [{ transform: booleanAttribute27 }]
 }], isPrevious: [{
-  type: Input80
+  type: Input81,
+  args: [{ transform: booleanAttribute27 }]
+}], isTruncated: [{
+  type: Input81,
+  args: [{ transform: booleanAttribute27 }]
+}, {
+  type: HostBinding126,
+  args: ["class.ecl-pagination__item--truncation"]
 }], routerLink: [{
-  type: Input80
+  type: Input81
 }], queryParams: [{
-  type: Input80
+  type: Input81
 }], queryParamsHandling: [{
-  type: Input80
+  type: Input81
 }], href: [{
-  type: Input80
+  type: Input81
 }], pageClick: [{
   type: Output37
 }] } });
 
 // lib/components/ecl-pagination/ecl-pagination.component.mjs
-import { __decorate as __decorate22 } from "tslib";
-import { Component as Component84, EventEmitter as EventEmitter38, HostBinding as HostBinding127, Input as Input81, Output as Output38 } from "@angular/core";
+import { Component as Component83, EventEmitter as EventEmitter38, HostBinding as HostBinding127, Input as Input82, Output as Output38, numberAttribute as numberAttribute8 } from "@angular/core";
 import { DefaultConfig, EuiPagination } from "@eui/base";
-import { coerceNumber } from "@eui/base";
 import * as i0183 from "@angular/core";
-import * as i134 from "@angular/common";
+import * as i131 from "@angular/common";
 var EclPaginationEvent = class extends EclBaseEvent {
   constructor(page, showingFrom, showingTo) {
     super();
@@ -16666,34 +16734,26 @@ var EclPaginationComponent = class _EclPaginationComponent extends ECLBaseDirect
     this.ɵfac = i0183.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0183, type: _EclPaginationComponent, deps: null, target: i0183.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0183.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclPaginationComponent, selector: "ecl-pagination", inputs: { mode: "mode", totalItems: "totalItems", pageSize: "pageSize", currentPage: "currentPage", pageWindowSize: "pageWindowSize" }, outputs: { page: "page" }, host: { properties: { "class.ecl-pagination": "this.cmpClass", "attr.role": "this.role" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0183, template: '<ul class="ecl-pagination__list">\n    <ng-container *ngIf="isModeAuto()">\n        <ecl-pagination-item *ngIf="model.hasPreviousPage()" [isPrevious]="true" (pageClick)="onPreviousPage()"> </ecl-pagination-item>\n\n        <ecl-pagination-item\n            *ngFor="let page of model.getPages()"\n            [label]="page.toString()"\n            [isCurrent]="model.getCurrentPage() === page"\n            (pageClick)="onPage(page)">\n        </ecl-pagination-item>\n\n        <ecl-pagination-item *ngIf="model.hasNextPage()" [isNext]="true" (pageClick)="onNextPage()"> </ecl-pagination-item>\n    </ng-container>\n\n    <ng-container *ngIf="!isModeAuto()">\n        <ng-content></ng-content>\n    </ng-container>\n</ul>\n', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i134.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i134.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: ["label", "ariaLabel", "isCurrent", "isNext", "isPrevious", "routerLink", "queryParams", "queryParamsHandling", "href"], outputs: ["pageClick"] }] });
+    this.ɵcmp = i0183.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclPaginationComponent, selector: "ecl-pagination", inputs: { mode: "mode", totalItems: ["totalItems", "totalItems", numberAttribute8], pageSize: ["pageSize", "pageSize", numberAttribute8], currentPage: ["currentPage", "currentPage", numberAttribute8], pageWindowSize: ["pageWindowSize", "pageWindowSize", numberAttribute8] }, outputs: { page: "page" }, host: { properties: { "class.ecl-pagination": "this.cmpClass", "attr.role": "this.role" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0183, template: '<ul class="ecl-pagination__list">\n    @if (isModeAuto()){\n        @if(model.hasPreviousPage()){\n            <ecl-pagination-item [isPrevious]="true" (pageClick)="onPreviousPage()"> </ecl-pagination-item>\n        }\n\n        <ecl-pagination-item\n            *ngFor="let page of model.getPages()"\n            [label]="page.toString()"\n            [isCurrent]="model.getCurrentPage() === page"\n            (pageClick)="onPage(page)"\n            [pagesCount]="model.getPagesCount().toString()"\n            >\n        </ecl-pagination-item>\n\n        @if(model.hasNextPage()){\n            <ecl-pagination-item [isNext]="true" (pageClick)="onNextPage()"> </ecl-pagination-item>\n        }\n    }\n\n    @if(!isModeAuto()){\n        <ng-content></ng-content>\n    }\n</ul>\n', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i131.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: ["label", "ariaLabel", "pagesCount", "isCurrent", "isNext", "isPrevious", "isTruncated", "routerLink", "queryParams", "queryParamsHandling", "href"], outputs: ["pageClick"] }] });
   }
 };
-__decorate22([
-  coerceNumber
-], EclPaginationComponent.prototype, "totalItems", void 0);
-__decorate22([
-  coerceNumber
-], EclPaginationComponent.prototype, "pageSize", void 0);
-__decorate22([
-  coerceNumber
-], EclPaginationComponent.prototype, "currentPage", void 0);
-__decorate22([
-  coerceNumber
-], EclPaginationComponent.prototype, "pageWindowSize", void 0);
 i0183.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0183, type: EclPaginationComponent, decorators: [{
-  type: Component84,
-  args: [{ selector: "ecl-pagination", template: '<ul class="ecl-pagination__list">\n    <ng-container *ngIf="isModeAuto()">\n        <ecl-pagination-item *ngIf="model.hasPreviousPage()" [isPrevious]="true" (pageClick)="onPreviousPage()"> </ecl-pagination-item>\n\n        <ecl-pagination-item\n            *ngFor="let page of model.getPages()"\n            [label]="page.toString()"\n            [isCurrent]="model.getCurrentPage() === page"\n            (pageClick)="onPage(page)">\n        </ecl-pagination-item>\n\n        <ecl-pagination-item *ngIf="model.hasNextPage()" [isNext]="true" (pageClick)="onNextPage()"> </ecl-pagination-item>\n    </ng-container>\n\n    <ng-container *ngIf="!isModeAuto()">\n        <ng-content></ng-content>\n    </ng-container>\n</ul>\n', styles: [":host{display:block}\n"] }]
+  type: Component83,
+  args: [{ selector: "ecl-pagination", template: '<ul class="ecl-pagination__list">\n    @if (isModeAuto()){\n        @if(model.hasPreviousPage()){\n            <ecl-pagination-item [isPrevious]="true" (pageClick)="onPreviousPage()"> </ecl-pagination-item>\n        }\n\n        <ecl-pagination-item\n            *ngFor="let page of model.getPages()"\n            [label]="page.toString()"\n            [isCurrent]="model.getCurrentPage() === page"\n            (pageClick)="onPage(page)"\n            [pagesCount]="model.getPagesCount().toString()"\n            >\n        </ecl-pagination-item>\n\n        @if(model.hasNextPage()){\n            <ecl-pagination-item [isNext]="true" (pageClick)="onNextPage()"> </ecl-pagination-item>\n        }\n    }\n\n    @if(!isModeAuto()){\n        <ng-content></ng-content>\n    }\n</ul>\n', styles: [":host{display:block}\n"] }]
 }], propDecorators: { mode: [{
-  type: Input81
+  type: Input82
 }], totalItems: [{
-  type: Input81
+  type: Input82,
+  args: [{ transform: numberAttribute8 }]
 }], pageSize: [{
-  type: Input81
+  type: Input82,
+  args: [{ transform: numberAttribute8 }]
 }], currentPage: [{
-  type: Input81
+  type: Input82,
+  args: [{ transform: numberAttribute8 }]
 }], pageWindowSize: [{
-  type: Input81
+  type: Input82,
+  args: [{ transform: numberAttribute8 }]
 }], page: [{
   type: Output38
 }], cmpClass: [{
@@ -16731,7 +16791,7 @@ i0184.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] });
 
 // lib/components/ecl-popover/ecl-popover-content.directive.mjs
-import { Directive as Directive52, HostBinding as HostBinding128 } from "@angular/core";
+import { Directive as Directive53, HostBinding as HostBinding128 } from "@angular/core";
 import * as i0185 from "@angular/core";
 var EclPopoverContentDirective = class _EclPopoverContentDirective extends ECLBaseDirective {
   get cssClasses() {
@@ -16745,7 +16805,7 @@ var EclPopoverContentDirective = class _EclPopoverContentDirective extends ECLBa
   }
 };
 i0185.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0185, type: EclPopoverContentDirective, decorators: [{
-  type: Directive52,
+  type: Directive53,
   args: [{
     selector: "[eclPopoverContent]"
   }]
@@ -16755,7 +16815,7 @@ i0185.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] } });
 
 // lib/components/ecl-popover/ecl-popover-toggle.directive.mjs
-import { Directive as Directive53, EventEmitter as EventEmitter39, HostBinding as HostBinding129, HostListener as HostListener19, Output as Output39 } from "@angular/core";
+import { Directive as Directive54, EventEmitter as EventEmitter39, HostBinding as HostBinding129, HostListener as HostListener19, Output as Output39 } from "@angular/core";
 import * as i0186 from "@angular/core";
 var EclPopoverToggleDirective = class _EclPopoverToggleDirective extends ECLBaseDirective {
   constructor(hostElementRef) {
@@ -16784,7 +16844,7 @@ var EclPopoverToggleDirective = class _EclPopoverToggleDirective extends ECLBase
   }
 };
 i0186.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0186, type: EclPopoverToggleDirective, decorators: [{
-  type: Directive53,
+  type: Directive54,
   args: [{
     selector: "[eclPopoverToggle]"
   }]
@@ -16802,7 +16862,7 @@ i0186.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] } });
 
 // lib/components/ecl-popover/ecl-popover.component.mjs
-import { Component as Component85, ContentChild as ContentChild24, HostBinding as HostBinding130, HostListener as HostListener20, ViewChild as ViewChild15 } from "@angular/core";
+import { Component as Component84, ContentChild as ContentChild23, HostBinding as HostBinding130, HostListener as HostListener20, ViewChild as ViewChild15 } from "@angular/core";
 import { Subject as Subject26, takeUntil as takeUntil23 } from "rxjs";
 import * as i0187 from "@angular/core";
 var EclPopoverComponent = class _EclPopoverComponent extends ECLBaseDirective {
@@ -16989,7 +17049,7 @@ var EclPopoverComponent = class _EclPopoverComponent extends ECLBaseDirective {
   }
 };
 i0187.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0187, type: EclPopoverComponent, decorators: [{
-  type: Component85,
+  type: Component84,
   args: [{ selector: "ecl-popover", hostDirectives: [
     {
       directive: ECLClickOutsideDirective,
@@ -17004,7 +17064,7 @@ i0187.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
   type: ViewChild15,
   args: ["scrollable"]
 }], eclPopoverToggle: [{
-  type: ContentChild24,
+  type: ContentChild23,
   args: [EclPopoverToggleDirective]
 }], cssClasses: [{
   type: HostBinding130,
@@ -17061,9 +17121,9 @@ i0188.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] });
 
 // lib/components/ecl-radio/ecl-radio-help.component.mjs
-import { __decorate as __decorate23 } from "tslib";
-import { Component as Component86, HostBinding as HostBinding131, Input as Input82 } from "@angular/core";
-import { coerceBoolean as coerceBoolean20 } from "@eui/base";
+import { __decorate as __decorate20 } from "tslib";
+import { Component as Component85, HostBinding as HostBinding131, Input as Input83 } from "@angular/core";
+import { coerceBoolean as coerceBoolean18 } from "@eui/base";
 import * as i0189 from "@angular/core";
 var EclRadioHelpComponent = class _EclRadioHelpComponent extends ECLBaseDirective {
   constructor() {
@@ -17080,14 +17140,14 @@ var EclRadioHelpComponent = class _EclRadioHelpComponent extends ECLBaseDirectiv
     this.ɵcmp = i0189.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclRadioHelpComponent, selector: "[eclRadioHelp]", inputs: { isDisabled: "isDisabled" }, host: { properties: { "class.ecl-radio__help--disabled": "this.isDisabled", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0189, template: "<ng-content></ng-content>\n" });
   }
 };
-__decorate23([
-  coerceBoolean20
+__decorate20([
+  coerceBoolean18
 ], EclRadioHelpComponent.prototype, "isDisabled", void 0);
 i0189.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0189, type: EclRadioHelpComponent, decorators: [{
-  type: Component86,
+  type: Component85,
   args: [{ selector: "[eclRadioHelp]", template: "<ng-content></ng-content>\n" }]
 }], propDecorators: { isDisabled: [{
-  type: Input82
+  type: Input83
 }, {
   type: HostBinding131,
   args: ["class.ecl-radio__help--disabled"]
@@ -17097,9 +17157,9 @@ i0189.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] } });
 
 // lib/components/ecl-radio/ecl-radio-label.component.mjs
-import { __decorate as __decorate24 } from "tslib";
-import { Component as Component87, HostBinding as HostBinding132, Input as Input83, ViewEncapsulation as ViewEncapsulation13 } from "@angular/core";
-import { coerceBoolean as coerceBoolean21 } from "@eui/base";
+import { __decorate as __decorate21 } from "tslib";
+import { Component as Component86, HostBinding as HostBinding132, Input as Input84, ViewEncapsulation as ViewEncapsulation13 } from "@angular/core";
+import { coerceBoolean as coerceBoolean19 } from "@eui/base";
 import * as i0190 from "@angular/core";
 var EclRadioLabelComponent = class _EclRadioLabelComponent extends ECLBaseDirective {
   constructor() {
@@ -17117,28 +17177,28 @@ var EclRadioLabelComponent = class _EclRadioLabelComponent extends ECLBaseDirect
     this.ɵcmp = i0190.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclRadioLabelComponent, selector: "[eclRadioLabel]", inputs: { isInvalid: "isInvalid", isDisabled: "isDisabled" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0190, template: '<span class="ecl-radio__box" [class.ecl-radio__box--disabled]="isDisabled" [class.ecl-radio__box--invalid]="isInvalid">\n    <span class="ecl-radio__box-inner"></span>\n</span>\n\n<ng-content></ng-content>\n', encapsulation: i0190.ViewEncapsulation.None });
   }
 };
-__decorate24([
-  coerceBoolean21
+__decorate21([
+  coerceBoolean19
 ], EclRadioLabelComponent.prototype, "isInvalid", void 0);
-__decorate24([
-  coerceBoolean21
+__decorate21([
+  coerceBoolean19
 ], EclRadioLabelComponent.prototype, "isDisabled", void 0);
 i0190.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0190, type: EclRadioLabelComponent, decorators: [{
-  type: Component87,
+  type: Component86,
   args: [{ selector: "[eclRadioLabel]", encapsulation: ViewEncapsulation13.None, template: '<span class="ecl-radio__box" [class.ecl-radio__box--disabled]="isDisabled" [class.ecl-radio__box--invalid]="isInvalid">\n    <span class="ecl-radio__box-inner"></span>\n</span>\n\n<ng-content></ng-content>\n' }]
 }], propDecorators: { isInvalid: [{
-  type: Input83
+  type: Input84
 }], isDisabled: [{
-  type: Input83
+  type: Input84
 }], cssClasses: [{
   type: HostBinding132,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-radio/ecl-radio.directive.mjs
-import { __decorate as __decorate25 } from "tslib";
-import { ContentChild as ContentChild25, Directive as Directive54, forwardRef as forwardRef50, HostBinding as HostBinding133, Input as Input84 } from "@angular/core";
-import { coerceBoolean as coerceBoolean22 } from "@eui/base";
+import { __decorate as __decorate22 } from "tslib";
+import { ContentChild as ContentChild24, Directive as Directive55, forwardRef as forwardRef50, HostBinding as HostBinding133, Input as Input85 } from "@angular/core";
+import { coerceBoolean as coerceBoolean20 } from "@eui/base";
 import * as i0191 from "@angular/core";
 var EclRadioDirective = class _EclRadioDirective extends ECLBaseDirective {
   constructor() {
@@ -17168,37 +17228,37 @@ var EclRadioDirective = class _EclRadioDirective extends ECLBaseDirective {
     this.ɵdir = i0191.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclRadioDirective, selector: "[eclRadio]", inputs: { isBinary: "isBinary", isDisabled: "isDisabled", isInvalid: "isInvalid" }, host: { properties: { "class.ecl-radio--disabled": "this.isDisabled", "class.ecl-radio--invalid": "this.isInvalid", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclRadioLabelComponent", first: true, predicate: i0191.forwardRef(() => EclRadioLabelComponent), descendants: true }, { propertyName: "eclRadioHelpComponent", first: true, predicate: i0191.forwardRef(() => EclRadioHelpComponent), descendants: true }], usesInheritance: true, ngImport: i0191 });
   }
 };
-__decorate25([
-  coerceBoolean22
+__decorate22([
+  coerceBoolean20
 ], EclRadioDirective.prototype, "isBinary", void 0);
-__decorate25([
-  coerceBoolean22
-], EclRadioDirective.prototype, "isDisabled", void 0);
-__decorate25([
-  coerceBoolean22
+__decorate22([
+  coerceBoolean20
+], EclRadioDirective.prototype, "isDisabled", void 0);
+__decorate22([
+  coerceBoolean20
 ], EclRadioDirective.prototype, "isInvalid", void 0);
 i0191.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0191, type: EclRadioDirective, decorators: [{
-  type: Directive54,
+  type: Directive55,
   args: [{
     selector: "[eclRadio]"
   }]
 }], propDecorators: { isBinary: [{
-  type: Input84
+  type: Input85
 }], isDisabled: [{
-  type: Input84
+  type: Input85
 }, {
   type: HostBinding133,
   args: ["class.ecl-radio--disabled"]
 }], isInvalid: [{
-  type: Input84
+  type: Input85
 }, {
   type: HostBinding133,
   args: ["class.ecl-radio--invalid"]
 }], eclRadioLabelComponent: [{
-  type: ContentChild25,
+  type: ContentChild24,
   args: [forwardRef50(() => EclRadioLabelComponent)]
 }], eclRadioHelpComponent: [{
-  type: ContentChild25,
+  type: ContentChild24,
   args: [forwardRef50(() => EclRadioHelpComponent)]
 }], cssClasses: [{
   type: HostBinding133,
@@ -17206,9 +17266,9 @@ i0191.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] } });
 
 // lib/components/ecl-radio/ecl-radio-input.directive.mjs
-import { Directive as Directive55, HostBinding as HostBinding134, Optional as Optional6, Self as Self4, Inject as Inject5, forwardRef as forwardRef52 } from "@angular/core";
+import { Directive as Directive56, HostBinding as HostBinding134, Optional as Optional6, Self as Self4, Inject as Inject5, forwardRef as forwardRef52 } from "@angular/core";
 import * as i0192 from "@angular/core";
-import * as i135 from "@angular/forms";
+import * as i132 from "@angular/forms";
 var EclRadioInputDirective = class _EclRadioInputDirective extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-radio__input")].join(" ").trim();
@@ -17228,21 +17288,21 @@ var EclRadioInputDirective = class _EclRadioInputDirective extends ECLBaseDirect
     }
   }
   static {
-    this.ɵfac = i0192.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0192, type: _EclRadioInputDirective, deps: [{ token: forwardRef52(() => EclRadioDirective) }, { token: i135.NgControl, optional: true, self: true }, { token: i0192.ChangeDetectorRef }], target: i0192.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0192.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0192, type: _EclRadioInputDirective, deps: [{ token: forwardRef52(() => EclRadioDirective) }, { token: i132.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-next.4", type: _EclRadioInputDirective, selector: "input[eclRadioInput]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0192 });
   }
 };
 i0192.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0192, type: EclRadioInputDirective, decorators: [{
-  type: Directive55,
+  type: Directive56,
   args: [{
     selector: "input[eclRadioInput]"
   }]
 }], ctorParameters: () => [{ type: EclRadioDirective, decorators: [{
   type: Inject5,
   args: [forwardRef52(() => EclRadioDirective)]
-}] }, { type: i135.NgControl, decorators: [{
+}] }, { type: i132.NgControl, decorators: [{
   type: Optional6
 }, {
   type: Self4
@@ -17276,12 +17336,12 @@ i0193.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] });
 
 // lib/components/ecl-rating-field/ecl-rating-field.component.mjs
-import { __decorate as __decorate26 } from "tslib";
-import { Component as Component88, EventEmitter as EventEmitter40, forwardRef as forwardRef53, HostBinding as HostBinding135, Input as Input85, Output as Output40 } from "@angular/core";
+import { __decorate as __decorate23 } from "tslib";
+import { Component as Component87, EventEmitter as EventEmitter40, forwardRef as forwardRef53, HostBinding as HostBinding135, Input as Input86, Output as Output40 } from "@angular/core";
 import { NG_VALUE_ACCESSOR as NG_VALUE_ACCESSOR6 } from "@angular/forms";
-import { coerceBoolean as coerceBoolean23, coerceNumber as coerceNumber2 } from "@eui/base";
+import { coerceBoolean as coerceBoolean21, coerceNumber } from "@eui/base";
 import * as i0194 from "@angular/core";
-import * as i136 from "@angular/common";
+import * as i133 from "@angular/common";
 var EclRatingChangeEvent = class extends EclBaseEvent {
   constructor(value) {
     super();
@@ -17335,34 +17395,34 @@ var EclRatingFieldComponent = class _EclRatingFieldComponent extends ECLBaseDire
     this.ɵfac = i0194.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0194, type: _EclRatingFieldComponent, deps: [], target: i0194.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0194.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclRatingFieldComponent, selector: "ecl-rating-field", inputs: { name: "name", numberOfStars: "numberOfStars", rating: "rating", disabled: "disabled" }, outputs: { ratingChange: "ratingChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [ECL_RATINGFIELD_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0194, template: '<ng-container *ngFor="let n of numbers">\n    <input\n        type="radio"\n        id="{{ name }}-{{ n }}"\n        [name]="name"\n        class="ecl-rating-field__input"\n        [value]="n"\n        required=""\n        [attr.checked]="rating === n ? true : undefined"\n        [attr.disabled]="disabled ? true : undefined"\n        (click)="onRadioClick(n)" />\n    <label class="ecl-rating-field__label" for="{{ name }}-{{ n }}">\n        <span class="ecl-u-sr-only">{{ n }} stars</span>\n        <ecl-icon icon="star-filled" class="ecl-rating-field__icon-filled" size="m"> </ecl-icon>\n        <ecl-icon icon="star-outline" class="ecl-rating-field__icon-outline" size="m"> </ecl-icon>\n    </label>\n</ng-container>\n', dependencies: [{ kind: "directive", type: i136.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
+    this.ɵcmp = i0194.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclRatingFieldComponent, selector: "ecl-rating-field", inputs: { name: "name", numberOfStars: "numberOfStars", rating: "rating", disabled: "disabled" }, outputs: { ratingChange: "ratingChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [ECL_RATINGFIELD_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0194, template: '<ng-container *ngFor="let n of numbers">\n    <input\n        type="radio"\n        id="{{ name }}-{{ n }}"\n        [name]="name"\n        class="ecl-rating-field__input"\n        [value]="n"\n        required=""\n        [attr.checked]="rating === n ? true : undefined"\n        [attr.disabled]="disabled ? true : undefined"\n        (click)="onRadioClick(n)" />\n    <label class="ecl-rating-field__label" for="{{ name }}-{{ n }}">\n        <span class="ecl-u-sr-only">{{ n }} stars</span>\n        <ecl-icon icon="star-filled" class="ecl-rating-field__icon-filled" size="m"> </ecl-icon>\n        <ecl-icon icon="star-outline" class="ecl-rating-field__icon-outline" size="m"> </ecl-icon>\n    </label>\n</ng-container>\n', dependencies: [{ kind: "directive", type: i133.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
   }
 };
-__decorate26([
-  coerceNumber2
+__decorate23([
+  coerceNumber
 ], EclRatingFieldComponent.prototype, "numberOfStars", void 0);
-__decorate26([
-  coerceNumber2
+__decorate23([
+  coerceNumber
 ], EclRatingFieldComponent.prototype, "rating", void 0);
-__decorate26([
-  coerceBoolean23
+__decorate23([
+  coerceBoolean21
 ], EclRatingFieldComponent.prototype, "disabled", void 0);
 i0194.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0194, type: EclRatingFieldComponent, decorators: [{
-  type: Component88,
+  type: Component87,
   args: [{ selector: "ecl-rating-field", providers: [ECL_RATINGFIELD_VALUE_ACCESSOR], template: '<ng-container *ngFor="let n of numbers">\n    <input\n        type="radio"\n        id="{{ name }}-{{ n }}"\n        [name]="name"\n        class="ecl-rating-field__input"\n        [value]="n"\n        required=""\n        [attr.checked]="rating === n ? true : undefined"\n        [attr.disabled]="disabled ? true : undefined"\n        (click)="onRadioClick(n)" />\n    <label class="ecl-rating-field__label" for="{{ name }}-{{ n }}">\n        <span class="ecl-u-sr-only">{{ n }} stars</span>\n        <ecl-icon icon="star-filled" class="ecl-rating-field__icon-filled" size="m"> </ecl-icon>\n        <ecl-icon icon="star-outline" class="ecl-rating-field__icon-outline" size="m"> </ecl-icon>\n    </label>\n</ng-container>\n' }]
 }], ctorParameters: () => [], propDecorators: {
   name: [{
-    type: Input85
+    type: Input86
   }],
   numberOfStars: [{
-    type: Input85
+    type: Input86
   }],
   rating: [{
-    type: Input85
+    type: Input86
   }],
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   disabled: [{
-    type: Input85
+    type: Input86
   }, {
     type: HostBinding135,
     args: ["attr.disabled"]
@@ -17402,9 +17462,9 @@ i0195.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] });
 
 // lib/components/ecl-range/ecl-range-value.component.mjs
-import { Component as Component89, HostBinding as HostBinding136, Input as Input86 } from "@angular/core";
+import { Component as Component88, HostBinding as HostBinding136, Input as Input87 } from "@angular/core";
 import * as i0196 from "@angular/core";
-import * as i137 from "@ngx-translate/core";
+import * as i134 from "@ngx-translate/core";
 var EclRangeValueComponent = class _EclRangeValueComponent extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-range__value")].join(" ").trim();
@@ -17414,27 +17474,27 @@ var EclRangeValueComponent = class _EclRangeValueComponent extends ECLBaseDirect
   }
   static {
     this.ɵcmp = i0196.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclRangeValueComponent, selector: "ecl-range-value", inputs: { value: "value" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0196, template: `{{ 'ecl.common.VALUE' | translate }}: <span class="ecl-range__value-current"> {{ value }} </span>
-`, styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: i137.TranslatePipe, name: "translate" }] });
+`, styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: i134.TranslatePipe, name: "translate" }] });
   }
 };
 i0196.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0196, type: EclRangeValueComponent, decorators: [{
-  type: Component89,
+  type: Component88,
   args: [{ selector: "ecl-range-value", template: `{{ 'ecl.common.VALUE' | translate }}: <span class="ecl-range__value-current"> {{ value }} </span>
 `, styles: [":host{display:block}\n"] }]
 }], propDecorators: { value: [{
-  type: Input86
+  type: Input87
 }], cssClasses: [{
   type: HostBinding136,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-range/ecl-range.directive.mjs
-import { __decorate as __decorate27 } from "tslib";
-import { Directive as Directive56, EventEmitter as EventEmitter41, HostBinding as HostBinding137, HostListener as HostListener21, Input as Input87, Optional as Optional7, Output as Output41, Self as Self5 } from "@angular/core";
-import { coerceBoolean as coerceBoolean24 } from "@eui/base";
+import { __decorate as __decorate24 } from "tslib";
+import { Directive as Directive57, EventEmitter as EventEmitter41, HostBinding as HostBinding137, HostListener as HostListener21, Input as Input88, Optional as Optional7, Output as Output41, Self as Self5 } from "@angular/core";
+import { coerceBoolean as coerceBoolean22 } from "@eui/base";
 import { distinctUntilChanged } from "rxjs";
 import * as i0197 from "@angular/core";
-import * as i138 from "@angular/forms";
+import * as i135 from "@angular/forms";
 var EclRangeEvent = class extends EclBaseEvent {
   constructor(value) {
     super();
@@ -17483,30 +17543,30 @@ var EclRangeDirective = class _EclRangeDirective extends ECLBaseDirective {
     this.rangeChange.next(new EclRangeEvent(numberValue));
   }
   static {
-    this.ɵfac = i0197.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0197, type: _EclRangeDirective, deps: [{ token: i0197.ViewContainerRef }, { token: i138.NgControl, optional: true, self: true }], target: i0197.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0197.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0197, type: _EclRangeDirective, deps: [{ token: i0197.ViewContainerRef }, { token: i135.NgControl, optional: true, self: true }], target: i0197.ɵɵFactoryTarget.Directive });
   }
   static {
     this.ɵdir = i0197.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclRangeDirective, selector: "input[eclRange]", inputs: { eclSize: "eclSize", value: "value", hasValueLabel: "hasValueLabel" }, outputs: { rangeChange: "rangeChange" }, host: { listeners: { "input": "onInput($event)" }, properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0197 });
   }
 };
-__decorate27([
-  coerceBoolean24
+__decorate24([
+  coerceBoolean22
 ], EclRangeDirective.prototype, "hasValueLabel", void 0);
 i0197.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0197, type: EclRangeDirective, decorators: [{
-  type: Directive56,
+  type: Directive57,
   args: [{
     selector: "input[eclRange]"
   }]
-}], ctorParameters: () => [{ type: i0197.ViewContainerRef }, { type: i138.NgControl, decorators: [{
+}], ctorParameters: () => [{ type: i0197.ViewContainerRef }, { type: i135.NgControl, decorators: [{
   type: Optional7
 }, {
   type: Self5
 }] }], propDecorators: { eclSize: [{
-  type: Input87
+  type: Input88
 }], value: [{
-  type: Input87
+  type: Input88
 }], hasValueLabel: [{
-  type: Input87
+  type: Input88
 }], rangeChange: [{
   type: Output41
 }], cssClasses: [{
@@ -17544,7 +17604,7 @@ i0198.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] });
 
 // lib/components/ecl-select/ecl-select-container.component.mjs
-import { Component as Component90, HostBinding as HostBinding138, Input as Input88 } from "@angular/core";
+import { Component as Component89, HostBinding as HostBinding138, Input as Input89 } from "@angular/core";
 import * as i0199 from "@angular/core";
 var EclSelectContainerComponent = class _EclSelectContainerComponent extends ECLBaseDirective {
   constructor() {
@@ -17567,25 +17627,25 @@ var EclSelectContainerComponent = class _EclSelectContainerComponent extends ECL
   }
 };
 i0199.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0199, type: EclSelectContainerComponent, decorators: [{
-  type: Component90,
+  type: Component89,
   args: [{ selector: "ecl-select-container", template: '<div class="ecl-select__icon">\n    <ecl-icon icon="corner-arrow" size="s" transform="rotate-180" class="ecl-select__icon-shape"> </ecl-icon>\n</div>\n' }]
 }], propDecorators: { eclSize: [{
-  type: Input88
+  type: Input89
 }], disabled: [{
-  type: Input88
+  type: Input89
 }], isInvalid: [{
-  type: Input88
+  type: Input89
 }], cssClasses: [{
   type: HostBinding138,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-select/ecl-select.directive.mjs
-import { __decorate as __decorate28 } from "tslib";
-import { Directive as Directive57, HostBinding as HostBinding139, Input as Input89, Optional as Optional8, Self as Self6 } from "@angular/core";
-import { coerceBoolean as coerceBoolean25 } from "@eui/base";
+import { __decorate as __decorate25 } from "tslib";
+import { Directive as Directive58, HostBinding as HostBinding139, Input as Input90, Optional as Optional8, Self as Self6 } from "@angular/core";
+import { coerceBoolean as coerceBoolean23 } from "@eui/base";
 import * as i0200 from "@angular/core";
-import * as i139 from "@angular/forms";
+import * as i136 from "@angular/forms";
 var EclSelectDirective = class _EclSelectDirective extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-select")].join(" ").trim();
@@ -17627,36 +17687,36 @@ var EclSelectDirective = class _EclSelectDirective extends ECLBaseDirective {
     this.containerComponent.isInvalid = this.isInvalidState;
   }
   static {
-    this.ɵfac = i0200.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0200, type: _EclSelectDirective, deps: [{ token: i139.NgControl, optional: true, self: true }, { token: i0200.ElementRef }, { token: i0200.ViewContainerRef }], target: i0200.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0200.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0200, type: _EclSelectDirective, deps: [{ token: i136.NgControl, optional: true, self: true }, { token: i0200.ElementRef }, { token: i0200.ViewContainerRef }], target: i0200.ɵɵFactoryTarget.Directive });
   }
   static {
     this.ɵdir = i0200.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclSelectDirective, selector: "select[eclSelect]", inputs: { disabled: "disabled", isInvalid: "isInvalid", eclSize: "eclSize" }, host: { properties: { "attr.disabled": "this.isDisabled", "class": "this.cssClasses", "class.ecl-select--invalid": "this.isInvalidState" } }, usesInheritance: true, ngImport: i0200 });
   }
 };
-__decorate28([
-  coerceBoolean25
+__decorate25([
+  coerceBoolean23
 ], EclSelectDirective.prototype, "disabled", void 0);
-__decorate28([
-  coerceBoolean25
+__decorate25([
+  coerceBoolean23
 ], EclSelectDirective.prototype, "isInvalid", void 0);
 i0200.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0200, type: EclSelectDirective, decorators: [{
-  type: Directive57,
+  type: Directive58,
   args: [{
     selector: "select[eclSelect]"
   }]
-}], ctorParameters: () => [{ type: i139.NgControl, decorators: [{
+}], ctorParameters: () => [{ type: i136.NgControl, decorators: [{
   type: Optional8
 }, {
   type: Self6
 }] }, { type: i0200.ElementRef }, { type: i0200.ViewContainerRef }], propDecorators: { disabled: [{
-  type: Input89
+  type: Input90
 }, {
   type: HostBinding139,
   args: ["attr.disabled"]
 }], isInvalid: [{
-  type: Input89
+  type: Input90
 }], eclSize: [{
-  type: Input89
+  type: Input90
 }], cssClasses: [{
   type: HostBinding139,
   args: ["class"]
@@ -17694,9 +17754,9 @@ i0201.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] });
 
 // lib/components/ecl-social-media-follow/ecl-social-media-follow.component.mjs
-import { Component as Component91, HostBinding as HostBinding140, Input as Input90, booleanAttribute as booleanAttribute26 } from "@angular/core";
+import { Component as Component90, HostBinding as HostBinding140, Input as Input91, booleanAttribute as booleanAttribute28 } from "@angular/core";
 import * as i0202 from "@angular/core";
-import * as i140 from "@angular/common";
+import * as i137 from "@angular/common";
 var EclSocialMediaFollowComponent = class _EclSocialMediaFollowComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -17709,27 +17769,27 @@ var EclSocialMediaFollowComponent = class _EclSocialMediaFollowComponent extends
     this.ɵfac = i0202.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0202, type: _EclSocialMediaFollowComponent, deps: null, target: i0202.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0202.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EclSocialMediaFollowComponent, selector: "ecl-social-media-follow", inputs: { description: "description", isVertical: ["isVertical", "isVertical", booleanAttribute26] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0202, template: '<p *ngIf="description" class="ecl-social-media-follow__description">{{ description }}</p>\n<ul class="ecl-social-media-follow__list">\n    <ng-content></ng-content>\n</ul>\n', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i140.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    this.ɵcmp = i0202.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EclSocialMediaFollowComponent, selector: "ecl-social-media-follow", inputs: { description: "description", isVertical: ["isVertical", "isVertical", booleanAttribute28] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0202, template: '<p *ngIf="description" class="ecl-social-media-follow__description">{{ description }}</p>\n<ul class="ecl-social-media-follow__list">\n    <ng-content></ng-content>\n</ul>\n', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i137.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   }
 };
 i0202.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0202, type: EclSocialMediaFollowComponent, decorators: [{
-  type: Component91,
+  type: Component90,
   args: [{ selector: "ecl-social-media-follow", template: '<p *ngIf="description" class="ecl-social-media-follow__description">{{ description }}</p>\n<ul class="ecl-social-media-follow__list">\n    <ng-content></ng-content>\n</ul>\n', styles: [":host{display:block}\n"] }]
 }], propDecorators: { description: [{
-  type: Input90
+  type: Input91
 }], isVertical: [{
-  type: Input90,
-  args: [{ transform: booleanAttribute26 }]
+  type: Input91,
+  args: [{ transform: booleanAttribute28 }]
 }], cssClasses: [{
   type: HostBinding140,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-social-media-follow/ecl-social-media-follow-item.component.mjs
-import { Component as Component92, EventEmitter as EventEmitter42, HostBinding as HostBinding141, Input as Input91, Output as Output42 } from "@angular/core";
+import { Component as Component91, EventEmitter as EventEmitter42, HostBinding as HostBinding141, Input as Input92, Output as Output42 } from "@angular/core";
 import * as i0203 from "@angular/core";
-import * as i141 from "@angular/common";
-import * as i215 from "@angular/router";
+import * as i138 from "@angular/common";
+import * as i216 from "@angular/router";
 var EclSocialMediaFollowItemClickEvent = class extends EclBaseEvent {
 };
 var EclSocialMediaFollowItemComponent = class _EclSocialMediaFollowItemComponent extends ECLBaseDirective {
@@ -17755,27 +17815,27 @@ var EclSocialMediaFollowItemComponent = class _EclSocialMediaFollowItemComponent
     this.ɵfac = i0203.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0203, type: _EclSocialMediaFollowItemComponent, deps: null, target: i0203.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0203.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", 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: i141.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i215.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-next.4", 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: i138.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i216.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-next.4", ngImport: i0203, type: EclSocialMediaFollowItemComponent, decorators: [{
-  type: Component92,
+  type: Component91,
   args: [{ selector: "ecl-social-media-follow-item", 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>' }]
 }], propDecorators: { role: [{
   type: HostBinding141,
   args: ["attr.role"]
 }], icon: [{
-  type: Input91
+  type: Input92
 }], iconSet: [{
-  type: Input91
+  type: Input92
 }], href: [{
-  type: Input91
+  type: Input92
 }], routerLink: [{
-  type: Input91
+  type: Input92
 }], target: [{
-  type: Input91
+  type: Input92
 }], size: [{
-  type: Input91
+  type: Input92
 }], cssClasses: [{
   type: HostBinding141,
   args: ["class"]
@@ -17784,7 +17844,7 @@ i0203.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] } });
 
 // lib/components/ecl-social-media-follow/ecl-social-media-follow-link.directive.mjs
-import { Directive as Directive58, HostBinding as HostBinding142, ContentChild as ContentChild26 } from "@angular/core";
+import { Directive as Directive59, HostBinding as HostBinding142, ContentChild as ContentChild25 } from "@angular/core";
 import * as i0204 from "@angular/core";
 var EclSocialMediaFollowLinkDirective = class _EclSocialMediaFollowLinkDirective extends ECLBaseDirective {
   get cssClasses() {
@@ -17803,12 +17863,12 @@ var EclSocialMediaFollowLinkDirective = class _EclSocialMediaFollowLinkDirective
   }
 };
 i0204.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0204, type: EclSocialMediaFollowLinkDirective, decorators: [{
-  type: Directive58,
+  type: Directive59,
   args: [{
     selector: "[eclSocialMediaFollowLink]"
   }]
 }], propDecorators: { eclIcon: [{
-  type: ContentChild26,
+  type: ContentChild25,
   args: [EclIconComponent]
 }], cssClasses: [{
   type: HostBinding142,
@@ -17842,9 +17902,9 @@ i0205.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] });
 
 // lib/components/ecl-social-media-share/ecl-social-media-share.component.mjs
-import { __decorate as __decorate29 } from "tslib";
-import { Component as Component93, HostBinding as HostBinding143, Input as Input92 } from "@angular/core";
-import { coerceBoolean as coerceBoolean26 } from "@eui/base";
+import { __decorate as __decorate26 } from "tslib";
+import { Component as Component92, HostBinding as HostBinding143, Input as Input93 } from "@angular/core";
+import { coerceBoolean as coerceBoolean24 } from "@eui/base";
 import * as i0206 from "@angular/core";
 var EclSocialMediaShareComponent = class _EclSocialMediaShareComponent extends ECLBaseDirective {
   constructor() {
@@ -17861,25 +17921,25 @@ var EclSocialMediaShareComponent = class _EclSocialMediaShareComponent extends E
     this.ɵcmp = i0206.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclSocialMediaShareComponent, selector: "ecl-social-media-share", inputs: { description: "description", isVertical: "isVertical" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0206, template: '<p class="ecl-social-media-share__description">{{ description }}</p>\n<ul class="ecl-social-media-share__list">\n    <ng-content></ng-content>\n</ul>\n', styles: [":host{display:block}\n"] });
   }
 };
-__decorate29([
-  coerceBoolean26
+__decorate26([
+  coerceBoolean24
 ], EclSocialMediaShareComponent.prototype, "isVertical", void 0);
 i0206.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0206, type: EclSocialMediaShareComponent, decorators: [{
-  type: Component93,
+  type: Component92,
   args: [{ selector: "ecl-social-media-share", template: '<p class="ecl-social-media-share__description">{{ description }}</p>\n<ul class="ecl-social-media-share__list">\n    <ng-content></ng-content>\n</ul>\n', styles: [":host{display:block}\n"] }]
 }], propDecorators: { description: [{
-  type: Input92
+  type: Input93
 }], isVertical: [{
-  type: Input92
+  type: Input93
 }], cssClasses: [{
   type: HostBinding143,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-social-media-share/ecl-social-media-share-item.component.mjs
-import { Component as Component94, EventEmitter as EventEmitter43, HostBinding as HostBinding144, Input as Input93, Output as Output43 } from "@angular/core";
+import { Component as Component93, EventEmitter as EventEmitter43, HostBinding as HostBinding144, Input as Input94, Output as Output43 } from "@angular/core";
 import * as i0207 from "@angular/core";
-import * as i142 from "@angular/common";
+import * as i139 from "@angular/common";
 var EclSocialMediaShareItemClickEvent = class extends EclBaseEvent {
 };
 var EclSocialMediaShareItemComponent = class _EclSocialMediaShareItemComponent extends ECLBaseDirective {
@@ -17904,25 +17964,25 @@ var EclSocialMediaShareItemComponent = class _EclSocialMediaShareItemComponent e
     this.ɵfac = i0207.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0207, type: _EclSocialMediaShareItemComponent, deps: null, target: i0207.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0207.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclSocialMediaShareItemComponent, selector: "ecl-social-media-share-item", inputs: { icon: "icon", iconSet: "iconSet", size: "size", href: "href", target: "target" }, outputs: { itemClick: "itemClick" }, host: { properties: { "attr.role": "this.role", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0207, template: '<a\n    eclLink\n    *ngIf="href"\n    (click)="onItemClick($event)"\n    variant="standalone"\n    [href]="href"\n    [attr.target]="target"\n    class="ecl-social-media-share__link">\n    <ecl-icon *ngIf="icon" [iconSet]="iconSet" icon="{{ icon }}" [size]="size" class="ecl-social-media-share__icon"> </ecl-icon>\n\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n    </span>\n</a>\n\n<ng-container *ngIf="!href">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</ng-container>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "directive", type: i142.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i142.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
+    this.ɵcmp = i0207.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclSocialMediaShareItemComponent, selector: "ecl-social-media-share-item", inputs: { icon: "icon", iconSet: "iconSet", size: "size", href: "href", target: "target" }, outputs: { itemClick: "itemClick" }, host: { properties: { "attr.role": "this.role", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0207, template: '<a\n    eclLink\n    *ngIf="href"\n    (click)="onItemClick($event)"\n    variant="standalone"\n    [href]="href"\n    [attr.target]="target"\n    class="ecl-social-media-share__link">\n    <ecl-icon *ngIf="icon" [iconSet]="iconSet" icon="{{ icon }}" [size]="size" class="ecl-social-media-share__icon"> </ecl-icon>\n\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n    </span>\n</a>\n\n<ng-container *ngIf="!href">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</ng-container>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "directive", type: i139.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i139.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
   }
 };
 i0207.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0207, type: EclSocialMediaShareItemComponent, decorators: [{
-  type: Component94,
+  type: Component93,
   args: [{ selector: "ecl-social-media-share-item", template: '<a\n    eclLink\n    *ngIf="href"\n    (click)="onItemClick($event)"\n    variant="standalone"\n    [href]="href"\n    [attr.target]="target"\n    class="ecl-social-media-share__link">\n    <ecl-icon *ngIf="icon" [iconSet]="iconSet" icon="{{ icon }}" [size]="size" class="ecl-social-media-share__icon"> </ecl-icon>\n\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n    </span>\n</a>\n\n<ng-container *ngIf="!href">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</ng-container>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n' }]
 }], propDecorators: { role: [{
   type: HostBinding144,
   args: ["attr.role"]
 }], icon: [{
-  type: Input93
+  type: Input94
 }], iconSet: [{
-  type: Input93
+  type: Input94
 }], size: [{
-  type: Input93
+  type: Input94
 }], href: [{
-  type: Input93
+  type: Input94
 }], target: [{
-  type: Input93
+  type: Input94
 }], cssClasses: [{
   type: HostBinding144,
   args: ["class"]
@@ -17931,7 +17991,7 @@ i0207.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] } });
 
 // lib/components/ecl-social-media-share/ecl-social-media-share-link.directive.mjs
-import { Directive as Directive59, HostBinding as HostBinding145, ContentChild as ContentChild27 } from "@angular/core";
+import { Directive as Directive60, HostBinding as HostBinding145, ContentChild as ContentChild26 } from "@angular/core";
 import * as i0208 from "@angular/core";
 var EclSocialMediaShareLinkDirective = class _EclSocialMediaShareLinkDirective extends ECLBaseDirective {
   get cssClasses() {
@@ -17950,12 +18010,12 @@ var EclSocialMediaShareLinkDirective = class _EclSocialMediaShareLinkDirective e
   }
 };
 i0208.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0208, type: EclSocialMediaShareLinkDirective, decorators: [{
-  type: Directive59,
+  type: Directive60,
   args: [{
     selector: "[eclSocialMediaShareLink]"
   }]
 }], propDecorators: { eclIcon: [{
-  type: ContentChild27,
+  type: ContentChild26,
   args: [EclIconComponent]
 }], cssClasses: [{
   type: HostBinding145,
@@ -17988,7 +18048,7 @@ i0209.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] });
 
 // lib/components/ecl-loading-indicator/ecl-loading-indicator.component.mjs
-import { Component as Component95, HostBinding as HostBinding146, Input as Input94, booleanAttribute as booleanAttribute27 } from "@angular/core";
+import { Component as Component94, HostBinding as HostBinding146, Input as Input95, booleanAttribute as booleanAttribute29 } from "@angular/core";
 import * as i0210 from "@angular/core";
 var EclLoadingIndicatorComponent = class _EclLoadingIndicatorComponent extends ECLBaseDirective {
   constructor() {
@@ -18011,29 +18071,29 @@ var EclLoadingIndicatorComponent = class _EclLoadingIndicatorComponent extends E
     this.ɵfac = i0210.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0210, type: _EclLoadingIndicatorComponent, deps: null, target: i0210.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0210.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EclLoadingIndicatorComponent, selector: "ecl-loading-indicator", inputs: { size: "size", variant: "variant", isCentered: ["isCentered", "isCentered", booleanAttribute27], isVisible: ["isVisible", "isVisible", booleanAttribute27] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0210, template: '<svg class="ecl-spinner__loader" viewBox="25 25 50 50">\n    <circle\n        class="ecl-spinner__circle"\n        cx="50"\n        cy="50"\n        r="20"\n        fill="none"\n        stroke-width="4px"\n        stroke-miterlimit="10"\n        vector-effect="non-scaling-stroke"></circle>\n</svg>\n<ng-content></ng-content>\n' });
+    this.ɵcmp = i0210.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EclLoadingIndicatorComponent, selector: "ecl-loading-indicator", inputs: { size: "size", variant: "variant", isCentered: ["isCentered", "isCentered", booleanAttribute29], isVisible: ["isVisible", "isVisible", booleanAttribute29] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0210, template: '<svg class="ecl-spinner__loader" viewBox="25 25 50 50">\n    <circle\n        class="ecl-spinner__circle"\n        cx="50"\n        cy="50"\n        r="20"\n        fill="none"\n        stroke-width="4px"\n        stroke-miterlimit="10"\n        vector-effect="non-scaling-stroke"></circle>\n</svg>\n<ng-content></ng-content>\n' });
   }
 };
 i0210.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0210, type: EclLoadingIndicatorComponent, decorators: [{
-  type: Component95,
+  type: Component94,
   args: [{ selector: "ecl-loading-indicator", template: '<svg class="ecl-spinner__loader" viewBox="25 25 50 50">\n    <circle\n        class="ecl-spinner__circle"\n        cx="50"\n        cy="50"\n        r="20"\n        fill="none"\n        stroke-width="4px"\n        stroke-miterlimit="10"\n        vector-effect="non-scaling-stroke"></circle>\n</svg>\n<ng-content></ng-content>\n' }]
 }], propDecorators: { cssClasses: [{
   type: HostBinding146,
   args: ["class"]
 }], size: [{
-  type: Input94
+  type: Input95
 }], variant: [{
-  type: Input94
+  type: Input95
 }], isCentered: [{
-  type: Input94,
-  args: [{ transform: booleanAttribute27 }]
+  type: Input95,
+  args: [{ transform: booleanAttribute29 }]
 }], isVisible: [{
-  type: Input94,
-  args: [{ transform: booleanAttribute27 }]
+  type: Input95,
+  args: [{ transform: booleanAttribute29 }]
 }] } });
 
 // lib/components/ecl-loading-indicator/ecl-loading-indicator-label.directive.mjs
-import { Directive as Directive60, HostBinding as HostBinding147 } from "@angular/core";
+import { Directive as Directive61, HostBinding as HostBinding147 } from "@angular/core";
 import * as i0211 from "@angular/core";
 var EclLoadingIndicatorLabelDirective = class _EclLoadingIndicatorLabelDirective {
   constructor() {
@@ -18047,7 +18107,7 @@ var EclLoadingIndicatorLabelDirective = class _EclLoadingIndicatorLabelDirective
   }
 };
 i0211.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0211, type: EclLoadingIndicatorLabelDirective, decorators: [{
-  type: Directive60,
+  type: Directive61,
   args: [{
     selector: "[eclLoadingIndicatorLabel]"
   }]
@@ -18057,7 +18117,7 @@ i0211.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] } });
 
 // lib/components/ecl-loading-indicator/ecl-loading-indicator-overlay.directive.mjs
-import { Directive as Directive61, HostBinding as HostBinding148 } from "@angular/core";
+import { Directive as Directive62, HostBinding as HostBinding148 } from "@angular/core";
 import * as i0212 from "@angular/core";
 var EclLoadingIndicatorOverlayDirective = class _EclLoadingIndicatorOverlayDirective extends ECLBaseDirective {
   get cssClasses() {
@@ -18071,7 +18131,7 @@ var EclLoadingIndicatorOverlayDirective = class _EclLoadingIndicatorOverlayDirec
   }
 };
 i0212.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0212, type: EclLoadingIndicatorOverlayDirective, decorators: [{
-  type: Directive61,
+  type: Directive62,
   args: [{
     selector: "[eclLoadingIndicatorOverlay]"
   }]
@@ -18106,7 +18166,7 @@ i0213.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] });
 
 // lib/components/ecl-table/ecl-table-sort-button.component.mjs
-import { Component as Component96, HostBinding as HostBinding149 } from "@angular/core";
+import { Component as Component95, HostBinding as HostBinding149 } from "@angular/core";
 import * as i0214 from "@angular/core";
 import * as i35 from "@angular/common";
 var EclTableSortButtonComponent = class _EclTableSortButtonComponent extends ECLBaseDirective {
@@ -18128,7 +18188,7 @@ var EclTableSortButtonComponent = class _EclTableSortButtonComponent extends ECL
   }
 };
 i0214.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0214, type: EclTableSortButtonComponent, decorators: [{
-  type: Component96,
+  type: Component95,
   args: [{ selector: "button[eclTableSortButton]", 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>
 ` }]
@@ -18141,7 +18201,7 @@ i0214.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] } });
 
 // lib/components/ecl-table/ecl-table.directive.mjs
-import { ContentChildren as ContentChildren26, Directive as Directive62, EventEmitter as EventEmitter44, forwardRef as forwardRef54, HostBinding as HostBinding150, HostListener as HostListener22, Input as Input95, Output as Output44, booleanAttribute as booleanAttribute28 } from "@angular/core";
+import { ContentChildren as ContentChildren26, Directive as Directive63, EventEmitter as EventEmitter44, forwardRef as forwardRef54, HostBinding as HostBinding150, HostListener as HostListener22, Input as Input96, Output as Output44, booleanAttribute as booleanAttribute30 } from "@angular/core";
 import { Subject as Subject27 } from "rxjs";
 import { takeUntil as takeUntil24 } from "rxjs/operators";
 import * as i0215 from "@angular/core";
@@ -18187,17 +18247,17 @@ var EclTableDirective = class _EclTableDirective extends ECLBaseDirective {
     this.ɵfac = i0215.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0215, type: _EclTableDirective, deps: [{ token: i0215.IterableDiffers }], target: i0215.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0215.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EclTableDirective, selector: "[eclTable]", inputs: { isZebra: ["isZebra", "isZebra", booleanAttribute28] }, outputs: { sort: "sort" }, host: { properties: { "class.ecl-table--zebra": "this.isZebra", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclTableHeaders", predicate: i0215.forwardRef(() => EclTableHeaderDirective), descendants: true }], usesInheritance: true, ngImport: i0215 });
+    this.ɵdir = i0215.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EclTableDirective, selector: "[eclTable]", inputs: { isZebra: ["isZebra", "isZebra", booleanAttribute30] }, outputs: { sort: "sort" }, host: { properties: { "class.ecl-table--zebra": "this.isZebra", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclTableHeaders", predicate: i0215.forwardRef(() => EclTableHeaderDirective), descendants: true }], usesInheritance: true, ngImport: i0215 });
   }
 };
 i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0215, type: EclTableDirective, decorators: [{
-  type: Directive62,
+  type: Directive63,
   args: [{
     selector: "[eclTable]"
   }]
 }], ctorParameters: () => [{ type: i0215.IterableDiffers }], propDecorators: { isZebra: [{
-  type: Input95,
-  args: [{ transform: booleanAttribute28 }]
+  type: Input96,
+  args: [{ transform: booleanAttribute30 }]
 }, {
   type: HostBinding150,
   args: ["class.ecl-table--zebra"]
@@ -18244,7 +18304,7 @@ var EclTableHeadDirective = class _EclTableHeadDirective extends ECLBaseDirectiv
   }
 };
 i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0215, type: EclTableHeadDirective, decorators: [{
-  type: Directive62,
+  type: Directive63,
   args: [{
     selector: "[eclTableHead]"
   }]
@@ -18314,7 +18374,7 @@ var EclTableHeaderDirective = class _EclTableHeaderDirective extends ECLBaseDire
   }
 };
 i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0215, type: EclTableHeaderDirective, decorators: [{
-  type: Directive62,
+  type: Directive63,
   args: [{
     selector: "[eclTableHeader]"
   }]
@@ -18322,12 +18382,12 @@ i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
   type: HostBinding150,
   args: ["attr.aria-sort"]
 }], eclSortable: [{
-  type: Input95
+  type: Input96
 }, {
   type: HostBinding150,
   args: ["attr.data-ecl-table-sort-toggle"]
 }], sortButtonAriaLabel: [{
-  type: Input95
+  type: Input96
 }], cssClasses: [{
   type: HostBinding150,
   args: ["class"]
@@ -18349,7 +18409,7 @@ var EclTableRowDirective = class _EclTableRowDirective extends ECLBaseDirective
   }
 };
 i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0215, type: EclTableRowDirective, decorators: [{
-  type: Directive62,
+  type: Directive63,
   args: [{
     selector: "[eclTableRow]"
   }]
@@ -18369,7 +18429,7 @@ var EclTableBodyDirective = class _EclTableBodyDirective extends ECLBaseDirectiv
   }
 };
 i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0215, type: EclTableBodyDirective, decorators: [{
-  type: Directive62,
+  type: Directive63,
   args: [{
     selector: "[eclTableBody]"
   }]
@@ -18393,17 +18453,17 @@ var EclTableCellDirective = class _EclTableCellDirective extends ECLBaseDirectiv
   }
 };
 i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0215, type: EclTableCellDirective, decorators: [{
-  type: Directive62,
+  type: Directive63,
   args: [{
     selector: "[eclTableCell]"
   }]
 }], propDecorators: { eclTableCellHeader: [{
-  type: Input95
+  type: Input96
 }, {
   type: HostBinding150,
   args: ["attr.data-ecl-table-header"]
 }], isGroup: [{
-  type: Input95
+  type: Input96
 }, {
   type: HostBinding150,
   args: ["class.ecl-table__cell--group"]
@@ -18423,12 +18483,12 @@ var EclTableCellGroupDirective = class _EclTableCellGroupDirective extends ECLBa
   }
 };
 i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0215, type: EclTableCellGroupDirective, decorators: [{
-  type: Directive62,
+  type: Directive63,
   args: [{
     selector: "[eclTableCellGroup]"
   }]
 }], propDecorators: { eclTableCellGroup: [{
-  type: Input95
+  type: Input96
 }, {
   type: HostBinding150,
   args: ["attr.data-ecl-table-header-group"]
@@ -18448,7 +18508,7 @@ var EclTableResponsiveDirective = class _EclTableResponsiveDirective extends ECL
   }
 };
 i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0215, type: EclTableResponsiveDirective, decorators: [{
-  type: Directive62,
+  type: Directive63,
   args: [{
     selector: "[eclTableResponsive]"
   }]
@@ -18513,7 +18573,7 @@ i0216.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] });
 
 // lib/components/ecl-tabs/ecl-tab-label.component.mjs
-import { Component as Component97 } from "@angular/core";
+import { Component as Component96 } from "@angular/core";
 import * as i0217 from "@angular/core";
 var EclTabLabelComponent = class _EclTabLabelComponent extends ECLBaseDirective {
   constructor(el) {
@@ -18528,14 +18588,12 @@ var EclTabLabelComponent = class _EclTabLabelComponent extends ECLBaseDirective
   }
 };
 i0217.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0217, type: EclTabLabelComponent, decorators: [{
-  type: Component97,
+  type: Component96,
   args: [{ selector: "ecl-tab-label", template: "<ng-content></ng-content>\n" }]
 }], ctorParameters: () => [{ type: i0217.ElementRef }] });
 
 // lib/components/ecl-tabs/ecl-tab.component.mjs
-import { __decorate as __decorate30 } from "tslib";
-import { Component as Component98, ContentChild as ContentChild28, EventEmitter as EventEmitter45, HostBinding as HostBinding151, Input as Input96, Output as Output45, ViewChild as ViewChild16 } from "@angular/core";
-import { coerceBoolean as coerceBoolean27 } from "@eui/base";
+import { Component as Component97, ContentChild as ContentChild27, EventEmitter as EventEmitter45, HostBinding as HostBinding151, Input as Input97, Output as Output45, ViewChild as ViewChild16, booleanAttribute as booleanAttribute31 } from "@angular/core";
 import * as i0218 from "@angular/core";
 var EclTabSelectEvent = class extends EclBaseEvent {
   constructor(tab) {
@@ -18551,7 +18609,6 @@ var EclTabComponent = class _EclTabComponent extends ECLBaseDirective {
     this.isActive = false;
     this.selectTab = new EventEmitter45();
     this.keydownTab = new EventEmitter45();
-    this.role = "presentation";
     this.tabLabel = "";
     this.isFirstCall = true;
   }
@@ -18590,27 +18647,23 @@ var EclTabComponent = class _EclTabComponent extends ECLBaseDirective {
     this.ɵfac = i0218.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0218, type: _EclTabComponent, deps: [{ token: i0218.ElementRef }], target: i0218.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0218.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclTabComponent, selector: "ecl-tab, li[eclTab]", inputs: { id: "id", isHidden: "isHidden", isActive: "isActive" }, outputs: { selectTab: "selectTab", keydownTab: "keydownTab" }, host: { properties: { "attr.aria-hidden": "this.isHidden", "attr.role": "this.role", "class": "this.cssClasses" } }, queries: [{ propertyName: "label", first: true, predicate: EclTabLabelComponent, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "link", first: true, predicate: EclLinkDirective, descendants: true }], usesInheritance: true, ngImport: i0218, template: '<a\n    eclLink\n    role="tab"\n    class="ecl-tabs__link"\n    [class.ecl-tabs__link--active]="isActive"\n    [attr.aria-selected]="isActive"\n    tabindex="0"\n    (keydown)="onKeydown($event)"\n    (click)="onTabClick()">\n    <ng-content select="ecl-tab-label"></ng-content>\n</a>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }] });
+    this.ɵcmp = i0218.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EclTabComponent, selector: "ecl-tab, [eclTab]", inputs: { id: "id", isHidden: ["isHidden", "isHidden", booleanAttribute31], isActive: ["isActive", "isActive", booleanAttribute31] }, outputs: { selectTab: "selectTab", keydownTab: "keydownTab" }, host: { properties: { "class.ecl-tabs__item--hidden": "this.isHidden", "class": "this.cssClasses" } }, queries: [{ propertyName: "label", first: true, predicate: EclTabLabelComponent, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "link", first: true, predicate: EclLinkDirective, descendants: true }], usesInheritance: true, ngImport: i0218, template: '<a\n    eclLink\n    role="tab"\n    class="ecl-tabs__link"\n    [class.ecl-tabs__link--active]="isActive"\n    [attr.aria-selected]="isActive"\n    tabindex="0"\n    (keydown)="onKeydown($event)"\n    (click)="onTabClick()">\n    <ng-content select="ecl-tab-label"></ng-content>\n</a>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }] });
   }
 };
-__decorate30([
-  coerceBoolean27
-], EclTabComponent.prototype, "isHidden", void 0);
-__decorate30([
-  coerceBoolean27
-], EclTabComponent.prototype, "isActive", void 0);
 i0218.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0218, type: EclTabComponent, decorators: [{
-  type: Component98,
-  args: [{ selector: "ecl-tab, li[eclTab]", template: '<a\n    eclLink\n    role="tab"\n    class="ecl-tabs__link"\n    [class.ecl-tabs__link--active]="isActive"\n    [attr.aria-selected]="isActive"\n    tabindex="0"\n    (keydown)="onKeydown($event)"\n    (click)="onTabClick()">\n    <ng-content select="ecl-tab-label"></ng-content>\n</a>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n' }]
+  type: Component97,
+  args: [{ selector: "ecl-tab, [eclTab]", template: '<a\n    eclLink\n    role="tab"\n    class="ecl-tabs__link"\n    [class.ecl-tabs__link--active]="isActive"\n    [attr.aria-selected]="isActive"\n    tabindex="0"\n    (keydown)="onKeydown($event)"\n    (click)="onTabClick()">\n    <ng-content select="ecl-tab-label"></ng-content>\n</a>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n' }]
 }], ctorParameters: () => [{ type: i0218.ElementRef }], propDecorators: { id: [{
-  type: Input96
+  type: Input97
 }], isHidden: [{
-  type: Input96
+  type: Input97,
+  args: [{ transform: booleanAttribute31 }]
 }, {
   type: HostBinding151,
-  args: ["attr.aria-hidden"]
+  args: ["class.ecl-tabs__item--hidden"]
 }], isActive: [{
-  type: Input96
+  type: Input97,
+  args: [{ transform: booleanAttribute31 }]
 }], selectTab: [{
   type: Output45
 }], keydownTab: [{
@@ -18622,26 +18675,20 @@ i0218.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
   type: ViewChild16,
   args: [EclLinkDirective]
 }], label: [{
-  type: ContentChild28,
+  type: ContentChild27,
   args: [EclTabLabelComponent]
-}], role: [{
-  type: HostBinding151,
-  args: ["attr.role"]
 }], cssClasses: [{
   type: HostBinding151,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-tabs/ecl-tab-more.component.mjs
-import { __decorate as __decorate31 } from "tslib";
-import { Component as Component99, HostBinding as HostBinding152, Input as Input97 } from "@angular/core";
-import { coerceBoolean as coerceBoolean28 } from "@eui/base";
+import { Component as Component98, HostBinding as HostBinding152, Input as Input98, booleanAttribute as booleanAttribute32 } from "@angular/core";
 import * as i0219 from "@angular/core";
 var EclTabMoreComponent = class _EclTabMoreComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
     this.isHidden = false;
-    this.role = "presentation";
   }
   get cssClasses() {
     return [super.getCssClasses("ecl-tabs__item ecl-tabs__item--more")].join(" ").trim();
@@ -18650,34 +18697,29 @@ var EclTabMoreComponent = class _EclTabMoreComponent extends ECLBaseDirective {
     this.ɵfac = i0219.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0219, type: _EclTabMoreComponent, deps: null, target: i0219.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0219.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclTabMoreComponent, selector: "ecl-tab-more", inputs: { isHidden: "isHidden" }, host: { properties: { "attr.aria-hidden": "this.isHidden", "attr.role": "this.role", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0219, template: "<ng-content></ng-content>\n", styles: [":host{display:list-item}\n"] });
+    this.ɵcmp = i0219.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EclTabMoreComponent, selector: "ecl-tab-more", inputs: { isHidden: ["isHidden", "isHidden", booleanAttribute32] }, host: { properties: { "class.ecl-tabs__item--hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0219, template: "<ng-content></ng-content>\n" });
   }
 };
-__decorate31([
-  coerceBoolean28
-], EclTabMoreComponent.prototype, "isHidden", void 0);
 i0219.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0219, type: EclTabMoreComponent, decorators: [{
-  type: Component99,
-  args: [{ selector: "ecl-tab-more", template: "<ng-content></ng-content>\n", styles: [":host{display:list-item}\n"] }]
+  type: Component98,
+  args: [{ selector: "ecl-tab-more", template: "<ng-content></ng-content>\n" }]
 }], propDecorators: { isHidden: [{
-  type: Input97
+  type: Input98,
+  args: [{ transform: booleanAttribute32 }]
 }, {
   type: HostBinding152,
-  args: ["attr.aria-hidden"]
-}], role: [{
-  type: HostBinding152,
-  args: ["attr.role"]
+  args: ["class.ecl-tabs__item--hidden"]
 }], cssClasses: [{
   type: HostBinding152,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-tabs/ecl-tabs.component.mjs
-import { Component as Component100, ContentChildren as ContentChildren27, EventEmitter as EventEmitter46, forwardRef as forwardRef56, HostListener as HostListener23, Input as Input98, Output as Output46, ViewChild as ViewChild17, ViewEncapsulation as ViewEncapsulation15 } from "@angular/core";
+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 { of as of4, Subject as Subject28 } from "rxjs";
 import { mergeWith as mergeWith3, takeUntil as takeUntil25 } from "rxjs/operators";
 import * as i0220 from "@angular/core";
-import * as i143 from "@angular/cdk/layout";
+import * as i140 from "@angular/cdk/layout";
 import * as i36 from "@angular/common";
 import * as i10 from "@ngx-translate/core";
 var ShiftDirection;
@@ -18694,7 +18736,6 @@ var EclTabsComponent = class _EclTabsComponent extends ECLBaseDirective {
     this.el = el;
     this.eclRtlService = eclRtlService;
     this.bodyClass = "ecl-u-mt-s";
-    this.direction = "ltr";
     this.tabSelect = new EventEmitter46();
     this.dropdownTabs = [];
     this.listTabs = [];
@@ -19027,6 +19068,7 @@ var EclTabsComponent = class _EclTabsComponent extends ECLBaseDirective {
     if (!hiddenItems.length) {
       this.isMoreButtonShow = false;
       this.setActiveItemForMainTabs();
+      this.hideAllDropdownTabs();
     } else {
       this.isMoreButtonShow = true;
       this.setHiddenItemsForDropdownTabs(hiddenItems);
@@ -19038,6 +19080,9 @@ var EclTabsComponent = class _EclTabsComponent extends ECLBaseDirective {
       this.isFirstCall = false;
     }
   }
+  hideAllDropdownTabs() {
+    this.listTabs.forEach((item) => item.isHidden = true);
+  }
   setActiveItemForMainTabs() {
     this.listTabs.forEach((item, index) => {
       if (item.isActive) {
@@ -19082,57 +19127,45 @@ var EclTabsComponent = class _EclTabsComponent extends ECLBaseDirective {
     this.index = 0;
   }
   static {
-    this.ɵfac = i0220.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0220, type: _EclTabsComponent, deps: [{ token: i0220.IterableDiffers }, { token: i143.BreakpointObserver }, { token: i0220.ChangeDetectorRef }, { token: i0220.ElementRef }, { token: EclRtlService }], target: i0220.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0220.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0220, type: _EclTabsComponent, deps: [{ token: i0220.IterableDiffers }, { token: i140.BreakpointObserver }, { token: i0220.ChangeDetectorRef }, { token: i0220.ElementRef }, { token: EclRtlService }], target: i0220.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0220.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclTabsComponent, selector: "nav[eclTabs], ecl-tabs", inputs: { bodyClass: "bodyClass", direction: "direction" }, outputs: { tabSelect: "tabSelect" }, host: { listeners: { "document:click": "onClick($event.target)", "window:resize": "onWindowResize($event)" } }, queries: [{ propertyName: "tabs", predicate: i0220.forwardRef(() => EclTabComponent) }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "moreButton", first: true, predicate: ["moreButton"], descendants: true }, { propertyName: "btnPrev", first: true, predicate: ["btnPrev"], descendants: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }], usesInheritance: true, ngImport: i0220, template: `<nav class="ecl-tabs">
+    this.ɵcmp = i0220.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclTabsComponent, selector: "nav[eclTabs], ecl-tabs", inputs: { bodyClass: "bodyClass" }, outputs: { tabSelect: "tabSelect" }, host: { listeners: { "document:click": "onClick($event.target)", "window:resize": "onWindowResize($event)" } }, queries: [{ propertyName: "tabs", predicate: i0220.forwardRef(() => EclTabComponent) }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "moreButton", first: true, predicate: ["moreButton"], descendants: true }, { propertyName: "btnPrev", first: true, predicate: ["btnPrev"], descendants: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }], usesInheritance: true, ngImport: i0220, template: `<div class="ecl-tabs">
     <div class="ecl-tabs__container">
-        <ul
+        <div
             class="ecl-tabs__list"
             role="tablist"
             #tabsList
             [style.width]="getTabsWidthStyle()"
             [style.transform]="styleTransform"
             [style.transition-duration]="'0' || getTransitionDuration()">
-            <ng-content select="ecl-tab, li[eclTab]"></ng-content>
+            <ng-content select="ecl-tab, [eclTab]"></ng-content>
             <ecl-tab-more [isHidden]="!isMoreButtonShow">
-                <button
-                    #moreButton
-                    eclButton
-                    class="ecl-tabs__toggle"
-                    tabindex="-1"
-                    variant="secondary"
-                    [attr.aria-expanded]="isDropdownExpanded"
-                    [class.ecl-tabs__toggle--active]="isMoreButtonActive"
-                    (click)="onDropdownToggle()">
-                    <span eclButtonLabel>
-                        {{ 'ecl.common.MORE' | translate }}
-                        ({{ getHiddenTabsCount() }})
-                    </span>
-                    <ecl-icon icon="corner-arrow" transform="rotate-180" size="fluid"></ecl-icon>
-                </button>
-                <ul
-                    *ngIf="listTabs.length > 0"
-                    class="ecl-tabs__dropdown"
-                    [class.ecl-tabs__dropdown--show]="isDropdownExpanded"
-                    #dropdownList>
-                    <ng-container *ngFor="let tab of listTabs; let i = index">
-                        <ecl-tab
-                            [isActive]="tab.isActive"
-                            [isHidden]="tab.isHidden"
-                            (click)="onTabSelect(tab)"
-                            (keydown.arrowRight)="onTabKeydownArrowRight(i)"
-                            (keydown.arrowLeft)="onTabKeydownArrowLeft(i)"
-                            (keydown.home)="onTabKeydownHome()"
-                            (keydown.end)="onTabKeydownEnd()"
-                            (keydown.enter)="onTabSelect(tab)"
-                            (keydown.tab)="onTabBlur()">
-                            <ecl-tab-label>{{ getTabLabel(i) }}</ecl-tab-label>
-                        </ecl-tab>
-                    </ng-container>
-                </ul>
+                @if (listTabs.length > 0) {
+                <div class="ecl-tabs__dropdown" [class.ecl-tabs__dropdown--show]="isDropdownExpanded">
+                    <div class="ecl-tabs__dropdown-list" #dropdownList>
+                        <ng-container *ngFor="let tab of listTabs; let i = index">
+                            <ecl-tab [isActive]="tab.isActive" [isHidden]="tab.isHidden" (click)="onTabSelect(tab)"
+                                (keydown.arrowRight)="onTabKeydownArrowRight(i)" (keydown.arrowLeft)="onTabKeydownArrowLeft(i)"
+                                (keydown.home)="onTabKeydownHome()" (keydown.end)="onTabKeydownEnd()"
+                                (keydown.enter)="onTabSelect(tab)" (keydown.tab)="onTabBlur()">
+                                <ecl-tab-label>{{ getTabLabel(i) }}</ecl-tab-label>
+                            </ecl-tab>
+                        </ng-container>
+                    </div>
+                </div>
+            }
             </ecl-tab-more>
-        </ul>
+        </div>
+        <button #moreButton eclButton class="ecl-tabs__toggle" tabindex="-1" variant="ghost"
+            [attr.aria-expanded]="isDropdownExpanded" [class.ecl-tabs__toggle--active]="isMoreButtonActive"
+            (click)="onDropdownToggle()" [class.ecl-tabs__toggle--hidden]="!isMoreButtonShow">
+            <span eclButtonLabel>
+                {{ 'ecl.common.MORE' | translate }}
+                ({{ getHiddenTabsCount() }})
+            </span>
+            <ecl-icon icon="corner-arrow" transform="rotate-180" size="fluid"></ecl-icon>
+        </button>
     </div>
 
     <div class="ecl-tabs__controls">
@@ -19157,71 +19190,58 @@ var EclTabsComponent = class _EclTabsComponent extends ECLBaseDirective {
             <span class="ecl-u-sr-only"></span>
         </button>
     </div>
-</nav>
+</div>
 
-<ng-container *ngFor="let tab of tabs.toArray()">
+@for (tab of tabs.toArray(); track tab.tabLabel) {
     <div class="{{ bodyClass }}" *ngIf="tab.isActive">
         <ng-container *ngTemplateOutlet="tab.contentTemplate"></ng-container>
     </div>
-</ng-container>
-<ng-container *ngFor="let tab of listTabs">
+}
+@for (tab of listTabs; track tab.tabLabel) {
     <div class="{{ bodyClass }}" *ngIf="tab.isActive">
         <ng-container *ngTemplateOutlet="tab.contentTemplate"></ng-container>
     </div>
-</ng-container>
-`, dependencies: [{ kind: "directive", type: i36.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i36.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i36.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, li[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: i36.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i36.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i36.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-next.4", ngImport: i0220, type: EclTabsComponent, decorators: [{
-  type: Component100,
-  args: [{ selector: "nav[eclTabs], ecl-tabs", encapsulation: ViewEncapsulation15.None, template: `<nav class="ecl-tabs">
+  type: Component99,
+  args: [{ selector: "nav[eclTabs], ecl-tabs", encapsulation: ViewEncapsulation15.None, template: `<div class="ecl-tabs">
     <div class="ecl-tabs__container">
-        <ul
+        <div
             class="ecl-tabs__list"
             role="tablist"
             #tabsList
             [style.width]="getTabsWidthStyle()"
             [style.transform]="styleTransform"
             [style.transition-duration]="'0' || getTransitionDuration()">
-            <ng-content select="ecl-tab, li[eclTab]"></ng-content>
+            <ng-content select="ecl-tab, [eclTab]"></ng-content>
             <ecl-tab-more [isHidden]="!isMoreButtonShow">
-                <button
-                    #moreButton
-                    eclButton
-                    class="ecl-tabs__toggle"
-                    tabindex="-1"
-                    variant="secondary"
-                    [attr.aria-expanded]="isDropdownExpanded"
-                    [class.ecl-tabs__toggle--active]="isMoreButtonActive"
-                    (click)="onDropdownToggle()">
-                    <span eclButtonLabel>
-                        {{ 'ecl.common.MORE' | translate }}
-                        ({{ getHiddenTabsCount() }})
-                    </span>
-                    <ecl-icon icon="corner-arrow" transform="rotate-180" size="fluid"></ecl-icon>
-                </button>
-                <ul
-                    *ngIf="listTabs.length > 0"
-                    class="ecl-tabs__dropdown"
-                    [class.ecl-tabs__dropdown--show]="isDropdownExpanded"
-                    #dropdownList>
-                    <ng-container *ngFor="let tab of listTabs; let i = index">
-                        <ecl-tab
-                            [isActive]="tab.isActive"
-                            [isHidden]="tab.isHidden"
-                            (click)="onTabSelect(tab)"
-                            (keydown.arrowRight)="onTabKeydownArrowRight(i)"
-                            (keydown.arrowLeft)="onTabKeydownArrowLeft(i)"
-                            (keydown.home)="onTabKeydownHome()"
-                            (keydown.end)="onTabKeydownEnd()"
-                            (keydown.enter)="onTabSelect(tab)"
-                            (keydown.tab)="onTabBlur()">
-                            <ecl-tab-label>{{ getTabLabel(i) }}</ecl-tab-label>
-                        </ecl-tab>
-                    </ng-container>
-                </ul>
+                @if (listTabs.length > 0) {
+                <div class="ecl-tabs__dropdown" [class.ecl-tabs__dropdown--show]="isDropdownExpanded">
+                    <div class="ecl-tabs__dropdown-list" #dropdownList>
+                        <ng-container *ngFor="let tab of listTabs; let i = index">
+                            <ecl-tab [isActive]="tab.isActive" [isHidden]="tab.isHidden" (click)="onTabSelect(tab)"
+                                (keydown.arrowRight)="onTabKeydownArrowRight(i)" (keydown.arrowLeft)="onTabKeydownArrowLeft(i)"
+                                (keydown.home)="onTabKeydownHome()" (keydown.end)="onTabKeydownEnd()"
+                                (keydown.enter)="onTabSelect(tab)" (keydown.tab)="onTabBlur()">
+                                <ecl-tab-label>{{ getTabLabel(i) }}</ecl-tab-label>
+                            </ecl-tab>
+                        </ng-container>
+                    </div>
+                </div>
+            }
             </ecl-tab-more>
-        </ul>
+        </div>
+        <button #moreButton eclButton class="ecl-tabs__toggle" tabindex="-1" variant="ghost"
+            [attr.aria-expanded]="isDropdownExpanded" [class.ecl-tabs__toggle--active]="isMoreButtonActive"
+            (click)="onDropdownToggle()" [class.ecl-tabs__toggle--hidden]="!isMoreButtonShow">
+            <span eclButtonLabel>
+                {{ 'ecl.common.MORE' | translate }}
+                ({{ getHiddenTabsCount() }})
+            </span>
+            <ecl-icon icon="corner-arrow" transform="rotate-180" size="fluid"></ecl-icon>
+        </button>
     </div>
 
     <div class="ecl-tabs__controls">
@@ -19246,23 +19266,20 @@ i0220.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
             <span class="ecl-u-sr-only"></span>
         </button>
     </div>
-</nav>
+</div>
 
-<ng-container *ngFor="let tab of tabs.toArray()">
+@for (tab of tabs.toArray(); track tab.tabLabel) {
     <div class="{{ bodyClass }}" *ngIf="tab.isActive">
         <ng-container *ngTemplateOutlet="tab.contentTemplate"></ng-container>
     </div>
-</ng-container>
-<ng-container *ngFor="let tab of listTabs">
+}
+@for (tab of listTabs; track tab.tabLabel) {
     <div class="{{ bodyClass }}" *ngIf="tab.isActive">
         <ng-container *ngTemplateOutlet="tab.contentTemplate"></ng-container>
     </div>
-</ng-container>
-` }]
-}], ctorParameters: () => [{ type: i0220.IterableDiffers }, { type: i143.BreakpointObserver }, { type: i0220.ChangeDetectorRef }, { type: i0220.ElementRef }, { type: EclRtlService }], propDecorators: { bodyClass: [{
-  type: Input98
-}], direction: [{
-  type: Input98
+}` }]
+}], ctorParameters: () => [{ type: i0220.IterableDiffers }, { type: i140.BreakpointObserver }, { type: i0220.ChangeDetectorRef }, { type: i0220.ElementRef }, { type: EclRtlService }], propDecorators: { bodyClass: [{
+  type: Input99
 }], tabSelect: [{
   type: Output46
 }], tabs: [{
@@ -19338,9 +19355,9 @@ i0221.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] });
 
 // lib/components/ecl-tag/ecl-tag.component.mjs
-import { Component as Component101, Input as Input99, HostBinding as HostBinding153, Output as Output47, EventEmitter as EventEmitter47, booleanAttribute as booleanAttribute29 } from "@angular/core";
+import { Component as Component100, Input as Input100, HostBinding as HostBinding153, Output as Output47, EventEmitter as EventEmitter47, booleanAttribute as booleanAttribute33 } from "@angular/core";
 import * as i0222 from "@angular/core";
-import * as i216 from "@angular/common";
+import * as i217 from "@angular/common";
 var EclTagRemoveEvent = class extends EclBaseEvent {
 };
 var EclTagComponent = class _EclTagComponent extends ECLBaseDirective {
@@ -19375,17 +19392,17 @@ var EclTagComponent = class _EclTagComponent extends ECLBaseDirective {
     this.ɵfac = i0222.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0222, type: _EclTagComponent, deps: null, target: i0222.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0222.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclTagComponent, selector: "ecl-tag, [eclTag]", inputs: { variant: "variant", isWrapped: ["isWrapped", "isWrapped", booleanAttribute29] }, 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: i216.TitleCasePipe, name: "titlecase" }] });
+    this.ɵcmp = i0222.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EclTagComponent, selector: "ecl-tag, [eclTag]", inputs: { variant: "variant", isWrapped: ["isWrapped", "isWrapped", booleanAttribute33] }, 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: i217.TitleCasePipe, name: "titlecase" }] });
   }
 };
 i0222.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0222, type: EclTagComponent, decorators: [{
-  type: Component101,
+  type: Component100,
   args: [{ selector: "ecl-tag, [eclTag]", 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' }]
 }], propDecorators: { variant: [{
-  type: Input99
+  type: Input100
 }], isWrapped: [{
-  type: Input99,
-  args: [{ transform: booleanAttribute29 }]
+  type: Input100,
+  args: [{ transform: booleanAttribute33 }]
 }], remove: [{
   type: Output47
 }], isHidden: [{
@@ -19397,7 +19414,7 @@ i0222.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] } });
 
 // lib/components/ecl-tag/ecl-tag-set.directive.mjs
-import { Directive as Directive63, HostBinding as HostBinding154 } from "@angular/core";
+import { Directive as Directive64, HostBinding as HostBinding154 } from "@angular/core";
 import * as i0223 from "@angular/core";
 var EclTagSetDirective = class _EclTagSetDirective extends ECLBaseDirective {
   get cssClasses() {
@@ -19411,7 +19428,7 @@ var EclTagSetDirective = class _EclTagSetDirective extends ECLBaseDirective {
   }
 };
 i0223.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0223, type: EclTagSetDirective, decorators: [{
-  type: Directive63,
+  type: Directive64,
   args: [{
     selector: "[eclTagSet]"
   }]
@@ -19445,11 +19462,11 @@ i0224.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] });
 
 // lib/components/ecl-text-area/ecl-text-area.directive.mjs
-import { __decorate as __decorate32 } from "tslib";
-import { Directive as Directive64, HostBinding as HostBinding155, Input as Input100, Optional as Optional9, Self as Self7 } from "@angular/core";
-import { coerceBoolean as coerceBoolean29 } from "@eui/base";
+import { __decorate as __decorate27 } from "tslib";
+import { Directive as Directive65, HostBinding as HostBinding155, Input as Input101, Optional as Optional9, Self as Self7 } from "@angular/core";
+import { coerceBoolean as coerceBoolean25 } from "@eui/base";
 import * as i0225 from "@angular/core";
-import * as i144 from "@angular/forms";
+import * as i141 from "@angular/forms";
 var EclTextAreaDirective = class _EclTextAreaDirective extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-text-area"), this.eclSize ? `ecl-text-area--${this.eclSize}` : ""].join(" ").trim();
@@ -19468,28 +19485,28 @@ var EclTextAreaDirective = class _EclTextAreaDirective extends ECLBaseDirective
     this.isInvalid = false;
   }
   static {
-    this.ɵfac = i0225.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0225, type: _EclTextAreaDirective, deps: [{ token: i144.NgControl, optional: true, self: true }], target: i0225.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0225.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0225, type: _EclTextAreaDirective, deps: [{ token: i141.NgControl, optional: true, self: true }], target: i0225.ɵɵFactoryTarget.Directive });
   }
   static {
     this.ɵdir = i0225.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EclTextAreaDirective, selector: "textarea[eclTextArea]", inputs: { eclSize: "eclSize", isInvalid: "isInvalid" }, host: { properties: { "class": "this.cssClasses", "class.ecl-text-area--invalid": "this.invalidState" } }, usesInheritance: true, ngImport: i0225 });
   }
 };
-__decorate32([
-  coerceBoolean29
+__decorate27([
+  coerceBoolean25
 ], EclTextAreaDirective.prototype, "isInvalid", void 0);
 i0225.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0225, type: EclTextAreaDirective, decorators: [{
-  type: Directive64,
+  type: Directive65,
   args: [{
     selector: "textarea[eclTextArea]"
   }]
-}], ctorParameters: () => [{ type: i144.NgControl, decorators: [{
+}], ctorParameters: () => [{ type: i141.NgControl, decorators: [{
   type: Optional9
 }, {
   type: Self7
 }] }], propDecorators: { eclSize: [{
-  type: Input100
+  type: Input101
 }], isInvalid: [{
-  type: Input100
+  type: Input101
 }], cssClasses: [{
   type: HostBinding155,
   args: ["class"]
@@ -19523,7 +19540,7 @@ i0226.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] });
 
 // lib/components/ecl-timeline/ecl-timeline-item-label.directive.mjs
-import { Directive as Directive65, HostBinding as HostBinding156 } from "@angular/core";
+import { Directive as Directive66, HostBinding as HostBinding156 } from "@angular/core";
 import * as i0227 from "@angular/core";
 var EclTimelineItemLabelDirective = class _EclTimelineItemLabelDirective extends ECLBaseDirective {
   get cssClasses() {
@@ -19537,7 +19554,7 @@ var EclTimelineItemLabelDirective = class _EclTimelineItemLabelDirective extends
   }
 };
 i0227.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0227, type: EclTimelineItemLabelDirective, decorators: [{
-  type: Directive65,
+  type: Directive66,
   args: [{
     selector: "[eclTimelineItemLabel]"
   }]
@@ -19547,7 +19564,7 @@ i0227.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] } });
 
 // lib/components/ecl-timeline/ecl-timeline-item-title.directive.mjs
-import { Directive as Directive66, HostBinding as HostBinding157 } from "@angular/core";
+import { Directive as Directive67, HostBinding as HostBinding157 } from "@angular/core";
 import * as i0228 from "@angular/core";
 var EclTimelineItemTitleDirective = class _EclTimelineItemTitleDirective extends ECLBaseDirective {
   get cssClasses() {
@@ -19561,7 +19578,7 @@ var EclTimelineItemTitleDirective = class _EclTimelineItemTitleDirective extends
   }
 };
 i0228.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0228, type: EclTimelineItemTitleDirective, decorators: [{
-  type: Directive66,
+  type: Directive67,
   args: [{
     selector: "[eclTimelineItemTitle]"
   }]
@@ -19571,7 +19588,7 @@ i0228.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] } });
 
 // lib/components/ecl-timeline/ecl-timeline-item-toggler.component.mjs
-import { Component as Component102, EventEmitter as EventEmitter48, HostListener as HostListener24, Output as Output48 } from "@angular/core";
+import { Component as Component101, EventEmitter as EventEmitter48, HostListener as HostListener24, Output as Output48 } from "@angular/core";
 import * as i0229 from "@angular/core";
 var EclTimelineItemTogglerComponent = class _EclTimelineItemTogglerComponent extends ECLBaseDirective {
   constructor() {
@@ -19589,7 +19606,7 @@ var EclTimelineItemTogglerComponent = class _EclTimelineItemTogglerComponent ext
   }
 };
 i0229.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0229, type: EclTimelineItemTogglerComponent, decorators: [{
-  type: Component102,
+  type: Component101,
   args: [{ selector: "ecl-timeline-item-toggler", template: "<ng-content></ng-content>\n" }]
 }], propDecorators: { toggle: [{
   type: Output48
@@ -19599,13 +19616,13 @@ i0229.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
 }] } });
 
 // lib/components/ecl-timeline/ecl-timeline-item.component.mjs
-import { __decorate as __decorate33 } from "tslib";
-import { Component as Component103, Input as Input101, HostBinding as HostBinding158, ViewEncapsulation as ViewEncapsulation17, Output as Output49, EventEmitter as EventEmitter49, ContentChild as ContentChild29, forwardRef as forwardRef58 } from "@angular/core";
-import { coerceBoolean as coerceBoolean30 } from "@eui/base";
+import { __decorate as __decorate28 } from "tslib";
+import { Component as Component102, Input as Input102, HostBinding as HostBinding158, ViewEncapsulation as ViewEncapsulation17, Output as Output49, EventEmitter as EventEmitter49, ContentChild as ContentChild28, forwardRef as forwardRef58 } from "@angular/core";
+import { coerceBoolean as coerceBoolean26 } from "@eui/base";
 import { Subject as Subject29 } from "rxjs";
 import { takeUntil as takeUntil26 } from "rxjs/operators";
 import * as i0230 from "@angular/core";
-import * as i145 from "@angular/common";
+import * as i142 from "@angular/common";
 import * as i56 from "@ngx-translate/core";
 var EclTimelineItemToggleEvent = class extends EclBaseEvent {
   constructor(isExpanded, toggleGroup) {
@@ -19698,14 +19715,14 @@ var EclTimelineItemComponent = class _EclTimelineItemComponent extends ECLBaseDi
 
 <ng-template #content>
     <ng-content></ng-content>
-</ng-template>`, styles: ["ecl-timeline-item{display:list-item}\n"], dependencies: [{ kind: "directive", type: i145.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i145.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: "pipe", type: i56.TranslatePipe, name: "translate" }], encapsulation: i0230.ViewEncapsulation.None });
+</ng-template>`, styles: ["ecl-timeline-item{display:list-item}\n"], dependencies: [{ kind: "directive", type: i142.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i142.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: "pipe", type: i56.TranslatePipe, name: "translate" }], encapsulation: i0230.ViewEncapsulation.None });
   }
 };
-__decorate33([
-  coerceBoolean30
+__decorate28([
+  coerceBoolean26
 ], EclTimelineItemComponent.prototype, "isTogglerExpanded", void 0);
 i0230.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0230, type: EclTimelineItemComponent, decorators: [{
-  type: Component103,
+  type: Component102,
   args: [{ selector: "ecl-timeline-item", encapsulation: ViewEncapsulation17.None, template: `<div class="ecl-timeline__tooltip" *ngIf="!isToggler">
     <div class="ecl-timeline__tooltip-arrow"></div>
     <div *ngIf="label" class="ecl-timeline__label">{{ label }}</div>
@@ -19742,41 +19759,41 @@ i0230.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4
     <ng-content></ng-content>
 </ng-template>`, styles: ["ecl-timeline-item{display:list-item}\n"] }]
 }], propDecorators: { label: [{
-  type: Input101
+  type: Input102
 }], eclTitle: [{
-  type: Input101
+  type: Input102
 }], toggleButtonLabel: [{
-  type: Input101
+  type: Input102
 }], expandLabel: [{
-  type: Input101
+  type: Input102
 }], collapseLabel: [{
-  type: Input101
+  type: Input102
 }], isTogglerExpanded: [{
-  type: Input101
+  type: Input102
 }], cssClasses: [{
   type: HostBinding158,
   args: ["class"]
 }], timelineItemToggler: [{
-  type: ContentChild29,
+  type: ContentChild28,
   args: [forwardRef58(() => EclTimelineItemTogglerComponent)]
 }], isCollapsed: [{
-  type: Input101
+  type: Input102
 }, {
   type: HostBinding158,
   args: ["class.ecl-timeline__item--collapsed"]
 }], isToggler: [{
-  type: Input101
+  type: Input102
 }, {
   type: HostBinding158,
   args: ["class.ecl-timeline__item--toggle"]
 }], toggleGroup: [{
-  type: Input101
+  type: Input102
 }], toggle: [{
   type: Output49
 }] } });
 
 // lib/components/ecl-timeline/ecl-timeline.component.mjs
-import { Component as Component104, ContentChildren as ContentChildren28, forwardRef as forwardRef60, HostBinding as HostBinding159 } from "@angular/core";
+import { Component as Component103, ContentChildren as ContentChildren28, forwardRef as forwardRef60, HostBinding as HostBinding159 } from "@angular/core";
 import { Subject as Subject30 } from "rxjs";
 import { takeUntil as takeUntil27 } from "rxjs/operators";
 import * as i0231 from "@angular/core";
@@ -19812,7 +19829,7 @@ var EclTimelineComponent = class _EclTimelineComponent extends ECLBaseDirective
   }
 };
 i0231.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0231, type: EclTimelineComponent, decorators: [{
-  type: Component104,
+  type: Component103,
   args: [{ selector: "ecl-timeline", template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
 }], propDecorators: { attrRole: [{
   type: HostBinding159,
@@ -20356,10 +20373,11 @@ export {
   EclPageHeaderBackgroundPictureDirective,
   EclPageHeaderComponent,
   EclPageHeaderComponentModule,
-  EclPageHeaderDescriptionContainerComponent,
+  EclPageHeaderDescriptionContainerDirective,
   EclPageHeaderDescriptionDirective,
   EclPageHeaderDescriptionPictureDirective,
   EclPageHeaderDescriptionThumbnailDirective,
+  EclPageHeaderInfoDirective,
   EclPageHeaderMetaDirective,
   EclPageHeaderMetaItemDirective,
   EclPageHeaderTitleDirective,