@eui/ecl 18.0.0-next.56 → 18.0.0-next.57

package/fesm2022/eui-ecl.mjs

@@ -947,12 +947,12 @@ var EclButtonComponent = class _EclButtonComponent extends ECLBaseDirective {
     this.ɵfac = i013.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i013, type: _EclButtonComponent, deps: [{ token: i013.ElementRef }], target: i013.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i013.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: { isIconOnly: ["isIconOnly", "isIconOnly", booleanAttribute3], variant: "variant", containerStyleClass: "containerStyleClass" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "iconComponents", predicate: i013.forwardRef(() => EclIconComponent) }], usesInheritance: true, ngImport: i013, template: '<span *ngIf="hasIcon" class="ecl-button__container {{ containerStyleClass }}">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</span>\n<ng-container *ngIf="!hasIcon">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</ng-container>\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "directive", type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    this.ɵcmp = i013.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: { isIconOnly: ["isIconOnly", "isIconOnly", booleanAttribute3], variant: "variant", containerStyleClass: "containerStyleClass" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "iconComponents", predicate: i013.forwardRef(() => EclIconComponent) }], usesInheritance: true, ngImport: i013, template: '@if (hasIcon) {\n    <span class="ecl-button__container {{ containerStyleClass }}">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</span>\n}\n@else {\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: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
   }
 };
 i013.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i013, type: EclButtonComponent, decorators: [{
   type: Component4,
-  args: [{ selector: "button[eclButton], button[ecl-button], a[eclButton]", template: '<span *ngIf="hasIcon" class="ecl-button__container {{ containerStyleClass }}">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</span>\n<ng-container *ngIf="!hasIcon">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</ng-container>\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n' }]
+  args: [{ selector: "button[eclButton], button[ecl-button], a[eclButton]", template: '@if (hasIcon) {\n    <span class="ecl-button__container {{ containerStyleClass }}">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</span>\n}\n@else {\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n' }]
 }], ctorParameters: () => [{ type: i013.ElementRef }], propDecorators: { isIconOnly: [{
   type: Input5,
   args: [{ transform: booleanAttribute3 }]
@@ -1666,8 +1666,7 @@ i030.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 // lib/components/ecl-site-header/language/ecl-site-header-language-popover.component.mjs
 import { Component as Component11, EventEmitter as EventEmitter4, HostBinding as HostBinding18, Input as Input10, Output as Output4 } from "@angular/core";
 import * as i031 from "@angular/core";
-import * as i23 from "@angular/common";
-import * as i6 from "@ngx-translate/core";
+import * as i5 from "@ngx-translate/core";
 var EclSiteHeaderLanguageSelectedEvent = class extends EclBaseEvent {
   constructor(language) {
     super();
@@ -1736,52 +1735,58 @@ var EclSiteHeaderLanguagePopoverComponent = class _EclSiteHeaderLanguagePopoverC
 </div>
 
 <div class="ecl-site-header__language-content" [class.ecl-site-header__language-content--stack]="isStack">
-    <div *ngIf="euLanguages.length" class="ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount }}-col">
-        <div class="ecl-site-header__language-category-title">
-            {{ 'ecl.language-list.EU-LANGUAGES' | translate }}
+    @if (euLanguages.length) {
+        <div class="ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount }}-col">
+            <div class="ecl-site-header__language-category-title">
+                {{ 'ecl.language-list.EU-LANGUAGES' | translate }}
+            </div>
+            <ul class="ecl-site-header__language-list">
+                @for (item of euLanguages; track item.code) {
+                    <li class="ecl-site-header__language-item">
+                        <a
+                            eclLink
+                            href="#"
+                            variant="standalone"
+                            [lang]="item.code"
+                            [hreflang]="item.code"
+                            class="ecl-site-header__language-link"
+                            [class.ecl-site-header__language-link--active]="item.code === languageCode"
+                            (click)="onLanguageClick(item, $event)">
+                            <span class="ecl-site-header__language-link-code">{{ item.code }}</span>
+                            <span class="ecl-site-header__language-link-label">{{ item.label }}</span>
+                        </a>
+                    </li>
+                }
+            </ul>
         </div>
-        <ul class="ecl-site-header__language-list">
-            <li *ngFor="let item of euLanguages" class="ecl-site-header__language-item">
-                <a
-                    eclLink
-                    href="#"
-                    variant="standalone"
-                    [lang]="item.code"
-                    [hreflang]="item.code"
-                    class="ecl-site-header__language-link"
-                    [class.ecl-site-header__language-link--active]="item.code === languageCode"
-                    (click)="onLanguageClick(item, $event)">
-                    <span class="ecl-site-header__language-link-code">{{ item.code }}</span>
-                    <span class="ecl-site-header__language-link-label">{{ item.label }}</span>
-                </a>
-            </li>
-        </ul>
-    </div>
-    <div
-        *ngIf="nonEuLanguages.length"
-        class="ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount }}-col">
-        <div class="ecl-site-header__language-category-title">
-            {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}
+    }
+    @if (nonEuLanguages.length) {
+        <div class="ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount }}-col">
+            <div class="ecl-site-header__language-category-title">
+                {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}
+            </div>
+            <ul class="ecl-site-header__language-list">
+                @for (item of nonEuLanguages; track item.code) {
+                    <li class="ecl-site-header__language-item">
+                        <a
+                            eclLink
+                            href="#"
+                            [lang]="item.code"
+                            [hreflang]="item.code"
+                            variant="standalone"
+                            class="ecl-site-header__language-link"
+                            [class.ecl-site-header__language-link--active]="item.code === languageCode"
+                            (click)="onLanguageClick(item, $event)">
+                            <span class="ecl-site-header__language-link-code">{{ item.code }}</span>
+                            <span class="ecl-site-header__language-link-label">{{ item.label }}</span>
+                        </a>
+                    </li>
+                }
+            </ul>
         </div>
-        <ul class="ecl-site-header__language-list">
-            <li *ngFor="let item of nonEuLanguages" class="ecl-site-header__language-item">
-                <a
-                    eclLink
-                    href="#"
-                    [lang]="item.code"
-                    [hreflang]="item.code"
-                    variant="standalone"
-                    class="ecl-site-header__language-link"
-                    [class.ecl-site-header__language-link--active]="item.code === languageCode"
-                    (click)="onLanguageClick(item, $event)">
-                    <span class="ecl-site-header__language-link-code">{{ item.code }}</span>
-                    <span class="ecl-site-header__language-link-label">{{ item.label }}</span>
-                </a>
-            </li>
-        </ul>
-    </div>
+    }
 </div>
-`, dependencies: [{ kind: "directive", type: i23.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i23.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: i6.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ 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-rc.0", ngImport: i031, type: EclSiteHeaderLanguagePopoverComponent, decorators: [{
@@ -1805,50 +1810,56 @@ i031.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 </div>
 
 <div class="ecl-site-header__language-content" [class.ecl-site-header__language-content--stack]="isStack">
-    <div *ngIf="euLanguages.length" class="ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount }}-col">
-        <div class="ecl-site-header__language-category-title">
-            {{ 'ecl.language-list.EU-LANGUAGES' | translate }}
+    @if (euLanguages.length) {
+        <div class="ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount }}-col">
+            <div class="ecl-site-header__language-category-title">
+                {{ 'ecl.language-list.EU-LANGUAGES' | translate }}
+            </div>
+            <ul class="ecl-site-header__language-list">
+                @for (item of euLanguages; track item.code) {
+                    <li class="ecl-site-header__language-item">
+                        <a
+                            eclLink
+                            href="#"
+                            variant="standalone"
+                            [lang]="item.code"
+                            [hreflang]="item.code"
+                            class="ecl-site-header__language-link"
+                            [class.ecl-site-header__language-link--active]="item.code === languageCode"
+                            (click)="onLanguageClick(item, $event)">
+                            <span class="ecl-site-header__language-link-code">{{ item.code }}</span>
+                            <span class="ecl-site-header__language-link-label">{{ item.label }}</span>
+                        </a>
+                    </li>
+                }
+            </ul>
         </div>
-        <ul class="ecl-site-header__language-list">
-            <li *ngFor="let item of euLanguages" class="ecl-site-header__language-item">
-                <a
-                    eclLink
-                    href="#"
-                    variant="standalone"
-                    [lang]="item.code"
-                    [hreflang]="item.code"
-                    class="ecl-site-header__language-link"
-                    [class.ecl-site-header__language-link--active]="item.code === languageCode"
-                    (click)="onLanguageClick(item, $event)">
-                    <span class="ecl-site-header__language-link-code">{{ item.code }}</span>
-                    <span class="ecl-site-header__language-link-label">{{ item.label }}</span>
-                </a>
-            </li>
-        </ul>
-    </div>
-    <div
-        *ngIf="nonEuLanguages.length"
-        class="ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount }}-col">
-        <div class="ecl-site-header__language-category-title">
-            {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}
+    }
+    @if (nonEuLanguages.length) {
+        <div class="ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount }}-col">
+            <div class="ecl-site-header__language-category-title">
+                {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}
+            </div>
+            <ul class="ecl-site-header__language-list">
+                @for (item of nonEuLanguages; track item.code) {
+                    <li class="ecl-site-header__language-item">
+                        <a
+                            eclLink
+                            href="#"
+                            [lang]="item.code"
+                            [hreflang]="item.code"
+                            variant="standalone"
+                            class="ecl-site-header__language-link"
+                            [class.ecl-site-header__language-link--active]="item.code === languageCode"
+                            (click)="onLanguageClick(item, $event)">
+                            <span class="ecl-site-header__language-link-code">{{ item.code }}</span>
+                            <span class="ecl-site-header__language-link-label">{{ item.label }}</span>
+                        </a>
+                    </li>
+                }
+            </ul>
         </div>
-        <ul class="ecl-site-header__language-list">
-            <li *ngFor="let item of nonEuLanguages" class="ecl-site-header__language-item">
-                <a
-                    eclLink
-                    href="#"
-                    [lang]="item.code"
-                    [hreflang]="item.code"
-                    variant="standalone"
-                    class="ecl-site-header__language-link"
-                    [class.ecl-site-header__language-link--active]="item.code === languageCode"
-                    (click)="onLanguageClick(item, $event)">
-                    <span class="ecl-site-header__language-link-code">{{ item.code }}</span>
-                    <span class="ecl-site-header__language-link-label">{{ item.label }}</span>
-                </a>
-            </li>
-        </ul>
-    </div>
+    }
 </div>
 ` }]
 }], ctorParameters: () => [{ type: i031.ElementRef }, { type: EclThemeService }], propDecorators: { languageCode: [{
@@ -1906,7 +1917,7 @@ import { Component as Component12, ElementRef as ElementRef7, EventEmitter as Ev
 import { coerceElement } from "@eui/base";
 import { debounceTime, fromEvent, Subject as Subject5, takeUntil as takeUntil5 } from "rxjs";
 import * as i032 from "@angular/core";
-import * as i62 from "@angular/common";
+import * as i6 from "@angular/common";
 import * as i7 from "@ngx-translate/core";
 var EclSiteHeaderLanguageClickEvent = class extends EclBaseEvent {
 };
@@ -2078,7 +2089,7 @@ var EclSiteHeaderLanguageComponent = class _EclSiteHeaderLanguageComponent exten
     (languageSelected)="onLanguageSelected($event)"
     (languageClosed)="onLanguageClosed($event)">
 </ecl-site-header-language-popover>
-}`, dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: ["languageCode", "euLanguages", "nonEuLanguages", "euColumnsCount", "nonEuColumnsCount", "isHidden", "isPushRight", "isStack", "isFull", "rightPosition", "languageArrowPosition"], outputs: ["languageClosed", "languageSelected"] }, { kind: "pipe", type: i62.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+}`, dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: ["languageCode", "euLanguages", "nonEuLanguages", "euColumnsCount", "nonEuColumnsCount", "isHidden", "isPushRight", "isStack", "isFull", "rightPosition", "languageArrowPosition"], outputs: ["languageClosed", "languageSelected"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
   }
 };
 __decorate([
@@ -2159,12 +2170,9 @@ i032.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-site-header/login/ecl-site-header-login.component.mjs
-import { __decorate as __decorate2 } from "tslib";
-import { Component as Component13, EventEmitter as EventEmitter6, HostBinding as HostBinding20, Input as Input12, Output as Output6 } from "@angular/core";
-import { coerceBoolean } from "@eui/base";
+import { Component as Component13, EventEmitter as EventEmitter6, HostBinding as HostBinding20, Input as Input12, Output as Output6, booleanAttribute as booleanAttribute7 } from "@angular/core";
 import * as i033 from "@angular/core";
-import * as i16 from "@angular/common";
-import * as i3 from "@ngx-translate/core";
+import * as i23 from "@ngx-translate/core";
 var EclSiteHeaderLoginEvent = class extends EclBaseEvent {
 };
 var EclSiteHeaderLoginBoxToggleEvent = class extends EclBaseEvent {
@@ -2206,17 +2214,7 @@ var EclSiteHeaderLoginComponent = class _EclSiteHeaderLoginComponent extends ECL
     this.ɵfac = i033.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i033, type: _EclSiteHeaderLoginComponent, deps: null, target: i033.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i033.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.0", type: _EclSiteHeaderLoginComponent, selector: "ecl-site-header-login", inputs: { isLoggedIn: "isLoggedIn" }, outputs: { login: "login", loginBoxToggle: "loginBoxToggle" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, usesOnChanges: true, ngImport: i033, template: `<ng-container *ngIf="!isLoggedIn">
-    <a
-        href="#"
-        class="ecl-button ecl-button--ghost ecl-site-header__login-toggle"
-        [attr.aria-expanded]="isLoginBoxActive"
-        (click)="onLoginClick($event)">
-        <ecl-icon icon="log-in" size="s" class="ecl-site-header__icon"></ecl-icon>
-        {{ 'ecl.site-header.LOGIN' | translate }}
-    </a>
-</ng-container>
-<ng-container *ngIf="isLoggedIn">
+    this.ɵcmp = i033.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclSiteHeaderLoginComponent, selector: "ecl-site-header-login", inputs: { isLoggedIn: ["isLoggedIn", "isLoggedIn", booleanAttribute7] }, outputs: { login: "login", loginBoxToggle: "loginBoxToggle" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, usesOnChanges: true, ngImport: i033, template: `@if (isLoggedIn) {
     <a
         href="#"
         class="ecl-button ecl-button--ghost ecl-site-header__login-toggle"
@@ -2230,16 +2228,7 @@ var EclSiteHeaderLoginComponent = class _EclSiteHeaderLoginComponent extends ECL
     <div class="{{ getLoginBoxCssClasses() }}">
         <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: i16.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" }] });
-  }
-};
-__decorate2([
-  coerceBoolean
-], EclSiteHeaderLoginComponent.prototype, "isLoggedIn", void 0);
-i033.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i033, type: EclSiteHeaderLoginComponent, decorators: [{
-  type: Component13,
-  args: [{ selector: "ecl-site-header-login", template: `<ng-container *ngIf="!isLoggedIn">
+} @else {
     <a
         href="#"
         class="ecl-button ecl-button--ghost ecl-site-header__login-toggle"
@@ -2248,8 +2237,13 @@ i033.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
         <ecl-icon icon="log-in" size="s" class="ecl-site-header__icon"></ecl-icon>
         {{ 'ecl.site-header.LOGIN' | translate }}
     </a>
-</ng-container>
-<ng-container *ngIf="isLoggedIn">
+}
+`, styles: [".ecl-site-header__login-toggle .ecl-site-header__login-arrow{display:inline-flex}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i23.TranslatePipe, name: "translate" }] });
+  }
+};
+i033.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i033, type: EclSiteHeaderLoginComponent, decorators: [{
+  type: Component13,
+  args: [{ selector: "ecl-site-header-login", template: `@if (isLoggedIn) {
     <a
         href="#"
         class="ecl-button ecl-button--ghost ecl-site-header__login-toggle"
@@ -2263,10 +2257,20 @@ i033.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
     <div class="{{ getLoginBoxCssClasses() }}">
         <ng-content></ng-content>
     </div>
-</ng-container>
+} @else {
+    <a
+        href="#"
+        class="ecl-button ecl-button--ghost ecl-site-header__login-toggle"
+        [attr.aria-expanded]="isLoginBoxActive"
+        (click)="onLoginClick($event)">
+        <ecl-icon icon="log-in" size="s" class="ecl-site-header__icon"></ecl-icon>
+        {{ 'ecl.site-header.LOGIN' | translate }}
+    </a>
+}
 `, styles: [".ecl-site-header__login-toggle .ecl-site-header__login-arrow{display:inline-flex}\n"] }]
 }], propDecorators: { isLoggedIn: [{
-  type: Input12
+  type: Input12,
+  args: [{ transform: booleanAttribute7 }]
 }], class: [{
   type: HostBinding20,
   args: ["class"]
@@ -2280,7 +2284,7 @@ i033.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 import { Component as Component14, EventEmitter as EventEmitter7, forwardRef as forwardRef8, HostBinding as HostBinding21, Input as Input13, Output as Output7 } from "@angular/core";
 import { NG_VALUE_ACCESSOR as NG_VALUE_ACCESSOR2 } from "@angular/forms";
 import * as i034 from "@angular/core";
-import * as i17 from "@angular/forms";
+import * as i16 from "@angular/forms";
 import * as i4 from "@ngx-translate/core";
 var EclSiteHeaderSearchEvent = class extends EclBaseEvent {
   constructor(keyword) {
@@ -2365,7 +2369,7 @@ var EclSiteHeaderSearchComponent = class _EclSiteHeaderSearchComponent extends E
     [searchButtonLabel]="searchButtonLabel"
     [class]="getSearchBoxCssClasses()">
 </ecl-search-form>
-`, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i17.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i17.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: i4.TranslatePipe, name: "translate" }] });
+`, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i16.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i16.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: i4.TranslatePipe, name: "translate" }] });
   }
 };
 i034.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i034, type: EclSiteHeaderSearchComponent, decorators: [{
@@ -2413,7 +2417,7 @@ import { Component as Component15, ContentChild, EventEmitter as EventEmitter8,
 import { Subject as Subject6, takeUntil as takeUntil6 } from "rxjs";
 import * as i035 from "@angular/core";
 import * as i24 from "@ngx-translate/core";
-import * as i42 from "@angular/common";
+import * as i52 from "@angular/common";
 var EclSiteHeaderLogoClickEvent = class extends EclBaseEvent {
 };
 var EclSiteHeaderComponent = class _EclSiteHeaderComponent extends ECLBaseDirective {
@@ -2484,29 +2488,28 @@ var EclSiteHeaderComponent = class _EclSiteHeaderComponent extends ECLBaseDirect
                     [attr.aria-label]="'ecl.footer.EUROPEAN-COMMISSION' | translate">
                     <ng-content select="[eclSiteHeaderEnvironment]"></ng-content>
 
-                    <ng-container *ngIf="eclThemeService.isEC$ | async">
+                    @if (eclThemeService.isEC$ | async) {
                         <picture class="ecl-picture ecl-site-header__picture"
-                            [attr.title]="'ecl.footer.EUROPEAN-COMMISSION' | translate">
+                                 [attr.title]="'ecl.footer.EUROPEAN-COMMISSION' | translate">
                             <source
                                 srcset="./assets/images/ecl/ec/logo/positive/logo-ec--{{  getEULanguageCode() }}.svg"
                                 media="(min-width: 996px)" />
                             <img class="ecl-site-header__logo-image"
-                                src="./assets/images/ecl/ec/logo/positive/logo-ec--{{ getEULanguageCode() }}.svg"
-                                alt="European Commission logo" />
+                                 src="./assets/images/ecl/ec/logo/positive/logo-ec--{{ getEULanguageCode() }}.svg"
+                                 alt="European Commission logo" />
                         </picture>
-                    </ng-container>
-
-                    <ng-container *ngIf="eclThemeService.isEU$ | async">
+                    }
+                    @if (eclThemeService.isEU$ | async) {
                         <picture class="ecl-picture ecl-site-header__picture"
-                            [attr.title]="'ecl.footer.EUROPEAN-UNION' | translate">
+                                 [attr.title]="'ecl.footer.EUROPEAN-UNION' | translate">
                             <source
                                 srcset="./assets/images/ecl/eu/logo/standard-version/positive/logo-eu--{{ getEULanguageCode() }}.svg"
                                 media="(min-width: 996px)" />
                             <img class="ecl-site-header__logo-image"
-                                src="./assets/images/ecl/eu/logo/condensed-version/positive/logo-eu--{{ getEULanguageCode() }}.svg"
-                                alt="European Union flag" />
+                                 src="./assets/images/ecl/eu/logo/condensed-version/positive/logo-eu--{{ getEULanguageCode() }}.svg"
+                                 alt="European Union flag" />
                         </picture>
-                    </ng-container>
+                    }
                 </a>
                 }
                 <ng-content select="ecl-site-header-action"></ng-content>
@@ -2518,15 +2521,17 @@ var EclSiteHeaderComponent = class _EclSiteHeaderComponent extends ECLBaseDirect
 
 
 <ng-content select="ecl-site-header-banner-top"></ng-content>
-
-<div *ngIf="siteName" class="ecl-site-header__banner">
-    <div class="ecl-container">
-        <div class="ecl-site-header__site-name">{{ siteName }}</div>
-        <ng-content select="[eclSiteHeaderCta]"></ng-content>
+@if (siteName) {
+    <div class="ecl-site-header__banner">
+        <div class="ecl-container">
+            <div class="ecl-site-header__site-name">{{ siteName }}</div>
+            <ng-content select="[eclSiteHeaderCta]"></ng-content>
+        </div>
     </div>
-</div>
+}
 
-<ng-content select="ecl-menu"></ng-content>`, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i42.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "pipe", type: i42.AsyncPipe, name: "async" }, { kind: "pipe", type: i24.TranslatePipe, name: "translate" }] });
+<ng-content select="ecl-menu"></ng-content>
+`, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "pipe", type: i52.AsyncPipe, name: "async" }, { kind: "pipe", type: i24.TranslatePipe, name: "translate" }] });
   }
 };
 i035.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i035, type: EclSiteHeaderComponent, decorators: [{
@@ -2543,29 +2548,28 @@ i035.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
                     [attr.aria-label]="'ecl.footer.EUROPEAN-COMMISSION' | translate">
                     <ng-content select="[eclSiteHeaderEnvironment]"></ng-content>
 
-                    <ng-container *ngIf="eclThemeService.isEC$ | async">
+                    @if (eclThemeService.isEC$ | async) {
                         <picture class="ecl-picture ecl-site-header__picture"
-                            [attr.title]="'ecl.footer.EUROPEAN-COMMISSION' | translate">
+                                 [attr.title]="'ecl.footer.EUROPEAN-COMMISSION' | translate">
                             <source
                                 srcset="./assets/images/ecl/ec/logo/positive/logo-ec--{{  getEULanguageCode() }}.svg"
                                 media="(min-width: 996px)" />
                             <img class="ecl-site-header__logo-image"
-                                src="./assets/images/ecl/ec/logo/positive/logo-ec--{{ getEULanguageCode() }}.svg"
-                                alt="European Commission logo" />
+                                 src="./assets/images/ecl/ec/logo/positive/logo-ec--{{ getEULanguageCode() }}.svg"
+                                 alt="European Commission logo" />
                         </picture>
-                    </ng-container>
-
-                    <ng-container *ngIf="eclThemeService.isEU$ | async">
+                    }
+                    @if (eclThemeService.isEU$ | async) {
                         <picture class="ecl-picture ecl-site-header__picture"
-                            [attr.title]="'ecl.footer.EUROPEAN-UNION' | translate">
+                                 [attr.title]="'ecl.footer.EUROPEAN-UNION' | translate">
                             <source
                                 srcset="./assets/images/ecl/eu/logo/standard-version/positive/logo-eu--{{ getEULanguageCode() }}.svg"
                                 media="(min-width: 996px)" />
                             <img class="ecl-site-header__logo-image"
-                                src="./assets/images/ecl/eu/logo/condensed-version/positive/logo-eu--{{ getEULanguageCode() }}.svg"
-                                alt="European Union flag" />
+                                 src="./assets/images/ecl/eu/logo/condensed-version/positive/logo-eu--{{ getEULanguageCode() }}.svg"
+                                 alt="European Union flag" />
                         </picture>
-                    </ng-container>
+                    }
                 </a>
                 }
                 <ng-content select="ecl-site-header-action"></ng-content>
@@ -2577,15 +2581,17 @@ i035.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 
 
 <ng-content select="ecl-site-header-banner-top"></ng-content>
-
-<div *ngIf="siteName" class="ecl-site-header__banner">
-    <div class="ecl-container">
-        <div class="ecl-site-header__site-name">{{ siteName }}</div>
-        <ng-content select="[eclSiteHeaderCta]"></ng-content>
+@if (siteName) {
+    <div class="ecl-site-header__banner">
+        <div class="ecl-container">
+            <div class="ecl-site-header__site-name">{{ siteName }}</div>
+            <ng-content select="[eclSiteHeaderCta]"></ng-content>
+        </div>
     </div>
-</div>
+}
 
-<ng-content select="ecl-menu"></ng-content>`, styles: [":host{display:block}\n"] }]
+<ng-content select="ecl-menu"></ng-content>
+`, styles: [":host{display:block}\n"] }]
 }], ctorParameters: () => [{ type: EclLanguageService }, { type: i24.TranslateService }, { type: EclThemeService }], propDecorators: { logoUrl: [{
   type: Input14
 }], cssClasses: [{
@@ -3108,11 +3114,10 @@ i044.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-banner/ecl-banner.component.mjs
-import { Component as Component18, ContentChild as ContentChild3, ContentChildren as ContentChildren4, HostBinding as HostBinding30, Input as Input15, ViewChild as ViewChild4, booleanAttribute as booleanAttribute7, forwardRef as forwardRef9 } from "@angular/core";
+import { Component as Component18, ContentChild as ContentChild3, ContentChildren as ContentChildren4, HostBinding as HostBinding30, Input as Input15, ViewChild as ViewChild4, booleanAttribute as booleanAttribute8, forwardRef as forwardRef9 } from "@angular/core";
 import { Subject as Subject8, delay, takeUntil as takeUntil8 } from "rxjs";
 import * as i045 from "@angular/core";
-import * as i18 from "@angular/cdk/layout";
-import * as i25 from "@angular/common";
+import * as i17 from "@angular/cdk/layout";
 var EclBannerComponent = class _EclBannerComponent extends ECLBaseDirective {
   get cssClasses() {
     return [
@@ -3218,16 +3223,16 @@ var EclBannerComponent = class _EclBannerComponent extends ECLBaseDirective {
     });
   }
   static {
-    this.ɵfac = i045.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i045, type: _EclBannerComponent, deps: [{ token: i045.ElementRef }, { token: i045.Renderer2 }, { token: i18.BreakpointObserver }], target: i045.ɵɵFactoryTarget.Component });
+    this.ɵfac = i045.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i045, type: _EclBannerComponent, deps: [{ token: i045.ElementRef }, { token: i045.Renderer2 }, { token: i17.BreakpointObserver }], target: i045.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i045.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclBannerComponent, selector: "ecl-banner", inputs: { variant: "variant", eclSize: "eclSize", copyright: "copyright", isCentered: ["isCentered", "isCentered", booleanAttribute7], isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute7] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclBannerImage", first: true, predicate: EclBannerImageDirective, descendants: true }, { propertyName: "eclLinkComponents", predicate: i045.forwardRef(() => EclLinkDirective) }], viewQueries: [{ propertyName: "bannerContainer", first: true, predicate: ["bannerContainer"], descendants: true }], usesInheritance: true, ngImport: i045, 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: i25.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    this.ɵcmp = i045.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclBannerComponent, selector: "ecl-banner", inputs: { variant: "variant", eclSize: "eclSize", copyright: "copyright", isCentered: ["isCentered", "isCentered", booleanAttribute8], isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute8] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclBannerImage", first: true, predicate: EclBannerImageDirective, descendants: true }, { propertyName: "eclLinkComponents", predicate: i045.forwardRef(() => EclLinkDirective) }], viewQueries: [{ propertyName: "bannerContainer", first: true, predicate: ["bannerContainer"], descendants: true }], usesInheritance: true, ngImport: i045, 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            @if (hasCtaLink) {\n                <div class="ecl-banner__cta">\n                    <ng-content select="[eclLink]"></ng-content>\n                </div>\n            }\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n' });
   }
 };
 i045.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i045, type: EclBannerComponent, decorators: [{
   type: Component18,
-  args: [{ selector: "ecl-banner", 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>' }]
-}], ctorParameters: () => [{ type: i045.ElementRef }, { type: i045.Renderer2 }, { type: i18.BreakpointObserver }], propDecorators: { variant: [{
+  args: [{ selector: "ecl-banner", 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            @if (hasCtaLink) {\n                <div class="ecl-banner__cta">\n                    <ng-content select="[eclLink]"></ng-content>\n                </div>\n            }\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n' }]
+}], ctorParameters: () => [{ type: i045.ElementRef }, { type: i045.Renderer2 }, { type: i17.BreakpointObserver }], propDecorators: { variant: [{
   type: Input15
 }], eclSize: [{
   type: Input15
@@ -3235,10 +3240,10 @@ i045.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Input15
 }], isCentered: [{
   type: Input15,
-  args: [{ transform: booleanAttribute7 }]
+  args: [{ transform: booleanAttribute8 }]
 }], isFullWidth: [{
   type: Input15,
-  args: [{ transform: booleanAttribute7 }]
+  args: [{ transform: booleanAttribute8 }]
 }], eclLinkComponents: [{
   type: ContentChildren4,
   args: [forwardRef9(() => EclLinkDirective)]
@@ -3333,7 +3338,7 @@ i047.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 // lib/components/ecl-blockquote/ecl-blockquote.component.mjs
 import { Component as Component19, Input as Input16, HostBinding as HostBinding32, ChangeDetectionStrategy as ChangeDetectionStrategy7, ViewEncapsulation } from "@angular/core";
 import * as i048 from "@angular/core";
-import * as i19 from "@ngx-translate/core";
+import * as i18 from "@ngx-translate/core";
 var EclBlockquoteComponent = class _EclBlockquoteComponent extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-blockquote")].join(" ").trim();
@@ -3357,7 +3362,7 @@ var EclBlockquoteComponent = class _EclBlockquoteComponent extends ECLBaseDirect
     return language.code;
   }
   static {
-    this.ɵfac = i048.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i048, type: _EclBlockquoteComponent, deps: [{ token: i048.ChangeDetectorRef }, { token: i19.TranslateService }, { token: EclLanguageService }], target: i048.ɵɵFactoryTarget.Component });
+    this.ɵfac = i048.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i048, type: _EclBlockquoteComponent, deps: [{ token: i048.ChangeDetectorRef }, { token: i18.TranslateService }, { token: EclLanguageService }], target: i048.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i048.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclBlockquoteComponent, selector: "[eclBlockquote]", inputs: { author: "author" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i048, 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: i048.ChangeDetectionStrategy.OnPush, encapsulation: i048.ViewEncapsulation.None });
@@ -3366,7 +3371,7 @@ var EclBlockquoteComponent = class _EclBlockquoteComponent extends ECLBaseDirect
 i048.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i048, 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: i048.ChangeDetectorRef }, { type: i19.TranslateService }, { type: EclLanguageService }], propDecorators: { author: [{
+}], ctorParameters: () => [{ type: i048.ChangeDetectorRef }, { type: i18.TranslateService }, { type: EclLanguageService }], propDecorators: { author: [{
   type: Input16
 }], cssClasses: [{
   type: HostBinding32,
@@ -3442,10 +3447,10 @@ i050.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] });
 
 // lib/components/ecl-breadcrumb/ecl-breadcrumb-segment.component.mjs
-import { Component as Component20, EventEmitter as EventEmitter10, HostBinding as HostBinding34, Input as Input17, Output as Output10, ViewEncapsulation as ViewEncapsulation3, booleanAttribute as booleanAttribute8 } from "@angular/core";
+import { Component as Component20, EventEmitter as EventEmitter10, HostBinding as HostBinding34, Input as Input17, Output as Output10, ViewEncapsulation as ViewEncapsulation3, booleanAttribute as booleanAttribute9 } from "@angular/core";
 import * as i051 from "@angular/core";
-import * as i110 from "@angular/common";
-import * as i26 from "@angular/router";
+import * as i19 from "@angular/common";
+import * as i25 from "@angular/router";
 var EclBreadcrumbSegmentClickEvent = class extends EclBaseEvent {
 };
 var EclBreadcrumbSegmentComponent = class _EclBreadcrumbSegmentComponent extends ECLBaseDirective {
@@ -3481,7 +3486,7 @@ var EclBreadcrumbSegmentComponent = class _EclBreadcrumbSegmentComponent extends
     this.ɵfac = i051.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i051, type: _EclBreadcrumbSegmentComponent, deps: [{ token: i051.ElementRef }], target: i051.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i051.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment", inputs: { routerLink: "routerLink", queryParams: "queryParams", href: "href", queryParamsHandling: "queryParamsHandling", isCurrentPage: ["isCurrentPage", "isCurrentPage", booleanAttribute8], isHidden: ["isHidden", "isHidden", booleanAttribute8] }, outputs: { segmentClick: "segmentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.role": "this.role", "attr.aria-hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i051, 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: i110.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i26.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: i051.ViewEncapsulation.None });
+    this.ɵcmp = i051.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment", inputs: { routerLink: "routerLink", queryParams: "queryParams", href: "href", queryParamsHandling: "queryParamsHandling", isCurrentPage: ["isCurrentPage", "isCurrentPage", booleanAttribute9], isHidden: ["isHidden", "isHidden", booleanAttribute9] }, outputs: { segmentClick: "segmentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.role": "this.role", "attr.aria-hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i051, template: '@if (!isEllipsis) {\n@if (!isCurrentPage && href) {\n<a eclLink variant="standalone" [isNoVisited]="true" [href]="href" tabindex="0" (click)="onSegmentClick($event)"\n    class="ecl-breadcrumb__link">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</a>\n}\n@if (!isCurrentPage && !href) {\n<a eclLink [routerLink]="routerLink" [queryParams]="queryParams" [queryParamsHandling]="queryParamsHandling"\n    variant="standalone" [isNoVisited]="true" tabindex="0" (click)="onSegmentClick($event)"\n    class="ecl-breadcrumb__link">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</a>\n}\n} @else {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n}\n\n@if (isCurrentPage) {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n} @else {\n<ecl-icon role="presentation" icon="corner-arrow" ariaHidden="true" focusable="false" size="fluid"\n    class="ecl-breadcrumb__icon">\n</ecl-icon>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>', dependencies: [{ kind: "directive", type: i19.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i25.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }], encapsulation: i051.ViewEncapsulation.None });
   }
 };
 i051.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i051, type: EclBreadcrumbSegmentComponent, decorators: [{
@@ -3503,10 +3508,10 @@ i051.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Input17
 }], isCurrentPage: [{
   type: Input17,
-  args: [{ transform: booleanAttribute8 }]
+  args: [{ transform: booleanAttribute9 }]
 }], isHidden: [{
   type: Input17,
-  args: [{ transform: booleanAttribute8 }]
+  args: [{ transform: booleanAttribute9 }]
 }, {
   type: HostBinding34,
   args: ["attr.aria-hidden"]
@@ -3518,10 +3523,10 @@ i051.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-breadcrumb/ecl-breadcrumb.component.mjs
-import { Component as Component21, ContentChildren as ContentChildren5, HostBinding as HostBinding35, Input as Input18, ViewChild as ViewChild5, booleanAttribute as booleanAttribute9, forwardRef as forwardRef11, HostListener as HostListener5 } from "@angular/core";
+import { Component as Component21, ContentChildren as ContentChildren5, HostBinding as HostBinding35, Input as Input18, ViewChild as ViewChild5, booleanAttribute as booleanAttribute10, forwardRef as forwardRef11, HostListener as HostListener5 } from "@angular/core";
 import { Subject as Subject9, takeUntil as takeUntil9 } from "rxjs";
 import * as i052 from "@angular/core";
-import * as i111 from "@ngx-translate/core";
+import * as i110 from "@ngx-translate/core";
 var EclBreadcrumbComponent = class _EclBreadcrumbComponent extends ECLBaseDirective {
   constructor(el, translate, renderer) {
     super();
@@ -3641,10 +3646,10 @@ var EclBreadcrumbComponent = class _EclBreadcrumbComponent extends ECLBaseDirect
     return this.eclSegments.reduce((width, segmentComponent) => width + segmentComponent.el.nativeElement.offsetWidth, 0);
   }
   static {
-    this.ɵfac = i052.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i052, type: _EclBreadcrumbComponent, deps: [{ token: i052.ElementRef }, { token: i111.TranslateService }, { token: i052.Renderer2 }], target: i052.ɵɵFactoryTarget.Component });
+    this.ɵfac = i052.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i052, type: _EclBreadcrumbComponent, deps: [{ token: i052.ElementRef }, { token: i110.TranslateService }, { token: i052.Renderer2 }], target: i052.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i052.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclBreadcrumbComponent, selector: "ecl-breadcrumb", inputs: { isExpanded: ["isExpanded", "isExpanded", booleanAttribute9] }, host: { listeners: { "window:resize": "onWindowResize($event)" }, properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclSegments", predicate: i052.forwardRef(() => EclBreadcrumbSegmentComponent) }], viewQueries: [{ propertyName: "eclEllipsisSegment", first: true, predicate: ["ellipsisSegment"], descendants: true }, { propertyName: "breadcrumbContainer", first: true, predicate: ["breadcrumbContainer"], descendants: true }], usesInheritance: true, ngImport: i052, template: `<ol class="ecl-breadcrumb__container" #breadcrumbContainer>
+    this.ɵcmp = i052.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclBreadcrumbComponent, selector: "ecl-breadcrumb", inputs: { isExpanded: ["isExpanded", "isExpanded", booleanAttribute10] }, host: { listeners: { "window:resize": "onWindowResize($event)" }, properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclSegments", predicate: i052.forwardRef(() => EclBreadcrumbSegmentComponent) }], viewQueries: [{ propertyName: "eclEllipsisSegment", first: true, predicate: ["ellipsisSegment"], descendants: true }, { propertyName: "breadcrumbContainer", first: true, predicate: ["breadcrumbContainer"], descendants: true }], usesInheritance: true, ngImport: i052, template: `<ol class="ecl-breadcrumb__container" #breadcrumbContainer>
     <ecl-breadcrumb-segment #ellipsisSegment [isHidden]="true" class="ecl-breadcrumb__segment--ellipsis">
         <button
             tabindex="0"
@@ -3658,7 +3663,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: i111.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: i110.TranslatePipe, name: "translate" }] });
   }
 };
 i052.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i052, type: EclBreadcrumbComponent, decorators: [{
@@ -3678,9 +3683,9 @@ i052.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
     <ng-content></ng-content>
 </ol>
 `, styles: [":host{display:block}\n"] }]
-}], ctorParameters: () => [{ type: i052.ElementRef }, { type: i111.TranslateService }, { type: i052.Renderer2 }], propDecorators: { isExpanded: [{
+}], ctorParameters: () => [{ type: i052.ElementRef }, { type: i110.TranslateService }, { type: i052.Renderer2 }], propDecorators: { isExpanded: [{
   type: Input18,
-  args: [{ transform: booleanAttribute9 }]
+  args: [{ transform: booleanAttribute10 }]
 }], role: [{
   type: HostBinding35,
   args: ["attr.role"]
@@ -4396,7 +4401,7 @@ var EclSlideEvent = class extends EclBaseEvent {
 };
 
 // lib/components/ecl-carousel/ecl-carousel-item.component.mjs
-import { Component as Component25, EventEmitter as EventEmitter11, HostBinding as HostBinding42, HostListener as HostListener6, Input as Input20, Output as Output11, booleanAttribute as booleanAttribute10, ContentChild as ContentChild6, forwardRef as forwardRef15 } from "@angular/core";
+import { Component as Component25, EventEmitter as EventEmitter11, HostBinding as HostBinding42, HostListener as HostListener6, Input as Input20, Output as Output11, booleanAttribute as booleanAttribute11, ContentChild as ContentChild6, forwardRef as forwardRef15 } from "@angular/core";
 import * as i063 from "@angular/core";
 var EclCarouselItemComponent = class _EclCarouselItemComponent extends ECLBaseDirective {
   constructor(el) {
@@ -4419,7 +4424,7 @@ var EclCarouselItemComponent = class _EclCarouselItemComponent extends ECLBaseDi
     this.ɵfac = i063.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i063, type: _EclCarouselItemComponent, deps: [{ token: i063.ElementRef }], target: i063.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i063.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclCarouselItemComponent, selector: "ecl-carousel-item", inputs: { id: "id", isCurrent: ["isCurrent", "isCurrent", booleanAttribute10] }, outputs: { slideClick: "slideClick" }, host: { listeners: { "click": "onSlideClick()" }, properties: { "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "style.width.%": "this.width", "class": "this.cssClasses", "attr.inert": "this.isInert" } }, queries: [{ propertyName: "banner", first: true, predicate: i063.forwardRef(() => EclBannerComponent), descendants: true }], usesInheritance: true, ngImport: i063, template: "<ng-content></ng-content>\n", styles: [":host:before{left:0!important;display:none}\n"] });
+    this.ɵcmp = i063.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclCarouselItemComponent, selector: "ecl-carousel-item", inputs: { id: "id", isCurrent: ["isCurrent", "isCurrent", booleanAttribute11] }, outputs: { slideClick: "slideClick" }, host: { listeners: { "click": "onSlideClick()" }, properties: { "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "style.width.%": "this.width", "class": "this.cssClasses", "attr.inert": "this.isInert" } }, queries: [{ propertyName: "banner", first: true, predicate: i063.forwardRef(() => EclBannerComponent), descendants: true }], usesInheritance: true, ngImport: i063, template: "<ng-content></ng-content>\n", styles: [":host:before{left:0!important;display:none}\n"] });
   }
 };
 i063.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i063, type: EclCarouselItemComponent, decorators: [{
@@ -4438,7 +4443,7 @@ i063.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Input20
 }], isCurrent: [{
   type: Input20,
-  args: [{ transform: booleanAttribute10 }]
+  args: [{ transform: booleanAttribute11 }]
 }], slideClick: [{
   type: Output11
 }], banner: [{
@@ -4456,11 +4461,11 @@ i063.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-carousel/ecl-carousel.component.mjs
-import { Component as Component26, ContentChildren as ContentChildren6, EventEmitter as EventEmitter12, HostBinding as HostBinding43, Input as Input21, Output as Output12, ViewChild as ViewChild6, ViewChildren, booleanAttribute as booleanAttribute11, forwardRef as forwardRef17, numberAttribute as numberAttribute2 } from "@angular/core";
+import { Component as Component26, ContentChildren as ContentChildren6, EventEmitter as EventEmitter12, HostBinding as HostBinding43, Input as Input21, Output as Output12, ViewChild as ViewChild6, ViewChildren, booleanAttribute as booleanAttribute12, forwardRef as forwardRef17, numberAttribute as numberAttribute2 } from "@angular/core";
 import { Subject as Subject10, Subscription, fromEvent as fromEvent2, interval, switchMap as switchMap2, takeUntil as takeUntil10 } from "rxjs";
 import * as i064 from "@angular/core";
-import * as i112 from "@angular/cdk/layout";
-import * as i5 from "@ngx-translate/core";
+import * as i111 from "@angular/cdk/layout";
+import * as i53 from "@ngx-translate/core";
 var EclCarouselComponent = class _EclCarouselComponent extends ECLBaseDirective {
   constructor(cdkBreakpointObserver, cd, renderer2, eclRtlService) {
     super();
@@ -4927,10 +4932,10 @@ var EclCarouselComponent = class _EclCarouselComponent extends ECLBaseDirective
     }
   }
   static {
-    this.ɵfac = i064.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i064, type: _EclCarouselComponent, deps: [{ token: i112.BreakpointObserver }, { token: i064.ChangeDetectorRef }, { token: i064.Renderer2 }, { token: EclRtlService }], target: i064.ɵɵFactoryTarget.Component });
+    this.ɵfac = i064.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i064, type: _EclCarouselComponent, deps: [{ token: i111.BreakpointObserver }, { token: i064.ChangeDetectorRef }, { token: i064.Renderer2 }, { token: EclRtlService }], target: i064.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i064.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclCarouselComponent, selector: "ecl-carousel", inputs: { ariaLabel: ["aria-label", "ariaLabel"], isAutoplay: ["isAutoplay", "isAutoplay", booleanAttribute11], 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: i064.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: i064, template: `<div #carouselContainer class="ecl-carousel__container" [class.ecl-carousel-container--padded]="isPadded()">
+    this.ɵcmp = i064.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclCarouselComponent, selector: "ecl-carousel", inputs: { ariaLabel: ["aria-label", "ariaLabel"], isAutoplay: ["isAutoplay", "isAutoplay", booleanAttribute12], 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: i064.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: i064, template: `<div #carouselContainer class="ecl-carousel__container" [class.ecl-carousel-container--padded]="isPadded()">
     <div #slidesContainer (keyup)="onFirstCarouselElementPress($event)" class="ecl-carousel__slides"
         [style.width.px]="getCarouselSlidesWidth()" [style.left.px]="!isRtl ? getCarouselSlidesOffsetLeft() : null"
         [style.right.px]="isRtl ? getCarouselSlidesOffsetRight() : null"
@@ -5012,7 +5017,8 @@ var EclCarouselComponent = class _EclCarouselComponent extends ECLBaseDirective
     </span>
 
 </button>
-}`, styles: [":host{display:block}.ecl-carousel__container{width:100%}.ecl-carousel__slides{transition-duration:.4s}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclCarouselItemComponent, selector: "ecl-carousel-item", inputs: ["id", "isCurrent"], outputs: ["slideClick"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+}
+`, styles: [":host{display:block}.ecl-carousel__container{width:100%}.ecl-carousel__slides{transition-duration:.4s}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclCarouselItemComponent, selector: "ecl-carousel-item", inputs: ["id", "isCurrent"], outputs: ["slideClick"] }, { kind: "pipe", type: i53.TranslatePipe, name: "translate" }] });
   }
 };
 i064.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i064, type: EclCarouselComponent, decorators: [{
@@ -5099,8 +5105,9 @@ i064.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
     </span>
 
 </button>
-}`, styles: [":host{display:block}.ecl-carousel__container{width:100%}.ecl-carousel__slides{transition-duration:.4s}\n"] }]
-}], ctorParameters: () => [{ type: i112.BreakpointObserver }, { type: i064.ChangeDetectorRef }, { type: i064.Renderer2 }, { type: EclRtlService }], propDecorators: { ariaLabel: [{
+}
+`, styles: [":host{display:block}.ecl-carousel__container{width:100%}.ecl-carousel__slides{transition-duration:.4s}\n"] }]
+}], ctorParameters: () => [{ type: i111.BreakpointObserver }, { type: i064.ChangeDetectorRef }, { type: i064.Renderer2 }, { type: EclRtlService }], propDecorators: { ariaLabel: [{
   type: HostBinding43,
   args: ["attr.aria-label"]
 }, {
@@ -5111,7 +5118,7 @@ i064.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: ["attr.aria-roledescription"]
 }], isAutoplay: [{
   type: Input21,
-  args: [{ transform: booleanAttribute11 }]
+  args: [{ transform: booleanAttribute12 }]
 }], playInterval: [{
   type: Input21,
   args: [{ transform: numberAttribute2 }]
@@ -5240,7 +5247,7 @@ i066.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 // 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 HostBinding45, Input as Input22, Output as Output13 } from "@angular/core";
 import * as i067 from "@angular/core";
-import * as i27 from "@angular/common";
+import * as i26 from "@angular/common";
 var EclCategoryFilterItemComponent = class _EclCategoryFilterItemComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -5299,7 +5306,7 @@ var EclCategoryFilterItemComponent = class _EclCategoryFilterItemComponent exten
     this.ɵfac = i067.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i067, type: _EclCategoryFilterItemComponent, deps: null, target: i067.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i067.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", 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: i067.forwardRef(() => EclCategoryFilterListComponent), descendants: true }], usesInheritance: true, ngImport: i067, 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: i27.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    this.ɵcmp = i067.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", 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: i067.forwardRef(() => EclCategoryFilterListComponent), descendants: true }], usesInheritance: true, ngImport: i067, 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"] }] });
   }
 };
 i067.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i067, type: EclCategoryFilterItemComponent, decorators: [{
@@ -5471,9 +5478,7 @@ i069.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] });
 
 // lib/components/ecl-help-block/ecl-help-block.directive.mjs
-import { __decorate as __decorate3 } from "tslib";
-import { Directive as Directive19, HostBinding as HostBinding47, Input as Input24 } from "@angular/core";
-import { coerceBoolean as coerceBoolean2 } from "@eui/base";
+import { Directive as Directive19, HostBinding as HostBinding47, Input as Input24, booleanAttribute as booleanAttribute13 } from "@angular/core";
 import * as i070 from "@angular/core";
 var EclHelpBlockDirective = class _EclHelpBlockDirective extends ECLBaseDirective {
   constructor() {
@@ -5487,26 +5492,24 @@ var EclHelpBlockDirective = class _EclHelpBlockDirective extends ECLBaseDirectiv
     this.ɵfac = i070.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i070, type: _EclHelpBlockDirective, deps: null, target: i070.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i070.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.0", type: _EclHelpBlockDirective, selector: "[eclHelpBlock]", inputs: { isDisabled: "isDisabled" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i070 });
+    this.ɵdir = i070.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclHelpBlockDirective, selector: "[eclHelpBlock]", inputs: { isDisabled: ["isDisabled", "isDisabled", booleanAttribute13] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i070 });
   }
 };
-__decorate3([
-  coerceBoolean2
-], EclHelpBlockDirective.prototype, "isDisabled", void 0);
 i070.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i070, type: EclHelpBlockDirective, decorators: [{
   type: Directive19,
   args: [{
     selector: "[eclHelpBlock]"
   }]
 }], propDecorators: { isDisabled: [{
-  type: Input24
+  type: Input24,
+  args: [{ transform: booleanAttribute13 }]
 }], cssClasses: [{
   type: HostBinding47,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-checkbox/ecl-checkbox-help.component.mjs
-import { Component as Component30, HostBinding as HostBinding48, Input as Input25, booleanAttribute as booleanAttribute12 } from "@angular/core";
+import { Component as Component30, HostBinding as HostBinding48, Input as Input25, booleanAttribute as booleanAttribute14 } from "@angular/core";
 import * as i071 from "@angular/core";
 var EclCheckboxHelpComponent = class _EclCheckboxHelpComponent extends ECLBaseDirective {
   constructor() {
@@ -5520,7 +5523,7 @@ var EclCheckboxHelpComponent = class _EclCheckboxHelpComponent extends ECLBaseDi
     this.ɵfac = i071.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i071, type: _EclCheckboxHelpComponent, deps: null, target: i071.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i071.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclCheckboxHelpComponent, selector: "[eclCheckboxHelp]", inputs: { isDisabled: ["isDisabled", "isDisabled", booleanAttribute12] }, host: { properties: { "class.ecl-checkbox__help--disabled": "this.isDisabled", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i071, template: "<ng-content></ng-content>\n" });
+    this.ɵcmp = i071.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclCheckboxHelpComponent, selector: "[eclCheckboxHelp]", inputs: { isDisabled: ["isDisabled", "isDisabled", booleanAttribute14] }, host: { properties: { "class.ecl-checkbox__help--disabled": "this.isDisabled", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i071, template: "<ng-content></ng-content>\n" });
   }
 };
 i071.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i071, type: EclCheckboxHelpComponent, decorators: [{
@@ -5528,7 +5531,7 @@ i071.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: [{ selector: "[eclCheckboxHelp]", template: "<ng-content></ng-content>\n" }]
 }], propDecorators: { isDisabled: [{
   type: Input25,
-  args: [{ transform: booleanAttribute12 }]
+  args: [{ transform: booleanAttribute14 }]
 }, {
   type: HostBinding48,
   args: ["class.ecl-checkbox__help--disabled"]
@@ -5538,7 +5541,7 @@ i071.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-checkbox/ecl-checkbox-label.component.mjs
-import { Component as Component31, HostBinding as HostBinding49, Input as Input26, ViewEncapsulation as ViewEncapsulation5, booleanAttribute as booleanAttribute13 } from "@angular/core";
+import { Component as Component31, HostBinding as HostBinding49, Input as Input26, ViewEncapsulation as ViewEncapsulation5, booleanAttribute as booleanAttribute15 } from "@angular/core";
 import * as i072 from "@angular/core";
 var EclCheckboxLabelComponent = class _EclCheckboxLabelComponent extends ECLBaseDirective {
   constructor() {
@@ -5554,7 +5557,7 @@ var EclCheckboxLabelComponent = class _EclCheckboxLabelComponent extends ECLBase
     this.ɵfac = i072.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i072, type: _EclCheckboxLabelComponent, deps: null, target: i072.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i072.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: { isInvalid: ["isInvalid", "isInvalid", booleanAttribute13], isDisabled: ["isDisabled", "isDisabled", booleanAttribute13], isRequired: ["isRequired", "isRequired", booleanAttribute13] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i072, template: '<span class="ecl-checkbox__box" [class.ecl-checkbox__box--disabled]="isDisabled" [class.ecl-checkbox__box--invalid]="isInvalid">\n    <ecl-icon size="m" icon="check" class="ecl-checkbox__icon"></ecl-icon>\n</span>\n\n<span class="ecl-checkbox__text">\n    <ng-content></ng-content>\n</span>\n@if(isRequired) {\n<span class="ecl-form-label__required" role="note" aria-label="required">*</span>\n}', dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }], encapsulation: i072.ViewEncapsulation.None });
+    this.ɵcmp = i072.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: { isInvalid: ["isInvalid", "isInvalid", booleanAttribute15], isDisabled: ["isDisabled", "isDisabled", booleanAttribute15], isRequired: ["isRequired", "isRequired", booleanAttribute15] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i072, template: '<span class="ecl-checkbox__box" [class.ecl-checkbox__box--disabled]="isDisabled" [class.ecl-checkbox__box--invalid]="isInvalid">\n    <ecl-icon size="m" icon="check" class="ecl-checkbox__icon"></ecl-icon>\n</span>\n\n<span class="ecl-checkbox__text">\n    <ng-content></ng-content>\n</span>\n@if(isRequired) {\n<span class="ecl-form-label__required" role="note" aria-label="required">*</span>\n}', dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }], encapsulation: i072.ViewEncapsulation.None });
   }
 };
 i072.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i072, type: EclCheckboxLabelComponent, decorators: [{
@@ -5562,20 +5565,20 @@ i072.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: [{ selector: "label[eclCheckboxLabel]", encapsulation: ViewEncapsulation5.None, template: '<span class="ecl-checkbox__box" [class.ecl-checkbox__box--disabled]="isDisabled" [class.ecl-checkbox__box--invalid]="isInvalid">\n    <ecl-icon size="m" icon="check" class="ecl-checkbox__icon"></ecl-icon>\n</span>\n\n<span class="ecl-checkbox__text">\n    <ng-content></ng-content>\n</span>\n@if(isRequired) {\n<span class="ecl-form-label__required" role="note" aria-label="required">*</span>\n}' }]
 }], propDecorators: { isInvalid: [{
   type: Input26,
-  args: [{ transform: booleanAttribute13 }]
+  args: [{ transform: booleanAttribute15 }]
 }], isDisabled: [{
   type: Input26,
-  args: [{ transform: booleanAttribute13 }]
+  args: [{ transform: booleanAttribute15 }]
 }], isRequired: [{
   type: Input26,
-  args: [{ transform: booleanAttribute13 }]
+  args: [{ transform: booleanAttribute15 }]
 }], cssClasses: [{
   type: HostBinding49,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-checkbox/ecl-checkbox.directive.mjs
-import { ContentChild as ContentChild9, Directive as Directive20, HostBinding as HostBinding50, Input as Input27, booleanAttribute as booleanAttribute14, forwardRef as forwardRef25 } from "@angular/core";
+import { ContentChild as ContentChild9, Directive as Directive20, HostBinding as HostBinding50, Input as Input27, booleanAttribute as booleanAttribute16, forwardRef as forwardRef25 } from "@angular/core";
 import * as i073 from "@angular/core";
 var EclCheckboxDirective = class _EclCheckboxDirective extends ECLBaseDirective {
   constructor() {
@@ -5606,7 +5609,7 @@ var EclCheckboxDirective = class _EclCheckboxDirective extends ECLBaseDirective
     this.ɵfac = i073.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i073, type: _EclCheckboxDirective, deps: null, target: i073.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i073.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclCheckboxDirective, isStandalone: true, selector: "[eclCheckbox]", inputs: { isDisabled: ["isDisabled", "isDisabled", booleanAttribute14], isInvalid: ["isInvalid", "isInvalid", booleanAttribute14], isSingle: ["isSingle", "isSingle", booleanAttribute14] }, host: { properties: { "class.ecl-checkbox--disabled": "this.isDisabled", "class.ecl-checkbox--invalid": "this.isInvalid", "class.ecl-checkbox--single": "this.isSingle", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclCheckboxLabelComponent", first: true, predicate: i073.forwardRef(() => EclCheckboxLabelComponent), descendants: true }, { propertyName: "eclCheckboxHelpComponent", first: true, predicate: i073.forwardRef(() => EclCheckboxHelpComponent), descendants: true }, { propertyName: "eclFormLabelDirective", first: true, predicate: i073.forwardRef(() => EclFormLabelComponent), descendants: true }, { propertyName: "eclHelpBlockDirective", first: true, predicate: i073.forwardRef(() => EclHelpBlockDirective), descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i073 });
+    this.ɵdir = i073.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclCheckboxDirective, isStandalone: true, selector: "[eclCheckbox]", inputs: { isDisabled: ["isDisabled", "isDisabled", booleanAttribute16], isInvalid: ["isInvalid", "isInvalid", booleanAttribute16], isSingle: ["isSingle", "isSingle", booleanAttribute16] }, host: { properties: { "class.ecl-checkbox--disabled": "this.isDisabled", "class.ecl-checkbox--invalid": "this.isInvalid", "class.ecl-checkbox--single": "this.isSingle", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclCheckboxLabelComponent", first: true, predicate: i073.forwardRef(() => EclCheckboxLabelComponent), descendants: true }, { propertyName: "eclCheckboxHelpComponent", first: true, predicate: i073.forwardRef(() => EclCheckboxHelpComponent), descendants: true }, { propertyName: "eclFormLabelDirective", first: true, predicate: i073.forwardRef(() => EclFormLabelComponent), descendants: true }, { propertyName: "eclHelpBlockDirective", first: true, predicate: i073.forwardRef(() => EclHelpBlockDirective), descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i073 });
   }
 };
 i073.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i073, type: EclCheckboxDirective, decorators: [{
@@ -5617,19 +5620,19 @@ i073.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   }]
 }], propDecorators: { isDisabled: [{
   type: Input27,
-  args: [{ transform: booleanAttribute14 }]
+  args: [{ transform: booleanAttribute16 }]
 }, {
   type: HostBinding50,
   args: ["class.ecl-checkbox--disabled"]
 }], isInvalid: [{
   type: Input27,
-  args: [{ transform: booleanAttribute14 }]
+  args: [{ transform: booleanAttribute16 }]
 }, {
   type: HostBinding50,
   args: ["class.ecl-checkbox--invalid"]
 }], isSingle: [{
   type: Input27,
-  args: [{ transform: booleanAttribute14 }]
+  args: [{ transform: booleanAttribute16 }]
 }, {
   type: HostBinding50,
   args: ["class.ecl-checkbox--single"]
@@ -5653,7 +5656,7 @@ i073.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 // lib/components/ecl-checkbox/ecl-checkbox-input.directive.mjs
 import { Directive as Directive21, forwardRef as forwardRef27, HostBinding as HostBinding51, Inject as Inject4, Optional as Optional4, Self as Self2 } from "@angular/core";
 import * as i074 from "@angular/core";
-import * as i113 from "@angular/forms";
+import * as i112 from "@angular/forms";
 var EclCheckboxInputDirective = class _EclCheckboxInputDirective extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-checkbox__input")].join(" ");
@@ -5672,7 +5675,7 @@ var EclCheckboxInputDirective = class _EclCheckboxInputDirective extends ECLBase
     }
   }
   static {
-    this.ɵfac = i074.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i074, type: _EclCheckboxInputDirective, deps: [{ token: forwardRef27(() => EclCheckboxDirective) }, { token: i113.NgControl, optional: true, self: true }], target: i074.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i074.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i074, type: _EclCheckboxInputDirective, deps: [{ token: forwardRef27(() => EclCheckboxDirective) }, { token: i112.NgControl, optional: true, self: true }], target: i074.ɵɵFactoryTarget.Directive });
   }
   static {
     this.ɵdir = i074.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.0", type: _EclCheckboxInputDirective, selector: "input[eclCheckboxInput]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i074 });
@@ -5686,7 +5689,7 @@ i074.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }], ctorParameters: () => [{ type: EclCheckboxDirective, decorators: [{
   type: Inject4,
   args: [forwardRef27(() => EclCheckboxDirective)]
-}] }, { type: i113.NgControl, decorators: [{
+}] }, { type: i112.NgControl, decorators: [{
   type: Optional4
 }, {
   type: Self2
@@ -5785,8 +5788,8 @@ i076.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 import { formatDate } from "@angular/common";
 import { Component as Component32, Input as Input29, HostBinding as HostBinding53 } from "@angular/core";
 import * as i077 from "@angular/core";
-import * as i114 from "@ngx-translate/core";
-import * as i28 from "@angular/common";
+import * as i113 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();
@@ -5817,7 +5820,7 @@ var EclDateBlockComponent = class _EclDateBlockComponent extends ECLBaseDirectiv
     }
   }
   static {
-    this.ɵfac = i077.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i077, type: _EclDateBlockComponent, deps: [{ token: i114.TranslateService }], target: i077.ɵɵFactoryTarget.Component });
+    this.ɵfac = i077.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i077, type: _EclDateBlockComponent, deps: [{ token: i113.TranslateService }], target: i077.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i077.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.0", 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: i077, template: `<span class="ecl-date-block__daytime">{{ datetime || (date | date: dateFormat) }}</span>
@@ -5826,7 +5829,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: i28.DatePipe, name: "date" }] });
+`, dependencies: [{ kind: "pipe", type: i27.DatePipe, name: "date" }] });
   }
 };
 i077.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i077, type: EclDateBlockComponent, decorators: [{
@@ -5838,7 +5841,7 @@ i077.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 </abbr>
 <span class="ecl-date-block__year" aria-hidden="true">{{ year || (date | date: 'yyyy') }}</span>
 ` }]
-}], ctorParameters: () => [{ type: i114.TranslateService }], propDecorators: { date: [{
+}], ctorParameters: () => [{ type: i113.TranslateService }], propDecorators: { date: [{
   type: Input29
 }], dateFormat: [{
   type: Input29
@@ -5867,13 +5870,18 @@ import { Component as Component33, ContentChild as ContentChild10, forwardRef as
 import * as i078 from "@angular/core";
 var EclContentItemComponent = class _EclContentItemComponent extends ECLBaseDirective {
   get cssClasses() {
-    return [super.getCssClasses("ecl-content-item"), this.isStack ? "ecl-content-item--stack" : ""].join(" ").trim();
+    return [
+      super.getCssClasses("ecl-content-item"),
+      this.isStack ? "ecl-content-item--stack" : "",
+      this.isInline ? "ecl-content-item--inline" : ""
+    ].join(" ").trim();
   }
   constructor(renderer) {
     super();
     this.renderer = renderer;
     this.role = "article";
     this.isStack = false;
+    this.isInline = false;
   }
   ngAfterContentInit() {
     if (this.eclContentBlock) {
@@ -5881,6 +5889,7 @@ var EclContentItemComponent = class _EclContentItemComponent extends ECLBaseDire
     }
     if (this.eclDateBlock) {
       this.eclDateBlock.class = "ecl-content-item__date";
+      this.isInline = true;
     }
     if (this.eclContentItemPicture && this.eclContentItemPicture.position === "top") {
       this.isStack = true;
@@ -6010,7 +6019,7 @@ import { NG_VALUE_ACCESSOR as NG_VALUE_ACCESSOR3 } from "@angular/forms";
 import Pikaday from "pikaday";
 import { Subject as Subject12, takeUntil as takeUntil12 } from "rxjs";
 import * as i081 from "@angular/core";
-import * as i115 from "@ngx-translate/core";
+import * as i114 from "@ngx-translate/core";
 var pikadayDefaultI18n = {
   previousMonth: "Previous Month",
   nextMonth: "Next Month",
@@ -6166,7 +6175,7 @@ var EclDatePickerDirective = class _EclDatePickerDirective extends ECLBaseDirect
     return eclIconComponent.location.nativeElement;
   }
   static {
-    this.ɵfac = i081.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i081, type: _EclDatePickerDirective, deps: [{ token: i081.ElementRef }, { token: i081.ViewContainerRef }, { token: i115.TranslateService }, { token: EclLanguageService }, { token: i081.Renderer2 }], target: i081.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i081.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i081, type: _EclDatePickerDirective, deps: [{ token: i081.ElementRef }, { token: i081.ViewContainerRef }, { token: i114.TranslateService }, { token: EclLanguageService }, { token: i081.Renderer2 }], target: i081.ɵɵFactoryTarget.Directive });
   }
   static {
     this.ɵdir = i081.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.0", 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: i081 });
@@ -6178,7 +6187,7 @@ i081.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
     selector: "input[eclDatePicker]",
     providers: [ECL_DATE_PICKER_VALUE_ACCESSOR]
   }]
-}], ctorParameters: () => [{ type: i081.ElementRef }, { type: i081.ViewContainerRef }, { type: i115.TranslateService }, { type: EclLanguageService }, { type: i081.Renderer2 }], propDecorators: { yearRange: [{
+}], ctorParameters: () => [{ type: i081.ElementRef }, { type: i081.ViewContainerRef }, { type: i114.TranslateService }, { type: EclLanguageService }, { type: i081.Renderer2 }], propDecorators: { yearRange: [{
   type: Input30
 }], format: [{
   type: Input30
@@ -6227,9 +6236,9 @@ i082.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] });
 
 // lib/components/ecl-expandable/ecl-expandable.component.mjs
-import { Component as Component34, Input as Input31, Output as Output15, EventEmitter as EventEmitter15, HostBinding as HostBinding56, booleanAttribute as booleanAttribute15 } from "@angular/core";
+import { Component as Component34, Input as Input31, Output as Output15, EventEmitter as EventEmitter15, HostBinding as HostBinding56, booleanAttribute as booleanAttribute17 } from "@angular/core";
 import * as i083 from "@angular/core";
-import * as i43 from "@ngx-translate/core";
+import * as i42 from "@ngx-translate/core";
 var EclExpandableToggleEvent = class extends EclBaseEvent {
   constructor(isExpanded) {
     super();
@@ -6262,7 +6271,7 @@ var EclExpandableComponent = class _EclExpandableComponent extends ECLBaseDirect
     this.ɵfac = i083.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i083, type: _EclExpandableComponent, deps: null, target: i083.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i083.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclExpandableComponent, selector: "ecl-expandable", inputs: { isExpanded: ["isExpanded", "isExpanded", booleanAttribute15], collapsedLabel: "collapsedLabel", expandedLabel: "expandedLabel" }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i083, template: `<button
+    this.ɵcmp = i083.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclExpandableComponent, selector: "ecl-expandable", inputs: { isExpanded: ["isExpanded", "isExpanded", booleanAttribute17], collapsedLabel: "collapsedLabel", expandedLabel: "expandedLabel" }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i083, template: `<button
     eclButton
     variant="ghost"
     type="button"
@@ -6281,7 +6290,7 @@ var EclExpandableComponent = class _EclExpandableComponent extends ECLBaseDirect
 <div class="ecl-expandable__content" [hidden]="!isExpanded">
     <ng-content></ng-content>
 </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: "pipe", type: i43.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: "pipe", type: i42.TranslatePipe, name: "translate" }] });
   }
 };
 i083.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i083, type: EclExpandableComponent, decorators: [{
@@ -6311,7 +6320,7 @@ i083.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: ["class"]
 }], isExpanded: [{
   type: Input31,
-  args: [{ transform: booleanAttribute15 }]
+  args: [{ transform: booleanAttribute17 }]
 }], collapsedLabel: [{
   type: Input31
 }], expandedLabel: [{
@@ -6555,7 +6564,7 @@ i091.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] });
 
 // lib/components/ecl-media-container/ecl-media-container.component.mjs
-import { Component as Component41, ContentChild as ContentChild12, HostBinding as HostBinding63, Input as Input33, booleanAttribute as booleanAttribute16 } from "@angular/core";
+import { Component as Component41, ContentChild as ContentChild12, HostBinding as HostBinding63, Input as Input33, booleanAttribute as booleanAttribute18 } from "@angular/core";
 import * as i092 from "@angular/core";
 var EclMediaContainerComponent = class _EclMediaContainerComponent extends ECLBaseDirective {
   constructor() {
@@ -6574,7 +6583,7 @@ var EclMediaContainerComponent = class _EclMediaContainerComponent extends ECLBa
     this.ɵfac = i092.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i092, type: _EclMediaContainerComponent, deps: null, target: i092.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i092.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclMediaContainerComponent, selector: "ecl-media-container", inputs: { isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute16] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "expandable", first: true, predicate: EclExpandableComponent, descendants: true }], usesInheritance: true, ngImport: i092, template: '<figure class="ecl-media-container__figure" [class.ecl-media-container--full-width]="isFullWidth">\n    <ng-content select="video[eclMediaContainerItem]"></ng-content>\n    <ng-content select="div[eclMediaContainerItem]"></ng-content>\n    <ng-content select="picture[eclMediaContainerPicture]"></ng-content>\n\n    <figcaption class="ecl-media-container__caption">\n        <ng-content></ng-content>\n    </figcaption>\n    <ng-content select="ecl-expandable"></ng-content>\n</figure>\n', styles: [":host{display:block}\n"] });
+    this.ɵcmp = i092.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclMediaContainerComponent, selector: "ecl-media-container", inputs: { isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute18] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "expandable", first: true, predicate: EclExpandableComponent, descendants: true }], usesInheritance: true, ngImport: i092, template: '<figure class="ecl-media-container__figure" [class.ecl-media-container--full-width]="isFullWidth">\n    <ng-content select="video[eclMediaContainerItem]"></ng-content>\n    <ng-content select="div[eclMediaContainerItem]"></ng-content>\n    <ng-content select="picture[eclMediaContainerPicture]"></ng-content>\n\n    <figcaption class="ecl-media-container__caption">\n        <ng-content></ng-content>\n    </figcaption>\n    <ng-content select="ecl-expandable"></ng-content>\n</figure>\n', styles: [":host{display:block}\n"] });
   }
 };
 i092.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i092, type: EclMediaContainerComponent, decorators: [{
@@ -6582,7 +6591,7 @@ i092.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: [{ selector: "ecl-media-container", template: '<figure class="ecl-media-container__figure" [class.ecl-media-container--full-width]="isFullWidth">\n    <ng-content select="video[eclMediaContainerItem]"></ng-content>\n    <ng-content select="div[eclMediaContainerItem]"></ng-content>\n    <ng-content select="picture[eclMediaContainerPicture]"></ng-content>\n\n    <figcaption class="ecl-media-container__caption">\n        <ng-content></ng-content>\n    </figcaption>\n    <ng-content select="ecl-expandable"></ng-content>\n</figure>\n', styles: [":host{display:block}\n"] }]
 }], propDecorators: { isFullWidth: [{
   type: Input33,
-  args: [{ transform: booleanAttribute16 }]
+  args: [{ transform: booleanAttribute18 }]
 }], expandable: [{
   type: ContentChild12,
   args: [EclExpandableComponent]
@@ -6861,7 +6870,7 @@ i099.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-featured/ecl-featured.component.mjs
-import { Component as Component44, HostBinding as HostBinding70, Input as Input37, booleanAttribute as booleanAttribute17 } from "@angular/core";
+import { Component as Component44, HostBinding as HostBinding70, Input as Input37, booleanAttribute as booleanAttribute19 } from "@angular/core";
 import * as i0100 from "@angular/core";
 var EclFeaturedComponent = class _EclFeaturedComponent extends ECLBaseDirective {
   constructor() {
@@ -6877,7 +6886,7 @@ var EclFeaturedComponent = class _EclFeaturedComponent extends ECLBaseDirective
     this.ɵfac = i0100.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0100, type: _EclFeaturedComponent, deps: null, target: i0100.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0100.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclFeaturedComponent, selector: "ecl-featured", inputs: { position: "position", isHighlighted: ["isHighlighted", "isHighlighted", booleanAttribute17] }, host: { properties: { "attr.role": "this.role", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0100, template: `<div class="ecl-featured-item__container" [class.ecl-featured-item__container--right]="position === 'right'">
+    this.ɵcmp = i0100.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclFeaturedComponent, selector: "ecl-featured", inputs: { position: "position", isHighlighted: ["isHighlighted", "isHighlighted", booleanAttribute19] }, host: { properties: { "attr.role": "this.role", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0100, template: `<div class="ecl-featured-item__container" [class.ecl-featured-item__container--right]="position === 'right'">
     <ng-content></ng-content>
 </div>
 <ng-content select="[eclFeaturedItemFooter]"></ng-content>` });
@@ -6893,7 +6902,7 @@ i0100.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Input37
 }], isHighlighted: [{
   type: Input37,
-  args: [{ transform: booleanAttribute17 }]
+  args: [{ transform: booleanAttribute19 }]
 }], role: [{
   type: HostBinding70,
   args: ["attr.role"]
@@ -7036,12 +7045,12 @@ i0104.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] });
 
 // lib/components/ecl-file-upload/ecl-file-upload.directive.mjs
-import { Directive as Directive29, HostBinding as HostBinding73, Input as Input38, Optional as Optional5, Self as Self3, HostListener as HostListener8, Output as Output16, EventEmitter as EventEmitter16, booleanAttribute as booleanAttribute18 } from "@angular/core";
+import { Directive as Directive29, HostBinding as HostBinding73, Input as Input38, Optional as Optional5, Self as Self3, HostListener as HostListener8, Output as Output16, EventEmitter as EventEmitter16, booleanAttribute as booleanAttribute20 } from "@angular/core";
 import { takeUntil as takeUntil13 } from "rxjs/operators";
 import { Subject as Subject13 } from "rxjs";
 import * as i0105 from "@angular/core";
-import * as i116 from "@angular/forms";
-import * as i29 from "@ngx-translate/core";
+import * as i115 from "@angular/forms";
+import * as i28 from "@ngx-translate/core";
 var EclFileUploadFileSelectedEvent = class extends EclBaseEvent {
   constructor(files) {
     super();
@@ -7200,10 +7209,10 @@ var EclFileUploadDirective = class _EclFileUploadDirective extends ECLBaseDirect
     return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
   }
   static {
-    this.ɵfac = i0105.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0105, type: _EclFileUploadDirective, deps: [{ token: i116.NgControl, optional: true, self: true }, { token: i0105.ElementRef }, { token: i29.TranslateService }, { token: i0105.Renderer2 }], target: i0105.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0105.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0105, type: _EclFileUploadDirective, deps: [{ token: i115.NgControl, optional: true, self: true }, { token: i0105.ElementRef }, { token: i28.TranslateService }, { token: i0105.Renderer2 }], target: i0105.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0105.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclFileUploadDirective, selector: "[eclFileUpload]", inputs: { variant: "variant", isInvalid: "isInvalid", id: "id", disabled: ["disabled", "disabled", booleanAttribute18], multiple: ["multiple", "multiple", booleanAttribute18] }, 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: i0105 });
+    this.ɵdir = i0105.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclFileUploadDirective, selector: "[eclFileUpload]", inputs: { variant: "variant", isInvalid: "isInvalid", id: "id", disabled: ["disabled", "disabled", booleanAttribute20], multiple: ["multiple", "multiple", booleanAttribute20] }, outputs: { filesSelected: "filesSelected" }, host: { listeners: { "click": "onClick($event)", "change": "onFilesSelected($event)" }, properties: { "attr.id": "this.id", "attr.disabled": "this.disabled", "attr.multiple": "this.multiple", "attr.type": "this.type", "class": "this.cssClasses", "class.ecl-file-upload--invalid": "this.invalidState" } }, usesInheritance: true, ngImport: i0105 });
   }
 };
 i0105.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0105, type: EclFileUploadDirective, decorators: [{
@@ -7211,11 +7220,11 @@ i0105.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: [{
     selector: "[eclFileUpload]"
   }]
-}], ctorParameters: () => [{ type: i116.NgControl, decorators: [{
+}], ctorParameters: () => [{ type: i115.NgControl, decorators: [{
   type: Optional5
 }, {
   type: Self3
-}] }, { type: i0105.ElementRef }, { type: i29.TranslateService }, { type: i0105.Renderer2 }], propDecorators: { variant: [{
+}] }, { type: i0105.ElementRef }, { type: i28.TranslateService }, { type: i0105.Renderer2 }], propDecorators: { variant: [{
   type: Input38
 }], isInvalid: [{
   type: Input38
@@ -7226,13 +7235,13 @@ i0105.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: ["attr.id"]
 }], disabled: [{
   type: Input38,
-  args: [{ transform: booleanAttribute18 }]
+  args: [{ transform: booleanAttribute20 }]
 }, {
   type: HostBinding73,
   args: ["attr.disabled"]
 }], multiple: [{
   type: Input38,
-  args: [{ transform: booleanAttribute18 }]
+  args: [{ transform: booleanAttribute20 }]
 }, {
   type: HostBinding73,
   args: ["attr.multiple"]
@@ -7350,7 +7359,6 @@ i0107.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 // lib/components/ecl-file/ecl-file.component.mjs
 import { Component as Component46, ContentChild as ContentChild15, HostBinding as HostBinding75, Input as Input40 } from "@angular/core";
 import * as i0108 from "@angular/core";
-import * as i210 from "@angular/common";
 var EclFileComponent = class _EclFileComponent extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-file"), this.isThumbnail ? "ecl-file--thumbnail" : ""].join(" ").trim();
@@ -7366,12 +7374,12 @@ var EclFileComponent = class _EclFileComponent extends ECLBaseDirective {
     this.ɵfac = i0108.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0108, type: _EclFileComponent, deps: [{ token: EclThemeService }], target: i0108.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0108.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", 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: i0108, 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: i210.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 = i0108.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", 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: i0108, 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            @for (el of detailMeta; track el) {\n                <span class="ecl-file__detail-meta-item" >{{ el }}</span>\n            }\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>\n', styles: [":host{display:block}\n"], dependencies: [{ 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"] }] });
   }
 };
 i0108.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0108, type: EclFileComponent, decorators: [{
   type: Component46,
-  args: [{ selector: "ecl-file", 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"] }]
+  args: [{ selector: "ecl-file", 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            @for (el of detailMeta; track el) {\n                <span class="ecl-file__detail-meta-item" >{{ el }}</span>\n            }\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>\n', styles: [":host{display:block}\n"] }]
 }], ctorParameters: () => [{ type: EclThemeService }], propDecorators: { cssClasses: [{
   type: HostBinding75,
   args: ["class"]
@@ -7395,9 +7403,8 @@ i0108.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-file/ecl-file-item/ecl-file-item.component.mjs
-import { Component as Component47, HostBinding as HostBinding76, Input as Input41, booleanAttribute as booleanAttribute19 } from "@angular/core";
+import { Component as Component47, HostBinding as HostBinding76, Input as Input41, booleanAttribute as booleanAttribute21 } from "@angular/core";
 import * as i0109 from "@angular/core";
-import * as i211 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();
@@ -7414,15 +7421,15 @@ var EclFileItemComponent = class _EclFileItemComponent extends ECLBaseDirective
     this.ɵfac = i0109.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0109, type: _EclFileItemComponent, deps: [{ token: EclFileComponent }], target: i0109.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0109.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclFileItemComponent, selector: "ecl-file-item", inputs: { isDescription: ["isDescription", "isDescription", booleanAttribute19], eclTitle: "eclTitle", titleId: "titleId", meta: "meta", label: "label", langDetail: "langDetail" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0109, 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: i211.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    this.ɵcmp = i0109.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclFileItemComponent, selector: "ecl-file-item", inputs: { isDescription: ["isDescription", "isDescription", booleanAttribute21], eclTitle: "eclTitle", titleId: "titleId", meta: "meta", label: "label", langDetail: "langDetail" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0109, template: '@if (isDescription) {\n    <ng-content></ng-content>\n} @else {\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}\n' });
   }
 };
 i0109.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0109, type: EclFileItemComponent, decorators: [{
   type: Component47,
-  args: [{ selector: "ecl-file-item", 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>' }]
+  args: [{ selector: "ecl-file-item", template: '@if (isDescription) {\n    <ng-content></ng-content>\n} @else {\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}\n' }]
 }], ctorParameters: () => [{ type: EclFileComponent }], propDecorators: { isDescription: [{
   type: Input41,
-  args: [{ transform: booleanAttribute19 }]
+  args: [{ transform: booleanAttribute21 }]
 }], eclTitle: [{
   type: Input41
 }], titleId: [{
@@ -7439,9 +7446,9 @@ i0109.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-file/ecl-file-items/ecl-file-items.component.mjs
-import { Component as Component48, Input as Input42, ContentChildren as ContentChildren11, Output as Output17, EventEmitter as EventEmitter17, HostBinding as HostBinding77, booleanAttribute as booleanAttribute20 } from "@angular/core";
+import { Component as Component48, Input as Input42, ContentChildren as ContentChildren11, Output as Output17, EventEmitter as EventEmitter17, HostBinding as HostBinding77, booleanAttribute as booleanAttribute22 } from "@angular/core";
 import * as i0110 from "@angular/core";
-import * as i44 from "@ngx-translate/core";
+import * as i43 from "@ngx-translate/core";
 var EclFileItemsToggleEvent = class extends EclBaseEvent {
   constructor(isExpanded) {
     super();
@@ -7472,7 +7479,7 @@ var EclFileItemsComponent = class _EclFileItemsComponent extends ECLBaseDirectiv
     this.ɵfac = i0110.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0110, type: _EclFileItemsComponent, deps: null, target: i0110.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0110.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclFileItemsComponent, selector: "ecl-file-items", inputs: { label: "label", isExpanded: ["isExpanded", "isExpanded", booleanAttribute20] }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "items", predicate: EclFileItemComponent }], usesInheritance: true, ngImport: i0110, template: `<button eclButton variant="ghost" class="ecl-file__translation-toggle" [attr.aria-expanded]="isExpanded" (click)="onToggleClick($event)">
+    this.ɵcmp = i0110.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclFileItemsComponent, selector: "ecl-file-items", inputs: { label: "label", isExpanded: ["isExpanded", "isExpanded", booleanAttribute22] }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "items", predicate: EclFileItemComponent }], usesInheritance: true, ngImport: i0110, template: `<button eclButton variant="ghost" class="ecl-file__translation-toggle" [attr.aria-expanded]="isExpanded" (click)="onToggleClick($event)">
     <span eclButtonLabel>
         {{ label || 'ecl.file.OTHER-LANGUAGES' | translate: { count: getItemsCount() } }}
     </span>
@@ -7481,7 +7488,7 @@ var EclFileItemsComponent = class _EclFileItemsComponent extends ECLBaseDirectiv
 <ul class="ecl-file__translation-list">
     <ng-content></ng-content>
 </ul>
-`, dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "pipe", type: i44.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "pipe", type: i43.TranslatePipe, name: "translate" }] });
   }
 };
 i0110.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0110, type: EclFileItemsComponent, decorators: [{
@@ -7503,7 +7510,7 @@ i0110.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Input42
 }], isExpanded: [{
   type: Input42,
-  args: [{ transform: booleanAttribute20 }]
+  args: [{ transform: booleanAttribute22 }]
 }], toggle: [{
   type: Output17
 }], items: [{
@@ -7659,7 +7666,7 @@ i0113.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 // lib/components/ecl-gallery/ecl-gallery-footer.component.mjs
 import { Component as Component50, EventEmitter as EventEmitter18, Output as Output18 } from "@angular/core";
 import * as i0114 from "@angular/core";
-import * as i212 from "@ngx-translate/core";
+import * as i29 from "@ngx-translate/core";
 var EclGalleryToggleItemsEvent = class extends EclBaseEvent {
   constructor(expandAll) {
     super();
@@ -7720,7 +7727,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: i212.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "pipe", type: i29.TranslatePipe, name: "translate" }] });
   }
 };
 i0114.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0114, type: EclGalleryFooterComponent, decorators: [{
@@ -7831,9 +7838,9 @@ i0115.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-gallery/ecl-gallery-item.component.mjs
-import { Component as Component51, ContentChild as ContentChild16, EventEmitter as EventEmitter19, HostBinding as HostBinding81, HostListener as HostListener9, Input as Input44, Output as Output19, booleanAttribute as booleanAttribute21 } from "@angular/core";
+import { Component as Component51, ContentChild as ContentChild16, EventEmitter as EventEmitter19, HostBinding as HostBinding81, HostListener as HostListener9, Input as Input44, Output as Output19, booleanAttribute as booleanAttribute23 } from "@angular/core";
 import * as i0116 from "@angular/core";
-import * as i117 from "@angular/platform-browser";
+import * as i116 from "@angular/platform-browser";
 var EclGalleryItemClickEvent = class extends EclBaseEvent {
 };
 var EclGalleryItemComponent = class _EclGalleryItemComponent extends ECLBaseDirective {
@@ -7886,10 +7893,10 @@ var EclGalleryItemComponent = class _EclGalleryItemComponent extends ECLBaseDire
     return this.mediaType !== "externalVideo";
   }
   static {
-    this.ɵfac = i0116.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0116, type: _EclGalleryItemComponent, deps: [{ token: i117.DomSanitizer }, { token: i0116.ElementRef }], target: i0116.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0116.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0116, type: _EclGalleryItemComponent, deps: [{ token: i116.DomSanitizer }, { token: i0116.ElementRef }], target: i0116.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0116.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclGalleryItemComponent, selector: "ecl-gallery-item", inputs: { isShareable: ["isShareable", "isShareable", booleanAttribute21], 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: i0116, template: `<a [href]="src" class="ecl-gallery__item-link" [attr.aria-label]="label" [class.ecl-gallery__item__link--frozen]="isNoOverlay">
+    this.ɵcmp = i0116.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclGalleryItemComponent, selector: "ecl-gallery-item", inputs: { isShareable: ["isShareable", "isShareable", booleanAttribute23], 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: i0116, template: `<a [href]="src" class="ecl-gallery__item-link" [attr.aria-label]="label" [class.ecl-gallery__item__link--frozen]="isNoOverlay">
     <figure class="ecl-gallery__image-container">
         @if(mediaType !== 'image') {
         <div class="ecl-gallery__item-icon-wrapper">
@@ -7931,9 +7938,9 @@ i0116.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
         </figcaption>
     </figure>
 </a>`, styles: [".ecl-gallery__description{width:100%}\n"] }]
-}], ctorParameters: () => [{ type: i117.DomSanitizer }, { type: i0116.ElementRef }], propDecorators: { isShareable: [{
+}], ctorParameters: () => [{ type: i116.DomSanitizer }, { type: i0116.ElementRef }], propDecorators: { isShareable: [{
   type: Input44,
-  args: [{ transform: booleanAttribute21 }]
+  args: [{ transform: booleanAttribute23 }]
 }], mediaType: [{
   type: Input44
 }], src: [{
@@ -7964,13 +7971,12 @@ i0116.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 
 // lib/components/ecl-gallery/ecl-gallery.component.mjs
 import { Breakpoints } from "@angular/cdk/layout";
-import { Component as Component52, ContentChild as ContentChild17, ContentChildren as ContentChildren12, EventEmitter as EventEmitter20, HostBinding as HostBinding82, HostListener as HostListener10, Input as Input45, Output as Output20, ViewChild as ViewChild7, booleanAttribute as booleanAttribute22, numberAttribute as numberAttribute3 } from "@angular/core";
+import { Component as Component52, ContentChild as ContentChild17, ContentChildren as ContentChildren12, EventEmitter as EventEmitter20, HostBinding as HostBinding82, HostListener as HostListener10, Input as Input45, Output as Output20, ViewChild as ViewChild7, booleanAttribute as booleanAttribute24, numberAttribute as numberAttribute3 } from "@angular/core";
 import { Subject as Subject14, delay as delay2 } from "rxjs";
 import { takeUntil as takeUntil14 } from "rxjs/operators";
 import * as i0117 from "@angular/core";
-import * as i118 from "@angular/cdk/layout";
-import * as i213 from "@angular/common";
-import * as i8 from "@ngx-translate/core";
+import * as i117 from "@angular/cdk/layout";
+import * as i72 from "@ngx-translate/core";
 var EclGalleryShowEvent = class extends EclBaseEvent {
 };
 var EclGalleryHideEvent = class extends EclBaseEvent {
@@ -8190,10 +8196,10 @@ var EclGalleryComponent = class _EclGalleryComponent extends ECLBaseDirective {
     return this.galleryItems.filter((item, cnt) => cnt < this.maxVisibleItems);
   }
   static {
-    this.ɵfac = i0117.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0117, type: _EclGalleryComponent, deps: [{ token: i118.BreakpointObserver }], target: i0117.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0117.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0117, type: _EclGalleryComponent, deps: [{ token: i117.BreakpointObserver }], target: i0117.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0117.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclGalleryComponent, selector: "ecl-gallery", inputs: { isOpenInFullScreenPossible: ["isOpenInFullScreenPossible", "isOpenInFullScreenPossible", booleanAttribute22], isShareable: ["isShareable", "isShareable", booleanAttribute22], isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute22], isNoOverlay: ["isNoOverlay", "isNoOverlay", booleanAttribute22], 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: i0117, template: `<ul class="ecl-gallery__list">
+    this.ɵcmp = i0117.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclGalleryComponent, selector: "ecl-gallery", inputs: { isOpenInFullScreenPossible: ["isOpenInFullScreenPossible", "isOpenInFullScreenPossible", booleanAttribute24], isShareable: ["isShareable", "isShareable", booleanAttribute24], isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute24], isNoOverlay: ["isNoOverlay", "isNoOverlay", booleanAttribute24], 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: i0117, template: `<ul class="ecl-gallery__list">
     <ng-content></ng-content>
 </ul>
 
@@ -8274,14 +8280,15 @@ var EclGalleryComponent = class _EclGalleryComponent extends ECLBaseDirective {
                 }
             </div>
             @if(item?.description) {
-            <div *ngIf="item?.description" class="ecl-gallery__detail-description">{{ item?.description }}</div>
+                <div class="ecl-gallery__detail-description">{{ item?.description }}</div>
             }
             @if(item?.meta) {
-            <div *ngIf="item?.meta" class="ecl-gallery__detail-meta">{{ item?.meta }}</div>
+                <div class="ecl-gallery__detail-meta">{{ item?.meta }}</div>
             }
         </div>
     </footer>
-</dialog>`, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i213.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" }] });
+</dialog>
+`, 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: i72.TranslatePipe, name: "translate" }] });
   }
 };
 i0117.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0117, type: EclGalleryComponent, decorators: [{
@@ -8367,26 +8374,27 @@ i0117.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
                 }
             </div>
             @if(item?.description) {
-            <div *ngIf="item?.description" class="ecl-gallery__detail-description">{{ item?.description }}</div>
+                <div class="ecl-gallery__detail-description">{{ item?.description }}</div>
             }
             @if(item?.meta) {
-            <div *ngIf="item?.meta" class="ecl-gallery__detail-meta">{{ item?.meta }}</div>
+                <div class="ecl-gallery__detail-meta">{{ item?.meta }}</div>
             }
         </div>
     </footer>
-</dialog>`, styles: [":host{display:block}\n"] }]
-}], ctorParameters: () => [{ type: i118.BreakpointObserver }], propDecorators: { isOpenInFullScreenPossible: [{
+</dialog>
+`, styles: [":host{display:block}\n"] }]
+}], ctorParameters: () => [{ type: i117.BreakpointObserver }], propDecorators: { isOpenInFullScreenPossible: [{
   type: Input45,
-  args: [{ transform: booleanAttribute22 }]
+  args: [{ transform: booleanAttribute24 }]
 }], isShareable: [{
   type: Input45,
-  args: [{ transform: booleanAttribute22 }]
+  args: [{ transform: booleanAttribute24 }]
 }], isFullWidth: [{
   type: Input45,
-  args: [{ transform: booleanAttribute22 }]
+  args: [{ transform: booleanAttribute24 }]
 }], isNoOverlay: [{
   type: Input45,
-  args: [{ transform: booleanAttribute22 }]
+  args: [{ transform: booleanAttribute24 }]
 }], maxVisibleItems: [{
   type: Input45,
   args: [{ transform: numberAttribute3 }]
@@ -8556,11 +8564,11 @@ i0120.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-sticky-container/ecl-sticky-container.component.mjs
-import { Component as Component54, HostBinding as HostBinding84, Input as Input47, booleanAttribute as booleanAttribute23 } from "@angular/core";
+import { Component as Component54, HostBinding as HostBinding84, Input as Input47, booleanAttribute as booleanAttribute25 } from "@angular/core";
 import { Subject as Subject15, delay as delay3 } from "rxjs";
 import { takeUntil as takeUntil15 } from "rxjs/operators";
 import * as i0121 from "@angular/core";
-import * as i119 from "@angular/cdk/layout";
+import * as i118 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();
@@ -8599,18 +8607,18 @@ var EclStickyContainerComponent = class _EclStickyContainerComponent extends ECL
     });
   }
   static {
-    this.ɵfac = i0121.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0121, type: _EclStickyContainerComponent, deps: [{ token: i119.BreakpointObserver }, { token: i0121.Renderer2 }, { token: i0121.ElementRef }], target: i0121.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0121.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0121, type: _EclStickyContainerComponent, deps: [{ token: i118.BreakpointObserver }, { token: i0121.Renderer2 }, { token: i0121.ElementRef }], target: i0121.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0121.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: { isEnabled: ["isEnabled", "isEnabled", booleanAttribute23], marginTop: "marginTop", marginBottom: "marginBottom" }, host: { properties: { "class": "this.cssClasses", "style.top.px": "this.top", "style.bottom.px": "this.bottom" } }, usesInheritance: true, ngImport: i0121, 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"] });
+    this.ɵcmp = i0121.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: { isEnabled: ["isEnabled", "isEnabled", booleanAttribute25], marginTop: "marginTop", marginBottom: "marginBottom" }, host: { properties: { "class": "this.cssClasses", "style.top.px": "this.top", "style.bottom.px": "this.bottom" } }, usesInheritance: true, ngImport: i0121, 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"] });
   }
 };
 i0121.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0121, 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: i119.BreakpointObserver }, { type: i0121.Renderer2 }, { type: i0121.ElementRef }], propDecorators: { isEnabled: [{
+}], ctorParameters: () => [{ type: i118.BreakpointObserver }, { type: i0121.Renderer2 }, { type: i0121.ElementRef }], propDecorators: { isEnabled: [{
   type: Input47,
-  args: [{ transform: booleanAttribute23 }]
+  args: [{ transform: booleanAttribute25 }]
 }], marginTop: [{
   type: Input47
 }], marginBottom: [{
@@ -8655,7 +8663,7 @@ import { EventEmitter as EventEmitter22, Component as Component55, Input as Inpu
 import { Subject as Subject16, fromEvent as fromEvent3 } from "rxjs";
 import { takeUntil as takeUntil16 } from "rxjs/operators";
 import * as i0123 from "@angular/core";
-import * as i45 from "@ngx-translate/core";
+import * as i44 from "@ngx-translate/core";
 var EclInpageNavigationSectionEnterEvent = class extends EclBaseEvent {
   constructor(sectionId) {
     super();
@@ -8792,7 +8800,7 @@ var EclInpageNavigationComponent = class _EclInpageNavigationComponent extends E
         </div>
     </nav>
 </ecl-sticky-container>
-`, styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"], dependencies: [{ kind: "component", type: EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: ["isEnabled", "marginTop", "marginBottom"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i45.TranslatePipe, name: "translate" }] });
+`, styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"], dependencies: [{ kind: "component", type: EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: ["isEnabled", "marginTop", "marginBottom"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i44.TranslatePipe, name: "translate" }] });
   }
 };
 i0123.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0123, type: EclInpageNavigationComponent, decorators: [{
@@ -8873,7 +8881,6 @@ i0124.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 // lib/components/ecl-list-illustration/ecl-list-illustration-item.component.mjs
 import { Component as Component56, ContentChildren as ContentChildren14, forwardRef as forwardRef33, HostBinding as HostBinding85, Input as Input49 } from "@angular/core";
 import * as i0125 from "@angular/core";
-import * as i120 from "@angular/common";
 var EclListIllustrationItemComponent = class _EclListIllustrationItemComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -8891,12 +8898,12 @@ var EclListIllustrationItemComponent = class _EclListIllustrationItemComponent e
     this.ɵfac = i0125.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0125, type: _EclListIllustrationItemComponent, deps: null, target: i0125.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0125.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.0", 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: i0125.forwardRef(() => EclListIllustrationIconDirective) }], usesInheritance: true, ngImport: i0125, 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: i120.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    this.ɵcmp = i0125.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", 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: i0125.forwardRef(() => EclListIllustrationIconDirective) }], usesInheritance: true, ngImport: i0125, template: '<ng-content select="[eclListIllustrationImage],[eclListIllustrationPicture]"></ng-content>\n<div class="ecl-list-illustration__detail">\n    @if (hasTitle || hasValue) {\n        <div class="ecl-list-illustration__title-container">\n            <ng-content select="[eclListIllustrationIcon]"></ng-content>\n            @if (hasValue) {\n                <div class="ecl-list-illustration__value">{{ eclValue }}</div>\n            }\n            <div class="ecl-list-illustration__title">{{ eclTitle }}</div>\n        </div>\n    }\n\n    <div class="ecl-list-illustration__description">\n        <ng-content></ng-content>\n    </div>\n</div>\n' });
   }
 };
 i0125.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0125, type: EclListIllustrationItemComponent, decorators: [{
   type: Component56,
-  args: [{ selector: "ecl-list-illustration-item", 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' }]
+  args: [{ selector: "ecl-list-illustration-item", template: '<ng-content select="[eclListIllustrationImage],[eclListIllustrationPicture]"></ng-content>\n<div class="ecl-list-illustration__detail">\n    @if (hasTitle || hasValue) {\n        <div class="ecl-list-illustration__title-container">\n            <ng-content select="[eclListIllustrationIcon]"></ng-content>\n            @if (hasValue) {\n                <div class="ecl-list-illustration__value">{{ eclValue }}</div>\n            }\n            <div class="ecl-list-illustration__title">{{ eclTitle }}</div>\n        </div>\n    }\n\n    <div class="ecl-list-illustration__description">\n        <ng-content></ng-content>\n    </div>\n</div>\n' }]
 }], propDecorators: { eclTitle: [{
   type: Input49
 }], eclValue: [{
@@ -8935,7 +8942,7 @@ i0126.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-list-illustration/ecl-list-illustration-picture.directive.mjs
-import { Directive as Directive34, HostBinding as HostBinding87, Input as Input50, booleanAttribute as booleanAttribute24 } from "@angular/core";
+import { Directive as Directive34, HostBinding as HostBinding87, Input as Input50, booleanAttribute as booleanAttribute26 } from "@angular/core";
 import * as i0127 from "@angular/core";
 var EclListIllustrationPictureDirective = class _EclListIllustrationPictureDirective extends ECLBaseDirective {
   get cssClasses() {
@@ -8974,7 +8981,7 @@ var EclListIllustrationImageDirective = class _EclListIllustrationImageDirective
     this.ɵfac = i0127.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0127, type: _EclListIllustrationImageDirective, deps: null, target: i0127.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0127.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclListIllustrationImageDirective, selector: "img[eclListIllustrationImage]", inputs: { isSquare: ["isSquare", "isSquare", booleanAttribute24], size: "size" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0127 });
+    this.ɵdir = i0127.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclListIllustrationImageDirective, selector: "img[eclListIllustrationImage]", inputs: { isSquare: ["isSquare", "isSquare", booleanAttribute26], size: "size" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0127 });
   }
 };
 i0127.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0127, type: EclListIllustrationImageDirective, decorators: [{
@@ -8984,7 +8991,7 @@ i0127.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   }]
 }], propDecorators: { isSquare: [{
   type: Input50,
-  args: [{ transform: booleanAttribute24 }]
+  args: [{ transform: booleanAttribute26 }]
 }], size: [{
   type: Input50
 }], cssClasses: [{
@@ -8993,7 +9000,7 @@ i0127.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-list-illustration/ecl-list-illustration.component.mjs
-import { Component as Component57, HostBinding as HostBinding88, Input as Input51, booleanAttribute as booleanAttribute25, numberAttribute as numberAttribute4 } from "@angular/core";
+import { Component as Component57, HostBinding as HostBinding88, Input as Input51, booleanAttribute as booleanAttribute27, numberAttribute as numberAttribute4 } from "@angular/core";
 import * as i0128 from "@angular/core";
 var EclListIllustrationComponent = class _EclListIllustrationComponent extends ECLBaseDirective {
   constructor() {
@@ -9012,7 +9019,7 @@ var EclListIllustrationComponent = class _EclListIllustrationComponent extends E
     this.ɵfac = i0128.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0128, type: _EclListIllustrationComponent, deps: null, target: i0128.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0128.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclListIllustrationComponent, selector: "ecl-list-illustration", inputs: { isZebra: ["isZebra", "isZebra", booleanAttribute25], horizontalColumns: ["horizontalColumns", "horizontalColumns", numberAttribute4] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0128, template: "<ng-content></ng-content>\n" });
+    this.ɵcmp = i0128.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclListIllustrationComponent, selector: "ecl-list-illustration", inputs: { isZebra: ["isZebra", "isZebra", booleanAttribute27], horizontalColumns: ["horizontalColumns", "horizontalColumns", numberAttribute4] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0128, template: "<ng-content></ng-content>\n" });
   }
 };
 i0128.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0128, type: EclListIllustrationComponent, decorators: [{
@@ -9020,7 +9027,7 @@ i0128.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: [{ selector: "ecl-list-illustration", template: "<ng-content></ng-content>\n" }]
 }], propDecorators: { isZebra: [{
   type: Input51,
-  args: [{ transform: booleanAttribute25 }]
+  args: [{ transform: booleanAttribute27 }]
 }], horizontalColumns: [{
   type: Input51,
   args: [{ transform: numberAttribute4 }]
@@ -9130,7 +9137,7 @@ i0130.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 // lib/components/ecl-list/ecl-description-list-definition/ecl-description-list-definition.component.mjs
 import { Component as Component58, ContentChildren as ContentChildren15, HostBinding as HostBinding90, Input as Input52 } from "@angular/core";
 import * as i0131 from "@angular/core";
-import * as i214 from "@ngx-translate/core";
+import * as i210 from "@ngx-translate/core";
 var EclDescriptionListDefinitionComponent = class _EclDescriptionListDefinitionComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -9191,7 +9198,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: i214.TranslatePipe, name: "translate" }] });
+}`, dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "pipe", type: i210.TranslatePipe, name: "translate" }] });
   }
 };
 i0131.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0131, type: EclDescriptionListDefinitionComponent, decorators: [{
@@ -9213,7 +9220,7 @@ i0131.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-list/ecl-list.directive.mjs
-import { ContentChildren as ContentChildren16, Directive as Directive36, HostBinding as HostBinding91, Input as Input53, booleanAttribute as booleanAttribute26, numberAttribute as numberAttribute5 } from "@angular/core";
+import { ContentChildren as ContentChildren16, Directive as Directive36, HostBinding as HostBinding91, Input as Input53, booleanAttribute as booleanAttribute28, numberAttribute as numberAttribute5 } from "@angular/core";
 import * as i0132 from "@angular/core";
 var EclOrderedListDirective = class _EclOrderedListDirective extends ECLBaseDirective {
   constructor() {
@@ -9268,7 +9275,7 @@ var EclUnorderedListDirective = class _EclUnorderedListDirective extends ECLBase
     this.ɵfac = i0132.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0132, type: _EclUnorderedListDirective, deps: null, target: i0132.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0132.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclUnorderedListDirective, selector: "[eclUnorderedList]", inputs: { isDivider: ["isDivider", "isDivider", booleanAttribute26], isNoMarker: ["isNoMarker", "isNoMarker", booleanAttribute26] }, host: { properties: { "class.ecl-unordered-list": "this.cmpClass", "class.ecl-unordered-list--divider": "this.isDivider", "class.ecl-unordered-list--no-marker": "this.isNoMarker" } }, usesInheritance: true, ngImport: i0132 });
+    this.ɵdir = i0132.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclUnorderedListDirective, selector: "[eclUnorderedList]", inputs: { isDivider: ["isDivider", "isDivider", booleanAttribute28], isNoMarker: ["isNoMarker", "isNoMarker", booleanAttribute28] }, host: { properties: { "class.ecl-unordered-list": "this.cmpClass", "class.ecl-unordered-list--divider": "this.isDivider", "class.ecl-unordered-list--no-marker": "this.isNoMarker" } }, usesInheritance: true, ngImport: i0132 });
   }
 };
 i0132.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0132, type: EclUnorderedListDirective, decorators: [{
@@ -9281,13 +9288,13 @@ i0132.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: ["class.ecl-unordered-list"]
 }], isDivider: [{
   type: Input53,
-  args: [{ transform: booleanAttribute26 }]
+  args: [{ transform: booleanAttribute28 }]
 }, {
   type: HostBinding91,
   args: ["class.ecl-unordered-list--divider"]
 }], isNoMarker: [{
   type: Input53,
-  args: [{ transform: booleanAttribute26 }]
+  args: [{ transform: booleanAttribute28 }]
 }, {
   type: HostBinding91,
   args: ["class.ecl-unordered-list--no-marker"]
@@ -9333,7 +9340,7 @@ var EclDescriptionListDirective = class _EclDescriptionListDirective extends ECL
     this.ɵfac = i0132.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0132, type: _EclDescriptionListDirective, deps: [{ token: i0132.ChangeDetectorRef }], target: i0132.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0132.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclDescriptionListDirective, selector: "[eclDescriptionList]", inputs: { isHorizontal: ["isHorizontal", "isHorizontal", booleanAttribute26], maxVisibleItems: ["maxVisibleItems", "maxVisibleItems", numberAttribute5] }, host: { properties: { "class.ecl-description-list--horizontal": "this.isHorizontal", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclListItems", predicate: EclDescriptionListDefinitionComponent }], usesInheritance: true, ngImport: i0132 });
+    this.ɵdir = i0132.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclDescriptionListDirective, selector: "[eclDescriptionList]", inputs: { isHorizontal: ["isHorizontal", "isHorizontal", booleanAttribute28], maxVisibleItems: ["maxVisibleItems", "maxVisibleItems", numberAttribute5] }, host: { properties: { "class.ecl-description-list--horizontal": "this.isHorizontal", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclListItems", predicate: EclDescriptionListDefinitionComponent }], usesInheritance: true, ngImport: i0132 });
   }
 };
 i0132.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0132, type: EclDescriptionListDirective, decorators: [{
@@ -9343,7 +9350,7 @@ i0132.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   }]
 }], ctorParameters: () => [{ type: i0132.ChangeDetectorRef }], propDecorators: { isHorizontal: [{
   type: Input53,
-  args: [{ transform: booleanAttribute26 }]
+  args: [{ transform: booleanAttribute28 }]
 }, {
   type: HostBinding91,
   args: ["class.ecl-description-list--horizontal"]
@@ -9486,10 +9493,10 @@ var EclMenuItemParentFocusEvent = class {
 
 // lib/components/ecl-menu/ecl-menu-mega/ecl-menu-mega-item.component.mjs
 import { ENTER } from "@angular/cdk/keycodes";
-import { Component as Component59, ContentChildren as ContentChildren17, EventEmitter as EventEmitter23, HostBinding as HostBinding92, HostListener as HostListener11, Input as Input54, Output as Output23, ViewChild as ViewChild8, booleanAttribute as booleanAttribute27, forwardRef as forwardRef35 } from "@angular/core";
+import { Component as Component59, ContentChildren as ContentChildren17, EventEmitter as EventEmitter23, HostBinding as HostBinding92, HostListener as HostListener11, Input as Input54, Output as Output23, ViewChild as ViewChild8, booleanAttribute as booleanAttribute29, forwardRef as forwardRef35 } from "@angular/core";
 import * as i0134 from "@angular/core";
-import * as i121 from "@angular/common";
-import * as i215 from "@angular/router";
+import * as i119 from "@angular/common";
+import * as i211 from "@angular/router";
 var EclMenuMegaItemComponent = class _EclMenuMegaItemComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -9549,12 +9556,12 @@ var EclMenuMegaItemComponent = class _EclMenuMegaItemComponent extends ECLBaseDi
     this.ɵfac = i0134.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0134, type: _EclMenuMegaItemComponent, deps: null, target: i0134.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0134.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", 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", booleanAttribute27], isSeeAll: ["isSeeAll", "isSeeAll", booleanAttribute27] }, 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: i0134.forwardRef(() => EclIconComponent) }, { propertyName: "links", predicate: i0134.forwardRef(() => EclLinkDirective) }], viewQueries: [{ propertyName: "megaMenuLink", first: true, predicate: ["megaMenuLink"], descendants: true }], usesInheritance: true, ngImport: i0134, 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: i121.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i121.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"] }] });
+    this.ɵcmp = i0134.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclMenuMegaItemComponent, selector: "ecl-menu-mega-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: ["isCurrent", "isCurrent", booleanAttribute29], isSeeAll: ["isSeeAll", "isSeeAll", booleanAttribute29] }, outputs: { menuItemSelect: "menuItemSelect", menuItemKeydown: "menuItemKeydown" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.ecl-menu__subitem": "this.cmpClass", "attr.role": "this.role", "class.ecl-menu__subitem--current": "this.isCurrent", "class.ecl-menu__see-all": "this.isSeeAll" } }, queries: [{ propertyName: "iconComponents", predicate: i0134.forwardRef(() => EclIconComponent) }, { propertyName: "links", predicate: i0134.forwardRef(() => EclLinkDirective) }], viewQueries: [{ propertyName: "megaMenuLink", first: true, predicate: ["megaMenuLink"], descendants: true }], usesInheritance: true, ngImport: i0134, template: '@if (!isSeeAll) {\n    @if (href) {\n        <a  #megaMenuLink\n            [href]="href"\n            [target]="target"\n            class="ecl-menu__sublink"\n            [class.ecl-menu__sublink--current]="isCurrent"\n            (click)="onItemClick($event)"\n            (keydown)="onKeydown($event)">\n            {{ label }}\n            <ng-container *ngTemplateOutlet="content"></ng-container>\n        </a>\n    } @else {\n        <a  #megaMenuLink\n            tabindex="0"\n            [routerLink]="routerLink"\n            [queryParams]="queryParams"\n            [queryParamsHandling]="queryParamsHandling"\n            class="ecl-menu__sublink"\n            [class.ecl-menu__sublink--current]="isCurrent"\n            (click)="onItemClick($event)"\n            (keydown)="onKeydown($event)">\n            {{ label }}\n            <ng-container *ngTemplateOutlet="content"></ng-container>\n        </a>\n    }\n} @else {\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i119.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i211.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
   }
 };
 i0134.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0134, type: EclMenuMegaItemComponent, decorators: [{
   type: Component59,
-  args: [{ selector: "ecl-menu-mega-item", 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"] }]
+  args: [{ selector: "ecl-menu-mega-item", template: '@if (!isSeeAll) {\n    @if (href) {\n        <a  #megaMenuLink\n            [href]="href"\n            [target]="target"\n            class="ecl-menu__sublink"\n            [class.ecl-menu__sublink--current]="isCurrent"\n            (click)="onItemClick($event)"\n            (keydown)="onKeydown($event)">\n            {{ label }}\n            <ng-container *ngTemplateOutlet="content"></ng-container>\n        </a>\n    } @else {\n        <a  #megaMenuLink\n            tabindex="0"\n            [routerLink]="routerLink"\n            [queryParams]="queryParams"\n            [queryParamsHandling]="queryParamsHandling"\n            class="ecl-menu__sublink"\n            [class.ecl-menu__sublink--current]="isCurrent"\n            (click)="onItemClick($event)"\n            (keydown)="onKeydown($event)">\n            {{ label }}\n            <ng-container *ngTemplateOutlet="content"></ng-container>\n        </a>\n    }\n} @else {\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', styles: [":host{display:list-item}\n"] }]
 }], propDecorators: { id: [{
   type: Input54
 }], label: [{
@@ -9577,13 +9584,13 @@ i0134.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: ["attr.role"]
 }], isCurrent: [{
   type: Input54,
-  args: [{ transform: booleanAttribute27 }]
+  args: [{ transform: booleanAttribute29 }]
 }, {
   type: HostBinding92,
   args: ["class.ecl-menu__subitem--current"]
 }], isSeeAll: [{
   type: Input54,
-  args: [{ transform: booleanAttribute27 }]
+  args: [{ transform: booleanAttribute29 }]
 }, {
   type: HostBinding92,
   args: ["class.ecl-menu__see-all"]
@@ -9755,9 +9762,9 @@ import { Subject as Subject18 } from "rxjs";
 import { takeUntil as takeUntil18 } from "rxjs/operators";
 import { Breakpoints as Breakpoints2 } from "@angular/cdk/layout";
 import * as i0136 from "@angular/core";
-import * as i122 from "@angular/cdk/layout";
-import * as i46 from "@angular/common";
-import * as i52 from "@angular/router";
+import * as i120 from "@angular/cdk/layout";
+import * as i45 from "@angular/common";
+import * as i54 from "@angular/router";
 var EclMenuItemComponent = class _EclMenuItemComponent extends ECLBaseDirective {
   get cssClasses() {
     return [
@@ -10028,134 +10035,146 @@ var EclMenuItemComponent = class _EclMenuItemComponent extends ECLBaseDirective
     });
   }
   static {
-    this.ɵfac = i0136.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0136, type: _EclMenuItemComponent, deps: [{ token: i0136.ElementRef }, { token: i0136.Renderer2 }, { token: i0136.ApplicationRef }, { token: i122.BreakpointObserver }], target: i0136.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0136.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0136, type: _EclMenuItemComponent, deps: [{ token: i0136.ElementRef }, { token: i0136.Renderer2 }, { token: i0136.ApplicationRef }, { token: i120.BreakpointObserver }], target: i0136.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0136.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.0", 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: i0136.forwardRef(() => EclMenuMegaComponent), descendants: true }], viewQueries: [{ propertyName: "menuLink", first: true, predicate: ["menuLink"], descendants: true }, { propertyName: "menuButton", first: true, predicate: EclButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0136, template: `<a
-    #menuLink
-    variant="standalone"
-    *ngIf="href"
-    [href]="href"
-    [target]="target"
-    class="ecl-menu__link"
-    [class.ecl-menu__link--current]="isCurrent"
-    (focus)="onItemFocus($event)"
-    (click)="onItemClick($event)"
-    (keydown)="onLinkKeydown($event)">
-    {{ label }}
-    <ng-container *ngTemplateOutlet="content"></ng-container>
-</a>
-<a
-    #menuLink
-    variant="standalone"
-    *ngIf="!href"
-    tabindex="0"
-    [routerLink]="routerLink"
-    [queryParams]="queryParams"
-    [queryParamsHandling]="queryParamsHandling"
-    class="ecl-menu__link"
-    [class.ecl-menu__link--current]="isCurrent"
-    (focus)="onItemFocus($event)"
-    (click)="onItemClick($event)"
-    (keydown)="onLinkKeydown($event)">
-    {{ label }}
-    <ng-container *ngTemplateOutlet="content"></ng-container>
-</a>
-<button
-    eclButton
-    isIconOnly
-    *ngIf="hasChildren && isMobileBreakpoint"
-    variant="ghost"
-    class="ecl-menu__button-caret"
-    type="button"
-    aria-label="Access item's children"
-    (click)="onItemCaretClick($event)"
-    (keydown)="onButtonKeydown($event)">
-    <ecl-icon icon="corner-arrow" size="xs" transform="rotate-180" class="ecl-button__icon"></ecl-icon>
-</button>
-<button
-    eclButton
-    isIconOnly
-    *ngIf="hasChildren && !isMobileBreakpoint"
-    variant="ghost"
-    class="ecl-menu__button-caret"
-    type="button"
-    aria-label="Access item's children"
-    [attr.aria-expanded]="isAriaExpanded"
-    (keydown)="onButtonKeydown($event)">
-    <ecl-icon icon="corner-arrow" size="xs" transform="rotate-180" class="ecl-button__icon"></ecl-icon>
-</button>
+    this.ɵcmp = i0136.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", 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: i0136.forwardRef(() => EclMenuMegaComponent), descendants: true }], viewQueries: [{ propertyName: "menuLink", first: true, predicate: ["menuLink"], descendants: true }, { propertyName: "menuButton", first: true, predicate: EclButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0136, template: `@if (href) {
+    <a
+        #menuLink
+        variant="standalone"
+        [href]="href"
+        [target]="target"
+        class="ecl-menu__link"
+        [class.ecl-menu__link--current]="isCurrent"
+        (focus)="onItemFocus($event)"
+        (click)="onItemClick($event)"
+        (keydown)="onLinkKeydown($event)">
+        {{ label }}
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+    </a>
+} @else {
+    <a
+        #menuLink
+        variant="standalone"
+        tabindex="0"
+        [routerLink]="routerLink"
+        [queryParams]="queryParams"
+        [queryParamsHandling]="queryParamsHandling"
+        class="ecl-menu__link"
+        [class.ecl-menu__link--current]="isCurrent"
+        (focus)="onItemFocus($event)"
+        (click)="onItemClick($event)"
+        (keydown)="onLinkKeydown($event)">
+        {{ label }}
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+    </a>
+}
+
+@if (hasChildren) {
+    @if (isMobileBreakpoint) {
+        <button
+            eclButton
+            isIconOnly
+            variant="ghost"
+            class="ecl-menu__button-caret"
+            type="button"
+            aria-label="Access item's children"
+            (click)="onItemCaretClick($event)"
+            (keydown)="onButtonKeydown($event)">
+            <ecl-icon icon="corner-arrow" size="xs" transform="rotate-180" class="ecl-button__icon"></ecl-icon>
+        </button>
+    } @else {
+        <button
+            eclButton
+            isIconOnly
+            variant="ghost"
+            class="ecl-menu__button-caret"
+            type="button"
+            aria-label="Access item's children"
+            [attr.aria-expanded]="isAriaExpanded"
+            (keydown)="onButtonKeydown($event)">
+            <ecl-icon icon="corner-arrow" size="xs" transform="rotate-180" class="ecl-button__icon"></ecl-icon>
+        </button>
+    }
+}
+
 <ng-content select="ecl-menu-mega"></ng-content>
 
 <ng-template #content>
     <ng-content></ng-content>
 </ng-template>
-`, dependencies: [{ 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: "directive", type: i46.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i46.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i52.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0136.ViewEncapsulation.None });
+`, dependencies: [{ 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: "directive", type: i45.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i54.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0136.ViewEncapsulation.None });
   }
 };
 i0136.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0136, type: EclMenuItemComponent, decorators: [{
   type: Component61,
-  args: [{ selector: "ecl-menu-item", encapsulation: ViewEncapsulation7.None, template: `<a
-    #menuLink
-    variant="standalone"
-    *ngIf="href"
-    [href]="href"
-    [target]="target"
-    class="ecl-menu__link"
-    [class.ecl-menu__link--current]="isCurrent"
-    (focus)="onItemFocus($event)"
-    (click)="onItemClick($event)"
-    (keydown)="onLinkKeydown($event)">
-    {{ label }}
-    <ng-container *ngTemplateOutlet="content"></ng-container>
-</a>
-<a
-    #menuLink
-    variant="standalone"
-    *ngIf="!href"
-    tabindex="0"
-    [routerLink]="routerLink"
-    [queryParams]="queryParams"
-    [queryParamsHandling]="queryParamsHandling"
-    class="ecl-menu__link"
-    [class.ecl-menu__link--current]="isCurrent"
-    (focus)="onItemFocus($event)"
-    (click)="onItemClick($event)"
-    (keydown)="onLinkKeydown($event)">
-    {{ label }}
-    <ng-container *ngTemplateOutlet="content"></ng-container>
-</a>
-<button
-    eclButton
-    isIconOnly
-    *ngIf="hasChildren && isMobileBreakpoint"
-    variant="ghost"
-    class="ecl-menu__button-caret"
-    type="button"
-    aria-label="Access item's children"
-    (click)="onItemCaretClick($event)"
-    (keydown)="onButtonKeydown($event)">
-    <ecl-icon icon="corner-arrow" size="xs" transform="rotate-180" class="ecl-button__icon"></ecl-icon>
-</button>
-<button
-    eclButton
-    isIconOnly
-    *ngIf="hasChildren && !isMobileBreakpoint"
-    variant="ghost"
-    class="ecl-menu__button-caret"
-    type="button"
-    aria-label="Access item's children"
-    [attr.aria-expanded]="isAriaExpanded"
-    (keydown)="onButtonKeydown($event)">
-    <ecl-icon icon="corner-arrow" size="xs" transform="rotate-180" class="ecl-button__icon"></ecl-icon>
-</button>
+  args: [{ selector: "ecl-menu-item", encapsulation: ViewEncapsulation7.None, template: `@if (href) {
+    <a
+        #menuLink
+        variant="standalone"
+        [href]="href"
+        [target]="target"
+        class="ecl-menu__link"
+        [class.ecl-menu__link--current]="isCurrent"
+        (focus)="onItemFocus($event)"
+        (click)="onItemClick($event)"
+        (keydown)="onLinkKeydown($event)">
+        {{ label }}
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+    </a>
+} @else {
+    <a
+        #menuLink
+        variant="standalone"
+        tabindex="0"
+        [routerLink]="routerLink"
+        [queryParams]="queryParams"
+        [queryParamsHandling]="queryParamsHandling"
+        class="ecl-menu__link"
+        [class.ecl-menu__link--current]="isCurrent"
+        (focus)="onItemFocus($event)"
+        (click)="onItemClick($event)"
+        (keydown)="onLinkKeydown($event)">
+        {{ label }}
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+    </a>
+}
+
+@if (hasChildren) {
+    @if (isMobileBreakpoint) {
+        <button
+            eclButton
+            isIconOnly
+            variant="ghost"
+            class="ecl-menu__button-caret"
+            type="button"
+            aria-label="Access item's children"
+            (click)="onItemCaretClick($event)"
+            (keydown)="onButtonKeydown($event)">
+            <ecl-icon icon="corner-arrow" size="xs" transform="rotate-180" class="ecl-button__icon"></ecl-icon>
+        </button>
+    } @else {
+        <button
+            eclButton
+            isIconOnly
+            variant="ghost"
+            class="ecl-menu__button-caret"
+            type="button"
+            aria-label="Access item's children"
+            [attr.aria-expanded]="isAriaExpanded"
+            (keydown)="onButtonKeydown($event)">
+            <ecl-icon icon="corner-arrow" size="xs" transform="rotate-180" class="ecl-button__icon"></ecl-icon>
+        </button>
+    }
+}
+
 <ng-content select="ecl-menu-mega"></ng-content>
 
 <ng-template #content>
     <ng-content></ng-content>
 </ng-template>
 ` }]
-}], ctorParameters: () => [{ type: i0136.ElementRef }, { type: i0136.Renderer2 }, { type: i0136.ApplicationRef }, { type: i122.BreakpointObserver }], propDecorators: { id: [{
+}], ctorParameters: () => [{ type: i0136.ElementRef }, { type: i0136.Renderer2 }, { type: i0136.ApplicationRef }, { type: i120.BreakpointObserver }], propDecorators: { id: [{
   type: Input55
 }], label: [{
   type: Input55
@@ -10224,8 +10243,8 @@ import Hammer from "hammerjs";
 import { Subject as Subject19, of as of3 } from "rxjs";
 import { mergeWith as mergeWith2, takeUntil as takeUntil19 } from "rxjs/operators";
 import * as i0137 from "@angular/core";
-import * as i123 from "@angular/cdk/layout";
-import * as i82 from "@ngx-translate/core";
+import * as i121 from "@angular/cdk/layout";
+import * as i8 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(" ");
@@ -10715,7 +10734,7 @@ var EclMenuComponent = class _EclMenuComponent extends ECLBaseDirective {
     });
   }
   static {
-    this.ɵfac = i0137.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0137, type: _EclMenuComponent, deps: [{ token: i0137.ElementRef }, { token: i0137.IterableDiffers }, { token: i123.BreakpointObserver }, { token: i0137.Renderer2 }, { token: EclRtlService }], target: i0137.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0137.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0137, type: _EclMenuComponent, deps: [{ token: i0137.ElementRef }, { token: i0137.IterableDiffers }, { token: i121.BreakpointObserver }, { token: i0137.Renderer2 }, { token: EclRtlService }], target: i0137.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i0137.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", 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: i0137, template: `<div class="ecl-menu__overlay" (click)="onOverlayClick()"></div>
@@ -10785,7 +10804,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: i82.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: i8.TranslatePipe, name: "translate" }] });
   }
 };
 i0137.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0137, type: EclMenuComponent, decorators: [{
@@ -10858,7 +10877,7 @@ i0137.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
     </section>
 </div>
 `, styles: [":host{display:block}\n"] }]
-}], ctorParameters: () => [{ type: i0137.ElementRef }, { type: i0137.IterableDiffers }, { type: i123.BreakpointObserver }, { type: i0137.Renderer2 }, { type: EclRtlService }], propDecorators: { group: [{
+}], ctorParameters: () => [{ type: i0137.ElementRef }, { type: i0137.IterableDiffers }, { type: i121.BreakpointObserver }, { type: i0137.Renderer2 }, { type: EclRtlService }], propDecorators: { group: [{
   type: Input56
 }], maxLines: [{
   type: Input56,
@@ -11163,9 +11182,9 @@ i0141.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-modal/ecl-modal-body.component.mjs
-import { Component as Component65, HostBinding as HostBinding98, Input as Input60, booleanAttribute as booleanAttribute28 } from "@angular/core";
+import { Component as Component65, HostBinding as HostBinding98, Input as Input60, booleanAttribute as booleanAttribute30 } from "@angular/core";
 import * as i0142 from "@angular/core";
-import * as i124 from "@angular/common";
+import * as i122 from "@angular/common";
 var EclModalBodyComponent = class _EclModalBodyComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -11181,7 +11200,7 @@ var EclModalBodyComponent = class _EclModalBodyComponent extends ECLBaseDirectiv
     this.ɵfac = i0142.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0142, type: _EclModalBodyComponent, deps: null, target: i0142.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0142.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclModalBodyComponent, selector: "[eclModalBody]", inputs: { isScrollable: ["isScrollable", "isScrollable", booleanAttribute28] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0142, 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: i124.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    this.ɵcmp = i0142.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclModalBodyComponent, selector: "[eclModalBody]", inputs: { isScrollable: ["isScrollable", "isScrollable", booleanAttribute30] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0142, 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: i122.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
   }
 };
 i0142.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0142, type: EclModalBodyComponent, decorators: [{
@@ -11189,7 +11208,7 @@ i0142.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: [{ selector: "[eclModalBody]", 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>' }]
 }], propDecorators: { isScrollable: [{
   type: Input60,
-  args: [{ transform: booleanAttribute28 }]
+  args: [{ transform: booleanAttribute30 }]
 }], cssClasses: [{
   type: HostBinding98,
   args: ["class"]
@@ -11369,7 +11388,7 @@ i0147.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] });
 
 // lib/components/ecl-multiselect/ecl-multiselect-option/ecl-multiselect-option.component.mjs
-import { Component as Component67, EventEmitter as EventEmitter30, HostBinding as HostBinding101, Input as Input62, Output as Output30, ViewChild as ViewChild11, booleanAttribute as booleanAttribute29 } from "@angular/core";
+import { Component as Component67, EventEmitter as EventEmitter30, HostBinding as HostBinding101, Input as Input62, Output as Output30, ViewChild as ViewChild11, booleanAttribute as booleanAttribute31 } from "@angular/core";
 import { Subject as Subject21 } from "rxjs";
 import { v4 as uuidgen3 } from "uuid";
 import * as i0148 from "@angular/core";
@@ -11456,7 +11475,7 @@ var EclMultiselectOptionComponent = class _EclMultiselectOptionComponent extends
     this.ɵfac = i0148.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0148, type: _EclMultiselectOptionComponent, deps: [{ token: i0148.Renderer2 }], target: i0148.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0148.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: { value: "value", label: "label", disabled: ["disabled", "disabled", booleanAttribute29], isChecked: "isChecked" }, outputs: { optionClick: "optionClick", optionKeydown: "optionKeydown" }, host: { properties: { "class.ecl-checkbox--disabled": "this.disabled", "attr.disabled": "this.disabled", "style.display": "this.display", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "eclCheckboxInput", first: true, predicate: ["checkboxInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: EclCheckboxDirective }], ngImport: i0148, template: '<input\n    eclCheckboxInput\n    type="checkbox"\n    [id]="id"\n    [value]="value"\n    (click)="onOptionClick()"\n    (keydown)="onOptionKeydown($event)"\n    [checked]="isChecked"\n    [disabled]="disabled"\n    #checkboxInput />\n<label [for]="id" eclCheckboxLabel><span [innerHTML]="label | boldText: keyword"></span></label>\n', dependencies: [{ kind: "component", type: EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "pipe", type: BoldTextPipe, name: "boldText" }] });
+    this.ɵcmp = i0148.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: { value: "value", label: "label", disabled: ["disabled", "disabled", booleanAttribute31], isChecked: "isChecked" }, outputs: { optionClick: "optionClick", optionKeydown: "optionKeydown" }, host: { properties: { "class.ecl-checkbox--disabled": "this.disabled", "attr.disabled": "this.disabled", "style.display": "this.display", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "eclCheckboxInput", first: true, predicate: ["checkboxInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: EclCheckboxDirective }], ngImport: i0148, template: '<input\n    eclCheckboxInput\n    type="checkbox"\n    [id]="id"\n    [value]="value"\n    (click)="onOptionClick()"\n    (keydown)="onOptionKeydown($event)"\n    [checked]="isChecked"\n    [disabled]="disabled"\n    #checkboxInput />\n<label [for]="id" eclCheckboxLabel><span [innerHTML]="label | boldText: keyword"></span></label>\n', dependencies: [{ kind: "component", type: EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "pipe", type: BoldTextPipe, name: "boldText" }] });
   }
 };
 i0148.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0148, type: EclMultiselectOptionComponent, decorators: [{
@@ -11471,7 +11490,7 @@ i0148.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Input62
 }], disabled: [{
   type: Input62,
-  args: [{ transform: booleanAttribute29 }]
+  args: [{ transform: booleanAttribute31 }]
 }, {
   type: HostBinding101,
   args: ["class.ecl-checkbox--disabled"]
@@ -11493,9 +11512,9 @@ i0148.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-multiselect/ecl-multiselect-input/ecl-multiselect-input.component.mjs
-import { Component as Component68, EventEmitter as EventEmitter31, HostBinding as HostBinding102, Input as Input63, Output as Output31, ViewChild as ViewChild12, booleanAttribute as booleanAttribute30 } from "@angular/core";
+import { Component as Component68, EventEmitter as EventEmitter31, HostBinding as HostBinding102, Input as Input63, Output as Output31, ViewChild as ViewChild12, booleanAttribute as booleanAttribute32 } from "@angular/core";
 import * as i0149 from "@angular/core";
-import * as i53 from "@ngx-translate/core";
+import * as i55 from "@ngx-translate/core";
 var EclMultiselectMainInputClickEvent = class {
   constructor(event) {
     this.event = event;
@@ -11563,7 +11582,7 @@ var EclMultiselectInputComponent = class _EclMultiselectInputComponent extends E
     this.ɵfac = i0149.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0149, type: _EclMultiselectInputComponent, deps: [{ token: EclThemeService }, { token: i0149.Renderer2 }], target: i0149.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0149.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: { eclSize: "eclSize", toggleId: "toggleId", toggleLabel: "toggleLabel", isDisabled: ["isDisabled", "isDisabled", booleanAttribute30], isInvalid: ["isInvalid", "isInvalid", booleanAttribute30], inputPlaceholder: "inputPlaceholder", selectedItems: "selectedItems", isDropdownExpanded: "isDropdownExpanded", ariaControls: "ariaControls", ariaDescribedby: "ariaDescribedby", ariaLabeledby: "ariaLabeledby" }, outputs: { mainInputClick: "mainInputClick", mainInputKeydown: "mainInputKeydown" }, host: { properties: { "class.ecl-select__container--disabled": "this.isDisabled", "class.ecl-select__container--invalid": "this.isInvalid", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "inputMultiselect", first: true, predicate: ["inputMultiselect"], descendants: true }], usesInheritance: true, ngImport: i0149, template: `<div [class.ecl-select-multiple-selections-counter--visible]="isShowCounter" class="ecl-select-multiple-selections-counter">
+    this.ɵcmp = i0149.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: { eclSize: "eclSize", toggleId: "toggleId", toggleLabel: "toggleLabel", isDisabled: ["isDisabled", "isDisabled", booleanAttribute32], isInvalid: ["isInvalid", "isInvalid", booleanAttribute32], inputPlaceholder: "inputPlaceholder", selectedItems: "selectedItems", isDropdownExpanded: "isDropdownExpanded", ariaControls: "ariaControls", ariaDescribedby: "ariaDescribedby", ariaLabeledby: "ariaLabeledby" }, outputs: { mainInputClick: "mainInputClick", mainInputKeydown: "mainInputKeydown" }, host: { properties: { "class.ecl-select__container--disabled": "this.isDisabled", "class.ecl-select__container--invalid": "this.isInvalid", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "inputMultiselect", first: true, predicate: ["inputMultiselect"], descendants: true }], usesInheritance: true, ngImport: i0149, template: `<div [class.ecl-select-multiple-selections-counter--visible]="isShowCounter" class="ecl-select-multiple-selections-counter">
     <span>{{ selectedItemsCount }}</span>
 </div>
 <button
@@ -11588,7 +11607,7 @@ var EclMultiselectInputComponent = class _EclMultiselectInputComponent extends E
         <ecl-icon icon="corner-arrow" [size]="sizeIcon" transform="rotate-180"></ecl-icon>
     </button>
 </div>
-`, dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "pipe", type: i53.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "pipe", type: i55.TranslatePipe, name: "translate" }] });
   }
 };
 i0149.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0149, type: EclMultiselectInputComponent, decorators: [{
@@ -11627,13 +11646,13 @@ i0149.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Input63
 }], isDisabled: [{
   type: Input63,
-  args: [{ transform: booleanAttribute30 }]
+  args: [{ transform: booleanAttribute32 }]
 }, {
   type: HostBinding102,
   args: ["class.ecl-select__container--disabled"]
 }], isInvalid: [{
   type: Input63,
-  args: [{ transform: booleanAttribute30 }]
+  args: [{ transform: booleanAttribute32 }]
 }, {
   type: HostBinding102,
   args: ["class.ecl-select__container--invalid"]
@@ -11697,13 +11716,12 @@ i0150.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-multiselect/ecl-multiselect-dropdown/ecl-multiselect-dropdown.component.mjs
-import { booleanAttribute as booleanAttribute31, Component as Component70, ElementRef as ElementRef24, EventEmitter as EventEmitter32, forwardRef as forwardRef43, HostBinding as HostBinding104, HostListener as HostListener17, Input as Input65, Output as Output32, ViewChild as ViewChild13, ViewChildren as ViewChildren2 } from "@angular/core";
+import { booleanAttribute as booleanAttribute33, Component as Component70, ElementRef as ElementRef24, EventEmitter as EventEmitter32, forwardRef as forwardRef43, HostBinding as HostBinding104, HostListener as HostListener17, Input as Input65, Output as Output32, ViewChild as ViewChild13, ViewChildren as ViewChildren2 } from "@angular/core";
 import { NG_VALUE_ACCESSOR as NG_VALUE_ACCESSOR4 } from "@angular/forms";
 import { Subject as Subject22 } from "rxjs";
 import { v4 as uuidgen4 } from "uuid";
 import * as i0151 from "@angular/core";
-import * as i125 from "@angular/common";
-import * as i92 from "@ngx-translate/core";
+import * as i82 from "@ngx-translate/core";
 var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent extends ECLBaseDirective {
   get isInvalid() {
     return this._isInvalid;
@@ -12083,7 +12101,7 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
     this.ɵfac = i0151.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0151, type: _EclMultiselectDropdownComponent, deps: [{ token: i0151.ElementRef }, { token: i0151.IterableDiffers }, { token: i0151.Renderer2 }], target: i0151.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0151.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclMultiselectDropdownComponent, selector: "div[eclMultiselectDropdown]", inputs: { isInvalid: ["isInvalid", "isInvalid", booleanAttribute31], mainInputPlaceholder: "mainInputPlaceholder", searchFieldPlaceholder: "searchFieldPlaceholder", eclSize: "eclSize", disabled: ["disabled", "disabled", booleanAttribute31] }, outputs: { eclChange: "eclChange" }, host: { listeners: { "document:keyup.escape": "onEscapeKey($event)", "document:click": "onKeyUp($event)" }, properties: { "class": "this.cssClasses", "attr.disabled": "this.disabled" } }, providers: [
+    this.ɵcmp = i0151.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclMultiselectDropdownComponent, selector: "div[eclMultiselectDropdown]", inputs: { isInvalid: ["isInvalid", "isInvalid", booleanAttribute33], mainInputPlaceholder: "mainInputPlaceholder", searchFieldPlaceholder: "searchFieldPlaceholder", eclSize: "eclSize", disabled: ["disabled", "disabled", booleanAttribute33] }, outputs: { eclChange: "eclChange" }, host: { listeners: { "document:keyup.escape": "onEscapeKey($event)", "document:click": "onKeyUp($event)" }, properties: { "class": "this.cssClasses", "attr.disabled": "this.disabled" } }, providers: [
       {
         provide: NG_VALUE_ACCESSOR4,
         useExisting: forwardRef43(() => _EclMultiselectDropdownComponent),
@@ -12118,33 +12136,34 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
         <label [for]="selectAllId" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }}) </label>
     </div>
     <div class="ecl-select__multiple-options">
-        <ng-container *ngFor="let item of multiOptionDirectives">
-            @if (item.isOptGroup()) {
-                <fieldset eclMultiselectOptgroup [label]="item.label">
+        @for (item of multiOptionDirectives; track item.label) {
+                @if (item.isOptGroup()) {
+                    <fieldset eclMultiselectOptgroup [label]="item.label">
+                        @for (elem of item.eclOptionItems; track elem.label) {
+                            <div
+                                eclMultiselectOption
+                                [value]="elem.value"
+                                [label]="elem.label"
+                                [disabled]="elem.disabled"
+                                [isChecked]="elem.selected"
+                                [class]="elem.class"
+                                (optionClick)="onOptionSelected($event)"
+                                (optionKeydown)="onKeydownOption($event)"></div>
+                        }
+                    </fieldset>
+                } @else if (!item.isOptGroup()) {
                     <div
                         eclMultiselectOption
-                        *ngFor="let elem of item.eclOptionItems"
-                        [value]="elem.value"
-                        [label]="elem.label"
-                        [disabled]="elem.disabled"
-                        [isChecked]="elem.selected"
-                        [class]="elem.class"
+                        [value]="item.value"
+                        [label]="item.label"
+                        [disabled]="item.disabled"
+                        [isChecked]="item.selected"
+                        [class]="item.class"
                         (optionClick)="onOptionSelected($event)"
                         (optionKeydown)="onKeydownOption($event)"></div>
-                </fieldset>
-            } @else if (!item.isOptGroup()) {
-                <div
-                    eclMultiselectOption
-                    [value]="item.value"
-                    [label]="item.label"
-                    [disabled]="item.disabled"
-                    [isChecked]="item.selected"
-                    [class]="item.class"
-                    (optionClick)="onOptionSelected($event)"
-                    (optionKeydown)="onKeydownOption($event)"></div>
-            }
+                }
+        }
 
-        </ng-container>
 
         @if (isShowNoResultsFound) {
             <div class="ecl-select__multiple-no-results">
@@ -12178,7 +12197,7 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
         </div>
     }
 </div>
-`, dependencies: [{ kind: "directive", type: i125.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: EclCheckboxDirective, selector: "[eclCheckbox]", inputs: ["isDisabled", "isInvalid", "isSingle"] }, { kind: "component", type: EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { 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", "toggleLabel", "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" }] });
+`, dependencies: [{ kind: "directive", type: EclCheckboxDirective, selector: "[eclCheckbox]", inputs: ["isDisabled", "isInvalid", "isSingle"] }, { kind: "component", type: EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { 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", "toggleLabel", "isDisabled", "isInvalid", "inputPlaceholder", "selectedItems", "isDropdownExpanded", "ariaControls", "ariaDescribedby", "ariaLabeledby"], outputs: ["mainInputClick", "mainInputKeydown"] }, { kind: "component", type: EclMultiselectOptgroupComponent, selector: "fieldset[eclMultiselectOptgroup]", inputs: ["label"] }, { kind: "pipe", type: i82.TranslatePipe, name: "translate" }] });
   }
 };
 i0151.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0151, type: EclMultiselectDropdownComponent, decorators: [{
@@ -12218,33 +12237,34 @@ i0151.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
         <label [for]="selectAllId" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }}) </label>
     </div>
     <div class="ecl-select__multiple-options">
-        <ng-container *ngFor="let item of multiOptionDirectives">
-            @if (item.isOptGroup()) {
-                <fieldset eclMultiselectOptgroup [label]="item.label">
+        @for (item of multiOptionDirectives; track item.label) {
+                @if (item.isOptGroup()) {
+                    <fieldset eclMultiselectOptgroup [label]="item.label">
+                        @for (elem of item.eclOptionItems; track elem.label) {
+                            <div
+                                eclMultiselectOption
+                                [value]="elem.value"
+                                [label]="elem.label"
+                                [disabled]="elem.disabled"
+                                [isChecked]="elem.selected"
+                                [class]="elem.class"
+                                (optionClick)="onOptionSelected($event)"
+                                (optionKeydown)="onKeydownOption($event)"></div>
+                        }
+                    </fieldset>
+                } @else if (!item.isOptGroup()) {
                     <div
                         eclMultiselectOption
-                        *ngFor="let elem of item.eclOptionItems"
-                        [value]="elem.value"
-                        [label]="elem.label"
-                        [disabled]="elem.disabled"
-                        [isChecked]="elem.selected"
-                        [class]="elem.class"
+                        [value]="item.value"
+                        [label]="item.label"
+                        [disabled]="item.disabled"
+                        [isChecked]="item.selected"
+                        [class]="item.class"
                         (optionClick)="onOptionSelected($event)"
                         (optionKeydown)="onKeydownOption($event)"></div>
-                </fieldset>
-            } @else if (!item.isOptGroup()) {
-                <div
-                    eclMultiselectOption
-                    [value]="item.value"
-                    [label]="item.label"
-                    [disabled]="item.disabled"
-                    [isChecked]="item.selected"
-                    [class]="item.class"
-                    (optionClick)="onOptionSelected($event)"
-                    (optionKeydown)="onKeydownOption($event)"></div>
-            }
+                }
+        }
 
-        </ng-container>
 
         @if (isShowNoResultsFound) {
             <div class="ecl-select__multiple-no-results">
@@ -12304,7 +12324,7 @@ i0151.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Output32
 }], isInvalid: [{
   type: Input65,
-  args: [{ transform: booleanAttribute31 }]
+  args: [{ transform: booleanAttribute33 }]
 }], cssClasses: [{
   type: HostBinding104,
   args: ["class"]
@@ -12316,7 +12336,7 @@ i0151.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Input65
 }], disabled: [{
   type: Input65,
-  args: [{ transform: booleanAttribute31 }]
+  args: [{ transform: booleanAttribute33 }]
 }, {
   type: HostBinding104,
   args: ["attr.disabled"]
@@ -12395,7 +12415,7 @@ i0152.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 
 // lib/components/ecl-multiselect/ecl-multiselect.component.mjs
 import { coerceBooleanProperty as coerceBooleanProperty3 } from "@angular/cdk/coercion";
-import { booleanAttribute as booleanAttribute32, Component as Component71, ContentChildren as ContentChildren23, EventEmitter as EventEmitter33, forwardRef as forwardRef44, HostBinding as HostBinding106, Input as Input67, Output as Output33, ViewEncapsulation as ViewEncapsulation9 } from "@angular/core";
+import { booleanAttribute as booleanAttribute34, Component as Component71, ContentChildren as ContentChildren23, EventEmitter as EventEmitter33, forwardRef as forwardRef44, HostBinding as HostBinding106, Input as Input67, Output as Output33, ViewEncapsulation as ViewEncapsulation9 } from "@angular/core";
 import { NG_VALUE_ACCESSOR as NG_VALUE_ACCESSOR5, NgControl as NgControl4 } from "@angular/forms";
 import { Subject as Subject24, takeUntil as takeUntil21 } from "rxjs";
 import * as i0153 from "@angular/core";
@@ -12530,7 +12550,7 @@ var EclMultiselectComponent = class _EclMultiselectComponent extends ECLBaseDire
     this.ɵfac = i0153.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0153, type: _EclMultiselectComponent, deps: [{ token: i0153.Injector }, { token: i0153.ElementRef }, { token: i0153.ViewContainerRef }, { token: i0153.IterableDiffers }, { token: i0153.Renderer2 }], target: i0153.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0153.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclMultiselectComponent, selector: "select[eclMultiselect]", inputs: { ariaDescribedby: "ariaDescribedby", ariaLabeledby: "ariaLabeledby", id: "id", toggleLabel: "toggleLabel", isInvalid: ["isInvalid", "isInvalid", booleanAttribute32], disabled: "disabled", eclPlaceholder: "eclPlaceholder", eclSize: "eclSize" }, outputs: { eclChange: "eclChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [
+    this.ɵcmp = i0153.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclMultiselectComponent, selector: "select[eclMultiselect]", inputs: { ariaDescribedby: "ariaDescribedby", ariaLabeledby: "ariaLabeledby", id: "id", toggleLabel: "toggleLabel", isInvalid: ["isInvalid", "isInvalid", booleanAttribute34], disabled: "disabled", eclPlaceholder: "eclPlaceholder", eclSize: "eclSize" }, outputs: { eclChange: "eclChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [
       {
         provide: NG_VALUE_ACCESSOR5,
         useExisting: forwardRef44(() => _EclMultiselectComponent),
@@ -12561,7 +12581,7 @@ i0153.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Input67
 }], isInvalid: [{
   type: Input67,
-  args: [{ transform: booleanAttribute32 }]
+  args: [{ transform: booleanAttribute34 }]
 }], disabled: [{
   type: Input67
 }, {
@@ -12687,7 +12707,7 @@ i0155.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-navigation-list/ecl-navigation-list.component.mjs
-import { Component as Component73, ContentChildren as ContentChildren24, HostBinding as HostBinding108, Input as Input69, booleanAttribute as booleanAttribute33, forwardRef as forwardRef48, numberAttribute as numberAttribute7 } from "@angular/core";
+import { Component as Component73, ContentChildren as ContentChildren24, HostBinding as HostBinding108, Input as Input69, booleanAttribute as booleanAttribute35, forwardRef as forwardRef48, numberAttribute as numberAttribute7 } from "@angular/core";
 import * as i0156 from "@angular/core";
 var EclNavigationListComponent = class _EclNavigationListComponent extends ECLBaseDirective {
   constructor() {
@@ -12710,7 +12730,7 @@ var EclNavigationListComponent = class _EclNavigationListComponent extends ECLBa
     this.ɵfac = i0156.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0156, type: _EclNavigationListComponent, deps: null, target: i0156.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0156.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclNavigationListComponent, selector: "ecl-navigation-list", inputs: { columns: ["columns", "columns", numberAttribute7], hasBorders: ["hasBorders", "hasBorders", booleanAttribute33] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "listItems", predicate: i0156.forwardRef(() => EclNavigationListItemComponent) }], usesInheritance: true, ngImport: i0156, template: "<ng-content></ng-content>\n" });
+    this.ɵcmp = i0156.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclNavigationListComponent, selector: "ecl-navigation-list", inputs: { columns: ["columns", "columns", numberAttribute7], hasBorders: ["hasBorders", "hasBorders", booleanAttribute35] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "listItems", predicate: i0156.forwardRef(() => EclNavigationListItemComponent) }], usesInheritance: true, ngImport: i0156, template: "<ng-content></ng-content>\n" });
   }
 };
 i0156.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0156, type: EclNavigationListComponent, decorators: [{
@@ -12724,7 +12744,7 @@ i0156.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: [{ transform: numberAttribute7 }]
 }], hasBorders: [{
   type: Input69,
-  args: [{ transform: booleanAttribute33 }]
+  args: [{ transform: booleanAttribute35 }]
 }], listItems: [{
   type: ContentChildren24,
   args: [forwardRef48(() => EclNavigationListItemComponent)]
@@ -12923,10 +12943,10 @@ i0160.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-news-ticker/ecl-news-ticker.component.mjs
-import { Component as Component76, ContentChildren as ContentChildren25, EventEmitter as EventEmitter35, HostBinding as HostBinding112, HostListener as HostListener18, Input as Input71, Output as Output35, ViewChild as ViewChild14, booleanAttribute as booleanAttribute34 } from "@angular/core";
+import { Component as Component76, ContentChildren as ContentChildren25, EventEmitter as EventEmitter35, HostBinding as HostBinding112, HostListener as HostListener18, Input as Input71, Output as Output35, ViewChild as ViewChild14, booleanAttribute as booleanAttribute36 } from "@angular/core";
 import { Subject as Subject26, takeUntil as takeUntil23 } from "rxjs";
 import * as i0161 from "@angular/core";
-import * as i54 from "@ngx-translate/core";
+import * as i56 from "@ngx-translate/core";
 var EclNewsTickerItemEvent = class extends EclBaseEvent {
   constructor(itemIndex) {
     super();
@@ -13114,7 +13134,7 @@ var EclNewsTickerComponent = class _EclNewsTickerComponent extends ECLBaseDirect
     this.ɵfac = i0161.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0161, type: _EclNewsTickerComponent, deps: [{ token: i0161.Renderer2 }], target: i0161.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0161.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclNewsTickerComponent, selector: "ecl-news-ticker", inputs: { isAutoplay: ["isAutoplay", "isAutoplay", booleanAttribute34] }, outputs: { itemSwitch: "itemSwitch" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "newsTickerItems", predicate: EclNewsTickerItemComponent }], viewQueries: [{ propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }], usesInheritance: true, ngImport: i0161, template: `<div class="ecl-news-ticker__container" [style.height.px]="containerHeight">
+    this.ɵcmp = i0161.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclNewsTickerComponent, selector: "ecl-news-ticker", inputs: { isAutoplay: ["isAutoplay", "isAutoplay", booleanAttribute36] }, outputs: { itemSwitch: "itemSwitch" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "newsTickerItems", predicate: EclNewsTickerItemComponent }], viewQueries: [{ propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }], usesInheritance: true, ngImport: i0161, template: `<div class="ecl-news-ticker__container" [style.height.px]="containerHeight">
     <ecl-icon icon="information" size="m" class="ecl-news-ticker__icon"></ecl-icon>
     <div class="ecl-news-ticker__content" [style.height.px]="contentHeight">
         <ul
@@ -13167,7 +13187,7 @@ var EclNewsTickerComponent = class _EclNewsTickerComponent extends ECLBaseDirect
         <span class="ecl-news-ticker__counter--max">{{ itemsCount }}</span>
     </div>
 </div>
-}`, 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: "component", type: EclNewsTickerItemComponent, selector: "ecl-news-ticker-item", outputs: ["itemFocused"] }, { kind: "pipe", type: i54.TranslatePipe, name: "translate" }] });
+}`, 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: "component", type: EclNewsTickerItemComponent, selector: "ecl-news-ticker-item", outputs: ["itemFocused"] }, { kind: "pipe", type: i56.TranslatePipe, name: "translate" }] });
   }
 };
 i0161.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0161, type: EclNewsTickerComponent, decorators: [{
@@ -13228,7 +13248,7 @@ i0161.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }` }]
 }], ctorParameters: () => [{ type: i0161.Renderer2 }], propDecorators: { isAutoplay: [{
   type: Input71,
-  args: [{ transform: booleanAttribute34 }]
+  args: [{ transform: booleanAttribute36 }]
 }], itemSwitch: [{
   type: Output35
 }], newsTickerItems: [{
@@ -13277,10 +13297,10 @@ i0162.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] });
 
 // lib/components/ecl-notification/ecl-notification.component.mjs
-import { Component as Component77, Input as Input72, Output as Output36, EventEmitter as EventEmitter36, HostBinding as HostBinding113, booleanAttribute as booleanAttribute35 } from "@angular/core";
+import { Component as Component77, Input as Input72, Output as Output36, EventEmitter as EventEmitter36, HostBinding as HostBinding113, booleanAttribute as booleanAttribute37 } from "@angular/core";
 import * as i0163 from "@angular/core";
-import * as i55 from "@angular/common";
-import * as i63 from "@ngx-translate/core";
+import * as i57 from "@angular/common";
+import * as i62 from "@ngx-translate/core";
 var EclNotificationCloseEvent = class extends EclBaseEvent {
 };
 var EclNotificationComponent = class _EclNotificationComponent extends ECLBaseDirective {
@@ -13323,7 +13343,7 @@ var EclNotificationComponent = class _EclNotificationComponent extends ECLBaseDi
     this.ɵfac = i0163.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0163, type: _EclNotificationComponent, deps: [{ token: EclThemeService }], target: i0163.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0163.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclNotificationComponent, selector: "ecl-notification", inputs: { notificationTitle: "notificationTitle", variant: "variant", isVisible: ["isVisible", "isVisible", booleanAttribute35], isCloseable: ["isCloseable", "isCloseable", booleanAttribute35] }, outputs: { close: "close" }, host: { properties: { "attr.role": "this.role", "class.ecl-u-d-none": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0163, template: `@if( eclThemeService.isEC$ | async ){
+    this.ɵcmp = i0163.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclNotificationComponent, selector: "ecl-notification", inputs: { notificationTitle: "notificationTitle", variant: "variant", isVisible: ["isVisible", "isVisible", booleanAttribute37], isCloseable: ["isCloseable", "isCloseable", booleanAttribute37] }, outputs: { close: "close" }, host: { properties: { "attr.role": "this.role", "class.ecl-u-d-none": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0163, template: `@if( eclThemeService.isEC$ | async ){
     <ecl-icon size="l" class="ecl-notification__icon" [icon]="icon" [ariaHidden]="false" role="img">
         <title>{{ icon | titlecase }}</title>
     </ecl-icon>
@@ -13355,7 +13375,7 @@ var EclNotificationComponent = class _EclNotificationComponent extends ECLBaseDi
     <ng-content select="[eclNotificationTitle]"></ng-content>
     <div class="ecl-notification__description"><ng-content></ng-content></div>
 </div>
-`, 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: "pipe", type: i55.AsyncPipe, name: "async" }, { kind: "pipe", type: i55.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i63.TranslatePipe, name: "translate" }] });
+`, 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: "pipe", type: i57.AsyncPipe, name: "async" }, { kind: "pipe", type: i57.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i62.TranslatePipe, name: "translate" }] });
   }
 };
 i0163.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0163, type: EclNotificationComponent, decorators: [{
@@ -13399,10 +13419,10 @@ i0163.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Input72
 }], isVisible: [{
   type: Input72,
-  args: [{ transform: booleanAttribute35 }]
+  args: [{ transform: booleanAttribute37 }]
 }], isCloseable: [{
   type: Input72,
-  args: [{ transform: booleanAttribute35 }]
+  args: [{ transform: booleanAttribute37 }]
 }], close: [{
   type: Output36
 }], role: [{
@@ -13441,7 +13461,7 @@ i0164.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-site-footer/ecl-footer-elements/ecl-site-footer-section.directive.mjs
-import { Directive as Directive43, HostBinding as HostBinding115, Input as Input73, booleanAttribute as booleanAttribute36 } from "@angular/core";
+import { Directive as Directive43, HostBinding as HostBinding115, Input as Input73, booleanAttribute as booleanAttribute38 } from "@angular/core";
 import * as i0165 from "@angular/core";
 var EclSiteFooterSectionDirective = class _EclSiteFooterSectionDirective extends ECLBaseDirective {
   constructor() {
@@ -13456,7 +13476,7 @@ var EclSiteFooterSectionDirective = class _EclSiteFooterSectionDirective extends
     this.ɵfac = i0165.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0165, type: _EclSiteFooterSectionDirective, deps: null, target: i0165.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0165.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclSiteFooterSectionDirective, selector: "[eclSiteFooterSection]", inputs: { isCondensed: ["isCondensed", "isCondensed", booleanAttribute36], isSiteInfo: ["isSiteInfo", "isSiteInfo", booleanAttribute36], isSplitList: ["isSplitList", "isSplitList", booleanAttribute36], hasSeparator: ["hasSeparator", "hasSeparator", booleanAttribute36] }, host: { properties: { "class.ecl-site-footer__section": "this.cmpClass", "class.ecl-site-footer__section--condensed": "this.isCondensed", "class.ecl-site-footer__section--site-info": "this.isSiteInfo", "class.ecl-site-footer__section--split-list": "this.isSplitList", "class.ecl-site-footer__section--separator": "this.hasSeparator" } }, usesInheritance: true, ngImport: i0165 });
+    this.ɵdir = i0165.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclSiteFooterSectionDirective, selector: "[eclSiteFooterSection]", inputs: { isCondensed: ["isCondensed", "isCondensed", booleanAttribute38], isSiteInfo: ["isSiteInfo", "isSiteInfo", booleanAttribute38], isSplitList: ["isSplitList", "isSplitList", booleanAttribute38], hasSeparator: ["hasSeparator", "hasSeparator", booleanAttribute38] }, host: { properties: { "class.ecl-site-footer__section": "this.cmpClass", "class.ecl-site-footer__section--condensed": "this.isCondensed", "class.ecl-site-footer__section--site-info": "this.isSiteInfo", "class.ecl-site-footer__section--split-list": "this.isSplitList", "class.ecl-site-footer__section--separator": "this.hasSeparator" } }, usesInheritance: true, ngImport: i0165 });
   }
 };
 i0165.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0165, type: EclSiteFooterSectionDirective, decorators: [{
@@ -13469,19 +13489,19 @@ i0165.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: ["class.ecl-site-footer__section"]
 }], isCondensed: [{
   type: Input73,
-  args: [{ transform: booleanAttribute36 }]
+  args: [{ transform: booleanAttribute38 }]
 }, {
   type: HostBinding115,
   args: ["class.ecl-site-footer__section--condensed"]
 }], isSiteInfo: [{
   type: Input73,
-  args: [{ transform: booleanAttribute36 }]
+  args: [{ transform: booleanAttribute38 }]
 }, {
   type: HostBinding115,
   args: ["class.ecl-site-footer__section--site-info"]
 }], isSplitList: [{
   type: Input73,
-  args: [{ transform: booleanAttribute36 }]
+  args: [{ transform: booleanAttribute38 }]
 }, {
   type: HostBinding115,
   args: ["class.ecl-site-footer__section--split-list"]
@@ -13490,11 +13510,11 @@ i0165.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: ["class.ecl-site-footer__section--separator"]
 }, {
   type: Input73,
-  args: [{ transform: booleanAttribute36 }]
+  args: [{ transform: booleanAttribute38 }]
 }] } });
 
 // lib/components/ecl-site-footer/ecl-footer-elements/ecl-site-footer-title.directive.mjs
-import { Directive as Directive44, HostBinding as HostBinding116, Input as Input74, booleanAttribute as booleanAttribute37 } from "@angular/core";
+import { Directive as Directive44, HostBinding as HostBinding116, Input as Input74, booleanAttribute as booleanAttribute39 } from "@angular/core";
 import * as i0166 from "@angular/core";
 var EclSiteFooterTitleDirective = class _EclSiteFooterTitleDirective extends ECLBaseDirective {
   constructor() {
@@ -13506,7 +13526,7 @@ var EclSiteFooterTitleDirective = class _EclSiteFooterTitleDirective extends ECL
     this.ɵfac = i0166.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0166, type: _EclSiteFooterTitleDirective, deps: null, target: i0166.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0166.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclSiteFooterTitleDirective, selector: "[eclSiteFooterTitle]", inputs: { isSeparator: ["isSeparator", "isSeparator", booleanAttribute37] }, host: { properties: { "class.ecl-site-footer__title": "this.cmpClass", "class.ecl-site-footer__title--separator": "this.isSeparator" } }, usesInheritance: true, ngImport: i0166 });
+    this.ɵdir = i0166.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclSiteFooterTitleDirective, selector: "[eclSiteFooterTitle]", inputs: { isSeparator: ["isSeparator", "isSeparator", booleanAttribute39] }, host: { properties: { "class.ecl-site-footer__title": "this.cmpClass", "class.ecl-site-footer__title--separator": "this.isSeparator" } }, usesInheritance: true, ngImport: i0166 });
   }
 };
 i0166.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0166, type: EclSiteFooterTitleDirective, decorators: [{
@@ -13519,7 +13539,7 @@ i0166.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: ["class.ecl-site-footer__title"]
 }], isSeparator: [{
   type: Input74,
-  args: [{ transform: booleanAttribute37 }]
+  args: [{ transform: booleanAttribute39 }]
 }, {
   type: HostBinding116,
   args: ["class.ecl-site-footer__title--separator"]
@@ -13572,7 +13592,7 @@ i0167.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-site-footer/ecl-footer-elements/ecl-site-footer-list.directive.mjs
-import { Directive as Directive46, HostBinding as HostBinding118, Input as Input75, booleanAttribute as booleanAttribute38 } from "@angular/core";
+import { Directive as Directive46, HostBinding as HostBinding118, Input as Input75, booleanAttribute as booleanAttribute40 } from "@angular/core";
 import * as i0168 from "@angular/core";
 var EclSiteFooterListDirective = class _EclSiteFooterListDirective extends ECLBaseDirective {
   constructor() {
@@ -13583,7 +13603,7 @@ var EclSiteFooterListDirective = class _EclSiteFooterListDirective extends ECLBa
     this.ɵfac = i0168.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0168, type: _EclSiteFooterListDirective, deps: null, target: i0168.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0168.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclSiteFooterListDirective, selector: "[eclSiteFooterList]", inputs: { isInline: ["isInline", "isInline", booleanAttribute38], isColumns: ["isColumns", "isColumns", booleanAttribute38] }, host: { properties: { "class.ecl-site-footer__list": "this.cmpClass", "class.ecl-site-footer__list--inline": "this.isInline", "class.ecl-site-footer__list--columns": "this.isColumns" } }, usesInheritance: true, ngImport: i0168 });
+    this.ɵdir = i0168.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclSiteFooterListDirective, selector: "[eclSiteFooterList]", inputs: { isInline: ["isInline", "isInline", booleanAttribute40], isColumns: ["isColumns", "isColumns", booleanAttribute40] }, host: { properties: { "class.ecl-site-footer__list": "this.cmpClass", "class.ecl-site-footer__list--inline": "this.isInline", "class.ecl-site-footer__list--columns": "this.isColumns" } }, usesInheritance: true, ngImport: i0168 });
   }
 };
 i0168.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0168, type: EclSiteFooterListDirective, decorators: [{
@@ -13596,13 +13616,13 @@ i0168.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: ["class.ecl-site-footer__list"]
 }], isInline: [{
   type: Input75,
-  args: [{ transform: booleanAttribute38 }]
+  args: [{ transform: booleanAttribute40 }]
 }, {
   type: HostBinding118,
   args: ["class.ecl-site-footer__list--inline"]
 }], isColumns: [{
   type: Input75,
-  args: [{ transform: booleanAttribute38 }]
+  args: [{ transform: booleanAttribute40 }]
 }, {
   type: HostBinding118,
   args: ["class.ecl-site-footer__list--columns"]
@@ -13848,10 +13868,10 @@ i0170.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-site-footer/ecl-footer-elements/ec/ecl-site-footer-fixed-content.mjs
-import { Component as Component78, Input as Input76, booleanAttribute as booleanAttribute39 } from "@angular/core";
+import { Component as Component78, Input as Input76, booleanAttribute as booleanAttribute41 } from "@angular/core";
 import * as i0171 from "@angular/core";
-import * as i126 from "@ngx-translate/core";
-import * as i32 from "@angular/common";
+import * as i123 from "@ngx-translate/core";
+import * as i3 from "@angular/common";
 var EclSiteFooterFixedContentECComponent = class _EclSiteFooterFixedContentECComponent extends ECLBaseDirective {
   constructor(translateService, eclLanguageService) {
     super();
@@ -13860,10 +13880,10 @@ var EclSiteFooterFixedContentECComponent = class _EclSiteFooterFixedContentECCom
     this.isCore = false;
   }
   static {
-    this.ɵfac = i0171.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0171, type: _EclSiteFooterFixedContentECComponent, deps: [{ token: i126.TranslateService }, { token: EclLanguageService }], target: i0171.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0171.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0171, type: _EclSiteFooterFixedContentECComponent, deps: [{ token: i123.TranslateService }, { token: EclLanguageService }], target: i0171.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0171.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclSiteFooterFixedContentECComponent, selector: "ecl-site-footer-fixed-content-ec", inputs: { isCore: ["isCore", "isCore", booleanAttribute39], languageCode: "languageCode", ecLogoLanguageCode: "ecLogoLanguageCode", content: "content" }, usesInheritance: true, ngImport: i0171, template: `@if(isCore){
+    this.ɵcmp = i0171.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclSiteFooterFixedContentECComponent, selector: "ecl-site-footer-fixed-content-ec", inputs: { isCore: ["isCore", "isCore", booleanAttribute41], languageCode: "languageCode", ecLogoLanguageCode: "ecLogoLanguageCode", content: "content" }, usesInheritance: true, ngImport: i0171, template: `@if(isCore){
     <div eclSiteFooterRow>
         <div eclSiteFooterColumn>
             <div eclSiteFooterSection>
@@ -14306,7 +14326,7 @@ var EclSiteFooterFixedContentECComponent = class _EclSiteFooterFixedContentECCom
         </div>
     </div>
 }
-`, dependencies: [{ kind: "directive", type: i32.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclSiteFooterSectionDirective, selector: "[eclSiteFooterSection]", inputs: ["isCondensed", "isSiteInfo", "isSplitList", "hasSeparator"] }, { kind: "directive", type: 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: i126.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclSiteFooterSectionDirective, selector: "[eclSiteFooterSection]", inputs: ["isCondensed", "isSiteInfo", "isSplitList", "hasSeparator"] }, { kind: "directive", type: EclSiteFooterListDirective, selector: "[eclSiteFooterList]", inputs: ["isInline", "isColumns"] }, { kind: "directive", type: EclSiteFooterLinkDirective, selector: "[eclSiteFooterLink]" }, { kind: "directive", type: EclSiteFooterColumnDirective, selector: "[eclSiteFooterColumn]" }, { kind: "directive", type: EclSiteFooterListItemDirective, selector: "[eclSiteFooterListItem]" }, { kind: "directive", type: EclSiteFooterRowDirective, selector: "[eclSiteFooterRow]" }, { kind: "directive", type: EclSiteFooterLogoLinkDirective, selector: "[eclSiteFooterLogoLink]" }, { kind: "directive", type: EclSiteFooterPictureDirective, selector: "picture[eclSiteFooterPicture]" }, { kind: "directive", type: EclSiteFooterLogoImageDirective, selector: "img[eclSiteFooterLogoImage]" }, { kind: "pipe", type: i123.TranslatePipe, name: "translate" }] });
   }
 };
 i0171.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0171, type: EclSiteFooterFixedContentECComponent, decorators: [{
@@ -14755,9 +14775,9 @@ i0171.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
     </div>
 }
 ` }]
-}], ctorParameters: () => [{ type: i126.TranslateService }, { type: EclLanguageService }], propDecorators: { isCore: [{
+}], ctorParameters: () => [{ type: i123.TranslateService }, { type: EclLanguageService }], propDecorators: { isCore: [{
   type: Input76,
-  args: [{ transform: booleanAttribute39 }]
+  args: [{ transform: booleanAttribute41 }]
 }], languageCode: [{
   type: Input76
 }], ecLogoLanguageCode: [{
@@ -14767,10 +14787,10 @@ i0171.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-site-footer/ecl-footer-elements/eu/ecl-site-footer-fixed-content.mjs
-import { Component as Component79, Input as Input77, booleanAttribute as booleanAttribute40 } from "@angular/core";
+import { Component as Component79, Input as Input77, booleanAttribute as booleanAttribute42 } from "@angular/core";
 import * as i0172 from "@angular/core";
-import * as i127 from "@ngx-translate/core";
-import * as i33 from "@angular/common";
+import * as i124 from "@ngx-translate/core";
+import * as i32 from "@angular/common";
 var EclSiteFooterFixedContentEUComponent = class _EclSiteFooterFixedContentEUComponent extends ECLBaseDirective {
   constructor(translateService, eclLanguageService) {
     super();
@@ -14788,10 +14808,10 @@ var EclSiteFooterFixedContentEUComponent = class _EclSiteFooterFixedContentEUCom
     }
   }
   static {
-    this.ɵfac = i0172.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0172, type: _EclSiteFooterFixedContentEUComponent, deps: [{ token: i127.TranslateService }, { token: EclLanguageService }], target: i0172.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0172.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0172, type: _EclSiteFooterFixedContentEUComponent, deps: [{ token: i124.TranslateService }, { token: EclLanguageService }], target: i0172.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0172.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclSiteFooterFixedContentEUComponent, selector: "ecl-site-footer-fixed-content-eu", inputs: { isCore: ["isCore", "isCore", booleanAttribute40], languageCode: "languageCode", ecLogoLanguageCode: "ecLogoLanguageCode", content: "content" }, usesInheritance: true, ngImport: i0172, template: `@if(isCore){
+    this.ɵcmp = i0172.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclSiteFooterFixedContentEUComponent, selector: "ecl-site-footer-fixed-content-eu", inputs: { isCore: ["isCore", "isCore", booleanAttribute42], languageCode: "languageCode", ecLogoLanguageCode: "ecLogoLanguageCode", content: "content" }, usesInheritance: true, ngImport: i0172, template: `@if(isCore){
     <div eclSiteFooterRow>
         <div eclSiteFooterColumn>
             <div eclSiteFooterSection>
@@ -15444,7 +15464,7 @@ var EclSiteFooterFixedContentEUComponent = class _EclSiteFooterFixedContentEUCom
         </div>
     </div>
 }
-`, dependencies: [{ kind: "directive", type: i33.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclSiteFooterSectionDirective, selector: "[eclSiteFooterSection]", inputs: ["isCondensed", "isSiteInfo", "isSplitList", "hasSeparator"] }, { kind: "directive", type: EclSiteFooterTitleDirective, selector: "[eclSiteFooterTitle]", inputs: ["isSeparator"] }, { kind: "directive", type: EclSiteFooterListDirective, selector: "[eclSiteFooterList]", inputs: ["isInline", "isColumns"] }, { kind: "directive", type: EclSiteFooterLinkDirective, selector: "[eclSiteFooterLink]" }, { kind: "directive", type: EclSiteFooterColumnDirective, selector: "[eclSiteFooterColumn]" }, { kind: "directive", type: EclSiteFooterListItemDirective, selector: "[eclSiteFooterListItem]" }, { kind: "directive", type: EclSiteFooterRowDirective, selector: "[eclSiteFooterRow]" }, { kind: "directive", type: EclSiteFooterLogoLinkDirective, selector: "[eclSiteFooterLogoLink]" }, { kind: "directive", type: EclSiteFooterPictureDirective, selector: "picture[eclSiteFooterPicture]" }, { kind: "directive", type: EclSiteFooterLogoImageDirective, selector: "img[eclSiteFooterLogoImage]" }, { kind: "pipe", type: i127.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "directive", type: i32.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclSiteFooterSectionDirective, selector: "[eclSiteFooterSection]", inputs: ["isCondensed", "isSiteInfo", "isSplitList", "hasSeparator"] }, { kind: "directive", type: EclSiteFooterTitleDirective, selector: "[eclSiteFooterTitle]", inputs: ["isSeparator"] }, { kind: "directive", type: EclSiteFooterListDirective, selector: "[eclSiteFooterList]", inputs: ["isInline", "isColumns"] }, { kind: "directive", type: EclSiteFooterLinkDirective, selector: "[eclSiteFooterLink]" }, { kind: "directive", type: EclSiteFooterColumnDirective, selector: "[eclSiteFooterColumn]" }, { kind: "directive", type: EclSiteFooterListItemDirective, selector: "[eclSiteFooterListItem]" }, { kind: "directive", type: EclSiteFooterRowDirective, selector: "[eclSiteFooterRow]" }, { kind: "directive", type: EclSiteFooterLogoLinkDirective, selector: "[eclSiteFooterLogoLink]" }, { kind: "directive", type: EclSiteFooterPictureDirective, selector: "picture[eclSiteFooterPicture]" }, { kind: "directive", type: EclSiteFooterLogoImageDirective, selector: "img[eclSiteFooterLogoImage]" }, { kind: "pipe", type: i124.TranslatePipe, name: "translate" }] });
   }
 };
 i0172.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0172, type: EclSiteFooterFixedContentEUComponent, decorators: [{
@@ -16103,9 +16123,9 @@ i0172.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
     </div>
 }
 ` }]
-}], ctorParameters: () => [{ type: i127.TranslateService }, { type: EclLanguageService }], propDecorators: { isCore: [{
+}], ctorParameters: () => [{ type: i124.TranslateService }, { type: EclLanguageService }], propDecorators: { isCore: [{
   type: Input77,
-  args: [{ transform: booleanAttribute40 }]
+  args: [{ transform: booleanAttribute42 }]
 }], languageCode: [{
   type: Input77
 }], ecLogoLanguageCode: [{
@@ -16115,10 +16135,10 @@ i0172.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-site-footer/ecl-site-footer.component.mjs
-import { Component as Component80, HostBinding as HostBinding121, Input as Input78, booleanAttribute as booleanAttribute41 } from "@angular/core";
+import { Component as Component80, HostBinding as HostBinding121, Input as Input78, booleanAttribute as booleanAttribute43 } from "@angular/core";
 import * as i0173 from "@angular/core";
-import * as i128 from "@ngx-translate/core";
-import * as i56 from "@angular/common";
+import * as i125 from "@ngx-translate/core";
+import * as i58 from "@angular/common";
 var EclSiteFooterComponent = class _EclSiteFooterComponent extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-site-footer"), this.isCore ? "ecl-site-footer--split-columns" : ""].join(" ").trim();
@@ -16144,18 +16164,18 @@ var EclSiteFooterComponent = class _EclSiteFooterComponent extends ECLBaseDirect
     });
   }
   static {
-    this.ɵfac = i0173.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0173, type: _EclSiteFooterComponent, deps: [{ token: i128.TranslateService }, { token: EclLanguageService }, { token: EclThemeService }], target: i0173.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0173.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0173, type: _EclSiteFooterComponent, deps: [{ token: i125.TranslateService }, { token: EclLanguageService }, { token: EclThemeService }], target: i0173.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0173.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclSiteFooterComponent, selector: "ecl-site-footer", inputs: { isCore: ["isCore", "isCore", booleanAttribute41] }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0173, template: '<div class="ecl-container ecl-site-footer__container">\n    @if(eclThemeService.isEC$ | async) {\n    <ecl-site-footer-fixed-content-ec\n        [isCore]="isCore"\n        [languageCode]="languageCode"\n        [ecLogoLanguageCode]="getLanguageCode()"\n        [content]="content">\n    </ecl-site-footer-fixed-content-ec>\n    }\n    @if(eclThemeService.isEU$ | async) {\n        <ecl-site-footer-fixed-content-eu\n            [isCore]="isCore"\n            [languageCode]="languageCode"\n            [ecLogoLanguageCode]="getLanguageCode()"\n            [content]="content">\n        </ecl-site-footer-fixed-content-eu>\n    }\n\n    <ng-template #content>\n        <ng-content></ng-content>\n    </ng-template>\n</div>\n', dependencies: [{ 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: i56.AsyncPipe, name: "async" }] });
+    this.ɵcmp = i0173.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclSiteFooterComponent, selector: "ecl-site-footer", inputs: { isCore: ["isCore", "isCore", booleanAttribute43] }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0173, template: '<div class="ecl-container ecl-site-footer__container">\n    @if(eclThemeService.isEC$ | async) {\n    <ecl-site-footer-fixed-content-ec\n        [isCore]="isCore"\n        [languageCode]="languageCode"\n        [ecLogoLanguageCode]="getLanguageCode()"\n        [content]="content">\n    </ecl-site-footer-fixed-content-ec>\n    }\n    @if(eclThemeService.isEU$ | async) {\n        <ecl-site-footer-fixed-content-eu\n            [isCore]="isCore"\n            [languageCode]="languageCode"\n            [ecLogoLanguageCode]="getLanguageCode()"\n            [content]="content">\n        </ecl-site-footer-fixed-content-eu>\n    }\n\n    <ng-template #content>\n        <ng-content></ng-content>\n    </ng-template>\n</div>\n', dependencies: [{ 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: i58.AsyncPipe, name: "async" }] });
   }
 };
 i0173.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0173, type: EclSiteFooterComponent, decorators: [{
   type: Component80,
   args: [{ selector: "ecl-site-footer", template: '<div class="ecl-container ecl-site-footer__container">\n    @if(eclThemeService.isEC$ | async) {\n    <ecl-site-footer-fixed-content-ec\n        [isCore]="isCore"\n        [languageCode]="languageCode"\n        [ecLogoLanguageCode]="getLanguageCode()"\n        [content]="content">\n    </ecl-site-footer-fixed-content-ec>\n    }\n    @if(eclThemeService.isEU$ | async) {\n        <ecl-site-footer-fixed-content-eu\n            [isCore]="isCore"\n            [languageCode]="languageCode"\n            [ecLogoLanguageCode]="getLanguageCode()"\n            [content]="content">\n        </ecl-site-footer-fixed-content-eu>\n    }\n\n    <ng-template #content>\n        <ng-content></ng-content>\n    </ng-template>\n</div>\n' }]
-}], ctorParameters: () => [{ type: i128.TranslateService }, { type: EclLanguageService }, { type: EclThemeService }], propDecorators: { isCore: [{
+}], ctorParameters: () => [{ type: i125.TranslateService }, { type: EclLanguageService }, { type: EclThemeService }], propDecorators: { isCore: [{
   type: Input78,
-  args: [{ transform: booleanAttribute41 }]
+  args: [{ transform: booleanAttribute43 }]
 }], cssClasses: [{
   type: HostBinding121,
   args: ["class"]
@@ -16367,7 +16387,7 @@ i0176.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-page-header/ecl-page-header-title.directive.mjs
-import { Directive as Directive50, HostBinding as HostBinding123, Input as Input79, booleanAttribute as booleanAttribute42 } from "@angular/core";
+import { Directive as Directive50, HostBinding as HostBinding123, Input as Input79, booleanAttribute as booleanAttribute44 } from "@angular/core";
 import * as i0177 from "@angular/core";
 var EclPageHeaderTitleDirective = class _EclPageHeaderTitleDirective extends ECLBaseDirective {
   constructor() {
@@ -16381,7 +16401,7 @@ var EclPageHeaderTitleDirective = class _EclPageHeaderTitleDirective extends ECL
     this.ɵfac = i0177.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0177, type: _EclPageHeaderTitleDirective, deps: null, target: i0177.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0177.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclPageHeaderTitleDirective, selector: "[eclPageHeaderTitle]", inputs: { isTitleVisible: ["isTitleVisible", "isTitleVisible", booleanAttribute42] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0177 });
+    this.ɵdir = i0177.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclPageHeaderTitleDirective, selector: "[eclPageHeaderTitle]", inputs: { isTitleVisible: ["isTitleVisible", "isTitleVisible", booleanAttribute44] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0177 });
   }
 };
 i0177.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0177, type: EclPageHeaderTitleDirective, decorators: [{
@@ -16391,7 +16411,7 @@ i0177.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   }]
 }], propDecorators: { isTitleVisible: [{
   type: Input79,
-  args: [{ transform: booleanAttribute42 }]
+  args: [{ transform: booleanAttribute44 }]
 }], cssClasses: [{
   type: HostBinding123,
   args: ["class"]
@@ -16492,7 +16512,7 @@ i0179.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 // lib/components/ecl-page-header/ecl-page-header.component.mjs
 import { Component as Component81, ContentChild as ContentChild22, HostBinding as HostBinding126, Input as Input80 } from "@angular/core";
 import * as i0180 from "@angular/core";
-import * as i129 from "@angular/common";
+import * as i126 from "@angular/common";
 var EclPageHeaderComponent = class _EclPageHeaderComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -16521,7 +16541,7 @@ var EclPageHeaderComponent = class _EclPageHeaderComponent extends ECLBaseDirect
     this.ɵfac = i0180.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0180, type: _EclPageHeaderComponent, deps: null, target: i0180.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0180.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", 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: i0180, 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: i129.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    this.ɵcmp = i0180.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", 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: i0180, 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: i126.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
   }
 };
 i0180.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0180, type: EclPageHeaderComponent, decorators: [{
@@ -16627,10 +16647,10 @@ i0182.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] });
 
 // lib/components/ecl-pagination/ecl-pagination-item.component.mjs
-import { Component as Component82, EventEmitter as EventEmitter37, HostBinding as HostBinding128, Input as Input81, Output as Output37, ViewEncapsulation as ViewEncapsulation11, booleanAttribute as booleanAttribute43 } from "@angular/core";
+import { Component as Component82, EventEmitter as EventEmitter37, HostBinding as HostBinding128, Input as Input81, Output as Output37, ViewEncapsulation as ViewEncapsulation11, booleanAttribute as booleanAttribute45 } from "@angular/core";
 import * as i0183 from "@angular/core";
-import * as i216 from "@angular/router";
-import * as i64 from "@ngx-translate/core";
+import * as i212 from "@angular/router";
+import * as i63 from "@ngx-translate/core";
 var EclPaginationItemClickEvent = class extends EclBaseEvent {
 };
 var EclPaginationItemComponent = class _EclPaginationItemComponent extends ECLBaseDirective {
@@ -16688,7 +16708,7 @@ var EclPaginationItemComponent = class _EclPaginationItemComponent extends ECLBa
     this.ɵfac = i0183.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0183, type: _EclPaginationItemComponent, deps: [{ token: EclThemeService }], target: i0183.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0183.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: { label: "label", ariaLabel: "ariaLabel", pagesCount: "pagesCount", isCurrent: ["isCurrent", "isCurrent", booleanAttribute43], isNext: ["isNext", "isNext", booleanAttribute43], isPrevious: ["isPrevious", "isPrevious", booleanAttribute43], isTruncated: ["isTruncated", "isTruncated", booleanAttribute43], 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: i0183, template: `@if (!isCurrent && !isTruncated) {
+    this.ɵcmp = i0183.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: { label: "label", ariaLabel: "ariaLabel", pagesCount: "pagesCount", isCurrent: ["isCurrent", "isCurrent", booleanAttribute45], isNext: ["isNext", "isNext", booleanAttribute45], isPrevious: ["isPrevious", "isPrevious", booleanAttribute45], isTruncated: ["isTruncated", "isTruncated", booleanAttribute45], 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: i0183, template: `@if (!isCurrent && !isTruncated) {
     @if(routerLink && !isPrevOrNextVisible()){
         <a  eclLink (click)="onPageClick($event)" variant="standalone"
            attr.aria-label="{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}"
@@ -16748,7 +16768,7 @@ var EclPaginationItemComponent = class _EclPaginationItemComponent extends ECLBa
             }
     </span>
 }
-`, dependencies: [{ 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]" }, { kind: "pipe", type: i64.TranslatePipe, name: "translate" }], encapsulation: i0183.ViewEncapsulation.None });
+`, dependencies: [{ kind: "directive", type: i212.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i63.TranslatePipe, name: "translate" }], encapsulation: i0183.ViewEncapsulation.None });
   }
 };
 i0183.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0183, type: EclPaginationItemComponent, decorators: [{
@@ -16828,16 +16848,16 @@ i0183.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Input81
 }], isCurrent: [{
   type: Input81,
-  args: [{ transform: booleanAttribute43 }]
+  args: [{ transform: booleanAttribute45 }]
 }], isNext: [{
   type: Input81,
-  args: [{ transform: booleanAttribute43 }]
+  args: [{ transform: booleanAttribute45 }]
 }], isPrevious: [{
   type: Input81,
-  args: [{ transform: booleanAttribute43 }]
+  args: [{ transform: booleanAttribute45 }]
 }], isTruncated: [{
   type: Input81,
-  args: [{ transform: booleanAttribute43 }]
+  args: [{ transform: booleanAttribute45 }]
 }, {
   type: HostBinding128,
   args: ["class.ecl-pagination__item--truncation"]
@@ -16857,7 +16877,6 @@ i0183.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 import { Component as Component83, EventEmitter as EventEmitter38, HostBinding as HostBinding129, Input as Input82, Output as Output38, numberAttribute as numberAttribute8 } from "@angular/core";
 import { DefaultConfig, EuiPagination } from "@eui/base";
 import * as i0184 from "@angular/core";
-import * as i130 from "@angular/common";
 var EclPaginationEvent = class extends EclBaseEvent {
   constructor(page, showingFrom, showingTo) {
     super();
@@ -16919,12 +16938,12 @@ var EclPaginationComponent = class _EclPaginationComponent extends ECLBaseDirect
     this.ɵfac = i0184.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0184, type: _EclPaginationComponent, deps: null, target: i0184.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0184.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", 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: i0184, 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: i130.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"] }] });
+    this.ɵcmp = i0184.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", 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: i0184, 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        @for (page of model.getPages(); track page) {\n            <ecl-pagination-item\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\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: "component", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: ["label", "ariaLabel", "pagesCount", "isCurrent", "isNext", "isPrevious", "isTruncated", "routerLink", "queryParams", "queryParamsHandling", "href"], outputs: ["pageClick"] }] });
   }
 };
 i0184.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0184, type: EclPaginationComponent, decorators: [{
   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"] }]
+  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        @for (page of model.getPages(); track page) {\n            <ecl-pagination-item\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\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: Input82
 }], totalItems: [{
@@ -17306,7 +17325,7 @@ i0189.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] });
 
 // lib/components/ecl-radio/ecl-radio-help.component.mjs
-import { Component as Component85, HostBinding as HostBinding133, Input as Input83, booleanAttribute as booleanAttribute44 } from "@angular/core";
+import { Component as Component85, HostBinding as HostBinding133, Input as Input83, booleanAttribute as booleanAttribute46 } from "@angular/core";
 import * as i0190 from "@angular/core";
 var EclRadioHelpComponent = class _EclRadioHelpComponent extends ECLBaseDirective {
   constructor() {
@@ -17320,7 +17339,7 @@ var EclRadioHelpComponent = class _EclRadioHelpComponent extends ECLBaseDirectiv
     this.ɵfac = i0190.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0190, type: _EclRadioHelpComponent, deps: null, target: i0190.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0190.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclRadioHelpComponent, selector: "[eclRadioHelp]", inputs: { isDisabled: ["isDisabled", "isDisabled", booleanAttribute44] }, host: { properties: { "class.ecl-radio__help--disabled": "this.isDisabled", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0190, template: "<ng-content></ng-content>\n" });
+    this.ɵcmp = i0190.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclRadioHelpComponent, selector: "[eclRadioHelp]", inputs: { isDisabled: ["isDisabled", "isDisabled", booleanAttribute46] }, host: { properties: { "class.ecl-radio__help--disabled": "this.isDisabled", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0190, template: "<ng-content></ng-content>\n" });
   }
 };
 i0190.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0190, type: EclRadioHelpComponent, decorators: [{
@@ -17328,7 +17347,7 @@ i0190.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: [{ selector: "[eclRadioHelp]", template: "<ng-content></ng-content>\n" }]
 }], propDecorators: { isDisabled: [{
   type: Input83,
-  args: [{ transform: booleanAttribute44 }]
+  args: [{ transform: booleanAttribute46 }]
 }, {
   type: HostBinding133,
   args: ["class.ecl-radio__help--disabled"]
@@ -17338,7 +17357,7 @@ i0190.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-radio/ecl-radio-label.component.mjs
-import { Component as Component86, HostBinding as HostBinding134, Input as Input84, ViewEncapsulation as ViewEncapsulation13, booleanAttribute as booleanAttribute45 } from "@angular/core";
+import { Component as Component86, HostBinding as HostBinding134, Input as Input84, ViewEncapsulation as ViewEncapsulation13, booleanAttribute as booleanAttribute47 } from "@angular/core";
 import * as i0191 from "@angular/core";
 var EclRadioLabelComponent = class _EclRadioLabelComponent extends ECLBaseDirective {
   constructor() {
@@ -17353,7 +17372,7 @@ var EclRadioLabelComponent = class _EclRadioLabelComponent extends ECLBaseDirect
     this.ɵfac = i0191.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0191, type: _EclRadioLabelComponent, deps: null, target: i0191.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0191.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclRadioLabelComponent, selector: "[eclRadioLabel]", inputs: { isInvalid: ["isInvalid", "isInvalid", booleanAttribute45], isDisabled: ["isDisabled", "isDisabled", booleanAttribute45] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0191, 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: i0191.ViewEncapsulation.None });
+    this.ɵcmp = i0191.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclRadioLabelComponent, selector: "[eclRadioLabel]", inputs: { isInvalid: ["isInvalid", "isInvalid", booleanAttribute47], isDisabled: ["isDisabled", "isDisabled", booleanAttribute47] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0191, 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: i0191.ViewEncapsulation.None });
   }
 };
 i0191.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0191, type: EclRadioLabelComponent, decorators: [{
@@ -17361,17 +17380,17 @@ i0191.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   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: Input84,
-  args: [{ transform: booleanAttribute45 }]
+  args: [{ transform: booleanAttribute47 }]
 }], isDisabled: [{
   type: Input84,
-  args: [{ transform: booleanAttribute45 }]
+  args: [{ transform: booleanAttribute47 }]
 }], cssClasses: [{
   type: HostBinding134,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-radio/ecl-radio.directive.mjs
-import { booleanAttribute as booleanAttribute46, ContentChild as ContentChild24, Directive as Directive56, forwardRef as forwardRef50, HostBinding as HostBinding135, Input as Input85 } from "@angular/core";
+import { booleanAttribute as booleanAttribute48, ContentChild as ContentChild24, Directive as Directive56, forwardRef as forwardRef50, HostBinding as HostBinding135, Input as Input85 } from "@angular/core";
 import * as i0192 from "@angular/core";
 var EclRadioDirective = class _EclRadioDirective extends ECLBaseDirective {
   constructor() {
@@ -17398,7 +17417,7 @@ var EclRadioDirective = class _EclRadioDirective extends ECLBaseDirective {
     this.ɵfac = i0192.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0192, type: _EclRadioDirective, deps: null, target: i0192.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0192.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclRadioDirective, selector: "[eclRadio]", inputs: { isBinary: ["isBinary", "isBinary", booleanAttribute46], isDisabled: ["isDisabled", "isDisabled", booleanAttribute46], isInvalid: ["isInvalid", "isInvalid", booleanAttribute46] }, host: { properties: { "class.ecl-radio--disabled": "this.isDisabled", "class.ecl-radio--invalid": "this.isInvalid", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclRadioLabelComponent", first: true, predicate: i0192.forwardRef(() => EclRadioLabelComponent), descendants: true }, { propertyName: "eclRadioHelpComponent", first: true, predicate: i0192.forwardRef(() => EclRadioHelpComponent), descendants: true }], usesInheritance: true, ngImport: i0192 });
+    this.ɵdir = i0192.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclRadioDirective, selector: "[eclRadio]", inputs: { isBinary: ["isBinary", "isBinary", booleanAttribute48], isDisabled: ["isDisabled", "isDisabled", booleanAttribute48], isInvalid: ["isInvalid", "isInvalid", booleanAttribute48] }, host: { properties: { "class.ecl-radio--disabled": "this.isDisabled", "class.ecl-radio--invalid": "this.isInvalid", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclRadioLabelComponent", first: true, predicate: i0192.forwardRef(() => EclRadioLabelComponent), descendants: true }, { propertyName: "eclRadioHelpComponent", first: true, predicate: i0192.forwardRef(() => EclRadioHelpComponent), descendants: true }], usesInheritance: true, ngImport: i0192 });
   }
 };
 i0192.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0192, type: EclRadioDirective, decorators: [{
@@ -17408,16 +17427,16 @@ i0192.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   }]
 }], propDecorators: { isBinary: [{
   type: Input85,
-  args: [{ transform: booleanAttribute46 }]
+  args: [{ transform: booleanAttribute48 }]
 }], isDisabled: [{
   type: Input85,
-  args: [{ transform: booleanAttribute46 }]
+  args: [{ transform: booleanAttribute48 }]
 }, {
   type: HostBinding135,
   args: ["class.ecl-radio--disabled"]
 }], isInvalid: [{
   type: Input85,
-  args: [{ transform: booleanAttribute46 }]
+  args: [{ transform: booleanAttribute48 }]
 }, {
   type: HostBinding135,
   args: ["class.ecl-radio--invalid"]
@@ -17435,7 +17454,7 @@ i0192.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 // lib/components/ecl-radio/ecl-radio-input.directive.mjs
 import { Directive as Directive57, HostBinding as HostBinding136, Optional as Optional6, Self as Self4, Inject as Inject5, forwardRef as forwardRef52 } from "@angular/core";
 import * as i0193 from "@angular/core";
-import * as i131 from "@angular/forms";
+import * as i127 from "@angular/forms";
 var EclRadioInputDirective = class _EclRadioInputDirective extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-radio__input")].join(" ").trim();
@@ -17455,7 +17474,7 @@ var EclRadioInputDirective = class _EclRadioInputDirective extends ECLBaseDirect
     }
   }
   static {
-    this.ɵfac = i0193.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0193, type: _EclRadioInputDirective, deps: [{ token: forwardRef52(() => EclRadioDirective) }, { token: i131.NgControl, optional: true, self: true }, { token: i0193.ChangeDetectorRef }], target: i0193.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0193.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0193, type: _EclRadioInputDirective, deps: [{ token: forwardRef52(() => EclRadioDirective) }, { token: i127.NgControl, optional: true, self: true }, { token: i0193.ChangeDetectorRef }], target: i0193.ɵɵFactoryTarget.Directive });
   }
   static {
     this.ɵdir = i0193.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.0", type: _EclRadioInputDirective, selector: "input[eclRadioInput]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0193 });
@@ -17469,7 +17488,7 @@ i0193.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }], ctorParameters: () => [{ type: EclRadioDirective, decorators: [{
   type: Inject5,
   args: [forwardRef52(() => EclRadioDirective)]
-}] }, { type: i131.NgControl, decorators: [{
+}] }, { type: i127.NgControl, decorators: [{
   type: Optional6
 }, {
   type: Self4
@@ -17503,7 +17522,7 @@ i0194.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] });
 
 // lib/components/ecl-rating-field/ecl-rating-field.component.mjs
-import { booleanAttribute as booleanAttribute47, Component as Component87, EventEmitter as EventEmitter40, forwardRef as forwardRef53, HostBinding as HostBinding137, Input as Input86, Output as Output40 } from "@angular/core";
+import { booleanAttribute as booleanAttribute49, Component as Component87, EventEmitter as EventEmitter40, forwardRef as forwardRef53, HostBinding as HostBinding137, Input as Input86, Output as Output40 } from "@angular/core";
 import { NG_VALUE_ACCESSOR as NG_VALUE_ACCESSOR6 } from "@angular/forms";
 import * as i0195 from "@angular/core";
 var EclRatingChangeEvent = class extends EclBaseEvent {
@@ -17559,7 +17578,7 @@ var EclRatingFieldComponent = class _EclRatingFieldComponent extends ECLBaseDire
     this.ɵfac = i0195.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0195, type: _EclRatingFieldComponent, deps: [], target: i0195.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0195.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclRatingFieldComponent, selector: "ecl-rating-field", inputs: { name: "name", numberOfStars: ["numberOfStars", "numberOfStars", booleanAttribute47], rating: ["rating", "rating", booleanAttribute47], disabled: ["disabled", "disabled", booleanAttribute47] }, outputs: { ratingChange: "ratingChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [ECL_RATINGFIELD_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0195, template: '@for(n of numbers;track n) {\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="l"> </ecl-icon>\n        <ecl-icon icon="star-outline" class="ecl-rating-field__icon-outline" size="l"> </ecl-icon>\n    </label>\n}\n', dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
+    this.ɵcmp = i0195.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclRatingFieldComponent, selector: "ecl-rating-field", inputs: { name: "name", numberOfStars: ["numberOfStars", "numberOfStars", booleanAttribute49], rating: ["rating", "rating", booleanAttribute49], disabled: ["disabled", "disabled", booleanAttribute49] }, outputs: { ratingChange: "ratingChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [ECL_RATINGFIELD_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0195, template: '@for(n of numbers;track n) {\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="l"> </ecl-icon>\n        <ecl-icon icon="star-outline" class="ecl-rating-field__icon-outline" size="l"> </ecl-icon>\n    </label>\n}\n', dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
   }
 };
 i0195.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0195, type: EclRatingFieldComponent, decorators: [{
@@ -17569,13 +17588,13 @@ i0195.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Input86
 }], numberOfStars: [{
   type: Input86,
-  args: [{ transform: booleanAttribute47 }]
+  args: [{ transform: booleanAttribute49 }]
 }], rating: [{
   type: Input86,
-  args: [{ transform: booleanAttribute47 }]
+  args: [{ transform: booleanAttribute49 }]
 }], disabled: [{
   type: Input86,
-  args: [{ transform: booleanAttribute47 }]
+  args: [{ transform: booleanAttribute49 }]
 }, {
   type: HostBinding137,
   args: ["attr.disabled"]
@@ -17614,7 +17633,7 @@ i0196.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 // lib/components/ecl-range/ecl-range-value.component.mjs
 import { Component as Component88, HostBinding as HostBinding138, Input as Input87 } from "@angular/core";
 import * as i0197 from "@angular/core";
-import * as i132 from "@ngx-translate/core";
+import * as i128 from "@ngx-translate/core";
 var EclRangeValueComponent = class _EclRangeValueComponent extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-range__value")].join(" ").trim();
@@ -17624,7 +17643,7 @@ var EclRangeValueComponent = class _EclRangeValueComponent extends ECLBaseDirect
   }
   static {
     this.ɵcmp = i0197.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.0", type: _EclRangeValueComponent, selector: "ecl-range-value", inputs: { value: "value" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0197, template: `{{ 'ecl.common.VALUE' | translate }}: <span class="ecl-range__value-current"> {{ value }} </span>
-`, styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: i132.TranslatePipe, name: "translate" }] });
+`, styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: i128.TranslatePipe, name: "translate" }] });
   }
 };
 i0197.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0197, type: EclRangeValueComponent, decorators: [{
@@ -17639,10 +17658,10 @@ i0197.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-range/ecl-range.directive.mjs
-import { Directive as Directive58, EventEmitter as EventEmitter41, HostBinding as HostBinding139, HostListener as HostListener21, Input as Input88, Optional as Optional7, Output as Output41, Self as Self5, booleanAttribute as booleanAttribute48 } from "@angular/core";
+import { Directive as Directive58, EventEmitter as EventEmitter41, HostBinding as HostBinding139, HostListener as HostListener21, Input as Input88, Optional as Optional7, Output as Output41, Self as Self5, booleanAttribute as booleanAttribute50 } from "@angular/core";
 import { distinctUntilChanged } from "rxjs";
 import * as i0198 from "@angular/core";
-import * as i133 from "@angular/forms";
+import * as i129 from "@angular/forms";
 var EclRangeEvent = class extends EclBaseEvent {
   constructor(value) {
     super();
@@ -17691,10 +17710,10 @@ var EclRangeDirective = class _EclRangeDirective extends ECLBaseDirective {
     this.rangeChange.next(new EclRangeEvent(numberValue));
   }
   static {
-    this.ɵfac = i0198.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0198, type: _EclRangeDirective, deps: [{ token: i0198.ViewContainerRef }, { token: i133.NgControl, optional: true, self: true }], target: i0198.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0198.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0198, type: _EclRangeDirective, deps: [{ token: i0198.ViewContainerRef }, { token: i129.NgControl, optional: true, self: true }], target: i0198.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0198.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclRangeDirective, selector: "input[eclRange]", inputs: { eclSize: "eclSize", value: "value", hasValueLabel: ["hasValueLabel", "hasValueLabel", booleanAttribute48] }, outputs: { rangeChange: "rangeChange" }, host: { listeners: { "input": "onInput($event)" }, properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0198 });
+    this.ɵdir = i0198.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclRangeDirective, selector: "input[eclRange]", inputs: { eclSize: "eclSize", value: "value", hasValueLabel: ["hasValueLabel", "hasValueLabel", booleanAttribute50] }, outputs: { rangeChange: "rangeChange" }, host: { listeners: { "input": "onInput($event)" }, properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0198 });
   }
 };
 i0198.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0198, type: EclRangeDirective, decorators: [{
@@ -17702,7 +17721,7 @@ i0198.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: [{
     selector: "input[eclRange]"
   }]
-}], ctorParameters: () => [{ type: i0198.ViewContainerRef }, { type: i133.NgControl, decorators: [{
+}], ctorParameters: () => [{ type: i0198.ViewContainerRef }, { type: i129.NgControl, decorators: [{
   type: Optional7
 }, {
   type: Self5
@@ -17712,7 +17731,7 @@ i0198.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Input88
 }], hasValueLabel: [{
   type: Input88,
-  args: [{ transform: booleanAttribute48 }]
+  args: [{ transform: booleanAttribute50 }]
 }], rangeChange: [{
   type: Output41
 }], cssClasses: [{
@@ -17750,9 +17769,9 @@ i0199.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] });
 
 // lib/components/ecl-select/ecl-select-container.component.mjs
-import { Component as Component89, HostBinding as HostBinding140, Input as Input89, booleanAttribute as booleanAttribute49 } from "@angular/core";
+import { Component as Component89, HostBinding as HostBinding140, Input as Input89, booleanAttribute as booleanAttribute51 } from "@angular/core";
 import * as i0200 from "@angular/core";
-import * as i57 from "@ngx-translate/core";
+import * as i59 from "@ngx-translate/core";
 var EclSelectContainerComponent = class _EclSelectContainerComponent extends ECLBaseDirective {
   get cssClasses() {
     return [
@@ -17780,13 +17799,13 @@ var EclSelectContainerComponent = class _EclSelectContainerComponent extends ECL
     this.ɵfac = i0200.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0200, type: _EclSelectContainerComponent, deps: [{ token: EclThemeService }], target: i0200.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0200.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclSelectContainerComponent, selector: "ecl-select-container", inputs: { eclSize: "eclSize", disabled: ["disabled", "disabled", booleanAttribute49], isInvalid: ["isInvalid", "isInvalid", booleanAttribute49] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0200, template: `<div class="ecl-select__icon">
+    this.ɵcmp = i0200.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclSelectContainerComponent, selector: "ecl-select-container", inputs: { eclSize: "eclSize", disabled: ["disabled", "disabled", booleanAttribute51], isInvalid: ["isInvalid", "isInvalid", booleanAttribute51] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0200, template: `<div class="ecl-select__icon">
     <button eclButton variant="ghost" isIconOnly>
         <span eclButtonLabel>{{ 'ecl.multiselect.TOGGLE.DROPDOWN' | translate }}</span>
         <ecl-icon icon="corner-arrow" [size]="iconSize" transform="rotate-180"></ecl-icon>
     </button>
 </div>
-`, dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "pipe", type: i57.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "pipe", type: i59.TranslatePipe, name: "translate" }] });
   }
 };
 i0200.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0200, type: EclSelectContainerComponent, decorators: [{
@@ -17802,19 +17821,19 @@ i0200.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Input89
 }], disabled: [{
   type: Input89,
-  args: [{ transform: booleanAttribute49 }]
+  args: [{ transform: booleanAttribute51 }]
 }], isInvalid: [{
   type: Input89,
-  args: [{ transform: booleanAttribute49 }]
+  args: [{ transform: booleanAttribute51 }]
 }], cssClasses: [{
   type: HostBinding140,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-select/ecl-select.directive.mjs
-import { Directive as Directive59, HostBinding as HostBinding141, Input as Input90, Optional as Optional8, Self as Self6, booleanAttribute as booleanAttribute50 } from "@angular/core";
+import { Directive as Directive59, HostBinding as HostBinding141, Input as Input90, Optional as Optional8, Self as Self6, booleanAttribute as booleanAttribute52 } from "@angular/core";
 import * as i0201 from "@angular/core";
-import * as i134 from "@angular/forms";
+import * as i130 from "@angular/forms";
 var EclSelectDirective = class _EclSelectDirective extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-select")].join(" ").trim();
@@ -17856,10 +17875,10 @@ var EclSelectDirective = class _EclSelectDirective extends ECLBaseDirective {
     this.containerComponent.isInvalid = this.isInvalidState;
   }
   static {
-    this.ɵfac = i0201.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0201, type: _EclSelectDirective, deps: [{ token: i134.NgControl, optional: true, self: true }, { token: i0201.ElementRef }, { token: i0201.ViewContainerRef }], target: i0201.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0201.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0201, type: _EclSelectDirective, deps: [{ token: i130.NgControl, optional: true, self: true }, { token: i0201.ElementRef }, { token: i0201.ViewContainerRef }], target: i0201.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0201.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclSelectDirective, selector: "select[eclSelect]", inputs: { disabled: ["disabled", "disabled", booleanAttribute50], isInvalid: ["isInvalid", "isInvalid", booleanAttribute50], eclSize: "eclSize" }, host: { properties: { "attr.disabled": "this.isDisabled", "class": "this.cssClasses", "class.ecl-select--invalid": "this.isInvalidState" } }, usesInheritance: true, ngImport: i0201 });
+    this.ɵdir = i0201.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclSelectDirective, selector: "select[eclSelect]", inputs: { disabled: ["disabled", "disabled", booleanAttribute52], isInvalid: ["isInvalid", "isInvalid", booleanAttribute52], eclSize: "eclSize" }, host: { properties: { "attr.disabled": "this.isDisabled", "class": "this.cssClasses", "class.ecl-select--invalid": "this.isInvalidState" } }, usesInheritance: true, ngImport: i0201 });
   }
 };
 i0201.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0201, type: EclSelectDirective, decorators: [{
@@ -17867,19 +17886,19 @@ i0201.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: [{
     selector: "select[eclSelect]"
   }]
-}], ctorParameters: () => [{ type: i134.NgControl, decorators: [{
+}], ctorParameters: () => [{ type: i130.NgControl, decorators: [{
   type: Optional8
 }, {
   type: Self6
 }] }, { type: i0201.ElementRef }, { type: i0201.ViewContainerRef }], propDecorators: { disabled: [{
   type: Input90,
-  args: [{ transform: booleanAttribute50 }]
+  args: [{ transform: booleanAttribute52 }]
 }, {
   type: HostBinding141,
   args: ["attr.disabled"]
 }], isInvalid: [{
   type: Input90,
-  args: [{ transform: booleanAttribute50 }]
+  args: [{ transform: booleanAttribute52 }]
 }], eclSize: [{
   type: Input90
 }], cssClasses: [{
@@ -17920,9 +17939,8 @@ i0202.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] });
 
 // lib/components/ecl-social-media-follow/ecl-social-media-follow.component.mjs
-import { Component as Component90, HostBinding as HostBinding142, Input as Input91, booleanAttribute as booleanAttribute51 } from "@angular/core";
+import { Component as Component90, HostBinding as HostBinding142, Input as Input91, booleanAttribute as booleanAttribute53 } from "@angular/core";
 import * as i0203 from "@angular/core";
-import * as i135 from "@angular/common";
 var EclSocialMediaFollowComponent = class _EclSocialMediaFollowComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -17935,17 +17953,17 @@ var EclSocialMediaFollowComponent = class _EclSocialMediaFollowComponent extends
     this.ɵfac = i0203.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0203, type: _EclSocialMediaFollowComponent, deps: null, target: i0203.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0203.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclSocialMediaFollowComponent, selector: "ecl-social-media-follow", inputs: { description: "description", isVertical: ["isVertical", "isVertical", booleanAttribute51] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0203, 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: i135.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    this.ɵcmp = i0203.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclSocialMediaFollowComponent, selector: "ecl-social-media-follow", inputs: { description: "description", isVertical: ["isVertical", "isVertical", booleanAttribute53] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0203, template: '@if (description) {\n    <p class="ecl-social-media-follow__description">{{ description }}</p>\n}\n<ul class="ecl-social-media-follow__list">\n    <ng-content></ng-content>\n</ul>\n', styles: [":host{display:block}\n"] });
   }
 };
 i0203.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0203, type: EclSocialMediaFollowComponent, decorators: [{
   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"] }]
+  args: [{ selector: "ecl-social-media-follow", template: '@if (description) {\n    <p class="ecl-social-media-follow__description">{{ description }}</p>\n}\n<ul class="ecl-social-media-follow__list">\n    <ng-content></ng-content>\n</ul>\n', styles: [":host{display:block}\n"] }]
 }], propDecorators: { description: [{
   type: Input91
 }], isVertical: [{
   type: Input91,
-  args: [{ transform: booleanAttribute51 }]
+  args: [{ transform: booleanAttribute53 }]
 }], cssClasses: [{
   type: HostBinding142,
   args: ["class"]
@@ -17954,8 +17972,8 @@ i0203.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 // lib/components/ecl-social-media-follow/ecl-social-media-follow-item.component.mjs
 import { Component as Component91, EventEmitter as EventEmitter42, HostBinding as HostBinding143, Input as Input92, Output as Output42 } from "@angular/core";
 import * as i0204 from "@angular/core";
-import * as i136 from "@angular/common";
-import * as i217 from "@angular/router";
+import * as i131 from "@angular/common";
+import * as i213 from "@angular/router";
 var EclSocialMediaFollowItemClickEvent = class extends EclBaseEvent {
 };
 var EclSocialMediaFollowItemComponent = class _EclSocialMediaFollowItemComponent extends ECLBaseDirective {
@@ -17981,7 +17999,7 @@ var EclSocialMediaFollowItemComponent = class _EclSocialMediaFollowItemComponent
     this.ɵfac = i0204.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0204, type: _EclSocialMediaFollowItemComponent, deps: null, target: i0204.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0204.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", 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: i0204, 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: i136.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i217.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 = i0204.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", 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: i0204, template: '@if(href) {\n<a eclLink (click)="onItemClick($event)" variant="standalone" [href]="href" [attr.target]="target"\n    class="ecl-social-media-follow__link">\n    @if(icon) {\n    <ecl-icon [iconSet]="iconSet" icon="{{ icon }}" [size]="size" class="ecl-social-media-follow__icon"> </ecl-icon>\n    }\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n    </span>\n</a>\n}\n\n@if(!href && routerLink) {\n<a eclLink (click)="onItemClick($event)" variant="standalone" [routerLink]="routerLink" [attr.target]="target"\n    class="ecl-social-media-follow__link">\n    @if(icon) {\n    <ecl-icon [iconSet]="iconSet" icon="{{ icon }}" [size]="size" class="ecl-social-media-follow__icon"> </ecl-icon>\n    }\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n    </span>\n</a>\n}\n\n@if(!href && !routerLink) {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>', dependencies: [{ kind: "directive", type: i131.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i213.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }] });
   }
 };
 i0204.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0204, type: EclSocialMediaFollowItemComponent, decorators: [{
@@ -18068,9 +18086,7 @@ i0206.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] });
 
 // lib/components/ecl-social-media-share/ecl-social-media-share.component.mjs
-import { __decorate as __decorate4 } from "tslib";
-import { Component as Component92, HostBinding as HostBinding145, Input as Input93 } from "@angular/core";
-import { coerceBoolean as coerceBoolean3 } from "@eui/base";
+import { Component as Component92, HostBinding as HostBinding145, Input as Input93, booleanAttribute as booleanAttribute54 } from "@angular/core";
 import * as i0207 from "@angular/core";
 var EclSocialMediaShareComponent = class _EclSocialMediaShareComponent extends ECLBaseDirective {
   constructor() {
@@ -18084,19 +18100,17 @@ var EclSocialMediaShareComponent = class _EclSocialMediaShareComponent extends E
     this.ɵfac = i0207.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0207, type: _EclSocialMediaShareComponent, deps: null, target: i0207.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0207.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.0", type: _EclSocialMediaShareComponent, selector: "ecl-social-media-share", inputs: { description: "description", isVertical: "isVertical" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0207, 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"] });
+    this.ɵcmp = i0207.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclSocialMediaShareComponent, selector: "ecl-social-media-share", inputs: { description: "description", isVertical: ["isVertical", "isVertical", booleanAttribute54] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0207, 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"] });
   }
 };
-__decorate4([
-  coerceBoolean3
-], EclSocialMediaShareComponent.prototype, "isVertical", void 0);
 i0207.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0207, type: EclSocialMediaShareComponent, decorators: [{
   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: Input93
 }], isVertical: [{
-  type: Input93
+  type: Input93,
+  args: [{ transform: booleanAttribute54 }]
 }], cssClasses: [{
   type: HostBinding145,
   args: ["class"]
@@ -18105,7 +18119,7 @@ i0207.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 // lib/components/ecl-social-media-share/ecl-social-media-share-item.component.mjs
 import { Component as Component93, EventEmitter as EventEmitter43, HostBinding as HostBinding146, Input as Input94, Output as Output43 } from "@angular/core";
 import * as i0208 from "@angular/core";
-import * as i137 from "@angular/common";
+import * as i132 from "@angular/common";
 var EclSocialMediaShareItemClickEvent = class extends EclBaseEvent {
 };
 var EclSocialMediaShareItemComponent = class _EclSocialMediaShareItemComponent extends ECLBaseDirective {
@@ -18130,12 +18144,12 @@ var EclSocialMediaShareItemComponent = class _EclSocialMediaShareItemComponent e
     this.ɵfac = i0208.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0208, type: _EclSocialMediaShareItemComponent, deps: null, target: i0208.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0208.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.0", 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: i0208, 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: i137.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i137.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 = i0208.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", 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: i0208, template: '@if (href) {\n    <a\n        eclLink\n        (click)="onItemClick($event)"\n        variant="standalone"\n        [href]="href"\n        [attr.target]="target"\n        class="ecl-social-media-share__link">\n        @if (icon) {\n            <ecl-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@else {\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "directive", type: i132.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"] }] });
   }
 };
 i0208.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0208, type: EclSocialMediaShareItemComponent, decorators: [{
   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' }]
+  args: [{ selector: "ecl-social-media-share-item", template: '@if (href) {\n    <a\n        eclLink\n        (click)="onItemClick($event)"\n        variant="standalone"\n        [href]="href"\n        [attr.target]="target"\n        class="ecl-social-media-share__link">\n        @if (icon) {\n            <ecl-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@else {\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n' }]
 }], propDecorators: { role: [{
   type: HostBinding146,
   args: ["attr.role"]
@@ -18214,7 +18228,7 @@ i0210.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] });
 
 // lib/components/ecl-loading-indicator/ecl-loading-indicator.component.mjs
-import { Component as Component94, HostBinding as HostBinding148, Input as Input95, booleanAttribute as booleanAttribute52 } from "@angular/core";
+import { Component as Component94, HostBinding as HostBinding148, Input as Input95, booleanAttribute as booleanAttribute55 } from "@angular/core";
 import * as i0211 from "@angular/core";
 var EclLoadingIndicatorComponent = class _EclLoadingIndicatorComponent extends ECLBaseDirective {
   constructor() {
@@ -18237,7 +18251,7 @@ var EclLoadingIndicatorComponent = class _EclLoadingIndicatorComponent extends E
     this.ɵfac = i0211.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0211, type: _EclLoadingIndicatorComponent, deps: null, target: i0211.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0211.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclLoadingIndicatorComponent, selector: "ecl-loading-indicator", inputs: { size: "size", variant: "variant", isCentered: ["isCentered", "isCentered", booleanAttribute52], isVisible: ["isVisible", "isVisible", booleanAttribute52] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0211, 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 = i0211.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclLoadingIndicatorComponent, selector: "ecl-loading-indicator", inputs: { size: "size", variant: "variant", isCentered: ["isCentered", "isCentered", booleanAttribute55], isVisible: ["isVisible", "isVisible", booleanAttribute55] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0211, 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' });
   }
 };
 i0211.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0211, type: EclLoadingIndicatorComponent, decorators: [{
@@ -18252,10 +18266,10 @@ i0211.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Input95
 }], isCentered: [{
   type: Input95,
-  args: [{ transform: booleanAttribute52 }]
+  args: [{ transform: booleanAttribute55 }]
 }], isVisible: [{
   type: Input95,
-  args: [{ transform: booleanAttribute52 }]
+  args: [{ transform: booleanAttribute55 }]
 }] } });
 
 // lib/components/ecl-loading-indicator/ecl-loading-indicator-label.directive.mjs
@@ -18334,7 +18348,7 @@ i0214.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 // lib/components/ecl-table/ecl-table-sort-button.component.mjs
 import { Component as Component95, HostBinding as HostBinding151 } from "@angular/core";
 import * as i0215 from "@angular/core";
-import * as i34 from "@angular/common";
+import * as i33 from "@angular/common";
 var EclTableSortButtonComponent = class _EclTableSortButtonComponent extends ECLBaseDirective {
   constructor(eclThemeService) {
     super();
@@ -18350,7 +18364,7 @@ var EclTableSortButtonComponent = class _EclTableSortButtonComponent extends ECL
   static {
     this.ɵcmp = i0215.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.0", type: _EclTableSortButtonComponent, selector: "button[eclTableSortButton]", host: { properties: { "attr.aria-label": "this.ariaLabel", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0215, template: `<ecl-icon icon="solid-arrow" class="ecl-table__icon ecl-table__icon-up" [size]="(eclThemeService.isEC$ | async) ? 'xs' : 'm'"> </ecl-icon>
 <ecl-icon icon="solid-arrow" class="ecl-table__icon ecl-table__icon-down" [size]="(eclThemeService.isEC$ | async) ? 'xs' : 'm'"> </ecl-icon>
-`, dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i34.AsyncPipe, name: "async" }] });
+`, dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i33.AsyncPipe, name: "async" }] });
   }
 };
 i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0215, type: EclTableSortButtonComponent, decorators: [{
@@ -18367,7 +18381,7 @@ i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-table/ecl-table.directive.mjs
-import { ContentChildren as ContentChildren26, Directive as Directive64, EventEmitter as EventEmitter44, forwardRef as forwardRef54, HostBinding as HostBinding152, HostListener as HostListener22, Input as Input96, Output as Output44, booleanAttribute as booleanAttribute53 } from "@angular/core";
+import { ContentChildren as ContentChildren26, Directive as Directive64, EventEmitter as EventEmitter44, forwardRef as forwardRef54, HostBinding as HostBinding152, HostListener as HostListener22, Input as Input96, Output as Output44, booleanAttribute as booleanAttribute56 } from "@angular/core";
 import { Subject as Subject28 } from "rxjs";
 import { takeUntil as takeUntil25 } from "rxjs/operators";
 import * as i0216 from "@angular/core";
@@ -18413,7 +18427,7 @@ var EclTableDirective = class _EclTableDirective extends ECLBaseDirective {
     this.ɵfac = i0216.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0216, type: _EclTableDirective, deps: [{ token: i0216.IterableDiffers }], target: i0216.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0216.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclTableDirective, selector: "[eclTable]", inputs: { isZebra: ["isZebra", "isZebra", booleanAttribute53] }, outputs: { sort: "sort" }, host: { properties: { "class.ecl-table--zebra": "this.isZebra", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclTableHeaders", predicate: i0216.forwardRef(() => EclTableHeaderDirective), descendants: true }], usesInheritance: true, ngImport: i0216 });
+    this.ɵdir = i0216.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclTableDirective, selector: "[eclTable]", inputs: { isZebra: ["isZebra", "isZebra", booleanAttribute56] }, outputs: { sort: "sort" }, host: { properties: { "class.ecl-table--zebra": "this.isZebra", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclTableHeaders", predicate: i0216.forwardRef(() => EclTableHeaderDirective), descendants: true }], usesInheritance: true, ngImport: i0216 });
   }
 };
 i0216.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0216, type: EclTableDirective, decorators: [{
@@ -18423,7 +18437,7 @@ i0216.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   }]
 }], ctorParameters: () => [{ type: i0216.IterableDiffers }], propDecorators: { isZebra: [{
   type: Input96,
-  args: [{ transform: booleanAttribute53 }]
+  args: [{ transform: booleanAttribute56 }]
 }, {
   type: HostBinding152,
   args: ["class.ecl-table--zebra"]
@@ -18759,7 +18773,7 @@ i0218.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }], ctorParameters: () => [{ type: i0218.ElementRef }] });
 
 // lib/components/ecl-tabs/ecl-tab.component.mjs
-import { Component as Component97, ContentChild as ContentChild27, EventEmitter as EventEmitter45, HostBinding as HostBinding153, Input as Input97, Output as Output45, ViewChild as ViewChild16, booleanAttribute as booleanAttribute54 } from "@angular/core";
+import { Component as Component97, ContentChild as ContentChild27, EventEmitter as EventEmitter45, HostBinding as HostBinding153, Input as Input97, Output as Output45, ViewChild as ViewChild16, booleanAttribute as booleanAttribute57 } from "@angular/core";
 import * as i0219 from "@angular/core";
 var EclTabSelectEvent = class extends EclBaseEvent {
   constructor(tab) {
@@ -18813,7 +18827,7 @@ var EclTabComponent = class _EclTabComponent extends ECLBaseDirective {
     this.ɵfac = i0219.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0219, type: _EclTabComponent, deps: [{ token: i0219.ElementRef }], target: i0219.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0219.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclTabComponent, selector: "ecl-tab, [eclTab]", inputs: { id: "id", isHidden: ["isHidden", "isHidden", booleanAttribute54], isActive: ["isActive", "isActive", booleanAttribute54] }, 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: i0219, 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 = i0219.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclTabComponent, selector: "ecl-tab, [eclTab]", inputs: { id: "id", isHidden: ["isHidden", "isHidden", booleanAttribute57], isActive: ["isActive", "isActive", booleanAttribute57] }, 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: i0219, 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"] }] });
   }
 };
 i0219.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0219, type: EclTabComponent, decorators: [{
@@ -18823,13 +18837,13 @@ i0219.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Input97
 }], isHidden: [{
   type: Input97,
-  args: [{ transform: booleanAttribute54 }]
+  args: [{ transform: booleanAttribute57 }]
 }, {
   type: HostBinding153,
   args: ["class.ecl-tabs__item--hidden"]
 }], isActive: [{
   type: Input97,
-  args: [{ transform: booleanAttribute54 }]
+  args: [{ transform: booleanAttribute57 }]
 }], selectTab: [{
   type: Output45
 }], keydownTab: [{
@@ -18849,7 +18863,7 @@ i0219.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-tabs/ecl-tab-more.component.mjs
-import { Component as Component98, HostBinding as HostBinding154, Input as Input98, booleanAttribute as booleanAttribute55 } from "@angular/core";
+import { Component as Component98, HostBinding as HostBinding154, Input as Input98, booleanAttribute as booleanAttribute58 } from "@angular/core";
 import * as i0220 from "@angular/core";
 var EclTabMoreComponent = class _EclTabMoreComponent extends ECLBaseDirective {
   constructor() {
@@ -18863,7 +18877,7 @@ var EclTabMoreComponent = class _EclTabMoreComponent extends ECLBaseDirective {
     this.ɵfac = i0220.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0220, type: _EclTabMoreComponent, deps: null, target: i0220.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0220.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclTabMoreComponent, selector: "ecl-tab-more", inputs: { isHidden: ["isHidden", "isHidden", booleanAttribute55] }, host: { properties: { "class.ecl-tabs__item--hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0220, template: "<ng-content></ng-content>\n" });
+    this.ɵcmp = i0220.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclTabMoreComponent, selector: "ecl-tab-more", inputs: { isHidden: ["isHidden", "isHidden", booleanAttribute58] }, host: { properties: { "class.ecl-tabs__item--hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0220, template: "<ng-content></ng-content>\n" });
   }
 };
 i0220.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0220, type: EclTabMoreComponent, decorators: [{
@@ -18871,7 +18885,7 @@ i0220.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: [{ selector: "ecl-tab-more", template: "<ng-content></ng-content>\n" }]
 }], propDecorators: { isHidden: [{
   type: Input98,
-  args: [{ transform: booleanAttribute55 }]
+  args: [{ transform: booleanAttribute58 }]
 }, {
   type: HostBinding154,
   args: ["class.ecl-tabs__item--hidden"]
@@ -18885,8 +18899,8 @@ import { Component as Component99, ContentChildren as ContentChildren27, EventEm
 import { of as of4, Subject as Subject29 } from "rxjs";
 import { mergeWith as mergeWith3, takeUntil as takeUntil26 } from "rxjs/operators";
 import * as i0221 from "@angular/core";
-import * as i138 from "@angular/cdk/layout";
-import * as i35 from "@angular/common";
+import * as i133 from "@angular/cdk/layout";
+import * as i34 from "@angular/common";
 import * as i10 from "@ngx-translate/core";
 var ShiftDirection;
 (function(ShiftDirection2) {
@@ -19293,7 +19307,7 @@ var EclTabsComponent = class _EclTabsComponent extends ECLBaseDirective {
     this.index = 0;
   }
   static {
-    this.ɵfac = i0221.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0221, type: _EclTabsComponent, deps: [{ token: i0221.IterableDiffers }, { token: i138.BreakpointObserver }, { token: i0221.ChangeDetectorRef }, { token: i0221.ElementRef }, { token: EclRtlService }], target: i0221.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0221.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0221, type: _EclTabsComponent, deps: [{ token: i0221.IterableDiffers }, { token: i133.BreakpointObserver }, { token: i0221.ChangeDetectorRef }, { token: i0221.ElementRef }, { token: EclRtlService }], target: i0221.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i0221.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", 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: i0221.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: i0221, template: `<div class="ecl-tabs">
@@ -19310,14 +19324,14 @@ var EclTabsComponent = class _EclTabsComponent extends ECLBaseDirective {
                 @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">
+                        @for (tab of listTabs; track tab.id; 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()">
+                                     (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>
             }
@@ -19359,15 +19373,20 @@ var EclTabsComponent = class _EclTabsComponent extends ECLBaseDirective {
 </div>
 
 @for (tab of tabs.toArray(); track tab.tabLabel) {
-    <div class="{{ bodyClass }}" *ngIf="tab.isActive">
-        <ng-container *ngTemplateOutlet="tab.contentTemplate"></ng-container>
-    </div>
+    @if (tab.isActive) {
+        <div class="{{ bodyClass }}">
+            <ng-container *ngTemplateOutlet="tab.contentTemplate"></ng-container>
+        </div>
+    }
 }
 @for (tab of listTabs; track tab.tabLabel) {
-    <div class="{{ bodyClass }}" *ngIf="tab.isActive">
-        <ng-container *ngTemplateOutlet="tab.contentTemplate"></ng-container>
-    </div>
-}`, dependencies: [{ kind: "directive", type: i35.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i35.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i35.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclTabComponent, selector: "ecl-tab, [eclTab]", inputs: ["id", "isHidden", "isActive"], outputs: ["selectTab", "keydownTab"] }, { kind: "component", type: EclTabLabelComponent, selector: "ecl-tab-label" }, { kind: "component", type: EclTabMoreComponent, selector: "ecl-tab-more", inputs: ["isHidden"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], encapsulation: i0221.ViewEncapsulation.None });
+    @if (tab.isActive) {
+        <div class="{{ bodyClass }}">
+            <ng-container *ngTemplateOutlet="tab.contentTemplate"></ng-container>
+        </div>
+    }
+}
+`, dependencies: [{ kind: "directive", type: i34.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclTabComponent, selector: "ecl-tab, [eclTab]", inputs: ["id", "isHidden", "isActive"], outputs: ["selectTab", "keydownTab"] }, { kind: "component", type: EclTabLabelComponent, selector: "ecl-tab-label" }, { kind: "component", type: EclTabMoreComponent, selector: "ecl-tab-more", inputs: ["isHidden"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], encapsulation: i0221.ViewEncapsulation.None });
   }
 };
 i0221.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0221, type: EclTabsComponent, decorators: [{
@@ -19386,14 +19405,14 @@ i0221.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
                 @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">
+                        @for (tab of listTabs; track tab.id; 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()">
+                                     (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>
             }
@@ -19435,16 +19454,21 @@ i0221.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 </div>
 
 @for (tab of tabs.toArray(); track tab.tabLabel) {
-    <div class="{{ bodyClass }}" *ngIf="tab.isActive">
-        <ng-container *ngTemplateOutlet="tab.contentTemplate"></ng-container>
-    </div>
+    @if (tab.isActive) {
+        <div class="{{ bodyClass }}">
+            <ng-container *ngTemplateOutlet="tab.contentTemplate"></ng-container>
+        </div>
+    }
 }
 @for (tab of listTabs; track tab.tabLabel) {
-    <div class="{{ bodyClass }}" *ngIf="tab.isActive">
-        <ng-container *ngTemplateOutlet="tab.contentTemplate"></ng-container>
-    </div>
-}` }]
-}], ctorParameters: () => [{ type: i0221.IterableDiffers }, { type: i138.BreakpointObserver }, { type: i0221.ChangeDetectorRef }, { type: i0221.ElementRef }, { type: EclRtlService }], propDecorators: { bodyClass: [{
+    @if (tab.isActive) {
+        <div class="{{ bodyClass }}">
+            <ng-container *ngTemplateOutlet="tab.contentTemplate"></ng-container>
+        </div>
+    }
+}
+` }]
+}], ctorParameters: () => [{ type: i0221.IterableDiffers }, { type: i133.BreakpointObserver }, { type: i0221.ChangeDetectorRef }, { type: i0221.ElementRef }, { type: EclRtlService }], propDecorators: { bodyClass: [{
   type: Input99
 }], tabSelect: [{
   type: Output46
@@ -19521,9 +19545,9 @@ i0222.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] });
 
 // lib/components/ecl-tag/ecl-tag.component.mjs
-import { Component as Component100, Input as Input100, HostBinding as HostBinding155, Output as Output47, EventEmitter as EventEmitter47, booleanAttribute as booleanAttribute56 } from "@angular/core";
+import { Component as Component100, Input as Input100, HostBinding as HostBinding155, Output as Output47, EventEmitter as EventEmitter47, booleanAttribute as booleanAttribute59 } from "@angular/core";
 import * as i0223 from "@angular/core";
-import * as i218 from "@angular/common";
+import * as i214 from "@angular/common";
 var EclTagRemoveEvent = class extends EclBaseEvent {
 };
 var EclTagComponent = class _EclTagComponent extends ECLBaseDirective {
@@ -19558,7 +19582,7 @@ var EclTagComponent = class _EclTagComponent extends ECLBaseDirective {
     this.ɵfac = i0223.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0223, type: _EclTagComponent, deps: null, target: i0223.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0223.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclTagComponent, selector: "ecl-tag, [eclTag]", inputs: { variant: "variant", isWrapped: ["isWrapped", "isWrapped", booleanAttribute56] }, outputs: { remove: "remove" }, host: { properties: { "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0223, 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: i218.TitleCasePipe, name: "titlecase" }] });
+    this.ɵcmp = i0223.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclTagComponent, selector: "ecl-tag, [eclTag]", inputs: { variant: "variant", isWrapped: ["isWrapped", "isWrapped", booleanAttribute59] }, outputs: { remove: "remove" }, host: { properties: { "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0223, template: '<ng-content></ng-content>\n@if(isRemovable) {\n    <span class="ecl-tag__icon" (click)="onRemoveClick($event)">\n    <ecl-icon icon="close-outline" class="ecl-tag__icon-close" role="img">\n        <title>{{title | titlecase}}</title>\n    </ecl-icon>\n</span>\n}\n', dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i214.TitleCasePipe, name: "titlecase" }] });
   }
 };
 i0223.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0223, type: EclTagComponent, decorators: [{
@@ -19568,7 +19592,7 @@ i0223.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Input100
 }], isWrapped: [{
   type: Input100,
-  args: [{ transform: booleanAttribute56 }]
+  args: [{ transform: booleanAttribute59 }]
 }], remove: [{
   type: Output47
 }], isHidden: [{
@@ -19628,9 +19652,9 @@ i0225.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] });
 
 // lib/components/ecl-text-area/ecl-text-area.directive.mjs
-import { Directive as Directive66, HostBinding as HostBinding157, Input as Input101, Optional as Optional9, Self as Self7, booleanAttribute as booleanAttribute57 } from "@angular/core";
+import { Directive as Directive66, HostBinding as HostBinding157, Input as Input101, Optional as Optional9, Self as Self7, booleanAttribute as booleanAttribute60 } from "@angular/core";
 import * as i0226 from "@angular/core";
-import * as i139 from "@angular/forms";
+import * as i134 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();
@@ -19649,10 +19673,10 @@ var EclTextAreaDirective = class _EclTextAreaDirective extends ECLBaseDirective
     this.isInvalid = false;
   }
   static {
-    this.ɵfac = i0226.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0226, type: _EclTextAreaDirective, deps: [{ token: i139.NgControl, optional: true, self: true }], target: i0226.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0226.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0226, type: _EclTextAreaDirective, deps: [{ token: i134.NgControl, optional: true, self: true }], target: i0226.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0226.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclTextAreaDirective, selector: "textarea[eclTextArea]", inputs: { eclSize: "eclSize", isInvalid: ["isInvalid", "isInvalid", booleanAttribute57] }, host: { properties: { "class": "this.cssClasses", "class.ecl-text-area--invalid": "this.invalidState" } }, usesInheritance: true, ngImport: i0226 });
+    this.ɵdir = i0226.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: _EclTextAreaDirective, selector: "textarea[eclTextArea]", inputs: { eclSize: "eclSize", isInvalid: ["isInvalid", "isInvalid", booleanAttribute60] }, host: { properties: { "class": "this.cssClasses", "class.ecl-text-area--invalid": "this.invalidState" } }, usesInheritance: true, ngImport: i0226 });
   }
 };
 i0226.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0226, type: EclTextAreaDirective, decorators: [{
@@ -19660,7 +19684,7 @@ i0226.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   args: [{
     selector: "textarea[eclTextArea]"
   }]
-}], ctorParameters: () => [{ type: i139.NgControl, decorators: [{
+}], ctorParameters: () => [{ type: i134.NgControl, decorators: [{
   type: Optional9
 }, {
   type: Self7
@@ -19668,7 +19692,7 @@ i0226.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
   type: Input101
 }], isInvalid: [{
   type: Input101,
-  args: [{ transform: booleanAttribute57 }]
+  args: [{ transform: booleanAttribute60 }]
 }], cssClasses: [{
   type: HostBinding157,
   args: ["class"]
@@ -19778,14 +19802,12 @@ i0230.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
 }] } });
 
 // lib/components/ecl-timeline/ecl-timeline-item.component.mjs
-import { __decorate as __decorate5 } from "tslib";
-import { Component as Component102, Input as Input102, HostBinding as HostBinding160, ViewEncapsulation as ViewEncapsulation17, Output as Output49, EventEmitter as EventEmitter49, ContentChild as ContentChild28, forwardRef as forwardRef58 } from "@angular/core";
-import { coerceBoolean as coerceBoolean4 } from "@eui/base";
+import { Component as Component102, Input as Input102, HostBinding as HostBinding160, ViewEncapsulation as ViewEncapsulation17, Output as Output49, EventEmitter as EventEmitter49, ContentChild as ContentChild28, forwardRef as forwardRef58, booleanAttribute as booleanAttribute61 } from "@angular/core";
 import { Subject as Subject30 } from "rxjs";
 import { takeUntil as takeUntil27 } from "rxjs/operators";
 import * as i0231 from "@angular/core";
-import * as i140 from "@angular/common";
-import * as i58 from "@ngx-translate/core";
+import * as i135 from "@angular/common";
+import * as i510 from "@ngx-translate/core";
 var EclTimelineItemToggleEvent = class extends EclBaseEvent {
   constructor(isExpanded, toggleGroup) {
     super();
@@ -19843,95 +19865,99 @@ var EclTimelineItemComponent = class _EclTimelineItemComponent extends ECLBaseDi
     this.ɵfac = i0231.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0231, type: _EclTimelineItemComponent, deps: null, target: i0231.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0231.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.0", type: _EclTimelineItemComponent, selector: "ecl-timeline-item", inputs: { label: "label", eclTitle: "eclTitle", toggleButtonLabel: "toggleButtonLabel", expandLabel: "expandLabel", collapseLabel: "collapseLabel", isTogglerExpanded: "isTogglerExpanded", isCollapsed: "isCollapsed", isToggler: "isToggler", toggleGroup: "toggleGroup" }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses", "class.ecl-timeline__item--collapsed": "this.isCollapsed", "class.ecl-timeline__item--toggle": "this.isToggler" } }, queries: [{ propertyName: "timelineItemToggler", first: true, predicate: i0231.forwardRef(() => EclTimelineItemTogglerComponent), descendants: true }], usesInheritance: true, ngImport: i0231, template: `<div class="ecl-timeline__tooltip" *ngIf="!isToggler">
-    <div class="ecl-timeline__tooltip-arrow"></div>
-    <div *ngIf="label" class="ecl-timeline__label">{{ label }}</div>
-    <ng-content select="[eclTimelineItemLabel]"></ng-content>
+    this.ɵcmp = i0231.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EclTimelineItemComponent, selector: "ecl-timeline-item", inputs: { toggleButtonLabel: "toggleButtonLabel", expandLabel: "expandLabel", collapseLabel: "collapseLabel", isTogglerExpanded: ["isTogglerExpanded", "isTogglerExpanded", booleanAttribute61], isCollapsed: "isCollapsed", isToggler: "isToggler", toggleGroup: "toggleGroup" }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses", "class.ecl-timeline__item--collapsed": "this.isCollapsed", "class.ecl-timeline__item--toggle": "this.isToggler" } }, queries: [{ propertyName: "timelineItemToggler", first: true, predicate: i0231.forwardRef(() => EclTimelineItemTogglerComponent), descendants: true }], usesInheritance: true, ngImport: i0231, template: `@if (isToggler) {
+    <div class="ecl-timeline__content">
+        @if (hasDefaultToggler()) {
+            <button eclButton (click)="onTogglerClick($event)" variant="secondary">
+             @if (isShowExpandLabel) {
+                 <span eclButtonLabel> {{ expandLabel }} </span>
+             }
+             @if (isShowCollapseLabel) {
+                 <span eclButtonLabel> {{ collapseLabel }} </span>
+             }
+             @if (isShowOneToggleLabel) {
+                 <span eclButtonLabel> {{ toggleButtonLabel || 'ecl.timeline.TOGGLE-ITEMS' | translate }} </span>
+             }
+             <ecl-icon icon="corner-arrow" size="fluid" [transform]="!isTogglerExpanded ? 'rotate-180' : ''"></ecl-icon>
+            </button>
+        }
 
-    <div *ngIf="eclTitle" class="ecl-timeline__title">{{ eclTitle }}</div>
-    <ng-content select="[eclTimelineItemTitle]"></ng-content>
 
-    <div class="ecl-timeline__content">
+        <ng-content select="ecl-timeline-item-toggler"></ng-content>
+
         <ng-container *ngTemplateOutlet="content"></ng-container>
     </div>
-</div>
-
-<div class="ecl-timeline__content" *ngIf="isToggler">
-    <button eclButton *ngIf="hasDefaultToggler()" (click)="onTogglerClick($event)" variant="secondary">
-        <span eclButtonLabel *ngIf="isShowExpandLabel">
-            {{ expandLabel }}
-        </span>
-        <span eclButtonLabel *ngIf="isShowCollapseLabel">
-            {{ collapseLabel }}
-        </span>
-        <span eclButtonLabel *ngIf="isShowOneToggleLabel">
-            {{ toggleButtonLabel || 'ecl.timeline.TOGGLE-ITEMS' | translate }}
-        </span>
-        <ecl-icon icon="corner-arrow" size="fluid" [transform]="!isTogglerExpanded ? 'rotate-180' : ''"></ecl-icon>
-    </button>
+}
+@else {
+    <div class="ecl-timeline__tooltip">
+        <div class="ecl-timeline__tooltip-arrow"></div>
+        <ng-content select="[eclTimelineItemLabel]"></ng-content>
 
-    <ng-content select="ecl-timeline-item-toggler"></ng-content>
+        <ng-content select="[eclTimelineItemTitle]"></ng-content>
 
-    <ng-container *ngTemplateOutlet="content"></ng-container>
-</div>
+        <div class="ecl-timeline__content">
+            <ng-container *ngTemplateOutlet="content"></ng-container>
+        </div>
+    </div>
+}
 
 <ng-template #content>
     <ng-content></ng-content>
-</ng-template>`, styles: ["ecl-timeline-item{display:list-item}\n"], dependencies: [{ kind: "directive", type: i140.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i140.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: i58.TranslatePipe, name: "translate" }], encapsulation: i0231.ViewEncapsulation.None });
+</ng-template>
+`, styles: ["ecl-timeline-item{display:list-item}\n"], dependencies: [{ kind: "directive", type: i135.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: i510.TranslatePipe, name: "translate" }], encapsulation: i0231.ViewEncapsulation.None });
   }
 };
-__decorate5([
-  coerceBoolean4
-], EclTimelineItemComponent.prototype, "isTogglerExpanded", void 0);
 i0231.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0231, type: EclTimelineItemComponent, decorators: [{
   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>
-    <ng-content select="[eclTimelineItemLabel]"></ng-content>
+  args: [{ selector: "ecl-timeline-item", encapsulation: ViewEncapsulation17.None, template: `@if (isToggler) {
+    <div class="ecl-timeline__content">
+        @if (hasDefaultToggler()) {
+            <button eclButton (click)="onTogglerClick($event)" variant="secondary">
+             @if (isShowExpandLabel) {
+                 <span eclButtonLabel> {{ expandLabel }} </span>
+             }
+             @if (isShowCollapseLabel) {
+                 <span eclButtonLabel> {{ collapseLabel }} </span>
+             }
+             @if (isShowOneToggleLabel) {
+                 <span eclButtonLabel> {{ toggleButtonLabel || 'ecl.timeline.TOGGLE-ITEMS' | translate }} </span>
+             }
+             <ecl-icon icon="corner-arrow" size="fluid" [transform]="!isTogglerExpanded ? 'rotate-180' : ''"></ecl-icon>
+            </button>
+        }
 
-    <div *ngIf="eclTitle" class="ecl-timeline__title">{{ eclTitle }}</div>
-    <ng-content select="[eclTimelineItemTitle]"></ng-content>
 
-    <div class="ecl-timeline__content">
+        <ng-content select="ecl-timeline-item-toggler"></ng-content>
+
         <ng-container *ngTemplateOutlet="content"></ng-container>
     </div>
-</div>
-
-<div class="ecl-timeline__content" *ngIf="isToggler">
-    <button eclButton *ngIf="hasDefaultToggler()" (click)="onTogglerClick($event)" variant="secondary">
-        <span eclButtonLabel *ngIf="isShowExpandLabel">
-            {{ expandLabel }}
-        </span>
-        <span eclButtonLabel *ngIf="isShowCollapseLabel">
-            {{ collapseLabel }}
-        </span>
-        <span eclButtonLabel *ngIf="isShowOneToggleLabel">
-            {{ toggleButtonLabel || 'ecl.timeline.TOGGLE-ITEMS' | translate }}
-        </span>
-        <ecl-icon icon="corner-arrow" size="fluid" [transform]="!isTogglerExpanded ? 'rotate-180' : ''"></ecl-icon>
-    </button>
+}
+@else {
+    <div class="ecl-timeline__tooltip">
+        <div class="ecl-timeline__tooltip-arrow"></div>
+        <ng-content select="[eclTimelineItemLabel]"></ng-content>
 
-    <ng-content select="ecl-timeline-item-toggler"></ng-content>
+        <ng-content select="[eclTimelineItemTitle]"></ng-content>
 
-    <ng-container *ngTemplateOutlet="content"></ng-container>
-</div>
+        <div class="ecl-timeline__content">
+            <ng-container *ngTemplateOutlet="content"></ng-container>
+        </div>
+    </div>
+}
 
 <ng-template #content>
     <ng-content></ng-content>
-</ng-template>`, styles: ["ecl-timeline-item{display:list-item}\n"] }]
-}], propDecorators: { label: [{
-  type: Input102
-}], eclTitle: [{
-  type: Input102
-}], toggleButtonLabel: [{
+</ng-template>
+`, styles: ["ecl-timeline-item{display:list-item}\n"] }]
+}], propDecorators: { toggleButtonLabel: [{
   type: Input102
 }], expandLabel: [{
   type: Input102
 }], collapseLabel: [{
   type: Input102
 }], isTogglerExpanded: [{
-  type: Input102
+  type: Input102,
+  args: [{ transform: booleanAttribute61 }]
 }], cssClasses: [{
   type: HostBinding160,
   args: ["class"]