@eui/ecl 18.0.0-next.27 → 18.0.0-next.29

package/esm2022/lib/components/ecl-tabs/ecl-tab.component.mjs

@@ -58,8 +58,8 @@ export class EclTabComponent extends ECLBaseDirective {
     onBlur() {
         this.link.el.nativeElement.blur();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTabComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTabComponent, selector: "ecl-tab, li[eclTab]", inputs: { id: "id", isHidden: "isHidden", isActive: "isActive" }, outputs: { selectTab: "selectTab", keydownTab: "keydownTab" }, host: { properties: { "attr.aria-hidden": "this.isHidden", "attr.role": "this.role", "class": "this.cssClasses" } }, queries: [{ propertyName: "label", first: true, predicate: EclTabLabelComponent, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "link", first: true, predicate: EclLinkDirective, descendants: true }], usesInheritance: true, ngImport: i0, 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: i1.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTabComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: EclTabComponent, selector: "ecl-tab, li[eclTab]", inputs: { id: "id", isHidden: "isHidden", isActive: "isActive" }, outputs: { selectTab: "selectTab", keydownTab: "keydownTab" }, host: { properties: { "attr.aria-hidden": "this.isHidden", "attr.role": "this.role", "class": "this.cssClasses" } }, queries: [{ propertyName: "label", first: true, predicate: EclTabLabelComponent, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "link", first: true, predicate: EclLinkDirective, descendants: true }], usesInheritance: true, ngImport: i0, 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: i1.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }] }); }
 }
 __decorate([
     coerceBoolean
@@ -67,7 +67,7 @@ __decorate([
 __decorate([
     coerceBoolean
 ], EclTabComponent.prototype, "isActive", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-tab, li[eclTab]', template: "<a\n    eclLink\n    role=\"tab\"\n    class=\"ecl-tabs__link\"\n    [class.ecl-tabs__link--active]=\"isActive\"\n    [attr.aria-selected]=\"isActive\"\n    tabindex=\"0\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"onTabClick()\">\n    <ng-content select=\"ecl-tab-label\"></ng-content>\n</a>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { id: [{

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

@@ -440,10 +440,10 @@ export class EclTabsComponent extends ECLBaseDirective {
         this.styleTransform = 'translate3d(0px, 0px, 0px)';
         this.index = 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTabsComponent, deps: [{ token: i0.IterableDiffers }, { token: i1.BreakpointObserver }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2.EclRtlService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTabsComponent, selector: "nav[eclTabs], ecl-tabs", inputs: { bodyClass: "bodyClass", direction: "direction" }, outputs: { tabSelect: "tabSelect" }, host: { listeners: { "document:click": "onClick($event.target)", "window:resize": "onWindowResize($event)" } }, queries: [{ propertyName: "tabs", predicate: i0.forwardRef(() => EclTabComponent) }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "moreButton", first: true, predicate: ["moreButton"], descendants: true }, { propertyName: "btnPrev", first: true, predicate: ["btnPrev"], descendants: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<nav class=\"ecl-tabs\">\n    <div class=\"ecl-tabs__container\">\n        <ul\n            class=\"ecl-tabs__list\"\n            role=\"tablist\"\n            #tabsList\n            [style.width]=\"getTabsWidthStyle()\"\n            [style.transform]=\"styleTransform\"\n            [style.transition-duration]=\"'0' || getTransitionDuration()\">\n            <ng-content select=\"ecl-tab, li[eclTab]\"></ng-content>\n            <ecl-tab-more [isHidden]=\"!isMoreButtonShow\">\n                <button\n                    #moreButton\n                    eclButton\n                    class=\"ecl-tabs__toggle\"\n                    tabindex=\"-1\"\n                    variant=\"secondary\"\n                    [attr.aria-expanded]=\"isDropdownExpanded\"\n                    [class.ecl-tabs__toggle--active]=\"isMoreButtonActive\"\n                    (click)=\"onDropdownToggle()\">\n                    <span eclButtonLabel>\n                        {{ 'ecl.common.MORE' | translate }}\n                        ({{ getHiddenTabsCount() }})\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\" size=\"fluid\"></ecl-icon>\n                </button>\n                <ul\n                    *ngIf=\"listTabs.length > 0\"\n                    class=\"ecl-tabs__dropdown\"\n                    [class.ecl-tabs__dropdown--show]=\"isDropdownExpanded\"\n                    #dropdownList>\n                    <ng-container *ngFor=\"let tab of listTabs; let i = index\">\n                        <ecl-tab\n                            [isActive]=\"tab.isActive\"\n                            [isHidden]=\"tab.isHidden\"\n                            (click)=\"onTabSelect(tab)\"\n                            (keydown.arrowRight)=\"onTabKeydownArrowRight(i)\"\n                            (keydown.arrowLeft)=\"onTabKeydownArrowLeft(i)\"\n                            (keydown.home)=\"onTabKeydownHome()\"\n                            (keydown.end)=\"onTabKeydownEnd()\"\n                            (keydown.enter)=\"onTabSelect(tab)\"\n                            (keydown.tab)=\"onTabBlur()\">\n                            <ecl-tab-label>{{ getTabLabel(i) }}</ecl-tab-label>\n                        </ecl-tab>\n                    </ng-container>\n                </ul>\n            </ecl-tab-more>\n        </ul>\n    </div>\n\n    <div class=\"ecl-tabs__controls\">\n        <button\n            #btnPrev\n            [attr.aria-hidden]=\"true\"\n            class=\"ecl-tabs__prev\"\n            [class.ecl-u-d-none]=\"!isScrollPrevBtnShow\"\n            [class.ecl-u-d-block]=\"isScrollPrevBtnShow\"\n            (click)=\"onScrollPrev()\">\n            <ecl-icon isInverted icon=\"corner-arrow\" transform=\"rotate-270\" size=\"m\" class=\"ecl-u-d-block\"> </ecl-icon>\n            <span class=\"ecl-u-sr-only\"></span>\n        </button>\n        <button\n            #btnNext\n            [attr.aria-hidden]=\"true\"\n            class=\"ecl-tabs__next\"\n            [class.ecl-u-d-none]=\"!isScrollNextBtnShow\"\n            [class.ecl-u-d-block]=\"isScrollNextBtnShow\"\n            (click)=\"onScrollNext()\">\n            <ecl-icon isInverted icon=\"corner-arrow\" color=\"inverted\" transform=\"rotate-90\" size=\"m\" class=\"ecl-u-d-block\"> </ecl-icon>\n            <span class=\"ecl-u-sr-only\"></span>\n        </button>\n    </div>\n</nav>\n\n<ng-container *ngFor=\"let tab of tabs.toArray()\">\n    <div class=\"{{ bodyClass }}\" *ngIf=\"tab.isActive\">\n        <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n    </div>\n</ng-container>\n<ng-container *ngFor=\"let tab of listTabs\">\n    <div class=\"{{ bodyClass }}\" *ngIf=\"tab.isActive\">\n        <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i5.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i6.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: i7.EclTabComponent, selector: "ecl-tab, li[eclTab]", inputs: ["id", "isHidden", "isActive"], outputs: ["selectTab", "keydownTab"] }, { kind: "component", type: i8.EclTabLabelComponent, selector: "ecl-tab-label" }, { kind: "component", type: i9.EclTabMoreComponent, selector: "ecl-tab-more", inputs: ["isHidden"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTabsComponent, deps: [{ token: i0.IterableDiffers }, { token: i1.BreakpointObserver }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2.EclRtlService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: EclTabsComponent, selector: "nav[eclTabs], ecl-tabs", inputs: { bodyClass: "bodyClass", direction: "direction" }, outputs: { tabSelect: "tabSelect" }, host: { listeners: { "document:click": "onClick($event.target)", "window:resize": "onWindowResize($event)" } }, queries: [{ propertyName: "tabs", predicate: i0.forwardRef(() => EclTabComponent) }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "moreButton", first: true, predicate: ["moreButton"], descendants: true }, { propertyName: "btnPrev", first: true, predicate: ["btnPrev"], descendants: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<nav class=\"ecl-tabs\">\n    <div class=\"ecl-tabs__container\">\n        <ul\n            class=\"ecl-tabs__list\"\n            role=\"tablist\"\n            #tabsList\n            [style.width]=\"getTabsWidthStyle()\"\n            [style.transform]=\"styleTransform\"\n            [style.transition-duration]=\"'0' || getTransitionDuration()\">\n            <ng-content select=\"ecl-tab, li[eclTab]\"></ng-content>\n            <ecl-tab-more [isHidden]=\"!isMoreButtonShow\">\n                <button\n                    #moreButton\n                    eclButton\n                    class=\"ecl-tabs__toggle\"\n                    tabindex=\"-1\"\n                    variant=\"secondary\"\n                    [attr.aria-expanded]=\"isDropdownExpanded\"\n                    [class.ecl-tabs__toggle--active]=\"isMoreButtonActive\"\n                    (click)=\"onDropdownToggle()\">\n                    <span eclButtonLabel>\n                        {{ 'ecl.common.MORE' | translate }}\n                        ({{ getHiddenTabsCount() }})\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\" size=\"fluid\"></ecl-icon>\n                </button>\n                <ul\n                    *ngIf=\"listTabs.length > 0\"\n                    class=\"ecl-tabs__dropdown\"\n                    [class.ecl-tabs__dropdown--show]=\"isDropdownExpanded\"\n                    #dropdownList>\n                    <ng-container *ngFor=\"let tab of listTabs; let i = index\">\n                        <ecl-tab\n                            [isActive]=\"tab.isActive\"\n                            [isHidden]=\"tab.isHidden\"\n                            (click)=\"onTabSelect(tab)\"\n                            (keydown.arrowRight)=\"onTabKeydownArrowRight(i)\"\n                            (keydown.arrowLeft)=\"onTabKeydownArrowLeft(i)\"\n                            (keydown.home)=\"onTabKeydownHome()\"\n                            (keydown.end)=\"onTabKeydownEnd()\"\n                            (keydown.enter)=\"onTabSelect(tab)\"\n                            (keydown.tab)=\"onTabBlur()\">\n                            <ecl-tab-label>{{ getTabLabel(i) }}</ecl-tab-label>\n                        </ecl-tab>\n                    </ng-container>\n                </ul>\n            </ecl-tab-more>\n        </ul>\n    </div>\n\n    <div class=\"ecl-tabs__controls\">\n        <button\n            #btnPrev\n            [attr.aria-hidden]=\"true\"\n            class=\"ecl-tabs__prev\"\n            [class.ecl-u-d-none]=\"!isScrollPrevBtnShow\"\n            [class.ecl-u-d-block]=\"isScrollPrevBtnShow\"\n            (click)=\"onScrollPrev()\">\n            <ecl-icon isInverted icon=\"corner-arrow\" transform=\"rotate-270\" size=\"m\" class=\"ecl-u-d-block\"> </ecl-icon>\n            <span class=\"ecl-u-sr-only\"></span>\n        </button>\n        <button\n            #btnNext\n            [attr.aria-hidden]=\"true\"\n            class=\"ecl-tabs__next\"\n            [class.ecl-u-d-none]=\"!isScrollNextBtnShow\"\n            [class.ecl-u-d-block]=\"isScrollNextBtnShow\"\n            (click)=\"onScrollNext()\">\n            <ecl-icon isInverted icon=\"corner-arrow\" color=\"inverted\" transform=\"rotate-90\" size=\"m\" class=\"ecl-u-d-block\"> </ecl-icon>\n            <span class=\"ecl-u-sr-only\"></span>\n        </button>\n    </div>\n</nav>\n\n<ng-container *ngFor=\"let tab of tabs.toArray()\">\n    <div class=\"{{ bodyClass }}\" *ngIf=\"tab.isActive\">\n        <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n    </div>\n</ng-container>\n<ng-container *ngFor=\"let tab of listTabs\">\n    <div class=\"{{ bodyClass }}\" *ngIf=\"tab.isActive\">\n        <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i5.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i6.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: i7.EclTabComponent, selector: "ecl-tab, li[eclTab]", inputs: ["id", "isHidden", "isActive"], outputs: ["selectTab", "keydownTab"] }, { kind: "component", type: i8.EclTabLabelComponent, selector: "ecl-tab-label" }, { kind: "component", type: i9.EclTabMoreComponent, selector: "ecl-tab-more", inputs: ["isHidden"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nav[eclTabs], ecl-tabs', encapsulation: ViewEncapsulation.None, template: "<nav class=\"ecl-tabs\">\n    <div class=\"ecl-tabs__container\">\n        <ul\n            class=\"ecl-tabs__list\"\n            role=\"tablist\"\n            #tabsList\n            [style.width]=\"getTabsWidthStyle()\"\n            [style.transform]=\"styleTransform\"\n            [style.transition-duration]=\"'0' || getTransitionDuration()\">\n            <ng-content select=\"ecl-tab, li[eclTab]\"></ng-content>\n            <ecl-tab-more [isHidden]=\"!isMoreButtonShow\">\n                <button\n                    #moreButton\n                    eclButton\n                    class=\"ecl-tabs__toggle\"\n                    tabindex=\"-1\"\n                    variant=\"secondary\"\n                    [attr.aria-expanded]=\"isDropdownExpanded\"\n                    [class.ecl-tabs__toggle--active]=\"isMoreButtonActive\"\n                    (click)=\"onDropdownToggle()\">\n                    <span eclButtonLabel>\n                        {{ 'ecl.common.MORE' | translate }}\n                        ({{ getHiddenTabsCount() }})\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\" size=\"fluid\"></ecl-icon>\n                </button>\n                <ul\n                    *ngIf=\"listTabs.length > 0\"\n                    class=\"ecl-tabs__dropdown\"\n                    [class.ecl-tabs__dropdown--show]=\"isDropdownExpanded\"\n                    #dropdownList>\n                    <ng-container *ngFor=\"let tab of listTabs; let i = index\">\n                        <ecl-tab\n                            [isActive]=\"tab.isActive\"\n                            [isHidden]=\"tab.isHidden\"\n                            (click)=\"onTabSelect(tab)\"\n                            (keydown.arrowRight)=\"onTabKeydownArrowRight(i)\"\n                            (keydown.arrowLeft)=\"onTabKeydownArrowLeft(i)\"\n                            (keydown.home)=\"onTabKeydownHome()\"\n                            (keydown.end)=\"onTabKeydownEnd()\"\n                            (keydown.enter)=\"onTabSelect(tab)\"\n                            (keydown.tab)=\"onTabBlur()\">\n                            <ecl-tab-label>{{ getTabLabel(i) }}</ecl-tab-label>\n                        </ecl-tab>\n                    </ng-container>\n                </ul>\n            </ecl-tab-more>\n        </ul>\n    </div>\n\n    <div class=\"ecl-tabs__controls\">\n        <button\n            #btnPrev\n            [attr.aria-hidden]=\"true\"\n            class=\"ecl-tabs__prev\"\n            [class.ecl-u-d-none]=\"!isScrollPrevBtnShow\"\n            [class.ecl-u-d-block]=\"isScrollPrevBtnShow\"\n            (click)=\"onScrollPrev()\">\n            <ecl-icon isInverted icon=\"corner-arrow\" transform=\"rotate-270\" size=\"m\" class=\"ecl-u-d-block\"> </ecl-icon>\n            <span class=\"ecl-u-sr-only\"></span>\n        </button>\n        <button\n            #btnNext\n            [attr.aria-hidden]=\"true\"\n            class=\"ecl-tabs__next\"\n            [class.ecl-u-d-none]=\"!isScrollNextBtnShow\"\n            [class.ecl-u-d-block]=\"isScrollNextBtnShow\"\n            (click)=\"onScrollNext()\">\n            <ecl-icon isInverted icon=\"corner-arrow\" color=\"inverted\" transform=\"rotate-90\" size=\"m\" class=\"ecl-u-d-block\"> </ecl-icon>\n            <span class=\"ecl-u-sr-only\"></span>\n        </button>\n    </div>\n</nav>\n\n<ng-container *ngFor=\"let tab of tabs.toArray()\">\n    <div class=\"{{ bodyClass }}\" *ngIf=\"tab.isActive\">\n        <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n    </div>\n</ng-container>\n<ng-container *ngFor=\"let tab of listTabs\">\n    <div class=\"{{ bodyClass }}\" *ngIf=\"tab.isActive\">\n        <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n    </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i0.IterableDiffers }, { type: i1.BreakpointObserver }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i2.EclRtlService }], propDecorators: { bodyClass: [{

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

@@ -12,20 +12,20 @@ import { ECLClickOutsideDirective } from '../../utils';
 import * as i0 from "@angular/core";
 const COMPONENTS = [EclTabsComponent, EclTabComponent, EclTabLabelComponent, EclTabMoreComponent];
 export class EclTabsComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTabsComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTabsComponentModule, declarations: [EclTabsComponent, EclTabComponent, EclTabLabelComponent, EclTabMoreComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTabsComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTabsComponentModule, declarations: [EclTabsComponent, EclTabComponent, EclTabLabelComponent, EclTabMoreComponent], imports: [CommonModule,
             EclLinkDirectiveModule,
             EclButtonComponentModule,
             EclIconComponentModule,
             TranslateModule,
             ECLClickOutsideDirective], exports: [EclTabsComponent, EclTabComponent, EclTabLabelComponent, EclTabMoreComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTabsComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTabsComponentModule, imports: [CommonModule,
             EclLinkDirectiveModule,
             EclButtonComponentModule,
             EclIconComponentModule,
             TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTabsComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTabsComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/components/ecl-tag/ecl-tag-set.directive.mjs

@@ -5,10 +5,10 @@ export class EclTagSetDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-tag-set')].join(' ').trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTagSetDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTagSetDirective, selector: "[eclTagSet]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTagSetDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: EclTagSetDirective, selector: "[eclTagSet]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTagSetDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTagSetDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTagSet]',

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

@@ -33,10 +33,10 @@ export class EclTagComponent extends ECLBaseDirective {
             this.isVisible = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.3", type: EclTagComponent, selector: "ecl-tag, [eclTag]", inputs: { variant: "variant", isWrapped: ["isWrapped", "isWrapped", booleanAttribute] }, outputs: { remove: "remove" }, host: { properties: { "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, 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: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: EclTagComponent, selector: "ecl-tag, [eclTag]", inputs: { variant: "variant", isWrapped: ["isWrapped", "isWrapped", booleanAttribute] }, outputs: { remove: "remove" }, host: { properties: { "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, 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: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTagComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-tag, [eclTag]', template: "<ng-content></ng-content>\n@if(isRemovable) {\n    <span class=\"ecl-tag__icon\" (click)=\"onRemoveClick($event)\">\n    <ecl-icon icon=\"close-outline\" class=\"ecl-tag__icon-close\" role=\"img\">\n        <title>{{title | titlecase}}</title>\n    </ecl-icon>\n</span>\n}\n" }]
         }], propDecorators: { variant: [{

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

@@ -5,11 +5,11 @@ import { EclTagComponent } from './ecl-tag.component';
 import { EclTagSetDirective } from './ecl-tag-set.directive';
 import * as i0 from "@angular/core";
 export class EclTagComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTagComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTagComponentModule, declarations: [EclTagComponent, EclTagSetDirective], imports: [CommonModule, EclIconComponentModule], exports: [EclTagComponent, EclTagSetDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTagComponentModule, imports: [CommonModule, EclIconComponentModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTagComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTagComponentModule, declarations: [EclTagComponent, EclTagSetDirective], imports: [CommonModule, EclIconComponentModule], exports: [EclTagComponent, EclTagSetDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTagComponentModule, imports: [CommonModule, EclIconComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTagComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTagComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, EclIconComponentModule],

package/esm2022/lib/components/ecl-text-area/ecl-text-area.directive.mjs

@@ -23,13 +23,13 @@ export class EclTextAreaDirective extends ECLBaseDirective {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.isInvalid = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTextAreaDirective, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTextAreaDirective, selector: "textarea[eclTextArea]", inputs: { eclSize: "eclSize", isInvalid: "isInvalid" }, host: { properties: { "class": "this.cssClasses", "class.ecl-text-area--invalid": "this.invalidState" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTextAreaDirective, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: EclTextAreaDirective, selector: "textarea[eclTextArea]", inputs: { eclSize: "eclSize", isInvalid: "isInvalid" }, host: { properties: { "class": "this.cssClasses", "class.ecl-text-area--invalid": "this.invalidState" } }, usesInheritance: true, ngImport: i0 }); }
 }
 __decorate([
     coerceBoolean
 ], EclTextAreaDirective.prototype, "isInvalid", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTextAreaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTextAreaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'textarea[eclTextArea]',

package/esm2022/lib/components/ecl-text-area/ecl-text-area.module.mjs

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { EclTextAreaDirective } from './ecl-text-area.directive';
 import * as i0 from "@angular/core";
 export class EclTextAreaDirectiveModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTextAreaDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTextAreaDirectiveModule, declarations: [EclTextAreaDirective], imports: [CommonModule], exports: [EclTextAreaDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTextAreaDirectiveModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTextAreaDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTextAreaDirectiveModule, declarations: [EclTextAreaDirective], imports: [CommonModule], exports: [EclTextAreaDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTextAreaDirectiveModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTextAreaDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTextAreaDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/esm2022/lib/components/ecl-text-input/ecl-text-input.directive.mjs

@@ -23,13 +23,13 @@ export class EclTextInputDirective extends ECLBaseDirective {
             return this.isInvalid;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTextInputDirective, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTextInputDirective, isStandalone: true, selector: "input[eclTextInput]", inputs: { eclSize: "eclSize", isInvalid: "isInvalid" }, host: { properties: { "attr.type": "this.type", "class": "this.cssClasses", "class.ecl-text-input--invalid": "this.invalidState" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTextInputDirective, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: EclTextInputDirective, isStandalone: true, selector: "input[eclTextInput]", inputs: { eclSize: "eclSize", isInvalid: "isInvalid" }, host: { properties: { "attr.type": "this.type", "class": "this.cssClasses", "class.ecl-text-input--invalid": "this.invalidState" } }, usesInheritance: true, ngImport: i0 }); }
 }
 __decorate([
     coerceBoolean
 ], EclTextInputDirective.prototype, "isInvalid", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTextInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTextInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[eclTextInput]',

package/esm2022/lib/components/ecl-text-input/ecl-text-input.module.mjs

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { EclTextInputDirective } from './ecl-text-input.directive';
 import * as i0 from "@angular/core";
 export class EclTextInputDirectiveModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTextInputDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTextInputDirectiveModule, imports: [CommonModule, EclTextInputDirective], exports: [EclTextInputDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTextInputDirectiveModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTextInputDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTextInputDirectiveModule, imports: [CommonModule, EclTextInputDirective], exports: [EclTextInputDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTextInputDirectiveModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTextInputDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTextInputDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, EclTextInputDirective],

package/esm2022/lib/components/ecl-timeline/ecl-timeline-item-label.directive.mjs

@@ -5,10 +5,10 @@ export class EclTimelineItemLabelDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-timeline__label')].join(' ').trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTimelineItemLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTimelineItemLabelDirective, selector: "[eclTimelineItemLabel]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTimelineItemLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: EclTimelineItemLabelDirective, selector: "[eclTimelineItemLabel]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTimelineItemLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTimelineItemLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTimelineItemLabel]',

package/esm2022/lib/components/ecl-timeline/ecl-timeline-item-title.directive.mjs

@@ -5,10 +5,10 @@ export class EclTimelineItemTitleDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-timeline__title')].join(' ').trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTimelineItemTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTimelineItemTitleDirective, selector: "[eclTimelineItemTitle]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTimelineItemTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: EclTimelineItemTitleDirective, selector: "[eclTimelineItemTitle]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTimelineItemTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTimelineItemTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTimelineItemTitle]',

package/esm2022/lib/components/ecl-timeline/ecl-timeline-item-toggler.component.mjs

@@ -9,10 +9,10 @@ export class EclTimelineItemTogglerComponent extends ECLBaseDirective {
     onTogglerClick() {
         this.toggle.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTimelineItemTogglerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTimelineItemTogglerComponent, selector: "ecl-timeline-item-toggler", outputs: { toggle: "toggle" }, host: { listeners: { "click": "onTogglerClick()" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTimelineItemTogglerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: EclTimelineItemTogglerComponent, selector: "ecl-timeline-item-toggler", outputs: { toggle: "toggle" }, host: { listeners: { "click": "onTogglerClick()" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTimelineItemTogglerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTimelineItemTogglerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-timeline-item-toggler', template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { toggle: [{

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

@@ -66,13 +66,13 @@ export class EclTimelineItemComponent extends ECLBaseDirective {
             this.isTogglerExpanded = nextExpandedState;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTimelineItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTimelineItemComponent, selector: "ecl-timeline-item", inputs: { label: "label", eclTitle: "eclTitle", toggleButtonLabel: "toggleButtonLabel", expandLabel: "expandLabel", collapseLabel: "collapseLabel", isTogglerExpanded: "isTogglerExpanded", isCollapsed: "isCollapsed", isToggler: "isToggler", toggleGroup: "toggleGroup" }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses", "class.ecl-timeline__item--collapsed": "this.isCollapsed", "class.ecl-timeline__item--toggle": "this.isToggler" } }, queries: [{ propertyName: "timelineItemToggler", first: true, predicate: i0.forwardRef(() => EclTimelineItemTogglerComponent), descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-timeline__tooltip\" *ngIf=\"!isToggler\">\n    <div class=\"ecl-timeline__tooltip-arrow\"></div>\n    <div *ngIf=\"label\" class=\"ecl-timeline__label\">{{ label }}</div>\n    <ng-content select=\"[eclTimelineItemLabel]\"></ng-content>\n\n    <div *ngIf=\"eclTitle\" class=\"ecl-timeline__title\">{{ eclTitle }}</div>\n    <ng-content select=\"[eclTimelineItemTitle]\"></ng-content>\n\n    <div class=\"ecl-timeline__content\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n</div>\n\n<div class=\"ecl-timeline__content\" *ngIf=\"isToggler\">\n    <button eclButton *ngIf=\"hasDefaultToggler()\" (click)=\"onTogglerClick($event)\" variant=\"secondary\">\n        <span eclButtonLabel *ngIf=\"isShowExpandLabel\">\n            {{ expandLabel }}\n        </span>\n        <span eclButtonLabel *ngIf=\"isShowCollapseLabel\">\n            {{ collapseLabel }}\n        </span>\n        <span eclButtonLabel *ngIf=\"isShowOneToggleLabel\">\n            {{ toggleButtonLabel || 'ecl.timeline.TOGGLE-ITEMS' | translate }}\n        </span>\n        <ecl-icon icon=\"corner-arrow\" size=\"fluid\" [transform]=\"!isTogglerExpanded ? 'rotate-180' : ''\"></ecl-icon>\n    </button>\n\n    <ng-content select=\"ecl-timeline-item-toggler\"></ng-content>\n\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: ["ecl-timeline-item{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: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i4.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTimelineItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: EclTimelineItemComponent, selector: "ecl-timeline-item", inputs: { label: "label", eclTitle: "eclTitle", toggleButtonLabel: "toggleButtonLabel", expandLabel: "expandLabel", collapseLabel: "collapseLabel", isTogglerExpanded: "isTogglerExpanded", isCollapsed: "isCollapsed", isToggler: "isToggler", toggleGroup: "toggleGroup" }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses", "class.ecl-timeline__item--collapsed": "this.isCollapsed", "class.ecl-timeline__item--toggle": "this.isToggler" } }, queries: [{ propertyName: "timelineItemToggler", first: true, predicate: i0.forwardRef(() => EclTimelineItemTogglerComponent), descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-timeline__tooltip\" *ngIf=\"!isToggler\">\n    <div class=\"ecl-timeline__tooltip-arrow\"></div>\n    <div *ngIf=\"label\" class=\"ecl-timeline__label\">{{ label }}</div>\n    <ng-content select=\"[eclTimelineItemLabel]\"></ng-content>\n\n    <div *ngIf=\"eclTitle\" class=\"ecl-timeline__title\">{{ eclTitle }}</div>\n    <ng-content select=\"[eclTimelineItemTitle]\"></ng-content>\n\n    <div class=\"ecl-timeline__content\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n</div>\n\n<div class=\"ecl-timeline__content\" *ngIf=\"isToggler\">\n    <button eclButton *ngIf=\"hasDefaultToggler()\" (click)=\"onTogglerClick($event)\" variant=\"secondary\">\n        <span eclButtonLabel *ngIf=\"isShowExpandLabel\">\n            {{ expandLabel }}\n        </span>\n        <span eclButtonLabel *ngIf=\"isShowCollapseLabel\">\n            {{ collapseLabel }}\n        </span>\n        <span eclButtonLabel *ngIf=\"isShowOneToggleLabel\">\n            {{ toggleButtonLabel || 'ecl.timeline.TOGGLE-ITEMS' | translate }}\n        </span>\n        <ecl-icon icon=\"corner-arrow\" size=\"fluid\" [transform]=\"!isTogglerExpanded ? 'rotate-180' : ''\"></ecl-icon>\n    </button>\n\n    <ng-content select=\"ecl-timeline-item-toggler\"></ng-content>\n\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: ["ecl-timeline-item{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: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i4.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     coerceBoolean
 ], EclTimelineItemComponent.prototype, "isTogglerExpanded", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTimelineItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTimelineItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-timeline-item', encapsulation: ViewEncapsulation.None, template: "<div class=\"ecl-timeline__tooltip\" *ngIf=\"!isToggler\">\n    <div class=\"ecl-timeline__tooltip-arrow\"></div>\n    <div *ngIf=\"label\" class=\"ecl-timeline__label\">{{ label }}</div>\n    <ng-content select=\"[eclTimelineItemLabel]\"></ng-content>\n\n    <div *ngIf=\"eclTitle\" class=\"ecl-timeline__title\">{{ eclTitle }}</div>\n    <ng-content select=\"[eclTimelineItemTitle]\"></ng-content>\n\n    <div class=\"ecl-timeline__content\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n</div>\n\n<div class=\"ecl-timeline__content\" *ngIf=\"isToggler\">\n    <button eclButton *ngIf=\"hasDefaultToggler()\" (click)=\"onTogglerClick($event)\" variant=\"secondary\">\n        <span eclButtonLabel *ngIf=\"isShowExpandLabel\">\n            {{ expandLabel }}\n        </span>\n        <span eclButtonLabel *ngIf=\"isShowCollapseLabel\">\n            {{ collapseLabel }}\n        </span>\n        <span eclButtonLabel *ngIf=\"isShowOneToggleLabel\">\n            {{ toggleButtonLabel || 'ecl.timeline.TOGGLE-ITEMS' | translate }}\n        </span>\n        <ecl-icon icon=\"corner-arrow\" size=\"fluid\" [transform]=\"!isTogglerExpanded ? 'rotate-180' : ''\"></ecl-icon>\n    </button>\n\n    <ng-content select=\"ecl-timeline-item-toggler\"></ng-content>\n\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: ["ecl-timeline-item{display:list-item}\n"] }]
         }], propDecorators: { label: [{

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

@@ -33,10 +33,10 @@ export class EclTimelineComponent extends ECLBaseDirective {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTimelineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTimelineComponent, selector: "ecl-timeline", host: { properties: { "attr.role": "this.attrRole", "class": "this.cssClasses" } }, queries: [{ propertyName: "timelineItems", predicate: i0.forwardRef(() => EclTimelineItemComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTimelineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: EclTimelineComponent, selector: "ecl-timeline", host: { properties: { "attr.role": "this.attrRole", "class": "this.cssClasses" } }, queries: [{ propertyName: "timelineItems", predicate: i0.forwardRef(() => EclTimelineItemComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTimelineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTimelineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-timeline', template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { attrRole: [{

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

@@ -10,8 +10,8 @@ import { EclTimelineItemComponent } from './ecl-timeline-item.component';
 import { EclTimelineComponent } from './ecl-timeline.component';
 import * as i0 from "@angular/core";
 export class EclTimelineComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTimelineComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTimelineComponentModule, declarations: [EclTimelineComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTimelineComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTimelineComponentModule, declarations: [EclTimelineComponent,
             EclTimelineItemComponent,
             EclTimelineItemTogglerComponent,
             EclTimelineItemLabelDirective,
@@ -20,9 +20,9 @@ export class EclTimelineComponentModule {
             EclTimelineItemTogglerComponent,
             EclTimelineItemLabelDirective,
             EclTimelineItemTitleDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTimelineComponentModule, imports: [CommonModule, TranslateModule, EclButtonComponentModule, EclIconComponentModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTimelineComponentModule, imports: [CommonModule, TranslateModule, EclButtonComponentModule, EclIconComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTimelineComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclTimelineComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, TranslateModule, EclButtonComponentModule, EclIconComponentModule],

package/esm2022/lib/services/ecl-default-language.service.mjs

@@ -280,10 +280,10 @@ export class EclDefaultLanguageService {
             this.currentLanguage$.next(this.currentLanguage);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclDefaultLanguageService, deps: [{ token: GLOBAL_CONFIG_TOKEN, optional: true }, { token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclDefaultLanguageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclDefaultLanguageService, deps: [{ token: GLOBAL_CONFIG_TOKEN, optional: true }, { token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclDefaultLanguageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclDefaultLanguageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclDefaultLanguageService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{

package/esm2022/lib/services/ecl-rtl.service.mjs

@@ -64,10 +64,10 @@ export class EclRtlService {
             themeLink.media = 'max-width: 1px';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclRtlService, deps: [{ token: DOCUMENT }, { token: i1.EclThemeService }, { token: i2.EclDefaultLanguageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclRtlService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclRtlService, deps: [{ token: DOCUMENT }, { token: i1.EclThemeService }, { token: i2.EclDefaultLanguageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclRtlService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclRtlService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclRtlService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: Document, decorators: [{

package/esm2022/lib/services/ecl-theme.service.mjs

@@ -31,10 +31,10 @@ export class EclThemeService {
         this.theme = theme;
         this.themeSubject.next(theme);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclThemeService, deps: [{ token: GLOBAL_CONFIG_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclThemeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclThemeService, deps: [{ token: GLOBAL_CONFIG_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclThemeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclThemeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{

package/esm2022/lib/shared/ecl-all.module.mjs

@@ -121,8 +121,8 @@ const MODULES = [
     EclPopoverComponentModule,
 ];
 export class EclAllModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclAllModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclAllModule, imports: [EclAccordionComponentModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclAllModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclAllModule, imports: [EclAccordionComponentModule,
             EclAppComponentModule,
             EclBannerComponentModule,
             EclBlockquoteComponentModule,
@@ -237,7 +237,7 @@ export class EclAllModule {
             EclTextInputDirectiveModule,
             EclTimelineComponentModule,
             EclPopoverComponentModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclAllModule, providers: [{ provide: EclLanguageService, useClass: EclDefaultLanguageService }], imports: [MODULES, EclAccordionComponentModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclAllModule, providers: [{ provide: EclLanguageService, useClass: EclDefaultLanguageService }], imports: [MODULES, EclAccordionComponentModule,
             EclAppComponentModule,
             EclBannerComponentModule,
             EclBlockquoteComponentModule,
@@ -296,7 +296,7 @@ export class EclAllModule {
             EclTimelineComponentModule,
             EclPopoverComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclAllModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclAllModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES],

package/esm2022/lib/utils/directives/ecl-click-outside/ecl-click-outside.directive.mjs

@@ -13,10 +13,10 @@ export class ECLClickOutsideDirective extends ECLBaseDirective {
             this.eclClickOutside.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: ECLClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: ECLClickOutsideDirective, isStandalone: true, selector: "[eclClickOutside]", outputs: { eclClickOutside: "eclClickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: ECLClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: ECLClickOutsideDirective, isStandalone: true, selector: "[eclClickOutside]", outputs: { eclClickOutside: "eclClickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: ECLClickOutsideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: ECLClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclClickOutside]',

package/esm2022/lib/utils/directives/ecl-hidden/ecl-hidden.directive.mjs

@@ -6,10 +6,10 @@ export class EclHiddenDirective extends ECLBaseDirective {
         super(...arguments);
         this.isHidden = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclHiddenDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclHiddenDirective, selector: "[eclHidden]", inputs: { isHidden: ["eclHidden", "isHidden"] }, host: { properties: { "class.ecl-u-d-none": "this.isHidden" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclHiddenDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: EclHiddenDirective, selector: "[eclHidden]", inputs: { isHidden: ["eclHidden", "isHidden"] }, host: { properties: { "class.ecl-u-d-none": "this.isHidden" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclHiddenDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclHiddenDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclHidden]',

package/esm2022/lib/utils/directives/ecl-hidden/ecl-hidden.module.mjs

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { EclHiddenDirective } from './ecl-hidden.directive';
 import * as i0 from "@angular/core";
 export class EclHiddenModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclHiddenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclHiddenModule, declarations: [EclHiddenDirective], imports: [CommonModule], exports: [EclHiddenDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclHiddenModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclHiddenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclHiddenModule, declarations: [EclHiddenDirective], imports: [CommonModule], exports: [EclHiddenDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclHiddenModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclHiddenModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EclHiddenModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],