@eui/ecl 15.0.0-rc.13 → 15.0.0-rc.15

package/fesm2020/eui-ecl.mjs

@@ -8,7 +8,7 @@ import { __decorate } from 'tslib';
 import { coerceBoolean, coerceElement, coerceNumber, coerceArray, DefaultConfig, EuiPagination } from '@eui/base';
 import * as i2$1 from '@eui/core';
 import { GLOBAL_CONFIG_TOKEN } from '@eui/core';
-import { Subject, takeUntil, interval, delay, fromEvent, of } from 'rxjs';
+import { ReplaySubject, Subject, takeUntil, switchMap, interval, delay, fromEvent, of } from 'rxjs';
 import { takeUntil as takeUntil$1, mergeWith } from 'rxjs/operators';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
@@ -546,7 +546,7 @@ class EclDefaultLanguageService {
     constructor(config, i18nService) {
         this.config = config;
         this.i18nService = i18nService;
-        this.currentLanguage$ = new Subject();
+        this.currentLanguage$ = new ReplaySubject();
         this.FALLBACK_LANGUAGE = { code: 'en', label: 'English' };
         this.destroy$ = new Subject();
         this.handleActiveLanguageChangeState();
@@ -3934,6 +3934,9 @@ class EclCarouselComponent extends ECLBaseDirective {
         this.playInterval = 5000;
         this.slide = new EventEmitter();
         this.isPlaying = false;
+        this.isPaused = false;
+        this.playSubject = new Subject();
+        this.stopSubject = new Subject();
         this.isMobileBreakpoint = false;
         this.destroy$ = new Subject();
     }
@@ -3942,6 +3945,9 @@ class EclCarouselComponent extends ECLBaseDirective {
             super.getCssClasses('ecl-carousel')
         ].join(' ').trim();
     }
+    ngOnInit() {
+        this.initAutoplay();
+    }
     ngAfterContentInit() {
         this.observeBreakpointChanges();
         this.initializeSlider();
@@ -3972,6 +3978,15 @@ class EclCarouselComponent extends ECLBaseDirective {
         this.stopPlaying();
         this.goToPreviousSlide();
     }
+    onSlideHover() {
+        this.pausePlaying();
+    }
+    onSlideHoverout() {
+        this.resumePlaying();
+    }
+    isPlayingState() {
+        return this.isPlaying && !this.isPaused;
+    }
     isPadded() {
         return !this.isMobileBreakpoint;
     }
@@ -3993,29 +4008,32 @@ class EclCarouselComponent extends ECLBaseDirective {
     getCarouselSlidesOffset() {
         return -1 * this.carouselContainerElement?.offsetWidth * this.getCurrentSlideIndex();
     }
+    initAutoplay() {
+        const start$ = this.playSubject.asObservable();
+        const stop$ = this.stopSubject.asObservable();
+        start$.pipe(switchMap(() => interval(this.playInterval)
+            .pipe(takeUntil(stop$))), takeUntil(this.destroy$)).subscribe(() => {
+            this.goToNextSlide();
+        });
+    }
     initializeSlider() {
         this.slides.forEach((item, idx) => {
-            item.index = idx;
-            item.ariaLabel = `slide ${idx + 1} of ${this.getSlidesCount()}`;
-            item.width = 100 / this.getSlidesCount();
+            this.initSlide(item, idx);
         });
         if (this.hasControls) {
-            this.playInterval$ = interval(this.playInterval);
             if (this.isNoSlideSelected()) {
                 this.activateSlide(this.slides.first);
             }
-            if (this.isAutoplay) {
+            if (this.isAutoplay && !this.isMobileBreakpoint) {
                 this.startPlaying();
             }
-            this.slides.forEach(item => {
-                item.slideClick
-                    .pipe(takeUntil(this.destroy$))
-                    .subscribe(() => {
-                    this.stopPlaying();
-                });
-            });
         }
     }
+    initSlide(item, idx) {
+        item.index = idx;
+        item.ariaLabel = `slide ${idx + 1} of ${this.getSlidesCount()}`;
+        item.width = 100 / this.getSlidesCount();
+    }
     goToNextSlide() {
         this.activateSlide(this.getNextSlide());
     }
@@ -4033,16 +4051,24 @@ class EclCarouselComponent extends ECLBaseDirective {
     }
     startPlaying() {
         this.isPlaying = true;
-        this.playIntervalSubscription = this.playInterval$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(n => {
-            this.goToNextSlide();
-        });
+        this.isPaused = false;
+        this.playSubject.next();
     }
     stopPlaying() {
         this.isPlaying = false;
-        if (this.playIntervalSubscription) {
-            this.playIntervalSubscription.unsubscribe();
+        this.isPaused = true;
+        this.stopSubject.next();
+    }
+    pausePlaying() {
+        if (this.isPlaying) {
+            this.isPaused = true;
+            this.stopSubject.next();
+        }
+    }
+    resumePlaying() {
+        if (this.isPlaying) {
+            this.isPaused = false;
+            this.playSubject.next();
         }
     }
     getNextSlide() {
@@ -4077,6 +4103,9 @@ class EclCarouselComponent extends ECLBaseDirective {
             .pipe(takeUntil(this.destroy$))
             .subscribe(result => {
             this.isMobileBreakpoint = result.matches;
+            if (this.isMobileBreakpoint) {
+                this.stopPlaying();
+            }
         });
     }
     observeElementSizeChanges() {
@@ -4086,7 +4115,7 @@ class EclCarouselComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EclCarouselComponent, deps: [{ token: i0.Renderer2 }, { token: i1$2.BreakpointObserver }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: EclCarouselComponent, selector: "ecl-carousel", inputs: { isAutoplay: "isAutoplay", playInterval: "playInterval" }, outputs: { slide: "slide" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "slides", predicate: i0.forwardRef(function () { return EclCarouselItemComponent; }) }], viewQueries: [{ propertyName: "carouselContainerElement", first: true, predicate: ["carouselContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #carouselContainer \n    class=\"ecl-carousel__container\" \n    [class.ecl-carousel-container--padded]=\"isPadded()\">\n    <div class=\"ecl-carousel__slides\"\n        [style.width.px]=\"getCarouselSlidesWidth()\" \n        [style.left.px]=\"getCarouselSlidesOffset()\">\n        <ng-content></ng-content>\n    </div>\n\n    <button *ngIf=\"hasControls() && !isMobileBreakpoint\"\n        class=\"ecl-carousel__prev\" \n        (click)=\"onPreviousSlideClick()\">\n        <ecl-icon \n            icon=\"corner-arrow\" \n            size=\"m\" \n            transform=\"rotate-270\" \n            isInverted \n            class=\"ecl-carousel__icon-default\">\n        </ecl-icon>\n        <span class=\"ecl-u-sr-only\">{{ 'ecl.carousel.PREV-SLIDES' | translate }}</span>\n    </button>\n\n    <button *ngIf=\"hasControls() && !isMobileBreakpoint\"\n        class=\"ecl-carousel__next\" \n        (click)=\"onNextSlideClick()\">\n        <ecl-icon \n            icon=\"corner-arrow\" \n            size=\"m\" \n            transform=\"rotate-90\" \n            isInverted \n            class=\"ecl-carousel__icon-default\">\n        </ecl-icon>\n        <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.NEXT-SLIDES' | translate }}</div>\n    </button>\n</div>\n\n<div *ngIf=\"hasControls()\" \n    class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__autoplay\">\n            <button *ngIf=\"!isPlaying\" \n                class=\"ecl-carousel__play\"\n                (click)=\"onPlayClick()\">\n                <ecl-icon \n                    icon=\"play\" \n                    size=\"l\" \n                    class=\"ecl-carousel__icon-default\"\n                    isInverted>\n                </ecl-icon>\n                <ecl-icon \n                    icon=\"play-filled\" \n                    size=\"l\" \n                    class=\"ecl-carousel__icon-active\"\n                    isInverted>\n                </ecl-icon>\n                <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.AUTOPLAY' | translate }}</div>\n            </button>\n            <button *ngIf=\"isPlaying\" \n                class=\"ecl-carousel__pause\"\n                (click)=\"onPauseClick()\">\n                <ecl-icon \n                    icon=\"pause\" \n                    size=\"l\" \n                    class=\"ecl-carousel__icon-default\"\n                    isInverted>\n                </ecl-icon>\n                <ecl-icon \n                    icon=\"pause-filled\" \n                    size=\"l\" \n                    class=\"ecl-carousel__icon-active\"\n                    isInverted>\n                </ecl-icon>\n                <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.PAUSE' | translate }}</div>\n            </button>\n        </div>\n\n        <div class=\"ecl-carousel__navigation\">\n            <button \n                *ngFor=\"let slide of slides; let i = index\" \n                [attr.aria-current]=\"slide.isCurrent\"\n                class=\"ecl-carousel__navigation-item\"\n                (click)=\"onSlideControlClick(slide)\">\n                <span class=\"ecl-u-sr-only\">{{ 'ecl.carousel.GO-TO-SLIDE' | translate }} {{ i + 1 }}</span>\n            </button>\n        </div>\n\n        <button *ngIf=\"isMobileBreakpoint\"\n            class=\"ecl-carousel__prev\" \n            (click)=\"onPreviousSlideClick()\">\n            <ecl-icon \n                icon=\"corner-arrow\" \n                size=\"m\" \n                transform=\"rotate-270\" \n                isInverted \n                class=\"ecl-carousel__icon-default\">\n            </ecl-icon>\n            <span class=\"ecl-u-sr-only\">{{ 'ecl.carousel.PREV-SLIDES' | translate }}</span>\n        </button>\n        \n        <div class=\"ecl-carousel__pagination\">\n            <span class=\"ecl-carousel__current\">{{ getCurrentSlideIndex() + 1 }}</span>\n            {{ 'ecl.common.OF' | translate }}\n            <span class=\"ecl-carousel__max\">{{ slides.length }}</span>\n        </div>\n\n        <button *ngIf=\"isMobileBreakpoint\"\n            class=\"ecl-carousel__next\" \n            (click)=\"onNextSlideClick()\">\n            <ecl-icon \n                icon=\"corner-arrow\" \n                size=\"m\" \n                transform=\"rotate-90\" \n                isInverted \n                class=\"ecl-carousel__icon-default\">\n            </ecl-icon>\n            <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.NEXT-SLIDES' | translate }}</div>\n        </button>\n    </div>\n</div>", styles: [":host{display:block}.ecl-carousel__container{width:100%}.ecl-carousel__slides{transition-duration:.4s}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: EclCarouselComponent, selector: "ecl-carousel", inputs: { isAutoplay: "isAutoplay", playInterval: "playInterval" }, outputs: { slide: "slide" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "slides", predicate: i0.forwardRef(function () { return EclCarouselItemComponent; }) }], viewQueries: [{ propertyName: "carouselContainerElement", first: true, predicate: ["carouselContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #carouselContainer \n    class=\"ecl-carousel__container\" \n    [class.ecl-carousel-container--padded]=\"isPadded()\">\n    <div class=\"ecl-carousel__slides\"\n        [style.width.px]=\"getCarouselSlidesWidth()\" \n        [style.left.px]=\"getCarouselSlidesOffset()\"\n        (mouseover)=\"onSlideHover()\"\n        (mouseout)=\"onSlideHoverout()\">\n        <ng-content></ng-content>\n    </div>\n\n    <button *ngIf=\"hasControls() && !isMobileBreakpoint\"\n        class=\"ecl-carousel__prev\" \n        (click)=\"onPreviousSlideClick()\">\n        <ecl-icon \n            icon=\"corner-arrow\" \n            size=\"m\" \n            transform=\"rotate-270\" \n            isInverted \n            class=\"ecl-carousel__icon-default\">\n        </ecl-icon>\n        <span class=\"ecl-u-sr-only\">{{ 'ecl.carousel.PREV-SLIDES' | translate }}</span>\n    </button>\n\n    <button *ngIf=\"hasControls() && !isMobileBreakpoint\"\n        class=\"ecl-carousel__next\" \n        (click)=\"onNextSlideClick()\">\n        <ecl-icon \n            icon=\"corner-arrow\" \n            size=\"m\" \n            transform=\"rotate-90\" \n            isInverted \n            class=\"ecl-carousel__icon-default\">\n        </ecl-icon>\n        <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.NEXT-SLIDES' | translate }}</div>\n    </button>\n</div>\n\n<div *ngIf=\"hasControls()\" \n    class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__autoplay\">\n            <button *ngIf=\"!isPlayingState()\" \n                class=\"ecl-carousel__play\"\n                (click)=\"onPlayClick()\">\n                <ecl-icon \n                    icon=\"play\" \n                    size=\"l\" \n                    class=\"ecl-carousel__icon-default\"\n                    isInverted>\n                </ecl-icon>\n                <ecl-icon \n                    icon=\"play-filled\" \n                    size=\"l\" \n                    class=\"ecl-carousel__icon-active\"\n                    isInverted>\n                </ecl-icon>\n                <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.AUTOPLAY' | translate }}</div>\n            </button>\n            <button *ngIf=\"isPlayingState()\" \n                class=\"ecl-carousel__pause\"\n                (click)=\"onPauseClick()\">\n                <ecl-icon \n                    icon=\"pause\" \n                    size=\"l\" \n                    class=\"ecl-carousel__icon-default\"\n                    isInverted>\n                </ecl-icon>\n                <ecl-icon \n                    icon=\"pause-filled\" \n                    size=\"l\" \n                    class=\"ecl-carousel__icon-active\"\n                    isInverted>\n                </ecl-icon>\n                <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.PAUSE' | translate }}</div>\n            </button>\n        </div>\n\n        <div class=\"ecl-carousel__navigation\">\n            <button \n                *ngFor=\"let slide of slides; let i = index\" \n                [attr.aria-current]=\"slide.isCurrent\"\n                class=\"ecl-carousel__navigation-item\"\n                (click)=\"onSlideControlClick(slide)\">\n                <span class=\"ecl-u-sr-only\">{{ 'ecl.carousel.GO-TO-SLIDE' | translate }} {{ i + 1 }}</span>\n            </button>\n        </div>\n\n        <button *ngIf=\"isMobileBreakpoint\"\n            class=\"ecl-carousel__prev\" \n            (click)=\"onPreviousSlideClick()\">\n            <ecl-icon \n                icon=\"corner-arrow\" \n                size=\"m\" \n                transform=\"rotate-270\" \n                isInverted \n                class=\"ecl-carousel__icon-default\">\n            </ecl-icon>\n            <span class=\"ecl-u-sr-only\">{{ 'ecl.carousel.PREV-SLIDES' | translate }}</span>\n        </button>\n        \n        <div class=\"ecl-carousel__pagination\">\n            <span class=\"ecl-carousel__current\">{{ getCurrentSlideIndex() + 1 }}</span>\n            {{ 'ecl.common.OF' | translate }}\n            <span class=\"ecl-carousel__max\">{{ slides.length }}</span>\n        </div>\n\n        <button *ngIf=\"isMobileBreakpoint\"\n            class=\"ecl-carousel__next\" \n            (click)=\"onNextSlideClick()\">\n            <ecl-icon \n                icon=\"corner-arrow\" \n                size=\"m\" \n                transform=\"rotate-90\" \n                isInverted \n                class=\"ecl-carousel__icon-default\">\n            </ecl-icon>\n            <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.NEXT-SLIDES' | translate }}</div>\n        </button>\n    </div>\n</div>", styles: [":host{display:block}.ecl-carousel__container{width:100%}.ecl-carousel__slides{transition-duration:.4s}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 __decorate([
     coerceBoolean
 ], EclCarouselComponent.prototype, "isAutoplay", void 0);
@@ -4098,7 +4127,7 @@ __decorate([
 ], EclCarouselComponent.prototype, "carouselContainerElement", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EclCarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-carousel', template: "<div #carouselContainer \n    class=\"ecl-carousel__container\" \n    [class.ecl-carousel-container--padded]=\"isPadded()\">\n    <div class=\"ecl-carousel__slides\"\n        [style.width.px]=\"getCarouselSlidesWidth()\" \n        [style.left.px]=\"getCarouselSlidesOffset()\">\n        <ng-content></ng-content>\n    </div>\n\n    <button *ngIf=\"hasControls() && !isMobileBreakpoint\"\n        class=\"ecl-carousel__prev\" \n        (click)=\"onPreviousSlideClick()\">\n        <ecl-icon \n            icon=\"corner-arrow\" \n            size=\"m\" \n            transform=\"rotate-270\" \n            isInverted \n            class=\"ecl-carousel__icon-default\">\n        </ecl-icon>\n        <span class=\"ecl-u-sr-only\">{{ 'ecl.carousel.PREV-SLIDES' | translate }}</span>\n    </button>\n\n    <button *ngIf=\"hasControls() && !isMobileBreakpoint\"\n        class=\"ecl-carousel__next\" \n        (click)=\"onNextSlideClick()\">\n        <ecl-icon \n            icon=\"corner-arrow\" \n            size=\"m\" \n            transform=\"rotate-90\" \n            isInverted \n            class=\"ecl-carousel__icon-default\">\n        </ecl-icon>\n        <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.NEXT-SLIDES' | translate }}</div>\n    </button>\n</div>\n\n<div *ngIf=\"hasControls()\" \n    class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__autoplay\">\n            <button *ngIf=\"!isPlaying\" \n                class=\"ecl-carousel__play\"\n                (click)=\"onPlayClick()\">\n                <ecl-icon \n                    icon=\"play\" \n                    size=\"l\" \n                    class=\"ecl-carousel__icon-default\"\n                    isInverted>\n                </ecl-icon>\n                <ecl-icon \n                    icon=\"play-filled\" \n                    size=\"l\" \n                    class=\"ecl-carousel__icon-active\"\n                    isInverted>\n                </ecl-icon>\n                <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.AUTOPLAY' | translate }}</div>\n            </button>\n            <button *ngIf=\"isPlaying\" \n                class=\"ecl-carousel__pause\"\n                (click)=\"onPauseClick()\">\n                <ecl-icon \n                    icon=\"pause\" \n                    size=\"l\" \n                    class=\"ecl-carousel__icon-default\"\n                    isInverted>\n                </ecl-icon>\n                <ecl-icon \n                    icon=\"pause-filled\" \n                    size=\"l\" \n                    class=\"ecl-carousel__icon-active\"\n                    isInverted>\n                </ecl-icon>\n                <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.PAUSE' | translate }}</div>\n            </button>\n        </div>\n\n        <div class=\"ecl-carousel__navigation\">\n            <button \n                *ngFor=\"let slide of slides; let i = index\" \n                [attr.aria-current]=\"slide.isCurrent\"\n                class=\"ecl-carousel__navigation-item\"\n                (click)=\"onSlideControlClick(slide)\">\n                <span class=\"ecl-u-sr-only\">{{ 'ecl.carousel.GO-TO-SLIDE' | translate }} {{ i + 1 }}</span>\n            </button>\n        </div>\n\n        <button *ngIf=\"isMobileBreakpoint\"\n            class=\"ecl-carousel__prev\" \n            (click)=\"onPreviousSlideClick()\">\n            <ecl-icon \n                icon=\"corner-arrow\" \n                size=\"m\" \n                transform=\"rotate-270\" \n                isInverted \n                class=\"ecl-carousel__icon-default\">\n            </ecl-icon>\n            <span class=\"ecl-u-sr-only\">{{ 'ecl.carousel.PREV-SLIDES' | translate }}</span>\n        </button>\n        \n        <div class=\"ecl-carousel__pagination\">\n            <span class=\"ecl-carousel__current\">{{ getCurrentSlideIndex() + 1 }}</span>\n            {{ 'ecl.common.OF' | translate }}\n            <span class=\"ecl-carousel__max\">{{ slides.length }}</span>\n        </div>\n\n        <button *ngIf=\"isMobileBreakpoint\"\n            class=\"ecl-carousel__next\" \n            (click)=\"onNextSlideClick()\">\n            <ecl-icon \n                icon=\"corner-arrow\" \n                size=\"m\" \n                transform=\"rotate-90\" \n                isInverted \n                class=\"ecl-carousel__icon-default\">\n            </ecl-icon>\n            <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.NEXT-SLIDES' | translate }}</div>\n        </button>\n    </div>\n</div>", styles: [":host{display:block}.ecl-carousel__container{width:100%}.ecl-carousel__slides{transition-duration:.4s}\n"] }]
+            args: [{ selector: 'ecl-carousel', template: "<div #carouselContainer \n    class=\"ecl-carousel__container\" \n    [class.ecl-carousel-container--padded]=\"isPadded()\">\n    <div class=\"ecl-carousel__slides\"\n        [style.width.px]=\"getCarouselSlidesWidth()\" \n        [style.left.px]=\"getCarouselSlidesOffset()\"\n        (mouseover)=\"onSlideHover()\"\n        (mouseout)=\"onSlideHoverout()\">\n        <ng-content></ng-content>\n    </div>\n\n    <button *ngIf=\"hasControls() && !isMobileBreakpoint\"\n        class=\"ecl-carousel__prev\" \n        (click)=\"onPreviousSlideClick()\">\n        <ecl-icon \n            icon=\"corner-arrow\" \n            size=\"m\" \n            transform=\"rotate-270\" \n            isInverted \n            class=\"ecl-carousel__icon-default\">\n        </ecl-icon>\n        <span class=\"ecl-u-sr-only\">{{ 'ecl.carousel.PREV-SLIDES' | translate }}</span>\n    </button>\n\n    <button *ngIf=\"hasControls() && !isMobileBreakpoint\"\n        class=\"ecl-carousel__next\" \n        (click)=\"onNextSlideClick()\">\n        <ecl-icon \n            icon=\"corner-arrow\" \n            size=\"m\" \n            transform=\"rotate-90\" \n            isInverted \n            class=\"ecl-carousel__icon-default\">\n        </ecl-icon>\n        <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.NEXT-SLIDES' | translate }}</div>\n    </button>\n</div>\n\n<div *ngIf=\"hasControls()\" \n    class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__autoplay\">\n            <button *ngIf=\"!isPlayingState()\" \n                class=\"ecl-carousel__play\"\n                (click)=\"onPlayClick()\">\n                <ecl-icon \n                    icon=\"play\" \n                    size=\"l\" \n                    class=\"ecl-carousel__icon-default\"\n                    isInverted>\n                </ecl-icon>\n                <ecl-icon \n                    icon=\"play-filled\" \n                    size=\"l\" \n                    class=\"ecl-carousel__icon-active\"\n                    isInverted>\n                </ecl-icon>\n                <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.AUTOPLAY' | translate }}</div>\n            </button>\n            <button *ngIf=\"isPlayingState()\" \n                class=\"ecl-carousel__pause\"\n                (click)=\"onPauseClick()\">\n                <ecl-icon \n                    icon=\"pause\" \n                    size=\"l\" \n                    class=\"ecl-carousel__icon-default\"\n                    isInverted>\n                </ecl-icon>\n                <ecl-icon \n                    icon=\"pause-filled\" \n                    size=\"l\" \n                    class=\"ecl-carousel__icon-active\"\n                    isInverted>\n                </ecl-icon>\n                <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.PAUSE' | translate }}</div>\n            </button>\n        </div>\n\n        <div class=\"ecl-carousel__navigation\">\n            <button \n                *ngFor=\"let slide of slides; let i = index\" \n                [attr.aria-current]=\"slide.isCurrent\"\n                class=\"ecl-carousel__navigation-item\"\n                (click)=\"onSlideControlClick(slide)\">\n                <span class=\"ecl-u-sr-only\">{{ 'ecl.carousel.GO-TO-SLIDE' | translate }} {{ i + 1 }}</span>\n            </button>\n        </div>\n\n        <button *ngIf=\"isMobileBreakpoint\"\n            class=\"ecl-carousel__prev\" \n            (click)=\"onPreviousSlideClick()\">\n            <ecl-icon \n                icon=\"corner-arrow\" \n                size=\"m\" \n                transform=\"rotate-270\" \n                isInverted \n                class=\"ecl-carousel__icon-default\">\n            </ecl-icon>\n            <span class=\"ecl-u-sr-only\">{{ 'ecl.carousel.PREV-SLIDES' | translate }}</span>\n        </button>\n        \n        <div class=\"ecl-carousel__pagination\">\n            <span class=\"ecl-carousel__current\">{{ getCurrentSlideIndex() + 1 }}</span>\n            {{ 'ecl.common.OF' | translate }}\n            <span class=\"ecl-carousel__max\">{{ slides.length }}</span>\n        </div>\n\n        <button *ngIf=\"isMobileBreakpoint\"\n            class=\"ecl-carousel__next\" \n            (click)=\"onNextSlideClick()\">\n            <ecl-icon \n                icon=\"corner-arrow\" \n                size=\"m\" \n                transform=\"rotate-90\" \n                isInverted \n                class=\"ecl-carousel__icon-default\">\n            </ecl-icon>\n            <div class=\"ecl-u-sr-only\">{{ 'ecl.carousel.NEXT-SLIDES' | translate }}</div>\n        </button>\n    </div>\n</div>", styles: [":host{display:block}.ecl-carousel__container{width:100%}.ecl-carousel__slides{transition-duration:.4s}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1$2.BreakpointObserver }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { isAutoplay: [{
                 type: Input
             }], playInterval: [{
@@ -8542,8 +8571,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
 
 var KEY_CODE;
 (function (KEY_CODE) {
-    KEY_CODE[KEY_CODE["RIGHT_ARROW"] = 39] = "RIGHT_ARROW";
-    KEY_CODE[KEY_CODE["LEFT_ARROW"] = 37] = "LEFT_ARROW";
+    KEY_CODE["ARROW_UP"] = "ArrowUp";
+    KEY_CODE["ARROW_DOWN"] = "ArrowDown";
+    KEY_CODE["ESCAPE"] = "Escape";
+    KEY_CODE["ENTER"] = "Enter";
+    KEY_CODE["TAB"] = "Tab";
 })(KEY_CODE || (KEY_CODE = {}));
 class EclMultiselectComponent extends ECLBaseDirective {
     constructor(ngControl, el, viewContainerRef, differs, translate) {
@@ -8568,6 +8600,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
+        this.bindCallbacks();
     }
     set eclPlaceholder(value) {
         this._eclPlaceholder = value;
@@ -8594,7 +8627,6 @@ class EclMultiselectComponent extends ECLBaseDirective {
         this.hostParentEl = this.getHostParentElement(this.hostEl);
         this.hostWrapperEl = this.createHostWrapperContainer();
         this.selectIconContainerEl = this.createIconContainer();
-        this.eclIconComponentEl = this.createIconComponent();
         this.multiselectWrapper = this.createWrapperMultiselect();
         this.multiselectContainer = this.createSelectContainerMultiselect();
         if (this.hostParentEl != null) {
@@ -8607,6 +8639,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
     ngDoCheck() {
         this.multiselectContainer.classList.toggle('ecl-select__container--disabled', this.disabled);
         this.multiselectContainer.classList.toggle('ecl-select__container--invalid', this.isInvalid);
+        this.handleSelectAllDisableStatus();
         if (this.disabled) {
             this.multiSelectInput.disabled = true;
         }
@@ -8627,6 +8660,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
     ngOnDestroy() {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
+        this.removeAllListeners();
     }
     writeValue(value) {
         if (value) {
@@ -8645,25 +8679,12 @@ class EclMultiselectComponent extends ECLBaseDirective {
         this.propagateTouched = fn;
     }
     onEscapeKey(event) {
-        this.multiDropdown.style.display = 'none';
+        this.closeMultiselectDropdown();
     }
-    // @HostListener('keyup.ArrowDown', ['$event']) onArrowDownKey(event: KeyboardEvent) {
-    //     this.multiDropdown.style.display = 'block';
-    // }
-    // @HostListener('window:keyup', ['$event'])
-    // keyEvent(event: KeyboardEvent) {
-    //     console.log(event);
-    //     if (event.key === KEY_CODE.RIGHT_ARROW) {
-    //     this.increment();
-    //     }
-    //     if (event.keyCode === KEY_CODE.LEFT_ARROW) {
-    //     this.decrement();
-    //     }
-    // }
     onKeyUp(ev) {
         const isClickInside = this.multiDropdown.contains(ev.target) || this.multiSelectInput.contains(ev.target);
         if (!isClickInside) {
-            this.multiDropdown.style.display = 'none';
+            this.closeMultiselectDropdown();
         }
     }
     removeAllOptions() {
@@ -8691,7 +8712,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
         this.hostParentEl.appendChild(this.multiselectWrapper);
         this.multiselectWrapper.appendChild(this.multiselectContainer);
         this.multiselectContainer.appendChild(this.selectIconContainerEl);
-        this.selectIconContainerEl.appendChild(this.eclIconComponentEl);
+        this.selectIconContainerEl.appendChild(this.createIconComponent());
     }
     buildMultiselectDropdown(withOptions) {
         this.multiDropdown = this.createDropdownForMultiselect();
@@ -8737,12 +8758,10 @@ class EclMultiselectComponent extends ECLBaseDirective {
         if (this.hostEl.hasAttribute('formControlName')) {
             this.multiSelectInput.setAttribute('formControlName', this.hostEl.getAttribute('formControlName'));
         }
-        this.multiSelectInput.onclick = (e) => {
-            e.preventDefault();
-            this.multiDropdown.style.display = this.multiDropdown.style.display === 'none' ? 'block' : 'none';
-        };
+        this.multiSelectInput.addEventListener('click', this.handleClickOnMainInput);
         this.multiSelectInput.classList.add('ecl-select');
         this.multiSelectInput.classList.add('ecl-select__multiple-toggle');
+        this.multiSelectInput.addEventListener('keydown', this.handleKeydownOnMainInput);
         if (this.disabled) {
             this.multiSelectInput.disabled = true;
         }
@@ -8763,10 +8782,9 @@ class EclMultiselectComponent extends ECLBaseDirective {
         multiSearch.type = 'text';
         multiSearch.classList.add('ecl-text-input');
         multiSearch.placeholder = 'Search';
-        // Search elements. Elements that don't match the criteria are hidden
-        multiSearch.onkeyup = () => {
-            this.searchOptions(multiSearch.value);
-        };
+        multiSearch.addEventListener('keydown', this.handleKeydownOnSearch);
+        multiSearch.addEventListener('keyup', this.onSearchOptions);
+        this.searchEl = multiSearch;
         return multiSearch;
     }
     createOptionWithCheckbox(el) {
@@ -8784,17 +8802,14 @@ class EclMultiselectComponent extends ECLBaseDirective {
             checkboxInput.disabled = true;
         }
         else {
-            checkboxInput.onclick = () => {
-                this.updateCurrentValue();
-                this.propagateTouched();
-                this.eclChange.emit(this.selectedValues);
-            };
+            checkboxInput.addEventListener('click', this.handleClickOnOption);
         }
         if (el.selected || (this.selectedValues.indexOf(el.value) > -1)) {
             checkboxInput.checked = true;
             this.multiSelectInput.value = this.multiSelectInput.value === '' ? el.label :
                 this.multiSelectInput.value + ',' + el.label;
         }
+        checkboxInput.addEventListener('keydown', this.handleKeydownOnOption);
         checkboxDiv.appendChild(checkboxInput);
         const checkboxLabel = this.createCheckboxLabel(el.label, id);
         checkboxDiv.appendChild(checkboxLabel);
@@ -8819,8 +8834,8 @@ class EclMultiselectComponent extends ECLBaseDirective {
     }
     // Add/remove values from the select input
     updateCurrentValue() {
-        let selectedElementsArray = [];
-        let selectedElementsValuesArray = [];
+        const selectedElementsArray = [];
+        const selectedElementsValuesArray = [];
         this.checkboxSelectAll.checked = false;
         this.multiSelectOptions.forEach(el => {
             const input = el.childNodes[0];
@@ -8840,13 +8855,12 @@ class EclMultiselectComponent extends ECLBaseDirective {
         checkboxDiv.classList.add('ecl-checkbox');
         checkboxDiv.classList.add('ecl-select__multiple-all');
         this.checkboxSelectAll = this.createCheckboxInput('select-multiple-all' + idStr.substring(idStr.lastIndexOf('.') + 1), 'all');
-        this.checkboxSelectAll.onclick = () => {
-            this.propagateTouched();
-            this.selectAll();
-        };
+        this.checkboxSelectAll.addEventListener('keydown', this.handleKeydownOnSelectAll);
+        this.checkboxSelectAll.addEventListener('click', this.handleClickOnSelectAll);
         checkboxDiv.appendChild(this.checkboxSelectAll);
         this.checkboxLabel = this.createCheckboxLabel('Select all', 'select-multiple-all' + idStr.substring(idStr.lastIndexOf('.') + 1));
         checkboxDiv.appendChild(this.checkboxLabel);
+        this.selectAllEll = checkboxDiv;
         return checkboxDiv;
     }
     createOptionsWrapper() {
@@ -8854,9 +8868,9 @@ class EclMultiselectComponent extends ECLBaseDirective {
         div.classList.add('ecl-select__multiple-options');
         return div;
     }
-    selectAll() {
-        let selectedElementsArray = [];
-        let selectedElementsValuesArray = [];
+    onSelectAll() {
+        const selectedElementsArray = [];
+        const selectedElementsValuesArray = [];
         // Select all the elements, that are not disabled
         this.multiSelectOptions.filter(elem => elem.style.display !== 'none').forEach(el => {
             const input = el.childNodes[0];
@@ -8888,17 +8902,26 @@ class EclMultiselectComponent extends ECLBaseDirective {
         selectIconContainer.classList.add('ecl-select__icon');
         return selectIconContainer;
     }
-    searchOptions(keyword = '') {
+    onSearchOptions(evt) {
+        const keyword = evt.target.value;
         if (keyword === '') {
             this.multiSelectOptions.forEach(item => {
                 item.style.display = 'flex';
             });
         }
-        this.multiSelectOptions.forEach((item, cnt) => {
+        this.multiSelectOptions.forEach(item => {
             if (item.textContent.toLowerCase().indexOf(keyword.toLowerCase()) < 0) {
                 item.style.display = 'none';
             }
+            else {
+                item.style.display = 'flex';
+            }
         });
+        this.handleSelectAllDisableStatus();
+    }
+    handleSelectAllDisableStatus() {
+        this.checkboxSelectAll.disabled = this.getActiveOptions().length < 2;
+        this.selectAllEll.classList.toggle('ecl-checkbox--disabled', this.checkboxSelectAll.disabled);
     }
     resetComponent() {
         this.multiSelectOptions.forEach(el => {
@@ -8916,10 +8939,209 @@ class EclMultiselectComponent extends ECLBaseDirective {
             .stream('ecl.multiselect.SELECT-ALL')
             .pipe(takeUntil(this.destroy$)).subscribe((translation) => {
             if (this.checkboxLabel) {
-                this.checkboxLabel.textContent = translation;
+                this.checkboxLabel.lastElementChild.textContent = translation;
             }
         });
     }
+    closeMultiselectDropdown() {
+        this.multiDropdown.style.display = 'none';
+    }
+    openMultiselect() {
+        this.multiDropdown.style.display = 'block';
+    }
+    getOptionIndexByIdFromActiveOptions(id) {
+        return this.getActiveOptions().findIndex(option => option.firstElementChild.id === id);
+    }
+    handleClickOnMainInput(evt) {
+        evt.preventDefault();
+        this.toggleDropdown();
+    }
+    toggleDropdown() {
+        this.multiDropdown.style.display = this.multiDropdown.style.display === 'none' ? 'block' : 'none';
+    }
+    handleKeydownOnMainInput(evt) {
+        switch (evt.key) {
+            case KEY_CODE.ARROW_DOWN: {
+                this.onMainInputArrowDown(evt);
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    }
+    onMainInputArrowDown(evt) {
+        evt.preventDefault();
+        this.openMultiselect();
+        this.searchEl.focus();
+    }
+    handleKeydownOnSearch(evt) {
+        switch (evt.key) {
+            case KEY_CODE.ARROW_DOWN: {
+                this.onSearchArrowDown();
+                break;
+            }
+            case KEY_CODE.ARROW_UP: {
+                this.onSearchArrowUp(evt);
+                break;
+            }
+            case KEY_CODE.ESCAPE: {
+                this.closeMultiselectDropdown();
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    }
+    onSearchArrowDown() {
+        const currentOptions = this.getActiveOptions();
+        if (currentOptions.length > 1) {
+            this.checkboxSelectAll.focus();
+        }
+        else {
+            const firstOption = currentOptions[0].firstElementChild;
+            firstOption.focus();
+        }
+        ;
+    }
+    onSearchArrowUp(evt) {
+        evt.preventDefault();
+        this.closeMultiselectDropdown();
+        this.multiSelectInput.focus();
+    }
+    handleClickOnSelectAll() {
+        this.propagateTouched();
+        this.onSelectAll();
+    }
+    handleKeydownOnSelectAll(evt) {
+        switch (evt.key) {
+            case KEY_CODE.ARROW_DOWN: {
+                this.onSelectAllArrowDown(evt);
+                break;
+            }
+            case KEY_CODE.ARROW_UP: {
+                this.onSelectAllArrowUp();
+                break;
+            }
+            case KEY_CODE.ENTER: {
+                this.checkboxSelectAll.click();
+                break;
+            }
+            case KEY_CODE.ESCAPE: {
+                this.closeMultiselectDropdown();
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    }
+    onSelectAllArrowDown(evt) {
+        evt.preventDefault();
+        const currentOptions = this.getActiveOptions();
+        if (currentOptions.length > 0) {
+            const nextSiblingCheckbox = currentOptions[0].firstElementChild;
+            nextSiblingCheckbox.focus();
+        }
+    }
+    onSelectAllArrowUp() {
+        this.searchEl.focus();
+    }
+    handleClickOnOption(evt) {
+        this.updateCurrentValue();
+        this.propagateTouched();
+        this.eclChange.emit(this.selectedValues);
+    }
+    handleKeydownOnOption(evt) {
+        switch (evt.key) {
+            case KEY_CODE.ARROW_DOWN:
+                {
+                    this.onOptionArrowDown(evt);
+                    break;
+                }
+                ;
+            case KEY_CODE.ARROW_UP: {
+                this.onOptionArrowUp(evt);
+                break;
+            }
+            case KEY_CODE.ESCAPE: {
+                this.closeMultiselectDropdown();
+                break;
+            }
+            case KEY_CODE.ENTER: {
+                evt.target.click();
+                break;
+            }
+            case KEY_CODE.TAB: {
+                this.onOptionTab(evt);
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    }
+    onOptionArrowDown(evt) {
+        evt.preventDefault();
+        const index = this.getOptionIndexByIdFromActiveOptions(evt.target.id);
+        const currentOptions = this.getActiveOptions();
+        if (index !== currentOptions.length - 1) {
+            const nextSiblingCheckbox = currentOptions[index + 1].firstElementChild;
+            nextSiblingCheckbox.focus();
+        }
+        else {
+            this.multiSelectInput.focus();
+        }
+    }
+    onOptionArrowUp(evt) {
+        evt.preventDefault();
+        const index = this.getOptionIndexByIdFromActiveOptions(evt.target.id);
+        if (index !== 0) {
+            const prevSiblingCheckbox = this.getActiveOptions()[index - 1].firstElementChild;
+            prevSiblingCheckbox.focus();
+        }
+        else if (this.checkboxSelectAll.disabled) {
+            this.searchEl.focus();
+        }
+        else {
+            this.checkboxSelectAll.focus();
+        }
+    }
+    onOptionTab(evt) {
+        const index = this.getOptionIndexByIdFromActiveOptions(evt.target.id);
+        if (index === this.getActiveOptions().length - 1) {
+            this.multiSelectInput.focus(); // Trap tab
+            evt.preventDefault();
+        }
+    }
+    getActiveOptions() {
+        return this.multiSelectOptions.filter(item => item.style.display !== 'none' &&
+            !item.classList.contains('ecl-checkbox--disabled'));
+    }
+    removeAllListeners() {
+        this.multiSelectInput.removeEventListener('keydown', this.handleKeydownOnMainInput);
+        this.multiSelectInput.removeEventListener('click', this.handleClickOnMainInput);
+        this.searchEl.removeEventListener('keydown', this.handleKeydownOnSearch);
+        this.searchEl.removeEventListener('keyup', this.onSearchOptions);
+        this.checkboxSelectAll.removeEventListener('keydown', this.handleKeydownOnSelectAll);
+        this.checkboxSelectAll.removeEventListener('click', this.handleClickOnSelectAll);
+        this.multiSelectOptions.forEach(el => {
+            const checboxEl = el.firstElementChild;
+            checboxEl.removeEventListener('keydown', this.handleKeydownOnOption);
+            checboxEl.removeEventListener('click', this.handleClickOnOption);
+        });
+    }
+    bindCallbacks() {
+        this.handleKeydownOnMainInput = this.handleKeydownOnMainInput.bind(this);
+        this.handleKeydownOnSearch = this.handleKeydownOnSearch.bind(this);
+        this.onSearchOptions = this.onSearchOptions.bind(this);
+        this.handleKeydownOnSelectAll = this.handleKeydownOnSelectAll.bind(this);
+        this.handleKeydownOnOption = this.handleKeydownOnOption.bind(this);
+        this.handleClickOnMainInput = this.handleClickOnMainInput.bind(this);
+        this.handleClickOnSelectAll = this.handleClickOnSelectAll.bind(this);
+        this.handleClickOnOption = this.handleClickOnOption.bind(this);
+    }
 }
 /** @nocollapse */ EclMultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EclMultiselectComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.IterableDiffers }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
 /** @nocollapse */ EclMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: EclMultiselectComponent, selector: "select[eclMultiselect]", inputs: { isInvalid: "isInvalid", eclPlaceholder: "eclPlaceholder", disabled: "disabled", eclSize: "eclSize" }, outputs: { eclChange: "eclChange" }, host: { listeners: { "document:keyup.escape": "onEscapeKey($event)", "document:click": "onKeyUp($event)" }, properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclOptionItems", predicate: EclMultiselectOptionDirective }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>" });
@@ -10538,62 +10760,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
                 }]
         }] });
 
-class EclRadioLabelComponent extends ECLBaseDirective {
+class EclRadioHelpComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
-        this.isInvalid = false;
         this.isDisabled = false;
     }
     get cssClasses() {
         return [
-            super.getCssClasses('ecl-radio__label'),
+            super.getCssClasses('ecl-radio__help'),
         ].join(' ').trim();
     }
 }
-/** @nocollapse */ EclRadioLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EclRadioLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclRadioLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: EclRadioLabelComponent, selector: "[eclRadioLabel]", inputs: { isInvalid: "isInvalid", isDisabled: "isDisabled" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<!--\n    @TODO\n    Uncomment markup below once eui is fixed\n    Due to eui css spillover following markup has to be commented to avoid double radioes being drawn\n    https://webgate.ec.europa.eu/CITnet/jira/browse/EUI-3459\n-->\n\n<span class=\"ecl-radio__box\"\n    [class.ecl-radio__box--disabled]=\"isDisabled\"\n    [class.ecl-radio__box--invalid]=\"isInvalid\">\n</span>\n\n<ng-content></ng-content>\n", styles: [".ecl-radio__label{margin-top:0;margin-bottom:0}.ecl-radio__help{margin-bottom:0}.ecl-radio__box:before{box-sizing:initial}\n"], encapsulation: i0.ViewEncapsulation.None });
-__decorate([
-    coerceBoolean
-], EclRadioLabelComponent.prototype, "isInvalid", void 0);
+/** @nocollapse */ EclRadioHelpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EclRadioHelpComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ EclRadioHelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: EclRadioHelpComponent, selector: "[eclRadioHelp]", inputs: { isDisabled: "isDisabled" }, host: { properties: { "class.ecl-radio__help--disabled": "this.isDisabled", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" });
 __decorate([
     coerceBoolean
-], EclRadioLabelComponent.prototype, "isDisabled", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EclRadioLabelComponent, decorators: [{
+], EclRadioHelpComponent.prototype, "isDisabled", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EclRadioHelpComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[eclRadioLabel]', encapsulation: ViewEncapsulation.None, template: "<!--\n    @TODO\n    Uncomment markup below once eui is fixed\n    Due to eui css spillover following markup has to be commented to avoid double radioes being drawn\n    https://webgate.ec.europa.eu/CITnet/jira/browse/EUI-3459\n-->\n\n<span class=\"ecl-radio__box\"\n    [class.ecl-radio__box--disabled]=\"isDisabled\"\n    [class.ecl-radio__box--invalid]=\"isInvalid\">\n</span>\n\n<ng-content></ng-content>\n", styles: [".ecl-radio__label{margin-top:0;margin-bottom:0}.ecl-radio__help{margin-bottom:0}.ecl-radio__box:before{box-sizing:initial}\n"] }]
-        }], propDecorators: { isInvalid: [{
-                type: Input
-            }], isDisabled: [{
+            args: [{ selector: '[eclRadioHelp]', template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { isDisabled: [{
                 type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.ecl-radio__help--disabled']
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class EclRadioHelpComponent extends ECLBaseDirective {
+class EclRadioLabelComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
+        this.isInvalid = false;
         this.isDisabled = false;
     }
     get cssClasses() {
         return [
-            super.getCssClasses('ecl-radio__help'),
+            super.getCssClasses('ecl-radio__label'),
         ].join(' ').trim();
     }
 }
-/** @nocollapse */ EclRadioHelpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EclRadioHelpComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclRadioHelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: EclRadioHelpComponent, selector: "[eclRadioHelp]", inputs: { isDisabled: "isDisabled" }, host: { properties: { "class.ecl-radio__help--disabled": "this.isDisabled", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" });
+/** @nocollapse */ EclRadioLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EclRadioLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ EclRadioLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: EclRadioLabelComponent, selector: "[eclRadioLabel]", inputs: { isInvalid: "isInvalid", isDisabled: "isDisabled" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"ecl-radio__box\"\n    [class.ecl-radio__box--disabled]=\"isDisabled\"\n    [class.ecl-radio__box--invalid]=\"isInvalid\">\n</span>\n\n<ng-content></ng-content>\n", styles: [".ecl-radio__label{margin-top:0;margin-bottom:0}.ecl-radio__help{margin-bottom:0}.ecl-radio__box:before{box-sizing:initial}\n"], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     coerceBoolean
-], EclRadioHelpComponent.prototype, "isDisabled", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EclRadioHelpComponent, decorators: [{
+], EclRadioLabelComponent.prototype, "isInvalid", void 0);
+__decorate([
+    coerceBoolean
+], EclRadioLabelComponent.prototype, "isDisabled", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EclRadioLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[eclRadioHelp]', template: "<ng-content></ng-content>\n" }]
-        }], propDecorators: { isDisabled: [{
+            args: [{ selector: '[eclRadioLabel]', encapsulation: ViewEncapsulation.None, template: "<span class=\"ecl-radio__box\"\n    [class.ecl-radio__box--disabled]=\"isDisabled\"\n    [class.ecl-radio__box--invalid]=\"isInvalid\">\n</span>\n\n<ng-content></ng-content>\n", styles: [".ecl-radio__label{margin-top:0;margin-bottom:0}.ecl-radio__help{margin-bottom:0}.ecl-radio__box:before{box-sizing:initial}\n"] }]
+        }], propDecorators: { isInvalid: [{
+                type: Input
+            }], isDisabled: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.ecl-radio__help--disabled']
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -10611,10 +10833,7 @@ class EclRadioDirective extends ECLBaseDirective {
             this.isBinary ? 'ecl-radio--binary' : '',
         ].join(' ').trim();
     }
-    ngAfterContentInit() {
-        this.updateChildElements();
-    }
-    ngOnChanges() {
+    ngDoCheck() {
         this.updateChildElements();
     }
     updateChildElements() {
@@ -10628,7 +10847,7 @@ class EclRadioDirective extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclRadioDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EclRadioDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ EclRadioDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: EclRadioDirective, selector: "[eclRadio]", inputs: { isBinary: "isBinary", isDisabled: "isDisabled", isInvalid: "isInvalid" }, host: { properties: { "class.ecl-radio--disabled": "this.isDisabled", "class.ecl-radio--invalid": "this.isInvalid", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclRadioLabelComponent", first: true, predicate: i0.forwardRef(function () { return EclRadioLabelComponent; }), descendants: true }, { propertyName: "eclRadioHelpComponent", first: true, predicate: i0.forwardRef(function () { return EclRadioHelpComponent; }), descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+/** @nocollapse */ EclRadioDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: EclRadioDirective, selector: "[eclRadio]", inputs: { isBinary: "isBinary", isDisabled: "isDisabled", isInvalid: "isInvalid" }, host: { properties: { "class.ecl-radio--disabled": "this.isDisabled", "class.ecl-radio--invalid": "this.isInvalid", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclRadioLabelComponent", first: true, predicate: i0.forwardRef(function () { return EclRadioLabelComponent; }), descendants: true }, { propertyName: "eclRadioHelpComponent", first: true, predicate: i0.forwardRef(function () { return EclRadioHelpComponent; }), descendants: true }], usesInheritance: true, ngImport: i0 });
 __decorate([
     coerceBoolean
 ], EclRadioDirective.prototype, "isBinary", void 0);
@@ -10878,9 +11097,8 @@ class EclSelectDirective extends ECLBaseDirective {
         this.handleMarkup();
     }
     ngDoCheck() {
-        if (this.ngControl) {
-            this.hostWrapperEl.classList.toggle('ecl-select__container--disabled', this.ngControl.disabled || this.disabled);
-        }
+        this.hostWrapperEl.classList.toggle('ecl-select__container--disabled', this.ngControl?.disabled || this.disabled);
+        this.hostWrapperEl.classList.toggle('ecl-select__container--invalid', this.ngControl?.touched && this.ngControl?.invalid || this.isInvalid);
     }
     handleMarkup() {
         if (this.hostParentEl != null) {