@eui/ecl 18.0.0-next.21 → 18.0.0-next.23

package/fesm2022/eui-ecl.mjs

@@ -511,7 +511,7 @@ var EclIconComponent = class _EclIconComponent extends ECLBaseDirective {
       if (this.svgEl) {
         const hostParentEl = this.svgEl.nativeElement.parentElement;
         if (hostParentEl) {
-          hostParentEl.removeChild(this.svgEl);
+          hostParentEl.removeChild(this.svgEl.nativeElement);
         }
       }
     } catch (e) {
@@ -588,7 +588,6 @@ i05.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3",
 import { ChangeDetectionStrategy, Component as Component2, EventEmitter, HostBinding as HostBinding3, Input as Input3, Output, booleanAttribute as booleanAttribute2 } from "@angular/core";
 import { v4 as uuidgen } from "uuid";
 import * as i06 from "@angular/core";
-import * as i22 from "@angular/common";
 var EclAccordionToggleEvent = class extends EclBaseEvent {
   constructor(isExpanded) {
     super();
@@ -629,7 +628,7 @@ var EclAccordionItemComponent = class _EclAccordionItemComponent {
     this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i06, type: _EclAccordionItemComponent, deps: [{ token: ECLBaseDirective }, { token: i06.ChangeDetectorRef }], target: i06.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i06.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclAccordionItemComponent, selector: "ecl-accordion-item", inputs: { label: "label", isExpanded: ["isExpanded", "isExpanded", booleanAttribute2] }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: ECLBaseDirective }], ngImport: i06, template: '<h3 class="ecl-accordion__title" [id]="titleId">\n    <button\n        type="button"\n        (click)="onItemClick($event)"\n        [attr.aria-expanded]="isExpanded"\n        class="ecl-accordion__toggle"\n        [class.ecl-accordion__toggle--active]="isActive"\n        [attr.aria-controls]="contentId">\n        <span class="ecl-accordion__toggle-flex">\n            <span class="ecl-accordion__toggle-title">{{ label }}</span>\n            <span class="ecl-accordion__toggle-indicator">\n                <ecl-icon *ngIf="!isExpanded" icon="plus" size="s" class="ecl-accordion__toggle-icon" [attr.aria-hidden]="!isExpanded">\n                </ecl-icon>\n                <ecl-icon *ngIf="isExpanded" icon="minus" size="s" class="ecl-accordion__toggle-icon" [attr.aria-hidden]="isExpanded">\n                </ecl-icon>\n            </span>\n        </span>\n    </button>\n</h3>\n<div class="ecl-accordion__content" [hidden]="!isExpanded" role="region" [attr.aria-labelledby]="titleId" [id]="contentId">\n    <ng-content></ng-content>\n</div>\n', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i22.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }], changeDetection: i06.ChangeDetectionStrategy.OnPush });
+    this.ɵcmp = i06.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclAccordionItemComponent, selector: "ecl-accordion-item", inputs: { label: "label", isExpanded: ["isExpanded", "isExpanded", booleanAttribute2] }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: ECLBaseDirective }], ngImport: i06, template: '<h3 class="ecl-accordion__title" [id]="titleId">\n    <button\n        type="button"\n        (click)="onItemClick($event)"\n        [attr.aria-expanded]="isExpanded"\n        class="ecl-accordion__toggle"\n        [class.ecl-accordion__toggle--active]="isActive"\n        [attr.aria-controls]="contentId">\n        <span class="ecl-accordion__toggle-flex">\n            <span class="ecl-accordion__toggle-title">{{ label }}</span>\n            <span class="ecl-accordion__toggle-indicator">\n                @if(!isExpanded) {\n                <ecl-icon icon="plus" size="s" class="ecl-accordion__toggle-icon" [attr.aria-hidden]="!isExpanded">\n                </ecl-icon>\n                } @else {\n                <ecl-icon icon="minus" size="s" class="ecl-accordion__toggle-icon" [attr.aria-hidden]="isExpanded">\n                </ecl-icon>\n                }\n            </span>\n        </span>\n    </button>\n</h3>\n<div class="ecl-accordion__content" [hidden]="!isExpanded" role="region" [attr.aria-labelledby]="titleId" [id]="contentId">\n    <ng-content></ng-content>\n</div>\n', styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }], changeDetection: i06.ChangeDetectionStrategy.OnPush });
   }
 };
 i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i06, type: EclAccordionItemComponent, decorators: [{
@@ -638,7 +637,7 @@ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3",
     {
       directive: ECLBaseDirective
     }
-  ], template: '<h3 class="ecl-accordion__title" [id]="titleId">\n    <button\n        type="button"\n        (click)="onItemClick($event)"\n        [attr.aria-expanded]="isExpanded"\n        class="ecl-accordion__toggle"\n        [class.ecl-accordion__toggle--active]="isActive"\n        [attr.aria-controls]="contentId">\n        <span class="ecl-accordion__toggle-flex">\n            <span class="ecl-accordion__toggle-title">{{ label }}</span>\n            <span class="ecl-accordion__toggle-indicator">\n                <ecl-icon *ngIf="!isExpanded" icon="plus" size="s" class="ecl-accordion__toggle-icon" [attr.aria-hidden]="!isExpanded">\n                </ecl-icon>\n                <ecl-icon *ngIf="isExpanded" icon="minus" size="s" class="ecl-accordion__toggle-icon" [attr.aria-hidden]="isExpanded">\n                </ecl-icon>\n            </span>\n        </span>\n    </button>\n</h3>\n<div class="ecl-accordion__content" [hidden]="!isExpanded" role="region" [attr.aria-labelledby]="titleId" [id]="contentId">\n    <ng-content></ng-content>\n</div>\n', styles: [":host{display:block}\n"] }]
+  ], template: '<h3 class="ecl-accordion__title" [id]="titleId">\n    <button\n        type="button"\n        (click)="onItemClick($event)"\n        [attr.aria-expanded]="isExpanded"\n        class="ecl-accordion__toggle"\n        [class.ecl-accordion__toggle--active]="isActive"\n        [attr.aria-controls]="contentId">\n        <span class="ecl-accordion__toggle-flex">\n            <span class="ecl-accordion__toggle-title">{{ label }}</span>\n            <span class="ecl-accordion__toggle-indicator">\n                @if(!isExpanded) {\n                <ecl-icon icon="plus" size="s" class="ecl-accordion__toggle-icon" [attr.aria-hidden]="!isExpanded">\n                </ecl-icon>\n                } @else {\n                <ecl-icon icon="minus" size="s" class="ecl-accordion__toggle-icon" [attr.aria-hidden]="isExpanded">\n                </ecl-icon>\n                }\n            </span>\n        </span>\n    </button>\n</h3>\n<div class="ecl-accordion__content" [hidden]="!isExpanded" role="region" [attr.aria-labelledby]="titleId" [id]="contentId">\n    <ng-content></ng-content>\n</div>\n', styles: [":host{display:block}\n"] }]
 }], ctorParameters: () => [{ type: ECLBaseDirective }, { type: i06.ChangeDetectorRef }], propDecorators: { cssClasses: [{
   type: HostBinding3,
   args: ["class"]
@@ -1023,7 +1022,7 @@ import { ChangeDetectionStrategy as ChangeDetectionStrategy5, Component as Compo
 import { coerceBoolean } from "@eui/base";
 import * as i016 from "@angular/core";
 import * as i13 from "@angular/common";
-import * as i23 from "@ngx-translate/core";
+import * as i22 from "@ngx-translate/core";
 var EclFormLabelComponent = class _EclFormLabelComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -1046,7 +1045,7 @@ var EclFormLabelComponent = class _EclFormLabelComponent extends ECLBaseDirectiv
     this.ɵcmp = i016.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclFormLabelComponent, selector: "[eclFormLabel]", inputs: { isOptional: "isOptional", isInvalid: "isInvalid", isDisabled: "isDisabled", isRequired: "isRequired" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i016, template: `<ng-content></ng-content>
 <span *ngIf="isOptional" class="ecl-form-label__optional"> ({{ 'ecl.form-label.OPTIONAL' | translate }})</span>
 <span *ngIf="isRequired" class="ecl-form-label__required">*</span>
-`, dependencies: [{ kind: "directive", type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i23.TranslatePipe, name: "translate" }], changeDetection: i016.ChangeDetectionStrategy.OnPush });
+`, dependencies: [{ kind: "directive", type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i22.TranslatePipe, name: "translate" }], changeDetection: i016.ChangeDetectionStrategy.OnPush });
   }
 };
 __decorate([
@@ -1169,13 +1168,13 @@ var EclLinkDirective = class _EclLinkDirective extends ECLBaseDirective {
     super();
     this.el = el;
     this.isInverted = false;
-    this.isHiddenLabel = false;
+    this.isIconOnly = false;
   }
   ngAfterContentInit() {
     if (this.eclIconComponents) {
       setTimeout(() => {
         this.eclIconComponents.forEach((icn) => {
-          icn.class = icn.class + " ecl-link__icon";
+          icn.class = icn.class ? icn.class + " ecl-link__icon" : "ecl-link__icon";
         });
       });
     }
@@ -1184,7 +1183,7 @@ var EclLinkDirective = class _EclLinkDirective extends ECLBaseDirective {
     this.ɵfac = i020.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i020, type: _EclLinkDirective, deps: [{ token: i020.ElementRef }], target: i020.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i020.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclLinkDirective, selector: "[eclLink]", inputs: { isInverted: ["isInverted", "isInverted", booleanAttribute4], isHiddenLabel: ["isHiddenLabel", "isHiddenLabel", booleanAttribute4], isNoVisited: ["isNoVisited", "isNoVisited", booleanAttribute4], variant: "variant" }, host: { properties: { "class": "this.cssClasses", "class.ecl-link--icon": "this.hasIcon", "class.ecl-link--no-visited": "this.isLinkNoVisited", "class.ecl-link--inverted": "this.isInverted", "class.ecl-link--icon-only": "this.isHiddenLabel" } }, queries: [{ propertyName: "eclIconComponents", predicate: i020.forwardRef(() => EclIconComponent) }], usesInheritance: true, ngImport: i020 });
+    this.ɵdir = i020.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclLinkDirective, selector: "[eclLink]", inputs: { isInverted: ["isInverted", "isInverted", booleanAttribute4], isIconOnly: ["isIconOnly", "isIconOnly", booleanAttribute4], isNoVisited: ["isNoVisited", "isNoVisited", booleanAttribute4], variant: "variant" }, host: { properties: { "class": "this.cssClasses", "class.ecl-link--icon": "this.hasIcon", "class.ecl-link--no-visited": "this.isLinkNoVisited", "class.ecl-link--inverted": "this.isInverted", "class.ecl-link--icon-only": "this.isIconOnly" } }, queries: [{ propertyName: "eclIconComponents", predicate: i020.forwardRef(() => EclIconComponent) }], usesInheritance: true, ngImport: i020 });
   }
 };
 i020.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i020, type: EclLinkDirective, decorators: [{
@@ -1207,7 +1206,7 @@ i020.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3"
 }, {
   type: HostBinding10,
   args: ["class.ecl-link--inverted"]
-}], isHiddenLabel: [{
+}], isIconOnly: [{
   type: Input7,
   args: [{ transform: booleanAttribute4 }]
 }, {
@@ -1779,7 +1778,7 @@ var EclSiteHeaderLanguagePopoverComponent = class _EclSiteHeaderLanguagePopoverC
         </ul>
     </div>
 </div>
-`, dependencies: [{ kind: "directive", type: i17.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i17.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isHiddenLabel", "isNoVisited", "variant"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "directive", type: i17.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i17.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
   }
 };
 i031.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i031, type: EclSiteHeaderLanguagePopoverComponent, decorators: [{
@@ -2399,7 +2398,7 @@ import { Component as Component15, ContentChild, EventEmitter as EventEmitter8,
 import { coerceElement as coerceElement2 } from "@eui/base";
 import { Subject as Subject6, takeUntil as takeUntil6 } from "rxjs";
 import * as i035 from "@angular/core";
-import * as i24 from "@ngx-translate/core";
+import * as i23 from "@ngx-translate/core";
 import * as i43 from "@angular/common";
 var EclSiteHeaderLogoClickEvent = class extends EclBaseEvent {
 };
@@ -2454,7 +2453,7 @@ var EclSiteHeaderComponent = class _EclSiteHeaderComponent extends ECLBaseDirect
     return this.eclLanguageService.getEULanguageOrFallback(this.languageCode).code;
   }
   static {
-    this.ɵfac = i035.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i035, type: _EclSiteHeaderComponent, deps: [{ token: EclLanguageService }, { token: i24.TranslateService }, { token: EclThemeService }], target: i035.ɵɵFactoryTarget.Component });
+    this.ɵfac = i035.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i035, type: _EclSiteHeaderComponent, deps: [{ token: EclLanguageService }, { token: i23.TranslateService }, { token: EclThemeService }], target: i035.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i035.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclSiteHeaderComponent, selector: "ecl-site-header", inputs: { logoUrl: "logoUrl", siteName: "siteName", languageCode: "languageCode" }, outputs: { logoClick: "logoClick", languageClick: "languageClick" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "eclLoginComponent", first: true, predicate: EclSiteHeaderLoginComponent, descendants: true }, { propertyName: "eclSearchComponent", first: true, predicate: EclSiteHeaderSearchComponent, descendants: true }, { propertyName: "eclLanguageComponent", first: true, predicate: EclSiteHeaderLanguageComponent, descendants: true }], viewQueries: [{ propertyName: "topContainerElement", first: true, predicate: ["topContainer"], descendants: true }], usesInheritance: true, ngImport: i035, template: `<div class="ecl-site-header__header">
@@ -2510,7 +2509,7 @@ var EclSiteHeaderComponent = class _EclSiteHeaderComponent extends ECLBaseDirect
 
 <!-- @deprecated language list is replaced with site header language  -->
 <ng-content select="ecl-language-list"></ng-content>
-`, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i43.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isHiddenLabel", "isNoVisited", "variant"] }, { kind: "pipe", type: i43.AsyncPipe, name: "async" }, { kind: "pipe", type: i24.TranslatePipe, name: "translate" }] });
+`, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i43.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "pipe", type: i43.AsyncPipe, name: "async" }, { kind: "pipe", type: i23.TranslatePipe, name: "translate" }] });
   }
 };
 __decorate5([
@@ -2572,7 +2571,7 @@ i035.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3"
 <!-- @deprecated language list is replaced with site header language  -->
 <ng-content select="ecl-language-list"></ng-content>
 `, styles: [":host{display:block}\n"] }]
-}], ctorParameters: () => [{ type: EclLanguageService }, { type: i24.TranslateService }, { type: EclThemeService }], propDecorators: { logoUrl: [{
+}], ctorParameters: () => [{ type: EclLanguageService }, { type: i23.TranslateService }, { type: EclThemeService }], propDecorators: { logoUrl: [{
   type: Input14
 }], cssClasses: [{
   type: HostBinding21,
@@ -3315,7 +3314,7 @@ i049.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3"
 import { Component as Component20, EventEmitter as EventEmitter10, HostBinding as HostBinding32, Input as Input17, Output as Output10, ViewEncapsulation as ViewEncapsulation3, booleanAttribute as booleanAttribute6 } from "@angular/core";
 import * as i050 from "@angular/core";
 import * as i112 from "@angular/common";
-import * as i25 from "@angular/router";
+import * as i24 from "@angular/router";
 var EclBreadcrumbSegmentClickEvent = class extends EclBaseEvent {
 };
 var EclBreadcrumbSegmentComponent = class _EclBreadcrumbSegmentComponent extends ECLBaseDirective {
@@ -3351,7 +3350,7 @@ var EclBreadcrumbSegmentComponent = class _EclBreadcrumbSegmentComponent extends
     this.ɵfac = i050.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i050, type: _EclBreadcrumbSegmentComponent, deps: [{ token: i050.ElementRef }], target: i050.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i050.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment", inputs: { routerLink: "routerLink", queryParams: "queryParams", href: "href", queryParamsHandling: "queryParamsHandling", isCurrentPage: ["isCurrentPage", "isCurrentPage", booleanAttribute6], isHidden: ["isHidden", "isHidden", booleanAttribute6] }, outputs: { segmentClick: "segmentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.role": "this.role", "attr.aria-hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i050, template: '@if (!isEllipsis) {\n@if (!isCurrentPage && href) {\n<a eclLink variant="standalone" [isNoVisited]="true" [href]="href" tabindex="0" (click)="onSegmentClick($event)"\n    class="ecl-breadcrumb__link">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</a>\n}\n@if (!isCurrentPage && !href) {\n<a eclLink [routerLink]="routerLink" [queryParams]="queryParams" [queryParamsHandling]="queryParamsHandling"\n    variant="standalone" [isNoVisited]="true" tabindex="0" (click)="onSegmentClick($event)"\n    class="ecl-breadcrumb__link">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</a>\n}\n} @else {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n}\n\n@if (isCurrentPage) {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n} @else {\n<ecl-icon role="presentation" icon="corner-arrow" ariaHidden="true" focusable="false" size="fluid"\n    class="ecl-breadcrumb__icon">\n</ecl-icon>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>', dependencies: [{ kind: "directive", type: i112.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i25.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isHiddenLabel", "isNoVisited", "variant"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }], encapsulation: i050.ViewEncapsulation.None });
+    this.ɵcmp = i050.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment", inputs: { routerLink: "routerLink", queryParams: "queryParams", href: "href", queryParamsHandling: "queryParamsHandling", isCurrentPage: ["isCurrentPage", "isCurrentPage", booleanAttribute6], isHidden: ["isHidden", "isHidden", booleanAttribute6] }, outputs: { segmentClick: "segmentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.role": "this.role", "attr.aria-hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i050, template: '@if (!isEllipsis) {\n@if (!isCurrentPage && href) {\n<a eclLink variant="standalone" [isNoVisited]="true" [href]="href" tabindex="0" (click)="onSegmentClick($event)"\n    class="ecl-breadcrumb__link">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</a>\n}\n@if (!isCurrentPage && !href) {\n<a eclLink [routerLink]="routerLink" [queryParams]="queryParams" [queryParamsHandling]="queryParamsHandling"\n    variant="standalone" [isNoVisited]="true" tabindex="0" (click)="onSegmentClick($event)"\n    class="ecl-breadcrumb__link">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</a>\n}\n} @else {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n}\n\n@if (isCurrentPage) {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n} @else {\n<ecl-icon role="presentation" icon="corner-arrow" ariaHidden="true" focusable="false" size="fluid"\n    class="ecl-breadcrumb__icon">\n</ecl-icon>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>', dependencies: [{ kind: "directive", type: i112.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i24.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }], encapsulation: i050.ViewEncapsulation.None });
   }
 };
 i050.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i050, type: EclBreadcrumbSegmentComponent, decorators: [{
@@ -5107,7 +5106,7 @@ i065.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3"
 // lib/components/ecl-category-filter/ecl-category-filter-list/ecl-category-filter-item.component.mjs
 import { Component as Component28, ContentChild as ContentChild7, EventEmitter as EventEmitter13, forwardRef as forwardRef21, HostBinding as HostBinding43, Input as Input22, Output as Output13 } from "@angular/core";
 import * as i066 from "@angular/core";
-import * as i26 from "@angular/common";
+import * as i25 from "@angular/common";
 var EclCategoryFilterItemComponent = class _EclCategoryFilterItemComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -5166,7 +5165,7 @@ var EclCategoryFilterItemComponent = class _EclCategoryFilterItemComponent exten
     this.ɵfac = i066.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i066, type: _EclCategoryFilterItemComponent, deps: null, target: i066.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i066.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclCategoryFilterItemComponent, selector: "ecl-category-filter-item", inputs: { href: "href", id: "id" }, outputs: { itemSelect: "itemSelect" }, host: { properties: { "class.ecl-category-filter__list-item": "this.className", "attr.role": "this.role", "class.ecl-category-filter__list-item--open": "this.isAriaExpanded" } }, queries: [{ propertyName: "eclCategoryList", first: true, predicate: i066.forwardRef(() => EclCategoryFilterListComponent), descendants: true }], usesInheritance: true, ngImport: i066, template: '@if (hasChildren) {\n    <button\n        class="ecl-category-filter__item {{ levelClass }}"\n        [class.ecl-category-filter__item--has-children]="hasChildren"\n        [class.ecl-category-filter__item--current]="isCurrent"\n        [attr.aria-current]="isCurrent ? true : null"\n        [attr.aria-expanded] = "isExpanded"\n        [attr.aria-controls]="id"\n        (click)="onItemClick($event)">\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n        @if(isChildItemWithChildren) {\n            <ecl-icon icon="solid-arrow" size="xs" transform="rotate-90" class="ecl-category-filter__item-icon"> </ecl-icon>\n        }\n        @if(isRootItemWithChildren) {\n            <ecl-icon icon="corner-arrow" size="xs" transform="rotate-180" class="ecl-category-filter__item-icon"> </ecl-icon>\n        }\n    </button>\n} @else {\n    <a\n        [href]="href"\n        class="ecl-category-filter__item {{ levelClass }}"\n        [class.ecl-category-filter__item--has-children]="hasChildren"\n        (click)="onItemClick($event)">\n        @if(isChildItemWithChildren) {\n            <ecl-icon icon="solid-arrow" size="xs" transform="rotate-90" class="ecl-category-filter__item-icon"> </ecl-icon>\n        }\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n        @if(isRootItemWithChildren) {\n            <ecl-icon icon="corner-arrow" size="xs" transform="rotate-180" class="ecl-category-filter__item-icon"> </ecl-icon>\n        }\n    </a>\n}\n<ng-content select="ecl-category-filter-list"></ng-content>\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: i26.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    this.ɵcmp = i066.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclCategoryFilterItemComponent, selector: "ecl-category-filter-item", inputs: { href: "href", id: "id" }, outputs: { itemSelect: "itemSelect" }, host: { properties: { "class.ecl-category-filter__list-item": "this.className", "attr.role": "this.role", "class.ecl-category-filter__list-item--open": "this.isAriaExpanded" } }, queries: [{ propertyName: "eclCategoryList", first: true, predicate: i066.forwardRef(() => EclCategoryFilterListComponent), descendants: true }], usesInheritance: true, ngImport: i066, template: '@if (hasChildren) {\n    <button\n        class="ecl-category-filter__item {{ levelClass }}"\n        [class.ecl-category-filter__item--has-children]="hasChildren"\n        [class.ecl-category-filter__item--current]="isCurrent"\n        [attr.aria-current]="isCurrent ? true : null"\n        [attr.aria-expanded] = "isExpanded"\n        [attr.aria-controls]="id"\n        (click)="onItemClick($event)">\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n        @if(isChildItemWithChildren) {\n            <ecl-icon icon="solid-arrow" size="xs" transform="rotate-90" class="ecl-category-filter__item-icon"> </ecl-icon>\n        }\n        @if(isRootItemWithChildren) {\n            <ecl-icon icon="corner-arrow" size="xs" transform="rotate-180" class="ecl-category-filter__item-icon"> </ecl-icon>\n        }\n    </button>\n} @else {\n    <a\n        [href]="href"\n        class="ecl-category-filter__item {{ levelClass }}"\n        [class.ecl-category-filter__item--has-children]="hasChildren"\n        (click)="onItemClick($event)">\n        @if(isChildItemWithChildren) {\n            <ecl-icon icon="solid-arrow" size="xs" transform="rotate-90" class="ecl-category-filter__item-icon"> </ecl-icon>\n        }\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n        @if(isRootItemWithChildren) {\n            <ecl-icon icon="corner-arrow" size="xs" transform="rotate-180" class="ecl-category-filter__item-icon"> </ecl-icon>\n        }\n    </a>\n}\n<ng-content select="ecl-category-filter-list"></ng-content>\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: i25.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
   }
 };
 i066.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i066, type: EclCategoryFilterItemComponent, decorators: [{
@@ -5653,7 +5652,7 @@ import { formatDate } from "@angular/common";
 import { Component as Component32, Input as Input29, HostBinding as HostBinding51 } from "@angular/core";
 import * as i076 from "@angular/core";
 import * as i116 from "@ngx-translate/core";
-import * as i27 from "@angular/common";
+import * as i26 from "@angular/common";
 var EclDateBlockComponent = class _EclDateBlockComponent extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-date-block"), this.variant ? `ecl-date-block--${this.variant}` : ""].join(" ").trim();
@@ -5693,7 +5692,7 @@ var EclDateBlockComponent = class _EclDateBlockComponent extends ECLBaseDirectiv
     {{ month || (date | date: 'MMM' : '' : locale) }}
 </abbr>
 <span class="ecl-date-block__year" aria-hidden="true">{{ year || (date | date: 'yyyy') }}</span>
-`, dependencies: [{ kind: "pipe", type: i27.DatePipe, name: "date" }] });
+`, dependencies: [{ kind: "pipe", type: i26.DatePipe, name: "date" }] });
   }
 };
 i076.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i076, type: EclDateBlockComponent, decorators: [{
@@ -6900,7 +6899,7 @@ import { Subject as Subject12 } from "rxjs";
 import { coerceBoolean as coerceBoolean7 } from "@eui/base";
 import * as i0104 from "@angular/core";
 import * as i118 from "@angular/forms";
-import * as i28 from "@ngx-translate/core";
+import * as i27 from "@ngx-translate/core";
 var EclFileUploadFileSelectedEvent = class extends EclBaseEvent {
   constructor(files) {
     super();
@@ -7052,7 +7051,7 @@ var EclFileUploadDirective = class _EclFileUploadDirective extends ECLBaseDirect
     return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
   }
   static {
-    this.ɵfac = i0104.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0104, type: _EclFileUploadDirective, deps: [{ token: i118.NgControl, optional: true, self: true }, { token: i0104.ElementRef }, { token: i28.TranslateService }], target: i0104.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0104.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0104, type: _EclFileUploadDirective, deps: [{ token: i118.NgControl, optional: true, self: true }, { token: i0104.ElementRef }, { token: i27.TranslateService }], target: i0104.ɵɵFactoryTarget.Directive });
   }
   static {
     this.ɵdir = i0104.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclFileUploadDirective, selector: "[eclFileUpload]", inputs: { variant: "variant", isInvalid: "isInvalid", id: "id", disabled: "disabled", multiple: "multiple" }, outputs: { filesSelected: "filesSelected" }, host: { listeners: { "click": "onClick($event)", "change": "onFilesSelected($event)" }, properties: { "attr.id": "this.id", "attr.disabled": "this.disabled", "attr.multiple": "this.multiple", "attr.type": "this.type", "class": "this.cssClasses", "class.ecl-file-upload--invalid": "this.invalidState" } }, usesInheritance: true, ngImport: i0104 });
@@ -7073,7 +7072,7 @@ i0104.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: Optional5
 }, {
   type: Self3
-}] }, { type: i0104.ElementRef }, { type: i28.TranslateService }], propDecorators: {
+}] }, { type: i0104.ElementRef }, { type: i27.TranslateService }], propDecorators: {
   variant: [{
     type: Input38
   }],
@@ -7220,7 +7219,7 @@ i0106.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 // lib/components/ecl-file/ecl-file.component.mjs
 import { Component as Component46, ContentChild as ContentChild15, HostBinding as HostBinding73, Input as Input40 } from "@angular/core";
 import * as i0107 from "@angular/core";
-import * as i29 from "@angular/common";
+import * as i28 from "@angular/common";
 var EclFileComponent = class _EclFileComponent extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-file"), this.isThumbnail ? "ecl-file--thumbnail" : ""].join(" ").trim();
@@ -7236,7 +7235,7 @@ var EclFileComponent = class _EclFileComponent extends ECLBaseDirective {
     this.ɵfac = i0107.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0107, type: _EclFileComponent, deps: [{ token: EclThemeService }], target: i0107.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0107.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclFileComponent, selector: "ecl-file", inputs: { description: "description", id: "id", langId: "langId", labelInfo: "labelInfo", language: "language", detailMeta: "detailMeta", meta: "meta" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclPictureContent", first: true, predicate: EclFilePictureDirective, descendants: true }], usesInheritance: true, ngImport: i0107, template: '<div class="ecl-file__container">\n    @if(!isThumbnail) {\n        @if(eclThemeService.isECTheme()) {\n            <ecl-icon icon="file" class="ecl-file__icon" size="2xl"></ecl-icon>\n        } @else {\n            <ecl-icon icon="file" class="ecl-file__icon" size="m"></ecl-icon>\n        }\n    } @else {\n    <ng-content select="[eclFilePicture]"></ng-content>\n    }\n    <div class="ecl-file__info">\n        @if(labelInfo) {\n        <div class="ecl-file__label">\n            <span eclLabel variant="highlight">{{ labelInfo }}</span>\n        </div>\n        }\n        @if(detailMeta) {\n        <div class="ecl-file__detail-meta">\n            <span class="ecl-file__detail-meta-item" *ngFor="let el of detailMeta">{{ el }}</span>\n        </div>\n        }\n        <ng-content select="[eclFileTitle]"></ng-content>\n        @if(description) {\n            <div class="ecl-file__description">{{ description }}</div>\n        }\n        <ng-content select="ecl-file-taxonomy"></ng-content>\n    </div>\n    \n    </div>\n    <div class="ecl-file__footer">\n        <div class="ecl-file__language" [id]="langId">{{ language }}</div>\n        <div class="ecl-file__meta">{{ meta }}</div>\n        <ng-content select="[eclFileDownload]"></ng-content>\n    </div>\n<ng-content></ng-content>', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i29.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLabelDirective, selector: "[eclLabel]", inputs: ["variant"] }] });
+    this.ɵcmp = i0107.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclFileComponent, selector: "ecl-file", inputs: { description: "description", id: "id", langId: "langId", labelInfo: "labelInfo", language: "language", detailMeta: "detailMeta", meta: "meta" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclPictureContent", first: true, predicate: EclFilePictureDirective, descendants: true }], usesInheritance: true, ngImport: i0107, template: '<div class="ecl-file__container">\n    @if(!isThumbnail) {\n        @if(eclThemeService.isECTheme()) {\n            <ecl-icon icon="file" class="ecl-file__icon" size="2xl"></ecl-icon>\n        } @else {\n            <ecl-icon icon="file" class="ecl-file__icon" size="m"></ecl-icon>\n        }\n    } @else {\n    <ng-content select="[eclFilePicture]"></ng-content>\n    }\n    <div class="ecl-file__info">\n        @if(labelInfo) {\n        <div class="ecl-file__label">\n            <span eclLabel variant="highlight">{{ labelInfo }}</span>\n        </div>\n        }\n        @if(detailMeta) {\n        <div class="ecl-file__detail-meta">\n            <span class="ecl-file__detail-meta-item" *ngFor="let el of detailMeta">{{ el }}</span>\n        </div>\n        }\n        <ng-content select="[eclFileTitle]"></ng-content>\n        @if(description) {\n            <div class="ecl-file__description">{{ description }}</div>\n        }\n        <ng-content select="ecl-file-taxonomy"></ng-content>\n    </div>\n    \n    </div>\n    <div class="ecl-file__footer">\n        <div class="ecl-file__language" [id]="langId">{{ language }}</div>\n        <div class="ecl-file__meta">{{ meta }}</div>\n        <ng-content select="[eclFileDownload]"></ng-content>\n    </div>\n<ng-content></ng-content>', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i28.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLabelDirective, selector: "[eclLabel]", inputs: ["variant"] }] });
   }
 };
 i0107.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0107, type: EclFileComponent, decorators: [{
@@ -7267,7 +7266,7 @@ i0107.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 // lib/components/ecl-file/ecl-file-item/ecl-file-item.component.mjs
 import { Component as Component47, HostBinding as HostBinding74, Input as Input41, booleanAttribute as booleanAttribute13 } from "@angular/core";
 import * as i0108 from "@angular/core";
-import * as i210 from "@angular/common";
+import * as i29 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();
@@ -7284,7 +7283,7 @@ var EclFileItemComponent = class _EclFileItemComponent extends ECLBaseDirective
     this.ɵfac = i0108.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0108, type: _EclFileItemComponent, deps: [{ token: EclFileComponent }], target: i0108.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0108.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclFileItemComponent, selector: "ecl-file-item", inputs: { isDescription: ["isDescription", "isDescription", booleanAttribute13], eclTitle: "eclTitle", titleId: "titleId", meta: "meta", label: "label", langDetail: "langDetail" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0108, template: '<ng-template [ngIf]="!isDescription">\n    <div class="ecl-file__translation-info">\n        <div class="ecl-file__translation-title" [id]="titleId" [attr.lang]="langDetail">{{ eclTitle }}</div>    \n        <div class="ecl-file__translation-meta">{{ meta }}</div>\n    </div>\n        <ng-content select="[eclFileTranslationDownload]"></ng-content>\n</ng-template>\n<ng-template [ngIf]="isDescription">\n    <ng-content></ng-content>\n</ng-template>', dependencies: [{ kind: "directive", type: i210.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    this.ɵcmp = i0108.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclFileItemComponent, selector: "ecl-file-item", inputs: { isDescription: ["isDescription", "isDescription", booleanAttribute13], eclTitle: "eclTitle", titleId: "titleId", meta: "meta", label: "label", langDetail: "langDetail" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0108, template: '<ng-template [ngIf]="!isDescription">\n    <div class="ecl-file__translation-info">\n        <div class="ecl-file__translation-title" [id]="titleId" [attr.lang]="langDetail">{{ eclTitle }}</div>    \n        <div class="ecl-file__translation-meta">{{ meta }}</div>\n    </div>\n        <ng-content select="[eclFileTranslationDownload]"></ng-content>\n</ng-template>\n<ng-template [ngIf]="isDescription">\n    <ng-content></ng-content>\n</ng-template>', dependencies: [{ kind: "directive", type: i29.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   }
 };
 i0108.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0108, type: EclFileItemComponent, decorators: [{
@@ -7526,9 +7525,105 @@ i0112.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   }]
 }] });
 
+// lib/components/ecl-gallery/ecl-gallery-footer.component.mjs
+import { Component as Component50, EventEmitter as EventEmitter18, Output as Output18 } from "@angular/core";
+import * as i0113 from "@angular/core";
+import * as i210 from "@ngx-translate/core";
+var EclGalleryToggleItemsEvent = class extends EclBaseEvent {
+  constructor(expandAll) {
+    super();
+    this.expandAll = expandAll;
+  }
+};
+var EclGalleryFooterComponent = class _EclGalleryFooterComponent {
+  constructor() {
+    this.toggleItems = new EventEmitter18();
+    this._isExpanded = false;
+    this._isShowToggleBtn = false;
+  }
+  get isExpanded() {
+    return this._isExpanded;
+  }
+  set isExpanded(value) {
+    this._isExpanded = value;
+  }
+  get itemsCount() {
+    return this._itemsCount;
+  }
+  set itemsCount(value) {
+    this._itemsCount = value;
+  }
+  get isShowToggleBtn() {
+    return this._isShowToggleBtn;
+  }
+  set isShowToggleBtn(value) {
+    this._isShowToggleBtn = value;
+  }
+  onToggle() {
+    this._isExpanded = !this._isExpanded;
+    this.toggleItems.next(new EclGalleryToggleItemsEvent(this.isExpanded));
+  }
+  static {
+    this.ɵfac = i0113.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0113, type: _EclGalleryFooterComponent, deps: [], target: i0113.ɵɵFactoryTarget.Component });
+  }
+  static {
+    this.ɵcmp = i0113.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclGalleryFooterComponent, selector: "ecl-gallery-footer", outputs: { toggleItems: "toggleItems" }, ngImport: i0113, template: `<div class="ecl-gallery__footer">
+    <div class="ecl-gallery__info">
+        <div class="ecl-gallery__info-total">
+            <strong>{{ itemsCount }}</strong>{{ 'ecl.gallery.MEDIA-FILES-COUNT' | translate }}
+        </div>
+        @if(isShowToggleBtn) {
+            @if(!isExpanded) {
+            <button eclButton variant="ghost" class="ecl-gallery__view-all" (click)="onToggle()">
+                {{ 'ecl.gallery.VIEW-ALL' | translate }}
+            </button>
+            } @else {
+            <button eclButton variant="ghost" class="ecl-gallery__view-all" (click)="onToggle()">
+                {{ 'ecl.common.COLLAPSE' | translate }}
+            </button>
+            }
+        }
+    </div>
+    <hr class="ecl-gallery__footer-divider" />
+    <div class="ecl-gallery__footer-link">
+        <ng-content></ng-content>
+    </div>
+</div>
+`, dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "pipe", type: i210.TranslatePipe, name: "translate" }] });
+  }
+};
+i0113.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0113, type: EclGalleryFooterComponent, decorators: [{
+  type: Component50,
+  args: [{ selector: "ecl-gallery-footer", template: `<div class="ecl-gallery__footer">
+    <div class="ecl-gallery__info">
+        <div class="ecl-gallery__info-total">
+            <strong>{{ itemsCount }}</strong>{{ 'ecl.gallery.MEDIA-FILES-COUNT' | translate }}
+        </div>
+        @if(isShowToggleBtn) {
+            @if(!isExpanded) {
+            <button eclButton variant="ghost" class="ecl-gallery__view-all" (click)="onToggle()">
+                {{ 'ecl.gallery.VIEW-ALL' | translate }}
+            </button>
+            } @else {
+            <button eclButton variant="ghost" class="ecl-gallery__view-all" (click)="onToggle()">
+                {{ 'ecl.common.COLLAPSE' | translate }}
+            </button>
+            }
+        }
+    </div>
+    <hr class="ecl-gallery__footer-divider" />
+    <div class="ecl-gallery__footer-link">
+        <ng-content></ng-content>
+    </div>
+</div>
+` }]
+}], propDecorators: { toggleItems: [{
+  type: Output18
+}] } });
+
 // lib/components/ecl-gallery/ecl-gallery-media.directive.mjs
 import { Directive as Directive31, HostBinding as HostBinding78, Input as Input43 } from "@angular/core";
-import * as i0113 from "@angular/core";
+import * as i0114 from "@angular/core";
 var EclGalleryMediaSource = class {
 };
 var EclGalleryMediaTrack = class {
@@ -7566,18 +7661,18 @@ var EclGalleryMediaDirective = class _EclGalleryMediaDirective extends ECLBaseDi
     return this.el.nativeElement;
   }
   static {
-    this.ɵfac = i0113.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0113, type: _EclGalleryMediaDirective, deps: [{ token: i0113.ElementRef }], target: i0113.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0114.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0114, type: _EclGalleryMediaDirective, deps: [{ token: i0114.ElementRef }], target: i0114.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0113.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclGalleryMediaDirective, selector: "[eclGalleryMedia], [eclGalleryImage]", inputs: { poster: "poster" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0113 });
+    this.ɵdir = i0114.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclGalleryMediaDirective, selector: "[eclGalleryMedia], [eclGalleryImage]", inputs: { poster: "poster" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0114 });
   }
 };
-i0113.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0113, type: EclGalleryMediaDirective, decorators: [{
+i0114.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0114, type: EclGalleryMediaDirective, decorators: [{
   type: Directive31,
   args: [{
     selector: "[eclGalleryMedia], [eclGalleryImage]"
   }]
-}], ctorParameters: () => [{ type: i0113.ElementRef }], propDecorators: { poster: [{
+}], ctorParameters: () => [{ type: i0114.ElementRef }], propDecorators: { poster: [{
   type: Input43
 }], cssClasses: [{
   type: HostBinding78,
@@ -7588,13 +7683,13 @@ var EclGalleryPictureDirective = class _EclGalleryPictureDirective extends ECLBa
     return [super.getCssClasses("ecl-picture ecl-gallery__picture")].join(" ").trim();
   }
   static {
-    this.ɵfac = i0113.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0113, type: _EclGalleryPictureDirective, deps: null, target: i0113.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0114.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0114, type: _EclGalleryPictureDirective, deps: null, target: i0114.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0113.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclGalleryPictureDirective, selector: "picture[eclGalleryPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0113 });
+    this.ɵdir = i0114.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclGalleryPictureDirective, selector: "picture[eclGalleryPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0114 });
   }
 };
-i0113.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0113, type: EclGalleryPictureDirective, decorators: [{
+i0114.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0114, type: EclGalleryPictureDirective, decorators: [{
   type: Directive31,
   args: [{
     selector: "picture[eclGalleryPicture]"
@@ -7605,12 +7700,9 @@ i0113.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-gallery/ecl-gallery-item.component.mjs
-import { __decorate as __decorate10 } from "tslib";
-import { Component as Component50, ContentChild as ContentChild16, EventEmitter as EventEmitter18, HostBinding as HostBinding79, HostListener as HostListener9, Input as Input44, Output as Output18 } from "@angular/core";
-import { coerceBoolean as coerceBoolean8 } from "@eui/base";
-import * as i0114 from "@angular/core";
+import { Component as Component51, ContentChild as ContentChild16, EventEmitter as EventEmitter19, HostBinding as HostBinding79, HostListener as HostListener9, Input as Input44, Output as Output19, booleanAttribute as booleanAttribute15 } from "@angular/core";
+import * as i0115 from "@angular/core";
 import * as i119 from "@angular/platform-browser";
-import * as i211 from "@angular/common";
 var EclGalleryItemClickEvent = class extends EclBaseEvent {
 };
 var EclGalleryItemComponent = class _EclGalleryItemComponent extends ECLBaseDirective {
@@ -7623,7 +7715,7 @@ var EclGalleryItemComponent = class _EclGalleryItemComponent extends ECLBaseDire
     this.el = el;
     this.isShareable = true;
     this.mediaType = "image";
-    this.itemClick = new EventEmitter18();
+    this.itemClick = new EventEmitter19();
     this.role = "listitem";
     this._isNoOverlay = false;
     this._isHidden = false;
@@ -7659,90 +7751,58 @@ var EclGalleryItemComponent = class _EclGalleryItemComponent extends ECLBaseDire
   get isExternalVideo() {
     return this.mediaType === "externalVideo";
   }
-  /**
-   * @deprecated
-   * The name 'isDownloadable' is deprecated and should be removed as of version 18.
-   */
-  get isDownloadable() {
-    return this.mediaType !== "externalVideo";
-  }
   get isOpenInFullScreenPossible() {
     return this.mediaType !== "externalVideo";
   }
-  get hasPictureChild() {
-    return !!this.pictureChild;
-  }
   static {
-    this.ɵfac = i0114.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0114, type: _EclGalleryItemComponent, deps: [{ token: i119.DomSanitizer }, { token: i0114.ElementRef }], target: i0114.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0115.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0115, type: _EclGalleryItemComponent, deps: [{ token: i119.DomSanitizer }, { token: i0115.ElementRef }], target: i0115.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0114.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclGalleryItemComponent, selector: "ecl-gallery-item", inputs: { isShareable: "isShareable", 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: "pictureChild", first: true, predicate: EclGalleryPictureDirective, descendants: true }, { propertyName: "mediaChild", first: true, predicate: EclGalleryMediaDirective, descendants: true }], usesInheritance: true, ngImport: i0114, template: `<a [href]="src" class="ecl-gallery__item-link" [attr.aria-label]="label" [class.ecl-gallery__item__link--frozen]="isNoOverlay">
+    this.ɵcmp = i0115.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclGalleryItemComponent, selector: "ecl-gallery-item", inputs: { isShareable: ["isShareable", "isShareable", booleanAttribute15], mediaType: "mediaType", src: "src", label: "label", meta: "meta", description: "description", icon: "icon" }, outputs: { itemClick: "itemClick" }, host: { listeners: { "click": "onItemClick($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "mediaChild", first: true, predicate: EclGalleryMediaDirective, descendants: true }], usesInheritance: true, ngImport: i0115, template: `<a [href]="src" class="ecl-gallery__item-link" [attr.aria-label]="label" [class.ecl-gallery__item__link--frozen]="isNoOverlay">
     <figure class="ecl-gallery__image-container">
-        <div *ngIf="mediaType !== 'image'" class="ecl-gallery__item-icon-wrapper">
-            <ecl-icon isInverted class="ecl-gallery__item-icon" icon="play-filled" size="l"></ecl-icon>
+        @if(mediaType !== 'image') {
+        <div class="ecl-gallery__item-icon-wrapper">
+            <ecl-icon isInverted class="ecl-gallery__item-icon ecl-icon--inverted" icon="play-filled" size="l"></ecl-icon>
         </div>
-        <!-- TODO: Remove this code in 18 version -->
-        <ng-container *ngIf="hasPictureChild">
-            <ng-content select="[eclGalleryPicture]"></ng-content>
-        </ng-container>
-        <ng-container *ngIf="!hasPictureChild">
-            <picture *ngIf="isImage || isExternalVideo" class="ecl-picture ecl-gallery__picture">
-                <ng-content *ngTemplateOutlet="galleryMedia"></ng-content>
-            </picture>
-            <ng-container *ngIf="isVideo"><ng-content *ngTemplateOutlet="galleryMedia"></ng-content></ng-container>
-        </ng-container>
-        <!-- TODO: Remove the above code in 18 version -->
+        }
+        <ng-content select="[eclGalleryPicture], [eclGalleryMedia], [eclGalleryImage]"></ng-content>
         <figcaption class="ecl-gallery__description">
             {{ description }}
-            <ecl-icon *ngIf="icon" class="ecl-gallery__description-icon" [icon]="icon"></ecl-icon>
+            @if(icon) {
+            <ecl-icon class="ecl-gallery__description-icon" [icon]="icon"></ecl-icon>
+            }
             <span class="ecl-gallery__meta">
                 {{ meta }}
             </span>
         </figcaption>
     </figure>
-</a>
-<ng-template #galleryMedia>
-    <ng-content select="[eclGalleryMedia], [eclGalleryImage]"></ng-content>
-</ng-template>
-`, styles: [".ecl-gallery__description{width:100%}\n"], dependencies: [{ kind: "directive", type: i211.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i211.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
+</a>`, styles: [".ecl-gallery__description{width:100%}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
   }
 };
-__decorate10([
-  coerceBoolean8
-], EclGalleryItemComponent.prototype, "isShareable", void 0);
-i0114.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0114, type: EclGalleryItemComponent, decorators: [{
-  type: Component50,
+i0115.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0115, type: EclGalleryItemComponent, decorators: [{
+  type: Component51,
   args: [{ selector: "ecl-gallery-item", 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">
-        <div *ngIf="mediaType !== 'image'" class="ecl-gallery__item-icon-wrapper">
-            <ecl-icon isInverted class="ecl-gallery__item-icon" icon="play-filled" size="l"></ecl-icon>
+        @if(mediaType !== 'image') {
+        <div class="ecl-gallery__item-icon-wrapper">
+            <ecl-icon isInverted class="ecl-gallery__item-icon ecl-icon--inverted" icon="play-filled" size="l"></ecl-icon>
         </div>
-        <!-- TODO: Remove this code in 18 version -->
-        <ng-container *ngIf="hasPictureChild">
-            <ng-content select="[eclGalleryPicture]"></ng-content>
-        </ng-container>
-        <ng-container *ngIf="!hasPictureChild">
-            <picture *ngIf="isImage || isExternalVideo" class="ecl-picture ecl-gallery__picture">
-                <ng-content *ngTemplateOutlet="galleryMedia"></ng-content>
-            </picture>
-            <ng-container *ngIf="isVideo"><ng-content *ngTemplateOutlet="galleryMedia"></ng-content></ng-container>
-        </ng-container>
-        <!-- TODO: Remove the above code in 18 version -->
+        }
+        <ng-content select="[eclGalleryPicture], [eclGalleryMedia], [eclGalleryImage]"></ng-content>
         <figcaption class="ecl-gallery__description">
             {{ description }}
-            <ecl-icon *ngIf="icon" class="ecl-gallery__description-icon" [icon]="icon"></ecl-icon>
+            @if(icon) {
+            <ecl-icon class="ecl-gallery__description-icon" [icon]="icon"></ecl-icon>
+            }
             <span class="ecl-gallery__meta">
                 {{ meta }}
             </span>
         </figcaption>
     </figure>
-</a>
-<ng-template #galleryMedia>
-    <ng-content select="[eclGalleryMedia], [eclGalleryImage]"></ng-content>
-</ng-template>
-`, styles: [".ecl-gallery__description{width:100%}\n"] }]
-}], ctorParameters: () => [{ type: i119.DomSanitizer }, { type: i0114.ElementRef }], propDecorators: { isShareable: [{
-  type: Input44
+</a>`, styles: [".ecl-gallery__description{width:100%}\n"] }]
+}], ctorParameters: () => [{ type: i119.DomSanitizer }, { type: i0115.ElementRef }], propDecorators: { isShareable: [{
+  type: Input44,
+  args: [{ transform: booleanAttribute15 }]
 }], mediaType: [{
   type: Input44
 }], src: [{
@@ -7756,10 +7816,7 @@ i0114.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }], icon: [{
   type: Input44
 }], itemClick: [{
-  type: Output18
-}], pictureChild: [{
-  type: ContentChild16,
-  args: [EclGalleryPictureDirective]
+  type: Output19
 }], mediaChild: [{
   type: ContentChild16,
   args: [EclGalleryMediaDirective]
@@ -7774,116 +7831,19 @@ i0114.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   args: ["click", ["$event"]]
 }] } });
 
-// lib/components/ecl-gallery/ecl-gallery-footer.component.mjs
-import { Component as Component51, EventEmitter as EventEmitter19, Output as Output19 } from "@angular/core";
-import * as i0115 from "@angular/core";
-import * as i120 from "@angular/common";
-import * as i32 from "@ngx-translate/core";
-var EclGalleryToggleItemsEvent = class extends EclBaseEvent {
-  constructor(expandAll) {
-    super();
-    this.expandAll = expandAll;
-  }
-};
-var EclGalleryFooterComponent = class _EclGalleryFooterComponent {
-  constructor() {
-    this.toggleItems = new EventEmitter19();
-    this._isExpanded = false;
-    this._isShowToggleBtn = false;
-  }
-  get isExpanded() {
-    return this._isExpanded;
-  }
-  set isExpanded(value) {
-    this._isExpanded = value;
-  }
-  get itemsCount() {
-    return this._itemsCount;
-  }
-  set itemsCount(value) {
-    this._itemsCount = value;
-  }
-  get isShowToggleBtn() {
-    return this._isShowToggleBtn;
-  }
-  set isShowToggleBtn(value) {
-    this._isShowToggleBtn = value;
-  }
-  onToggle() {
-    this._isExpanded = !this._isExpanded;
-    this.toggleItems.next(new EclGalleryToggleItemsEvent(this.isExpanded));
-  }
-  static {
-    this.ɵfac = i0115.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0115, type: _EclGalleryFooterComponent, deps: [], target: i0115.ɵɵFactoryTarget.Component });
-  }
-  static {
-    this.ɵcmp = i0115.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclGalleryFooterComponent, selector: "ecl-gallery-footer", outputs: { toggleItems: "toggleItems" }, ngImport: i0115, template: `<div class="ecl-gallery__footer">
-    <div class="ecl-gallery__info">
-        <strong class="ecl-gallery__info-total">{{ itemsCount }}</strong>
-        {{ 'ecl.gallery.MEDIA-FILES-COUNT' | translate }}
-        <ng-container *ngIf="isShowToggleBtn">
-            <button *ngIf="!isExpanded" eclButton variant="ghost" class="ecl-gallery__view-all" (click)="onToggle()">
-                {{ 'ecl.gallery.VIEW-ALL' | translate }}
-            </button>
-            <button *ngIf="isExpanded" eclButton variant="ghost" class="ecl-gallery__view-all" (click)="onToggle()">
-                {{ 'ecl.common.COLLAPSE' | translate }}
-            </button>
-        </ng-container>
-    </div>
-    <hr class="ecl-gallery__footer-divider" />
-    <div class="ecl-gallery__footer-link">
-        <ng-content></ng-content>
-    </div>
-</div>
-`, dependencies: [{ kind: "directive", type: i120.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "pipe", type: i32.TranslatePipe, name: "translate" }] });
-  }
-};
-i0115.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0115, type: EclGalleryFooterComponent, decorators: [{
-  type: Component51,
-  args: [{ selector: "ecl-gallery-footer", template: `<div class="ecl-gallery__footer">
-    <div class="ecl-gallery__info">
-        <strong class="ecl-gallery__info-total">{{ itemsCount }}</strong>
-        {{ 'ecl.gallery.MEDIA-FILES-COUNT' | translate }}
-        <ng-container *ngIf="isShowToggleBtn">
-            <button *ngIf="!isExpanded" eclButton variant="ghost" class="ecl-gallery__view-all" (click)="onToggle()">
-                {{ 'ecl.gallery.VIEW-ALL' | translate }}
-            </button>
-            <button *ngIf="isExpanded" eclButton variant="ghost" class="ecl-gallery__view-all" (click)="onToggle()">
-                {{ 'ecl.common.COLLAPSE' | translate }}
-            </button>
-        </ng-container>
-    </div>
-    <hr class="ecl-gallery__footer-divider" />
-    <div class="ecl-gallery__footer-link">
-        <ng-content></ng-content>
-    </div>
-</div>
-` }]
-}], propDecorators: { toggleItems: [{
-  type: Output19
-}] } });
-
 // lib/components/ecl-gallery/ecl-gallery.component.mjs
-import { __decorate as __decorate11 } from "tslib";
-import { Component as Component52, Input as Input45, Output as Output20, ContentChildren as ContentChildren12, EventEmitter as EventEmitter20, HostListener as HostListener10, ViewChild as ViewChild7, HostBinding as HostBinding80, ContentChild as ContentChild17 } from "@angular/core";
+import { Breakpoints } from "@angular/cdk/layout";
+import { Component as Component52, ContentChild as ContentChild17, ContentChildren as ContentChildren12, EventEmitter as EventEmitter20, HostBinding as HostBinding80, HostListener as HostListener10, Input as Input45, Output as Output20, ViewChild as ViewChild7, booleanAttribute as booleanAttribute16, numberAttribute as numberAttribute3 } from "@angular/core";
 import { Subject as Subject13, delay } from "rxjs";
 import { takeUntil as takeUntil13 } from "rxjs/operators";
-import { Breakpoints } from "@angular/cdk/layout";
-import { coerceBoolean as coerceBoolean9, coerceNumber } from "@eui/base";
 import * as i0116 from "@angular/core";
-import * as i121 from "@angular/cdk/layout";
-import * as i212 from "@angular/common";
+import * as i120 from "@angular/cdk/layout";
+import * as i211 from "@angular/common";
 import * as i82 from "@ngx-translate/core";
 var EclGalleryShowEvent = class extends EclBaseEvent {
 };
 var EclGalleryHideEvent = class extends EclBaseEvent {
 };
-var EclGalleryDownloadEvent = class extends EclBaseEvent {
-  constructor(galleryItem) {
-    super();
-    this.galleryItem = galleryItem;
-  }
-};
 var EclGalleryFullScreenEvent = class extends EclBaseEvent {
   constructor(galleryItem) {
     super();
@@ -7909,14 +7869,12 @@ var EclGalleryComponent = class _EclGalleryComponent extends ECLBaseDirective {
   constructor(cdkBreakpointObserver) {
     super();
     this.cdkBreakpointObserver = cdkBreakpointObserver;
-    this.isDownloadable = true;
     this.isOpenInFullScreenPossible = true;
     this.isShareable = true;
     this.isFullWidth = false;
     this.isNoOverlay = false;
     this.show = new EventEmitter20();
     this.hide = new EventEmitter20();
-    this.download = new EventEmitter20();
     this.openFullScreen = new EventEmitter20();
     this.share = new EventEmitter20();
     this.itemSwitch = new EventEmitter20();
@@ -7949,13 +7907,6 @@ var EclGalleryComponent = class _EclGalleryComponent extends ECLBaseDirective {
     this.isDialogVisible = false;
     this.hide.next(new EclGalleryHideEvent());
   }
-  /**
-   * @deprecated
-   * The name 'onDownload' is deprecated and should be removed as of version 18.
-   */
-  onDownload(evt) {
-    this.download.next(new EclGalleryDownloadEvent(this.item));
-  }
   onFullScreenOpen(evt) {
     this.openFullScreen.next(new EclGalleryFullScreenEvent(this.item));
   }
@@ -7999,13 +7950,6 @@ var EclGalleryComponent = class _EclGalleryComponent extends ECLBaseDirective {
     this.destroy$.next(true);
     this.destroy$.unsubscribe();
   }
-  /**
-   * @deprecated
-   * The name 'canBeDownloaded' is deprecated and should be removed as of version 18.
-   */
-  canBeDownloaded() {
-    return this.isDownloadable && this.item?.isDownloadable;
-  }
   canBeOpenInFullScreen() {
     return this.isOpenInFullScreenPossible && this.item?.isOpenInFullScreenPossible;
   }
@@ -8115,124 +8059,100 @@ var EclGalleryComponent = class _EclGalleryComponent extends ECLBaseDirective {
     return this.galleryItems.filter((item, cnt) => cnt < this.maxVisibleItems);
   }
   static {
-    this.ɵfac = i0116.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0116, type: _EclGalleryComponent, deps: [{ token: i121.BreakpointObserver }], target: i0116.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0116.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0116, type: _EclGalleryComponent, deps: [{ token: i120.BreakpointObserver }], target: i0116.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0116.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclGalleryComponent, selector: "ecl-gallery", inputs: { isDownloadable: "isDownloadable", isOpenInFullScreenPossible: "isOpenInFullScreenPossible", isShareable: "isShareable", isFullWidth: "isFullWidth", isNoOverlay: "isNoOverlay", maxVisibleItems: "maxVisibleItems" }, outputs: { show: "show", hide: "hide", download: "download", openFullScreen: "openFullScreen", share: "share", itemSwitch: "itemSwitch" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler($event)", "window:resize": "iframeResize($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "galleryFooter", first: true, predicate: EclGalleryFooterComponent, descendants: true }, { propertyName: "galleryItems", predicate: EclGalleryItemComponent }], viewQueries: [{ propertyName: "videoChild", first: true, predicate: ["video"], descendants: true }, { propertyName: "imageChild", first: true, predicate: ["image"], descendants: true }, { propertyName: "externalVideoChild", first: true, predicate: ["externalVideo"], descendants: true }, { propertyName: "overlayChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "headerChild", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerChild", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, ngImport: i0116, template: `<ul class="ecl-gallery__list">
+    this.ɵcmp = i0116.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclGalleryComponent, selector: "ecl-gallery", inputs: { isOpenInFullScreenPossible: ["isOpenInFullScreenPossible", "isOpenInFullScreenPossible", booleanAttribute16], isShareable: ["isShareable", "isShareable", booleanAttribute16], isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute16], isNoOverlay: ["isNoOverlay", "isNoOverlay", booleanAttribute16], maxVisibleItems: ["maxVisibleItems", "maxVisibleItems", numberAttribute3] }, outputs: { show: "show", hide: "hide", openFullScreen: "openFullScreen", share: "share", itemSwitch: "itemSwitch" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler($event)", "window:resize": "iframeResize($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "galleryFooter", first: true, predicate: EclGalleryFooterComponent, descendants: true }, { propertyName: "galleryItems", predicate: EclGalleryItemComponent }], viewQueries: [{ propertyName: "videoChild", first: true, predicate: ["video"], descendants: true }, { propertyName: "imageChild", first: true, predicate: ["image"], descendants: true }, { propertyName: "externalVideoChild", first: true, predicate: ["externalVideo"], descendants: true }, { propertyName: "overlayChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "headerChild", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerChild", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, ngImport: i0116, template: `<ul class="ecl-gallery__list">
     <ng-content></ng-content>
 </ul>
 
 <ng-content select="ecl-gallery-footer"></ng-content>
 
-<dialog
-    #overlay
-    [attr.open]="isDialogVisible || null"
-    class="ecl-gallery__overlay"
+<dialog #overlay [attr.open]="isDialogVisible || null" class="ecl-gallery__overlay"
     [attr.aria-label]="'ecl.gallery.FULL-SIZE-DISPLAY' | translate">
     <header #header class="ecl-gallery__close">
-        <button (click)="onClose($event)" eclButton class="ecl-gallery__close-button" variant="ghost">
+        <button (click)="onClose($event)" eclButton class="ecl-gallery__close-button" isIconOnly variant="ghost">
             <span eclButtonLabel>
                 {{ 'ecl.common.CLOSE' | translate }}
             </span>
-            <ecl-icon icon="close-filled" eclSize="s"></ecl-icon>
+            <ecl-icon icon="close" size="m"></ecl-icon>
         </button>
     </header>
     <section class="ecl-gallery__slider">
         <div class="ecl-gallery__slider-media-container">
-            <div #externalVideo class="ecl-gallery__slider-embed" *ngIf="item?.isExternalVideo">
-                <iframe
-                    [src]="item?.getUrlExternalVideo()"
-                    [style.width.px]="getIframeWidth()"
-                    [style.height.px]="getIframeHeight()"
-                    frameborder="0">
+            @if(item?.isExternalVideo) {
+            <div #externalVideo class="ecl-gallery__slider-embed">
+                <iframe [src]="item?.getUrlExternalVideo()" [style.width.px]="getIframeWidth()"
+                    [style.height.px]="getIframeHeight()" frameborder="0">
                 </iframe>
             </div>
-            <picture #image *ngIf="item?.isImage" class="ecl-picture ecl-gallery__picture ecl-gallery__slider-image">
+            }
+            @if(item?.isImage) {
+            <picture #image class="ecl-picture ecl-gallery__picture ecl-gallery__slider-image">
                 <img [attr.alt]="item?.label || null" [src]="item?.src" />
             </picture>
-            <video
-                #video
-                *ngIf="item?.isVideo"
-                controls="controls"
-                class="ecl-gallery__slider-video"
+            }
+            @if(item?.isVideo) {
+            <video #video controls="controls" class="ecl-gallery__slider-video"
                 [attr.poster]="item.mediaChild?.poster">
-                <source *ngFor="let item of item.mediaChild?.sources" [attr.src]="item.src" [attr.type]="item.type" />
-                <track
-                    *ngFor="let item of item.mediaChild?.tracks"
-                    [attr.src]="item"
-                    [attr.kind]="item.kind"
-                    [attr.srcLang]="item.srcLang"
-                    [attr.label]="item.label" />
+                @for (el of item.mediaChild?.sources; track el.src) {
+                <source [attr.src]="el.src" [attr.type]="el.type" />
+                }
+                @for (elem of item.mediaChild?.tracks; track elem.src) {
+                <track [attr.src]="elem.src" [attr.kind]="elem.kind"
+                    [attr.srcLang]="elem.srcLang" [attr.label]="elem.label" />
+                }
             </video>
+            }
         </div>
     </section>
     <footer #footer class="ecl-gallery__detail">
         <div class="ecl-container">
-            <div class="ecl-gallery__detail-actions">
-                <!-- @deprecated [download]="item?.src" -->
-                <a
-                    *ngIf="canBeDownloaded()"
-                    eclLink
-                    variant="standalone"
-                    class="ecl-gallery__download"
-                    [href]="item?.getDownloadLink()"
-                    [download]="item?.src"
-                    target="_blank"
-                    (click)="onDownload($event)">
-                    <span eclLinkLabel>{{ 'ecl.gallery.VIEW-ORIGINAL' | translate }}</span>
-                    <ecl-icon icon="fullscreen" transform="fluid" focusable="false"></ecl-icon>
-                </a>
-                <a *ngIf="canBeShared()" eclLink variant="standalone" class="ecl-gallery__share" href="" (click)="onShare($event)">
-                    <span eclLinkLabel>{{ 'ecl.common.SHARE' | translate }}</span>
-                    <ecl-icon icon="share" transform="fluid" focusable="false"></ecl-icon>
-                </a>
-            </div>
-
-            <div *ngIf="item?.description" class="ecl-gallery__detail-description">{{ item?.description }}</div>
-
-            <div *ngIf="item?.meta" class="ecl-gallery__detail-meta">{{ item?.meta }}</div>
-
             <div class="ecl-gallery__pager">
-                <button eclButton class="ecl-gallery__slider-previous" variant="ghost" (click)="onPrevious($event)">
+                <button eclButton class="ecl-gallery__slider-previous" variant="tertiary" isIconOnly
+                    (click)="onPrevious($event)">
                     <ecl-icon icon="corner-arrow" size="m" transform="rotate-270"></ecl-icon>
-                    <span eclButtonLabel class="ecl-u-sr-only">
+                    <span eclButtonLabel>
                         {{ 'ecl.common.PREVIOUS' | translate }}
                     </span>
                 </button>
                 <div class="ecl-gallery__detail-counter">
                     <span>{{ itemIndex }}</span> {{ 'ecl.common.OF' | translate }} <span>{{ itemsCount }}</span>
                 </div>
-                <button eclButton class="ecl-gallery__slider-next" variant="ghost" (click)="onNext($event)">
-                    <span eclButtonLabel class="ecl-u-sr-only">
+                <button eclButton class="ecl-gallery__slider-next" variant="tertiary" isIconOnly
+                    (click)="onNext($event)">
+                    <span eclButtonLabel>
                         {{ 'ecl.common.NEXT' | translate }}
                     </span>
                     <ecl-icon icon="corner-arrow" size="m" transform="rotate-90"></ecl-icon>
                 </button>
             </div>
+            <div class="ecl-gallery__detail-actions">
+                @if(canBeOpenInFullScreen()) {
+                <a eclLink variant="standalone" class="ecl-gallery__download" [href]="item?.getDownloadLink()"
+                    target="_blank" (click)="onFullScreenOpen($event)" isInverted>
+                    <span eclLinkLabel>{{ 'ecl.gallery.VIEW-ORIGINAL' | translate }}</span>
+                    <ecl-icon icon="fullscreen" size="fluid" focusable="false"></ecl-icon>
+                </a>
+                }
+                @if(canBeShared()) {
+                <a eclLink variant="standalone" isInverted class="ecl-gallery__share" href="" (click)="onShare($event)">
+                    <span eclLinkLabel>{{ 'ecl.common.SHARE' | translate }}</span>
+                    <ecl-icon icon="share" size="fluid" focusable="false"></ecl-icon>
+                </a>
+                }
+            </div>
+            @if(item?.description) {
+            <div *ngIf="item?.description" class="ecl-gallery__detail-description">{{ item?.description }}</div>
+            }
+            @if(item?.meta) {
+            <div *ngIf="item?.meta" class="ecl-gallery__detail-meta">{{ item?.meta }}</div>
+            }
         </div>
     </footer>
-</dialog>
-`, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i212.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i212.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isHiddenLabel", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i82.TranslatePipe, name: "translate" }] });
+</dialog>`, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i211.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i82.TranslatePipe, name: "translate" }] });
   }
 };
-__decorate11([
-  coerceBoolean9
-], EclGalleryComponent.prototype, "isDownloadable", void 0);
-__decorate11([
-  coerceBoolean9
-], EclGalleryComponent.prototype, "isOpenInFullScreenPossible", void 0);
-__decorate11([
-  coerceBoolean9
-], EclGalleryComponent.prototype, "isShareable", void 0);
-__decorate11([
-  coerceBoolean9
-], EclGalleryComponent.prototype, "isFullWidth", void 0);
-__decorate11([
-  coerceBoolean9
-], EclGalleryComponent.prototype, "isNoOverlay", void 0);
-__decorate11([
-  coerceNumber
-], EclGalleryComponent.prototype, "maxVisibleItems", void 0);
 i0116.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0116, type: EclGalleryComponent, decorators: [{
   type: Component52,
   args: [{ selector: "ecl-gallery", template: `<ul class="ecl-gallery__list">
@@ -8241,113 +8161,108 @@ i0116.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 
 <ng-content select="ecl-gallery-footer"></ng-content>
 
-<dialog
-    #overlay
-    [attr.open]="isDialogVisible || null"
-    class="ecl-gallery__overlay"
+<dialog #overlay [attr.open]="isDialogVisible || null" class="ecl-gallery__overlay"
     [attr.aria-label]="'ecl.gallery.FULL-SIZE-DISPLAY' | translate">
     <header #header class="ecl-gallery__close">
-        <button (click)="onClose($event)" eclButton class="ecl-gallery__close-button" variant="ghost">
+        <button (click)="onClose($event)" eclButton class="ecl-gallery__close-button" isIconOnly variant="ghost">
             <span eclButtonLabel>
                 {{ 'ecl.common.CLOSE' | translate }}
             </span>
-            <ecl-icon icon="close-filled" eclSize="s"></ecl-icon>
+            <ecl-icon icon="close" size="m"></ecl-icon>
         </button>
     </header>
     <section class="ecl-gallery__slider">
         <div class="ecl-gallery__slider-media-container">
-            <div #externalVideo class="ecl-gallery__slider-embed" *ngIf="item?.isExternalVideo">
-                <iframe
-                    [src]="item?.getUrlExternalVideo()"
-                    [style.width.px]="getIframeWidth()"
-                    [style.height.px]="getIframeHeight()"
-                    frameborder="0">
+            @if(item?.isExternalVideo) {
+            <div #externalVideo class="ecl-gallery__slider-embed">
+                <iframe [src]="item?.getUrlExternalVideo()" [style.width.px]="getIframeWidth()"
+                    [style.height.px]="getIframeHeight()" frameborder="0">
                 </iframe>
             </div>
-            <picture #image *ngIf="item?.isImage" class="ecl-picture ecl-gallery__picture ecl-gallery__slider-image">
+            }
+            @if(item?.isImage) {
+            <picture #image class="ecl-picture ecl-gallery__picture ecl-gallery__slider-image">
                 <img [attr.alt]="item?.label || null" [src]="item?.src" />
             </picture>
-            <video
-                #video
-                *ngIf="item?.isVideo"
-                controls="controls"
-                class="ecl-gallery__slider-video"
+            }
+            @if(item?.isVideo) {
+            <video #video controls="controls" class="ecl-gallery__slider-video"
                 [attr.poster]="item.mediaChild?.poster">
-                <source *ngFor="let item of item.mediaChild?.sources" [attr.src]="item.src" [attr.type]="item.type" />
-                <track
-                    *ngFor="let item of item.mediaChild?.tracks"
-                    [attr.src]="item"
-                    [attr.kind]="item.kind"
-                    [attr.srcLang]="item.srcLang"
-                    [attr.label]="item.label" />
+                @for (el of item.mediaChild?.sources; track el.src) {
+                <source [attr.src]="el.src" [attr.type]="el.type" />
+                }
+                @for (elem of item.mediaChild?.tracks; track elem.src) {
+                <track [attr.src]="elem.src" [attr.kind]="elem.kind"
+                    [attr.srcLang]="elem.srcLang" [attr.label]="elem.label" />
+                }
             </video>
+            }
         </div>
     </section>
     <footer #footer class="ecl-gallery__detail">
         <div class="ecl-container">
-            <div class="ecl-gallery__detail-actions">
-                <!-- @deprecated [download]="item?.src" -->
-                <a
-                    *ngIf="canBeDownloaded()"
-                    eclLink
-                    variant="standalone"
-                    class="ecl-gallery__download"
-                    [href]="item?.getDownloadLink()"
-                    [download]="item?.src"
-                    target="_blank"
-                    (click)="onDownload($event)">
-                    <span eclLinkLabel>{{ 'ecl.gallery.VIEW-ORIGINAL' | translate }}</span>
-                    <ecl-icon icon="fullscreen" transform="fluid" focusable="false"></ecl-icon>
-                </a>
-                <a *ngIf="canBeShared()" eclLink variant="standalone" class="ecl-gallery__share" href="" (click)="onShare($event)">
-                    <span eclLinkLabel>{{ 'ecl.common.SHARE' | translate }}</span>
-                    <ecl-icon icon="share" transform="fluid" focusable="false"></ecl-icon>
-                </a>
-            </div>
-
-            <div *ngIf="item?.description" class="ecl-gallery__detail-description">{{ item?.description }}</div>
-
-            <div *ngIf="item?.meta" class="ecl-gallery__detail-meta">{{ item?.meta }}</div>
-
             <div class="ecl-gallery__pager">
-                <button eclButton class="ecl-gallery__slider-previous" variant="ghost" (click)="onPrevious($event)">
+                <button eclButton class="ecl-gallery__slider-previous" variant="tertiary" isIconOnly
+                    (click)="onPrevious($event)">
                     <ecl-icon icon="corner-arrow" size="m" transform="rotate-270"></ecl-icon>
-                    <span eclButtonLabel class="ecl-u-sr-only">
+                    <span eclButtonLabel>
                         {{ 'ecl.common.PREVIOUS' | translate }}
                     </span>
                 </button>
                 <div class="ecl-gallery__detail-counter">
                     <span>{{ itemIndex }}</span> {{ 'ecl.common.OF' | translate }} <span>{{ itemsCount }}</span>
                 </div>
-                <button eclButton class="ecl-gallery__slider-next" variant="ghost" (click)="onNext($event)">
-                    <span eclButtonLabel class="ecl-u-sr-only">
+                <button eclButton class="ecl-gallery__slider-next" variant="tertiary" isIconOnly
+                    (click)="onNext($event)">
+                    <span eclButtonLabel>
                         {{ 'ecl.common.NEXT' | translate }}
                     </span>
                     <ecl-icon icon="corner-arrow" size="m" transform="rotate-90"></ecl-icon>
                 </button>
             </div>
+            <div class="ecl-gallery__detail-actions">
+                @if(canBeOpenInFullScreen()) {
+                <a eclLink variant="standalone" class="ecl-gallery__download" [href]="item?.getDownloadLink()"
+                    target="_blank" (click)="onFullScreenOpen($event)" isInverted>
+                    <span eclLinkLabel>{{ 'ecl.gallery.VIEW-ORIGINAL' | translate }}</span>
+                    <ecl-icon icon="fullscreen" size="fluid" focusable="false"></ecl-icon>
+                </a>
+                }
+                @if(canBeShared()) {
+                <a eclLink variant="standalone" isInverted class="ecl-gallery__share" href="" (click)="onShare($event)">
+                    <span eclLinkLabel>{{ 'ecl.common.SHARE' | translate }}</span>
+                    <ecl-icon icon="share" size="fluid" focusable="false"></ecl-icon>
+                </a>
+                }
+            </div>
+            @if(item?.description) {
+            <div *ngIf="item?.description" class="ecl-gallery__detail-description">{{ item?.description }}</div>
+            }
+            @if(item?.meta) {
+            <div *ngIf="item?.meta" class="ecl-gallery__detail-meta">{{ item?.meta }}</div>
+            }
         </div>
     </footer>
-</dialog>
-`, styles: [":host{display:block}\n"] }]
-}], ctorParameters: () => [{ type: i121.BreakpointObserver }], propDecorators: { isDownloadable: [{
-  type: Input45
-}], isOpenInFullScreenPossible: [{
-  type: Input45
+</dialog>`, styles: [":host{display:block}\n"] }]
+}], ctorParameters: () => [{ type: i120.BreakpointObserver }], propDecorators: { isOpenInFullScreenPossible: [{
+  type: Input45,
+  args: [{ transform: booleanAttribute16 }]
 }], isShareable: [{
-  type: Input45
+  type: Input45,
+  args: [{ transform: booleanAttribute16 }]
 }], isFullWidth: [{
-  type: Input45
+  type: Input45,
+  args: [{ transform: booleanAttribute16 }]
 }], isNoOverlay: [{
-  type: Input45
+  type: Input45,
+  args: [{ transform: booleanAttribute16 }]
 }], maxVisibleItems: [{
-  type: Input45
+  type: Input45,
+  args: [{ transform: numberAttribute3 }]
 }], show: [{
   type: Output20
 }], hide: [{
   type: Output20
-}], download: [{
-  type: Output20
 }], openFullScreen: [{
   type: Output20
 }], share: [{
@@ -8487,12 +8402,12 @@ var EclInpageNavigationItemComponent = class _EclInpageNavigationItemComponent e
     this.ɵfac = i0119.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0119, type: _EclInpageNavigationItemComponent, deps: null, target: i0119.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0119.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclInpageNavigationItemComponent, selector: "ecl-inpage-navigation-item", inputs: { label: "label", sectionId: "sectionId", isActive: "isActive" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.ecl-inpage-navigation__item": "this.cmpClass", "class.ecl-inpage-navigation__item--active": "this.isActive" } }, usesInheritance: true, ngImport: i0119, template: '<a eclLink (click)="onItemClick($event)" variant="standalone" href="#" class="ecl-inpage-navigation__link">\n    {{ label }}\n</a>\n', styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isHiddenLabel", "isNoVisited", "variant"] }] });
+    this.ɵcmp = i0119.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclInpageNavigationItemComponent, selector: "ecl-inpage-navigation-item", inputs: { label: "label", sectionId: "sectionId", isActive: "isActive" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.ecl-inpage-navigation__item": "this.cmpClass", "class.ecl-inpage-navigation__item--active": "this.isActive" } }, usesInheritance: true, ngImport: i0119, template: '<a eclLink (click)="onItemClick($event)" href="#" class="ecl-inpage-navigation__link">\n    {{ label }}\n</a>\n', styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }] });
   }
 };
 i0119.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0119, type: EclInpageNavigationItemComponent, decorators: [{
   type: Component53,
-  args: [{ selector: "ecl-inpage-navigation-item", template: '<a eclLink (click)="onItemClick($event)" variant="standalone" href="#" class="ecl-inpage-navigation__link">\n    {{ label }}\n</a>\n', styles: [":host{display:list-item}\n"] }]
+  args: [{ selector: "ecl-inpage-navigation-item", template: '<a eclLink (click)="onItemClick($event)" href="#" class="ecl-inpage-navigation__link">\n    {{ label }}\n</a>\n', styles: [":host{display:list-item}\n"] }]
 }], propDecorators: { cmpClass: [{
   type: HostBinding81,
   args: ["class.ecl-inpage-navigation__item"]
@@ -8510,11 +8425,11 @@ i0119.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-sticky-container/ecl-sticky-container.component.mjs
-import { Component as Component54, HostBinding as HostBinding82, Input as Input47, booleanAttribute as booleanAttribute15 } from "@angular/core";
+import { Component as Component54, HostBinding as HostBinding82, Input as Input47, booleanAttribute as booleanAttribute17 } from "@angular/core";
 import { Subject as Subject14, delay as delay2 } from "rxjs";
 import { takeUntil as takeUntil14 } from "rxjs/operators";
 import * as i0120 from "@angular/core";
-import * as i122 from "@angular/cdk/layout";
+import * as i121 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();
@@ -8553,18 +8468,18 @@ var EclStickyContainerComponent = class _EclStickyContainerComponent extends ECL
     });
   }
   static {
-    this.ɵfac = i0120.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0120, type: _EclStickyContainerComponent, deps: [{ token: i122.BreakpointObserver }, { token: i0120.Renderer2 }, { token: i0120.ElementRef }], target: i0120.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0120.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0120, type: _EclStickyContainerComponent, deps: [{ token: i121.BreakpointObserver }, { token: i0120.Renderer2 }, { token: i0120.ElementRef }], target: i0120.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0120.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: { isEnabled: ["isEnabled", "isEnabled", booleanAttribute15], marginTop: "marginTop", marginBottom: "marginBottom" }, host: { properties: { "class": "this.cssClasses", "style.top.px": "this.top", "style.bottom.px": "this.bottom" } }, usesInheritance: true, ngImport: i0120, template: "<ng-content></ng-content>\n", styles: [":host{display:block;align-self:flex-start;top:0;position:sticky;position:-webkit-sticky}:host.ecl-sticky-container--disabled{position:static}\n"] });
+    this.ɵcmp = i0120.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: { isEnabled: ["isEnabled", "isEnabled", booleanAttribute17], marginTop: "marginTop", marginBottom: "marginBottom" }, host: { properties: { "class": "this.cssClasses", "style.top.px": "this.top", "style.bottom.px": "this.bottom" } }, usesInheritance: true, ngImport: i0120, template: "<ng-content></ng-content>\n", styles: [":host{display:block;align-self:flex-start;top:0;position:sticky;position:-webkit-sticky}:host.ecl-sticky-container--disabled{position:static}\n"] });
   }
 };
 i0120.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0120, type: EclStickyContainerComponent, decorators: [{
   type: Component54,
   args: [{ selector: "ecl-sticky-container", template: "<ng-content></ng-content>\n", styles: [":host{display:block;align-self:flex-start;top:0;position:sticky;position:-webkit-sticky}:host.ecl-sticky-container--disabled{position:static}\n"] }]
-}], ctorParameters: () => [{ type: i122.BreakpointObserver }, { type: i0120.Renderer2 }, { type: i0120.ElementRef }], propDecorators: { isEnabled: [{
+}], ctorParameters: () => [{ type: i121.BreakpointObserver }, { type: i0120.Renderer2 }, { type: i0120.ElementRef }], propDecorators: { isEnabled: [{
   type: Input47,
-  args: [{ transform: booleanAttribute15 }]
+  args: [{ transform: booleanAttribute17 }]
 }], marginTop: [{
   type: Input47
 }], marginBottom: [{
@@ -8609,7 +8524,7 @@ import { EventEmitter as EventEmitter22, Component as Component55, Input as Inpu
 import { Subject as Subject15, fromEvent as fromEvent2 } from "rxjs";
 import { takeUntil as takeUntil15 } from "rxjs/operators";
 import * as i0122 from "@angular/core";
-import * as i33 from "@ngx-translate/core";
+import * as i46 from "@ngx-translate/core";
 var EclInpageNavigationSectionEnterEvent = class extends EclBaseEvent {
   constructor(sectionId) {
     super();
@@ -8617,14 +8532,26 @@ var EclInpageNavigationSectionEnterEvent = class extends EclBaseEvent {
   }
 };
 var EclInpageNavigationComponent = class _EclInpageNavigationComponent extends ECLBaseDirective {
-  constructor() {
-    super(...arguments);
+  get currentNavigationLinkItem() {
+    return this.eclNavigationLinkItems.find((item) => item.sectionElement === this.currentSectionElement);
+  }
+  constructor(eclThemeService, renderer) {
+    super();
+    this.eclThemeService = eclThemeService;
+    this.renderer = renderer;
     this.sectionEnter = new EventEmitter22();
     this.isButtonExpanded = false;
+    this.ICON_SIZE_FOR_EC_THEME_ON = "xs";
+    this.ICON_SIZE_FOR_EU_THEME_ON = "s";
+    this.HEADING_ACTIVATED_CLASS = "ecl-inpage-navigation__heading--active";
     this.destroy$ = new Subject15();
   }
-  get currentNavigationLinkItem() {
-    return this.eclNavigationLinkItems.find((item) => item.sectionElement === this.currentSectionElement);
+  get sizeIcon() {
+    if (this.eclThemeService.isECTheme()) {
+      return this.ICON_SIZE_FOR_EC_THEME_ON;
+    } else {
+      return this.ICON_SIZE_FOR_EU_THEME_ON;
+    }
   }
   ngAfterContentInit() {
     this.handleNavigationItemsScroll();
@@ -8664,8 +8591,12 @@ var EclInpageNavigationComponent = class _EclInpageNavigationComponent extends E
   handleNavigationLinksHighlight(sectionElements) {
     const currentSectionElement = this.findActiveSectionElement(sectionElements);
     if (currentSectionElement !== this.currentSectionElement) {
-      this.currentSectionElement?.classList.remove("ecl-inpage-navigation__heading--active");
-      currentSectionElement?.classList.add("ecl-inpage-navigation__heading--active");
+      if (this.currentSectionElement) {
+        this.renderer.removeClass(this.currentSectionElement, this.HEADING_ACTIVATED_CLASS);
+      }
+      if (currentSectionElement) {
+        this.renderer.addClass(currentSectionElement, this.HEADING_ACTIVATED_CLASS);
+      }
       this.currentSectionElement = currentSectionElement;
       this.onSectionScrollTrigger(currentSectionElement);
       const sectionId = this.currentNavigationLinkItem ? this.currentNavigationLinkItem.sectionId : void 0;
@@ -8693,7 +8624,7 @@ var EclInpageNavigationComponent = class _EclInpageNavigationComponent extends E
     return window.pageYOffset + window.innerHeight === document.documentElement.scrollHeight;
   }
   static {
-    this.ɵfac = i0122.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0122, type: _EclInpageNavigationComponent, deps: null, target: i0122.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0122.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0122, type: _EclInpageNavigationComponent, deps: [{ token: EclThemeService }, { token: i0122.Renderer2 }], target: i0122.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i0122.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclInpageNavigationComponent, selector: "ecl-inpage-navigation", inputs: { eclTitle: "eclTitle", marginTop: "marginTop", marginBottom: "marginBottom" }, outputs: { sectionEnter: "sectionEnter" }, queries: [{ propertyName: "eclNavigationLinkItems", predicate: EclInpageNavigationItemComponent }], usesInheritance: true, ngImport: i0122, template: `<ecl-sticky-container [marginTop]="marginTop" [marginBottom]="marginBottom">
@@ -8705,18 +8636,20 @@ var EclInpageNavigationComponent = class _EclInpageNavigationComponent extends E
             {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}
         </div>
         <div class="ecl-inpage-navigation__body">
-            <button
-                id="ecl-inpage-navigation-default-trigger"
-                type="button"
-                class="ecl-inpage-navigation__trigger"
-                aria-controls="ecl-inpage-navigation-list"
-                [attr.aria-expanded]="isButtonExpanded"
-                (click)="onExpandButtonClick($event)">
-                <span class="ecl-inpage-navigation__trigger-current">
-                    {{ currentNavigationLinkItem?.label }}
-                </span>
-                <ecl-icon icon="corner-arrow" size="s" transform="rotate-180" class="ecl-inpage-navigation__trigger-icon"> </ecl-icon>
-            </button>
+            <div class="ecl-inpage-navigation__trigger-wrapper">
+                <button
+                    id="ecl-inpage-navigation-default-trigger"
+                    type="button"
+                    class="ecl-inpage-navigation__trigger"
+                    aria-controls="ecl-inpage-navigation-list"
+                    [attr.aria-expanded]="isButtonExpanded"
+                    (click)="onExpandButtonClick($event)">
+                    <span class="ecl-inpage-navigation__trigger-current">
+                        {{ currentNavigationLinkItem?.label }}
+                    </span>
+                    <ecl-icon icon="corner-arrow" [size]="sizeIcon" transform="rotate-180" class="ecl-inpage-navigation__trigger-icon"> </ecl-icon>
+                </button>
+             </div>
             <ul
                 id="ecl-inpage-navigation-default-list"
                 class="ecl-inpage-navigation__list"
@@ -8728,7 +8661,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: i33.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: i46.TranslatePipe, name: "translate" }] });
   }
 };
 i0122.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0122, type: EclInpageNavigationComponent, decorators: [{
@@ -8742,18 +8675,20 @@ i0122.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
             {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}
         </div>
         <div class="ecl-inpage-navigation__body">
-            <button
-                id="ecl-inpage-navigation-default-trigger"
-                type="button"
-                class="ecl-inpage-navigation__trigger"
-                aria-controls="ecl-inpage-navigation-list"
-                [attr.aria-expanded]="isButtonExpanded"
-                (click)="onExpandButtonClick($event)">
-                <span class="ecl-inpage-navigation__trigger-current">
-                    {{ currentNavigationLinkItem?.label }}
-                </span>
-                <ecl-icon icon="corner-arrow" size="s" transform="rotate-180" class="ecl-inpage-navigation__trigger-icon"> </ecl-icon>
-            </button>
+            <div class="ecl-inpage-navigation__trigger-wrapper">
+                <button
+                    id="ecl-inpage-navigation-default-trigger"
+                    type="button"
+                    class="ecl-inpage-navigation__trigger"
+                    aria-controls="ecl-inpage-navigation-list"
+                    [attr.aria-expanded]="isButtonExpanded"
+                    (click)="onExpandButtonClick($event)">
+                    <span class="ecl-inpage-navigation__trigger-current">
+                        {{ currentNavigationLinkItem?.label }}
+                    </span>
+                    <ecl-icon icon="corner-arrow" [size]="sizeIcon" transform="rotate-180" class="ecl-inpage-navigation__trigger-icon"> </ecl-icon>
+                </button>
+             </div>
             <ul
                 id="ecl-inpage-navigation-default-list"
                 class="ecl-inpage-navigation__list"
@@ -8766,7 +8701,7 @@ i0122.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
     </nav>
 </ecl-sticky-container>
 `, styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"] }]
-}], propDecorators: { eclTitle: [{
+}], ctorParameters: () => [{ type: EclThemeService }, { type: i0122.Renderer2 }], propDecorators: { eclTitle: [{
   type: Input48
 }], marginTop: [{
   type: Input48
@@ -8807,7 +8742,7 @@ i0123.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 // lib/components/ecl-list-illustration/ecl-list-illustration-item.component.mjs
 import { Component as Component56, ContentChildren as ContentChildren14, forwardRef as forwardRef33, HostBinding as HostBinding83, Input as Input49 } from "@angular/core";
 import * as i0124 from "@angular/core";
-import * as i123 from "@angular/common";
+import * as i122 from "@angular/common";
 var EclListIllustrationItemComponent = class _EclListIllustrationItemComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -8825,7 +8760,7 @@ var EclListIllustrationItemComponent = class _EclListIllustrationItemComponent e
     this.ɵfac = i0124.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0124, type: _EclListIllustrationItemComponent, deps: null, target: i0124.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0124.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclListIllustrationItemComponent, selector: "ecl-list-illustration-item", inputs: { eclTitle: "eclTitle", eclValue: "eclValue" }, host: { properties: { "class.ecl-list-illustration__item": "this.className" } }, queries: [{ propertyName: "eclIllustrationIcons", predicate: i0124.forwardRef(() => EclListIllustrationIconDirective) }], usesInheritance: true, ngImport: i0124, template: '<ng-content select="[eclListIllustrationImage],[eclListIllustrationPicture]"></ng-content>\n<div class="ecl-list-illustration__detail">\n    <div *ngIf="hasTitle || hasValue" class="ecl-list-illustration__title-container">\n        <ng-content select="[eclListIllustrationIcon]"></ng-content>\n        <div *ngIf="hasValue" class="ecl-list-illustration__value">{{ eclValue }}</div>\n        <div class="ecl-list-illustration__title">{{ eclTitle }}</div>\n    </div>\n    <div class="ecl-list-illustration__description">\n        <ng-content></ng-content>\n    </div>\n</div>\n', dependencies: [{ kind: "directive", type: i123.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    this.ɵcmp = i0124.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclListIllustrationItemComponent, selector: "ecl-list-illustration-item", inputs: { eclTitle: "eclTitle", eclValue: "eclValue" }, host: { properties: { "class.ecl-list-illustration__item": "this.className" } }, queries: [{ propertyName: "eclIllustrationIcons", predicate: i0124.forwardRef(() => EclListIllustrationIconDirective) }], usesInheritance: true, ngImport: i0124, template: '<ng-content select="[eclListIllustrationImage],[eclListIllustrationPicture]"></ng-content>\n<div class="ecl-list-illustration__detail">\n    <div *ngIf="hasTitle || hasValue" class="ecl-list-illustration__title-container">\n        <ng-content select="[eclListIllustrationIcon]"></ng-content>\n        <div *ngIf="hasValue" class="ecl-list-illustration__value">{{ eclValue }}</div>\n        <div class="ecl-list-illustration__title">{{ eclTitle }}</div>\n    </div>\n    <div class="ecl-list-illustration__description">\n        <ng-content></ng-content>\n    </div>\n</div>\n', dependencies: [{ kind: "directive", type: i122.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   }
 };
 i0124.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0124, type: EclListIllustrationItemComponent, decorators: [{
@@ -8869,7 +8804,7 @@ i0125.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-list-illustration/ecl-list-illustration-picture.directive.mjs
-import { Directive as Directive33, HostBinding as HostBinding85, Input as Input50, booleanAttribute as booleanAttribute16 } from "@angular/core";
+import { Directive as Directive33, HostBinding as HostBinding85, Input as Input50, booleanAttribute as booleanAttribute18 } from "@angular/core";
 import * as i0126 from "@angular/core";
 var EclListIllustrationPictureDirective = class _EclListIllustrationPictureDirective extends ECLBaseDirective {
   get cssClasses() {
@@ -8908,7 +8843,7 @@ var EclListIllustrationImageDirective = class _EclListIllustrationImageDirective
     this.ɵfac = i0126.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0126, type: _EclListIllustrationImageDirective, deps: null, target: i0126.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0126.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclListIllustrationImageDirective, selector: "img[eclListIllustrationImage]", inputs: { isSquare: ["isSquare", "isSquare", booleanAttribute16], size: "size" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0126 });
+    this.ɵdir = i0126.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclListIllustrationImageDirective, selector: "img[eclListIllustrationImage]", inputs: { isSquare: ["isSquare", "isSquare", booleanAttribute18], size: "size" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0126 });
   }
 };
 i0126.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0126, type: EclListIllustrationImageDirective, decorators: [{
@@ -8918,7 +8853,7 @@ i0126.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   }]
 }], propDecorators: { isSquare: [{
   type: Input50,
-  args: [{ transform: booleanAttribute16 }]
+  args: [{ transform: booleanAttribute18 }]
 }], size: [{
   type: Input50
 }], cssClasses: [{
@@ -8927,7 +8862,7 @@ i0126.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-list-illustration/ecl-list-illustration.component.mjs
-import { Component as Component57, HostBinding as HostBinding86, Input as Input51, booleanAttribute as booleanAttribute17, numberAttribute as numberAttribute3 } from "@angular/core";
+import { Component as Component57, HostBinding as HostBinding86, Input as Input51, booleanAttribute as booleanAttribute19, numberAttribute as numberAttribute4 } from "@angular/core";
 import * as i0127 from "@angular/core";
 var EclListIllustrationComponent = class _EclListIllustrationComponent extends ECLBaseDirective {
   constructor() {
@@ -8946,7 +8881,7 @@ var EclListIllustrationComponent = class _EclListIllustrationComponent extends E
     this.ɵfac = i0127.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0127, type: _EclListIllustrationComponent, deps: null, target: i0127.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0127.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclListIllustrationComponent, selector: "ecl-list-illustration", inputs: { isZebra: ["isZebra", "isZebra", booleanAttribute17], horizontalColumns: ["horizontalColumns", "horizontalColumns", numberAttribute3] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0127, template: "<ng-content></ng-content>\n" });
+    this.ɵcmp = i0127.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclListIllustrationComponent, selector: "ecl-list-illustration", inputs: { isZebra: ["isZebra", "isZebra", booleanAttribute19], horizontalColumns: ["horizontalColumns", "horizontalColumns", numberAttribute4] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0127, template: "<ng-content></ng-content>\n" });
   }
 };
 i0127.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0127, type: EclListIllustrationComponent, decorators: [{
@@ -8954,10 +8889,10 @@ i0127.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   args: [{ selector: "ecl-list-illustration", template: "<ng-content></ng-content>\n" }]
 }], propDecorators: { isZebra: [{
   type: Input51,
-  args: [{ transform: booleanAttribute17 }]
+  args: [{ transform: booleanAttribute19 }]
 }], horizontalColumns: [{
   type: Input51,
-  args: [{ transform: numberAttribute3 }]
+  args: [{ transform: numberAttribute4 }]
 }], cssClasses: [{
   type: HostBinding86,
   args: ["class"]
@@ -9064,7 +8999,7 @@ i0129.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 // lib/components/ecl-list/ecl-description-list-definition/ecl-description-list-definition.component.mjs
 import { Component as Component58, ContentChildren as ContentChildren15, HostBinding as HostBinding88, Input as Input52 } from "@angular/core";
 import * as i0130 from "@angular/core";
-import * as i213 from "@ngx-translate/core";
+import * as i212 from "@ngx-translate/core";
 var EclDescriptionListDefinitionComponent = class _EclDescriptionListDefinitionComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -9125,7 +9060,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", "isHiddenLabel", "isNoVisited", "variant"] }, { kind: "pipe", type: i213.TranslatePipe, name: "translate" }] });
+}`, dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "pipe", type: i212.TranslatePipe, name: "translate" }] });
   }
 };
 i0130.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0130, type: EclDescriptionListDefinitionComponent, decorators: [{
@@ -9147,7 +9082,7 @@ i0130.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-list/ecl-list.directive.mjs
-import { ContentChildren as ContentChildren16, Directive as Directive35, HostBinding as HostBinding89, Input as Input53, booleanAttribute as booleanAttribute18, numberAttribute as numberAttribute4 } from "@angular/core";
+import { ContentChildren as ContentChildren16, Directive as Directive35, HostBinding as HostBinding89, Input as Input53, booleanAttribute as booleanAttribute20, numberAttribute as numberAttribute5 } from "@angular/core";
 import * as i0131 from "@angular/core";
 var EclOrderedListDirective = class _EclOrderedListDirective extends ECLBaseDirective {
   constructor() {
@@ -9202,7 +9137,7 @@ var EclUnorderedListDirective = class _EclUnorderedListDirective extends ECLBase
     this.ɵfac = i0131.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0131, type: _EclUnorderedListDirective, deps: null, target: i0131.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0131.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclUnorderedListDirective, selector: "[eclUnorderedList]", inputs: { isDivider: ["isDivider", "isDivider", booleanAttribute18], isNoMarker: ["isNoMarker", "isNoMarker", booleanAttribute18] }, 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: i0131 });
+    this.ɵdir = i0131.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclUnorderedListDirective, selector: "[eclUnorderedList]", inputs: { isDivider: ["isDivider", "isDivider", booleanAttribute20], isNoMarker: ["isNoMarker", "isNoMarker", booleanAttribute20] }, 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: i0131 });
   }
 };
 i0131.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0131, type: EclUnorderedListDirective, decorators: [{
@@ -9215,13 +9150,13 @@ i0131.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   args: ["class.ecl-unordered-list"]
 }], isDivider: [{
   type: Input53,
-  args: [{ transform: booleanAttribute18 }]
+  args: [{ transform: booleanAttribute20 }]
 }, {
   type: HostBinding89,
   args: ["class.ecl-unordered-list--divider"]
 }], isNoMarker: [{
   type: Input53,
-  args: [{ transform: booleanAttribute18 }]
+  args: [{ transform: booleanAttribute20 }]
 }, {
   type: HostBinding89,
   args: ["class.ecl-unordered-list--no-marker"]
@@ -9267,7 +9202,7 @@ var EclDescriptionListDirective = class _EclDescriptionListDirective extends ECL
     this.ɵfac = i0131.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0131, type: _EclDescriptionListDirective, deps: [{ token: i0131.ChangeDetectorRef }], target: i0131.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0131.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclDescriptionListDirective, selector: "[eclDescriptionList]", inputs: { isHorizontal: ["isHorizontal", "isHorizontal", booleanAttribute18], maxVisibleItems: ["maxVisibleItems", "maxVisibleItems", numberAttribute4] }, host: { properties: { "class.ecl-description-list--horizontal": "this.isHorizontal", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclListItems", predicate: EclDescriptionListDefinitionComponent }], usesInheritance: true, ngImport: i0131 });
+    this.ɵdir = i0131.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclDescriptionListDirective, selector: "[eclDescriptionList]", inputs: { isHorizontal: ["isHorizontal", "isHorizontal", booleanAttribute20], maxVisibleItems: ["maxVisibleItems", "maxVisibleItems", numberAttribute5] }, host: { properties: { "class.ecl-description-list--horizontal": "this.isHorizontal", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclListItems", predicate: EclDescriptionListDefinitionComponent }], usesInheritance: true, ngImport: i0131 });
   }
 };
 i0131.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0131, type: EclDescriptionListDirective, decorators: [{
@@ -9277,13 +9212,13 @@ i0131.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   }]
 }], ctorParameters: () => [{ type: i0131.ChangeDetectorRef }], propDecorators: { isHorizontal: [{
   type: Input53,
-  args: [{ transform: booleanAttribute18 }]
+  args: [{ transform: booleanAttribute20 }]
 }, {
   type: HostBinding89,
   args: ["class.ecl-description-list--horizontal"]
 }], maxVisibleItems: [{
   type: Input53,
-  args: [{ transform: numberAttribute4 }]
+  args: [{ transform: numberAttribute5 }]
 }], eclListItems: [{
   type: ContentChildren16,
   args: [EclDescriptionListDefinitionComponent]
@@ -9419,13 +9354,11 @@ var EclMenuItemParentFocusEvent = class {
 };
 
 // lib/components/ecl-menu/ecl-menu-mega/ecl-menu-mega-item.component.mjs
-import { __decorate as __decorate12 } from "tslib";
-import { Component as Component59, Input as Input54, HostBinding as HostBinding90, Output as Output23, EventEmitter as EventEmitter23, HostListener as HostListener11, ContentChildren as ContentChildren17, forwardRef as forwardRef35, ViewChild as ViewChild8 } from "@angular/core";
-import { coerceBoolean as coerceBoolean10 } from "@eui/base";
 import { ENTER } from "@angular/cdk/keycodes";
+import { Component as Component59, ContentChildren as ContentChildren17, EventEmitter as EventEmitter23, HostBinding as HostBinding90, HostListener as HostListener11, Input as Input54, Output as Output23, ViewChild as ViewChild8, booleanAttribute as booleanAttribute21, forwardRef as forwardRef35 } from "@angular/core";
 import * as i0133 from "@angular/core";
-import * as i124 from "@angular/common";
-import * as i214 from "@angular/router";
+import * as i123 from "@angular/common";
+import * as i213 from "@angular/router";
 var EclMenuMegaItemComponent = class _EclMenuMegaItemComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -9436,6 +9369,8 @@ var EclMenuMegaItemComponent = class _EclMenuMegaItemComponent extends ECLBaseDi
     this.target = "";
     this.cmpClass = true;
     this.role = "listitem";
+    this.isCurrent = false;
+    this.isSeeAll = false;
     this.menuItemSelect = new EventEmitter23();
     this.menuItemKeydown = new EventEmitter23();
     this.hasChildren = false;
@@ -9443,13 +9378,7 @@ var EclMenuMegaItemComponent = class _EclMenuMegaItemComponent extends ECLBaseDi
     this.children = [];
   }
   ngAfterViewInit() {
-    if (this.iconComponents) {
-      setTimeout(() => {
-        this.iconComponents.forEach((icn) => {
-          icn.class = "ecl-menu__sublink-icon";
-        });
-      });
-    }
+    this.manageContentChildren();
   }
   onItemClick(evt) {
     this.menuItemSelect.next(new EclMenuItemSelectEvent(this, evt));
@@ -9469,19 +9398,32 @@ var EclMenuMegaItemComponent = class _EclMenuMegaItemComponent extends ECLBaseDi
     }
     this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
   }
+  manageContentChildren() {
+    if (this.iconComponents) {
+      setTimeout(() => {
+        this.iconComponents.forEach((icn) => {
+          icn.class = "ecl-menu__sublink-icon";
+        });
+      });
+    }
+    if (this.links) {
+      setTimeout(() => {
+        this.links.forEach((icn) => {
+          icn.class = icn.class ? icn.class + " ecl-menu__sublink" : "ecl-menu__sublink";
+        });
+      });
+    }
+  }
   static {
     this.ɵfac = i0133.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0133, type: _EclMenuMegaItemComponent, deps: null, target: i0133.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0133.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclMenuMegaItemComponent, selector: "ecl-menu-mega-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: "isCurrent" }, 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" } }, queries: [{ propertyName: "iconComponents", predicate: i0133.forwardRef(() => EclIconComponent) }], viewQueries: [{ propertyName: "megaMenuLink", first: true, predicate: ["megaMenuLink"], descendants: true }], usesInheritance: true, ngImport: i0133, template: '<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\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i124.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i124.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i214.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    this.ɵcmp = i0133.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclMenuMegaItemComponent, selector: "ecl-menu-mega-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: ["isCurrent", "isCurrent", booleanAttribute21], isSeeAll: ["isSeeAll", "isSeeAll", booleanAttribute21] }, outputs: { menuItemSelect: "menuItemSelect", menuItemKeydown: "menuItemKeydown" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.ecl-menu__subitem": "this.cmpClass", "attr.role": "this.role", "class.ecl-menu__subitem--current": "this.isCurrent", "class.ecl-menu__see-all": "this.isSeeAll" } }, queries: [{ propertyName: "iconComponents", predicate: i0133.forwardRef(() => EclIconComponent) }, { propertyName: "links", predicate: i0133.forwardRef(() => EclLinkDirective) }], viewQueries: [{ propertyName: "megaMenuLink", first: true, predicate: ["megaMenuLink"], descendants: true }], usesInheritance: true, ngImport: i0133, template: '@if (!isSeeAll) {\n<a  #megaMenuLink\n    *ngIf="href"\n    [href]="href"\n    [target]="target"\n    class="ecl-menu__sublink"\n    [class.ecl-menu__sublink--current]="isCurrent"\n    (click)="onItemClick($event)"\n    (keydown)="onKeydown($event)">\n    {{ label }}\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</a>\n\n<a  #megaMenuLink\n    *ngIf="!href"\n    tabindex="0"\n    [routerLink]="routerLink"\n    [queryParams]="queryParams"\n    [queryParamsHandling]="queryParamsHandling"\n    class="ecl-menu__sublink"\n    [class.ecl-menu__sublink--current]="isCurrent"\n    (click)="onItemClick($event)"\n    (keydown)="onKeydown($event)">\n    {{ label }}\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</a>\n} @else {\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i123.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i123.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i213.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
   }
 };
-__decorate12([
-  coerceBoolean10
-], EclMenuMegaItemComponent.prototype, "isCurrent", void 0);
 i0133.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0133, type: EclMenuMegaItemComponent, decorators: [{
   type: Component59,
-  args: [{ selector: "ecl-menu-mega-item", template: '<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\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<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"] }]
 }], propDecorators: { id: [{
   type: Input54
 }], label: [{
@@ -9503,13 +9445,23 @@ i0133.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: HostBinding90,
   args: ["attr.role"]
 }], isCurrent: [{
-  type: Input54
+  type: Input54,
+  args: [{ transform: booleanAttribute21 }]
 }, {
   type: HostBinding90,
   args: ["class.ecl-menu__subitem--current"]
+}], isSeeAll: [{
+  type: Input54,
+  args: [{ transform: booleanAttribute21 }]
+}, {
+  type: HostBinding90,
+  args: ["class.ecl-menu__see-all"]
 }], iconComponents: [{
   type: ContentChildren17,
   args: [forwardRef35(() => EclIconComponent)]
+}], links: [{
+  type: ContentChildren17,
+  args: [forwardRef35(() => EclLinkDirective)]
 }], megaMenuLink: [{
   type: ViewChild8,
   args: ["megaMenuLink"]
@@ -9523,11 +9475,9 @@ i0133.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-menu/ecl-menu-mega/ecl-menu-mega.component.mjs
-import { __decorate as __decorate13 } from "tslib";
-import { Component as Component60, Input as Input55, ContentChildren as ContentChildren18, Output as Output24, EventEmitter as EventEmitter24, HostBinding as HostBinding91 } from "@angular/core";
+import { Component as Component60, ContentChildren as ContentChildren18, Output as Output24, EventEmitter as EventEmitter24, HostBinding as HostBinding91 } from "@angular/core";
 import { Subject as Subject16, of as of2 } from "rxjs";
 import { takeUntil as takeUntil16, mergeWith } from "rxjs/operators";
-import { coerceBoolean as coerceBoolean11 } from "@eui/base";
 import * as i0134 from "@angular/core";
 var EclMenuMegaComponent = class _EclMenuMegaComponent extends ECLBaseDirective {
   get cssClasses() {
@@ -9537,7 +9487,6 @@ var EclMenuMegaComponent = class _EclMenuMegaComponent extends ECLBaseDirective
     super();
     this.differs = differs;
     this.el = el;
-    this.isRtl = false;
     this.isRtlDisplay = false;
     this.menuItemSelect = new EventEmitter24();
     this.menuMegaItemParentFocus = new EventEmitter24();
@@ -9642,18 +9591,13 @@ var EclMenuMegaComponent = class _EclMenuMegaComponent extends ECLBaseDirective
     this.ɵfac = i0134.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0134, type: _EclMenuMegaComponent, deps: [{ token: i0134.IterableDiffers }, { token: i0134.ElementRef }], target: i0134.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0134.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclMenuMegaComponent, selector: "ecl-menu-mega", inputs: { isRtl: "isRtl" }, outputs: { menuItemSelect: "menuItemSelect", menuMegaItemParentFocus: "menuMegaItemParentFocus" }, host: { properties: { "class.ecl-menu__mega--rtl": "this.isRtlDisplay", "style.left.px": "this.offsetLeft", "style.right.px": "this.offsetRight", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclMenuMegaItems", predicate: EclMenuMegaItemComponent }], usesInheritance: true, ngImport: i0134, template: '<ul class="ecl-menu__sublist">\n    <ng-content></ng-content>\n</ul>\n' });
+    this.ɵcmp = i0134.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclMenuMegaComponent, selector: "ecl-menu-mega", outputs: { menuItemSelect: "menuItemSelect", menuMegaItemParentFocus: "menuMegaItemParentFocus" }, host: { properties: { "class.ecl-menu__mega--rtl": "this.isRtlDisplay", "style.left.px": "this.offsetLeft", "style.right.px": "this.offsetRight", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclMenuMegaItems", predicate: EclMenuMegaItemComponent }], usesInheritance: true, ngImport: i0134, template: '<ul class="ecl-menu__sublist">\n    <ng-content></ng-content>\n</ul>\n' });
   }
 };
-__decorate13([
-  coerceBoolean11
-], EclMenuMegaComponent.prototype, "isRtl", void 0);
 i0134.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0134, type: EclMenuMegaComponent, decorators: [{
   type: Component60,
   args: [{ selector: "ecl-menu-mega", template: '<ul class="ecl-menu__sublist">\n    <ng-content></ng-content>\n</ul>\n' }]
-}], ctorParameters: () => [{ type: i0134.IterableDiffers }, { type: i0134.ElementRef }], propDecorators: { isRtl: [{
-  type: Input55
-}], isRtlDisplay: [{
+}], ctorParameters: () => [{ type: i0134.IterableDiffers }, { type: i0134.ElementRef }], propDecorators: { isRtlDisplay: [{
   type: HostBinding91,
   args: ["class.ecl-menu__mega--rtl"]
 }], eclMenuMegaItems: [{
@@ -9675,13 +9619,13 @@ i0134.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-menu/ecl-menu/ecl-menu-item.component.mjs
-import { Component as Component61, ContentChild as ContentChild18, EventEmitter as EventEmitter25, forwardRef as forwardRef37, HostBinding as HostBinding92, HostListener as HostListener12, Input as Input56, Output as Output25, ViewChild as ViewChild9, ViewEncapsulation as ViewEncapsulation7 } from "@angular/core";
+import { Component as Component61, ContentChild as ContentChild18, EventEmitter as EventEmitter25, forwardRef as forwardRef37, HostBinding as HostBinding92, HostListener as HostListener12, Input as Input55, Output as Output25, ViewChild as ViewChild9, ViewEncapsulation as ViewEncapsulation7 } from "@angular/core";
 import { Subject as Subject17 } from "rxjs";
 import { takeUntil as takeUntil17 } from "rxjs/operators";
 import { Breakpoints as Breakpoints2 } from "@angular/cdk/layout";
 import * as i0135 from "@angular/core";
-import * as i125 from "@angular/cdk/layout";
-import * as i46 from "@angular/common";
+import * as i124 from "@angular/cdk/layout";
+import * as i47 from "@angular/common";
 import * as i53 from "@angular/router";
 var EclMenuItemComponent = class _EclMenuItemComponent extends ECLBaseDirective {
   get cssClasses() {
@@ -9953,11 +9897,12 @@ var EclMenuItemComponent = class _EclMenuItemComponent extends ECLBaseDirective
     });
   }
   static {
-    this.ɵfac = i0135.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0135, type: _EclMenuItemComponent, deps: [{ token: i0135.ElementRef }, { token: i0135.Renderer2 }, { token: i0135.ApplicationRef }, { token: i125.BreakpointObserver }], target: i0135.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0135.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0135, type: _EclMenuItemComponent, deps: [{ token: i0135.ElementRef }, { token: i0135.Renderer2 }, { token: i0135.ApplicationRef }, { token: i124.BreakpointObserver }], target: i0135.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i0135.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclMenuItemComponent, selector: "ecl-menu-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: "isCurrent" }, outputs: { menuItemSelect: "menuItemSelect", menuItemCaret: "menuItemCaret", menuItemHover: "menuItemHover", menuItemHoverOut: "menuItemHoverOut", menuMegaItemSelect: "menuMegaItemSelect", menuItemFocus: "menuItemFocus", menuItemKeydown: "menuItemKeydown" }, host: { listeners: { "mouseenter": "onItemMouseEnter($event)", "mouseleave": "onItemMouseLeave($event)" }, properties: { "attr.role": "this.role", "class": "this.cssClasses", "class.ecl-menu__item--has-children": "this.hasEclChildrenDataAttribute", "attr.aria-haspopup": "this.hasEclChildrenDataAttribute", "attr.aria-expanded": "this.isAriaExpanded" } }, queries: [{ propertyName: "submenu", first: true, predicate: i0135.forwardRef(() => EclMenuMegaComponent), descendants: true }], viewQueries: [{ propertyName: "menuLink", first: true, predicate: ["menuLink"], descendants: true }, { propertyName: "menuButton", first: true, predicate: EclButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0135, template: `<a
     #menuLink
+    variant="standalone"
     *ngIf="href"
     [href]="href"
     [target]="target"
@@ -9971,6 +9916,7 @@ var EclMenuItemComponent = class _EclMenuItemComponent extends ECLBaseDirective
 </a>
 <a
     #menuLink
+    variant="standalone"
     *ngIf="!href"
     tabindex="0"
     [routerLink]="routerLink"
@@ -9986,8 +9932,9 @@ var EclMenuItemComponent = class _EclMenuItemComponent extends ECLBaseDirective
 </a>
 <button
     eclButton
+    isIconOnly
     *ngIf="hasChildren && isMobileBreakpoint"
-    variant="primary"
+    variant="ghost"
     class="ecl-menu__button-caret"
     type="button"
     aria-label="Access item's children"
@@ -9997,8 +9944,9 @@ var EclMenuItemComponent = class _EclMenuItemComponent extends ECLBaseDirective
 </button>
 <button
     eclButton
+    isIconOnly
     *ngIf="hasChildren && !isMobileBreakpoint"
-    variant="primary"
+    variant="ghost"
     class="ecl-menu__button-caret"
     type="button"
     aria-label="Access item's children"
@@ -10011,13 +9959,14 @@ var EclMenuItemComponent = class _EclMenuItemComponent extends ECLBaseDirective
 <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: i53.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0135.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: i47.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i47.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i53.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0135.ViewEncapsulation.None });
   }
 };
 i0135.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0135, type: EclMenuItemComponent, decorators: [{
   type: Component61,
   args: [{ selector: "ecl-menu-item", encapsulation: ViewEncapsulation7.None, template: `<a
     #menuLink
+    variant="standalone"
     *ngIf="href"
     [href]="href"
     [target]="target"
@@ -10031,6 +9980,7 @@ i0135.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 </a>
 <a
     #menuLink
+    variant="standalone"
     *ngIf="!href"
     tabindex="0"
     [routerLink]="routerLink"
@@ -10046,8 +9996,9 @@ i0135.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 </a>
 <button
     eclButton
+    isIconOnly
     *ngIf="hasChildren && isMobileBreakpoint"
-    variant="primary"
+    variant="ghost"
     class="ecl-menu__button-caret"
     type="button"
     aria-label="Access item's children"
@@ -10057,8 +10008,9 @@ i0135.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 </button>
 <button
     eclButton
+    isIconOnly
     *ngIf="hasChildren && !isMobileBreakpoint"
-    variant="primary"
+    variant="ghost"
     class="ecl-menu__button-caret"
     type="button"
     aria-label="Access item's children"
@@ -10072,22 +10024,22 @@ i0135.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
     <ng-content></ng-content>
 </ng-template>
 ` }]
-}], ctorParameters: () => [{ type: i0135.ElementRef }, { type: i0135.Renderer2 }, { type: i0135.ApplicationRef }, { type: i125.BreakpointObserver }], propDecorators: { id: [{
-  type: Input56
+}], ctorParameters: () => [{ type: i0135.ElementRef }, { type: i0135.Renderer2 }, { type: i0135.ApplicationRef }, { type: i124.BreakpointObserver }], propDecorators: { id: [{
+  type: Input55
 }], label: [{
-  type: Input56
+  type: Input55
 }], routerLink: [{
-  type: Input56
+  type: Input55
 }], queryParams: [{
-  type: Input56
+  type: Input55
 }], queryParamsHandling: [{
-  type: Input56
+  type: Input55
 }], href: [{
-  type: Input56
+  type: Input55
 }], target: [{
-  type: Input56
+  type: Input55
 }], isCurrent: [{
-  type: Input56
+  type: Input55
 }], role: [{
   type: HostBinding92,
   args: ["attr.role"]
@@ -10135,16 +10087,14 @@ i0135.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-menu/ecl-menu/ecl-menu.component.mjs
-import { __decorate as __decorate14 } from "tslib";
 import { Breakpoints as Breakpoints3 } from "@angular/cdk/layout";
-import { Component as Component62, ContentChildren as ContentChildren19, EventEmitter as EventEmitter26, HostBinding as HostBinding93, HostListener as HostListener13, Input as Input57, Output as Output26, ViewChild as ViewChild10 } from "@angular/core";
-import { coerceNumber as coerceNumber2 } from "@eui/base";
+import { Component as Component62, ContentChildren as ContentChildren19, EventEmitter as EventEmitter26, HostBinding as HostBinding93, HostListener as HostListener13, Input as Input56, Output as Output26, ViewChild as ViewChild10, numberAttribute as numberAttribute6 } from "@angular/core";
 import Hammer from "hammerjs";
 import { Subject as Subject18, of as of3 } from "rxjs";
 import { mergeWith as mergeWith2, takeUntil as takeUntil18 } from "rxjs/operators";
 import * as i0136 from "@angular/core";
-import * as i126 from "@angular/cdk/layout";
-import * as i72 from "@ngx-translate/core";
+import * as i125 from "@angular/cdk/layout";
+import * as i83 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(" ");
@@ -10634,20 +10584,27 @@ var EclMenuComponent = class _EclMenuComponent extends ECLBaseDirective {
     });
   }
   static {
-    this.ɵfac = i0136.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0136, type: _EclMenuComponent, deps: [{ token: i0136.ElementRef }, { token: i0136.IterableDiffers }, { token: i126.BreakpointObserver }, { token: i0136.Renderer2 }, { token: EclRtlService }], target: i0136.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0136.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0136, type: _EclMenuComponent, deps: [{ token: i0136.ElementRef }, { token: i0136.IterableDiffers }, { token: i125.BreakpointObserver }, { token: i0136.Renderer2 }, { token: EclRtlService }], target: i0136.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0136.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclMenuComponent, selector: "ecl-menu", inputs: { group: "group", maxLines: "maxLines" }, outputs: { menuItemSelect: "menuItemSelect" }, host: { listeners: { "keydown": "keyEvent($event)", "window:resize": "onResize()" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isHamburgerMenuOpened", "attr.role": "this.role", "class.ecl-menu--forced-mobile": "this.isMobileBreakpoint", "class.ecl-menu--forced-close": "this.isMenuHidden" } }, queries: [{ propertyName: "eclRootMenuItems", predicate: EclMenuItemComponent }], viewQueries: [{ propertyName: "innerSection", first: true, predicate: ["innerSection"], descendants: true }, { propertyName: "itemsList", first: true, predicate: ["itemsList"], descendants: true }, { propertyName: "btnPrevious", first: true, predicate: ["btnPrevious"], descendants: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true }], usesInheritance: true, ngImport: i0136, template: `<div class="ecl-menu__overlay" (click)="onOverlayClick()"></div>
+    this.ɵcmp = i0136.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclMenuComponent, selector: "ecl-menu", inputs: { group: "group", maxLines: ["maxLines", "maxLines", numberAttribute6] }, outputs: { menuItemSelect: "menuItemSelect" }, host: { listeners: { "keydown": "keyEvent($event)", "window:resize": "onResize()" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isHamburgerMenuOpened", "attr.role": "this.role", "class.ecl-menu--forced-mobile": "this.isMobileBreakpoint", "class.ecl-menu--forced-close": "this.isMenuHidden" } }, queries: [{ propertyName: "eclRootMenuItems", predicate: EclMenuItemComponent }], viewQueries: [{ propertyName: "innerSection", first: true, predicate: ["innerSection"], descendants: true }, { propertyName: "itemsList", first: true, predicate: ["itemsList"], descendants: true }, { propertyName: "btnPrevious", first: true, predicate: ["btnPrevious"], descendants: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true }], usesInheritance: true, ngImport: i0136, template: `<div class="ecl-menu__overlay" (click)="onOverlayClick()"></div>
 <div class="ecl-container ecl-menu__container">
-    <a eclLink href="#" variant="standalone" class="ecl-menu__open" (click)="onMenuOpenClick($event)">
-        <ecl-icon icon="hamburger" size="s"></ecl-icon> {{ 'ecl.menu.MENU' | translate }}
+    <a eclLink href="#" variant="standalone" isIconOnly class="ecl-menu__open ecl-button ecl-button--tertiary"
+        (click)="onMenuOpenClick($event)">
+        <ecl-icon icon="hamburger" size="m"></ecl-icon>
+        <ecl-icon icon="close" size="m"></ecl-icon>
+        @if (isHamburgerMenuOpened) {
+        <span eclLinkLabel>{{ 'ecl.common.CLOSE' | translate }}</span>
+        } @else {
+        <span eclLinkLabel>{{ 'ecl.menu.MENU' | translate }}</span>
+        }
     </a>
 
     <section
         class="ecl-menu__inner"
         #innerSection
         [class.ecl-menu__inner--expanded]="isMenuExpandedInMobile"
-        [class.ecl-menu__inner--has-overflow]="hasOverflow">
+        [class.ecl-menu__inner--has-overflow]="hasOverflow" role="application">
         <header class="ecl-menu__inner-header">
             <button
                 eclButton
@@ -10655,8 +10612,8 @@ var EclMenuComponent = class _EclMenuComponent extends ECLBaseDirective {
                 class="ecl-menu__close"
                 containerStyleClass="ecl-menu__close-container"
                 (click)="onMenuCloseClick($event)">
-                <ecl-icon icon="close-filled" size="s"></ecl-icon>
                 <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>
+                <ecl-icon icon="close-filled" size="s"></ecl-icon>
             </button>
 
             <div class="ecl-menu__title">{{ 'ecl.menu.MENU' | translate }}</div>
@@ -10671,6 +10628,7 @@ var EclMenuComponent = class _EclMenuComponent extends ECLBaseDirective {
             #btnPrevious
             tabindex="-1"
             variant="ghost"
+            isIconOnly
             class="ecl-menu__item ecl-menu__items-previous"
             [class.ecl-menu__item--current]="isPrevBtnCurrentClass"
             [style.display]="isShowPrevBtn ? 'block' : 'none'"
@@ -10683,6 +10641,7 @@ var EclMenuComponent = class _EclMenuComponent extends ECLBaseDirective {
             #btnNext
             variant="ghost"
             tabindex="-1"
+            isIconOnly
             class="ecl-menu__item ecl-menu__items-next"
             [class.ecl-menu__item--current]="!isPrevBtnCurrentClass"
             [style.display]="isShowNextBtn ? 'block' : 'none'"
@@ -10695,25 +10654,29 @@ 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", "isHiddenLabel", "isNoVisited", "variant"] }, { kind: "pipe", type: i72.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: i83.TranslatePipe, name: "translate" }] });
   }
 };
-__decorate14([
-  coerceNumber2
-], EclMenuComponent.prototype, "maxLines", void 0);
 i0136.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0136, type: EclMenuComponent, decorators: [{
   type: Component62,
   args: [{ selector: "ecl-menu", template: `<div class="ecl-menu__overlay" (click)="onOverlayClick()"></div>
 <div class="ecl-container ecl-menu__container">
-    <a eclLink href="#" variant="standalone" class="ecl-menu__open" (click)="onMenuOpenClick($event)">
-        <ecl-icon icon="hamburger" size="s"></ecl-icon> {{ 'ecl.menu.MENU' | translate }}
+    <a eclLink href="#" variant="standalone" isIconOnly class="ecl-menu__open ecl-button ecl-button--tertiary"
+        (click)="onMenuOpenClick($event)">
+        <ecl-icon icon="hamburger" size="m"></ecl-icon>
+        <ecl-icon icon="close" size="m"></ecl-icon>
+        @if (isHamburgerMenuOpened) {
+        <span eclLinkLabel>{{ 'ecl.common.CLOSE' | translate }}</span>
+        } @else {
+        <span eclLinkLabel>{{ 'ecl.menu.MENU' | translate }}</span>
+        }
     </a>
 
     <section
         class="ecl-menu__inner"
         #innerSection
         [class.ecl-menu__inner--expanded]="isMenuExpandedInMobile"
-        [class.ecl-menu__inner--has-overflow]="hasOverflow">
+        [class.ecl-menu__inner--has-overflow]="hasOverflow" role="application">
         <header class="ecl-menu__inner-header">
             <button
                 eclButton
@@ -10721,8 +10684,8 @@ i0136.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
                 class="ecl-menu__close"
                 containerStyleClass="ecl-menu__close-container"
                 (click)="onMenuCloseClick($event)">
-                <ecl-icon icon="close-filled" size="s"></ecl-icon>
                 <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>
+                <ecl-icon icon="close-filled" size="s"></ecl-icon>
             </button>
 
             <div class="ecl-menu__title">{{ 'ecl.menu.MENU' | translate }}</div>
@@ -10737,6 +10700,7 @@ i0136.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
             #btnPrevious
             tabindex="-1"
             variant="ghost"
+            isIconOnly
             class="ecl-menu__item ecl-menu__items-previous"
             [class.ecl-menu__item--current]="isPrevBtnCurrentClass"
             [style.display]="isShowPrevBtn ? 'block' : 'none'"
@@ -10749,6 +10713,7 @@ i0136.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
             #btnNext
             variant="ghost"
             tabindex="-1"
+            isIconOnly
             class="ecl-menu__item ecl-menu__items-next"
             [class.ecl-menu__item--current]="!isPrevBtnCurrentClass"
             [style.display]="isShowNextBtn ? 'block' : 'none'"
@@ -10762,10 +10727,11 @@ i0136.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
     </section>
 </div>
 `, styles: [":host{display:block}\n"] }]
-}], ctorParameters: () => [{ type: i0136.ElementRef }, { type: i0136.IterableDiffers }, { type: i126.BreakpointObserver }, { type: i0136.Renderer2 }, { type: EclRtlService }], propDecorators: { group: [{
-  type: Input57
+}], ctorParameters: () => [{ type: i0136.ElementRef }, { type: i0136.IterableDiffers }, { type: i125.BreakpointObserver }, { type: i0136.Renderer2 }, { type: EclRtlService }], propDecorators: { group: [{
+  type: Input56
 }], maxLines: [{
-  type: Input57
+  type: Input56,
+  args: [{ transform: numberAttribute6 }]
 }], eclRootMenuItems: [{
   type: ContentChildren19,
   args: [EclMenuItemComponent]
@@ -10859,7 +10825,7 @@ i0137.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] });
 
 // lib/components/ecl-modal/ecl-modal-close.directive.mjs
-import { Directive as Directive36, EventEmitter as EventEmitter27, HostListener as HostListener14, Input as Input58, Output as Output27 } from "@angular/core";
+import { Directive as Directive36, EventEmitter as EventEmitter27, HostListener as HostListener14, Input as Input57, Output as Output27 } from "@angular/core";
 import * as i0138 from "@angular/core";
 var EclModalCloseDirective = class _EclModalCloseDirective extends ECLBaseDirective {
   constructor() {
@@ -10882,10 +10848,10 @@ i0138.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
     selector: "[eclModalClose]"
   }]
 }], propDecorators: { eclModalResult: [{
-  type: Input58,
+  type: Input57,
   args: ["eclModalClose"]
 }], eclModalRole: [{
-  type: Input58
+  type: Input57
 }], modalClose: [{
   type: Output27
 }], onClick: [{
@@ -10894,7 +10860,7 @@ i0138.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-modal/ecl-modal-header.component.mjs
-import { Component as Component63, EventEmitter as EventEmitter28, HostBinding as HostBinding94, Input as Input59, Output as Output28 } from "@angular/core";
+import { Component as Component63, EventEmitter as EventEmitter28, HostBinding as HostBinding94, Input as Input58, Output as Output28 } from "@angular/core";
 import * as i0139 from "@angular/core";
 var EclModalHeaderComponent = class _EclModalHeaderComponent extends ECLBaseDirective {
   get cssClasses() {
@@ -10940,7 +10906,7 @@ i0139.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: Component63,
   args: [{ selector: "[eclModalHeader]", template: '@if(getIcon()) {\n    <ecl-icon [icon]="getIcon()" size="l" class="ecl-modal__icon"> </ecl-icon>\n}\n<div class="ecl-modal__header-content">\n    <ng-content></ng-content>\n</div>\n<button eclButton variant="tertiary" isIconOnly class="ecl-modal__close" type="button" (click)="onCloseClick()">\n    <span eclButtonLabel>Close</span>\n    <ecl-icon [icon]="getCloseIcon()" size="m"></ecl-icon>\n</button>\n' }]
 }], ctorParameters: () => [{ type: EclThemeService }], propDecorators: { variant: [{
-  type: Input59
+  type: Input58
 }], modalClose: [{
   type: Output28
 }], cssClasses: [{
@@ -10950,7 +10916,7 @@ i0139.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 
 // lib/components/ecl-modal/ecl-modal.component.mjs
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
-import { Component as Component64, ContentChild as ContentChild19, ContentChildren as ContentChildren20, EventEmitter as EventEmitter29, forwardRef as forwardRef39, HostBinding as HostBinding95, HostListener as HostListener15, Input as Input60, Output as Output29 } from "@angular/core";
+import { Component as Component64, ContentChild as ContentChild19, ContentChildren as ContentChildren20, EventEmitter as EventEmitter29, forwardRef as forwardRef39, HostBinding as HostBinding95, HostListener as HostListener15, Input as Input59, Output as Output29 } from "@angular/core";
 import { Subject as Subject19, takeUntil as takeUntil19 } from "rxjs";
 import * as i0140 from "@angular/core";
 var EclModalOpenEvent = class extends EclBaseEvent {
@@ -11041,9 +11007,9 @@ i0140.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: Component64,
   args: [{ selector: "dialog[eclModal]", template: '<div class="ecl-modal__container ecl-container">\n    <div class="ecl-modal__content ecl-col-12 ecl-col-m-8 ecl-offset-m-2 ecl-col-l-6 ecl-offset-l-3">\n        <ng-content></ng-content>\n    </div>\n</div>\n' }]
 }], propDecorators: { variant: [{
-  type: Input60
+  type: Input59
 }], isOpen: [{
-  type: Input60
+  type: Input59
 }], modalClose: [{
   type: Output29
 }], modalOpen: [{
@@ -11066,9 +11032,9 @@ i0140.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-modal/ecl-modal-body.component.mjs
-import { Component as Component65, HostBinding as HostBinding96, Input as Input61, booleanAttribute as booleanAttribute19 } from "@angular/core";
+import { Component as Component65, HostBinding as HostBinding96, Input as Input60, booleanAttribute as booleanAttribute22 } from "@angular/core";
 import * as i0141 from "@angular/core";
-import * as i127 from "@angular/common";
+import * as i126 from "@angular/common";
 var EclModalBodyComponent = class _EclModalBodyComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -11084,15 +11050,15 @@ var EclModalBodyComponent = class _EclModalBodyComponent extends ECLBaseDirectiv
     this.ɵfac = i0141.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0141, type: _EclModalBodyComponent, deps: null, target: i0141.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0141.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclModalBodyComponent, selector: "[eclModalBody]", inputs: { isScrollable: ["isScrollable", "isScrollable", booleanAttribute19] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0141, template: '@if (isScrollable) {\n<div class="ecl-modal__body-scroll">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</div>\n<div class="ecl-modal__body-overflow" aria-hidden="true"></div>\n<ng-content select="[eclModalBodyFixedContent]"></ng-content>\n} @else {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>', dependencies: [{ kind: "directive", type: i127.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    this.ɵcmp = i0141.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclModalBodyComponent, selector: "[eclModalBody]", inputs: { isScrollable: ["isScrollable", "isScrollable", booleanAttribute22] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0141, template: '@if (isScrollable) {\n<div class="ecl-modal__body-scroll">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</div>\n<div class="ecl-modal__body-overflow" aria-hidden="true"></div>\n<ng-content select="[eclModalBodyFixedContent]"></ng-content>\n} @else {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>', dependencies: [{ kind: "directive", type: i126.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
   }
 };
 i0141.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0141, type: EclModalBodyComponent, decorators: [{
   type: Component65,
   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: Input61,
-  args: [{ transform: booleanAttribute19 }]
+  type: Input60,
+  args: [{ transform: booleanAttribute22 }]
 }], cssClasses: [{
   type: HostBinding96,
   args: ["class"]
@@ -11133,7 +11099,7 @@ i0142.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-modal/ecl-modal-trigger.directive.mjs
-import { Directive as Directive37, HostListener as HostListener16, Input as Input62 } from "@angular/core";
+import { Directive as Directive37, HostListener as HostListener16, Input as Input61 } from "@angular/core";
 import * as i0143 from "@angular/core";
 var EclModalTriggerDirective = class _EclModalTriggerDirective extends ECLBaseDirective {
   onClick(evt) {
@@ -11152,7 +11118,7 @@ i0143.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
     selector: "[eclModalTriggerFor]"
   }]
 }], propDecorators: { eclModalTriggerFor: [{
-  type: Input62
+  type: Input61
 }], onClick: [{
   type: HostListener16,
   args: ["click", ["$event"]]
@@ -11272,9 +11238,9 @@ i0146.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] });
 
 // lib/components/ecl-multiselect/ecl-multiselect-option/ecl-multiselect-option.component.mjs
-import { __decorate as __decorate15 } from "tslib";
-import { Component as Component67, EventEmitter as EventEmitter30, HostBinding as HostBinding99, Input as Input63, Output as Output30, ViewChild as ViewChild11 } from "@angular/core";
-import { coerceBoolean as coerceBoolean12 } from "@eui/base";
+import { __decorate as __decorate10 } from "tslib";
+import { Component as Component67, EventEmitter as EventEmitter30, HostBinding as HostBinding99, Input as Input62, Output as Output30, ViewChild as ViewChild11 } from "@angular/core";
+import { coerceBoolean as coerceBoolean8 } from "@eui/base";
 import { Subject as Subject20 } from "rxjs";
 import { v4 as uuidgen3 } from "uuid";
 import * as i0147 from "@angular/core";
@@ -11363,8 +11329,8 @@ var EclMultiselectOptionComponent = class _EclMultiselectOptionComponent extends
     this.ɵcmp = i0147.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: { value: "value", label: "label", disabled: "disabled", isChecked: "isChecked" }, outputs: { optionClick: "optionClick", optionKeydown: "optionKeydown" }, host: { properties: { "class.ecl-checkbox--disabled": "this.disabled", "attr.disabled": "this.disabled", "style.display": "this.display", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "eclCheckboxInput", first: true, predicate: ["checkboxInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: EclCheckboxDirective }], ngImport: i0147, 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"] }, { kind: "directive", type: EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "pipe", type: BoldTextPipe, name: "boldText" }] });
   }
 };
-__decorate15([
-  coerceBoolean12
+__decorate10([
+  coerceBoolean8
 ], EclMultiselectOptionComponent.prototype, "disabled", void 0);
 i0147.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0147, type: EclMultiselectOptionComponent, decorators: [{
   type: Component67,
@@ -11375,14 +11341,14 @@ i0147.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
     args: ["checkboxInput"]
   }],
   value: [{
-    type: Input63
+    type: Input62
   }],
   label: [{
-    type: Input63
+    type: Input62
   }],
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   disabled: [{
-    type: Input63
+    type: Input62
   }, {
     type: HostBinding99,
     args: ["class.ecl-checkbox--disabled"]
@@ -11405,14 +11371,14 @@ i0147.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
     args: ["class"]
   }],
   isChecked: [{
-    type: Input63
+    type: Input62
   }]
 } });
 
 // lib/components/ecl-multiselect/ecl-multiselect-input/ecl-multiselect-input.component.mjs
-import { __decorate as __decorate16 } from "tslib";
-import { Component as Component68, EventEmitter as EventEmitter31, HostBinding as HostBinding100, Input as Input64, Output as Output31, ViewChild as ViewChild12 } from "@angular/core";
-import { coerceBoolean as coerceBoolean13 } from "@eui/base";
+import { __decorate as __decorate11 } from "tslib";
+import { Component as Component68, EventEmitter as EventEmitter31, HostBinding as HostBinding100, Input as Input63, Output as Output31, ViewChild as ViewChild12 } from "@angular/core";
+import { coerceBoolean as coerceBoolean9 } from "@eui/base";
 import * as i0148 from "@angular/core";
 var EclMultiselectMainInputClickEvent = class {
   constructor(event) {
@@ -11469,26 +11435,26 @@ var EclMultiselectInputComponent = class _EclMultiselectInputComponent extends E
     this.ɵcmp = i0148.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: { eclSize: "eclSize", toggleId: "toggleId", isDisabled: "isDisabled", isInvalid: "isInvalid", inputPlaceholder: "inputPlaceholder", selectedItems: "selectedItems", isDropdownExpanded: "isDropdownExpanded", ariaControls: "ariaControls", ariaDescribedby: "ariaDescribedby", ariaLabeledby: "ariaLabeledby" }, outputs: { mainInputClick: "mainInputClick", mainInputKeydown: "mainInputKeydown" }, host: { properties: { "class.ecl-select__container--disabled": "this.isDisabled", "class.ecl-select__container--invalid": "this.isInvalid", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "inputMultiselect", first: true, predicate: ["inputMultiselect"], descendants: true }], usesInheritance: true, ngImport: i0148, template: '<div [class.ecl-select-multiple-selections-counter--visible]="isShowCounter" class="ecl-select-multiple-selections-counter">\n    <span>{{ selectedItemsCount }}</span>\n</div>\n<button\n    class="ecl-select ecl-select__multiple-toggle"\n    #inputMultiselect\n    type="button"\n    [id]="toggleId"\n    [attr.aria-expanded]="isDropdownExpanded"\n    [attr.aria-controls]="ariaControls"\n    [attr.disabled]="isDisabled ? true : undefined"\n    [attr.aria-labelledby]="ariaLabeledby"\n    [attr.aria-describedby]="ariaDescribedby"\n    (keydown)="onKeydown($event)"\n    (click)="onClick($event)"> {{ buttonText }}\n</button>\n<div class="ecl-select__icon">\n    <ecl-icon icon="corner-arrow" size="s" class="ecl-select__icon-shape" transform="rotate-180"></ecl-icon>\n</div>\n', dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
   }
 };
-__decorate16([
-  coerceBoolean13
+__decorate11([
+  coerceBoolean9
 ], EclMultiselectInputComponent.prototype, "isDisabled", void 0);
-__decorate16([
-  coerceBoolean13
+__decorate11([
+  coerceBoolean9
 ], EclMultiselectInputComponent.prototype, "isInvalid", void 0);
 i0148.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0148, type: EclMultiselectInputComponent, decorators: [{
   type: Component68,
   args: [{ selector: "div[eclMultiselectInput]", template: '<div [class.ecl-select-multiple-selections-counter--visible]="isShowCounter" class="ecl-select-multiple-selections-counter">\n    <span>{{ selectedItemsCount }}</span>\n</div>\n<button\n    class="ecl-select ecl-select__multiple-toggle"\n    #inputMultiselect\n    type="button"\n    [id]="toggleId"\n    [attr.aria-expanded]="isDropdownExpanded"\n    [attr.aria-controls]="ariaControls"\n    [attr.disabled]="isDisabled ? true : undefined"\n    [attr.aria-labelledby]="ariaLabeledby"\n    [attr.aria-describedby]="ariaDescribedby"\n    (keydown)="onKeydown($event)"\n    (click)="onClick($event)"> {{ buttonText }}\n</button>\n<div class="ecl-select__icon">\n    <ecl-icon icon="corner-arrow" size="s" class="ecl-select__icon-shape" transform="rotate-180"></ecl-icon>\n</div>\n' }]
 }], ctorParameters: () => [], propDecorators: { eclSize: [{
-  type: Input64
+  type: Input63
 }], toggleId: [{
-  type: Input64
+  type: Input63
 }], isDisabled: [{
-  type: Input64
+  type: Input63
 }, {
   type: HostBinding100,
   args: ["class.ecl-select__container--disabled"]
 }], isInvalid: [{
-  type: Input64
+  type: Input63
 }, {
   type: HostBinding100,
   args: ["class.ecl-select__container--invalid"]
@@ -11496,17 +11462,17 @@ i0148.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: HostBinding100,
   args: ["class"]
 }], inputPlaceholder: [{
-  type: Input64
+  type: Input63
 }], selectedItems: [{
-  type: Input64
+  type: Input63
 }], isDropdownExpanded: [{
-  type: Input64
+  type: Input63
 }], ariaControls: [{
-  type: Input64
+  type: Input63
 }], ariaDescribedby: [{
-  type: Input64
+  type: Input63
 }], ariaLabeledby: [{
-  type: Input64
+  type: Input63
 }], inputMultiselect: [{
   type: ViewChild12,
   args: ["inputMultiselect"]
@@ -11517,7 +11483,7 @@ i0148.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-multiselect/ecl-multiselect-optgroup/ecl-multiselect-optgroup.component.mjs
-import { Component as Component69, HostBinding as HostBinding101, Input as Input65 } from "@angular/core";
+import { Component as Component69, HostBinding as HostBinding101, Input as Input64 } from "@angular/core";
 import * as i0149 from "@angular/core";
 var EclMultiselectOptionClickEvent2 = class {
   constructor(multiselectOption) {
@@ -11545,21 +11511,21 @@ i0149.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: Component69,
   args: [{ selector: "fieldset[eclMultiselectOptgroup]", template: '<legend class="ecl-select__multiple-group__title">{{ label }}</legend>\n<ng-content></ng-content>\n' }]
 }], propDecorators: { label: [{
-  type: Input65
+  type: Input64
 }], cssClasses: [{
   type: HostBinding101,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-multiselect/ecl-multiselect-dropdown/ecl-multiselect-dropdown.component.mjs
-import { __decorate as __decorate17 } from "tslib";
-import { Component as Component70, ElementRef as ElementRef24, EventEmitter as EventEmitter32, forwardRef as forwardRef43, HostBinding as HostBinding102, HostListener as HostListener17, Input as Input66, Output as Output32, ViewChild as ViewChild13, ViewChildren as ViewChildren2 } from "@angular/core";
+import { __decorate as __decorate12 } from "tslib";
+import { Component as Component70, ElementRef as ElementRef24, EventEmitter as EventEmitter32, forwardRef as forwardRef43, HostBinding as HostBinding102, 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 { coerceBoolean as coerceBoolean14 } from "@eui/base";
+import { coerceBoolean as coerceBoolean10 } from "@eui/base";
 import { Subject as Subject21 } from "rxjs";
 import { v4 as uuidgen4 } from "uuid";
 import * as i0150 from "@angular/core";
-import * as i128 from "@angular/common";
+import * as i127 from "@angular/common";
 import * as i9 from "@ngx-translate/core";
 var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent extends ECLBaseDirective {
   get isInvalid() {
@@ -12026,14 +11992,14 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
         </button>
     </div>
 </div>
-`, dependencies: [{ kind: "directive", type: i128.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i128.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclCheckboxDirective, selector: "[eclCheckbox]", inputs: ["isDisabled", "isInvalid"] }, { kind: "component", type: EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled"] }, { kind: "directive", type: EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: ["value", "label", "disabled", "isChecked"], outputs: ["optionClick", "optionKeydown"] }, { kind: "component", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: ["eclSize", "toggleId", "isDisabled", "isInvalid", "inputPlaceholder", "selectedItems", "isDropdownExpanded", "ariaControls", "ariaDescribedby", "ariaLabeledby"], outputs: ["mainInputClick", "mainInputKeydown"] }, { kind: "component", type: EclMultiselectOptgroupComponent, selector: "fieldset[eclMultiselectOptgroup]", inputs: ["label"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "directive", type: i127.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i127.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclCheckboxDirective, selector: "[eclCheckbox]", inputs: ["isDisabled", "isInvalid"] }, { kind: "component", type: EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled"] }, { kind: "directive", type: EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: ["value", "label", "disabled", "isChecked"], outputs: ["optionClick", "optionKeydown"] }, { kind: "component", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: ["eclSize", "toggleId", "isDisabled", "isInvalid", "inputPlaceholder", "selectedItems", "isDropdownExpanded", "ariaControls", "ariaDescribedby", "ariaLabeledby"], outputs: ["mainInputClick", "mainInputKeydown"] }, { kind: "component", type: EclMultiselectOptgroupComponent, selector: "fieldset[eclMultiselectOptgroup]", inputs: ["label"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] });
   }
 };
-__decorate17([
-  coerceBoolean14
+__decorate12([
+  coerceBoolean10
 ], EclMultiselectDropdownComponent.prototype, "isInvalid", null);
-__decorate17([
-  coerceBoolean14
+__decorate12([
+  coerceBoolean10
 ], EclMultiselectDropdownComponent.prototype, "disabled", null);
 i0150.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0150, type: EclMultiselectDropdownComponent, decorators: [{
   type: Component70,
@@ -12148,18 +12114,18 @@ i0150.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }], eclChange: [{
   type: Output32
 }], isInvalid: [{
-  type: Input66
+  type: Input65
 }], cssClasses: [{
   type: HostBinding102,
   args: ["class"]
 }], mainInputPlaceholder: [{
-  type: Input66
+  type: Input65
 }], searchFieldPlaceholder: [{
-  type: Input66
+  type: Input65
 }], eclSize: [{
-  type: Input66
+  type: Input65
 }], disabled: [{
-  type: Input66
+  type: Input65
 }, {
   type: HostBinding102,
   args: ["attr.disabled"]
@@ -12173,7 +12139,7 @@ i0150.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 
 // lib/components/ecl-multiselect/ecl-multiselect-option.directive.mjs
 import { coerceBooleanProperty as coerceBooleanProperty2 } from "@angular/cdk/coercion";
-import { ContentChildren as ContentChildren22, Directive as Directive39, HostBinding as HostBinding103, Input as Input67 } from "@angular/core";
+import { ContentChildren as ContentChildren22, Directive as Directive39, HostBinding as HostBinding103, Input as Input66 } from "@angular/core";
 import { Subject as Subject22 } from "rxjs";
 import * as i0151 from "@angular/core";
 var EclMultiselectOptionDirective = class _EclMultiselectOptionDirective extends ECLBaseDirective {
@@ -12218,16 +12184,16 @@ i0151.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: ContentChildren22,
   args: [EclMultiselectOptionDirective]
 }], value: [{
-  type: Input67
+  type: Input66
 }], label: [{
-  type: Input67
+  type: Input66
 }], disabled: [{
-  type: Input67
+  type: Input66
 }, {
   type: HostBinding103,
   args: ["attr.disabled"]
 }], selected: [{
-  type: Input67
+  type: Input66
 }, {
   type: HostBinding103,
   args: ["attr.selected"]
@@ -12237,11 +12203,11 @@ i0151.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-multiselect/ecl-multiselect.component.mjs
-import { __decorate as __decorate18 } from "tslib";
+import { __decorate as __decorate13 } from "tslib";
 import { coerceBooleanProperty as coerceBooleanProperty3 } from "@angular/cdk/coercion";
-import { Component as Component71, ContentChildren as ContentChildren23, EventEmitter as EventEmitter33, forwardRef as forwardRef44, HostBinding as HostBinding104, Input as Input68, Output as Output33, ViewEncapsulation as ViewEncapsulation9 } from "@angular/core";
+import { Component as Component71, ContentChildren as ContentChildren23, EventEmitter as EventEmitter33, forwardRef as forwardRef44, HostBinding as HostBinding104, 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 { coerceBoolean as coerceBoolean15 } from "@eui/base";
+import { coerceBoolean as coerceBoolean11 } from "@eui/base";
 import { Subject as Subject23, takeUntil as takeUntil20 } from "rxjs";
 import * as i0152 from "@angular/core";
 var EclMultiselectComponent = class _EclMultiselectComponent extends ECLBaseDirective {
@@ -12377,8 +12343,8 @@ var EclMultiselectComponent = class _EclMultiselectComponent extends ECLBaseDire
     ], queries: [{ propertyName: "eclOptionItems", predicate: i0152.forwardRef(() => EclMultiselectOptionDirective) }], usesInheritance: true, ngImport: i0152, template: "<ng-content></ng-content>\n", encapsulation: i0152.ViewEncapsulation.None });
   }
 };
-__decorate18([
-  coerceBoolean15
+__decorate13([
+  coerceBoolean11
 ], EclMultiselectComponent.prototype, "isInvalid", null);
 i0152.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0152, type: EclMultiselectComponent, decorators: [{
   type: Component71,
@@ -12393,15 +12359,15 @@ i0152.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: ContentChildren23,
   args: [forwardRef44(() => EclMultiselectOptionDirective)]
 }], ariaDescribedby: [{
-  type: Input68
+  type: Input67
 }], ariaLabeledby: [{
-  type: Input68
+  type: Input67
 }], id: [{
-  type: Input68
+  type: Input67
 }], isInvalid: [{
-  type: Input68
+  type: Input67
 }], disabled: [{
-  type: Input68
+  type: Input67
 }, {
   type: HostBinding104,
   args: ["attr.disabled"]
@@ -12411,9 +12377,9 @@ i0152.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }], eclChange: [{
   type: Output33
 }], eclPlaceholder: [{
-  type: Input68
+  type: Input67
 }], eclSize: [{
-  type: Input68
+  type: Input67
 }] } });
 
 // lib/components/ecl-multiselect/ecl-multiselect.module.mjs
@@ -12480,7 +12446,7 @@ i0153.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] });
 
 // lib/components/ecl-navigation-list/ecl-navigation-list-item.component.mjs
-import { Component as Component72, ContentChild as ContentChild20, forwardRef as forwardRef46, HostBinding as HostBinding105, Input as Input69 } from "@angular/core";
+import { Component as Component72, ContentChild as ContentChild20, forwardRef as forwardRef46, HostBinding as HostBinding105, Input as Input68 } from "@angular/core";
 import * as i0154 from "@angular/core";
 var EclNavigationListItemComponent = class _EclNavigationListItemComponent extends ECLBaseDirective {
   constructor() {
@@ -12507,7 +12473,7 @@ i0154.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: Component72,
   args: [{ selector: "ecl-navigation-list-item", template: "<ng-content></ng-content>\n" }]
 }], propDecorators: { columns: [{
-  type: Input69
+  type: Input68
 }], eclContentBlock: [{
   type: ContentChild20,
   args: [forwardRef46(() => EclContentBlockComponent)]
@@ -12520,9 +12486,9 @@ i0154.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-navigation-list/ecl-navigation-list.component.mjs
-import { __decorate as __decorate19 } from "tslib";
-import { Component as Component73, HostBinding as HostBinding106, Input as Input70 } from "@angular/core";
-import { coerceNumber as coerceNumber3 } from "@eui/base";
+import { __decorate as __decorate14 } from "tslib";
+import { Component as Component73, HostBinding as HostBinding106, Input as Input69 } from "@angular/core";
+import { coerceNumber } from "@eui/base";
 import * as i0155 from "@angular/core";
 var EclNavigationListComponent = class _EclNavigationListComponent extends ECLBaseDirective {
   constructor() {
@@ -12539,14 +12505,14 @@ var EclNavigationListComponent = class _EclNavigationListComponent extends ECLBa
     this.ɵcmp = i0155.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclNavigationListComponent, selector: "ecl-navigation-list", inputs: { columns: "columns" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0155, template: "<ng-content></ng-content>\n" });
   }
 };
-__decorate19([
-  coerceNumber3
+__decorate14([
+  coerceNumber
 ], EclNavigationListComponent.prototype, "columns", void 0);
 i0155.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0155, type: EclNavigationListComponent, decorators: [{
   type: Component73,
   args: [{ selector: "ecl-navigation-list", template: "<ng-content></ng-content>\n" }]
 }], propDecorators: { columns: [{
-  type: Input70
+  type: Input69
 }], cssClasses: [{
   type: HostBinding106,
   args: ["class"]
@@ -12597,7 +12563,7 @@ i0156.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-navigation-list/ecl-navigation-list-image/ecl-navigation-list-image.component.mjs
-import { Component as Component74, HostBinding as HostBinding108, Input as Input71 } from "@angular/core";
+import { Component as Component74, HostBinding as HostBinding108, Input as Input70 } from "@angular/core";
 import * as i0157 from "@angular/core";
 var EclNavigationListImageComponent = class _EclNavigationListImageComponent extends ECLBaseDirective {
   get cssClasses() {
@@ -12614,7 +12580,7 @@ i0157.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: Component74,
   args: [{ selector: "div[eclNavigationListImage]", template: '<img class="ecl-navigation-list__image" [src]="imageUrl" alt="Alt text for the image" />\n' }]
 }], propDecorators: { imageUrl: [{
-  type: Input71
+  type: Input70
 }], cssClasses: [{
   type: HostBinding108,
   args: ["class"]
@@ -12745,7 +12711,7 @@ i0159.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-news-ticker/ecl-news-ticker.component.mjs
-import { Component as Component76, ContentChildren as ContentChildren24, EventEmitter as EventEmitter35, HostBinding as HostBinding110, HostListener as HostListener18, Input as Input72, Output as Output35, ViewChild as ViewChild14, booleanAttribute as booleanAttribute20 } from "@angular/core";
+import { Component as Component76, ContentChildren as ContentChildren24, EventEmitter as EventEmitter35, HostBinding as HostBinding110, HostListener as HostListener18, Input as Input71, Output as Output35, ViewChild as ViewChild14, booleanAttribute as booleanAttribute23 } from "@angular/core";
 import { Subject as Subject25, takeUntil as takeUntil22 } from "rxjs";
 import * as i0160 from "@angular/core";
 import * as i54 from "@ngx-translate/core";
@@ -12936,7 +12902,7 @@ var EclNewsTickerComponent = class _EclNewsTickerComponent extends ECLBaseDirect
     this.ɵfac = i0160.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0160, type: _EclNewsTickerComponent, deps: [{ token: i0160.Renderer2 }], target: i0160.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0160.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclNewsTickerComponent, selector: "ecl-news-ticker", inputs: { isAutoplay: ["isAutoplay", "isAutoplay", booleanAttribute20] }, 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: i0160, template: `<div class="ecl-news-ticker__container" [style.height.px]="containerHeight">
+    this.ɵcmp = i0160.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclNewsTickerComponent, selector: "ecl-news-ticker", inputs: { isAutoplay: ["isAutoplay", "isAutoplay", booleanAttribute23] }, 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: i0160, 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
@@ -13049,8 +13015,8 @@ i0160.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 </div>
 }` }]
 }], ctorParameters: () => [{ type: i0160.Renderer2 }], propDecorators: { isAutoplay: [{
-  type: Input72,
-  args: [{ transform: booleanAttribute20 }]
+  type: Input71,
+  args: [{ transform: booleanAttribute23 }]
 }], itemSwitch: [{
   type: Output35
 }], newsTickerItems: [{
@@ -13099,7 +13065,7 @@ i0161.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] });
 
 // lib/components/ecl-notification/ecl-notification.component.mjs
-import { Component as Component77, Input as Input73, Output as Output36, EventEmitter as EventEmitter36, HostBinding as HostBinding111, booleanAttribute as booleanAttribute21 } from "@angular/core";
+import { Component as Component77, Input as Input72, Output as Output36, EventEmitter as EventEmitter36, HostBinding as HostBinding111, booleanAttribute as booleanAttribute24 } from "@angular/core";
 import * as i0162 from "@angular/core";
 import * as i55 from "@angular/common";
 import * as i6 from "@ngx-translate/core";
@@ -13145,7 +13111,7 @@ var EclNotificationComponent = class _EclNotificationComponent extends ECLBaseDi
     this.ɵfac = i0162.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0162, type: _EclNotificationComponent, deps: [{ token: EclThemeService }], target: i0162.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0162.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclNotificationComponent, selector: "ecl-notification", inputs: { notificationTitle: "notificationTitle", variant: "variant", isVisible: ["isVisible", "isVisible", booleanAttribute21], isCloseable: ["isCloseable", "isCloseable", booleanAttribute21] }, outputs: { close: "close" }, host: { properties: { "attr.role": "this.role", "class.ecl-u-d-none": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0162, template: `@if( eclThemeService.isEC$ | async ){
+    this.ɵcmp = i0162.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclNotificationComponent, selector: "ecl-notification", inputs: { notificationTitle: "notificationTitle", variant: "variant", isVisible: ["isVisible", "isVisible", booleanAttribute24], isCloseable: ["isCloseable", "isCloseable", booleanAttribute24] }, outputs: { close: "close" }, host: { properties: { "attr.role": "this.role", "class.ecl-u-d-none": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0162, 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>
@@ -13216,15 +13182,15 @@ i0162.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 </div>
 ` }]
 }], ctorParameters: () => [{ type: EclThemeService }], propDecorators: { notificationTitle: [{
-  type: Input73
+  type: Input72
 }], variant: [{
-  type: Input73
+  type: Input72
 }], isVisible: [{
-  type: Input73,
-  args: [{ transform: booleanAttribute21 }]
+  type: Input72,
+  args: [{ transform: booleanAttribute24 }]
 }], isCloseable: [{
-  type: Input73,
-  args: [{ transform: booleanAttribute21 }]
+  type: Input72,
+  args: [{ transform: booleanAttribute24 }]
 }], close: [{
   type: Output36
 }], role: [{
@@ -13263,9 +13229,9 @@ i0163.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-site-footer/ecl-footer-elements/ecl-site-footer-section.directive.mjs
-import { __decorate as __decorate20 } from "tslib";
-import { Directive as Directive42, HostBinding as HostBinding113, Input as Input74 } from "@angular/core";
-import { coerceBoolean as coerceBoolean16 } from "@eui/base";
+import { __decorate as __decorate15 } from "tslib";
+import { Directive as Directive42, HostBinding as HostBinding113, Input as Input73 } from "@angular/core";
+import { coerceBoolean as coerceBoolean12 } from "@eui/base";
 import * as i0164 from "@angular/core";
 var EclSiteFooterSectionDirective = class _EclSiteFooterSectionDirective extends ECLBaseDirective {
   constructor() {
@@ -13283,17 +13249,17 @@ var EclSiteFooterSectionDirective = class _EclSiteFooterSectionDirective extends
     this.ɵdir = i0164.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclSiteFooterSectionDirective, selector: "[eclSiteFooterSection]", inputs: { isCondensed: "isCondensed", isSiteInfo: "isSiteInfo", isSplitList: "isSplitList", hasSeparator: "hasSeparator" }, 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: i0164 });
   }
 };
-__decorate20([
-  coerceBoolean16
+__decorate15([
+  coerceBoolean12
 ], EclSiteFooterSectionDirective.prototype, "isCondensed", void 0);
-__decorate20([
-  coerceBoolean16
+__decorate15([
+  coerceBoolean12
 ], EclSiteFooterSectionDirective.prototype, "isSiteInfo", void 0);
-__decorate20([
-  coerceBoolean16
+__decorate15([
+  coerceBoolean12
 ], EclSiteFooterSectionDirective.prototype, "isSplitList", void 0);
-__decorate20([
-  coerceBoolean16
+__decorate15([
+  coerceBoolean12
 ], EclSiteFooterSectionDirective.prototype, "hasSeparator", void 0);
 i0164.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0164, type: EclSiteFooterSectionDirective, decorators: [{
   type: Directive42,
@@ -13304,17 +13270,17 @@ i0164.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: HostBinding113,
   args: ["class.ecl-site-footer__section"]
 }], isCondensed: [{
-  type: Input74
+  type: Input73
 }, {
   type: HostBinding113,
   args: ["class.ecl-site-footer__section--condensed"]
 }], isSiteInfo: [{
-  type: Input74
+  type: Input73
 }, {
   type: HostBinding113,
   args: ["class.ecl-site-footer__section--site-info"]
 }], isSplitList: [{
-  type: Input74
+  type: Input73
 }, {
   type: HostBinding113,
   args: ["class.ecl-site-footer__section--split-list"]
@@ -13322,13 +13288,13 @@ i0164.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: HostBinding113,
   args: ["class.ecl-site-footer__section--separator"]
 }, {
-  type: Input74
+  type: Input73
 }] } });
 
 // lib/components/ecl-site-footer/ecl-footer-elements/ecl-site-footer-title.directive.mjs
-import { __decorate as __decorate21 } from "tslib";
-import { Directive as Directive43, HostBinding as HostBinding114, Input as Input75 } from "@angular/core";
-import { coerceBoolean as coerceBoolean17 } from "@eui/base";
+import { __decorate as __decorate16 } from "tslib";
+import { Directive as Directive43, HostBinding as HostBinding114, Input as Input74 } from "@angular/core";
+import { coerceBoolean as coerceBoolean13 } from "@eui/base";
 import * as i0165 from "@angular/core";
 var EclSiteFooterTitleDirective = class _EclSiteFooterTitleDirective extends ECLBaseDirective {
   constructor() {
@@ -13343,8 +13309,8 @@ var EclSiteFooterTitleDirective = class _EclSiteFooterTitleDirective extends ECL
     this.ɵdir = i0165.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclSiteFooterTitleDirective, selector: "[eclSiteFooterTitle]", inputs: { isSeparator: "isSeparator" }, host: { properties: { "class.ecl-site-footer__title": "this.cmpClass", "class.ecl-site-footer__title--separator": "this.isSeparator" } }, usesInheritance: true, ngImport: i0165 });
   }
 };
-__decorate21([
-  coerceBoolean17
+__decorate16([
+  coerceBoolean13
 ], EclSiteFooterTitleDirective.prototype, "isSeparator", void 0);
 i0165.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0165, type: EclSiteFooterTitleDirective, decorators: [{
   type: Directive43,
@@ -13355,7 +13321,7 @@ i0165.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: HostBinding114,
   args: ["class.ecl-site-footer__title"]
 }], isSeparator: [{
-  type: Input75
+  type: Input74
 }, {
   type: HostBinding114,
   args: ["class.ecl-site-footer__title--separator"]
@@ -13408,9 +13374,9 @@ i0166.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-site-footer/ecl-footer-elements/ecl-site-footer-list.directive.mjs
-import { __decorate as __decorate22 } from "tslib";
-import { Directive as Directive45, HostBinding as HostBinding116, Input as Input76 } from "@angular/core";
-import { coerceBoolean as coerceBoolean18 } from "@eui/base";
+import { __decorate as __decorate17 } from "tslib";
+import { Directive as Directive45, HostBinding as HostBinding116, Input as Input75 } from "@angular/core";
+import { coerceBoolean as coerceBoolean14 } from "@eui/base";
 import * as i0167 from "@angular/core";
 var EclSiteFooterListDirective = class _EclSiteFooterListDirective extends ECLBaseDirective {
   constructor() {
@@ -13424,11 +13390,11 @@ var EclSiteFooterListDirective = class _EclSiteFooterListDirective extends ECLBa
     this.ɵdir = i0167.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclSiteFooterListDirective, selector: "[eclSiteFooterList]", inputs: { isInline: "isInline", isColumns: "isColumns" }, 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: i0167 });
   }
 };
-__decorate22([
-  coerceBoolean18
+__decorate17([
+  coerceBoolean14
 ], EclSiteFooterListDirective.prototype, "isInline", void 0);
-__decorate22([
-  coerceBoolean18
+__decorate17([
+  coerceBoolean14
 ], EclSiteFooterListDirective.prototype, "isColumns", void 0);
 i0167.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0167, type: EclSiteFooterListDirective, decorators: [{
   type: Directive45,
@@ -13439,12 +13405,12 @@ i0167.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: HostBinding116,
   args: ["class.ecl-site-footer__list"]
 }], isInline: [{
-  type: Input76
+  type: Input75
 }, {
   type: HostBinding116,
   args: ["class.ecl-site-footer__list--inline"]
 }], isColumns: [{
-  type: Input76
+  type: Input75
 }, {
   type: HostBinding116,
   args: ["class.ecl-site-footer__list--columns"]
@@ -13711,12 +13677,12 @@ i0169.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-site-footer/ecl-footer-elements/ec/ecl-site-footer-fixed-content.mjs
-import { __decorate as __decorate23 } from "tslib";
-import { Component as Component78, Input as Input77 } from "@angular/core";
-import { coerceBoolean as coerceBoolean19 } from "@eui/base";
+import { __decorate as __decorate18 } from "tslib";
+import { Component as Component78, Input as Input76 } from "@angular/core";
+import { coerceBoolean as coerceBoolean15 } from "@eui/base";
 import * as i0170 from "@angular/core";
-import * as i129 from "@ngx-translate/core";
-import * as i34 from "@angular/common";
+import * as i128 from "@ngx-translate/core";
+import * as i32 from "@angular/common";
 var EclSiteFooterFixedContentECComponent = class _EclSiteFooterFixedContentECComponent extends ECLBaseDirective {
   constructor(translateService, eclLanguageService) {
     super();
@@ -13725,7 +13691,7 @@ var EclSiteFooterFixedContentECComponent = class _EclSiteFooterFixedContentECCom
     this.isCore = false;
   }
   static {
-    this.ɵfac = i0170.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0170, type: _EclSiteFooterFixedContentECComponent, deps: [{ token: i129.TranslateService }, { token: EclLanguageService }], target: i0170.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0170.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0170, type: _EclSiteFooterFixedContentECComponent, deps: [{ token: i128.TranslateService }, { token: EclLanguageService }], target: i0170.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i0170.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclSiteFooterFixedContentECComponent, selector: "ecl-site-footer-fixed-content-ec", inputs: { isCore: "isCore", languageCode: "languageCode", ecLogoLanguageCode: "ecLogoLanguageCode", content: "content" }, usesInheritance: true, ngImport: i0170, template: `<ng-container *ngIf="isCore">
@@ -14146,11 +14112,11 @@ var EclSiteFooterFixedContentECComponent = class _EclSiteFooterFixedContentECCom
         </div>
     </div>
 </ng-container>
-`, dependencies: [{ kind: "directive", type: i34.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i34.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isHiddenLabel", "isNoVisited", "variant"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclSiteFooterSectionDirective, selector: "[eclSiteFooterSection]", inputs: ["isCondensed", "isSiteInfo", "isSplitList", "hasSeparator"] }, { kind: "directive", type: EclSiteFooterTitleDirective, selector: "[eclSiteFooterTitle]", inputs: ["isSeparator"] }, { kind: "directive", type: EclSiteFooterListDirective, selector: "[eclSiteFooterList]", inputs: ["isInline", "isColumns"] }, { kind: "directive", type: EclSiteFooterLinkDirective, selector: "[eclSiteFooterLink]" }, { kind: "directive", type: EclSiteFooterColumnDirective, selector: "[eclSiteFooterColumn]" }, { kind: "directive", type: EclSiteFooterListItemDirective, selector: "[eclSiteFooterListItem]" }, { kind: "directive", type: EclSiteFooterRowDirective, selector: "[eclSiteFooterRow]" }, { kind: "directive", type: EclSiteFooterTitleLinkDirective, selector: "[eclSiteFooterTitleLink]" }, { kind: "directive", type: EclSiteFooterLogoLinkDirective, selector: "[eclSiteFooterLogoLink]" }, { kind: "directive", type: EclSiteFooterPictureDirective, selector: "picture[eclSiteFooterPicture]" }, { kind: "directive", type: EclSiteFooterLogoImageDirective, selector: "img[eclSiteFooterLogoImage]" }, { kind: "pipe", type: i129.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "directive", type: i32.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i32.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclSiteFooterSectionDirective, selector: "[eclSiteFooterSection]", inputs: ["isCondensed", "isSiteInfo", "isSplitList", "hasSeparator"] }, { kind: "directive", type: EclSiteFooterTitleDirective, selector: "[eclSiteFooterTitle]", inputs: ["isSeparator"] }, { kind: "directive", type: EclSiteFooterListDirective, selector: "[eclSiteFooterList]", inputs: ["isInline", "isColumns"] }, { kind: "directive", type: EclSiteFooterLinkDirective, selector: "[eclSiteFooterLink]" }, { kind: "directive", type: EclSiteFooterColumnDirective, selector: "[eclSiteFooterColumn]" }, { kind: "directive", type: EclSiteFooterListItemDirective, selector: "[eclSiteFooterListItem]" }, { kind: "directive", type: EclSiteFooterRowDirective, selector: "[eclSiteFooterRow]" }, { kind: "directive", type: EclSiteFooterTitleLinkDirective, selector: "[eclSiteFooterTitleLink]" }, { kind: "directive", type: EclSiteFooterLogoLinkDirective, selector: "[eclSiteFooterLogoLink]" }, { kind: "directive", type: EclSiteFooterPictureDirective, selector: "picture[eclSiteFooterPicture]" }, { kind: "directive", type: EclSiteFooterLogoImageDirective, selector: "img[eclSiteFooterLogoImage]" }, { kind: "pipe", type: i128.TranslatePipe, name: "translate" }] });
   }
 };
-__decorate23([
-  coerceBoolean19
+__decorate18([
+  coerceBoolean15
 ], EclSiteFooterFixedContentECComponent.prototype, "isCore", void 0);
 i0170.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0170, type: EclSiteFooterFixedContentECComponent, decorators: [{
   type: Component78,
@@ -14573,23 +14539,23 @@ i0170.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
     </div>
 </ng-container>
 ` }]
-}], ctorParameters: () => [{ type: i129.TranslateService }, { type: EclLanguageService }], propDecorators: { isCore: [{
-  type: Input77
+}], ctorParameters: () => [{ type: i128.TranslateService }, { type: EclLanguageService }], propDecorators: { isCore: [{
+  type: Input76
 }], languageCode: [{
-  type: Input77
+  type: Input76
 }], ecLogoLanguageCode: [{
-  type: Input77
+  type: Input76
 }], content: [{
-  type: Input77
+  type: Input76
 }] } });
 
 // lib/components/ecl-site-footer/ecl-footer-elements/eu/ecl-site-footer-fixed-content.mjs
-import { __decorate as __decorate24 } from "tslib";
-import { Component as Component79, Input as Input78 } from "@angular/core";
-import { coerceBoolean as coerceBoolean20 } from "@eui/base";
+import { __decorate as __decorate19 } from "tslib";
+import { Component as Component79, Input as Input77 } from "@angular/core";
+import { coerceBoolean as coerceBoolean16 } from "@eui/base";
 import * as i0171 from "@angular/core";
-import * as i130 from "@ngx-translate/core";
-import * as i35 from "@angular/common";
+import * as i129 from "@ngx-translate/core";
+import * as i33 from "@angular/common";
 var EclSiteFooterFixedContentEUComponent = class _EclSiteFooterFixedContentEUComponent extends ECLBaseDirective {
   constructor(translateService, eclLanguageService) {
     super();
@@ -14607,7 +14573,7 @@ var EclSiteFooterFixedContentEUComponent = class _EclSiteFooterFixedContentEUCom
     }
   }
   static {
-    this.ɵfac = i0171.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0171, type: _EclSiteFooterFixedContentEUComponent, deps: [{ token: i130.TranslateService }, { token: EclLanguageService }], target: i0171.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0171.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0171, type: _EclSiteFooterFixedContentEUComponent, deps: [{ token: i129.TranslateService }, { token: EclLanguageService }], target: i0171.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i0171.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclSiteFooterFixedContentEUComponent, selector: "ecl-site-footer-fixed-content-eu", inputs: { isCore: "isCore", languageCode: "languageCode", ecLogoLanguageCode: "ecLogoLanguageCode", content: "content" }, usesInheritance: true, ngImport: i0171, template: `<ng-container *ngIf="isCore">
@@ -15264,11 +15230,11 @@ var EclSiteFooterFixedContentEUComponent = class _EclSiteFooterFixedContentEUCom
         </div>
     </div>
 </ng-container>
-`, dependencies: [{ kind: "directive", type: i35.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i35.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isHiddenLabel", "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: i130.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "directive", type: i33.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i33.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclSiteFooterSectionDirective, selector: "[eclSiteFooterSection]", inputs: ["isCondensed", "isSiteInfo", "isSplitList", "hasSeparator"] }, { kind: "directive", type: EclSiteFooterTitleDirective, selector: "[eclSiteFooterTitle]", inputs: ["isSeparator"] }, { kind: "directive", type: EclSiteFooterListDirective, selector: "[eclSiteFooterList]", inputs: ["isInline", "isColumns"] }, { kind: "directive", type: EclSiteFooterLinkDirective, selector: "[eclSiteFooterLink]" }, { kind: "directive", type: EclSiteFooterColumnDirective, selector: "[eclSiteFooterColumn]" }, { kind: "directive", type: EclSiteFooterListItemDirective, selector: "[eclSiteFooterListItem]" }, { kind: "directive", type: EclSiteFooterRowDirective, selector: "[eclSiteFooterRow]" }, { kind: "directive", type: EclSiteFooterLogoLinkDirective, selector: "[eclSiteFooterLogoLink]" }, { kind: "directive", type: EclSiteFooterPictureDirective, selector: "picture[eclSiteFooterPicture]" }, { kind: "directive", type: EclSiteFooterLogoImageDirective, selector: "img[eclSiteFooterLogoImage]" }, { kind: "pipe", type: i129.TranslatePipe, name: "translate" }] });
   }
 };
-__decorate24([
-  coerceBoolean20
+__decorate19([
+  coerceBoolean16
 ], EclSiteFooterFixedContentEUComponent.prototype, "isCore", void 0);
 i0171.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0171, type: EclSiteFooterFixedContentEUComponent, decorators: [{
   type: Component79,
@@ -15927,23 +15893,23 @@ i0171.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
     </div>
 </ng-container>
 ` }]
-}], ctorParameters: () => [{ type: i130.TranslateService }, { type: EclLanguageService }], propDecorators: { isCore: [{
-  type: Input78
+}], ctorParameters: () => [{ type: i129.TranslateService }, { type: EclLanguageService }], propDecorators: { isCore: [{
+  type: Input77
 }], languageCode: [{
-  type: Input78
+  type: Input77
 }], ecLogoLanguageCode: [{
-  type: Input78
+  type: Input77
 }], content: [{
-  type: Input78
+  type: Input77
 }] } });
 
 // lib/components/ecl-site-footer/ecl-site-footer.component.mjs
-import { __decorate as __decorate25 } from "tslib";
-import { Component as Component80, HostBinding as HostBinding119, Input as Input79 } from "@angular/core";
-import { coerceBoolean as coerceBoolean21 } from "@eui/base";
+import { __decorate as __decorate20 } from "tslib";
+import { Component as Component80, HostBinding as HostBinding119, Input as Input78 } from "@angular/core";
+import { coerceBoolean as coerceBoolean17 } from "@eui/base";
 import * as i0172 from "@angular/core";
-import * as i131 from "@ngx-translate/core";
-import * as i36 from "@angular/common";
+import * as i130 from "@ngx-translate/core";
+import * as i34 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();
@@ -15969,20 +15935,20 @@ var EclSiteFooterComponent = class _EclSiteFooterComponent extends ECLBaseDirect
     });
   }
   static {
-    this.ɵfac = i0172.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0172, type: _EclSiteFooterComponent, deps: [{ token: i131.TranslateService }, { token: EclLanguageService }, { token: EclThemeService }], target: i0172.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0172.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0172, type: _EclSiteFooterComponent, deps: [{ token: i130.TranslateService }, { token: EclLanguageService }, { token: EclThemeService }], target: i0172.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0172.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclSiteFooterComponent, selector: "ecl-site-footer", inputs: { isCore: "isCore" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0172, template: '<div class="ecl-container ecl-site-footer__container">\n    <ecl-site-footer-fixed-content-ec\n        *ngIf="eclThemeService.isEC$ | async"\n        [isCore]="isCore"\n        [languageCode]="languageCode"\n        [ecLogoLanguageCode]="getLanguageCode()"\n        [content]="content">\n    </ecl-site-footer-fixed-content-ec>\n\n    <ecl-site-footer-fixed-content-eu\n        *ngIf="eclThemeService.isEU$ | async"\n        [isCore]="isCore"\n        [languageCode]="languageCode"\n        [ecLogoLanguageCode]="getLanguageCode()"\n        [content]="content">\n    </ecl-site-footer-fixed-content-eu>\n\n    <ng-template #content>\n        <ng-content></ng-content>\n    </ng-template>\n</div>\n', dependencies: [{ kind: "directive", type: i36.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclSiteFooterFixedContentECComponent, selector: "ecl-site-footer-fixed-content-ec", inputs: ["isCore", "languageCode", "ecLogoLanguageCode", "content"] }, { kind: "component", type: EclSiteFooterFixedContentEUComponent, selector: "ecl-site-footer-fixed-content-eu", inputs: ["isCore", "languageCode", "ecLogoLanguageCode", "content"] }, { kind: "pipe", type: i36.AsyncPipe, name: "async" }] });
+    this.ɵcmp = i0172.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclSiteFooterComponent, selector: "ecl-site-footer", inputs: { isCore: "isCore" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0172, template: '<div class="ecl-container ecl-site-footer__container">\n    <ecl-site-footer-fixed-content-ec\n        *ngIf="eclThemeService.isEC$ | async"\n        [isCore]="isCore"\n        [languageCode]="languageCode"\n        [ecLogoLanguageCode]="getLanguageCode()"\n        [content]="content">\n    </ecl-site-footer-fixed-content-ec>\n\n    <ecl-site-footer-fixed-content-eu\n        *ngIf="eclThemeService.isEU$ | async"\n        [isCore]="isCore"\n        [languageCode]="languageCode"\n        [ecLogoLanguageCode]="getLanguageCode()"\n        [content]="content">\n    </ecl-site-footer-fixed-content-eu>\n\n    <ng-template #content>\n        <ng-content></ng-content>\n    </ng-template>\n</div>\n', dependencies: [{ kind: "directive", type: i34.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclSiteFooterFixedContentECComponent, selector: "ecl-site-footer-fixed-content-ec", inputs: ["isCore", "languageCode", "ecLogoLanguageCode", "content"] }, { kind: "component", type: EclSiteFooterFixedContentEUComponent, selector: "ecl-site-footer-fixed-content-eu", inputs: ["isCore", "languageCode", "ecLogoLanguageCode", "content"] }, { kind: "pipe", type: i34.AsyncPipe, name: "async" }] });
   }
 };
-__decorate25([
-  coerceBoolean21
+__decorate20([
+  coerceBoolean17
 ], EclSiteFooterComponent.prototype, "isCore", void 0);
 i0172.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0172, type: EclSiteFooterComponent, decorators: [{
   type: Component80,
   args: [{ selector: "ecl-site-footer", template: '<div class="ecl-container ecl-site-footer__container">\n    <ecl-site-footer-fixed-content-ec\n        *ngIf="eclThemeService.isEC$ | async"\n        [isCore]="isCore"\n        [languageCode]="languageCode"\n        [ecLogoLanguageCode]="getLanguageCode()"\n        [content]="content">\n    </ecl-site-footer-fixed-content-ec>\n\n    <ecl-site-footer-fixed-content-eu\n        *ngIf="eclThemeService.isEU$ | async"\n        [isCore]="isCore"\n        [languageCode]="languageCode"\n        [ecLogoLanguageCode]="getLanguageCode()"\n        [content]="content">\n    </ecl-site-footer-fixed-content-eu>\n\n    <ng-template #content>\n        <ng-content></ng-content>\n    </ng-template>\n</div>\n' }]
-}], ctorParameters: () => [{ type: i131.TranslateService }, { type: EclLanguageService }, { type: EclThemeService }], propDecorators: { isCore: [{
-  type: Input79
+}], ctorParameters: () => [{ type: i130.TranslateService }, { type: EclLanguageService }, { type: EclThemeService }], propDecorators: { isCore: [{
+  type: Input78
 }], cssClasses: [{
   type: HostBinding119,
   args: ["class"]
@@ -16293,11 +16259,11 @@ i0178.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-page-header/ecl-page-header.component.mjs
-import { __decorate as __decorate26 } from "tslib";
-import { Component as Component81, ContentChild as ContentChild22, HostBinding as HostBinding124, Input as Input80 } from "@angular/core";
-import { coerceBoolean as coerceBoolean22 } from "@eui/base";
+import { __decorate as __decorate21 } from "tslib";
+import { Component as Component81, ContentChild as ContentChild22, HostBinding as HostBinding124, Input as Input79 } from "@angular/core";
+import { coerceBoolean as coerceBoolean18 } from "@eui/base";
 import * as i0179 from "@angular/core";
-import * as i132 from "@angular/common";
+import * as i131 from "@angular/common";
 var EclPageHeaderComponent = class _EclPageHeaderComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -16322,19 +16288,19 @@ var EclPageHeaderComponent = class _EclPageHeaderComponent extends ECLBaseDirect
     this.ɵfac = i0179.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0179, type: _EclPageHeaderComponent, deps: null, target: i0179.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0179.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclPageHeaderComponent, selector: "ecl-page-header", inputs: { backgroundImage: "backgroundImage", isNegative: "isNegative" }, host: { properties: { "class.ecl-page-header--negative": "this.isNegative", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclBreadcrumbComponent", first: true, predicate: EclBreadcrumbComponent, descendants: true }, { propertyName: "eclBackgroundPicture", first: true, predicate: EclPageHeaderBackgroundPictureDirective, descendants: true }], usesInheritance: true, ngImport: i0179, template: '<div *ngIf="hasBackgroundImage" class="ecl-page-header__background-container" aria-hidden="true">\n    <picture eclPageHeaderBackgroundPicture>\n        <img eclPageHeaderBackgroundImage [src]="backgroundImage" />\n    </picture>\n</div>\n\n<div *ngIf="hasPicture" class="ecl-page-header__background-container" aria-hidden="true">\n    <ng-content select="[eclPageHeaderBackgroundPicture]"></ng-content>\n</div>\n\n<div class="ecl-container">\n    <ng-container *ngTemplateOutlet="content"> </ng-container>\n</div>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i132.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i132.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclPageHeaderBackgroundPictureDirective, selector: "[eclPageHeaderBackgroundPicture]" }, { kind: "directive", type: EclPageHeaderBackgroundImageDirective, selector: "[eclPageHeaderBackgroundImage]" }] });
+    this.ɵcmp = i0179.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclPageHeaderComponent, selector: "ecl-page-header", inputs: { backgroundImage: "backgroundImage", isNegative: "isNegative" }, host: { properties: { "class.ecl-page-header--negative": "this.isNegative", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclBreadcrumbComponent", first: true, predicate: EclBreadcrumbComponent, descendants: true }, { propertyName: "eclBackgroundPicture", first: true, predicate: EclPageHeaderBackgroundPictureDirective, descendants: true }], usesInheritance: true, ngImport: i0179, template: '<div *ngIf="hasBackgroundImage" class="ecl-page-header__background-container" aria-hidden="true">\n    <picture eclPageHeaderBackgroundPicture>\n        <img eclPageHeaderBackgroundImage [src]="backgroundImage" />\n    </picture>\n</div>\n\n<div *ngIf="hasPicture" class="ecl-page-header__background-container" aria-hidden="true">\n    <ng-content select="[eclPageHeaderBackgroundPicture]"></ng-content>\n</div>\n\n<div class="ecl-container">\n    <ng-container *ngTemplateOutlet="content"> </ng-container>\n</div>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i131.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i131.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclPageHeaderBackgroundPictureDirective, selector: "[eclPageHeaderBackgroundPicture]" }, { kind: "directive", type: EclPageHeaderBackgroundImageDirective, selector: "[eclPageHeaderBackgroundImage]" }] });
   }
 };
-__decorate26([
-  coerceBoolean22
+__decorate21([
+  coerceBoolean18
 ], EclPageHeaderComponent.prototype, "isNegative", void 0);
 i0179.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0179, type: EclPageHeaderComponent, decorators: [{
   type: Component81,
   args: [{ selector: "ecl-page-header", template: '<div *ngIf="hasBackgroundImage" class="ecl-page-header__background-container" aria-hidden="true">\n    <picture eclPageHeaderBackgroundPicture>\n        <img eclPageHeaderBackgroundImage [src]="backgroundImage" />\n    </picture>\n</div>\n\n<div *ngIf="hasPicture" class="ecl-page-header__background-container" aria-hidden="true">\n    <ng-content select="[eclPageHeaderBackgroundPicture]"></ng-content>\n</div>\n\n<div class="ecl-container">\n    <ng-container *ngTemplateOutlet="content"> </ng-container>\n</div>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', styles: [":host{display:block}\n"] }]
 }], propDecorators: { backgroundImage: [{
-  type: Input80
+  type: Input79
 }], isNegative: [{
-  type: Input80
+  type: Input79
 }, {
   type: HostBinding124,
   args: ["class.ecl-page-header--negative"]
@@ -16352,7 +16318,7 @@ i0179.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 // lib/components/ecl-page-header/ecl-page-header-description/ecl-page-header-description.component.mjs
 import { Component as Component82, ContentChild as ContentChild23, HostBinding as HostBinding125 } from "@angular/core";
 import * as i0180 from "@angular/core";
-import * as i133 from "@angular/common";
+import * as i132 from "@angular/common";
 var EclPageHeaderDescriptionContainerComponent = class _EclPageHeaderDescriptionContainerComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -16374,7 +16340,7 @@ var EclPageHeaderDescriptionContainerComponent = class _EclPageHeaderDescription
     this.ɵfac = i0180.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0180, type: _EclPageHeaderDescriptionContainerComponent, deps: null, target: i0180.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0180.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclPageHeaderDescriptionContainerComponent, selector: "[eclPageHeaderDescriptionContainer]", host: { properties: { "class.ecl-page-header__description-container": "this.className" } }, queries: [{ propertyName: "thumbnail", first: true, predicate: EclPageHeaderDescriptionThumbnailDirective, descendants: true }, { propertyName: "eclDescriptionPicture", first: true, predicate: EclPageHeaderDescriptionPictureDirective, descendants: true }, { propertyName: "eclImage", first: true, predicate: EclPageHeaderDescriptionThumbnailDirective, descendants: true }], usesInheritance: true, ngImport: i0180, template: '<ng-container *ngIf="isAddingPictureTagRequired">\n    <picture eclPageHeaderDescriptionPicture>\n        <ng-content select="[eclPageHeaderDescriptionThumbnail]"></ng-content>\n    </picture>\n</ng-container>\n<ng-container *ngTemplateOutlet="content"> </ng-container>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "directive", type: i133.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i133.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclPageHeaderDescriptionPictureDirective, selector: "[eclPageHeaderDescriptionPicture]" }] });
+    this.ɵcmp = i0180.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclPageHeaderDescriptionContainerComponent, selector: "[eclPageHeaderDescriptionContainer]", host: { properties: { "class.ecl-page-header__description-container": "this.className" } }, queries: [{ propertyName: "thumbnail", first: true, predicate: EclPageHeaderDescriptionThumbnailDirective, descendants: true }, { propertyName: "eclDescriptionPicture", first: true, predicate: EclPageHeaderDescriptionPictureDirective, descendants: true }, { propertyName: "eclImage", first: true, predicate: EclPageHeaderDescriptionThumbnailDirective, descendants: true }], usesInheritance: true, ngImport: i0180, template: '<ng-container *ngIf="isAddingPictureTagRequired">\n    <picture eclPageHeaderDescriptionPicture>\n        <ng-content select="[eclPageHeaderDescriptionThumbnail]"></ng-content>\n    </picture>\n</ng-container>\n<ng-container *ngTemplateOutlet="content"> </ng-container>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "directive", type: i132.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i132.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclPageHeaderDescriptionPictureDirective, selector: "[eclPageHeaderDescriptionPicture]" }] });
   }
 };
 i0180.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0180, type: EclPageHeaderDescriptionContainerComponent, decorators: [{
@@ -16453,12 +16419,12 @@ i0181.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] });
 
 // lib/components/ecl-pagination/ecl-pagination-item.component.mjs
-import { __decorate as __decorate27 } from "tslib";
-import { Component as Component83, EventEmitter as EventEmitter37, HostBinding as HostBinding126, Input as Input81, Output as Output37, ViewEncapsulation as ViewEncapsulation11 } from "@angular/core";
-import { coerceBoolean as coerceBoolean23 } from "@eui/base";
+import { __decorate as __decorate22 } from "tslib";
+import { Component as Component83, EventEmitter as EventEmitter37, HostBinding as HostBinding126, Input as Input80, Output as Output37, ViewEncapsulation as ViewEncapsulation11 } from "@angular/core";
+import { coerceBoolean as coerceBoolean19 } from "@eui/base";
 import * as i0182 from "@angular/core";
-import * as i134 from "@angular/common";
-import * as i215 from "@angular/router";
+import * as i133 from "@angular/common";
+import * as i214 from "@angular/router";
 import * as i62 from "@ngx-translate/core";
 var EclPaginationItemClickEvent = class extends EclBaseEvent {
 };
@@ -16541,17 +16507,17 @@ var EclPaginationItemComponent = class _EclPaginationItemComponent extends ECLBa
 <span class="ecl-pagination__text ecl-pagination__text--full" aria-current="true">
     {{ 'ecl.pagination.PAGE' | translate: { pageNumber: label } }}
 </span>
-}`, dependencies: [{ kind: "directive", type: i134.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i215.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isHiddenLabel", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i62.TranslatePipe, name: "translate" }], encapsulation: i0182.ViewEncapsulation.None });
+}`, dependencies: [{ kind: "directive", type: i133.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i214.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i62.TranslatePipe, name: "translate" }], encapsulation: i0182.ViewEncapsulation.None });
   }
 };
-__decorate27([
-  coerceBoolean23
+__decorate22([
+  coerceBoolean19
 ], EclPaginationItemComponent.prototype, "isCurrent", void 0);
-__decorate27([
-  coerceBoolean23
+__decorate22([
+  coerceBoolean19
 ], EclPaginationItemComponent.prototype, "isNext", void 0);
-__decorate27([
-  coerceBoolean23
+__decorate22([
+  coerceBoolean19
 ], EclPaginationItemComponent.prototype, "isPrevious", void 0);
 i0182.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0182, type: EclPaginationItemComponent, decorators: [{
   type: Component83,
@@ -16595,34 +16561,34 @@ i0182.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: HostBinding126,
   args: ["attr.role"]
 }], label: [{
-  type: Input81
+  type: Input80
 }], ariaLabel: [{
-  type: Input81
+  type: Input80
 }], isCurrent: [{
-  type: Input81
+  type: Input80
 }], isNext: [{
-  type: Input81
+  type: Input80
 }], isPrevious: [{
-  type: Input81
+  type: Input80
 }], routerLink: [{
-  type: Input81
+  type: Input80
 }], queryParams: [{
-  type: Input81
+  type: Input80
 }], queryParamsHandling: [{
-  type: Input81
+  type: Input80
 }], href: [{
-  type: Input81
+  type: Input80
 }], pageClick: [{
   type: Output37
 }] } });
 
 // lib/components/ecl-pagination/ecl-pagination.component.mjs
-import { __decorate as __decorate28 } from "tslib";
-import { Component as Component84, EventEmitter as EventEmitter38, HostBinding as HostBinding127, Input as Input82, Output as Output38 } from "@angular/core";
+import { __decorate as __decorate23 } from "tslib";
+import { Component as Component84, EventEmitter as EventEmitter38, HostBinding as HostBinding127, Input as Input81, Output as Output38 } from "@angular/core";
 import { DefaultConfig, EuiPagination } from "@eui/base";
-import { coerceNumber as coerceNumber4 } from "@eui/base";
+import { coerceNumber as coerceNumber2 } from "@eui/base";
 import * as i0183 from "@angular/core";
-import * as i135 from "@angular/common";
+import * as i134 from "@angular/common";
 var EclPaginationEvent = class extends EclBaseEvent {
   constructor(page, showingFrom, showingTo) {
     super();
@@ -16684,34 +16650,34 @@ var EclPaginationComponent = class _EclPaginationComponent extends ECLBaseDirect
     this.ɵfac = i0183.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0183, type: _EclPaginationComponent, deps: null, target: i0183.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0183.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclPaginationComponent, selector: "ecl-pagination", inputs: { mode: "mode", totalItems: "totalItems", pageSize: "pageSize", currentPage: "currentPage", pageWindowSize: "pageWindowSize" }, outputs: { page: "page" }, host: { properties: { "class.ecl-pagination": "this.cmpClass", "attr.role": "this.role" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0183, template: '<ul class="ecl-pagination__list">\n    <ng-container *ngIf="isModeAuto()">\n        <ecl-pagination-item *ngIf="model.hasPreviousPage()" [isPrevious]="true" (pageClick)="onPreviousPage()"> </ecl-pagination-item>\n\n        <ecl-pagination-item\n            *ngFor="let page of model.getPages()"\n            [label]="page.toString()"\n            [isCurrent]="model.getCurrentPage() === page"\n            (pageClick)="onPage(page)">\n        </ecl-pagination-item>\n\n        <ecl-pagination-item *ngIf="model.hasNextPage()" [isNext]="true" (pageClick)="onNextPage()"> </ecl-pagination-item>\n    </ng-container>\n\n    <ng-container *ngIf="!isModeAuto()">\n        <ng-content></ng-content>\n    </ng-container>\n</ul>\n', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i135.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i135.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: ["label", "ariaLabel", "isCurrent", "isNext", "isPrevious", "routerLink", "queryParams", "queryParamsHandling", "href"], outputs: ["pageClick"] }] });
+    this.ɵcmp = i0183.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclPaginationComponent, selector: "ecl-pagination", inputs: { mode: "mode", totalItems: "totalItems", pageSize: "pageSize", currentPage: "currentPage", pageWindowSize: "pageWindowSize" }, outputs: { page: "page" }, host: { properties: { "class.ecl-pagination": "this.cmpClass", "attr.role": "this.role" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0183, template: '<ul class="ecl-pagination__list">\n    <ng-container *ngIf="isModeAuto()">\n        <ecl-pagination-item *ngIf="model.hasPreviousPage()" [isPrevious]="true" (pageClick)="onPreviousPage()"> </ecl-pagination-item>\n\n        <ecl-pagination-item\n            *ngFor="let page of model.getPages()"\n            [label]="page.toString()"\n            [isCurrent]="model.getCurrentPage() === page"\n            (pageClick)="onPage(page)">\n        </ecl-pagination-item>\n\n        <ecl-pagination-item *ngIf="model.hasNextPage()" [isNext]="true" (pageClick)="onNextPage()"> </ecl-pagination-item>\n    </ng-container>\n\n    <ng-container *ngIf="!isModeAuto()">\n        <ng-content></ng-content>\n    </ng-container>\n</ul>\n', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i134.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i134.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: ["label", "ariaLabel", "isCurrent", "isNext", "isPrevious", "routerLink", "queryParams", "queryParamsHandling", "href"], outputs: ["pageClick"] }] });
   }
 };
-__decorate28([
-  coerceNumber4
+__decorate23([
+  coerceNumber2
 ], EclPaginationComponent.prototype, "totalItems", void 0);
-__decorate28([
-  coerceNumber4
+__decorate23([
+  coerceNumber2
 ], EclPaginationComponent.prototype, "pageSize", void 0);
-__decorate28([
-  coerceNumber4
+__decorate23([
+  coerceNumber2
 ], EclPaginationComponent.prototype, "currentPage", void 0);
-__decorate28([
-  coerceNumber4
+__decorate23([
+  coerceNumber2
 ], EclPaginationComponent.prototype, "pageWindowSize", void 0);
 i0183.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0183, type: EclPaginationComponent, decorators: [{
   type: Component84,
   args: [{ selector: "ecl-pagination", template: '<ul class="ecl-pagination__list">\n    <ng-container *ngIf="isModeAuto()">\n        <ecl-pagination-item *ngIf="model.hasPreviousPage()" [isPrevious]="true" (pageClick)="onPreviousPage()"> </ecl-pagination-item>\n\n        <ecl-pagination-item\n            *ngFor="let page of model.getPages()"\n            [label]="page.toString()"\n            [isCurrent]="model.getCurrentPage() === page"\n            (pageClick)="onPage(page)">\n        </ecl-pagination-item>\n\n        <ecl-pagination-item *ngIf="model.hasNextPage()" [isNext]="true" (pageClick)="onNextPage()"> </ecl-pagination-item>\n    </ng-container>\n\n    <ng-container *ngIf="!isModeAuto()">\n        <ng-content></ng-content>\n    </ng-container>\n</ul>\n', styles: [":host{display:block}\n"] }]
 }], propDecorators: { mode: [{
-  type: Input82
+  type: Input81
 }], totalItems: [{
-  type: Input82
+  type: Input81
 }], pageSize: [{
-  type: Input82
+  type: Input81
 }], currentPage: [{
-  type: Input82
+  type: Input81
 }], pageWindowSize: [{
-  type: Input82
+  type: Input81
 }], page: [{
   type: Output38
 }], cmpClass: [{
@@ -17079,9 +17045,9 @@ i0188.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] });
 
 // lib/components/ecl-radio/ecl-radio-help.component.mjs
-import { __decorate as __decorate29 } from "tslib";
-import { Component as Component86, HostBinding as HostBinding131, Input as Input83 } from "@angular/core";
-import { coerceBoolean as coerceBoolean24 } from "@eui/base";
+import { __decorate as __decorate24 } from "tslib";
+import { Component as Component86, HostBinding as HostBinding131, Input as Input82 } from "@angular/core";
+import { coerceBoolean as coerceBoolean20 } from "@eui/base";
 import * as i0189 from "@angular/core";
 var EclRadioHelpComponent = class _EclRadioHelpComponent extends ECLBaseDirective {
   constructor() {
@@ -17098,14 +17064,14 @@ var EclRadioHelpComponent = class _EclRadioHelpComponent extends ECLBaseDirectiv
     this.ɵcmp = i0189.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclRadioHelpComponent, selector: "[eclRadioHelp]", inputs: { isDisabled: "isDisabled" }, host: { properties: { "class.ecl-radio__help--disabled": "this.isDisabled", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0189, template: "<ng-content></ng-content>\n" });
   }
 };
-__decorate29([
-  coerceBoolean24
+__decorate24([
+  coerceBoolean20
 ], EclRadioHelpComponent.prototype, "isDisabled", void 0);
 i0189.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0189, type: EclRadioHelpComponent, decorators: [{
   type: Component86,
   args: [{ selector: "[eclRadioHelp]", template: "<ng-content></ng-content>\n" }]
 }], propDecorators: { isDisabled: [{
-  type: Input83
+  type: Input82
 }, {
   type: HostBinding131,
   args: ["class.ecl-radio__help--disabled"]
@@ -17115,9 +17081,9 @@ i0189.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-radio/ecl-radio-label.component.mjs
-import { __decorate as __decorate30 } from "tslib";
-import { Component as Component87, HostBinding as HostBinding132, Input as Input84, ViewEncapsulation as ViewEncapsulation13 } from "@angular/core";
-import { coerceBoolean as coerceBoolean25 } from "@eui/base";
+import { __decorate as __decorate25 } from "tslib";
+import { Component as Component87, HostBinding as HostBinding132, Input as Input83, ViewEncapsulation as ViewEncapsulation13 } from "@angular/core";
+import { coerceBoolean as coerceBoolean21 } from "@eui/base";
 import * as i0190 from "@angular/core";
 var EclRadioLabelComponent = class _EclRadioLabelComponent extends ECLBaseDirective {
   constructor() {
@@ -17135,28 +17101,28 @@ var EclRadioLabelComponent = class _EclRadioLabelComponent extends ECLBaseDirect
     this.ɵcmp = i0190.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclRadioLabelComponent, selector: "[eclRadioLabel]", inputs: { isInvalid: "isInvalid", isDisabled: "isDisabled" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0190, template: '<span class="ecl-radio__box" [class.ecl-radio__box--disabled]="isDisabled" [class.ecl-radio__box--invalid]="isInvalid">\n    <span class="ecl-radio__box-inner"></span>\n</span>\n\n<ng-content></ng-content>\n', encapsulation: i0190.ViewEncapsulation.None });
   }
 };
-__decorate30([
-  coerceBoolean25
+__decorate25([
+  coerceBoolean21
 ], EclRadioLabelComponent.prototype, "isInvalid", void 0);
-__decorate30([
-  coerceBoolean25
+__decorate25([
+  coerceBoolean21
 ], EclRadioLabelComponent.prototype, "isDisabled", void 0);
 i0190.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0190, type: EclRadioLabelComponent, decorators: [{
   type: Component87,
   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
+  type: Input83
 }], isDisabled: [{
-  type: Input84
+  type: Input83
 }], cssClasses: [{
   type: HostBinding132,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-radio/ecl-radio.directive.mjs
-import { __decorate as __decorate31 } from "tslib";
-import { ContentChild as ContentChild25, Directive as Directive54, forwardRef as forwardRef48, HostBinding as HostBinding133, Input as Input85 } from "@angular/core";
-import { coerceBoolean as coerceBoolean26 } from "@eui/base";
+import { __decorate as __decorate26 } from "tslib";
+import { ContentChild as ContentChild25, Directive as Directive54, forwardRef as forwardRef48, HostBinding as HostBinding133, Input as Input84 } from "@angular/core";
+import { coerceBoolean as coerceBoolean22 } from "@eui/base";
 import * as i0191 from "@angular/core";
 var EclRadioDirective = class _EclRadioDirective extends ECLBaseDirective {
   constructor() {
@@ -17186,14 +17152,14 @@ var EclRadioDirective = class _EclRadioDirective extends ECLBaseDirective {
     this.ɵdir = i0191.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclRadioDirective, selector: "[eclRadio]", inputs: { isBinary: "isBinary", isDisabled: "isDisabled", isInvalid: "isInvalid" }, host: { properties: { "class.ecl-radio--disabled": "this.isDisabled", "class.ecl-radio--invalid": "this.isInvalid", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclRadioLabelComponent", first: true, predicate: i0191.forwardRef(() => EclRadioLabelComponent), descendants: true }, { propertyName: "eclRadioHelpComponent", first: true, predicate: i0191.forwardRef(() => EclRadioHelpComponent), descendants: true }], usesInheritance: true, ngImport: i0191 });
   }
 };
-__decorate31([
-  coerceBoolean26
+__decorate26([
+  coerceBoolean22
 ], EclRadioDirective.prototype, "isBinary", void 0);
-__decorate31([
-  coerceBoolean26
+__decorate26([
+  coerceBoolean22
 ], EclRadioDirective.prototype, "isDisabled", void 0);
-__decorate31([
-  coerceBoolean26
+__decorate26([
+  coerceBoolean22
 ], EclRadioDirective.prototype, "isInvalid", void 0);
 i0191.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0191, type: EclRadioDirective, decorators: [{
   type: Directive54,
@@ -17201,14 +17167,14 @@ i0191.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
     selector: "[eclRadio]"
   }]
 }], propDecorators: { isBinary: [{
-  type: Input85
+  type: Input84
 }], isDisabled: [{
-  type: Input85
+  type: Input84
 }, {
   type: HostBinding133,
   args: ["class.ecl-radio--disabled"]
 }], isInvalid: [{
-  type: Input85
+  type: Input84
 }, {
   type: HostBinding133,
   args: ["class.ecl-radio--invalid"]
@@ -17226,7 +17192,7 @@ i0191.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 // lib/components/ecl-radio/ecl-radio-input.directive.mjs
 import { Directive as Directive55, HostBinding as HostBinding134, Optional as Optional6, Self as Self4, Inject as Inject5, forwardRef as forwardRef50 } from "@angular/core";
 import * as i0192 from "@angular/core";
-import * as i136 from "@angular/forms";
+import * as i135 from "@angular/forms";
 var EclRadioInputDirective = class _EclRadioInputDirective extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-radio__input")].join(" ").trim();
@@ -17246,7 +17212,7 @@ var EclRadioInputDirective = class _EclRadioInputDirective extends ECLBaseDirect
     }
   }
   static {
-    this.ɵfac = i0192.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0192, type: _EclRadioInputDirective, deps: [{ token: forwardRef50(() => EclRadioDirective) }, { token: i136.NgControl, optional: true, self: true }, { token: i0192.ChangeDetectorRef }], target: i0192.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0192.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0192, type: _EclRadioInputDirective, deps: [{ token: forwardRef50(() => EclRadioDirective) }, { token: i135.NgControl, optional: true, self: true }, { token: i0192.ChangeDetectorRef }], target: i0192.ɵɵFactoryTarget.Directive });
   }
   static {
     this.ɵdir = i0192.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclRadioInputDirective, selector: "input[eclRadioInput]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0192 });
@@ -17260,7 +17226,7 @@ i0192.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }], ctorParameters: () => [{ type: EclRadioDirective, decorators: [{
   type: Inject5,
   args: [forwardRef50(() => EclRadioDirective)]
-}] }, { type: i136.NgControl, decorators: [{
+}] }, { type: i135.NgControl, decorators: [{
   type: Optional6
 }, {
   type: Self4
@@ -17294,12 +17260,12 @@ i0193.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] });
 
 // lib/components/ecl-rating-field/ecl-rating-field.component.mjs
-import { __decorate as __decorate32 } from "tslib";
-import { Component as Component88, EventEmitter as EventEmitter40, forwardRef as forwardRef51, HostBinding as HostBinding135, Input as Input86, Output as Output40 } from "@angular/core";
+import { __decorate as __decorate27 } from "tslib";
+import { Component as Component88, EventEmitter as EventEmitter40, forwardRef as forwardRef51, HostBinding as HostBinding135, Input as Input85, Output as Output40 } from "@angular/core";
 import { NG_VALUE_ACCESSOR as NG_VALUE_ACCESSOR6 } from "@angular/forms";
-import { coerceBoolean as coerceBoolean27, coerceNumber as coerceNumber5 } from "@eui/base";
+import { coerceBoolean as coerceBoolean23, coerceNumber as coerceNumber3 } from "@eui/base";
 import * as i0194 from "@angular/core";
-import * as i137 from "@angular/common";
+import * as i136 from "@angular/common";
 var EclRatingChangeEvent = class extends EclBaseEvent {
   constructor(value) {
     super();
@@ -17353,34 +17319,34 @@ var EclRatingFieldComponent = class _EclRatingFieldComponent extends ECLBaseDire
     this.ɵfac = i0194.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0194, type: _EclRatingFieldComponent, deps: [], target: i0194.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0194.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclRatingFieldComponent, selector: "ecl-rating-field", inputs: { name: "name", numberOfStars: "numberOfStars", rating: "rating", disabled: "disabled" }, outputs: { ratingChange: "ratingChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [ECL_RATINGFIELD_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0194, template: '<ng-container *ngFor="let n of numbers">\n    <input\n        type="radio"\n        id="{{ name }}-{{ n }}"\n        [name]="name"\n        class="ecl-rating-field__input"\n        [value]="n"\n        required=""\n        [attr.checked]="rating === n ? true : undefined"\n        [attr.disabled]="disabled ? true : undefined"\n        (click)="onRadioClick(n)" />\n    <label class="ecl-rating-field__label" for="{{ name }}-{{ n }}">\n        <span class="ecl-u-sr-only">{{ n }} stars</span>\n        <ecl-icon icon="star-filled" class="ecl-rating-field__icon-filled" size="m"> </ecl-icon>\n        <ecl-icon icon="star-outline" class="ecl-rating-field__icon-outline" size="m"> </ecl-icon>\n    </label>\n</ng-container>\n', dependencies: [{ kind: "directive", type: i137.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
+    this.ɵcmp = i0194.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclRatingFieldComponent, selector: "ecl-rating-field", inputs: { name: "name", numberOfStars: "numberOfStars", rating: "rating", disabled: "disabled" }, outputs: { ratingChange: "ratingChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [ECL_RATINGFIELD_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0194, template: '<ng-container *ngFor="let n of numbers">\n    <input\n        type="radio"\n        id="{{ name }}-{{ n }}"\n        [name]="name"\n        class="ecl-rating-field__input"\n        [value]="n"\n        required=""\n        [attr.checked]="rating === n ? true : undefined"\n        [attr.disabled]="disabled ? true : undefined"\n        (click)="onRadioClick(n)" />\n    <label class="ecl-rating-field__label" for="{{ name }}-{{ n }}">\n        <span class="ecl-u-sr-only">{{ n }} stars</span>\n        <ecl-icon icon="star-filled" class="ecl-rating-field__icon-filled" size="m"> </ecl-icon>\n        <ecl-icon icon="star-outline" class="ecl-rating-field__icon-outline" size="m"> </ecl-icon>\n    </label>\n</ng-container>\n', dependencies: [{ kind: "directive", type: i136.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
   }
 };
-__decorate32([
-  coerceNumber5
+__decorate27([
+  coerceNumber3
 ], EclRatingFieldComponent.prototype, "numberOfStars", void 0);
-__decorate32([
-  coerceNumber5
+__decorate27([
+  coerceNumber3
 ], EclRatingFieldComponent.prototype, "rating", void 0);
-__decorate32([
-  coerceBoolean27
+__decorate27([
+  coerceBoolean23
 ], EclRatingFieldComponent.prototype, "disabled", void 0);
 i0194.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0194, type: EclRatingFieldComponent, decorators: [{
   type: Component88,
   args: [{ selector: "ecl-rating-field", providers: [ECL_RATINGFIELD_VALUE_ACCESSOR], template: '<ng-container *ngFor="let n of numbers">\n    <input\n        type="radio"\n        id="{{ name }}-{{ n }}"\n        [name]="name"\n        class="ecl-rating-field__input"\n        [value]="n"\n        required=""\n        [attr.checked]="rating === n ? true : undefined"\n        [attr.disabled]="disabled ? true : undefined"\n        (click)="onRadioClick(n)" />\n    <label class="ecl-rating-field__label" for="{{ name }}-{{ n }}">\n        <span class="ecl-u-sr-only">{{ n }} stars</span>\n        <ecl-icon icon="star-filled" class="ecl-rating-field__icon-filled" size="m"> </ecl-icon>\n        <ecl-icon icon="star-outline" class="ecl-rating-field__icon-outline" size="m"> </ecl-icon>\n    </label>\n</ng-container>\n' }]
 }], ctorParameters: () => [], propDecorators: {
   name: [{
-    type: Input86
+    type: Input85
   }],
   numberOfStars: [{
-    type: Input86
+    type: Input85
   }],
   rating: [{
-    type: Input86
+    type: Input85
   }],
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   disabled: [{
-    type: Input86
+    type: Input85
   }, {
     type: HostBinding135,
     args: ["attr.disabled"]
@@ -17420,9 +17386,9 @@ i0195.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] });
 
 // lib/components/ecl-range/ecl-range-value.component.mjs
-import { Component as Component89, HostBinding as HostBinding136, Input as Input87 } from "@angular/core";
+import { Component as Component89, HostBinding as HostBinding136, Input as Input86 } from "@angular/core";
 import * as i0196 from "@angular/core";
-import * as i138 from "@ngx-translate/core";
+import * as i137 from "@ngx-translate/core";
 var EclRangeValueComponent = class _EclRangeValueComponent extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-range__value")].join(" ").trim();
@@ -17432,7 +17398,7 @@ var EclRangeValueComponent = class _EclRangeValueComponent extends ECLBaseDirect
   }
   static {
     this.ɵcmp = i0196.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclRangeValueComponent, selector: "ecl-range-value", inputs: { value: "value" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0196, template: `{{ 'ecl.common.VALUE' | translate }}: <span class="ecl-range__value-current"> {{ value }} </span>
-`, styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: i138.TranslatePipe, name: "translate" }] });
+`, styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: i137.TranslatePipe, name: "translate" }] });
   }
 };
 i0196.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0196, type: EclRangeValueComponent, decorators: [{
@@ -17440,19 +17406,19 @@ i0196.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   args: [{ selector: "ecl-range-value", template: `{{ 'ecl.common.VALUE' | translate }}: <span class="ecl-range__value-current"> {{ value }} </span>
 `, styles: [":host{display:block}\n"] }]
 }], propDecorators: { value: [{
-  type: Input87
+  type: Input86
 }], cssClasses: [{
   type: HostBinding136,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-range/ecl-range.directive.mjs
-import { __decorate as __decorate33 } from "tslib";
-import { Directive as Directive56, EventEmitter as EventEmitter41, HostBinding as HostBinding137, HostListener as HostListener21, Input as Input88, Optional as Optional7, Output as Output41, Self as Self5 } from "@angular/core";
-import { coerceBoolean as coerceBoolean28 } from "@eui/base";
+import { __decorate as __decorate28 } from "tslib";
+import { Directive as Directive56, EventEmitter as EventEmitter41, HostBinding as HostBinding137, HostListener as HostListener21, Input as Input87, Optional as Optional7, Output as Output41, Self as Self5 } from "@angular/core";
+import { coerceBoolean as coerceBoolean24 } from "@eui/base";
 import { distinctUntilChanged } from "rxjs";
 import * as i0197 from "@angular/core";
-import * as i139 from "@angular/forms";
+import * as i138 from "@angular/forms";
 var EclRangeEvent = class extends EclBaseEvent {
   constructor(value) {
     super();
@@ -17501,30 +17467,30 @@ var EclRangeDirective = class _EclRangeDirective extends ECLBaseDirective {
     this.rangeChange.next(new EclRangeEvent(numberValue));
   }
   static {
-    this.ɵfac = i0197.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0197, type: _EclRangeDirective, deps: [{ token: i0197.ViewContainerRef }, { token: i139.NgControl, optional: true, self: true }], target: i0197.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0197.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0197, type: _EclRangeDirective, deps: [{ token: i0197.ViewContainerRef }, { token: i138.NgControl, optional: true, self: true }], target: i0197.ɵɵFactoryTarget.Directive });
   }
   static {
     this.ɵdir = i0197.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclRangeDirective, selector: "input[eclRange]", inputs: { eclSize: "eclSize", value: "value", hasValueLabel: "hasValueLabel" }, outputs: { rangeChange: "rangeChange" }, host: { listeners: { "input": "onInput($event)" }, properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0197 });
   }
 };
-__decorate33([
-  coerceBoolean28
+__decorate28([
+  coerceBoolean24
 ], EclRangeDirective.prototype, "hasValueLabel", void 0);
 i0197.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0197, type: EclRangeDirective, decorators: [{
   type: Directive56,
   args: [{
     selector: "input[eclRange]"
   }]
-}], ctorParameters: () => [{ type: i0197.ViewContainerRef }, { type: i139.NgControl, decorators: [{
+}], ctorParameters: () => [{ type: i0197.ViewContainerRef }, { type: i138.NgControl, decorators: [{
   type: Optional7
 }, {
   type: Self5
 }] }], propDecorators: { eclSize: [{
-  type: Input88
+  type: Input87
 }], value: [{
-  type: Input88
+  type: Input87
 }], hasValueLabel: [{
-  type: Input88
+  type: Input87
 }], rangeChange: [{
   type: Output41
 }], cssClasses: [{
@@ -17562,7 +17528,7 @@ i0198.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] });
 
 // lib/components/ecl-select/ecl-select-container.component.mjs
-import { Component as Component90, HostBinding as HostBinding138, Input as Input89 } from "@angular/core";
+import { Component as Component90, HostBinding as HostBinding138, Input as Input88 } from "@angular/core";
 import * as i0199 from "@angular/core";
 var EclSelectContainerComponent = class _EclSelectContainerComponent extends ECLBaseDirective {
   constructor() {
@@ -17588,22 +17554,22 @@ i0199.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: Component90,
   args: [{ selector: "ecl-select-container", template: '<div class="ecl-select__icon">\n    <ecl-icon icon="corner-arrow" size="s" transform="rotate-180" class="ecl-select__icon-shape"> </ecl-icon>\n</div>\n' }]
 }], propDecorators: { eclSize: [{
-  type: Input89
+  type: Input88
 }], disabled: [{
-  type: Input89
+  type: Input88
 }], isInvalid: [{
-  type: Input89
+  type: Input88
 }], cssClasses: [{
   type: HostBinding138,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-select/ecl-select.directive.mjs
-import { __decorate as __decorate34 } from "tslib";
-import { Directive as Directive57, HostBinding as HostBinding139, Input as Input90, Optional as Optional8, Self as Self6 } from "@angular/core";
-import { coerceBoolean as coerceBoolean29 } from "@eui/base";
+import { __decorate as __decorate29 } from "tslib";
+import { Directive as Directive57, HostBinding as HostBinding139, Input as Input89, Optional as Optional8, Self as Self6 } from "@angular/core";
+import { coerceBoolean as coerceBoolean25 } from "@eui/base";
 import * as i0200 from "@angular/core";
-import * as i140 from "@angular/forms";
+import * as i139 from "@angular/forms";
 var EclSelectDirective = class _EclSelectDirective extends ECLBaseDirective {
   get cssClasses() {
     return [super.getCssClasses("ecl-select")].join(" ").trim();
@@ -17645,36 +17611,36 @@ var EclSelectDirective = class _EclSelectDirective extends ECLBaseDirective {
     this.containerComponent.isInvalid = this.isInvalidState;
   }
   static {
-    this.ɵfac = i0200.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0200, type: _EclSelectDirective, deps: [{ token: i140.NgControl, optional: true, self: true }, { token: i0200.ElementRef }, { token: i0200.ViewContainerRef }], target: i0200.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0200.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0200, type: _EclSelectDirective, deps: [{ token: i139.NgControl, optional: true, self: true }, { token: i0200.ElementRef }, { token: i0200.ViewContainerRef }], target: i0200.ɵɵFactoryTarget.Directive });
   }
   static {
     this.ɵdir = i0200.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclSelectDirective, selector: "select[eclSelect]", inputs: { disabled: "disabled", isInvalid: "isInvalid", eclSize: "eclSize" }, host: { properties: { "attr.disabled": "this.isDisabled", "class": "this.cssClasses", "class.ecl-select--invalid": "this.isInvalidState" } }, usesInheritance: true, ngImport: i0200 });
   }
 };
-__decorate34([
-  coerceBoolean29
+__decorate29([
+  coerceBoolean25
 ], EclSelectDirective.prototype, "disabled", void 0);
-__decorate34([
-  coerceBoolean29
+__decorate29([
+  coerceBoolean25
 ], EclSelectDirective.prototype, "isInvalid", void 0);
 i0200.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0200, type: EclSelectDirective, decorators: [{
   type: Directive57,
   args: [{
     selector: "select[eclSelect]"
   }]
-}], ctorParameters: () => [{ type: i140.NgControl, decorators: [{
+}], ctorParameters: () => [{ type: i139.NgControl, decorators: [{
   type: Optional8
 }, {
   type: Self6
 }] }, { type: i0200.ElementRef }, { type: i0200.ViewContainerRef }], propDecorators: { disabled: [{
-  type: Input90
+  type: Input89
 }, {
   type: HostBinding139,
   args: ["attr.disabled"]
 }], isInvalid: [{
-  type: Input90
+  type: Input89
 }], eclSize: [{
-  type: Input90
+  type: Input89
 }], cssClasses: [{
   type: HostBinding139,
   args: ["class"]
@@ -17712,9 +17678,9 @@ i0201.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] });
 
 // lib/components/ecl-social-media-follow/ecl-social-media-follow.component.mjs
-import { Component as Component91, HostBinding as HostBinding140, Input as Input91, booleanAttribute as booleanAttribute22 } from "@angular/core";
+import { Component as Component91, HostBinding as HostBinding140, Input as Input90, booleanAttribute as booleanAttribute25 } from "@angular/core";
 import * as i0202 from "@angular/core";
-import * as i141 from "@angular/common";
+import * as i140 from "@angular/common";
 var EclSocialMediaFollowComponent = class _EclSocialMediaFollowComponent extends ECLBaseDirective {
   constructor() {
     super(...arguments);
@@ -17727,27 +17693,27 @@ var EclSocialMediaFollowComponent = class _EclSocialMediaFollowComponent extends
     this.ɵfac = i0202.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0202, type: _EclSocialMediaFollowComponent, deps: null, target: i0202.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0202.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclSocialMediaFollowComponent, selector: "ecl-social-media-follow", inputs: { description: "description", isVertical: ["isVertical", "isVertical", booleanAttribute22] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0202, template: '<p *ngIf="description" class="ecl-social-media-follow__description">{{ description }}</p>\n<ul class="ecl-social-media-follow__list">\n    <ng-content></ng-content>\n</ul>\n', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i141.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    this.ɵcmp = i0202.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclSocialMediaFollowComponent, selector: "ecl-social-media-follow", inputs: { description: "description", isVertical: ["isVertical", "isVertical", booleanAttribute25] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0202, template: '<p *ngIf="description" class="ecl-social-media-follow__description">{{ description }}</p>\n<ul class="ecl-social-media-follow__list">\n    <ng-content></ng-content>\n</ul>\n', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i140.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   }
 };
 i0202.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0202, type: EclSocialMediaFollowComponent, decorators: [{
   type: Component91,
   args: [{ selector: "ecl-social-media-follow", template: '<p *ngIf="description" class="ecl-social-media-follow__description">{{ description }}</p>\n<ul class="ecl-social-media-follow__list">\n    <ng-content></ng-content>\n</ul>\n', styles: [":host{display:block}\n"] }]
 }], propDecorators: { description: [{
-  type: Input91
+  type: Input90
 }], isVertical: [{
-  type: Input91,
-  args: [{ transform: booleanAttribute22 }]
+  type: Input90,
+  args: [{ transform: booleanAttribute25 }]
 }], cssClasses: [{
   type: HostBinding140,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-social-media-follow/ecl-social-media-follow-item.component.mjs
-import { Component as Component92, EventEmitter as EventEmitter42, HostBinding as HostBinding141, Input as Input92, Output as Output42 } from "@angular/core";
+import { Component as Component92, EventEmitter as EventEmitter42, HostBinding as HostBinding141, Input as Input91, Output as Output42 } from "@angular/core";
 import * as i0203 from "@angular/core";
-import * as i142 from "@angular/common";
-import * as i216 from "@angular/router";
+import * as i141 from "@angular/common";
+import * as i215 from "@angular/router";
 var EclSocialMediaFollowItemClickEvent = class extends EclBaseEvent {
 };
 var EclSocialMediaFollowItemComponent = class _EclSocialMediaFollowItemComponent extends ECLBaseDirective {
@@ -17773,7 +17739,7 @@ var EclSocialMediaFollowItemComponent = class _EclSocialMediaFollowItemComponent
     this.ɵfac = i0203.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0203, type: _EclSocialMediaFollowItemComponent, deps: null, target: i0203.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0203.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclSocialMediaFollowItemComponent, selector: "ecl-social-media-follow-item", inputs: { icon: "icon", iconSet: "iconSet", href: "href", routerLink: "routerLink", target: "target", size: "size" }, outputs: { itemClick: "itemClick" }, host: { properties: { "attr.role": "this.role", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0203, template: '@if(href) {\n<a eclLink (click)="onItemClick($event)" variant="standalone" [href]="href" [attr.target]="target"\n    class="ecl-social-media-follow__link">\n    @if(icon) {\n    <ecl-icon [iconSet]="iconSet" icon="{{ icon }}" [size]="size" class="ecl-social-media-follow__icon"> </ecl-icon>\n    }\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n    </span>\n</a>\n}\n\n@if(!href && routerLink) {\n<a eclLink (click)="onItemClick($event)" variant="standalone" [routerLink]="routerLink" [attr.target]="target"\n    class="ecl-social-media-follow__link">\n    @if(icon) {\n    <ecl-icon [iconSet]="iconSet" icon="{{ icon }}" [size]="size" class="ecl-social-media-follow__icon"> </ecl-icon>\n    }\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n    </span>\n</a>\n}\n\n@if(!href && !routerLink) {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>', dependencies: [{ kind: "directive", type: i142.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i216.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isHiddenLabel", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }] });
+    this.ɵcmp = i0203.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclSocialMediaFollowItemComponent, selector: "ecl-social-media-follow-item", inputs: { icon: "icon", iconSet: "iconSet", href: "href", routerLink: "routerLink", target: "target", size: "size" }, outputs: { itemClick: "itemClick" }, host: { properties: { "attr.role": "this.role", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0203, template: '@if(href) {\n<a eclLink (click)="onItemClick($event)" variant="standalone" [href]="href" [attr.target]="target"\n    class="ecl-social-media-follow__link">\n    @if(icon) {\n    <ecl-icon [iconSet]="iconSet" icon="{{ icon }}" [size]="size" class="ecl-social-media-follow__icon"> </ecl-icon>\n    }\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n    </span>\n</a>\n}\n\n@if(!href && routerLink) {\n<a eclLink (click)="onItemClick($event)" variant="standalone" [routerLink]="routerLink" [attr.target]="target"\n    class="ecl-social-media-follow__link">\n    @if(icon) {\n    <ecl-icon [iconSet]="iconSet" icon="{{ icon }}" [size]="size" class="ecl-social-media-follow__icon"> </ecl-icon>\n    }\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n    </span>\n</a>\n}\n\n@if(!href && !routerLink) {\n<ng-container *ngTemplateOutlet="content"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>', dependencies: [{ kind: "directive", type: i141.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i215.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }] });
   }
 };
 i0203.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0203, type: EclSocialMediaFollowItemComponent, decorators: [{
@@ -17783,17 +17749,17 @@ i0203.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: HostBinding141,
   args: ["attr.role"]
 }], icon: [{
-  type: Input92
+  type: Input91
 }], iconSet: [{
-  type: Input92
+  type: Input91
 }], href: [{
-  type: Input92
+  type: Input91
 }], routerLink: [{
-  type: Input92
+  type: Input91
 }], target: [{
-  type: Input92
+  type: Input91
 }], size: [{
-  type: Input92
+  type: Input91
 }], cssClasses: [{
   type: HostBinding141,
   args: ["class"]
@@ -17860,9 +17826,9 @@ i0205.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] });
 
 // lib/components/ecl-social-media-share/ecl-social-media-share.component.mjs
-import { __decorate as __decorate35 } from "tslib";
-import { Component as Component93, HostBinding as HostBinding143, Input as Input93 } from "@angular/core";
-import { coerceBoolean as coerceBoolean30 } from "@eui/base";
+import { __decorate as __decorate30 } from "tslib";
+import { Component as Component93, HostBinding as HostBinding143, Input as Input92 } from "@angular/core";
+import { coerceBoolean as coerceBoolean26 } from "@eui/base";
 import * as i0206 from "@angular/core";
 var EclSocialMediaShareComponent = class _EclSocialMediaShareComponent extends ECLBaseDirective {
   constructor() {
@@ -17879,25 +17845,25 @@ var EclSocialMediaShareComponent = class _EclSocialMediaShareComponent extends E
     this.ɵcmp = i0206.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclSocialMediaShareComponent, selector: "ecl-social-media-share", inputs: { description: "description", isVertical: "isVertical" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0206, template: '<p class="ecl-social-media-share__description">{{ description }}</p>\n<ul class="ecl-social-media-share__list">\n    <ng-content></ng-content>\n</ul>\n', styles: [":host{display:block}\n"] });
   }
 };
-__decorate35([
-  coerceBoolean30
+__decorate30([
+  coerceBoolean26
 ], EclSocialMediaShareComponent.prototype, "isVertical", void 0);
 i0206.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0206, type: EclSocialMediaShareComponent, decorators: [{
   type: Component93,
   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
+  type: Input92
 }], isVertical: [{
-  type: Input93
+  type: Input92
 }], cssClasses: [{
   type: HostBinding143,
   args: ["class"]
 }] } });
 
 // lib/components/ecl-social-media-share/ecl-social-media-share-item.component.mjs
-import { Component as Component94, EventEmitter as EventEmitter43, HostBinding as HostBinding144, Input as Input94, Output as Output43 } from "@angular/core";
+import { Component as Component94, EventEmitter as EventEmitter43, HostBinding as HostBinding144, Input as Input93, Output as Output43 } from "@angular/core";
 import * as i0207 from "@angular/core";
-import * as i143 from "@angular/common";
+import * as i142 from "@angular/common";
 var EclSocialMediaShareItemClickEvent = class extends EclBaseEvent {
 };
 var EclSocialMediaShareItemComponent = class _EclSocialMediaShareItemComponent extends ECLBaseDirective {
@@ -17922,7 +17888,7 @@ var EclSocialMediaShareItemComponent = class _EclSocialMediaShareItemComponent e
     this.ɵfac = i0207.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0207, type: _EclSocialMediaShareItemComponent, deps: null, target: i0207.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0207.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclSocialMediaShareItemComponent, selector: "ecl-social-media-share-item", inputs: { icon: "icon", iconSet: "iconSet", size: "size", href: "href", target: "target" }, outputs: { itemClick: "itemClick" }, host: { properties: { "attr.role": "this.role", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0207, template: '<a\n    eclLink\n    *ngIf="href"\n    (click)="onItemClick($event)"\n    variant="standalone"\n    [href]="href"\n    [attr.target]="target"\n    class="ecl-social-media-share__link">\n    <ecl-icon *ngIf="icon" [iconSet]="iconSet" icon="{{ icon }}" [size]="size" class="ecl-social-media-share__icon"> </ecl-icon>\n\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n    </span>\n</a>\n\n<ng-container *ngIf="!href">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</ng-container>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "directive", type: i143.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i143.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isHiddenLabel", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
+    this.ɵcmp = i0207.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclSocialMediaShareItemComponent, selector: "ecl-social-media-share-item", inputs: { icon: "icon", iconSet: "iconSet", size: "size", href: "href", target: "target" }, outputs: { itemClick: "itemClick" }, host: { properties: { "attr.role": "this.role", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0207, template: '<a\n    eclLink\n    *ngIf="href"\n    (click)="onItemClick($event)"\n    variant="standalone"\n    [href]="href"\n    [attr.target]="target"\n    class="ecl-social-media-share__link">\n    <ecl-icon *ngIf="icon" [iconSet]="iconSet" icon="{{ icon }}" [size]="size" class="ecl-social-media-share__icon"> </ecl-icon>\n\n    <span eclLinkLabel>\n        <ng-container *ngTemplateOutlet="content"></ng-container>\n    </span>\n</a>\n\n<ng-container *ngIf="!href">\n    <ng-container *ngTemplateOutlet="content"></ng-container>\n</ng-container>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "directive", type: i142.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i142.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
   }
 };
 i0207.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0207, type: EclSocialMediaShareItemComponent, decorators: [{
@@ -17932,15 +17898,15 @@ i0207.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: HostBinding144,
   args: ["attr.role"]
 }], icon: [{
-  type: Input94
+  type: Input93
 }], iconSet: [{
-  type: Input94
+  type: Input93
 }], size: [{
-  type: Input94
+  type: Input93
 }], href: [{
-  type: Input94
+  type: Input93
 }], target: [{
-  type: Input94
+  type: Input93
 }], cssClasses: [{
   type: HostBinding144,
   args: ["class"]
@@ -18006,7 +17972,7 @@ i0209.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] });
 
 // lib/components/ecl-loading-indicator/ecl-loading-indicator.component.mjs
-import { Component as Component95, HostBinding as HostBinding146, Input as Input95, booleanAttribute as booleanAttribute23 } from "@angular/core";
+import { Component as Component95, HostBinding as HostBinding146, Input as Input94, booleanAttribute as booleanAttribute26 } from "@angular/core";
 import * as i0210 from "@angular/core";
 var EclLoadingIndicatorComponent = class _EclLoadingIndicatorComponent extends ECLBaseDirective {
   constructor() {
@@ -18029,7 +17995,7 @@ var EclLoadingIndicatorComponent = class _EclLoadingIndicatorComponent extends E
     this.ɵfac = i0210.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0210, type: _EclLoadingIndicatorComponent, deps: null, target: i0210.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0210.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclLoadingIndicatorComponent, selector: "ecl-loading-indicator", inputs: { size: "size", variant: "variant", isCentered: ["isCentered", "isCentered", booleanAttribute23], isVisible: ["isVisible", "isVisible", booleanAttribute23] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0210, template: '<svg class="ecl-spinner__loader" viewBox="25 25 50 50">\n    <circle\n        class="ecl-spinner__circle"\n        cx="50"\n        cy="50"\n        r="20"\n        fill="none"\n        stroke-width="4px"\n        stroke-miterlimit="10"\n        vector-effect="non-scaling-stroke"></circle>\n</svg>\n<ng-content></ng-content>\n' });
+    this.ɵcmp = i0210.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclLoadingIndicatorComponent, selector: "ecl-loading-indicator", inputs: { size: "size", variant: "variant", isCentered: ["isCentered", "isCentered", booleanAttribute26], isVisible: ["isVisible", "isVisible", booleanAttribute26] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0210, template: '<svg class="ecl-spinner__loader" viewBox="25 25 50 50">\n    <circle\n        class="ecl-spinner__circle"\n        cx="50"\n        cy="50"\n        r="20"\n        fill="none"\n        stroke-width="4px"\n        stroke-miterlimit="10"\n        vector-effect="non-scaling-stroke"></circle>\n</svg>\n<ng-content></ng-content>\n' });
   }
 };
 i0210.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0210, type: EclLoadingIndicatorComponent, decorators: [{
@@ -18039,15 +18005,15 @@ i0210.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: HostBinding146,
   args: ["class"]
 }], size: [{
-  type: Input95
+  type: Input94
 }], variant: [{
-  type: Input95
+  type: Input94
 }], isCentered: [{
-  type: Input95,
-  args: [{ transform: booleanAttribute23 }]
+  type: Input94,
+  args: [{ transform: booleanAttribute26 }]
 }], isVisible: [{
-  type: Input95,
-  args: [{ transform: booleanAttribute23 }]
+  type: Input94,
+  args: [{ transform: booleanAttribute26 }]
 }] } });
 
 // lib/components/ecl-loading-indicator/ecl-loading-indicator-label.directive.mjs
@@ -18126,7 +18092,7 @@ i0213.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 // lib/components/ecl-table/ecl-table-sort-button.component.mjs
 import { Component as Component96, HostBinding as HostBinding149 } from "@angular/core";
 import * as i0214 from "@angular/core";
-import * as i37 from "@angular/common";
+import * as i35 from "@angular/common";
 var EclTableSortButtonComponent = class _EclTableSortButtonComponent extends ECLBaseDirective {
   constructor(eclThemeService) {
     super();
@@ -18142,7 +18108,7 @@ var EclTableSortButtonComponent = class _EclTableSortButtonComponent extends ECL
   static {
     this.ɵcmp = i0214.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclTableSortButtonComponent, selector: "button[eclTableSortButton]", host: { properties: { "attr.aria-label": "this.ariaLabel", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0214, template: `<ecl-icon icon="solid-arrow" class="ecl-table__icon ecl-table__icon-up" [size]="(eclThemeService.isEC$ | async) ? 'xs' : 'm'"> </ecl-icon>
 <ecl-icon icon="solid-arrow" class="ecl-table__icon ecl-table__icon-down" [size]="(eclThemeService.isEC$ | async) ? 'xs' : 'm'"> </ecl-icon>
-`, dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i37.AsyncPipe, name: "async" }] });
+`, dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i35.AsyncPipe, name: "async" }] });
   }
 };
 i0214.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0214, type: EclTableSortButtonComponent, decorators: [{
@@ -18159,7 +18125,7 @@ i0214.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-table/ecl-table.directive.mjs
-import { ContentChildren as ContentChildren25, Directive as Directive62, EventEmitter as EventEmitter44, forwardRef as forwardRef52, HostBinding as HostBinding150, HostListener as HostListener22, Input as Input96, Output as Output44, booleanAttribute as booleanAttribute24 } from "@angular/core";
+import { ContentChildren as ContentChildren25, Directive as Directive62, EventEmitter as EventEmitter44, forwardRef as forwardRef52, HostBinding as HostBinding150, HostListener as HostListener22, Input as Input95, Output as Output44, booleanAttribute as booleanAttribute27 } from "@angular/core";
 import { Subject as Subject27 } from "rxjs";
 import { takeUntil as takeUntil24 } from "rxjs/operators";
 import * as i0215 from "@angular/core";
@@ -18205,7 +18171,7 @@ var EclTableDirective = class _EclTableDirective extends ECLBaseDirective {
     this.ɵfac = i0215.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0215, type: _EclTableDirective, deps: [{ token: i0215.IterableDiffers }], target: i0215.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0215.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclTableDirective, selector: "[eclTable]", inputs: { isZebra: ["isZebra", "isZebra", booleanAttribute24] }, outputs: { sort: "sort" }, host: { properties: { "class.ecl-table--zebra": "this.isZebra", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclTableHeaders", predicate: i0215.forwardRef(() => EclTableHeaderDirective), descendants: true }], usesInheritance: true, ngImport: i0215 });
+    this.ɵdir = i0215.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _EclTableDirective, selector: "[eclTable]", inputs: { isZebra: ["isZebra", "isZebra", booleanAttribute27] }, outputs: { sort: "sort" }, host: { properties: { "class.ecl-table--zebra": "this.isZebra", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclTableHeaders", predicate: i0215.forwardRef(() => EclTableHeaderDirective), descendants: true }], usesInheritance: true, ngImport: i0215 });
   }
 };
 i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0215, type: EclTableDirective, decorators: [{
@@ -18214,8 +18180,8 @@ i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
     selector: "[eclTable]"
   }]
 }], ctorParameters: () => [{ type: i0215.IterableDiffers }], propDecorators: { isZebra: [{
-  type: Input96,
-  args: [{ transform: booleanAttribute24 }]
+  type: Input95,
+  args: [{ transform: booleanAttribute27 }]
 }, {
   type: HostBinding150,
   args: ["class.ecl-table--zebra"]
@@ -18340,12 +18306,12 @@ i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: HostBinding150,
   args: ["attr.aria-sort"]
 }], eclSortable: [{
-  type: Input96
+  type: Input95
 }, {
   type: HostBinding150,
   args: ["attr.data-ecl-table-sort-toggle"]
 }], sortButtonAriaLabel: [{
-  type: Input96
+  type: Input95
 }], cssClasses: [{
   type: HostBinding150,
   args: ["class"]
@@ -18416,12 +18382,12 @@ i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
     selector: "[eclTableCell]"
   }]
 }], propDecorators: { eclTableCellHeader: [{
-  type: Input96
+  type: Input95
 }, {
   type: HostBinding150,
   args: ["attr.data-ecl-table-header"]
 }], isGroup: [{
-  type: Input96
+  type: Input95
 }, {
   type: HostBinding150,
   args: ["class.ecl-table__cell--group"]
@@ -18446,7 +18412,7 @@ i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
     selector: "[eclTableCellGroup]"
   }]
 }], propDecorators: { eclTableCellGroup: [{
-  type: Input96
+  type: Input95
 }, {
   type: HostBinding150,
   args: ["attr.data-ecl-table-header-group"]
@@ -18551,9 +18517,9 @@ i0217.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }], ctorParameters: () => [{ type: i0217.ElementRef }] });
 
 // lib/components/ecl-tabs/ecl-tab.component.mjs
-import { __decorate as __decorate36 } from "tslib";
-import { Component as Component98, ContentChild as ContentChild28, EventEmitter as EventEmitter45, HostBinding as HostBinding151, Input as Input97, Output as Output45, ViewChild as ViewChild16 } from "@angular/core";
-import { coerceBoolean as coerceBoolean31 } from "@eui/base";
+import { __decorate as __decorate31 } from "tslib";
+import { Component as Component98, ContentChild as ContentChild28, EventEmitter as EventEmitter45, HostBinding as HostBinding151, Input as Input96, Output as Output45, ViewChild as ViewChild16 } from "@angular/core";
+import { coerceBoolean as coerceBoolean27 } from "@eui/base";
 import * as i0218 from "@angular/core";
 var EclTabSelectEvent = class extends EclBaseEvent {
   constructor(tab) {
@@ -18608,27 +18574,27 @@ var EclTabComponent = class _EclTabComponent extends ECLBaseDirective {
     this.ɵfac = i0218.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0218, type: _EclTabComponent, deps: [{ token: i0218.ElementRef }], target: i0218.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0218.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclTabComponent, selector: "ecl-tab, li[eclTab]", inputs: { id: "id", isHidden: "isHidden", isActive: "isActive" }, outputs: { selectTab: "selectTab", keydownTab: "keydownTab" }, host: { properties: { "attr.aria-hidden": "this.isHidden", "attr.role": "this.role", "class": "this.cssClasses" } }, queries: [{ propertyName: "label", first: true, predicate: EclTabLabelComponent, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "link", first: true, predicate: EclLinkDirective, descendants: true }], usesInheritance: true, ngImport: i0218, template: '<a\n    eclLink\n    role="tab"\n    class="ecl-tabs__link"\n    [class.ecl-tabs__link--active]="isActive"\n    [attr.aria-selected]="isActive"\n    tabindex="0"\n    (keydown)="onKeydown($event)"\n    (click)="onTabClick()">\n    <ng-content select="ecl-tab-label"></ng-content>\n</a>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isHiddenLabel", "isNoVisited", "variant"] }] });
+    this.ɵcmp = i0218.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclTabComponent, selector: "ecl-tab, li[eclTab]", inputs: { id: "id", isHidden: "isHidden", isActive: "isActive" }, outputs: { selectTab: "selectTab", keydownTab: "keydownTab" }, host: { properties: { "attr.aria-hidden": "this.isHidden", "attr.role": "this.role", "class": "this.cssClasses" } }, queries: [{ propertyName: "label", first: true, predicate: EclTabLabelComponent, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "link", first: true, predicate: EclLinkDirective, descendants: true }], usesInheritance: true, ngImport: i0218, template: '<a\n    eclLink\n    role="tab"\n    class="ecl-tabs__link"\n    [class.ecl-tabs__link--active]="isActive"\n    [attr.aria-selected]="isActive"\n    tabindex="0"\n    (keydown)="onKeydown($event)"\n    (click)="onTabClick()">\n    <ng-content select="ecl-tab-label"></ng-content>\n</a>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }] });
   }
 };
-__decorate36([
-  coerceBoolean31
+__decorate31([
+  coerceBoolean27
 ], EclTabComponent.prototype, "isHidden", void 0);
-__decorate36([
-  coerceBoolean31
+__decorate31([
+  coerceBoolean27
 ], EclTabComponent.prototype, "isActive", void 0);
 i0218.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0218, type: EclTabComponent, decorators: [{
   type: Component98,
   args: [{ selector: "ecl-tab, li[eclTab]", template: '<a\n    eclLink\n    role="tab"\n    class="ecl-tabs__link"\n    [class.ecl-tabs__link--active]="isActive"\n    [attr.aria-selected]="isActive"\n    tabindex="0"\n    (keydown)="onKeydown($event)"\n    (click)="onTabClick()">\n    <ng-content select="ecl-tab-label"></ng-content>\n</a>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n' }]
 }], ctorParameters: () => [{ type: i0218.ElementRef }], propDecorators: { id: [{
-  type: Input97
+  type: Input96
 }], isHidden: [{
-  type: Input97
+  type: Input96
 }, {
   type: HostBinding151,
   args: ["attr.aria-hidden"]
 }], isActive: [{
-  type: Input97
+  type: Input96
 }], selectTab: [{
   type: Output45
 }], keydownTab: [{
@@ -18651,9 +18617,9 @@ i0218.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-tabs/ecl-tab-more.component.mjs
-import { __decorate as __decorate37 } from "tslib";
-import { Component as Component99, HostBinding as HostBinding152, Input as Input98 } from "@angular/core";
-import { coerceBoolean as coerceBoolean32 } from "@eui/base";
+import { __decorate as __decorate32 } from "tslib";
+import { Component as Component99, HostBinding as HostBinding152, Input as Input97 } from "@angular/core";
+import { coerceBoolean as coerceBoolean28 } from "@eui/base";
 import * as i0219 from "@angular/core";
 var EclTabMoreComponent = class _EclTabMoreComponent extends ECLBaseDirective {
   constructor() {
@@ -18671,14 +18637,14 @@ var EclTabMoreComponent = class _EclTabMoreComponent extends ECLBaseDirective {
     this.ɵcmp = i0219.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclTabMoreComponent, selector: "ecl-tab-more", inputs: { isHidden: "isHidden" }, host: { properties: { "attr.aria-hidden": "this.isHidden", "attr.role": "this.role", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0219, template: "<ng-content></ng-content>\n", styles: [":host{display:list-item}\n"] });
   }
 };
-__decorate37([
-  coerceBoolean32
+__decorate32([
+  coerceBoolean28
 ], EclTabMoreComponent.prototype, "isHidden", void 0);
 i0219.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0219, type: EclTabMoreComponent, decorators: [{
   type: Component99,
   args: [{ selector: "ecl-tab-more", template: "<ng-content></ng-content>\n", styles: [":host{display:list-item}\n"] }]
 }], propDecorators: { isHidden: [{
-  type: Input98
+  type: Input97
 }, {
   type: HostBinding152,
   args: ["attr.aria-hidden"]
@@ -18691,12 +18657,12 @@ i0219.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-tabs/ecl-tabs.component.mjs
-import { Component as Component100, ContentChildren as ContentChildren26, EventEmitter as EventEmitter46, forwardRef as forwardRef54, HostListener as HostListener23, Input as Input99, Output as Output46, ViewChild as ViewChild17, ViewEncapsulation as ViewEncapsulation15 } from "@angular/core";
+import { Component as Component100, ContentChildren as ContentChildren26, EventEmitter as EventEmitter46, forwardRef as forwardRef54, HostListener as HostListener23, Input as Input98, Output as Output46, ViewChild as ViewChild17, ViewEncapsulation as ViewEncapsulation15 } from "@angular/core";
 import { of as of4, Subject as Subject28 } from "rxjs";
 import { mergeWith as mergeWith3, takeUntil as takeUntil25 } from "rxjs/operators";
 import * as i0220 from "@angular/core";
-import * as i144 from "@angular/cdk/layout";
-import * as i38 from "@angular/common";
+import * as i143 from "@angular/cdk/layout";
+import * as i36 from "@angular/common";
 import * as i10 from "@ngx-translate/core";
 var ShiftDirection;
 (function(ShiftDirection2) {
@@ -19100,7 +19066,7 @@ var EclTabsComponent = class _EclTabsComponent extends ECLBaseDirective {
     this.index = 0;
   }
   static {
-    this.ɵfac = i0220.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0220, type: _EclTabsComponent, deps: [{ token: i0220.IterableDiffers }, { token: i144.BreakpointObserver }, { token: i0220.ChangeDetectorRef }, { token: i0220.ElementRef }, { token: EclRtlService }], target: i0220.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0220.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0220, type: _EclTabsComponent, deps: [{ token: i0220.IterableDiffers }, { token: i143.BreakpointObserver }, { token: i0220.ChangeDetectorRef }, { token: i0220.ElementRef }, { token: EclRtlService }], target: i0220.ɵɵFactoryTarget.Component });
   }
   static {
     this.ɵcmp = i0220.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclTabsComponent, selector: "nav[eclTabs], ecl-tabs", inputs: { bodyClass: "bodyClass", direction: "direction" }, outputs: { tabSelect: "tabSelect" }, host: { listeners: { "document:click": "onClick($event.target)", "window:resize": "onWindowResize($event)" } }, queries: [{ propertyName: "tabs", predicate: i0220.forwardRef(() => EclTabComponent) }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "moreButton", first: true, predicate: ["moreButton"], descendants: true }, { propertyName: "btnPrev", first: true, predicate: ["btnPrev"], descendants: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }], usesInheritance: true, ngImport: i0220, template: `<nav class="ecl-tabs">
@@ -19187,7 +19153,7 @@ var EclTabsComponent = class _EclTabsComponent extends ECLBaseDirective {
         <ng-container *ngTemplateOutlet="tab.contentTemplate"></ng-container>
     </div>
 </ng-container>
-`, dependencies: [{ kind: "directive", type: i38.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i38.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i38.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclTabComponent, selector: "ecl-tab, li[eclTab]", inputs: ["id", "isHidden", "isActive"], outputs: ["selectTab", "keydownTab"] }, { kind: "component", type: EclTabLabelComponent, selector: "ecl-tab-label" }, { kind: "component", type: EclTabMoreComponent, selector: "ecl-tab-more", inputs: ["isHidden"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], encapsulation: i0220.ViewEncapsulation.None });
+`, dependencies: [{ kind: "directive", type: i36.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i36.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i36.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclTabComponent, selector: "ecl-tab, li[eclTab]", inputs: ["id", "isHidden", "isActive"], outputs: ["selectTab", "keydownTab"] }, { kind: "component", type: EclTabLabelComponent, selector: "ecl-tab-label" }, { kind: "component", type: EclTabMoreComponent, selector: "ecl-tab-more", inputs: ["isHidden"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], encapsulation: i0220.ViewEncapsulation.None });
   }
 };
 i0220.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0220, type: EclTabsComponent, decorators: [{
@@ -19277,10 +19243,10 @@ i0220.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
     </div>
 </ng-container>
 ` }]
-}], ctorParameters: () => [{ type: i0220.IterableDiffers }, { type: i144.BreakpointObserver }, { type: i0220.ChangeDetectorRef }, { type: i0220.ElementRef }, { type: EclRtlService }], propDecorators: { bodyClass: [{
-  type: Input99
+}], ctorParameters: () => [{ type: i0220.IterableDiffers }, { type: i143.BreakpointObserver }, { type: i0220.ChangeDetectorRef }, { type: i0220.ElementRef }, { type: EclRtlService }], propDecorators: { bodyClass: [{
+  type: Input98
 }], direction: [{
-  type: Input99
+  type: Input98
 }], tabSelect: [{
   type: Output46
 }], tabs: [{
@@ -19356,9 +19322,9 @@ i0221.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] });
 
 // lib/components/ecl-tag/ecl-tag.component.mjs
-import { Component as Component101, Input as Input100, HostBinding as HostBinding153, Output as Output47, EventEmitter as EventEmitter47, booleanAttribute as booleanAttribute25 } from "@angular/core";
+import { Component as Component101, Input as Input99, HostBinding as HostBinding153, Output as Output47, EventEmitter as EventEmitter47, booleanAttribute as booleanAttribute28 } from "@angular/core";
 import * as i0222 from "@angular/core";
-import * as i217 from "@angular/common";
+import * as i216 from "@angular/common";
 var EclTagRemoveEvent = class extends EclBaseEvent {
 };
 var EclTagComponent = class _EclTagComponent extends ECLBaseDirective {
@@ -19393,17 +19359,17 @@ var EclTagComponent = class _EclTagComponent extends ECLBaseDirective {
     this.ɵfac = i0222.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0222, type: _EclTagComponent, deps: null, target: i0222.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0222.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclTagComponent, selector: "ecl-tag, [eclTag]", inputs: { variant: "variant", isWrapped: ["isWrapped", "isWrapped", booleanAttribute25] }, outputs: { remove: "remove" }, host: { properties: { "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0222, template: '<ng-content></ng-content>\n@if(isRemovable) {\n    <span class="ecl-tag__icon" (click)="onRemoveClick($event)">\n    <ecl-icon icon="close-outline" class="ecl-tag__icon-close" role="img">\n        <title>{{title | titlecase}}</title>\n    </ecl-icon>\n</span>\n}\n', dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i217.TitleCasePipe, name: "titlecase" }] });
+    this.ɵcmp = i0222.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: _EclTagComponent, selector: "ecl-tag, [eclTag]", inputs: { variant: "variant", isWrapped: ["isWrapped", "isWrapped", booleanAttribute28] }, outputs: { remove: "remove" }, host: { properties: { "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0222, template: '<ng-content></ng-content>\n@if(isRemovable) {\n    <span class="ecl-tag__icon" (click)="onRemoveClick($event)">\n    <ecl-icon icon="close-outline" class="ecl-tag__icon-close" role="img">\n        <title>{{title | titlecase}}</title>\n    </ecl-icon>\n</span>\n}\n', dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i216.TitleCasePipe, name: "titlecase" }] });
   }
 };
 i0222.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0222, type: EclTagComponent, decorators: [{
   type: Component101,
   args: [{ selector: "ecl-tag, [eclTag]", template: '<ng-content></ng-content>\n@if(isRemovable) {\n    <span class="ecl-tag__icon" (click)="onRemoveClick($event)">\n    <ecl-icon icon="close-outline" class="ecl-tag__icon-close" role="img">\n        <title>{{title | titlecase}}</title>\n    </ecl-icon>\n</span>\n}\n' }]
 }], propDecorators: { variant: [{
-  type: Input100
+  type: Input99
 }], isWrapped: [{
-  type: Input100,
-  args: [{ transform: booleanAttribute25 }]
+  type: Input99,
+  args: [{ transform: booleanAttribute28 }]
 }], remove: [{
   type: Output47
 }], isHidden: [{
@@ -19463,11 +19429,11 @@ i0224.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] });
 
 // lib/components/ecl-text-area/ecl-text-area.directive.mjs
-import { __decorate as __decorate38 } from "tslib";
-import { Directive as Directive64, HostBinding as HostBinding155, Input as Input101, Optional as Optional9, Self as Self7 } from "@angular/core";
-import { coerceBoolean as coerceBoolean33 } from "@eui/base";
+import { __decorate as __decorate33 } from "tslib";
+import { Directive as Directive64, HostBinding as HostBinding155, Input as Input100, Optional as Optional9, Self as Self7 } from "@angular/core";
+import { coerceBoolean as coerceBoolean29 } from "@eui/base";
 import * as i0225 from "@angular/core";
-import * as i145 from "@angular/forms";
+import * as i144 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();
@@ -19486,28 +19452,28 @@ var EclTextAreaDirective = class _EclTextAreaDirective extends ECLBaseDirective
     this.isInvalid = false;
   }
   static {
-    this.ɵfac = i0225.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0225, type: _EclTextAreaDirective, deps: [{ token: i145.NgControl, optional: true, self: true }], target: i0225.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i0225.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0225, type: _EclTextAreaDirective, deps: [{ token: i144.NgControl, optional: true, self: true }], target: i0225.ɵɵFactoryTarget.Directive });
   }
   static {
     this.ɵdir = i0225.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _EclTextAreaDirective, selector: "textarea[eclTextArea]", inputs: { eclSize: "eclSize", isInvalid: "isInvalid" }, host: { properties: { "class": "this.cssClasses", "class.ecl-text-area--invalid": "this.invalidState" } }, usesInheritance: true, ngImport: i0225 });
   }
 };
-__decorate38([
-  coerceBoolean33
+__decorate33([
+  coerceBoolean29
 ], EclTextAreaDirective.prototype, "isInvalid", void 0);
 i0225.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0225, type: EclTextAreaDirective, decorators: [{
   type: Directive64,
   args: [{
     selector: "textarea[eclTextArea]"
   }]
-}], ctorParameters: () => [{ type: i145.NgControl, decorators: [{
+}], ctorParameters: () => [{ type: i144.NgControl, decorators: [{
   type: Optional9
 }, {
   type: Self7
 }] }], propDecorators: { eclSize: [{
-  type: Input101
+  type: Input100
 }], isInvalid: [{
-  type: Input101
+  type: Input100
 }], cssClasses: [{
   type: HostBinding155,
   args: ["class"]
@@ -19617,13 +19583,13 @@ i0229.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
 }] } });
 
 // lib/components/ecl-timeline/ecl-timeline-item.component.mjs
-import { __decorate as __decorate39 } from "tslib";
-import { Component as Component103, Input as Input102, HostBinding as HostBinding158, ViewEncapsulation as ViewEncapsulation17, Output as Output49, EventEmitter as EventEmitter49, ContentChild as ContentChild29, forwardRef as forwardRef56 } from "@angular/core";
-import { coerceBoolean as coerceBoolean34 } from "@eui/base";
+import { __decorate as __decorate34 } from "tslib";
+import { Component as Component103, Input as Input101, HostBinding as HostBinding158, ViewEncapsulation as ViewEncapsulation17, Output as Output49, EventEmitter as EventEmitter49, ContentChild as ContentChild29, forwardRef as forwardRef56 } from "@angular/core";
+import { coerceBoolean as coerceBoolean30 } from "@eui/base";
 import { Subject as Subject29 } from "rxjs";
 import { takeUntil as takeUntil26 } from "rxjs/operators";
 import * as i0230 from "@angular/core";
-import * as i146 from "@angular/common";
+import * as i145 from "@angular/common";
 import * as i56 from "@ngx-translate/core";
 var EclTimelineItemToggleEvent = class extends EclBaseEvent {
   constructor(isExpanded, toggleGroup) {
@@ -19716,11 +19682,11 @@ var EclTimelineItemComponent = class _EclTimelineItemComponent extends ECLBaseDi
 
 <ng-template #content>
     <ng-content></ng-content>
-</ng-template>`, styles: ["ecl-timeline-item{display:list-item}\n"], dependencies: [{ kind: "directive", type: i146.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i146.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i56.TranslatePipe, name: "translate" }], encapsulation: i0230.ViewEncapsulation.None });
+</ng-template>`, styles: ["ecl-timeline-item{display:list-item}\n"], dependencies: [{ kind: "directive", type: i145.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i145.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i56.TranslatePipe, name: "translate" }], encapsulation: i0230.ViewEncapsulation.None });
   }
 };
-__decorate39([
-  coerceBoolean34
+__decorate34([
+  coerceBoolean30
 ], EclTimelineItemComponent.prototype, "isTogglerExpanded", void 0);
 i0230.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0230, type: EclTimelineItemComponent, decorators: [{
   type: Component103,
@@ -19760,17 +19726,17 @@ i0230.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
     <ng-content></ng-content>
 </ng-template>`, styles: ["ecl-timeline-item{display:list-item}\n"] }]
 }], propDecorators: { label: [{
-  type: Input102
+  type: Input101
 }], eclTitle: [{
-  type: Input102
+  type: Input101
 }], toggleButtonLabel: [{
-  type: Input102
+  type: Input101
 }], expandLabel: [{
-  type: Input102
+  type: Input101
 }], collapseLabel: [{
-  type: Input102
+  type: Input101
 }], isTogglerExpanded: [{
-  type: Input102
+  type: Input101
 }], cssClasses: [{
   type: HostBinding158,
   args: ["class"]
@@ -19778,17 +19744,17 @@ i0230.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3
   type: ContentChild29,
   args: [forwardRef56(() => EclTimelineItemTogglerComponent)]
 }], isCollapsed: [{
-  type: Input102
+  type: Input101
 }, {
   type: HostBinding158,
   args: ["class.ecl-timeline__item--collapsed"]
 }], isToggler: [{
-  type: Input102
+  type: Input101
 }, {
   type: HostBinding158,
   args: ["class.ecl-timeline__item--toggle"]
 }], toggleGroup: [{
-  type: Input102
+  type: Input101
 }], toggle: [{
   type: Output49
 }] } });
@@ -20283,7 +20249,6 @@ export {
   EclFormLabelComponentModule,
   EclGalleryComponent,
   EclGalleryComponentModule,
-  EclGalleryDownloadEvent,
   EclGalleryFooterComponent,
   EclGalleryFullScreenEvent,
   EclGalleryHideEvent,