@eui/ecl 18.0.0-next.13 → 18.0.0-next.14

package/esm2022/lib/components/ecl-media-container/ecl-media-container.component.mjs

@@ -33,10 +33,10 @@ export class EclMediaContainerComponent extends ECLBaseDirective {
             this.expandable.class = [this.expandable.class, 'ecl-media-container__expandable'].join(' ');
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMediaContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclMediaContainerComponent, selector: "ecl-media-container", inputs: { isFullWidth: "isFullWidth" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "pictureContent", first: true, predicate: EclMediaContainerPictureDirective, descendants: true }, { propertyName: "mediaContent", first: true, predicate: EclMediaContainerItemDirective, descendants: true }, { propertyName: "expandable", first: true, predicate: EclExpandableComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"video[eclMediaContainerItem]\"></ng-content>\n<ng-content select=\"div[eclMediaContainerItem]\"></ng-content>\n<ng-content select=\"picture[eclMediaContainerPicture]\"></ng-content>\n<!-- TODO: Remove this code in 17 version -->\n<picture *ngIf=\"!hasPictureContent && hasImgContent\" eclMediaContainerPicture>\n    <ng-content select=\"img[eclMediaContainerItem]\"></ng-content>\n</picture>\n\n<figcaption class=\"ecl-media-container__caption\">\n    <ng-content></ng-content>\n</figcaption>\n<ng-content select=\"ecl-expandable\"></ng-content>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.EclMediaContainerPictureDirective, selector: "picture[eclMediaContainerPicture]" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMediaContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclMediaContainerComponent, selector: "ecl-media-container", inputs: { isFullWidth: "isFullWidth" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "pictureContent", first: true, predicate: EclMediaContainerPictureDirective, descendants: true }, { propertyName: "mediaContent", first: true, predicate: EclMediaContainerItemDirective, descendants: true }, { propertyName: "expandable", first: true, predicate: EclExpandableComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"video[eclMediaContainerItem]\"></ng-content>\n<ng-content select=\"div[eclMediaContainerItem]\"></ng-content>\n<ng-content select=\"picture[eclMediaContainerPicture]\"></ng-content>\n<!-- TODO: Remove this code in 17 version -->\n<picture *ngIf=\"!hasPictureContent && hasImgContent\" eclMediaContainerPicture>\n    <ng-content select=\"img[eclMediaContainerItem]\"></ng-content>\n</picture>\n\n<figcaption class=\"ecl-media-container__caption\">\n    <ng-content></ng-content>\n</figcaption>\n<ng-content select=\"ecl-expandable\"></ng-content>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.EclMediaContainerPictureDirective, selector: "picture[eclMediaContainerPicture]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMediaContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMediaContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-media-container', template: "<ng-content select=\"video[eclMediaContainerItem]\"></ng-content>\n<ng-content select=\"div[eclMediaContainerItem]\"></ng-content>\n<ng-content select=\"picture[eclMediaContainerPicture]\"></ng-content>\n<!-- TODO: Remove this code in 17 version -->\n<picture *ngIf=\"!hasPictureContent && hasImgContent\" eclMediaContainerPicture>\n    <ng-content select=\"img[eclMediaContainerItem]\"></ng-content>\n</picture>\n\n<figcaption class=\"ecl-media-container__caption\">\n    <ng-content></ng-content>\n</figcaption>\n<ng-content select=\"ecl-expandable\"></ng-content>\n" }]
         }], propDecorators: { isFullWidth: [{

package/esm2022/lib/components/ecl-media-container/ecl-media-container.module.mjs

@@ -13,17 +13,17 @@ const COMPONENTS = [
     EclMediaContainerPictureDirective,
 ];
 export class EclMediaContainerComponentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMediaContainerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMediaContainerComponentModule, declarations: [EclMediaContainerComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMediaContainerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMediaContainerComponentModule, declarations: [EclMediaContainerComponent,
             EclMediaContainerItemDirective,
             EclMediaContainerIframeDirective,
             EclMediaContainerPictureDirective], imports: [CommonModule, TranslateModule], exports: [EclMediaContainerComponent,
             EclMediaContainerItemDirective,
             EclMediaContainerIframeDirective,
             EclMediaContainerPictureDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMediaContainerComponentModule, imports: [CommonModule, TranslateModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMediaContainerComponentModule, imports: [CommonModule, TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMediaContainerComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMediaContainerComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, TranslateModule],

package/esm2022/lib/components/ecl-menu/ecl-menu/ecl-menu-item.component.mjs

@@ -295,10 +295,10 @@ export class EclMenuItemComponent extends ECLBaseDirective {
             this.isMobileBreakpoint = result.matches;
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMenuItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ApplicationRef }, { token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclMenuItemComponent, selector: "ecl-menu-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: "isCurrent" }, outputs: { menuItemSelect: "menuItemSelect", menuItemCaret: "menuItemCaret", menuItemHover: "menuItemHover", menuItemHoverOut: "menuItemHoverOut", menuMegaItemSelect: "menuMegaItemSelect", menuItemFocus: "menuItemFocus", menuItemKeydown: "menuItemKeydown" }, host: { listeners: { "mouseenter": "onItemMouseEnter($event)", "mouseleave": "onItemMouseLeave($event)" }, properties: { "attr.role": "this.role", "class": "this.cssClasses", "class.ecl-menu__item--has-children": "this.hasEclChildrenDataAttribute", "attr.aria-haspopup": "this.hasEclChildrenDataAttribute", "attr.aria-expanded": "this.isAriaExpanded" } }, queries: [{ propertyName: "submenu", first: true, predicate: i0.forwardRef(() => EclMenuMegaComponent), descendants: true }], viewQueries: [{ propertyName: "menuLink", first: true, predicate: ["menuLink"], descendants: true }, { propertyName: "menuButton", first: true, predicate: EclButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a\n    #menuLink\n    *ngIf=\"href\"\n    [href]=\"href\"\n    [target]=\"target\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (focus)=\"onItemFocus($event)\"\n    (click)=\"onItemClick($event)\"\n    (keydown)=\"onLinkKeydown($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a\n    #menuLink\n    *ngIf=\"!href\"\n    tabindex=\"0\"\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    [queryParamsHandling]=\"queryParamsHandling\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (focus)=\"onItemFocus($event)\"\n    (click)=\"onItemClick($event)\"\n    (keydown)=\"onLinkKeydown($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<button\n    eclButton\n    *ngIf=\"hasChildren && isMobileBreakpoint\"\n    variant=\"primary\"\n    class=\"ecl-menu__button-caret\"\n    type=\"button\"\n    aria-label=\"Access item's children\"\n    (click)=\"onItemCaretClick($event)\"\n    (keydown)=\"onButtonKeydown($event)\">\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n</button>\n<button\n    eclButton\n    *ngIf=\"hasChildren && !isMobileBreakpoint\"\n    variant=\"primary\"\n    class=\"ecl-menu__button-caret\"\n    type=\"button\"\n    aria-label=\"Access item's children\"\n    [attr.aria-expanded]=\"isAriaExpanded\"\n    (keydown)=\"onButtonKeydown($event)\">\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n</button>\n<ng-content select=\"ecl-menu-mega\"></ng-content>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMenuItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ApplicationRef }, { token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclMenuItemComponent, selector: "ecl-menu-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: "isCurrent" }, outputs: { menuItemSelect: "menuItemSelect", menuItemCaret: "menuItemCaret", menuItemHover: "menuItemHover", menuItemHoverOut: "menuItemHoverOut", menuMegaItemSelect: "menuMegaItemSelect", menuItemFocus: "menuItemFocus", menuItemKeydown: "menuItemKeydown" }, host: { listeners: { "mouseenter": "onItemMouseEnter($event)", "mouseleave": "onItemMouseLeave($event)" }, properties: { "attr.role": "this.role", "class": "this.cssClasses", "class.ecl-menu__item--has-children": "this.hasEclChildrenDataAttribute", "attr.aria-haspopup": "this.hasEclChildrenDataAttribute", "attr.aria-expanded": "this.isAriaExpanded" } }, queries: [{ propertyName: "submenu", first: true, predicate: i0.forwardRef(() => EclMenuMegaComponent), descendants: true }], viewQueries: [{ propertyName: "menuLink", first: true, predicate: ["menuLink"], descendants: true }, { propertyName: "menuButton", first: true, predicate: EclButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a\n    #menuLink\n    *ngIf=\"href\"\n    [href]=\"href\"\n    [target]=\"target\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (focus)=\"onItemFocus($event)\"\n    (click)=\"onItemClick($event)\"\n    (keydown)=\"onLinkKeydown($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a\n    #menuLink\n    *ngIf=\"!href\"\n    tabindex=\"0\"\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    [queryParamsHandling]=\"queryParamsHandling\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (focus)=\"onItemFocus($event)\"\n    (click)=\"onItemClick($event)\"\n    (keydown)=\"onLinkKeydown($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<button\n    eclButton\n    *ngIf=\"hasChildren && isMobileBreakpoint\"\n    variant=\"primary\"\n    class=\"ecl-menu__button-caret\"\n    type=\"button\"\n    aria-label=\"Access item's children\"\n    (click)=\"onItemCaretClick($event)\"\n    (keydown)=\"onButtonKeydown($event)\">\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n</button>\n<button\n    eclButton\n    *ngIf=\"hasChildren && !isMobileBreakpoint\"\n    variant=\"primary\"\n    class=\"ecl-menu__button-caret\"\n    type=\"button\"\n    aria-label=\"Access item's children\"\n    [attr.aria-expanded]=\"isAriaExpanded\"\n    (keydown)=\"onButtonKeydown($event)\">\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n</button>\n<ng-content select=\"ecl-menu-mega\"></ng-content>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-menu-item', encapsulation: ViewEncapsulation.None, template: "<a\n    #menuLink\n    *ngIf=\"href\"\n    [href]=\"href\"\n    [target]=\"target\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (focus)=\"onItemFocus($event)\"\n    (click)=\"onItemClick($event)\"\n    (keydown)=\"onLinkKeydown($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a\n    #menuLink\n    *ngIf=\"!href\"\n    tabindex=\"0\"\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    [queryParamsHandling]=\"queryParamsHandling\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (focus)=\"onItemFocus($event)\"\n    (click)=\"onItemClick($event)\"\n    (keydown)=\"onLinkKeydown($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<button\n    eclButton\n    *ngIf=\"hasChildren && isMobileBreakpoint\"\n    variant=\"primary\"\n    class=\"ecl-menu__button-caret\"\n    type=\"button\"\n    aria-label=\"Access item's children\"\n    (click)=\"onItemCaretClick($event)\"\n    (keydown)=\"onButtonKeydown($event)\">\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n</button>\n<button\n    eclButton\n    *ngIf=\"hasChildren && !isMobileBreakpoint\"\n    variant=\"primary\"\n    class=\"ecl-menu__button-caret\"\n    type=\"button\"\n    aria-label=\"Access item's children\"\n    [attr.aria-expanded]=\"isAriaExpanded\"\n    (keydown)=\"onButtonKeydown($event)\">\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n</button>\n<ng-content select=\"ecl-menu-mega\"></ng-content>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ApplicationRef }, { type: i1.BreakpointObserver }], propDecorators: { id: [{

package/esm2022/lib/components/ecl-menu/ecl-menu/ecl-menu.component.mjs

@@ -534,13 +534,13 @@ export class EclMenuComponent extends ECLBaseDirective {
             this.isMobileBreakpoint = result.matches;
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i1.BreakpointObserver }, { token: i0.Renderer2 }, { token: i2.EclRtlService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclMenuComponent, selector: "ecl-menu", inputs: { group: "group", maxLines: "maxLines" }, outputs: { menuItemSelect: "menuItemSelect" }, host: { listeners: { "keydown": "keyEvent($event)", "window:resize": "onResize()" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isHamburgerMenuOpened", "attr.role": "this.role", "class.ecl-menu--forced-mobile": "this.isMobileBreakpoint", "class.ecl-menu--forced-close": "this.isMenuHidden" } }, queries: [{ propertyName: "eclRootMenuItems", predicate: EclMenuItemComponent }], viewQueries: [{ propertyName: "innerSection", first: true, predicate: ["innerSection"], descendants: true }, { propertyName: "itemsList", first: true, predicate: ["itemsList"], descendants: true }, { propertyName: "btnPrevious", first: true, predicate: ["btnPrevious"], descendants: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-menu__overlay\" (click)=\"onOverlayClick()\"></div>\n<div class=\"ecl-container ecl-menu__container\">\n    <a eclLink href=\"#\" variant=\"standalone\" class=\"ecl-menu__open\" (click)=\"onMenuOpenClick($event)\">\n        <ecl-icon icon=\"hamburger\" size=\"s\"></ecl-icon> {{ 'ecl.menu.MENU' | translate }}\n    </a>\n\n    <section\n        class=\"ecl-menu__inner\"\n        #innerSection\n        [class.ecl-menu__inner--expanded]=\"isMenuExpandedInMobile\"\n        [class.ecl-menu__inner--has-overflow]=\"hasOverflow\">\n        <header class=\"ecl-menu__inner-header\">\n            <button\n                eclButton\n                variant=\"ghost\"\n                class=\"ecl-menu__close\"\n                containerStyleClass=\"ecl-menu__close-container\"\n                (click)=\"onMenuCloseClick($event)\">\n                <ecl-icon icon=\"close-filled\" size=\"s\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n            </button>\n\n            <div class=\"ecl-menu__title\">{{ 'ecl.menu.MENU' | translate }}</div>\n\n            <button eclButton variant=\"ghost\" class=\"ecl-menu__back\" (click)=\"onMenuBackClick($event)\">\n                <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.BACK' | translate }}</span>\n            </button>\n        </header>\n        <button\n            eclButton\n            #btnPrevious\n            tabindex=\"-1\"\n            variant=\"ghost\"\n            class=\"ecl-menu__item ecl-menu__items-previous\"\n            [class.ecl-menu__item--current]=\"isPrevBtnCurrentClass\"\n            [style.display]=\"isShowPrevBtn ? 'block' : 'none'\"\n            (click)=\"onPrevBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.PREVIOUS' | translate }}</span>\n        </button>\n        <button\n            eclButton\n            #btnNext\n            variant=\"ghost\"\n            tabindex=\"-1\"\n            class=\"ecl-menu__item ecl-menu__items-next\"\n            [class.ecl-menu__item--current]=\"!isPrevBtnCurrentClass\"\n            [style.display]=\"isShowNextBtn ? 'block' : 'none'\"\n            (click)=\"onNextBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.NEXT' | translate }}</span>\n        </button>\n        <ul class=\"ecl-menu__list\" #itemsList [style.right]=\"menuListStyleRight\" [style.left]=\"menuListStyleLeft\">\n            <ng-content></ng-content>\n        </ul>\n    </section>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i4.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i5.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: i6.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isHiddenLabel", "isNoVisited", "variant"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i1.BreakpointObserver }, { token: i0.Renderer2 }, { token: i2.EclRtlService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclMenuComponent, selector: "ecl-menu", inputs: { group: "group", maxLines: "maxLines" }, outputs: { menuItemSelect: "menuItemSelect" }, host: { listeners: { "keydown": "keyEvent($event)", "window:resize": "onResize()" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isHamburgerMenuOpened", "attr.role": "this.role", "class.ecl-menu--forced-mobile": "this.isMobileBreakpoint", "class.ecl-menu--forced-close": "this.isMenuHidden" } }, queries: [{ propertyName: "eclRootMenuItems", predicate: EclMenuItemComponent }], viewQueries: [{ propertyName: "innerSection", first: true, predicate: ["innerSection"], descendants: true }, { propertyName: "itemsList", first: true, predicate: ["itemsList"], descendants: true }, { propertyName: "btnPrevious", first: true, predicate: ["btnPrevious"], descendants: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-menu__overlay\" (click)=\"onOverlayClick()\"></div>\n<div class=\"ecl-container ecl-menu__container\">\n    <a eclLink href=\"#\" variant=\"standalone\" class=\"ecl-menu__open\" (click)=\"onMenuOpenClick($event)\">\n        <ecl-icon icon=\"hamburger\" size=\"s\"></ecl-icon> {{ 'ecl.menu.MENU' | translate }}\n    </a>\n\n    <section\n        class=\"ecl-menu__inner\"\n        #innerSection\n        [class.ecl-menu__inner--expanded]=\"isMenuExpandedInMobile\"\n        [class.ecl-menu__inner--has-overflow]=\"hasOverflow\">\n        <header class=\"ecl-menu__inner-header\">\n            <button\n                eclButton\n                variant=\"ghost\"\n                class=\"ecl-menu__close\"\n                containerStyleClass=\"ecl-menu__close-container\"\n                (click)=\"onMenuCloseClick($event)\">\n                <ecl-icon icon=\"close-filled\" size=\"s\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n            </button>\n\n            <div class=\"ecl-menu__title\">{{ 'ecl.menu.MENU' | translate }}</div>\n\n            <button eclButton variant=\"ghost\" class=\"ecl-menu__back\" (click)=\"onMenuBackClick($event)\">\n                <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.BACK' | translate }}</span>\n            </button>\n        </header>\n        <button\n            eclButton\n            #btnPrevious\n            tabindex=\"-1\"\n            variant=\"ghost\"\n            class=\"ecl-menu__item ecl-menu__items-previous\"\n            [class.ecl-menu__item--current]=\"isPrevBtnCurrentClass\"\n            [style.display]=\"isShowPrevBtn ? 'block' : 'none'\"\n            (click)=\"onPrevBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.PREVIOUS' | translate }}</span>\n        </button>\n        <button\n            eclButton\n            #btnNext\n            variant=\"ghost\"\n            tabindex=\"-1\"\n            class=\"ecl-menu__item ecl-menu__items-next\"\n            [class.ecl-menu__item--current]=\"!isPrevBtnCurrentClass\"\n            [style.display]=\"isShowNextBtn ? 'block' : 'none'\"\n            (click)=\"onNextBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.NEXT' | translate }}</span>\n        </button>\n        <ul class=\"ecl-menu__list\" #itemsList [style.right]=\"menuListStyleRight\" [style.left]=\"menuListStyleLeft\">\n            <ng-content></ng-content>\n        </ul>\n    </section>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i4.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i5.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: i6.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isHiddenLabel", "isNoVisited", "variant"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
 }
 __decorate([
     coerceNumber
 ], EclMenuComponent.prototype, "maxLines", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-menu', template: "<div class=\"ecl-menu__overlay\" (click)=\"onOverlayClick()\"></div>\n<div class=\"ecl-container ecl-menu__container\">\n    <a eclLink href=\"#\" variant=\"standalone\" class=\"ecl-menu__open\" (click)=\"onMenuOpenClick($event)\">\n        <ecl-icon icon=\"hamburger\" size=\"s\"></ecl-icon> {{ 'ecl.menu.MENU' | translate }}\n    </a>\n\n    <section\n        class=\"ecl-menu__inner\"\n        #innerSection\n        [class.ecl-menu__inner--expanded]=\"isMenuExpandedInMobile\"\n        [class.ecl-menu__inner--has-overflow]=\"hasOverflow\">\n        <header class=\"ecl-menu__inner-header\">\n            <button\n                eclButton\n                variant=\"ghost\"\n                class=\"ecl-menu__close\"\n                containerStyleClass=\"ecl-menu__close-container\"\n                (click)=\"onMenuCloseClick($event)\">\n                <ecl-icon icon=\"close-filled\" size=\"s\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n            </button>\n\n            <div class=\"ecl-menu__title\">{{ 'ecl.menu.MENU' | translate }}</div>\n\n            <button eclButton variant=\"ghost\" class=\"ecl-menu__back\" (click)=\"onMenuBackClick($event)\">\n                <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.BACK' | translate }}</span>\n            </button>\n        </header>\n        <button\n            eclButton\n            #btnPrevious\n            tabindex=\"-1\"\n            variant=\"ghost\"\n            class=\"ecl-menu__item ecl-menu__items-previous\"\n            [class.ecl-menu__item--current]=\"isPrevBtnCurrentClass\"\n            [style.display]=\"isShowPrevBtn ? 'block' : 'none'\"\n            (click)=\"onPrevBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.PREVIOUS' | translate }}</span>\n        </button>\n        <button\n            eclButton\n            #btnNext\n            variant=\"ghost\"\n            tabindex=\"-1\"\n            class=\"ecl-menu__item ecl-menu__items-next\"\n            [class.ecl-menu__item--current]=\"!isPrevBtnCurrentClass\"\n            [style.display]=\"isShowNextBtn ? 'block' : 'none'\"\n            (click)=\"onNextBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.NEXT' | translate }}</span>\n        </button>\n        <ul class=\"ecl-menu__list\" #itemsList [style.right]=\"menuListStyleRight\" [style.left]=\"menuListStyleLeft\">\n            <ng-content></ng-content>\n        </ul>\n    </section>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: i1.BreakpointObserver }, { type: i0.Renderer2 }, { type: i2.EclRtlService }], propDecorators: { group: [{

package/esm2022/lib/components/ecl-menu/ecl-menu-mega/ecl-menu-mega-item.component.mjs

@@ -52,13 +52,13 @@ export class EclMenuMegaItemComponent extends ECLBaseDirective {
         }
         this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMenuMegaItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclMenuMegaItemComponent, selector: "ecl-menu-mega-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: "isCurrent" }, outputs: { menuItemSelect: "menuItemSelect", menuItemKeydown: "menuItemKeydown" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.ecl-menu__subitem": "this.cmpClass", "attr.role": "this.role", "class.ecl-menu__subitem--current": "this.isCurrent" } }, queries: [{ propertyName: "iconComponents", predicate: i0.forwardRef(() => EclIconComponent) }], viewQueries: [{ propertyName: "megaMenuLink", first: true, predicate: ["megaMenuLink"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<a  #megaMenuLink\n    *ngIf=\"href\"\n    [href]=\"href\"\n    [target]=\"target\"\n    class=\"ecl-menu__sublink\"\n    [class.ecl-menu__sublink--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (keydown)=\"onKeydown($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<a  #megaMenuLink\n    *ngIf=\"!href\"\n    tabindex=\"0\"\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    [queryParamsHandling]=\"queryParamsHandling\"\n    class=\"ecl-menu__sublink\"\n    [class.ecl-menu__sublink--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (keydown)=\"onKeydown($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMenuMegaItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclMenuMegaItemComponent, selector: "ecl-menu-mega-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: "isCurrent" }, outputs: { menuItemSelect: "menuItemSelect", menuItemKeydown: "menuItemKeydown" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.ecl-menu__subitem": "this.cmpClass", "attr.role": "this.role", "class.ecl-menu__subitem--current": "this.isCurrent" } }, queries: [{ propertyName: "iconComponents", predicate: i0.forwardRef(() => EclIconComponent) }], viewQueries: [{ propertyName: "megaMenuLink", first: true, predicate: ["megaMenuLink"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<a  #megaMenuLink\n    *ngIf=\"href\"\n    [href]=\"href\"\n    [target]=\"target\"\n    class=\"ecl-menu__sublink\"\n    [class.ecl-menu__sublink--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (keydown)=\"onKeydown($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<a  #megaMenuLink\n    *ngIf=\"!href\"\n    tabindex=\"0\"\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    [queryParamsHandling]=\"queryParamsHandling\"\n    class=\"ecl-menu__sublink\"\n    [class.ecl-menu__sublink--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (keydown)=\"onKeydown($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 __decorate([
     coerceBoolean
 ], EclMenuMegaItemComponent.prototype, "isCurrent", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMenuMegaItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMenuMegaItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-menu-mega-item', template: "<a  #megaMenuLink\n    *ngIf=\"href\"\n    [href]=\"href\"\n    [target]=\"target\"\n    class=\"ecl-menu__sublink\"\n    [class.ecl-menu__sublink--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (keydown)=\"onKeydown($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<a  #megaMenuLink\n    *ngIf=\"!href\"\n    tabindex=\"0\"\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    [queryParamsHandling]=\"queryParamsHandling\"\n    class=\"ecl-menu__sublink\"\n    [class.ecl-menu__sublink--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (keydown)=\"onKeydown($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:list-item}\n"] }]
         }], propDecorators: { id: [{

package/esm2022/lib/components/ecl-menu/ecl-menu-mega/ecl-menu-mega.component.mjs

@@ -124,13 +124,13 @@ export class EclMenuMegaComponent extends ECLBaseDirective {
     getMegaMenuItemsArray() {
         return this.eclMenuMegaItems.toArray();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMenuMegaComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclMenuMegaComponent, selector: "ecl-menu-mega", inputs: { isRtl: "isRtl" }, outputs: { menuItemSelect: "menuItemSelect", menuMegaItemParentFocus: "menuMegaItemParentFocus" }, host: { properties: { "class.ecl-menu__mega--rtl": "this.isRtlDisplay", "style.left.px": "this.offsetLeft", "style.right.px": "this.offsetRight", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclMenuMegaItems", predicate: EclMenuMegaItemComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ecl-menu__sublist\">\n    <ng-content></ng-content>\n</ul>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMenuMegaComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclMenuMegaComponent, selector: "ecl-menu-mega", inputs: { isRtl: "isRtl" }, outputs: { menuItemSelect: "menuItemSelect", menuMegaItemParentFocus: "menuMegaItemParentFocus" }, host: { properties: { "class.ecl-menu__mega--rtl": "this.isRtlDisplay", "style.left.px": "this.offsetLeft", "style.right.px": "this.offsetRight", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclMenuMegaItems", predicate: EclMenuMegaItemComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ecl-menu__sublist\">\n    <ng-content></ng-content>\n</ul>\n" }); }
 }
 __decorate([
     coerceBoolean
 ], EclMenuMegaComponent.prototype, "isRtl", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMenuMegaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMenuMegaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-menu-mega', template: "<ul class=\"ecl-menu__sublist\">\n    <ng-content></ng-content>\n</ul>\n" }]
         }], ctorParameters: () => [{ type: i0.IterableDiffers }, { type: i0.ElementRef }], propDecorators: { isRtl: [{

package/esm2022/lib/components/ecl-menu/ecl-menu.module.mjs

@@ -13,15 +13,15 @@ import { RouterModule } from '@angular/router';
 import * as i0 from "@angular/core";
 const COMPONENTS = [EclMenuComponent, EclMenuItemComponent, EclMenuMegaComponent, EclMenuMegaItemComponent];
 export class EclMenuComponentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMenuComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMenuComponentModule, declarations: [EclMenuComponent, EclMenuItemComponent, EclMenuMegaComponent, EclMenuMegaItemComponent], imports: [EclButtonComponentModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMenuComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMenuComponentModule, declarations: [EclMenuComponent, EclMenuItemComponent, EclMenuMegaComponent, EclMenuMegaItemComponent], imports: [EclButtonComponentModule,
             EclIconComponentModule,
             EclLinkDirectiveModule,
             CommonModule,
             RouterModule,
             LayoutModule,
             TranslateModule], exports: [EclMenuComponent, EclMenuItemComponent, EclMenuMegaComponent, EclMenuMegaItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMenuComponentModule, imports: [EclButtonComponentModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMenuComponentModule, imports: [EclButtonComponentModule,
             EclIconComponentModule,
             EclLinkDirectiveModule,
             CommonModule,
@@ -29,7 +29,7 @@ export class EclMenuComponentModule {
             LayoutModule,
             TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMenuComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMenuComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/components/ecl-modal/ecl-modal-body-fixed.directive.mjs

@@ -6,10 +6,10 @@ export class EclModalBodyFixedContentDirective extends ECLBaseDirective {
         super(...arguments);
         this.className = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalBodyFixedContentDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclModalBodyFixedContentDirective, selector: "[eclModalBodyFixedContent]", host: { properties: { "class.ecl-modal__body-fixed": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalBodyFixedContentDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclModalBodyFixedContentDirective, selector: "[eclModalBodyFixedContent]", host: { properties: { "class.ecl-modal__body-fixed": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalBodyFixedContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalBodyFixedContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclModalBodyFixedContent]',

package/esm2022/lib/components/ecl-modal/ecl-modal-body.component.mjs

@@ -13,10 +13,10 @@ export class EclModalBodyComponent extends ECLBaseDirective {
             this.isScrollable ? 'ecl-modal__body--has-scroll' : '',
         ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalBodyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.2", type: EclModalBodyComponent, selector: "[eclModalBody]", inputs: { isScrollable: ["isScrollable", "isScrollable", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "@if (isScrollable) {\n<div class=\"ecl-modal__body-scroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<div class=\"ecl-modal__body-overflow\" aria-hidden=\"true\"></div>\n<ng-content select=\"[eclModalBodyFixedContent]\"></ng-content>\n} @else {\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalBodyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: EclModalBodyComponent, selector: "[eclModalBody]", inputs: { isScrollable: ["isScrollable", "isScrollable", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "@if (isScrollable) {\n<div class=\"ecl-modal__body-scroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<div class=\"ecl-modal__body-overflow\" aria-hidden=\"true\"></div>\n<ng-content select=\"[eclModalBodyFixedContent]\"></ng-content>\n} @else {\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: '[eclModalBody]', template: "@if (isScrollable) {\n<div class=\"ecl-modal__body-scroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<div class=\"ecl-modal__body-overflow\" aria-hidden=\"true\"></div>\n<ng-content select=\"[eclModalBodyFixedContent]\"></ng-content>\n} @else {\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>" }]
         }], propDecorators: { isScrollable: [{

package/esm2022/lib/components/ecl-modal/ecl-modal-close.directive.mjs

@@ -9,10 +9,10 @@ export class EclModalCloseDirective extends ECLBaseDirective {
     onClick(evt) {
         this.modalClose.next(null);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalCloseDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclModalCloseDirective, selector: "[eclModalClose]", inputs: { eclModalResult: ["eclModalClose", "eclModalResult"], eclModalRole: "eclModalRole" }, outputs: { modalClose: "modalClose" }, host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalCloseDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclModalCloseDirective, selector: "[eclModalClose]", inputs: { eclModalResult: ["eclModalClose", "eclModalResult"], eclModalRole: "eclModalRole" }, outputs: { modalClose: "modalClose" }, host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclModalClose]',

package/esm2022/lib/components/ecl-modal/ecl-modal-footer.component.mjs

@@ -15,10 +15,10 @@ export class EclModalFooterComponent extends ECLBaseDirective {
             });
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalFooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclModalFooterComponent, selector: "[eclModalFooter]", host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(() => EclButtonComponent), descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-modal__footer-content\">\n    <ng-content></ng-content>\n</div>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalFooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclModalFooterComponent, selector: "[eclModalFooter]", host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(() => EclButtonComponent), descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-modal__footer-content\">\n    <ng-content></ng-content>\n</div>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: '[eclModalFooter]', template: "<div class=\"ecl-modal__footer-content\">\n    <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { buttonComponents: [{

package/esm2022/lib/components/ecl-modal/ecl-modal-header.component.mjs

@@ -45,10 +45,10 @@ export class EclModalHeaderComponent extends ECLBaseDirective {
             return null;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalHeaderComponent, deps: [{ token: i1.EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.2", type: EclModalHeaderComponent, selector: "[eclModalHeader]", inputs: { variant: "variant" }, outputs: { modalClose: "modalClose" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "@if(getIcon()) {\n    <ecl-icon [icon]=\"getIcon()\" size=\"l\" class=\"ecl-modal__icon\"> </ecl-icon>\n}\n<div class=\"ecl-modal__header-content\">\n    <ng-content></ng-content>\n</div>\n<button eclButton variant=\"tertiary\" isIconOnly class=\"ecl-modal__close\" type=\"button\" (click)=\"onCloseClick()\">\n    <span eclButtonLabel>Close</span>\n    <ecl-icon icon=\"getCloseIcon()\" size=\"m\"></ecl-icon>\n</button>\n", dependencies: [{ kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i4.EclButtonLabelDirective, selector: "[eclButtonLabel]" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalHeaderComponent, deps: [{ token: i1.EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: EclModalHeaderComponent, selector: "[eclModalHeader]", inputs: { variant: "variant" }, outputs: { modalClose: "modalClose" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "@if(getIcon()) {\n    <ecl-icon [icon]=\"getIcon()\" size=\"l\" class=\"ecl-modal__icon\"> </ecl-icon>\n}\n<div class=\"ecl-modal__header-content\">\n    <ng-content></ng-content>\n</div>\n<button eclButton variant=\"tertiary\" isIconOnly class=\"ecl-modal__close\" type=\"button\" (click)=\"onCloseClick()\">\n    <span eclButtonLabel>Close</span>\n    <ecl-icon icon=\"getCloseIcon()\" size=\"m\"></ecl-icon>\n</button>\n", dependencies: [{ kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i4.EclButtonLabelDirective, selector: "[eclButtonLabel]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: '[eclModalHeader]', template: "@if(getIcon()) {\n    <ecl-icon [icon]=\"getIcon()\" size=\"l\" class=\"ecl-modal__icon\"> </ecl-icon>\n}\n<div class=\"ecl-modal__header-content\">\n    <ng-content></ng-content>\n</div>\n<button eclButton variant=\"tertiary\" isIconOnly class=\"ecl-modal__close\" type=\"button\" (click)=\"onCloseClick()\">\n    <span eclButtonLabel>Close</span>\n    <ecl-icon icon=\"getCloseIcon()\" size=\"m\"></ecl-icon>\n</button>\n" }]
         }], ctorParameters: () => [{ type: i1.EclThemeService }], propDecorators: { variant: [{

package/esm2022/lib/components/ecl-modal/ecl-modal-trigger.directive.mjs

@@ -6,10 +6,10 @@ export class EclModalTriggerDirective extends ECLBaseDirective {
     onClick(evt) {
         this.eclModalTriggerFor?.openModal();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalTriggerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclModalTriggerDirective, selector: "[eclModalTriggerFor]", inputs: { eclModalTriggerFor: "eclModalTriggerFor" }, host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalTriggerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclModalTriggerDirective, selector: "[eclModalTriggerFor]", inputs: { eclModalTriggerFor: "eclModalTriggerFor" }, host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclModalTriggerFor]',

package/esm2022/lib/components/ecl-modal/ecl-modal.component.mjs

@@ -86,10 +86,10 @@ export class EclModalComponent extends ECLBaseDirective {
             }
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclModalComponent, selector: "dialog[eclModal]", inputs: { variant: "variant", isOpen: "isOpen" }, outputs: { modalClose: "modalClose", modalOpen: "modalOpen" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "attr.open": "this.isModalOpened", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclModalHeader", first: true, predicate: i0.forwardRef(() => EclModalHeaderComponent), descendants: true }, { propertyName: "eclModalCloseComponents", predicate: i0.forwardRef(() => EclModalCloseDirective), descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"ecl-modal__container ecl-container\">\n    <div class=\"ecl-modal__content ecl-col-12 ecl-col-m-8 ecl-offset-m-2 ecl-col-l-6 ecl-offset-l-3\">\n        <ng-content></ng-content>\n    </div>\n</div>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclModalComponent, selector: "dialog[eclModal]", inputs: { variant: "variant", isOpen: "isOpen" }, outputs: { modalClose: "modalClose", modalOpen: "modalOpen" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "attr.open": "this.isModalOpened", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclModalHeader", first: true, predicate: i0.forwardRef(() => EclModalHeaderComponent), descendants: true }, { propertyName: "eclModalCloseComponents", predicate: i0.forwardRef(() => EclModalCloseDirective), descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"ecl-modal__container ecl-container\">\n    <div class=\"ecl-modal__content ecl-col-12 ecl-col-m-8 ecl-offset-m-2 ecl-col-l-6 ecl-offset-l-3\">\n        <ng-content></ng-content>\n    </div>\n</div>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dialog[eclModal]', template: "<div class=\"ecl-modal__container ecl-container\">\n    <div class=\"ecl-modal__content ecl-col-12 ecl-col-m-8 ecl-offset-m-2 ecl-col-l-6 ecl-offset-l-3\">\n        <ng-content></ng-content>\n    </div>\n</div>\n" }]
         }], propDecorators: { variant: [{

package/esm2022/lib/components/ecl-modal/ecl-modal.module.mjs

@@ -20,8 +20,8 @@ const COMPONENTS = [
     EclModalTriggerDirective,
 ];
 export class EclModalComponentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalComponentModule, declarations: [EclModalComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalComponentModule, declarations: [EclModalComponent,
             EclModalHeaderComponent,
             EclModalBodyComponent,
             EclModalBodyFixedContentDirective,
@@ -34,9 +34,9 @@ export class EclModalComponentModule {
             EclModalFooterComponent,
             EclModalCloseDirective,
             EclModalTriggerDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalComponentModule, imports: [CommonModule, EclIconComponentModule, EclButtonComponentModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalComponentModule, imports: [CommonModule, EclIconComponentModule, EclButtonComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclModalComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclModalComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, EclIconComponentModule, EclButtonComponentModule],

package/esm2022/lib/components/ecl-multiselect/boldText.pipe.mjs

@@ -24,10 +24,10 @@ export class BoldTextPipe {
     clearBoldText(str) {
         return str.replace(/<[/]?b>/g, '');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: BoldTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i0, type: BoldTextPipe, name: "boldText" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: BoldTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: BoldTextPipe, name: "boldText" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: BoldTextPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: BoldTextPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'boldText',

package/esm2022/lib/components/ecl-multiselect/ecl-multiselect-dropdown/ecl-multiselect-dropdown.component.mjs

@@ -412,8 +412,8 @@ export class EclMultiselectDropdownComponent extends ECLBaseDirective {
             this.renderer.setAttribute(label, 'for', this.toggleId);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", 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: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => EclMultiselectDropdownComponent)),
@@ -427,7 +427,7 @@ __decorate([
 __decorate([
     coerceBoolean
 ], EclMultiselectDropdownComponent.prototype, "disabled", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[eclMultiselectDropdown]', providers: [
                         {

package/esm2022/lib/components/ecl-multiselect/ecl-multiselect-input/ecl-multiselect-input.component.mjs

@@ -55,8 +55,8 @@ export class EclMultiselectInputComponent extends ECLBaseDirective {
     onFocus() {
         this.inputMultiselect.nativeElement.focus();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", 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: i0, 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: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: { eclSize: "eclSize", toggleId: "toggleId", isDisabled: "isDisabled", isInvalid: "isInvalid", inputPlaceholder: "inputPlaceholder", selectedItems: "selectedItems", isDropdownExpanded: "isDropdownExpanded", ariaControls: "ariaControls", ariaDescribedby: "ariaDescribedby", ariaLabeledby: "ariaLabeledby" }, outputs: { mainInputClick: "mainInputClick", mainInputKeydown: "mainInputKeydown" }, host: { properties: { "class.ecl-select__container--disabled": "this.isDisabled", "class.ecl-select__container--invalid": "this.isInvalid", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "inputMultiselect", first: true, predicate: ["inputMultiselect"], descendants: true }], usesInheritance: true, ngImport: i0, 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: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] }); }
 }
 __decorate([
     coerceBoolean
@@ -64,7 +64,7 @@ __decorate([
 __decorate([
     coerceBoolean
 ], EclMultiselectInputComponent.prototype, "isInvalid", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectInputComponent, decorators: [{
             type: Component,
             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: [{

package/esm2022/lib/components/ecl-multiselect/ecl-multiselect-optgroup/ecl-multiselect-optgroup.component.mjs

@@ -16,10 +16,10 @@ export class EclMultiselectOptgroupComponent extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-select__multiple-group')].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectOptgroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclMultiselectOptgroupComponent, selector: "fieldset[eclMultiselectOptgroup]", inputs: { label: "label" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<legend class=\"ecl-select__multiple-group__title\">{{ label }}</legend>\n<ng-content></ng-content>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectOptgroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclMultiselectOptgroupComponent, selector: "fieldset[eclMultiselectOptgroup]", inputs: { label: "label" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<legend class=\"ecl-select__multiple-group__title\">{{ label }}</legend>\n<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectOptgroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectOptgroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fieldset[eclMultiselectOptgroup]', template: "<legend class=\"ecl-select__multiple-group__title\">{{ label }}</legend>\n<ng-content></ng-content>\n" }]
         }], propDecorators: { label: [{

package/esm2022/lib/components/ecl-multiselect/ecl-multiselect-option/ecl-multiselect-option.component.mjs

@@ -88,13 +88,13 @@ export class EclMultiselectOptionComponent extends ECLBaseDirective {
     createId() {
         return uuidgen();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", 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: i1.EclCheckboxDirective }], ngImport: i0, 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: i2.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled"] }, { kind: "directive", type: i3.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "pipe", type: i4.BoldTextPipe, name: "boldText" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: { value: "value", label: "label", disabled: "disabled", isChecked: "isChecked" }, outputs: { optionClick: "optionClick", optionKeydown: "optionKeydown" }, host: { properties: { "class.ecl-checkbox--disabled": "this.disabled", "attr.disabled": "this.disabled", "style.display": "this.display", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "eclCheckboxInput", first: true, predicate: ["checkboxInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i1.EclCheckboxDirective }], ngImport: i0, 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: i2.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled"] }, { kind: "directive", type: i3.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "pipe", type: i4.BoldTextPipe, name: "boldText" }] }); }
 }
 __decorate([
     coerceBoolean
 ], EclMultiselectOptionComponent.prototype, "disabled", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectOptionComponent, decorators: [{
             type: Component,
             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: [{

package/esm2022/lib/components/ecl-multiselect/ecl-multiselect-option.directive.mjs

@@ -29,10 +29,10 @@ export class EclMultiselectOptionDirective extends ECLBaseDirective {
     isOptGroup() {
         return this.elRef.nativeElement.nodeName === 'OPTGROUP';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclMultiselectOptionDirective, selector: "optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]", inputs: { value: "value", label: "label", disabled: "disabled", selected: "selected" }, host: { properties: { "attr.disabled": "this.disabled", "attr.selected": "this.selected", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclOptionItems", predicate: EclMultiselectOptionDirective }], usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclMultiselectOptionDirective, selector: "optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]", inputs: { value: "value", label: "label", disabled: "disabled", selected: "selected" }, host: { properties: { "attr.disabled": "this.disabled", "attr.selected": "this.selected", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclOptionItems", predicate: EclMultiselectOptionDirective }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]',

package/esm2022/lib/components/ecl-multiselect/ecl-multiselect.component.mjs

@@ -128,8 +128,8 @@ export class EclMultiselectComponent extends ECLBaseDirective {
             this.multiselectComponent.multiOptionDirectives = this.eclOptionItems.toArray();
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", 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: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => EclMultiselectComponent)),
@@ -140,7 +140,7 @@ export class EclMultiselectComponent extends ECLBaseDirective {
 __decorate([
     coerceBoolean
 ], EclMultiselectComponent.prototype, "isInvalid", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclMultiselectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclMultiselectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'select[eclMultiselect]', encapsulation: ViewEncapsulation.None, providers: [
                         {