@eui/ecl 18.0.0-next.39 → 18.0.0-next.40

package/fesm2022/eui-ecl.mjs

@@ -11340,9 +11340,7 @@ i0147.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] });
 
 // lib/components/ecl-multiselect/ecl-multiselect-option/ecl-multiselect-option.component.mjs
-import { __decorate as __decorate6 } from "tslib";
-import { Component as Component67, EventEmitter as EventEmitter30, HostBinding as HostBinding101, Input as Input62, Output as Output30, ViewChild as ViewChild11 } from "@angular/core";
-import { coerceBoolean as coerceBoolean5 } from "@eui/base";
+import { Component as Component67, EventEmitter as EventEmitter30, HostBinding as HostBinding101, Input as Input62, Output as Output30, ViewChild as ViewChild11, booleanAttribute as booleanAttribute27 } from "@angular/core";
 import { Subject as Subject20 } from "rxjs";
 import { v4 as uuidgen3 } from "uuid";
 import * as i0148 from "@angular/core";
@@ -11373,8 +11371,9 @@ var EclMultiselectOptionComponent = class _EclMultiselectOptionComponent extends
   set isChecked(value) {
     this._checked = value;
   }
-  constructor() {
+  constructor(renderer) {
     super();
+    this.renderer = renderer;
     this.keyword = "";
     this.changes = new Subject20();
     this.disabled = false;
@@ -11408,7 +11407,7 @@ var EclMultiselectOptionComponent = class _EclMultiselectOptionComponent extends
     this.optionKeydown.emit(new EclMultiselectOptionKeydownEvent(this, evt));
   }
   onFocus() {
-    this.eclCheckboxInput.nativeElement.focus();
+    this.renderer.selectRootElement(this.eclCheckboxInput.nativeElement, true).focus();
   }
   show() {
     this.display = "flex";
@@ -11425,63 +11424,49 @@ var EclMultiselectOptionComponent = class _EclMultiselectOptionComponent extends
     return uuidgen3();
   }
   static {
-    this.ɵfac = i0148.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0148, type: _EclMultiselectOptionComponent, deps: [], target: i0148.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0148.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0148, type: _EclMultiselectOptionComponent, deps: [{ token: i0148.Renderer2 }], target: i0148.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0148.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.5", 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: i0148, template: '<input\n    eclCheckboxInput\n    type="checkbox"\n    [id]="id"\n    [value]="value"\n    (click)="onOptionClick()"\n    (keydown)="onOptionKeydown($event)"\n    [checked]="isChecked"\n    [disabled]="disabled"\n    #checkboxInput />\n<label [for]="id" eclCheckboxLabel><span [innerHTML]="label | boldText: keyword"></span></label>\n', dependencies: [{ kind: "component", type: EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "pipe", type: BoldTextPipe, name: "boldText" }] });
+    this.ɵcmp = i0148.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: { value: "value", label: "label", disabled: ["disabled", "disabled", booleanAttribute27], isChecked: "isChecked" }, outputs: { optionClick: "optionClick", optionKeydown: "optionKeydown" }, host: { properties: { "class.ecl-checkbox--disabled": "this.disabled", "attr.disabled": "this.disabled", "style.display": "this.display", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "eclCheckboxInput", first: true, predicate: ["checkboxInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: EclCheckboxDirective }], ngImport: i0148, template: '<input\n    eclCheckboxInput\n    type="checkbox"\n    [id]="id"\n    [value]="value"\n    (click)="onOptionClick()"\n    (keydown)="onOptionKeydown($event)"\n    [checked]="isChecked"\n    [disabled]="disabled"\n    #checkboxInput />\n<label [for]="id" eclCheckboxLabel><span [innerHTML]="label | boldText: keyword"></span></label>\n', dependencies: [{ kind: "component", type: EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "pipe", type: BoldTextPipe, name: "boldText" }] });
   }
 };
-__decorate6([
-  coerceBoolean5
-], EclMultiselectOptionComponent.prototype, "disabled", void 0);
 i0148.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0148, type: EclMultiselectOptionComponent, decorators: [{
   type: Component67,
   args: [{ selector: "div[eclMultiselectOption]", hostDirectives: [EclCheckboxDirective], template: '<input\n    eclCheckboxInput\n    type="checkbox"\n    [id]="id"\n    [value]="value"\n    (click)="onOptionClick()"\n    (keydown)="onOptionKeydown($event)"\n    [checked]="isChecked"\n    [disabled]="disabled"\n    #checkboxInput />\n<label [for]="id" eclCheckboxLabel><span [innerHTML]="label | boldText: keyword"></span></label>\n' }]
-}], ctorParameters: () => [], propDecorators: {
-  eclCheckboxInput: [{
-    type: ViewChild11,
-    args: ["checkboxInput"]
-  }],
-  value: [{
-    type: Input62
-  }],
-  label: [{
-    type: Input62
-  }],
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  disabled: [{
-    type: Input62
-  }, {
-    type: HostBinding101,
-    args: ["class.ecl-checkbox--disabled"]
-  }, {
-    type: HostBinding101,
-    args: ["attr.disabled"]
-  }],
-  optionClick: [{
-    type: Output30
-  }],
-  optionKeydown: [{
-    type: Output30
-  }],
-  display: [{
-    type: HostBinding101,
-    args: ["style.display"]
-  }],
-  cssClasses: [{
-    type: HostBinding101,
-    args: ["class"]
-  }],
-  isChecked: [{
-    type: Input62
-  }]
-} });
+}], ctorParameters: () => [{ type: i0148.Renderer2 }], propDecorators: { eclCheckboxInput: [{
+  type: ViewChild11,
+  args: ["checkboxInput"]
+}], value: [{
+  type: Input62
+}], label: [{
+  type: Input62
+}], disabled: [{
+  type: Input62,
+  args: [{ transform: booleanAttribute27 }]
+}, {
+  type: HostBinding101,
+  args: ["class.ecl-checkbox--disabled"]
+}, {
+  type: HostBinding101,
+  args: ["attr.disabled"]
+}], optionClick: [{
+  type: Output30
+}], optionKeydown: [{
+  type: Output30
+}], display: [{
+  type: HostBinding101,
+  args: ["style.display"]
+}], cssClasses: [{
+  type: HostBinding101,
+  args: ["class"]
+}], isChecked: [{
+  type: Input62
+}] } });
 
 // lib/components/ecl-multiselect/ecl-multiselect-input/ecl-multiselect-input.component.mjs
-import { __decorate as __decorate7 } from "tslib";
-import { Component as Component68, EventEmitter as EventEmitter31, HostBinding as HostBinding102, Input as Input63, Output as Output31, ViewChild as ViewChild12 } from "@angular/core";
-import { coerceBoolean as coerceBoolean6 } from "@eui/base";
+import { Component as Component68, EventEmitter as EventEmitter31, HostBinding as HostBinding102, Input as Input63, Output as Output31, ViewChild as ViewChild12, booleanAttribute as booleanAttribute28 } from "@angular/core";
 import * as i0149 from "@angular/core";
+import * as i53 from "@ngx-translate/core";
 var EclMultiselectMainInputClickEvent = class {
   constructor(event) {
     this.event = event;
@@ -11491,9 +11476,12 @@ var EclMultiselectInputComponent = class _EclMultiselectInputComponent extends E
   get cssClasses() {
     return [super.getCssClasses("ecl-select__container"), `ecl-select__container--${this.eclSize}`].join(" ").trim();
   }
-  constructor() {
+  constructor(eclThemeService, renderer) {
     super();
+    this.eclThemeService = eclThemeService;
+    this.renderer = renderer;
     this.eclSize = "m";
+    this.toggleLabel = void 0;
     this.isDisabled = false;
     this.isInvalid = false;
     this.selectedItems = [];
@@ -11503,6 +11491,8 @@ var EclMultiselectInputComponent = class _EclMultiselectInputComponent extends E
     this.ariaLabeledby = void 0;
     this.mainInputClick = new EventEmitter31();
     this.mainInputKeydown = new EventEmitter31();
+    this.ICON_SIZE_FOR_EC_THEME_ON = "xs";
+    this.ICON_SIZE_FOR_EU_THEME_ON = "s";
   }
   get buttonText() {
     return this.selectedItems.length === 0 ? this.inputPlaceholder : this.selectedItems.join(",");
@@ -11513,6 +11503,16 @@ var EclMultiselectInputComponent = class _EclMultiselectInputComponent extends E
   get isShowCounter() {
     return this.selectedItems && this.selectedItems.length > 0;
   }
+  get isActive() {
+    return this.isDropdownExpanded;
+  }
+  get sizeIcon() {
+    if (this.eclThemeService.isECTheme()) {
+      return this.ICON_SIZE_FOR_EC_THEME_ON;
+    } else {
+      return this.ICON_SIZE_FOR_EU_THEME_ON;
+    }
+  }
   onClick(evt) {
     this.mainInputClick.emit(new EclMultiselectMainInputClickEvent(evt));
   }
@@ -11528,35 +11528,83 @@ var EclMultiselectInputComponent = class _EclMultiselectInputComponent extends E
     }
   }
   onFocus() {
-    this.inputMultiselect.nativeElement.focus();
+    this.renderer.selectRootElement(this.inputMultiselect.nativeElement, true).focus();
   }
   static {
-    this.ɵfac = i0149.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0149, type: _EclMultiselectInputComponent, deps: [], target: i0149.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0149.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0149, type: _EclMultiselectInputComponent, deps: [{ token: EclThemeService }, { token: i0149.Renderer2 }], target: i0149.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0149.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.5", 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: i0149, 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"] }] });
+    this.ɵcmp = i0149.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: { eclSize: "eclSize", toggleId: "toggleId", toggleLabel: "toggleLabel", isDisabled: ["isDisabled", "isDisabled", booleanAttribute28], isInvalid: ["isInvalid", "isInvalid", booleanAttribute28], inputPlaceholder: "inputPlaceholder", selectedItems: "selectedItems", isDropdownExpanded: "isDropdownExpanded", ariaControls: "ariaControls", ariaDescribedby: "ariaDescribedby", ariaLabeledby: "ariaLabeledby" }, outputs: { mainInputClick: "mainInputClick", mainInputKeydown: "mainInputKeydown" }, host: { properties: { "class.ecl-select__container--disabled": "this.isDisabled", "class.ecl-select__container--invalid": "this.isInvalid", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "inputMultiselect", first: true, predicate: ["inputMultiselect"], descendants: true }], usesInheritance: true, ngImport: i0149, template: `<div [class.ecl-select-multiple-selections-counter--visible]="isShowCounter" class="ecl-select-multiple-selections-counter">
+    <span>{{ selectedItemsCount }}</span>
+</div>
+<button
+    class="ecl-select ecl-select__multiple-toggle"
+    [class.ecl-select--active]="isActive"
+    #inputMultiselect
+    type="button"
+    [id]="toggleId"
+    [attr.aria-expanded]="isDropdownExpanded"
+    [attr.aria-controls]="ariaControls"
+    [attr.disabled]="isDisabled ? true : undefined"
+    [attr.aria-labelledby]="ariaLabeledby"
+    [attr.aria-describedby]="ariaDescribedby"
+    (keydown)="onKeydown($event)"
+    (click)="onClick($event)"> {{ buttonText }}
+</button>
+<div class="ecl-select__icon">
+    <button eclButton isIconOnly variant="ghost" tabindex="-1">
+    <span eclButtonLabel>
+        {{ toggleLabel || 'ecl.multiselect.TOGGLE.DROPDOWN' | translate }}
+    </span>
+        <ecl-icon icon="corner-arrow" [size]="sizeIcon" transform="rotate-180"></ecl-icon>
+    </button>
+</div>
+`, dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "pipe", type: i53.TranslatePipe, name: "translate" }] });
   }
 };
-__decorate7([
-  coerceBoolean6
-], EclMultiselectInputComponent.prototype, "isDisabled", void 0);
-__decorate7([
-  coerceBoolean6
-], EclMultiselectInputComponent.prototype, "isInvalid", void 0);
 i0149.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0149, 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: [{
+  args: [{ selector: "div[eclMultiselectInput]", template: `<div [class.ecl-select-multiple-selections-counter--visible]="isShowCounter" class="ecl-select-multiple-selections-counter">
+    <span>{{ selectedItemsCount }}</span>
+</div>
+<button
+    class="ecl-select ecl-select__multiple-toggle"
+    [class.ecl-select--active]="isActive"
+    #inputMultiselect
+    type="button"
+    [id]="toggleId"
+    [attr.aria-expanded]="isDropdownExpanded"
+    [attr.aria-controls]="ariaControls"
+    [attr.disabled]="isDisabled ? true : undefined"
+    [attr.aria-labelledby]="ariaLabeledby"
+    [attr.aria-describedby]="ariaDescribedby"
+    (keydown)="onKeydown($event)"
+    (click)="onClick($event)"> {{ buttonText }}
+</button>
+<div class="ecl-select__icon">
+    <button eclButton isIconOnly variant="ghost" tabindex="-1">
+    <span eclButtonLabel>
+        {{ toggleLabel || 'ecl.multiselect.TOGGLE.DROPDOWN' | translate }}
+    </span>
+        <ecl-icon icon="corner-arrow" [size]="sizeIcon" transform="rotate-180"></ecl-icon>
+    </button>
+</div>
+` }]
+}], ctorParameters: () => [{ type: EclThemeService }, { type: i0149.Renderer2 }], propDecorators: { eclSize: [{
   type: Input63
 }], toggleId: [{
   type: Input63
-}], isDisabled: [{
+}], toggleLabel: [{
   type: Input63
+}], isDisabled: [{
+  type: Input63,
+  args: [{ transform: booleanAttribute28 }]
 }, {
   type: HostBinding102,
   args: ["class.ecl-select__container--disabled"]
 }], isInvalid: [{
-  type: Input63
+  type: Input63,
+  args: [{ transform: booleanAttribute28 }]
 }, {
   type: HostBinding102,
   args: ["class.ecl-select__container--invalid"]
@@ -11620,10 +11668,8 @@ i0150.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] } });
 
 // lib/components/ecl-multiselect/ecl-multiselect-dropdown/ecl-multiselect-dropdown.component.mjs
-import { __decorate as __decorate8 } from "tslib";
-import { Component as Component70, ElementRef as ElementRef24, EventEmitter as EventEmitter32, forwardRef as forwardRef43, HostBinding as HostBinding104, HostListener as HostListener17, Input as Input65, Output as Output32, ViewChild as ViewChild13, ViewChildren as ViewChildren2 } from "@angular/core";
+import { booleanAttribute as booleanAttribute29, Component as Component70, ElementRef as ElementRef24, EventEmitter as EventEmitter32, forwardRef as forwardRef43, HostBinding as HostBinding104, HostListener as HostListener17, Input as Input65, Output as Output32, ViewChild as ViewChild13, ViewChildren as ViewChildren2 } from "@angular/core";
 import { NG_VALUE_ACCESSOR as NG_VALUE_ACCESSOR4 } from "@angular/forms";
-import { coerceBoolean as coerceBoolean7 } from "@eui/base";
 import { Subject as Subject21 } from "rxjs";
 import { v4 as uuidgen4 } from "uuid";
 import * as i0151 from "@angular/core";
@@ -11639,7 +11685,6 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
   get cssClasses() {
     return [super.getCssClasses("ecl-select__multiple")].join(" ").trim();
   }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   get disabled() {
     return this._disabled || void 0;
   }
@@ -11657,6 +11702,7 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
     this.eclSize = "m";
     this.ariaDescribedby = void 0;
     this.ariaLabeledby = void 0;
+    this.toggleLabel = void 0;
     this.id = "";
     this.isShowNoResultsFound = false;
     this.isShowMultiselectDropdown = false;
@@ -11768,7 +11814,7 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
   }
   onArrowLeftClose(evt) {
     evt.preventDefault();
-    this.clearAllBtn.nativeElement.focus();
+    this.renderer.selectRootElement(this.clearAllBtn.nativeElement, true).focus();
   }
   onTabClose(evt) {
     evt.preventDefault();
@@ -11776,7 +11822,7 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
   }
   onArrowRightClear(evt) {
     evt.preventDefault();
-    this.closeBtn.nativeElement.focus();
+    this.renderer.selectRootElement(this.closeBtn.nativeElement, true).focus();
   }
   onEnterSearch(evt) {
     evt.preventDefault();
@@ -11785,7 +11831,7 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
     evt.preventDefault();
     const currentOptions = this.getActiveOptions();
     if (currentOptions.length > 1) {
-      this.selectAllCheckbox.nativeElement.focus();
+      this.renderer.selectRootElement(this.selectAllCheckbox.nativeElement, true).focus();
     } else {
       currentOptions[0].onFocus();
     }
@@ -11798,7 +11844,7 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
   onKeydownMainInput(evt) {
     evt.preventDefault();
     this.showMultiselectDropdown();
-    setTimeout(() => this.searchInput.nativeElement.focus());
+    setTimeout(() => this.renderer.selectRootElement(this.searchInput.nativeElement, true).focus());
   }
   onClickMainInput(evt) {
     evt.event.preventDefault();
@@ -11813,7 +11859,7 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
   }
   onArrowUpSelectAll(evt) {
     evt.preventDefault();
-    this.searchInput.nativeElement.focus();
+    this.renderer.selectRootElement(this.searchInput.nativeElement, true).focus();
   }
   onSearch(input) {
     const keyword = input.value;
@@ -11882,7 +11928,7 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
   }
   onOptionSelected(evt) {
     if (this.selectAllCheckbox.nativeElement.checked) {
-      this.selectAllCheckbox.nativeElement.checked = false;
+      this.renderer.setProperty(this.selectAllCheckbox.nativeElement, "checked", false);
     }
     const currOption = evt.multiselectOption;
     if (currOption.isChecked) {
@@ -11904,7 +11950,7 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
     });
   }
   unselectAllActiveOptions() {
-    this.selectAllCheckbox.nativeElement.checked = false;
+    this.renderer.setProperty(this.selectAllCheckbox.nativeElement, "checked", false);
     this._selectedItems = [];
     this.getAllActiveOptions().forEach((item) => {
       item.isChecked = false;
@@ -11936,7 +11982,7 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
       item.isChecked = false;
     });
     if (this.selectAllCheckbox) {
-      this.selectAllCheckbox.nativeElement.checked = false;
+      this.renderer.setProperty(this.selectAllCheckbox.nativeElement, "checked", false);
     }
     this._selectedItems = [];
   }
@@ -11964,7 +12010,7 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
       nextSiblingCheckbox.onFocus();
     } else {
       if (this.clearAllBtn) {
-        this.clearAllBtn.nativeElement.focus();
+        this.renderer.selectRootElement(this.clearAllBtn.nativeElement, true).focus();
       } else {
         this.eclMultiselectInput.onFocus();
       }
@@ -11977,9 +12023,9 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
       const prevSiblingCheckbox = this.getActiveOptions()[index - 1];
       prevSiblingCheckbox.onFocus();
     } else if (this.selectAllCheckbox.nativeElement.disabled) {
-      this.searchInput.nativeElement.focus();
+      this.renderer.selectRootElement(this.searchInput.nativeElement, true).focus();
     } else {
-      this.selectAllCheckbox.nativeElement.focus();
+      this.renderer.selectRootElement(this.selectAllCheckbox.nativeElement, true).focus();
     }
   }
   getActiveOptions() {
@@ -12008,7 +12054,7 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
     this.ɵfac = i0151.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0151, type: _EclMultiselectDropdownComponent, deps: [{ token: i0151.ElementRef }, { token: i0151.IterableDiffers }, { token: i0151.Renderer2 }], target: i0151.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0151.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _EclMultiselectDropdownComponent, selector: "div[eclMultiselectDropdown]", inputs: { isInvalid: "isInvalid", mainInputPlaceholder: "mainInputPlaceholder", searchFieldPlaceholder: "searchFieldPlaceholder", eclSize: "eclSize", disabled: "disabled" }, outputs: { eclChange: "eclChange" }, host: { listeners: { "document:keyup.escape": "onEscapeKey($event)", "document:click": "onKeyUp($event)" }, properties: { "class": "this.cssClasses", "attr.disabled": "this.disabled" } }, providers: [
+    this.ɵcmp = i0151.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.5", type: _EclMultiselectDropdownComponent, selector: "div[eclMultiselectDropdown]", inputs: { isInvalid: ["isInvalid", "isInvalid", booleanAttribute29], mainInputPlaceholder: "mainInputPlaceholder", searchFieldPlaceholder: "searchFieldPlaceholder", eclSize: "eclSize", disabled: ["disabled", "disabled", booleanAttribute29] }, outputs: { eclChange: "eclChange" }, host: { listeners: { "document:keyup.escape": "onEscapeKey($event)", "document:click": "onKeyUp($event)" }, properties: { "class": "this.cssClasses", "attr.disabled": "this.disabled" } }, providers: [
       {
         provide: NG_VALUE_ACCESSOR4,
         useExisting: forwardRef43(() => _EclMultiselectDropdownComponent),
@@ -12016,7 +12062,7 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
       }
     ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "eclMultiselectInput", first: true, predicate: ["eclMultiselectInput"], descendants: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true }, { propertyName: "selectAll", first: true, predicate: ["selectAll"], descendants: true }, { propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, read: ElementRef24 }, { propertyName: "clearAllBtn", first: true, predicate: ["clearAllBtn"], descendants: true, read: ElementRef24 }, { propertyName: "multiOptionComponents", predicate: EclMultiselectOptionComponent, descendants: true }], usesInheritance: true, ngImport: i0151, template: `<div eclMultiselectInput #eclMultiselectInput [inputPlaceholder]="mainInputPlaceholder" [selectedItems]="selectedItems"
     (mainInputClick)="onClickMainInput($event)" (mainInputKeydown)="onKeydownMainInput($event)" [isDisabled]="disabled"
-    [ariaLabeledby]="ariaLabeledby" [ariaDescribedby]="ariaDescribedby" [ariaControls]="dropdownId" [isInvalid]="isInvalid"
+    [ariaLabeledby]="ariaLabeledby" [ariaDescribedby]="ariaDescribedby" [toggleLabel]="toggleLabel" [ariaControls]="dropdownId" [isInvalid]="isInvalid"
     [isDropdownExpanded]="isShowMultiselectDropdown" [eclSize]="eclSize" [toggleId]="toggleId"></div>
 <div
     [style.display]="isShowMultiselectDropdown ? 'block' : 'none'"
@@ -12044,65 +12090,68 @@ var EclMultiselectDropdownComponent = class _EclMultiselectDropdownComponent ext
     </div>
     <div class="ecl-select__multiple-options">
         <ng-container *ngFor="let item of multiOptionDirectives">
-            <fieldset eclMultiselectOptgroup *ngIf="item.isOptGroup()" [label]="item.label">
+            @if (item.isOptGroup()) {
+                <fieldset eclMultiselectOptgroup [label]="item.label">
+                    <div
+                        eclMultiselectOption
+                        *ngFor="let elem of item.eclOptionItems"
+                        [value]="elem.value"
+                        [label]="elem.label"
+                        [disabled]="elem.disabled"
+                        [isChecked]="elem.selected"
+                        [class]="elem.class"
+                        (optionClick)="onOptionSelected($event)"
+                        (optionKeydown)="onKeydownOption($event)"></div>
+                </fieldset>
+            } @else if (!item.isOptGroup()) {
                 <div
                     eclMultiselectOption
-                    *ngFor="let elem of item.eclOptionItems"
-                    [value]="elem.value"
-                    [label]="elem.label"
-                    [disabled]="elem.disabled"
-                    [isChecked]="elem.selected"
-                    [class]="elem.class"
+                    [value]="item.value"
+                    [label]="item.label"
+                    [disabled]="item.disabled"
+                    [isChecked]="item.selected"
+                    [class]="item.class"
                     (optionClick)="onOptionSelected($event)"
                     (optionKeydown)="onKeydownOption($event)"></div>
-            </fieldset>
-            <div
-                eclMultiselectOption
-                *ngIf="!item.isOptGroup()"
-                [value]="item.value"
-                [label]="item.label"
-                [disabled]="item.disabled"
-                [isChecked]="item.selected"
-                [class]="item.class"
-                (optionClick)="onOptionSelected($event)"
-                (optionKeydown)="onKeydownOption($event)"></div>
+            }
+
         </ng-container>
-        <div *ngIf="isShowNoResultsFound" class="ecl-select__multiple-no-results">
-            <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>
-        </div>
-    </div>
-    <div *ngIf="isShowToolbar" class="ecl-select-multiple-toolbar">
-        <button
-            eclButton
-            variant="ghost"
-            #clearAllBtn
-            (keydown.arrowup)="onArrowUpCloseClear($event)"
-            (keydown.arrowright)="onArrowRightClear($event)"
-            (keydown.enter)="onEnterClear($event)"
-            (click)="onClickClearAll($event)">
-            {{ 'ecl.multiselect.CLEAR-ALL' | translate }}
-        </button>
-        <button
-            eclButton
-            variant="primary"
-            #closeBtn
-            (keydown.arrowup)="onArrowUpCloseClear($event)"
-            (keydown.arrowleft)="onArrowLeftClose($event)"
-            (keydown.tab)="onTabClose($event)"
-            (click)="onClickClose($event)">
-            {{ 'ecl.common.CLOSE' | translate }}
-        </button>
+
+        @if (isShowNoResultsFound) {
+            <div class="ecl-select__multiple-no-results">
+                <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>
+            </div>
+        }
+
     </div>
+    @if (isShowToolbar) {
+        <div class="ecl-select-multiple-toolbar">
+            <button
+                eclButton
+                variant="ghost"
+                #clearAllBtn
+                (keydown.arrowup)="onArrowUpCloseClear($event)"
+                (keydown.arrowright)="onArrowRightClear($event)"
+                (keydown.enter)="onEnterClear($event)"
+                (click)="onClickClearAll($event)">
+                {{ 'ecl.multiselect.CLEAR-ALL' | translate }}
+            </button>
+            <button
+                eclButton
+                variant="primary"
+                #closeBtn
+                (keydown.arrowup)="onArrowUpCloseClear($event)"
+                (keydown.arrowleft)="onArrowLeftClose($event)"
+                (keydown.tab)="onTabClose($event)"
+                (click)="onClickClose($event)">
+                {{ 'ecl.common.CLOSE' | translate }}
+            </button>
+        </div>
+    }
 </div>
-`, dependencies: [{ kind: "directive", type: i125.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i125.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclCheckboxDirective, selector: "[eclCheckbox]", inputs: ["isDisabled", "isInvalid", "isSingle"] }, { kind: "component", type: EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: ["value", "label", "disabled", "isChecked"], outputs: ["optionClick", "optionKeydown"] }, { kind: "component", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: ["eclSize", "toggleId", "isDisabled", "isInvalid", "inputPlaceholder", "selectedItems", "isDropdownExpanded", "ariaControls", "ariaDescribedby", "ariaLabeledby"], outputs: ["mainInputClick", "mainInputKeydown"] }, { kind: "component", type: EclMultiselectOptgroupComponent, selector: "fieldset[eclMultiselectOptgroup]", inputs: ["label"] }, { kind: "pipe", type: i92.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "directive", type: i125.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: EclCheckboxDirective, selector: "[eclCheckbox]", inputs: ["isDisabled", "isInvalid", "isSingle"] }, { kind: "component", type: EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: ["value", "label", "disabled", "isChecked"], outputs: ["optionClick", "optionKeydown"] }, { kind: "component", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: ["eclSize", "toggleId", "toggleLabel", "isDisabled", "isInvalid", "inputPlaceholder", "selectedItems", "isDropdownExpanded", "ariaControls", "ariaDescribedby", "ariaLabeledby"], outputs: ["mainInputClick", "mainInputKeydown"] }, { kind: "component", type: EclMultiselectOptgroupComponent, selector: "fieldset[eclMultiselectOptgroup]", inputs: ["label"] }, { kind: "pipe", type: i92.TranslatePipe, name: "translate" }] });
   }
 };
-__decorate8([
-  coerceBoolean7
-], EclMultiselectDropdownComponent.prototype, "isInvalid", null);
-__decorate8([
-  coerceBoolean7
-], EclMultiselectDropdownComponent.prototype, "disabled", null);
 i0151.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0151, type: EclMultiselectDropdownComponent, decorators: [{
   type: Component70,
   args: [{ selector: "div[eclMultiselectDropdown]", providers: [
@@ -12113,7 +12162,7 @@ i0151.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
     }
   ], template: `<div eclMultiselectInput #eclMultiselectInput [inputPlaceholder]="mainInputPlaceholder" [selectedItems]="selectedItems"
     (mainInputClick)="onClickMainInput($event)" (mainInputKeydown)="onKeydownMainInput($event)" [isDisabled]="disabled"
-    [ariaLabeledby]="ariaLabeledby" [ariaDescribedby]="ariaDescribedby" [ariaControls]="dropdownId" [isInvalid]="isInvalid"
+    [ariaLabeledby]="ariaLabeledby" [ariaDescribedby]="ariaDescribedby" [toggleLabel]="toggleLabel" [ariaControls]="dropdownId" [isInvalid]="isInvalid"
     [isDropdownExpanded]="isShowMultiselectDropdown" [eclSize]="eclSize" [toggleId]="toggleId"></div>
 <div
     [style.display]="isShowMultiselectDropdown ? 'block' : 'none'"
@@ -12141,55 +12190,64 @@ i0151.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
     </div>
     <div class="ecl-select__multiple-options">
         <ng-container *ngFor="let item of multiOptionDirectives">
-            <fieldset eclMultiselectOptgroup *ngIf="item.isOptGroup()" [label]="item.label">
+            @if (item.isOptGroup()) {
+                <fieldset eclMultiselectOptgroup [label]="item.label">
+                    <div
+                        eclMultiselectOption
+                        *ngFor="let elem of item.eclOptionItems"
+                        [value]="elem.value"
+                        [label]="elem.label"
+                        [disabled]="elem.disabled"
+                        [isChecked]="elem.selected"
+                        [class]="elem.class"
+                        (optionClick)="onOptionSelected($event)"
+                        (optionKeydown)="onKeydownOption($event)"></div>
+                </fieldset>
+            } @else if (!item.isOptGroup()) {
                 <div
                     eclMultiselectOption
-                    *ngFor="let elem of item.eclOptionItems"
-                    [value]="elem.value"
-                    [label]="elem.label"
-                    [disabled]="elem.disabled"
-                    [isChecked]="elem.selected"
-                    [class]="elem.class"
+                    [value]="item.value"
+                    [label]="item.label"
+                    [disabled]="item.disabled"
+                    [isChecked]="item.selected"
+                    [class]="item.class"
                     (optionClick)="onOptionSelected($event)"
                     (optionKeydown)="onKeydownOption($event)"></div>
-            </fieldset>
-            <div
-                eclMultiselectOption
-                *ngIf="!item.isOptGroup()"
-                [value]="item.value"
-                [label]="item.label"
-                [disabled]="item.disabled"
-                [isChecked]="item.selected"
-                [class]="item.class"
-                (optionClick)="onOptionSelected($event)"
-                (optionKeydown)="onKeydownOption($event)"></div>
+            }
+
         </ng-container>
-        <div *ngIf="isShowNoResultsFound" class="ecl-select__multiple-no-results">
-            <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>
-        </div>
-    </div>
-    <div *ngIf="isShowToolbar" class="ecl-select-multiple-toolbar">
-        <button
-            eclButton
-            variant="ghost"
-            #clearAllBtn
-            (keydown.arrowup)="onArrowUpCloseClear($event)"
-            (keydown.arrowright)="onArrowRightClear($event)"
-            (keydown.enter)="onEnterClear($event)"
-            (click)="onClickClearAll($event)">
-            {{ 'ecl.multiselect.CLEAR-ALL' | translate }}
-        </button>
-        <button
-            eclButton
-            variant="primary"
-            #closeBtn
-            (keydown.arrowup)="onArrowUpCloseClear($event)"
-            (keydown.arrowleft)="onArrowLeftClose($event)"
-            (keydown.tab)="onTabClose($event)"
-            (click)="onClickClose($event)">
-            {{ 'ecl.common.CLOSE' | translate }}
-        </button>
+
+        @if (isShowNoResultsFound) {
+            <div class="ecl-select__multiple-no-results">
+                <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>
+            </div>
+        }
+
     </div>
+    @if (isShowToolbar) {
+        <div class="ecl-select-multiple-toolbar">
+            <button
+                eclButton
+                variant="ghost"
+                #clearAllBtn
+                (keydown.arrowup)="onArrowUpCloseClear($event)"
+                (keydown.arrowright)="onArrowRightClear($event)"
+                (keydown.enter)="onEnterClear($event)"
+                (click)="onClickClearAll($event)">
+                {{ 'ecl.multiselect.CLEAR-ALL' | translate }}
+            </button>
+            <button
+                eclButton
+                variant="primary"
+                #closeBtn
+                (keydown.arrowup)="onArrowUpCloseClear($event)"
+                (keydown.arrowleft)="onArrowLeftClose($event)"
+                (keydown.tab)="onTabClose($event)"
+                (click)="onClickClose($event)">
+                {{ 'ecl.common.CLOSE' | translate }}
+            </button>
+        </div>
+    }
 </div>
 ` }]
 }], ctorParameters: () => [{ type: i0151.ElementRef }, { type: i0151.IterableDiffers }, { type: i0151.Renderer2 }], propDecorators: { searchInput: [{
@@ -12216,7 +12274,8 @@ i0151.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }], eclChange: [{
   type: Output32
 }], isInvalid: [{
-  type: Input65
+  type: Input65,
+  args: [{ transform: booleanAttribute29 }]
 }], cssClasses: [{
   type: HostBinding104,
   args: ["class"]
@@ -12227,7 +12286,8 @@ i0151.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }], eclSize: [{
   type: Input65
 }], disabled: [{
-  type: Input65
+  type: Input65,
+  args: [{ transform: booleanAttribute29 }]
 }, {
   type: HostBinding104,
   args: ["attr.disabled"]
@@ -12305,11 +12365,9 @@ i0152.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] } });
 
 // lib/components/ecl-multiselect/ecl-multiselect.component.mjs
-import { __decorate as __decorate9 } 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 HostBinding106, Input as Input67, Output as Output33, ViewEncapsulation as ViewEncapsulation9 } from "@angular/core";
+import { booleanAttribute as booleanAttribute30, Component as Component71, ContentChildren as ContentChildren23, EventEmitter as EventEmitter33, forwardRef as forwardRef44, HostBinding as HostBinding106, Input as Input67, Output as Output33, ViewEncapsulation as ViewEncapsulation9 } from "@angular/core";
 import { NG_VALUE_ACCESSOR as NG_VALUE_ACCESSOR5, NgControl as NgControl4 } from "@angular/forms";
-import { coerceBoolean as coerceBoolean8 } from "@eui/base";
 import { Subject as Subject23, takeUntil as takeUntil20 } from "rxjs";
 import * as i0153 from "@angular/core";
 var EclMultiselectComponent = class _EclMultiselectComponent extends ECLBaseDirective {
@@ -12343,17 +12401,21 @@ var EclMultiselectComponent = class _EclMultiselectComponent extends ECLBaseDire
   get eclPlaceholder() {
     return this._eclPlaceholder;
   }
-  constructor(injector, el, viewContainerRef, differs) {
+  constructor(injector, el, viewContainerRef, differs, renderer) {
     super();
     this.injector = injector;
     this.el = el;
     this.viewContainerRef = viewContainerRef;
     this.differs = differs;
+    this.renderer = renderer;
     this.ariaDescribedby = void 0;
     this.ariaLabeledby = void 0;
     this.id = void 0;
+    this.toggleLabel = void 0;
     this.eclChange = new EventEmitter33();
     this.eclSize = "m";
+    this.SELECT_CONTAINER_CLASS = "ecl-select__container";
+    this.SELECT_CONTAINER_HIDDEN_CLASS = "ecl-select__container--hidden";
     this._disabled = false;
     this._isInvalid = false;
     this._eclPlaceholder = "Select item";
@@ -12388,12 +12450,12 @@ var EclMultiselectComponent = class _EclMultiselectComponent extends ECLBaseDire
   hideOriginalSelectComponent() {
     this.hostParentEl.replaceChild(this.hostWrapperEl, this.hostEl);
     this.hostWrapperEl.appendChild(this.hostEl);
-    this.hostWrapperEl.classList.add("ecl-select__container--hidden");
+    this.renderer.addClass(this.hostWrapperEl, this.SELECT_CONTAINER_HIDDEN_CLASS);
   }
   createHostWrapperContainer() {
     const wrapperContainer = document.createElement("div");
-    wrapperContainer.classList.add("ecl-select__container");
-    wrapperContainer.classList.add(`ecl-select__container--${this.eclSize}`);
+    this.renderer.addClass(wrapperContainer, this.SELECT_CONTAINER_CLASS);
+    this.renderer.addClass(wrapperContainer, `${this.SELECT_CONTAINER_CLASS}--${this.eclSize}`);
     return wrapperContainer;
   }
   getHostElement() {
@@ -12416,6 +12478,9 @@ var EclMultiselectComponent = class _EclMultiselectComponent extends ECLBaseDire
     if (this.ariaDescribedby !== void 0) {
       this.multiselectComponent.ariaDescribedby = this.ariaDescribedby;
     }
+    if (this.toggleLabel !== void 0) {
+      this.multiselectComponent.toggleLabel = this.toggleLabel;
+    }
     if (this.id !== void 0) {
       this.multiselectComponent.id = this.id;
     }
@@ -12433,10 +12498,10 @@ var EclMultiselectComponent = class _EclMultiselectComponent extends ECLBaseDire
     });
   }
   static {
-    this.ɵfac = i0153.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0153, type: _EclMultiselectComponent, deps: [{ token: i0153.Injector }, { token: i0153.ElementRef }, { token: i0153.ViewContainerRef }, { token: i0153.IterableDiffers }], target: i0153.ɵɵFactoryTarget.Component });
+    this.ɵfac = i0153.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0153, type: _EclMultiselectComponent, deps: [{ token: i0153.Injector }, { token: i0153.ElementRef }, { token: i0153.ViewContainerRef }, { token: i0153.IterableDiffers }, { token: i0153.Renderer2 }], target: i0153.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0153.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _EclMultiselectComponent, selector: "select[eclMultiselect]", inputs: { ariaDescribedby: "ariaDescribedby", ariaLabeledby: "ariaLabeledby", id: "id", isInvalid: "isInvalid", disabled: "disabled", eclPlaceholder: "eclPlaceholder", eclSize: "eclSize" }, outputs: { eclChange: "eclChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [
+    this.ɵcmp = i0153.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclMultiselectComponent, selector: "select[eclMultiselect]", inputs: { ariaDescribedby: "ariaDescribedby", ariaLabeledby: "ariaLabeledby", id: "id", toggleLabel: "toggleLabel", isInvalid: ["isInvalid", "isInvalid", booleanAttribute30], disabled: "disabled", eclPlaceholder: "eclPlaceholder", eclSize: "eclSize" }, outputs: { eclChange: "eclChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [
       {
         provide: NG_VALUE_ACCESSOR5,
         useExisting: forwardRef44(() => _EclMultiselectComponent),
@@ -12445,9 +12510,6 @@ var EclMultiselectComponent = class _EclMultiselectComponent extends ECLBaseDire
     ], queries: [{ propertyName: "eclOptionItems", predicate: i0153.forwardRef(() => EclMultiselectOptionDirective) }], usesInheritance: true, ngImport: i0153, template: "<ng-content></ng-content>\n", encapsulation: i0153.ViewEncapsulation.None });
   }
 };
-__decorate9([
-  coerceBoolean8
-], EclMultiselectComponent.prototype, "isInvalid", null);
 i0153.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0153, type: EclMultiselectComponent, decorators: [{
   type: Component71,
   args: [{ selector: "select[eclMultiselect]", encapsulation: ViewEncapsulation9.None, providers: [
@@ -12457,7 +12519,7 @@ i0153.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
       multi: true
     }
   ], template: "<ng-content></ng-content>\n" }]
-}], ctorParameters: () => [{ type: i0153.Injector }, { type: i0153.ElementRef }, { type: i0153.ViewContainerRef }, { type: i0153.IterableDiffers }], propDecorators: { eclOptionItems: [{
+}], ctorParameters: () => [{ type: i0153.Injector }, { type: i0153.ElementRef }, { type: i0153.ViewContainerRef }, { type: i0153.IterableDiffers }, { type: i0153.Renderer2 }], propDecorators: { eclOptionItems: [{
   type: ContentChildren23,
   args: [forwardRef44(() => EclMultiselectOptionDirective)]
 }], ariaDescribedby: [{
@@ -12466,8 +12528,11 @@ i0153.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
   type: Input67
 }], id: [{
   type: Input67
-}], isInvalid: [{
+}], toggleLabel: [{
   type: Input67
+}], isInvalid: [{
+  type: Input67,
+  args: [{ transform: booleanAttribute30 }]
 }], disabled: [{
   type: Input67
 }, {
@@ -12593,7 +12658,7 @@ i0155.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] } });
 
 // lib/components/ecl-navigation-list/ecl-navigation-list.component.mjs
-import { Component as Component73, ContentChildren as ContentChildren24, HostBinding as HostBinding108, Input as Input69, booleanAttribute as booleanAttribute27, forwardRef as forwardRef48, numberAttribute as numberAttribute7 } from "@angular/core";
+import { Component as Component73, ContentChildren as ContentChildren24, HostBinding as HostBinding108, Input as Input69, booleanAttribute as booleanAttribute31, forwardRef as forwardRef48, numberAttribute as numberAttribute7 } from "@angular/core";
 import * as i0156 from "@angular/core";
 var EclNavigationListComponent = class _EclNavigationListComponent extends ECLBaseDirective {
   constructor() {
@@ -12616,7 +12681,7 @@ var EclNavigationListComponent = class _EclNavigationListComponent extends ECLBa
     this.ɵfac = i0156.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0156, type: _EclNavigationListComponent, deps: null, target: i0156.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0156.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclNavigationListComponent, selector: "ecl-navigation-list", inputs: { columns: ["columns", "columns", numberAttribute7], hasBorders: ["hasBorders", "hasBorders", booleanAttribute27] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "listItems", predicate: i0156.forwardRef(() => EclNavigationListItemComponent) }], usesInheritance: true, ngImport: i0156, template: "<ng-content></ng-content>\n" });
+    this.ɵcmp = i0156.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclNavigationListComponent, selector: "ecl-navigation-list", inputs: { columns: ["columns", "columns", numberAttribute7], hasBorders: ["hasBorders", "hasBorders", booleanAttribute31] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "listItems", predicate: i0156.forwardRef(() => EclNavigationListItemComponent) }], usesInheritance: true, ngImport: i0156, template: "<ng-content></ng-content>\n" });
   }
 };
 i0156.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0156, type: EclNavigationListComponent, decorators: [{
@@ -12630,7 +12695,7 @@ i0156.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
   args: [{ transform: numberAttribute7 }]
 }], hasBorders: [{
   type: Input69,
-  args: [{ transform: booleanAttribute27 }]
+  args: [{ transform: booleanAttribute31 }]
 }], listItems: [{
   type: ContentChildren24,
   args: [forwardRef48(() => EclNavigationListItemComponent)]
@@ -12829,10 +12894,10 @@ i0160.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] } });
 
 // lib/components/ecl-news-ticker/ecl-news-ticker.component.mjs
-import { Component as Component76, ContentChildren as ContentChildren25, EventEmitter as EventEmitter35, HostBinding as HostBinding112, HostListener as HostListener18, Input as Input71, Output as Output35, ViewChild as ViewChild14, booleanAttribute as booleanAttribute28 } from "@angular/core";
+import { Component as Component76, ContentChildren as ContentChildren25, EventEmitter as EventEmitter35, HostBinding as HostBinding112, HostListener as HostListener18, Input as Input71, Output as Output35, ViewChild as ViewChild14, booleanAttribute as booleanAttribute32 } from "@angular/core";
 import { Subject as Subject25, takeUntil as takeUntil22 } from "rxjs";
 import * as i0161 from "@angular/core";
-import * as i53 from "@ngx-translate/core";
+import * as i54 from "@ngx-translate/core";
 var EclNewsTickerItemEvent = class extends EclBaseEvent {
   constructor(itemIndex) {
     super();
@@ -13020,7 +13085,7 @@ var EclNewsTickerComponent = class _EclNewsTickerComponent extends ECLBaseDirect
     this.ɵfac = i0161.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0161, type: _EclNewsTickerComponent, deps: [{ token: i0161.Renderer2 }], target: i0161.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0161.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.5", type: _EclNewsTickerComponent, selector: "ecl-news-ticker", inputs: { isAutoplay: ["isAutoplay", "isAutoplay", booleanAttribute28] }, outputs: { itemSwitch: "itemSwitch" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "newsTickerItems", predicate: EclNewsTickerItemComponent }], viewQueries: [{ propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }], usesInheritance: true, ngImport: i0161, template: `<div class="ecl-news-ticker__container" [style.height.px]="containerHeight">
+    this.ɵcmp = i0161.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.5", type: _EclNewsTickerComponent, selector: "ecl-news-ticker", inputs: { isAutoplay: ["isAutoplay", "isAutoplay", booleanAttribute32] }, outputs: { itemSwitch: "itemSwitch" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "newsTickerItems", predicate: EclNewsTickerItemComponent }], viewQueries: [{ propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }], usesInheritance: true, ngImport: i0161, template: `<div class="ecl-news-ticker__container" [style.height.px]="containerHeight">
     <ecl-icon icon="information" size="m" class="ecl-news-ticker__icon"></ecl-icon>
     <div class="ecl-news-ticker__content" [style.height.px]="contentHeight">
         <ul
@@ -13073,7 +13138,7 @@ var EclNewsTickerComponent = class _EclNewsTickerComponent extends ECLBaseDirect
         <span class="ecl-news-ticker__counter--max">{{ itemsCount }}</span>
     </div>
 </div>
-}`, dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclNewsTickerItemComponent, selector: "ecl-news-ticker-item", outputs: ["itemFocused"] }, { kind: "pipe", type: i53.TranslatePipe, name: "translate" }] });
+}`, dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclNewsTickerItemComponent, selector: "ecl-news-ticker-item", outputs: ["itemFocused"] }, { kind: "pipe", type: i54.TranslatePipe, name: "translate" }] });
   }
 };
 i0161.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0161, type: EclNewsTickerComponent, decorators: [{
@@ -13134,7 +13199,7 @@ i0161.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }` }]
 }], ctorParameters: () => [{ type: i0161.Renderer2 }], propDecorators: { isAutoplay: [{
   type: Input71,
-  args: [{ transform: booleanAttribute28 }]
+  args: [{ transform: booleanAttribute32 }]
 }], itemSwitch: [{
   type: Output35
 }], newsTickerItems: [{
@@ -13183,9 +13248,9 @@ i0162.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] });
 
 // lib/components/ecl-notification/ecl-notification.component.mjs
-import { Component as Component77, Input as Input72, Output as Output36, EventEmitter as EventEmitter36, HostBinding as HostBinding113, booleanAttribute as booleanAttribute29 } from "@angular/core";
+import { Component as Component77, Input as Input72, Output as Output36, EventEmitter as EventEmitter36, HostBinding as HostBinding113, booleanAttribute as booleanAttribute33 } from "@angular/core";
 import * as i0163 from "@angular/core";
-import * as i54 from "@angular/common";
+import * as i55 from "@angular/common";
 import * as i63 from "@ngx-translate/core";
 var EclNotificationCloseEvent = class extends EclBaseEvent {
 };
@@ -13229,7 +13294,7 @@ var EclNotificationComponent = class _EclNotificationComponent extends ECLBaseDi
     this.ɵfac = i0163.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0163, type: _EclNotificationComponent, deps: [{ token: EclThemeService }], target: i0163.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0163.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.5", type: _EclNotificationComponent, selector: "ecl-notification", inputs: { notificationTitle: "notificationTitle", variant: "variant", isVisible: ["isVisible", "isVisible", booleanAttribute29], isCloseable: ["isCloseable", "isCloseable", booleanAttribute29] }, outputs: { close: "close" }, host: { properties: { "attr.role": "this.role", "class.ecl-u-d-none": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0163, template: `@if( eclThemeService.isEC$ | async ){
+    this.ɵcmp = i0163.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.5", type: _EclNotificationComponent, selector: "ecl-notification", inputs: { notificationTitle: "notificationTitle", variant: "variant", isVisible: ["isVisible", "isVisible", booleanAttribute33], isCloseable: ["isCloseable", "isCloseable", booleanAttribute33] }, outputs: { close: "close" }, host: { properties: { "attr.role": "this.role", "class.ecl-u-d-none": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0163, template: `@if( eclThemeService.isEC$ | async ){
     <ecl-icon size="l" class="ecl-notification__icon" [icon]="icon" [ariaHidden]="false" role="img">
         <title>{{ icon | titlecase }}</title>
     </ecl-icon>
@@ -13261,7 +13326,7 @@ var EclNotificationComponent = class _EclNotificationComponent extends ECLBaseDi
     <ng-content select="[eclNotificationTitle]"></ng-content>
     <div class="ecl-notification__description"><ng-content></ng-content></div>
 </div>
-`, dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i54.AsyncPipe, name: "async" }, { kind: "pipe", type: i54.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i63.TranslatePipe, name: "translate" }] });
+`, dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i55.AsyncPipe, name: "async" }, { kind: "pipe", type: i55.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i63.TranslatePipe, name: "translate" }] });
   }
 };
 i0163.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0163, type: EclNotificationComponent, decorators: [{
@@ -13305,10 +13370,10 @@ i0163.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
   type: Input72
 }], isVisible: [{
   type: Input72,
-  args: [{ transform: booleanAttribute29 }]
+  args: [{ transform: booleanAttribute33 }]
 }], isCloseable: [{
   type: Input72,
-  args: [{ transform: booleanAttribute29 }]
+  args: [{ transform: booleanAttribute33 }]
 }], close: [{
   type: Output36
 }], role: [{
@@ -13347,7 +13412,7 @@ i0164.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] } });
 
 // lib/components/ecl-site-footer/ecl-footer-elements/ecl-site-footer-section.directive.mjs
-import { Directive as Directive43, HostBinding as HostBinding115, Input as Input73, booleanAttribute as booleanAttribute30 } from "@angular/core";
+import { Directive as Directive43, HostBinding as HostBinding115, Input as Input73, booleanAttribute as booleanAttribute34 } from "@angular/core";
 import * as i0165 from "@angular/core";
 var EclSiteFooterSectionDirective = class _EclSiteFooterSectionDirective extends ECLBaseDirective {
   constructor() {
@@ -13362,7 +13427,7 @@ var EclSiteFooterSectionDirective = class _EclSiteFooterSectionDirective extends
     this.ɵfac = i0165.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0165, type: _EclSiteFooterSectionDirective, deps: null, target: i0165.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0165.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclSiteFooterSectionDirective, selector: "[eclSiteFooterSection]", inputs: { isCondensed: ["isCondensed", "isCondensed", booleanAttribute30], isSiteInfo: ["isSiteInfo", "isSiteInfo", booleanAttribute30], isSplitList: ["isSplitList", "isSplitList", booleanAttribute30], hasSeparator: ["hasSeparator", "hasSeparator", booleanAttribute30] }, host: { properties: { "class.ecl-site-footer__section": "this.cmpClass", "class.ecl-site-footer__section--condensed": "this.isCondensed", "class.ecl-site-footer__section--site-info": "this.isSiteInfo", "class.ecl-site-footer__section--split-list": "this.isSplitList", "class.ecl-site-footer__section--separator": "this.hasSeparator" } }, usesInheritance: true, ngImport: i0165 });
+    this.ɵdir = i0165.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclSiteFooterSectionDirective, selector: "[eclSiteFooterSection]", inputs: { isCondensed: ["isCondensed", "isCondensed", booleanAttribute34], isSiteInfo: ["isSiteInfo", "isSiteInfo", booleanAttribute34], isSplitList: ["isSplitList", "isSplitList", booleanAttribute34], hasSeparator: ["hasSeparator", "hasSeparator", booleanAttribute34] }, host: { properties: { "class.ecl-site-footer__section": "this.cmpClass", "class.ecl-site-footer__section--condensed": "this.isCondensed", "class.ecl-site-footer__section--site-info": "this.isSiteInfo", "class.ecl-site-footer__section--split-list": "this.isSplitList", "class.ecl-site-footer__section--separator": "this.hasSeparator" } }, usesInheritance: true, ngImport: i0165 });
   }
 };
 i0165.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0165, type: EclSiteFooterSectionDirective, decorators: [{
@@ -13375,19 +13440,19 @@ i0165.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
   args: ["class.ecl-site-footer__section"]
 }], isCondensed: [{
   type: Input73,
-  args: [{ transform: booleanAttribute30 }]
+  args: [{ transform: booleanAttribute34 }]
 }, {
   type: HostBinding115,
   args: ["class.ecl-site-footer__section--condensed"]
 }], isSiteInfo: [{
   type: Input73,
-  args: [{ transform: booleanAttribute30 }]
+  args: [{ transform: booleanAttribute34 }]
 }, {
   type: HostBinding115,
   args: ["class.ecl-site-footer__section--site-info"]
 }], isSplitList: [{
   type: Input73,
-  args: [{ transform: booleanAttribute30 }]
+  args: [{ transform: booleanAttribute34 }]
 }, {
   type: HostBinding115,
   args: ["class.ecl-site-footer__section--split-list"]
@@ -13396,11 +13461,11 @@ i0165.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
   args: ["class.ecl-site-footer__section--separator"]
 }, {
   type: Input73,
-  args: [{ transform: booleanAttribute30 }]
+  args: [{ transform: booleanAttribute34 }]
 }] } });
 
 // lib/components/ecl-site-footer/ecl-footer-elements/ecl-site-footer-title.directive.mjs
-import { Directive as Directive44, HostBinding as HostBinding116, Input as Input74, booleanAttribute as booleanAttribute31 } from "@angular/core";
+import { Directive as Directive44, HostBinding as HostBinding116, Input as Input74, booleanAttribute as booleanAttribute35 } from "@angular/core";
 import * as i0166 from "@angular/core";
 var EclSiteFooterTitleDirective = class _EclSiteFooterTitleDirective extends ECLBaseDirective {
   constructor() {
@@ -13412,7 +13477,7 @@ var EclSiteFooterTitleDirective = class _EclSiteFooterTitleDirective extends ECL
     this.ɵfac = i0166.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0166, type: _EclSiteFooterTitleDirective, deps: null, target: i0166.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0166.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclSiteFooterTitleDirective, selector: "[eclSiteFooterTitle]", inputs: { isSeparator: ["isSeparator", "isSeparator", booleanAttribute31] }, host: { properties: { "class.ecl-site-footer__title": "this.cmpClass", "class.ecl-site-footer__title--separator": "this.isSeparator" } }, usesInheritance: true, ngImport: i0166 });
+    this.ɵdir = i0166.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclSiteFooterTitleDirective, selector: "[eclSiteFooterTitle]", inputs: { isSeparator: ["isSeparator", "isSeparator", booleanAttribute35] }, host: { properties: { "class.ecl-site-footer__title": "this.cmpClass", "class.ecl-site-footer__title--separator": "this.isSeparator" } }, usesInheritance: true, ngImport: i0166 });
   }
 };
 i0166.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0166, type: EclSiteFooterTitleDirective, decorators: [{
@@ -13425,7 +13490,7 @@ i0166.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
   args: ["class.ecl-site-footer__title"]
 }], isSeparator: [{
   type: Input74,
-  args: [{ transform: booleanAttribute31 }]
+  args: [{ transform: booleanAttribute35 }]
 }, {
   type: HostBinding116,
   args: ["class.ecl-site-footer__title--separator"]
@@ -13478,7 +13543,7 @@ i0167.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] } });
 
 // lib/components/ecl-site-footer/ecl-footer-elements/ecl-site-footer-list.directive.mjs
-import { Directive as Directive46, HostBinding as HostBinding118, Input as Input75, booleanAttribute as booleanAttribute32 } from "@angular/core";
+import { Directive as Directive46, HostBinding as HostBinding118, Input as Input75, booleanAttribute as booleanAttribute36 } from "@angular/core";
 import * as i0168 from "@angular/core";
 var EclSiteFooterListDirective = class _EclSiteFooterListDirective extends ECLBaseDirective {
   constructor() {
@@ -13489,7 +13554,7 @@ var EclSiteFooterListDirective = class _EclSiteFooterListDirective extends ECLBa
     this.ɵfac = i0168.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0168, type: _EclSiteFooterListDirective, deps: null, target: i0168.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0168.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclSiteFooterListDirective, selector: "[eclSiteFooterList]", inputs: { isInline: ["isInline", "isInline", booleanAttribute32], isColumns: ["isColumns", "isColumns", booleanAttribute32] }, host: { properties: { "class.ecl-site-footer__list": "this.cmpClass", "class.ecl-site-footer__list--inline": "this.isInline", "class.ecl-site-footer__list--columns": "this.isColumns" } }, usesInheritance: true, ngImport: i0168 });
+    this.ɵdir = i0168.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclSiteFooterListDirective, selector: "[eclSiteFooterList]", inputs: { isInline: ["isInline", "isInline", booleanAttribute36], isColumns: ["isColumns", "isColumns", booleanAttribute36] }, host: { properties: { "class.ecl-site-footer__list": "this.cmpClass", "class.ecl-site-footer__list--inline": "this.isInline", "class.ecl-site-footer__list--columns": "this.isColumns" } }, usesInheritance: true, ngImport: i0168 });
   }
 };
 i0168.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0168, type: EclSiteFooterListDirective, decorators: [{
@@ -13502,13 +13567,13 @@ i0168.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
   args: ["class.ecl-site-footer__list"]
 }], isInline: [{
   type: Input75,
-  args: [{ transform: booleanAttribute32 }]
+  args: [{ transform: booleanAttribute36 }]
 }, {
   type: HostBinding118,
   args: ["class.ecl-site-footer__list--inline"]
 }], isColumns: [{
   type: Input75,
-  args: [{ transform: booleanAttribute32 }]
+  args: [{ transform: booleanAttribute36 }]
 }, {
   type: HostBinding118,
   args: ["class.ecl-site-footer__list--columns"]
@@ -13754,7 +13819,7 @@ i0170.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] } });
 
 // lib/components/ecl-site-footer/ecl-footer-elements/ec/ecl-site-footer-fixed-content.mjs
-import { Component as Component78, Input as Input76, booleanAttribute as booleanAttribute33 } from "@angular/core";
+import { Component as Component78, Input as Input76, booleanAttribute as booleanAttribute37 } from "@angular/core";
 import * as i0171 from "@angular/core";
 import * as i126 from "@ngx-translate/core";
 import * as i32 from "@angular/common";
@@ -13769,7 +13834,7 @@ var EclSiteFooterFixedContentECComponent = class _EclSiteFooterFixedContentECCom
     this.ɵfac = i0171.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0171, type: _EclSiteFooterFixedContentECComponent, deps: [{ token: i126.TranslateService }, { token: EclLanguageService }], target: i0171.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0171.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.5", type: _EclSiteFooterFixedContentECComponent, selector: "ecl-site-footer-fixed-content-ec", inputs: { isCore: ["isCore", "isCore", booleanAttribute33], languageCode: "languageCode", ecLogoLanguageCode: "ecLogoLanguageCode", content: "content" }, usesInheritance: true, ngImport: i0171, template: `@if(isCore){
+    this.ɵcmp = i0171.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.5", type: _EclSiteFooterFixedContentECComponent, selector: "ecl-site-footer-fixed-content-ec", inputs: { isCore: ["isCore", "isCore", booleanAttribute37], languageCode: "languageCode", ecLogoLanguageCode: "ecLogoLanguageCode", content: "content" }, usesInheritance: true, ngImport: i0171, template: `@if(isCore){
     <div eclSiteFooterRow>
         <div eclSiteFooterColumn>
             <div eclSiteFooterSection>
@@ -14663,7 +14728,7 @@ i0171.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 ` }]
 }], ctorParameters: () => [{ type: i126.TranslateService }, { type: EclLanguageService }], propDecorators: { isCore: [{
   type: Input76,
-  args: [{ transform: booleanAttribute33 }]
+  args: [{ transform: booleanAttribute37 }]
 }], languageCode: [{
   type: Input76
 }], ecLogoLanguageCode: [{
@@ -14673,7 +14738,7 @@ i0171.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] } });
 
 // lib/components/ecl-site-footer/ecl-footer-elements/eu/ecl-site-footer-fixed-content.mjs
-import { Component as Component79, Input as Input77, booleanAttribute as booleanAttribute34 } from "@angular/core";
+import { Component as Component79, Input as Input77, booleanAttribute as booleanAttribute38 } from "@angular/core";
 import * as i0172 from "@angular/core";
 import * as i127 from "@ngx-translate/core";
 import * as i33 from "@angular/common";
@@ -14697,7 +14762,7 @@ var EclSiteFooterFixedContentEUComponent = class _EclSiteFooterFixedContentEUCom
     this.ɵfac = i0172.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0172, type: _EclSiteFooterFixedContentEUComponent, deps: [{ token: i127.TranslateService }, { token: EclLanguageService }], target: i0172.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0172.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.5", type: _EclSiteFooterFixedContentEUComponent, selector: "ecl-site-footer-fixed-content-eu", inputs: { isCore: ["isCore", "isCore", booleanAttribute34], languageCode: "languageCode", ecLogoLanguageCode: "ecLogoLanguageCode", content: "content" }, usesInheritance: true, ngImport: i0172, template: `@if(isCore){
+    this.ɵcmp = i0172.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.5", type: _EclSiteFooterFixedContentEUComponent, selector: "ecl-site-footer-fixed-content-eu", inputs: { isCore: ["isCore", "isCore", booleanAttribute38], languageCode: "languageCode", ecLogoLanguageCode: "ecLogoLanguageCode", content: "content" }, usesInheritance: true, ngImport: i0172, template: `@if(isCore){
     <div eclSiteFooterRow>
         <div eclSiteFooterColumn>
             <div eclSiteFooterSection>
@@ -16011,7 +16076,7 @@ i0172.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 ` }]
 }], ctorParameters: () => [{ type: i127.TranslateService }, { type: EclLanguageService }], propDecorators: { isCore: [{
   type: Input77,
-  args: [{ transform: booleanAttribute34 }]
+  args: [{ transform: booleanAttribute38 }]
 }], languageCode: [{
   type: Input77
 }], ecLogoLanguageCode: [{
@@ -16021,10 +16086,10 @@ i0172.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] } });
 
 // lib/components/ecl-site-footer/ecl-site-footer.component.mjs
-import { Component as Component80, HostBinding as HostBinding121, Input as Input78, booleanAttribute as booleanAttribute35 } from "@angular/core";
+import { Component as Component80, HostBinding as HostBinding121, Input as Input78, booleanAttribute as booleanAttribute39 } from "@angular/core";
 import * as i0173 from "@angular/core";
 import * as i128 from "@ngx-translate/core";
-import * as i55 from "@angular/common";
+import * as i56 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();
@@ -16053,7 +16118,7 @@ var EclSiteFooterComponent = class _EclSiteFooterComponent extends ECLBaseDirect
     this.ɵfac = i0173.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0173, type: _EclSiteFooterComponent, deps: [{ token: i128.TranslateService }, { token: EclLanguageService }, { token: EclThemeService }], target: i0173.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0173.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.5", type: _EclSiteFooterComponent, selector: "ecl-site-footer", inputs: { isCore: ["isCore", "isCore", booleanAttribute35] }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0173, template: '<div class="ecl-container ecl-site-footer__container">\n    @if(eclThemeService.isEC$ | async) {\n    <ecl-site-footer-fixed-content-ec\n        [isCore]="isCore"\n        [languageCode]="languageCode"\n        [ecLogoLanguageCode]="getLanguageCode()"\n        [content]="content">\n    </ecl-site-footer-fixed-content-ec>\n    }\n    @if(eclThemeService.isEU$ | async) {\n        <ecl-site-footer-fixed-content-eu\n            [isCore]="isCore"\n            [languageCode]="languageCode"\n            [ecLogoLanguageCode]="getLanguageCode()"\n            [content]="content">\n        </ecl-site-footer-fixed-content-eu>\n    }\n\n    <ng-template #content>\n        <ng-content></ng-content>\n    </ng-template>\n</div>\n', dependencies: [{ kind: "component", type: EclSiteFooterFixedContentECComponent, selector: "ecl-site-footer-fixed-content-ec", inputs: ["isCore", "languageCode", "ecLogoLanguageCode", "content"] }, { kind: "component", type: EclSiteFooterFixedContentEUComponent, selector: "ecl-site-footer-fixed-content-eu", inputs: ["isCore", "languageCode", "ecLogoLanguageCode", "content"] }, { kind: "pipe", type: i55.AsyncPipe, name: "async" }] });
+    this.ɵcmp = i0173.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.5", type: _EclSiteFooterComponent, selector: "ecl-site-footer", inputs: { isCore: ["isCore", "isCore", booleanAttribute39] }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0173, template: '<div class="ecl-container ecl-site-footer__container">\n    @if(eclThemeService.isEC$ | async) {\n    <ecl-site-footer-fixed-content-ec\n        [isCore]="isCore"\n        [languageCode]="languageCode"\n        [ecLogoLanguageCode]="getLanguageCode()"\n        [content]="content">\n    </ecl-site-footer-fixed-content-ec>\n    }\n    @if(eclThemeService.isEU$ | async) {\n        <ecl-site-footer-fixed-content-eu\n            [isCore]="isCore"\n            [languageCode]="languageCode"\n            [ecLogoLanguageCode]="getLanguageCode()"\n            [content]="content">\n        </ecl-site-footer-fixed-content-eu>\n    }\n\n    <ng-template #content>\n        <ng-content></ng-content>\n    </ng-template>\n</div>\n', dependencies: [{ kind: "component", type: EclSiteFooterFixedContentECComponent, selector: "ecl-site-footer-fixed-content-ec", inputs: ["isCore", "languageCode", "ecLogoLanguageCode", "content"] }, { kind: "component", type: EclSiteFooterFixedContentEUComponent, selector: "ecl-site-footer-fixed-content-eu", inputs: ["isCore", "languageCode", "ecLogoLanguageCode", "content"] }, { kind: "pipe", type: i56.AsyncPipe, name: "async" }] });
   }
 };
 i0173.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0173, type: EclSiteFooterComponent, decorators: [{
@@ -16061,7 +16126,7 @@ i0173.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
   args: [{ selector: "ecl-site-footer", template: '<div class="ecl-container ecl-site-footer__container">\n    @if(eclThemeService.isEC$ | async) {\n    <ecl-site-footer-fixed-content-ec\n        [isCore]="isCore"\n        [languageCode]="languageCode"\n        [ecLogoLanguageCode]="getLanguageCode()"\n        [content]="content">\n    </ecl-site-footer-fixed-content-ec>\n    }\n    @if(eclThemeService.isEU$ | async) {\n        <ecl-site-footer-fixed-content-eu\n            [isCore]="isCore"\n            [languageCode]="languageCode"\n            [ecLogoLanguageCode]="getLanguageCode()"\n            [content]="content">\n        </ecl-site-footer-fixed-content-eu>\n    }\n\n    <ng-template #content>\n        <ng-content></ng-content>\n    </ng-template>\n</div>\n' }]
 }], ctorParameters: () => [{ type: i128.TranslateService }, { type: EclLanguageService }, { type: EclThemeService }], propDecorators: { isCore: [{
   type: Input78,
-  args: [{ transform: booleanAttribute35 }]
+  args: [{ transform: booleanAttribute39 }]
 }], cssClasses: [{
   type: HostBinding121,
   args: ["class"]
@@ -16273,7 +16338,7 @@ i0176.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] } });
 
 // lib/components/ecl-page-header/ecl-page-header-title.directive.mjs
-import { Directive as Directive50, HostBinding as HostBinding123, Input as Input79, booleanAttribute as booleanAttribute36 } from "@angular/core";
+import { Directive as Directive50, HostBinding as HostBinding123, Input as Input79, booleanAttribute as booleanAttribute40 } from "@angular/core";
 import * as i0177 from "@angular/core";
 var EclPageHeaderTitleDirective = class _EclPageHeaderTitleDirective extends ECLBaseDirective {
   constructor() {
@@ -16287,7 +16352,7 @@ var EclPageHeaderTitleDirective = class _EclPageHeaderTitleDirective extends ECL
     this.ɵfac = i0177.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0177, type: _EclPageHeaderTitleDirective, deps: null, target: i0177.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0177.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclPageHeaderTitleDirective, selector: "[eclPageHeaderTitle]", inputs: { isTitleVisible: ["isTitleVisible", "isTitleVisible", booleanAttribute36] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0177 });
+    this.ɵdir = i0177.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclPageHeaderTitleDirective, selector: "[eclPageHeaderTitle]", inputs: { isTitleVisible: ["isTitleVisible", "isTitleVisible", booleanAttribute40] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0177 });
   }
 };
 i0177.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0177, type: EclPageHeaderTitleDirective, decorators: [{
@@ -16297,7 +16362,7 @@ i0177.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
   }]
 }], propDecorators: { isTitleVisible: [{
   type: Input79,
-  args: [{ transform: booleanAttribute36 }]
+  args: [{ transform: booleanAttribute40 }]
 }], cssClasses: [{
   type: HostBinding123,
   args: ["class"]
@@ -16533,7 +16598,7 @@ i0182.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] });
 
 // lib/components/ecl-pagination/ecl-pagination-item.component.mjs
-import { Component as Component82, EventEmitter as EventEmitter37, HostBinding as HostBinding128, Input as Input81, Output as Output37, ViewEncapsulation as ViewEncapsulation11, booleanAttribute as booleanAttribute37 } from "@angular/core";
+import { Component as Component82, EventEmitter as EventEmitter37, HostBinding as HostBinding128, Input as Input81, Output as Output37, ViewEncapsulation as ViewEncapsulation11, booleanAttribute as booleanAttribute41 } from "@angular/core";
 import * as i0183 from "@angular/core";
 import * as i215 from "@angular/router";
 import * as i64 from "@ngx-translate/core";
@@ -16594,7 +16659,7 @@ var EclPaginationItemComponent = class _EclPaginationItemComponent extends ECLBa
     this.ɵfac = i0183.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0183, type: _EclPaginationItemComponent, deps: [{ token: EclThemeService }], target: i0183.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0183.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.5", type: _EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: { label: "label", ariaLabel: "ariaLabel", pagesCount: "pagesCount", isCurrent: ["isCurrent", "isCurrent", booleanAttribute37], isNext: ["isNext", "isNext", booleanAttribute37], isPrevious: ["isPrevious", "isPrevious", booleanAttribute37], isTruncated: ["isTruncated", "isTruncated", booleanAttribute37], routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href" }, outputs: { pageClick: "pageClick" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "class.ecl-pagination__item--truncation": "this.isTruncated" } }, usesInheritance: true, ngImport: i0183, template: `@if (!isCurrent && !isTruncated) {
+    this.ɵcmp = i0183.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.5", type: _EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: { label: "label", ariaLabel: "ariaLabel", pagesCount: "pagesCount", isCurrent: ["isCurrent", "isCurrent", booleanAttribute41], isNext: ["isNext", "isNext", booleanAttribute41], isPrevious: ["isPrevious", "isPrevious", booleanAttribute41], isTruncated: ["isTruncated", "isTruncated", booleanAttribute41], routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href" }, outputs: { pageClick: "pageClick" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "class.ecl-pagination__item--truncation": "this.isTruncated" } }, usesInheritance: true, ngImport: i0183, template: `@if (!isCurrent && !isTruncated) {
     @if(routerLink && !isPrevOrNextVisible()){
         <a  eclLink (click)="onPageClick($event)" variant="standalone"
            attr.aria-label="{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}"
@@ -16734,16 +16799,16 @@ i0183.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
   type: Input81
 }], isCurrent: [{
   type: Input81,
-  args: [{ transform: booleanAttribute37 }]
+  args: [{ transform: booleanAttribute41 }]
 }], isNext: [{
   type: Input81,
-  args: [{ transform: booleanAttribute37 }]
+  args: [{ transform: booleanAttribute41 }]
 }], isPrevious: [{
   type: Input81,
-  args: [{ transform: booleanAttribute37 }]
+  args: [{ transform: booleanAttribute41 }]
 }], isTruncated: [{
   type: Input81,
-  args: [{ transform: booleanAttribute37 }]
+  args: [{ transform: booleanAttribute41 }]
 }, {
   type: HostBinding128,
   args: ["class.ecl-pagination__item--truncation"]
@@ -17212,9 +17277,9 @@ i0189.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] });
 
 // lib/components/ecl-radio/ecl-radio-help.component.mjs
-import { __decorate as __decorate10 } from "tslib";
+import { __decorate as __decorate6 } from "tslib";
 import { Component as Component85, HostBinding as HostBinding133, Input as Input83 } from "@angular/core";
-import { coerceBoolean as coerceBoolean9 } from "@eui/base";
+import { coerceBoolean as coerceBoolean5 } from "@eui/base";
 import * as i0190 from "@angular/core";
 var EclRadioHelpComponent = class _EclRadioHelpComponent extends ECLBaseDirective {
   constructor() {
@@ -17231,8 +17296,8 @@ var EclRadioHelpComponent = class _EclRadioHelpComponent extends ECLBaseDirectiv
     this.ɵcmp = i0190.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _EclRadioHelpComponent, selector: "[eclRadioHelp]", inputs: { isDisabled: "isDisabled" }, host: { properties: { "class.ecl-radio__help--disabled": "this.isDisabled", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0190, template: "<ng-content></ng-content>\n" });
   }
 };
-__decorate10([
-  coerceBoolean9
+__decorate6([
+  coerceBoolean5
 ], EclRadioHelpComponent.prototype, "isDisabled", void 0);
 i0190.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0190, type: EclRadioHelpComponent, decorators: [{
   type: Component85,
@@ -17248,9 +17313,9 @@ i0190.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] } });
 
 // lib/components/ecl-radio/ecl-radio-label.component.mjs
-import { __decorate as __decorate11 } from "tslib";
+import { __decorate as __decorate7 } from "tslib";
 import { Component as Component86, HostBinding as HostBinding134, Input as Input84, ViewEncapsulation as ViewEncapsulation13 } from "@angular/core";
-import { coerceBoolean as coerceBoolean10 } from "@eui/base";
+import { coerceBoolean as coerceBoolean6 } from "@eui/base";
 import * as i0191 from "@angular/core";
 var EclRadioLabelComponent = class _EclRadioLabelComponent extends ECLBaseDirective {
   constructor() {
@@ -17268,11 +17333,11 @@ var EclRadioLabelComponent = class _EclRadioLabelComponent extends ECLBaseDirect
     this.ɵcmp = i0191.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _EclRadioLabelComponent, selector: "[eclRadioLabel]", inputs: { isInvalid: "isInvalid", isDisabled: "isDisabled" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0191, template: '<span class="ecl-radio__box" [class.ecl-radio__box--disabled]="isDisabled" [class.ecl-radio__box--invalid]="isInvalid">\n    <span class="ecl-radio__box-inner"></span>\n</span>\n\n<ng-content></ng-content>\n', encapsulation: i0191.ViewEncapsulation.None });
   }
 };
-__decorate11([
-  coerceBoolean10
+__decorate7([
+  coerceBoolean6
 ], EclRadioLabelComponent.prototype, "isInvalid", void 0);
-__decorate11([
-  coerceBoolean10
+__decorate7([
+  coerceBoolean6
 ], EclRadioLabelComponent.prototype, "isDisabled", void 0);
 i0191.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0191, type: EclRadioLabelComponent, decorators: [{
   type: Component86,
@@ -17287,9 +17352,9 @@ i0191.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] } });
 
 // lib/components/ecl-radio/ecl-radio.directive.mjs
-import { __decorate as __decorate12 } from "tslib";
+import { __decorate as __decorate8 } from "tslib";
 import { ContentChild as ContentChild24, Directive as Directive56, forwardRef as forwardRef50, HostBinding as HostBinding135, Input as Input85 } from "@angular/core";
-import { coerceBoolean as coerceBoolean11 } from "@eui/base";
+import { coerceBoolean as coerceBoolean7 } from "@eui/base";
 import * as i0192 from "@angular/core";
 var EclRadioDirective = class _EclRadioDirective extends ECLBaseDirective {
   constructor() {
@@ -17319,14 +17384,14 @@ var EclRadioDirective = class _EclRadioDirective extends ECLBaseDirective {
     this.ɵdir = i0192.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", 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: i0192.forwardRef(() => EclRadioLabelComponent), descendants: true }, { propertyName: "eclRadioHelpComponent", first: true, predicate: i0192.forwardRef(() => EclRadioHelpComponent), descendants: true }], usesInheritance: true, ngImport: i0192 });
   }
 };
-__decorate12([
-  coerceBoolean11
+__decorate8([
+  coerceBoolean7
 ], EclRadioDirective.prototype, "isBinary", void 0);
-__decorate12([
-  coerceBoolean11
+__decorate8([
+  coerceBoolean7
 ], EclRadioDirective.prototype, "isDisabled", void 0);
-__decorate12([
-  coerceBoolean11
+__decorate8([
+  coerceBoolean7
 ], EclRadioDirective.prototype, "isInvalid", void 0);
 i0192.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0192, type: EclRadioDirective, decorators: [{
   type: Directive56,
@@ -17427,10 +17492,10 @@ i0194.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] });
 
 // lib/components/ecl-rating-field/ecl-rating-field.component.mjs
-import { __decorate as __decorate13 } from "tslib";
+import { __decorate as __decorate9 } from "tslib";
 import { Component as Component87, EventEmitter as EventEmitter40, forwardRef as forwardRef53, HostBinding as HostBinding137, Input as Input86, Output as Output40 } from "@angular/core";
 import { NG_VALUE_ACCESSOR as NG_VALUE_ACCESSOR6 } from "@angular/forms";
-import { coerceBoolean as coerceBoolean12, coerceNumber } from "@eui/base";
+import { coerceBoolean as coerceBoolean8, coerceNumber } from "@eui/base";
 import * as i0195 from "@angular/core";
 import * as i132 from "@angular/common";
 var EclRatingChangeEvent = class extends EclBaseEvent {
@@ -17489,14 +17554,14 @@ var EclRatingFieldComponent = class _EclRatingFieldComponent extends ECLBaseDire
     this.ɵcmp = i0195.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.5", 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: i0195, 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: i132.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"] }] });
   }
 };
-__decorate13([
+__decorate9([
   coerceNumber
 ], EclRatingFieldComponent.prototype, "numberOfStars", void 0);
-__decorate13([
+__decorate9([
   coerceNumber
 ], EclRatingFieldComponent.prototype, "rating", void 0);
-__decorate13([
-  coerceBoolean12
+__decorate9([
+  coerceBoolean8
 ], EclRatingFieldComponent.prototype, "disabled", void 0);
 i0195.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0195, type: EclRatingFieldComponent, decorators: [{
   type: Component87,
@@ -17580,9 +17645,9 @@ i0197.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] } });
 
 // lib/components/ecl-range/ecl-range.directive.mjs
-import { __decorate as __decorate14 } from "tslib";
+import { __decorate as __decorate10 } from "tslib";
 import { Directive as Directive58, EventEmitter as EventEmitter41, HostBinding as HostBinding139, HostListener as HostListener21, Input as Input88, Optional as Optional7, Output as Output41, Self as Self5 } from "@angular/core";
-import { coerceBoolean as coerceBoolean13 } from "@eui/base";
+import { coerceBoolean as coerceBoolean9 } from "@eui/base";
 import { distinctUntilChanged } from "rxjs";
 import * as i0198 from "@angular/core";
 import * as i134 from "@angular/forms";
@@ -17640,8 +17705,8 @@ var EclRangeDirective = class _EclRangeDirective extends ECLBaseDirective {
     this.ɵdir = i0198.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", 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: i0198 });
   }
 };
-__decorate14([
-  coerceBoolean13
+__decorate10([
+  coerceBoolean9
 ], EclRangeDirective.prototype, "hasValueLabel", void 0);
 i0198.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0198, type: EclRangeDirective, decorators: [{
   type: Directive58,
@@ -17732,9 +17797,9 @@ i0200.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] } });
 
 // lib/components/ecl-select/ecl-select.directive.mjs
-import { __decorate as __decorate15 } from "tslib";
+import { __decorate as __decorate11 } from "tslib";
 import { Directive as Directive59, HostBinding as HostBinding141, Input as Input90, Optional as Optional8, Self as Self6 } from "@angular/core";
-import { coerceBoolean as coerceBoolean14 } from "@eui/base";
+import { coerceBoolean as coerceBoolean10 } from "@eui/base";
 import * as i0201 from "@angular/core";
 import * as i135 from "@angular/forms";
 var EclSelectDirective = class _EclSelectDirective extends ECLBaseDirective {
@@ -17784,11 +17849,11 @@ var EclSelectDirective = class _EclSelectDirective extends ECLBaseDirective {
     this.ɵdir = i0201.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", 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: i0201 });
   }
 };
-__decorate15([
-  coerceBoolean14
+__decorate11([
+  coerceBoolean10
 ], EclSelectDirective.prototype, "disabled", void 0);
-__decorate15([
-  coerceBoolean14
+__decorate11([
+  coerceBoolean10
 ], EclSelectDirective.prototype, "isInvalid", void 0);
 i0201.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0201, type: EclSelectDirective, decorators: [{
   type: Directive59,
@@ -17845,7 +17910,7 @@ i0202.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] });
 
 // lib/components/ecl-social-media-follow/ecl-social-media-follow.component.mjs
-import { Component as Component90, HostBinding as HostBinding142, Input as Input91, booleanAttribute as booleanAttribute38 } from "@angular/core";
+import { Component as Component90, HostBinding as HostBinding142, Input as Input91, booleanAttribute as booleanAttribute42 } from "@angular/core";
 import * as i0203 from "@angular/core";
 import * as i136 from "@angular/common";
 var EclSocialMediaFollowComponent = class _EclSocialMediaFollowComponent extends ECLBaseDirective {
@@ -17860,7 +17925,7 @@ var EclSocialMediaFollowComponent = class _EclSocialMediaFollowComponent extends
     this.ɵfac = i0203.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0203, type: _EclSocialMediaFollowComponent, deps: null, target: i0203.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0203.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclSocialMediaFollowComponent, selector: "ecl-social-media-follow", inputs: { description: "description", isVertical: ["isVertical", "isVertical", booleanAttribute38] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0203, template: '<p *ngIf="description" class="ecl-social-media-follow__description">{{ description }}</p>\n<ul class="ecl-social-media-follow__list">\n    <ng-content></ng-content>\n</ul>\n', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i136.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    this.ɵcmp = i0203.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclSocialMediaFollowComponent, selector: "ecl-social-media-follow", inputs: { description: "description", isVertical: ["isVertical", "isVertical", booleanAttribute42] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0203, template: '<p *ngIf="description" class="ecl-social-media-follow__description">{{ description }}</p>\n<ul class="ecl-social-media-follow__list">\n    <ng-content></ng-content>\n</ul>\n', styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i136.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   }
 };
 i0203.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0203, type: EclSocialMediaFollowComponent, decorators: [{
@@ -17870,7 +17935,7 @@ i0203.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
   type: Input91
 }], isVertical: [{
   type: Input91,
-  args: [{ transform: booleanAttribute38 }]
+  args: [{ transform: booleanAttribute42 }]
 }], cssClasses: [{
   type: HostBinding142,
   args: ["class"]
@@ -17993,9 +18058,9 @@ i0206.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] });
 
 // lib/components/ecl-social-media-share/ecl-social-media-share.component.mjs
-import { __decorate as __decorate16 } from "tslib";
+import { __decorate as __decorate12 } from "tslib";
 import { Component as Component92, HostBinding as HostBinding145, Input as Input93 } from "@angular/core";
-import { coerceBoolean as coerceBoolean15 } from "@eui/base";
+import { coerceBoolean as coerceBoolean11 } from "@eui/base";
 import * as i0207 from "@angular/core";
 var EclSocialMediaShareComponent = class _EclSocialMediaShareComponent extends ECLBaseDirective {
   constructor() {
@@ -18012,8 +18077,8 @@ var EclSocialMediaShareComponent = class _EclSocialMediaShareComponent extends E
     this.ɵcmp = i0207.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _EclSocialMediaShareComponent, selector: "ecl-social-media-share", inputs: { description: "description", isVertical: "isVertical" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0207, template: '<p class="ecl-social-media-share__description">{{ description }}</p>\n<ul class="ecl-social-media-share__list">\n    <ng-content></ng-content>\n</ul>\n', styles: [":host{display:block}\n"] });
   }
 };
-__decorate16([
-  coerceBoolean15
+__decorate12([
+  coerceBoolean11
 ], EclSocialMediaShareComponent.prototype, "isVertical", void 0);
 i0207.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0207, type: EclSocialMediaShareComponent, decorators: [{
   type: Component92,
@@ -18139,7 +18204,7 @@ i0210.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] });
 
 // lib/components/ecl-loading-indicator/ecl-loading-indicator.component.mjs
-import { Component as Component94, HostBinding as HostBinding148, Input as Input95, booleanAttribute as booleanAttribute39 } from "@angular/core";
+import { Component as Component94, HostBinding as HostBinding148, Input as Input95, booleanAttribute as booleanAttribute43 } from "@angular/core";
 import * as i0211 from "@angular/core";
 var EclLoadingIndicatorComponent = class _EclLoadingIndicatorComponent extends ECLBaseDirective {
   constructor() {
@@ -18162,7 +18227,7 @@ var EclLoadingIndicatorComponent = class _EclLoadingIndicatorComponent extends E
     this.ɵfac = i0211.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0211, type: _EclLoadingIndicatorComponent, deps: null, target: i0211.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0211.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclLoadingIndicatorComponent, selector: "ecl-loading-indicator", inputs: { size: "size", variant: "variant", isCentered: ["isCentered", "isCentered", booleanAttribute39], isVisible: ["isVisible", "isVisible", booleanAttribute39] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0211, template: '<svg class="ecl-spinner__loader" viewBox="25 25 50 50">\n    <circle\n        class="ecl-spinner__circle"\n        cx="50"\n        cy="50"\n        r="20"\n        fill="none"\n        stroke-width="4px"\n        stroke-miterlimit="10"\n        vector-effect="non-scaling-stroke"></circle>\n</svg>\n<ng-content></ng-content>\n' });
+    this.ɵcmp = i0211.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclLoadingIndicatorComponent, selector: "ecl-loading-indicator", inputs: { size: "size", variant: "variant", isCentered: ["isCentered", "isCentered", booleanAttribute43], isVisible: ["isVisible", "isVisible", booleanAttribute43] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0211, template: '<svg class="ecl-spinner__loader" viewBox="25 25 50 50">\n    <circle\n        class="ecl-spinner__circle"\n        cx="50"\n        cy="50"\n        r="20"\n        fill="none"\n        stroke-width="4px"\n        stroke-miterlimit="10"\n        vector-effect="non-scaling-stroke"></circle>\n</svg>\n<ng-content></ng-content>\n' });
   }
 };
 i0211.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0211, type: EclLoadingIndicatorComponent, decorators: [{
@@ -18177,10 +18242,10 @@ i0211.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
   type: Input95
 }], isCentered: [{
   type: Input95,
-  args: [{ transform: booleanAttribute39 }]
+  args: [{ transform: booleanAttribute43 }]
 }], isVisible: [{
   type: Input95,
-  args: [{ transform: booleanAttribute39 }]
+  args: [{ transform: booleanAttribute43 }]
 }] } });
 
 // lib/components/ecl-loading-indicator/ecl-loading-indicator-label.directive.mjs
@@ -18292,7 +18357,7 @@ i0215.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] } });
 
 // lib/components/ecl-table/ecl-table.directive.mjs
-import { ContentChildren as ContentChildren26, Directive as Directive64, EventEmitter as EventEmitter44, forwardRef as forwardRef54, HostBinding as HostBinding152, HostListener as HostListener22, Input as Input96, Output as Output44, booleanAttribute as booleanAttribute40 } from "@angular/core";
+import { ContentChildren as ContentChildren26, Directive as Directive64, EventEmitter as EventEmitter44, forwardRef as forwardRef54, HostBinding as HostBinding152, HostListener as HostListener22, Input as Input96, Output as Output44, booleanAttribute as booleanAttribute44 } from "@angular/core";
 import { Subject as Subject27 } from "rxjs";
 import { takeUntil as takeUntil24 } from "rxjs/operators";
 import * as i0216 from "@angular/core";
@@ -18338,7 +18403,7 @@ var EclTableDirective = class _EclTableDirective extends ECLBaseDirective {
     this.ɵfac = i0216.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0216, type: _EclTableDirective, deps: [{ token: i0216.IterableDiffers }], target: i0216.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0216.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclTableDirective, selector: "[eclTable]", inputs: { isZebra: ["isZebra", "isZebra", booleanAttribute40] }, outputs: { sort: "sort" }, host: { properties: { "class.ecl-table--zebra": "this.isZebra", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclTableHeaders", predicate: i0216.forwardRef(() => EclTableHeaderDirective), descendants: true }], usesInheritance: true, ngImport: i0216 });
+    this.ɵdir = i0216.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclTableDirective, selector: "[eclTable]", inputs: { isZebra: ["isZebra", "isZebra", booleanAttribute44] }, outputs: { sort: "sort" }, host: { properties: { "class.ecl-table--zebra": "this.isZebra", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclTableHeaders", predicate: i0216.forwardRef(() => EclTableHeaderDirective), descendants: true }], usesInheritance: true, ngImport: i0216 });
   }
 };
 i0216.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0216, type: EclTableDirective, decorators: [{
@@ -18348,7 +18413,7 @@ i0216.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
   }]
 }], ctorParameters: () => [{ type: i0216.IterableDiffers }], propDecorators: { isZebra: [{
   type: Input96,
-  args: [{ transform: booleanAttribute40 }]
+  args: [{ transform: booleanAttribute44 }]
 }, {
   type: HostBinding152,
   args: ["class.ecl-table--zebra"]
@@ -18684,7 +18749,7 @@ i0218.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }], ctorParameters: () => [{ type: i0218.ElementRef }] });
 
 // lib/components/ecl-tabs/ecl-tab.component.mjs
-import { Component as Component97, ContentChild as ContentChild27, EventEmitter as EventEmitter45, HostBinding as HostBinding153, Input as Input97, Output as Output45, ViewChild as ViewChild16, booleanAttribute as booleanAttribute41 } from "@angular/core";
+import { Component as Component97, ContentChild as ContentChild27, EventEmitter as EventEmitter45, HostBinding as HostBinding153, Input as Input97, Output as Output45, ViewChild as ViewChild16, booleanAttribute as booleanAttribute45 } from "@angular/core";
 import * as i0219 from "@angular/core";
 var EclTabSelectEvent = class extends EclBaseEvent {
   constructor(tab) {
@@ -18738,7 +18803,7 @@ var EclTabComponent = class _EclTabComponent extends ECLBaseDirective {
     this.ɵfac = i0219.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0219, type: _EclTabComponent, deps: [{ token: i0219.ElementRef }], target: i0219.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0219.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclTabComponent, selector: "ecl-tab, [eclTab]", inputs: { id: "id", isHidden: ["isHidden", "isHidden", booleanAttribute41], isActive: ["isActive", "isActive", booleanAttribute41] }, outputs: { selectTab: "selectTab", keydownTab: "keydownTab" }, host: { properties: { "class.ecl-tabs__item--hidden": "this.isHidden", "class": "this.cssClasses" } }, queries: [{ propertyName: "label", first: true, predicate: EclTabLabelComponent, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "link", first: true, predicate: EclLinkDirective, descendants: true }], usesInheritance: true, ngImport: i0219, template: '<a\n    eclLink\n    role="tab"\n    class="ecl-tabs__link"\n    [class.ecl-tabs__link--active]="isActive"\n    [attr.aria-selected]="isActive"\n    tabindex="0"\n    (keydown)="onKeydown($event)"\n    (click)="onTabClick()">\n    <ng-content select="ecl-tab-label"></ng-content>\n</a>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }] });
+    this.ɵcmp = i0219.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclTabComponent, selector: "ecl-tab, [eclTab]", inputs: { id: "id", isHidden: ["isHidden", "isHidden", booleanAttribute45], isActive: ["isActive", "isActive", booleanAttribute45] }, outputs: { selectTab: "selectTab", keydownTab: "keydownTab" }, host: { properties: { "class.ecl-tabs__item--hidden": "this.isHidden", "class": "this.cssClasses" } }, queries: [{ propertyName: "label", first: true, predicate: EclTabLabelComponent, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "link", first: true, predicate: EclLinkDirective, descendants: true }], usesInheritance: true, ngImport: i0219, template: '<a\n    eclLink\n    role="tab"\n    class="ecl-tabs__link"\n    [class.ecl-tabs__link--active]="isActive"\n    [attr.aria-selected]="isActive"\n    tabindex="0"\n    (keydown)="onKeydown($event)"\n    (click)="onTabClick()">\n    <ng-content select="ecl-tab-label"></ng-content>\n</a>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n', dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }] });
   }
 };
 i0219.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0219, type: EclTabComponent, decorators: [{
@@ -18748,13 +18813,13 @@ i0219.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
   type: Input97
 }], isHidden: [{
   type: Input97,
-  args: [{ transform: booleanAttribute41 }]
+  args: [{ transform: booleanAttribute45 }]
 }, {
   type: HostBinding153,
   args: ["class.ecl-tabs__item--hidden"]
 }], isActive: [{
   type: Input97,
-  args: [{ transform: booleanAttribute41 }]
+  args: [{ transform: booleanAttribute45 }]
 }], selectTab: [{
   type: Output45
 }], keydownTab: [{
@@ -18774,7 +18839,7 @@ i0219.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] } });
 
 // lib/components/ecl-tabs/ecl-tab-more.component.mjs
-import { Component as Component98, HostBinding as HostBinding154, Input as Input98, booleanAttribute as booleanAttribute42 } from "@angular/core";
+import { Component as Component98, HostBinding as HostBinding154, Input as Input98, booleanAttribute as booleanAttribute46 } from "@angular/core";
 import * as i0220 from "@angular/core";
 var EclTabMoreComponent = class _EclTabMoreComponent extends ECLBaseDirective {
   constructor() {
@@ -18788,7 +18853,7 @@ var EclTabMoreComponent = class _EclTabMoreComponent extends ECLBaseDirective {
     this.ɵfac = i0220.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0220, type: _EclTabMoreComponent, deps: null, target: i0220.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0220.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclTabMoreComponent, selector: "ecl-tab-more", inputs: { isHidden: ["isHidden", "isHidden", booleanAttribute42] }, host: { properties: { "class.ecl-tabs__item--hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0220, template: "<ng-content></ng-content>\n" });
+    this.ɵcmp = i0220.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _EclTabMoreComponent, selector: "ecl-tab-more", inputs: { isHidden: ["isHidden", "isHidden", booleanAttribute46] }, host: { properties: { "class.ecl-tabs__item--hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0220, template: "<ng-content></ng-content>\n" });
   }
 };
 i0220.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0220, type: EclTabMoreComponent, decorators: [{
@@ -18796,7 +18861,7 @@ i0220.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
   args: [{ selector: "ecl-tab-more", template: "<ng-content></ng-content>\n" }]
 }], propDecorators: { isHidden: [{
   type: Input98,
-  args: [{ transform: booleanAttribute42 }]
+  args: [{ transform: booleanAttribute46 }]
 }, {
   type: HostBinding154,
   args: ["class.ecl-tabs__item--hidden"]
@@ -19446,7 +19511,7 @@ i0222.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] });
 
 // lib/components/ecl-tag/ecl-tag.component.mjs
-import { Component as Component100, Input as Input100, HostBinding as HostBinding155, Output as Output47, EventEmitter as EventEmitter47, booleanAttribute as booleanAttribute43 } from "@angular/core";
+import { Component as Component100, Input as Input100, HostBinding as HostBinding155, Output as Output47, EventEmitter as EventEmitter47, booleanAttribute as booleanAttribute47 } from "@angular/core";
 import * as i0223 from "@angular/core";
 import * as i217 from "@angular/common";
 var EclTagRemoveEvent = class extends EclBaseEvent {
@@ -19483,7 +19548,7 @@ var EclTagComponent = class _EclTagComponent extends ECLBaseDirective {
     this.ɵfac = i0223.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0223, type: _EclTagComponent, deps: null, target: i0223.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0223.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.5", type: _EclTagComponent, selector: "ecl-tag, [eclTag]", inputs: { variant: "variant", isWrapped: ["isWrapped", "isWrapped", booleanAttribute43] }, outputs: { remove: "remove" }, host: { properties: { "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0223, template: '<ng-content></ng-content>\n@if(isRemovable) {\n    <span class="ecl-tag__icon" (click)="onRemoveClick($event)">\n    <ecl-icon icon="close-outline" class="ecl-tag__icon-close" role="img">\n        <title>{{title | titlecase}}</title>\n    </ecl-icon>\n</span>\n}\n', dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i217.TitleCasePipe, name: "titlecase" }] });
+    this.ɵcmp = i0223.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.5", type: _EclTagComponent, selector: "ecl-tag, [eclTag]", inputs: { variant: "variant", isWrapped: ["isWrapped", "isWrapped", booleanAttribute47] }, outputs: { remove: "remove" }, host: { properties: { "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0223, template: '<ng-content></ng-content>\n@if(isRemovable) {\n    <span class="ecl-tag__icon" (click)="onRemoveClick($event)">\n    <ecl-icon icon="close-outline" class="ecl-tag__icon-close" role="img">\n        <title>{{title | titlecase}}</title>\n    </ecl-icon>\n</span>\n}\n', dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i217.TitleCasePipe, name: "titlecase" }] });
   }
 };
 i0223.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0223, type: EclTagComponent, decorators: [{
@@ -19493,7 +19558,7 @@ i0223.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
   type: Input100
 }], isWrapped: [{
   type: Input100,
-  args: [{ transform: booleanAttribute43 }]
+  args: [{ transform: booleanAttribute47 }]
 }], remove: [{
   type: Output47
 }], isHidden: [{
@@ -19553,9 +19618,9 @@ i0225.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] });
 
 // lib/components/ecl-text-area/ecl-text-area.directive.mjs
-import { __decorate as __decorate17 } from "tslib";
+import { __decorate as __decorate13 } from "tslib";
 import { Directive as Directive66, HostBinding as HostBinding157, Input as Input101, Optional as Optional9, Self as Self7 } from "@angular/core";
-import { coerceBoolean as coerceBoolean16 } from "@eui/base";
+import { coerceBoolean as coerceBoolean12 } from "@eui/base";
 import * as i0226 from "@angular/core";
 import * as i140 from "@angular/forms";
 var EclTextAreaDirective = class _EclTextAreaDirective extends ECLBaseDirective {
@@ -19582,8 +19647,8 @@ var EclTextAreaDirective = class _EclTextAreaDirective extends ECLBaseDirective
     this.ɵdir = i0226.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", 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: i0226 });
   }
 };
-__decorate17([
-  coerceBoolean16
+__decorate13([
+  coerceBoolean12
 ], EclTextAreaDirective.prototype, "isInvalid", void 0);
 i0226.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0226, type: EclTextAreaDirective, decorators: [{
   type: Directive66,
@@ -19707,14 +19772,14 @@ i0230.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5
 }] } });
 
 // lib/components/ecl-timeline/ecl-timeline-item.component.mjs
-import { __decorate as __decorate18 } from "tslib";
+import { __decorate as __decorate14 } from "tslib";
 import { Component as Component102, Input as Input102, HostBinding as HostBinding160, ViewEncapsulation as ViewEncapsulation17, Output as Output49, EventEmitter as EventEmitter49, ContentChild as ContentChild28, forwardRef as forwardRef58 } from "@angular/core";
-import { coerceBoolean as coerceBoolean17 } from "@eui/base";
+import { coerceBoolean as coerceBoolean13 } from "@eui/base";
 import { Subject as Subject29 } from "rxjs";
 import { takeUntil as takeUntil26 } from "rxjs/operators";
 import * as i0231 from "@angular/core";
 import * as i141 from "@angular/common";
-import * as i56 from "@ngx-translate/core";
+import * as i57 from "@ngx-translate/core";
 var EclTimelineItemToggleEvent = class extends EclBaseEvent {
   constructor(isExpanded, toggleGroup) {
     super();
@@ -19806,11 +19871,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: i141.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i141.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: i0231.ViewEncapsulation.None });
+</ng-template>`, styles: ["ecl-timeline-item{display:list-item}\n"], dependencies: [{ kind: "directive", type: i141.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i141.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: i57.TranslatePipe, name: "translate" }], encapsulation: i0231.ViewEncapsulation.None });
   }
 };
-__decorate18([
-  coerceBoolean17
+__decorate14([
+  coerceBoolean13
 ], EclTimelineItemComponent.prototype, "isTogglerExpanded", void 0);
 i0231.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0231, type: EclTimelineItemComponent, decorators: [{
   type: Component102,