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

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

@@ -1,16 +1,12 @@
 import { __decorate } from "tslib";
 import { Component, HostBinding, Input } from '@angular/core';
+import { Subject, delay } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { coerceBoolean } from '@eui/base';
 import { ECLBaseDirective } from '../ecl-base.directive';
 import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/layout";
 export class EclStickyContainerComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.isEnabled = true;
-        this.marginTop = 0;
-        this.marginBottom = 0;
-    }
     get cssClasses() {
         return [super.getCssClasses('ecl-sticky-container'), !this.isEnabled ? 'ecl-sticky-container--disabled' : ''].join(' ').trim();
     }
@@ -20,16 +16,48 @@ export class EclStickyContainerComponent extends ECLBaseDirective {
     get bottom() {
         return this.marginBottom || null;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclStickyContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: { isEnabled: "isEnabled", marginTop: "marginTop", marginBottom: "marginBottom" }, host: { properties: { "class": "this.cssClasses", "style.top.px": "this.top", "style.bottom.px": "this.bottom" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;align-self:flex-start;top:0;z-index:10;position:sticky;position:-webkit-sticky}:host.ecl-sticky-container--disabled{position:static}\n"] }); }
+    constructor(cdkBreakpointObserver, renderer, el) {
+        super();
+        this.cdkBreakpointObserver = cdkBreakpointObserver;
+        this.renderer = renderer;
+        this.el = el;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.isEnabled = true;
+        this.marginTop = 0;
+        this.marginBottom = 0;
+        this.destroy$ = new Subject();
+        this.BREAKPOINT_CHANGES_TIMEOUT = 500;
+    }
+    ngOnInit() {
+        this.observeBreakpointChanges();
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    observeBreakpointChanges() {
+        this.cdkBreakpointObserver
+            .observe('(max-width: 996px)')
+            .pipe(takeUntil(this.destroy$), delay(this.BREAKPOINT_CHANGES_TIMEOUT))
+            .subscribe((result) => {
+            if (result.matches) {
+                this.renderer.setStyle(this.el.nativeElement, 'z-index', '10');
+            }
+            else {
+                this.renderer.removeStyle(this.el.nativeElement, 'z-index');
+            }
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclStickyContainerComponent, deps: [{ token: i1.BreakpointObserver }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: { isEnabled: "isEnabled", marginTop: "marginTop", marginBottom: "marginBottom" }, host: { properties: { "class": "this.cssClasses", "style.top.px": "this.top", "style.bottom.px": "this.bottom" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;align-self:flex-start;top:0;position:sticky;position:-webkit-sticky}:host.ecl-sticky-container--disabled{position:static}\n"] }); }
 }
 __decorate([
     coerceBoolean
 ], EclStickyContainerComponent.prototype, "isEnabled", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclStickyContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclStickyContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-sticky-container', template: "<ng-content></ng-content>\n", styles: [":host{display:block;align-self:flex-start;top:0;z-index:10;position:sticky;position:-webkit-sticky}:host.ecl-sticky-container--disabled{position:static}\n"] }]
-        }], propDecorators: { isEnabled: [{
+            args: [{ selector: 'ecl-sticky-container', template: "<ng-content></ng-content>\n", styles: [":host{display:block;align-self:flex-start;top:0;position:sticky;position:-webkit-sticky}:host.ecl-sticky-container--disabled{position:static}\n"] }]
+        }], ctorParameters: () => [{ type: i1.BreakpointObserver }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { isEnabled: [{
                 type: Input
             }], marginTop: [{
                 type: Input
@@ -45,4 +73,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2",
                 type: HostBinding,
                 args: ['style.bottom.px']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWNsLXN0aWNreS1jb250YWluZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL2VjbC1zdGlja3ktY29udGFpbmVyL2VjbC1zdGlja3ktY29udGFpbmVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9lY2wtc3RpY2t5LWNvbnRhaW5lci9lY2wtc3RpY2t5LWNvbnRhaW5lci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzlELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFDMUMsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7O0FBc0J6RCxNQUFNLE9BQU8sMkJBQTRCLFNBQVEsZ0JBQWdCO0lBcEJqRTs7UUFxQkksOERBQThEO1FBQ3RDLGNBQVMsR0FBa0IsSUFBSSxDQUFDO1FBQy9DLGNBQVMsR0FBRyxDQUFDLENBQUM7UUFDZCxpQkFBWSxHQUFHLENBQUMsQ0FBQztLQWdCN0I7SUFkRyxJQUNJLFVBQVU7UUFDVixPQUFPLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQyxzQkFBc0IsQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsZ0NBQWdDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUNuSSxDQUFDO0lBRUQsSUFDSSxHQUFHO1FBQ0gsT0FBTyxJQUFJLENBQUMsU0FBUyxJQUFJLElBQUksQ0FBQztJQUNsQyxDQUFDO0lBRUQsSUFDSSxNQUFNO1FBQ04sT0FBTyxJQUFJLENBQUMsWUFBWSxJQUFJLElBQUksQ0FBQztJQUNyQyxDQUFDO3dJQW5CUSwyQkFBMkI7NEhBQTNCLDJCQUEyQixpU0N4QnhDLDZCQUNBOztBRHlCNEI7SUFBdkIsYUFBYTs4REFBMEM7a0dBRi9DLDJCQUEyQjtrQkFwQnZDLFNBQVM7K0JBQ0ksc0JBQXNCOzhCQXFCUixTQUFTO3NCQUFqQixLQUFLO2dCQUNaLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFHRixVQUFVO3NCQURiLFdBQVc7dUJBQUMsT0FBTztnQkFNaEIsR0FBRztzQkFETixXQUFXO3VCQUFDLGNBQWM7Z0JBTXZCLE1BQU07c0JBRFQsV0FBVzt1QkFBQyxpQkFBaUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgY29lcmNlQm9vbGVhbiB9IGZyb20gJ0BldWkvYmFzZSc7XG5pbXBvcnQgeyBFQ0xCYXNlRGlyZWN0aXZlIH0gZnJvbSAnLi4vZWNsLWJhc2UuZGlyZWN0aXZlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdlY2wtc3RpY2t5LWNvbnRhaW5lcicsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2VjbC1zdGlja3ktY29udGFpbmVyLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZXM6IFtcbiAgICAgICAgYFxuICAgICAgICAgICAgOmhvc3Qge1xuICAgICAgICAgICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgICAgICAgICAgIGFsaWduLXNlbGY6IGZsZXgtc3RhcnQ7XG4gICAgICAgICAgICAgICAgdG9wOiAwO1xuICAgICAgICAgICAgICAgIHotaW5kZXg6IDEwO1xuICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBzdGlja3k7XG4gICAgICAgICAgICAgICAgcG9zaXRpb246IC13ZWJraXQtc3RpY2t5O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICA6aG9zdC5lY2wtc3RpY2t5LWNvbnRhaW5lci0tZGlzYWJsZWQge1xuICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBzdGF0aWM7XG4gICAgICAgICAgICB9XG4gICAgICAgIGAsXG4gICAgXSxcbn0pXG5leHBvcnQgY2xhc3MgRWNsU3RpY2t5Q29udGFpbmVyQ29tcG9uZW50IGV4dGVuZHMgRUNMQmFzZURpcmVjdGl2ZSB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1leHBsaWNpdC1hbnlcbiAgICBAY29lcmNlQm9vbGVhbiBASW5wdXQoKSBpc0VuYWJsZWQ6IGJvb2xlYW4gfCBhbnkgPSB0cnVlO1xuICAgIEBJbnB1dCgpIG1hcmdpblRvcCA9IDA7XG4gICAgQElucHV0KCkgbWFyZ2luQm90dG9tID0gMDtcblxuICAgIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICAgIGdldCBjc3NDbGFzc2VzKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiBbc3VwZXIuZ2V0Q3NzQ2xhc3NlcygnZWNsLXN0aWNreS1jb250YWluZXInKSwgIXRoaXMuaXNFbmFibGVkID8gJ2VjbC1zdGlja3ktY29udGFpbmVyLS1kaXNhYmxlZCcgOiAnJ10uam9pbignICcpLnRyaW0oKTtcbiAgICB9XG5cbiAgICBASG9zdEJpbmRpbmcoJ3N0eWxlLnRvcC5weCcpXG4gICAgZ2V0IHRvcCgpOiBudW1iZXIge1xuICAgICAgICByZXR1cm4gdGhpcy5tYXJnaW5Ub3AgfHwgbnVsbDtcbiAgICB9XG5cbiAgICBASG9zdEJpbmRpbmcoJ3N0eWxlLmJvdHRvbS5weCcpXG4gICAgZ2V0IGJvdHRvbSgpOiBudW1iZXIge1xuICAgICAgICByZXR1cm4gdGhpcy5tYXJnaW5Cb3R0b20gfHwgbnVsbDtcbiAgICB9XG59XG4iLCI8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWNsLXN0aWNreS1jb250YWluZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL2VjbC1zdGlja3ktY29udGFpbmVyL2VjbC1zdGlja3ktY29udGFpbmVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9lY2wtc3RpY2t5LWNvbnRhaW5lci9lY2wtc3RpY2t5LWNvbnRhaW5lci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxXQUFXLEVBQUUsS0FBSyxFQUFnQyxNQUFNLGVBQWUsQ0FBQztBQUV4RyxPQUFPLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUN0QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDM0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUMxQyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQzs7O0FBcUJ6RCxNQUFNLE9BQU8sMkJBQTRCLFNBQVEsZ0JBQWdCO0lBTTdELElBQ0ksVUFBVTtRQUNWLE9BQU8sQ0FBQyxLQUFLLENBQUMsYUFBYSxDQUFDLHNCQUFzQixDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxnQ0FBZ0MsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ25JLENBQUM7SUFFRCxJQUNJLEdBQUc7UUFDSCxPQUFPLElBQUksQ0FBQyxTQUFTLElBQUksSUFBSSxDQUFDO0lBQ2xDLENBQUM7SUFFRCxJQUNJLE1BQU07UUFDTixPQUFPLElBQUksQ0FBQyxZQUFZLElBQUksSUFBSSxDQUFDO0lBQ3JDLENBQUM7SUFLRCxZQUFvQixxQkFBeUMsRUFBVSxRQUFtQixFQUFVLEVBQWM7UUFDOUcsS0FBSyxFQUFFLENBQUM7UUFEUSwwQkFBcUIsR0FBckIscUJBQXFCLENBQW9CO1FBQVUsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUFVLE9BQUUsR0FBRixFQUFFLENBQVk7UUF2QmxILDhEQUE4RDtRQUN0QyxjQUFTLEdBQWtCLElBQUksQ0FBQztRQUMvQyxjQUFTLEdBQUcsQ0FBQyxDQUFDO1FBQ2QsaUJBQVksR0FBRyxDQUFDLENBQUM7UUFpQmxCLGFBQVEsR0FBcUIsSUFBSSxPQUFPLEVBQVcsQ0FBQztRQUNwRCwrQkFBMEIsR0FBRyxHQUFHLENBQUM7SUFJekMsQ0FBQztJQUVELFFBQVE7UUFDSixJQUFJLENBQUMsd0JBQXdCLEVBQUUsQ0FBQztJQUNwQyxDQUFDO0lBRUQsV0FBVztRQUNQLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDaEMsQ0FBQztJQUVPLHdCQUF3QjtRQUM1QixJQUFJLENBQUMscUJBQXFCO2FBQ3JCLE9BQU8sQ0FBQyxvQkFBb0IsQ0FBQzthQUM3QixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsRUFBRSxLQUFLLENBQUMsSUFBSSxDQUFDLDBCQUEwQixDQUFDLENBQUM7YUFDdEUsU0FBUyxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUU7WUFDbEIsSUFBSSxNQUFNLENBQUMsT0FBTyxFQUFFLENBQUM7Z0JBQ2pCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLFNBQVMsRUFBRSxJQUFJLENBQUMsQ0FBQztZQUNuRSxDQUFDO2lCQUFNLENBQUM7Z0JBQ0osSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsU0FBUyxDQUFDLENBQUM7WUFDaEUsQ0FBQztRQUNMLENBQUMsQ0FBQyxDQUFDO0lBQ1gsQ0FBQzt3SUFoRFEsMkJBQTJCOzRIQUEzQiwyQkFBMkIsaVNDMUJ4Qyw2QkFDQTs7QUQyQjRCO0lBQXZCLGFBQWE7OERBQTBDO2tHQUYvQywyQkFBMkI7a0JBbkJ2QyxTQUFTOytCQUNJLHNCQUFzQjt3SUFvQlIsU0FBUztzQkFBakIsS0FBSztnQkFDWixTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBR0YsVUFBVTtzQkFEYixXQUFXO3VCQUFDLE9BQU87Z0JBTWhCLEdBQUc7c0JBRE4sV0FBVzt1QkFBQyxjQUFjO2dCQU12QixNQUFNO3NCQURULFdBQVc7dUJBQUMsaUJBQWlCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBIb3N0QmluZGluZywgSW5wdXQsIE9uSW5pdCwgUmVuZGVyZXIyLCBPbkRlc3Ryb3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJyZWFrcG9pbnRPYnNlcnZlciB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9sYXlvdXQnO1xuaW1wb3J0IHsgU3ViamVjdCwgZGVsYXkgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IGNvZXJjZUJvb2xlYW4gfSBmcm9tICdAZXVpL2Jhc2UnO1xuaW1wb3J0IHsgRUNMQmFzZURpcmVjdGl2ZSB9IGZyb20gJy4uL2VjbC1iYXNlLmRpcmVjdGl2ZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnZWNsLXN0aWNreS1jb250YWluZXInLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9lY2wtc3RpY2t5LWNvbnRhaW5lci5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVzOiBbXG4gICAgICAgIGBcbiAgICAgICAgICAgIDpob3N0IHtcbiAgICAgICAgICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgICAgICAgICBhbGlnbi1zZWxmOiBmbGV4LXN0YXJ0O1xuICAgICAgICAgICAgICAgIHRvcDogMDtcbiAgICAgICAgICAgICAgICBwb3NpdGlvbjogc3RpY2t5O1xuICAgICAgICAgICAgICAgIHBvc2l0aW9uOiAtd2Via2l0LXN0aWNreTtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgOmhvc3QuZWNsLXN0aWNreS1jb250YWluZXItLWRpc2FibGVkIHtcbiAgICAgICAgICAgICAgICBwb3NpdGlvbjogc3RhdGljO1xuICAgICAgICAgICAgfVxuICAgICAgICBgLFxuICAgIF0sXG59KVxuZXhwb3J0IGNsYXNzIEVjbFN0aWNreUNvbnRhaW5lckNvbXBvbmVudCBleHRlbmRzIEVDTEJhc2VEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1leHBsaWNpdC1hbnlcbiAgICBAY29lcmNlQm9vbGVhbiBASW5wdXQoKSBpc0VuYWJsZWQ6IGJvb2xlYW4gfCBhbnkgPSB0cnVlO1xuICAgIEBJbnB1dCgpIG1hcmdpblRvcCA9IDA7XG4gICAgQElucHV0KCkgbWFyZ2luQm90dG9tID0gMDtcblxuICAgIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICAgIGdldCBjc3NDbGFzc2VzKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiBbc3VwZXIuZ2V0Q3NzQ2xhc3NlcygnZWNsLXN0aWNreS1jb250YWluZXInKSwgIXRoaXMuaXNFbmFibGVkID8gJ2VjbC1zdGlja3ktY29udGFpbmVyLS1kaXNhYmxlZCcgOiAnJ10uam9pbignICcpLnRyaW0oKTtcbiAgICB9XG5cbiAgICBASG9zdEJpbmRpbmcoJ3N0eWxlLnRvcC5weCcpXG4gICAgZ2V0IHRvcCgpOiBudW1iZXIge1xuICAgICAgICByZXR1cm4gdGhpcy5tYXJnaW5Ub3AgfHwgbnVsbDtcbiAgICB9XG5cbiAgICBASG9zdEJpbmRpbmcoJ3N0eWxlLmJvdHRvbS5weCcpXG4gICAgZ2V0IGJvdHRvbSgpOiBudW1iZXIge1xuICAgICAgICByZXR1cm4gdGhpcy5tYXJnaW5Cb3R0b20gfHwgbnVsbDtcbiAgICB9XG5cbiAgICBwcml2YXRlIGRlc3Ryb3kkOiBTdWJqZWN0PGJvb2xlYW4+ID0gbmV3IFN1YmplY3Q8Ym9vbGVhbj4oKTtcbiAgICBwcml2YXRlIEJSRUFLUE9JTlRfQ0hBTkdFU19USU1FT1VUID0gNTAwO1xuXG4gICAgY29uc3RydWN0b3IocHJpdmF0ZSBjZGtCcmVha3BvaW50T2JzZXJ2ZXI6IEJyZWFrcG9pbnRPYnNlcnZlciwgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyLCBwcml2YXRlIGVsOiBFbGVtZW50UmVmKSB7XG4gICAgICAgIHN1cGVyKCk7XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMub2JzZXJ2ZUJyZWFrcG9pbnRDaGFuZ2VzKCk7XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgICAgIHRoaXMuZGVzdHJveSQubmV4dCh0cnVlKTtcbiAgICAgICAgdGhpcy5kZXN0cm95JC51bnN1YnNjcmliZSgpO1xuICAgIH1cblxuICAgIHByaXZhdGUgb2JzZXJ2ZUJyZWFrcG9pbnRDaGFuZ2VzKCk6IHZvaWQge1xuICAgICAgICB0aGlzLmNka0JyZWFrcG9pbnRPYnNlcnZlclxuICAgICAgICAgICAgLm9ic2VydmUoJyhtYXgtd2lkdGg6IDk5NnB4KScpXG4gICAgICAgICAgICAucGlwZSh0YWtlVW50aWwodGhpcy5kZXN0cm95JCksIGRlbGF5KHRoaXMuQlJFQUtQT0lOVF9DSEFOR0VTX1RJTUVPVVQpKVxuICAgICAgICAgICAgLnN1YnNjcmliZSgocmVzdWx0KSA9PiB7XG4gICAgICAgICAgICAgICAgaWYgKHJlc3VsdC5tYXRjaGVzKSB7XG4gICAgICAgICAgICAgICAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAnei1pbmRleCcsICcxMCcpO1xuICAgICAgICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICAgICAgICAgIHRoaXMucmVuZGVyZXIucmVtb3ZlU3R5bGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAnei1pbmRleCcpO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH0pO1xuICAgIH1cbn1cbiIsIjxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiJdfQ==

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

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

package/esm2022/lib/components/ecl-table/ecl-table-sort-button.component.mjs

@@ -13,10 +13,10 @@ export class EclTableSortButtonComponent extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-table__arrow')].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableSortButtonComponent, deps: [{ token: i1.EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclTableSortButtonComponent, selector: "button[eclTableSortButton]", inputs: { eclSize: "eclSize" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ecl-icon icon=\"solid-arrow\" class=\"ecl-table__icon ecl-table__icon-up\" [size]=\"(eclThemeService.isEC$ | async) ? 'l' : 'm'\"> </ecl-icon>\n<ecl-icon icon=\"solid-arrow\" class=\"ecl-table__icon ecl-table__icon-down\" [size]=\"(eclThemeService.isEC$ | async) ? 'l' : 'm'\"> </ecl-icon>\n", dependencies: [{ kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableSortButtonComponent, deps: [{ token: i1.EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTableSortButtonComponent, selector: "button[eclTableSortButton]", inputs: { eclSize: "eclSize" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ecl-icon icon=\"solid-arrow\" class=\"ecl-table__icon ecl-table__icon-up\" [size]=\"(eclThemeService.isEC$ | async) ? 'l' : 'm'\"> </ecl-icon>\n<ecl-icon icon=\"solid-arrow\" class=\"ecl-table__icon ecl-table__icon-down\" [size]=\"(eclThemeService.isEC$ | async) ? 'l' : 'm'\"> </ecl-icon>\n", dependencies: [{ kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableSortButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableSortButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[eclTableSortButton]', template: "<ecl-icon icon=\"solid-arrow\" class=\"ecl-table__icon ecl-table__icon-up\" [size]=\"(eclThemeService.isEC$ | async) ? 'l' : 'm'\"> </ecl-icon>\n<ecl-icon icon=\"solid-arrow\" class=\"ecl-table__icon ecl-table__icon-down\" [size]=\"(eclThemeService.isEC$ | async) ? 'l' : 'm'\"> </ecl-icon>\n" }]
         }], ctorParameters: () => [{ type: i1.EclThemeService }], propDecorators: { eclSize: [{

package/esm2022/lib/components/ecl-table/ecl-table.directive.mjs

@@ -46,13 +46,13 @@ export class EclTableDirective extends ECLBaseDirective {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableDirective, deps: [{ token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclTableDirective, selector: "[eclTable]", inputs: { isZebra: "isZebra" }, outputs: { sort: "sort" }, host: { properties: { "class.ecl-table--zebra": "this.isZebra", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclTableHeaders", predicate: i0.forwardRef(() => EclTableHeaderDirective), descendants: true }], usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableDirective, deps: [{ token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTableDirective, selector: "[eclTable]", inputs: { isZebra: "isZebra" }, outputs: { sort: "sort" }, host: { properties: { "class.ecl-table--zebra": "this.isZebra", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclTableHeaders", predicate: i0.forwardRef(() => EclTableHeaderDirective), descendants: true }], usesInheritance: true, ngImport: i0 }); }
 }
 __decorate([
     coerceBoolean
 ], EclTableDirective.prototype, "isZebra", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTable]',
@@ -97,10 +97,10 @@ export class EclTableHeadDirective extends ECLBaseDirective {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableHeadDirective, deps: [{ token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclTableHeadDirective, selector: "[eclTableHead]", host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclTableHeaders", predicate: i0.forwardRef(() => EclTableHeaderDirective), descendants: true }], usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableHeadDirective, deps: [{ token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTableHeadDirective, selector: "[eclTableHead]", host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclTableHeaders", predicate: i0.forwardRef(() => EclTableHeaderDirective), descendants: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableHeadDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableHeadDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTableHead]',
@@ -159,10 +159,10 @@ export class EclTableHeaderDirective extends ECLBaseDirective {
             });
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableHeaderDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclTableHeaderDirective, selector: "[eclTableHeader]", inputs: { eclSortable: "eclSortable" }, outputs: { sort: "sort" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.aria-sort": "this.sortOrder", "attr.data-ecl-table-sort-toggle": "this.eclSortable", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableHeaderDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTableHeaderDirective, selector: "[eclTableHeader]", inputs: { eclSortable: "eclSortable" }, outputs: { sort: "sort" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.aria-sort": "this.sortOrder", "attr.data-ecl-table-sort-toggle": "this.eclSortable", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTableHeader]',
@@ -188,10 +188,10 @@ export class EclTableRowDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-table__row')].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableRowDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclTableRowDirective, selector: "[eclTableRow]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableRowDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTableRowDirective, selector: "[eclTableRow]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableRowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableRowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTableRow]',
@@ -204,10 +204,10 @@ export class EclTableBodyDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-table__body')].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableBodyDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclTableBodyDirective, selector: "[eclTableBody]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableBodyDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTableBodyDirective, selector: "[eclTableBody]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableBodyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableBodyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTableBody]',
@@ -224,10 +224,10 @@ export class EclTableCellDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-table__cell'), this.isGroup ? 'ecl-table__cell--group' : ''].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableCellDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclTableCellDirective, selector: "[eclTableCell]", inputs: { eclTableCellHeader: "eclTableCellHeader", isGroup: "isGroup" }, host: { properties: { "attr.data-ecl-table-header": "this.eclTableCellHeader", "class.ecl-table__cell--group": "this.isGroup", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableCellDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTableCellDirective, selector: "[eclTableCell]", inputs: { eclTableCellHeader: "eclTableCellHeader", isGroup: "isGroup" }, host: { properties: { "attr.data-ecl-table-header": "this.eclTableCellHeader", "class.ecl-table__cell--group": "this.isGroup", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableCellDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableCellDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTableCell]',
@@ -250,10 +250,10 @@ export class EclTableCellGroupDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-table__cell--group')].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableCellGroupDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclTableCellGroupDirective, selector: "[eclTableCellGroup]", inputs: { eclTableCellGroup: "eclTableCellGroup" }, host: { properties: { "attr.data-ecl-table-header-group": "this.eclTableCellGroup", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableCellGroupDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTableCellGroupDirective, selector: "[eclTableCellGroup]", inputs: { eclTableCellGroup: "eclTableCellGroup" }, host: { properties: { "attr.data-ecl-table-header-group": "this.eclTableCellGroup", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableCellGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableCellGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTableCellGroup]',
@@ -271,10 +271,10 @@ export class EclTableResponsiveDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-table-responsive')].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableResponsiveDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclTableResponsiveDirective, selector: "[eclTableResponsive]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableResponsiveDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTableResponsiveDirective, selector: "[eclTableResponsive]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableResponsiveDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableResponsiveDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTableResponsive]',

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

@@ -16,8 +16,8 @@ const COMPONENTS = [
     EclTableResponsiveDirective,
 ];
 export class EclTableDirectiveModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableDirectiveModule, declarations: [EclTableDirective,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableDirectiveModule, declarations: [EclTableDirective,
             EclTableHeadDirective,
             EclTableHeaderDirective,
             EclTableRowDirective,
@@ -34,9 +34,9 @@ export class EclTableDirectiveModule {
             EclTableCellGroupDirective,
             EclTableSortButtonComponent,
             EclTableResponsiveDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableDirectiveModule, imports: [CommonModule, EclIconComponentModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableDirectiveModule, imports: [CommonModule, EclIconComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTableDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTableDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, EclIconComponentModule],

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

@@ -6,10 +6,10 @@ export class EclTabLabelComponent extends ECLBaseDirective {
         super();
         this.el = el;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTabLabelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclTabLabelComponent, selector: "ecl-tab-label", usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTabLabelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTabLabelComponent, selector: "ecl-tab-label", usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTabLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTabLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-tab-label', template: "<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });

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

@@ -13,13 +13,13 @@ export class EclTabMoreComponent extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-tabs__item ecl-tabs__item--more')].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTabMoreComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclTabMoreComponent, selector: "ecl-tab-more", inputs: { isHidden: "isHidden" }, host: { properties: { "attr.aria-hidden": "this.isHidden", "attr.role": "this.role", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:list-item}\n"] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTabMoreComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTabMoreComponent, selector: "ecl-tab-more", inputs: { isHidden: "isHidden" }, host: { properties: { "attr.aria-hidden": "this.isHidden", "attr.role": "this.role", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:list-item}\n"] }); }
 }
 __decorate([
     coerceBoolean
 ], EclTabMoreComponent.prototype, "isHidden", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTabMoreComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTabMoreComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-tab-more', template: "<ng-content></ng-content>\n", styles: [":host{display:list-item}\n"] }]
         }], propDecorators: { isHidden: [{

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();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTabComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", 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", "isHiddenLabel", "isNoVisited", "variant"] }] }); }
+    /** @nocollapse */ 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 }); }
+    /** @nocollapse */ 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", "isHiddenLabel", "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.2", ngImport: i0, type: EclTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", 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;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTabsComponent, deps: [{ token: i0.IterableDiffers }, { token: i1.BreakpointObserver }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2.EclRtlService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", 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 }); }
+    /** @nocollapse */ 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 }); }
+    /** @nocollapse */ 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", 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 {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTabsComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTabsComponentModule, declarations: [EclTabsComponent, EclTabComponent, EclTabLabelComponent, EclTabMoreComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTabsComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ 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,
             EclLinkDirectiveModule,
             EclButtonComponentModule,
             EclIconComponentModule,
             TranslateModule,
             ECLClickOutsideDirective], exports: [EclTabsComponent, EclTabComponent, EclTabLabelComponent, EclTabMoreComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTabsComponentModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTabsComponentModule, imports: [CommonModule,
             EclLinkDirectiveModule,
             EclButtonComponentModule,
             EclIconComponentModule,
             TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTabsComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTabsComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -28,10 +28,10 @@ export class EclTagComponent extends ECLBaseDirective {
             this.isVisible = false;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclTagComponent, selector: "ecl-tag, [eclTag]", inputs: { variant: "variant" }, outputs: { remove: "remove" }, host: { properties: { "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n\n<span *ngIf=\"isRemovable\" class=\"ecl-tag__icon\" (click)=\"onRemoveClick($event)\">\n    <ecl-icon icon=\"close\" class=\"ecl-tag__icon-close\"></ecl-icon>\n    <ecl-icon icon=\"close-filled\" class=\"ecl-tag__icon-close-filled\"></ecl-icon>\n</span>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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: EclTagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", type: EclTagComponent, selector: "ecl-tag, [eclTag]", inputs: { variant: "variant" }, outputs: { remove: "remove" }, host: { properties: { "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n\n<span *ngIf=\"isRemovable\" class=\"ecl-tag__icon\" (click)=\"onRemoveClick($event)\">\n    <ecl-icon icon=\"close\" class=\"ecl-tag__icon-close\"></ecl-icon>\n    <ecl-icon icon=\"close-filled\" class=\"ecl-tag__icon-close-filled\"></ecl-icon>\n</span>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTagComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-tag, [eclTag]', template: "<ng-content></ng-content>\n\n<span *ngIf=\"isRemovable\" class=\"ecl-tag__icon\" (click)=\"onRemoveClick($event)\">\n    <ecl-icon icon=\"close\" class=\"ecl-tag__icon-close\"></ecl-icon>\n    <ecl-icon icon=\"close-filled\" class=\"ecl-tag__icon-close-filled\"></ecl-icon>\n</span>\n" }]
         }], propDecorators: { variant: [{

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

@@ -4,11 +4,11 @@ import { EclIconComponentModule } from '../ecl-icon/ecl-icon.module';
 import { EclTagComponent } from './ecl-tag.component';
 import * as i0 from "@angular/core";
 export class EclTagComponentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTagComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTagComponentModule, declarations: [EclTagComponent], imports: [CommonModule, EclIconComponentModule], exports: [EclTagComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTagComponentModule, imports: [CommonModule, EclIconComponentModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTagComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTagComponentModule, declarations: [EclTagComponent], imports: [CommonModule, EclIconComponentModule], exports: [EclTagComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTagComponentModule, imports: [CommonModule, EclIconComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTagComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", 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;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTextAreaDirective, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", 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 }); }
+    /** @nocollapse */ 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 }); }
+    /** @nocollapse */ 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 }); }
 }
 __decorate([
     coerceBoolean
 ], EclTextAreaDirective.prototype, "isInvalid", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTextAreaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", 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 {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTextAreaDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTextAreaDirectiveModule, declarations: [EclTextAreaDirective], imports: [CommonModule], exports: [EclTextAreaDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTextAreaDirectiveModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTextAreaDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ 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] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTextAreaDirectiveModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTextAreaDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", 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;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTextInputDirective, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", 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 }); }
+    /** @nocollapse */ 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 }); }
+    /** @nocollapse */ 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 }); }
 }
 __decorate([
     coerceBoolean
 ], EclTextInputDirective.prototype, "isInvalid", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTextInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", 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 {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTextInputDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTextInputDirectiveModule, imports: [CommonModule, EclTextInputDirective], exports: [EclTextInputDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTextInputDirectiveModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTextInputDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTextInputDirectiveModule, imports: [CommonModule, EclTextInputDirective], exports: [EclTextInputDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTextInputDirectiveModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTextInputDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", 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();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTimelineItemLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: EclTimelineItemLabelDirective, selector: "[eclTimelineItemLabel]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ 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 }); }
+    /** @nocollapse */ 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EclTimelineItemLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i0, type: EclTimelineItemLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTimelineItemLabel]',