@eui/ecl 15.0.0-next.18 → 15.0.0-next.20

package/fesm2015/eui-ecl.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, HostBinding, Component, ViewChild, EventEmitter, ChangeDetectionStrategy, Output, NgModule, ContentChildren, forwardRef, HostListener, Injectable, Optional, Self, ContentChild, Inject, ViewEncapsulation, ElementRef } from '@angular/core';
+import { Directive, Input, HostBinding, Component, ViewChild, EventEmitter, ChangeDetectionStrategy, Output, NgModule, ContentChildren, forwardRef, HostListener, Injectable, Optional, Inject, Self, ContentChild, ViewEncapsulation, ElementRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, formatDate } from '@angular/common';
 import * as i2 from '@ngx-translate/core';
@@ -8,8 +8,8 @@ import { __decorate } from 'tslib';
 import { coerceBoolean, coerceElement, coerceArray, coerceNumber, DefaultConfig, EuiPagination } from '@eui/base';
 import * as i2$1 from '@eui/core';
 import { GLOBAL_CONFIG_TOKEN } from '@eui/core';
-import { Subject, takeUntil as takeUntil$1, delay, fromEvent, of } from 'rxjs';
-import { takeUntil, mergeWith } from 'rxjs/operators';
+import { Subject, takeUntil, 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';
 import * as i2$2 from '@angular/router';
@@ -543,6 +543,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
             }] } });
 
 class EclDefaultLanguageService {
+    constructor(config, i18nService) {
+        this.config = config;
+        this.i18nService = i18nService;
+        this.currentLanguage$ = new Subject();
+        this.FALLBACK_LANGUAGE = { code: 'en', label: 'English' };
+        this.destroy$ = new Subject();
+        this.handleActiveLanguageChangeState();
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    getCurrentLanguage() {
+        return this.currentLanguage;
+    }
+    updateCurrentLanguage(lang) {
+        this.i18nService.updateState({
+            activeLang: lang.code
+        });
+    }
+    getConfiguredLanguages() {
+        var _a, _b, _c;
+        const languages = ((_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.i18n) === null || _b === void 0 ? void 0 : _b.i18nService) === null || _c === void 0 ? void 0 : _c.languages) || [];
+        return languages.map((code) => this.getLanguageByCode(code));
+    }
     getEULanguageCodes() {
         return [
             'bg', 'cs', 'da', 'de', 'et', 'el', 'en', 'es',
@@ -565,6 +590,9 @@ class EclDefaultLanguageService {
     isEuLanguage(code) {
         return this.getEULanguageCodes().includes(code);
     }
+    isRtlLanguage(code) {
+        return this.getLanguageByCode(code).isRtl;
+    }
     getAllLanguages() {
         return [
             { code: 'ab', label: 'аҧсуа' },
@@ -573,7 +601,7 @@ class EclDefaultLanguageService {
             { code: 'ak', label: 'Akan' },
             { code: 'sq', label: 'Shqip' },
             { code: 'am', label: 'አማርኛ' },
-            { code: 'ar', label: 'العربية' },
+            { code: 'ar', label: 'العربية', isRtl: true },
             { code: 'an', label: 'Aragonés' },
             { code: 'hy', label: 'Հայերեն' },
             { code: 'as', label: 'অসমীয়া' },
@@ -623,7 +651,7 @@ class EclDefaultLanguageService {
             { code: 'gu', label: 'ગુજરાતી' },
             { code: 'ht', label: 'Kreyòl ayisyen' },
             { code: 'ha', label: 'Hausa, هَوُسَ' },
-            { code: 'he', label: 'עברית' },
+            { code: 'he', label: 'עברית', isRtl: true },
             { code: 'hz', label: 'Otjiherero' },
             { code: 'hi', label: 'हिन्दी, हिंदी' },
             { code: 'ho', label: 'Hiri Motu' },
@@ -652,7 +680,7 @@ class EclDefaultLanguageService {
             { code: 'kv', label: 'коми кыв' },
             { code: 'kg', label: 'KiKongo' },
             { code: 'ko', label: '한국어 (韓國語), 조선말 (朝鮮語)' },
-            { code: 'ku', label: 'Kurdî, كوردی‎' },
+            { code: 'ku', label: 'Kurdî, كوردی‎', isRtl: true },
             { code: 'kj', label: 'Kuanyama' },
             { code: 'la', label: 'latine' },
             { code: 'lb', label: 'Lëtzebuergesch' },
@@ -691,7 +719,7 @@ class EclDefaultLanguageService {
             { code: 'os', label: 'ирон æвзаг' },
             { code: 'pa', label: 'ਪੰਜਾਬੀ, پنجابی‎' },
             { code: 'pi', label: 'पाऴि' },
-            { code: 'fa', label: 'فارسی' },
+            { code: 'fa', label: 'فارسی', isRtl: true },
             { code: 'pl', label: 'polski' },
             { code: 'ps', label: 'پښتو' },
             { code: 'pt', label: 'Português' },
@@ -736,7 +764,7 @@ class EclDefaultLanguageService {
             { code: 'ty', label: 'Reo Tahiti' },
             { code: 'ug', label: 'Uyƣurqə, ئۇيغۇرچە‎' },
             { code: 'uk', label: 'українська' },
-            { code: 'ur', label: 'اردو' },
+            { code: 'ur', label: 'اردو', isRtl: true },
             { code: 'uz', label: 'zbek, Ўзбек, أۇزبېك‎' },
             { code: 've', label: 'Tshivenḓa' },
             { code: 'vi', label: 'Tiếng Việt' },
@@ -751,13 +779,26 @@ class EclDefaultLanguageService {
             { code: 'za', label: 'Saɯ cueŋƅ, Saw cuengh' }
         ];
     }
+    handleActiveLanguageChangeState() {
+        this.i18nService.getState().pipe(takeUntil(this.destroy$)).subscribe(state => {
+            this.currentLanguage = this.getLanguageByCode(state.activeLang) || this.FALLBACK_LANGUAGE;
+            this.currentLanguage$.next(this.currentLanguage);
+        });
+    }
 }
-/** @nocollapse */ EclDefaultLanguageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclDefaultLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ EclDefaultLanguageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclDefaultLanguageService, deps: [{ token: GLOBAL_CONFIG_TOKEN, optional: true }, { token: i2$1.I18nService }], target: i0.ɵɵFactoryTarget.Injectable });
 /** @nocollapse */ EclDefaultLanguageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclDefaultLanguageService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclDefaultLanguageService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [GLOBAL_CONFIG_TOKEN]
+                    }] }, { type: i2$1.I18nService }];
+    } });
 
 class EclLanguageService {
 }
@@ -855,7 +896,7 @@ class EclLanguageListComponent extends ECLBaseDirective {
                     item.isActive = true;
                 }
                 item.itemClick
-                    .pipe(takeUntil(this.destroy$))
+                    .pipe(takeUntil$1(this.destroy$))
                     .subscribe(() => {
                     this.eclLanguageListItems.forEach(it => {
                         it.isActive = false;
@@ -1389,13 +1430,13 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         if (this.eclLoginComponent && this.eclSearchComponent) {
             this.eclLoginComponent
                 .loginBoxToggle
-                .pipe(takeUntil$1(this.destroy$))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe(evt => {
                 this.eclSearchComponent.isSearchBoxActive = false;
             });
             this.eclSearchComponent
                 .searchToggle
-                .pipe(takeUntil$1(this.destroy$))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe(evt => {
                 this.eclLoginComponent.isLoginBoxActive = false;
             });
@@ -1403,7 +1444,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         if (this.eclLanguageComponent) {
             this.eclLanguageComponent
                 .languageClick
-                .pipe(takeUntil$1(this.destroy$))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe(evt => {
                 this.languageClick.next(new EclSiteHeaderLanguageClickEvent());
             });
@@ -1423,7 +1464,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
     handlei18nEvents() {
         this.languageCode = this.getEULanguageCode(this.translateService.currentLang);
         this.translateService.onLangChange
-            .pipe(takeUntil$1(this.destroy$))
+            .pipe(takeUntil(this.destroy$))
             .subscribe((langChangeEvent) => {
             this.languageCode = this.getEULanguageCode(langChangeEvent.lang);
         });
@@ -1485,13 +1526,13 @@ class EclSiteHeaderComponentBase extends ECLBaseDirective {
         if (this.eclLoginComponent && this.eclSearchComponent) {
             this.eclLoginComponent
                 .loginBoxToggle
-                .pipe(takeUntil$1(this.destroy$))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe(evt => {
                 this.eclSearchComponent.isSearchBoxActive = false;
             });
             this.eclSearchComponent
                 .searchToggle
-                .pipe(takeUntil$1(this.destroy$))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe(evt => {
                 this.eclLoginComponent.isLoginBoxActive = false;
             });
@@ -1499,7 +1540,7 @@ class EclSiteHeaderComponentBase extends ECLBaseDirective {
         if (this.eclLanguageComponent) {
             this.eclLanguageComponent
                 .languageClick
-                .pipe(takeUntil$1(this.destroy$))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe(evt => {
                 this.languageClick.next(new EclSiteHeaderLanguageClickEvent());
             });
@@ -1522,7 +1563,7 @@ class EclSiteHeaderComponentBase extends ECLBaseDirective {
     handlei18nEvents() {
         this.languageCode = this.getEULanguageCode(this.translateService.currentLang);
         this.translateService.onLangChange
-            .pipe(takeUntil$1(this.destroy$))
+            .pipe(takeUntil(this.destroy$))
             .subscribe((langChangeEvent) => {
             this.languageCode = this.getEULanguageCode(langChangeEvent.lang);
         });
@@ -2653,16 +2694,14 @@ class EclAppLanguageDismissEvent extends EclBaseEvent {
     }
 }
 class EclAppComponent extends ECLBaseDirective {
-    constructor(config, eclLanguageService, i18nService, cd) {
+    constructor(eclLanguageService, cd) {
         super();
-        this.config = config;
         this.eclLanguageService = eclLanguageService;
-        this.i18nService = i18nService;
         this.cd = cd;
+        this.textDirection = 'ltr';
         this.languageDismiss = new EventEmitter();
         this.languages = [];
         this.destroy$ = new Subject();
-        this.FALLBACK_LANGUAGE = { code: 'en', label: 'English' };
     }
     ngAfterViewInit() {
         this.handleAppLanguagesState();
@@ -2675,36 +2714,30 @@ class EclAppComponent extends ECLBaseDirective {
         this.destroy$.unsubscribe();
     }
     handleAppLanguagesState() {
-        var _a, _b, _c;
-        const languages = ((_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.i18n) === null || _b === void 0 ? void 0 : _b.i18nService) === null || _c === void 0 ? void 0 : _c.languages) || [];
-        this.languages = languages.map((code) => this.eclLanguageService.getLanguageByCode(code));
+        this.languages = this.eclLanguageService.getConfiguredLanguages();
         this.cd.detectChanges();
     }
     handleActiveLanguageChangeState() {
-        this.i18nService.getState().subscribe(state => {
-            const lang = this.eclLanguageService.getLanguageByCode(state.activeLang) || this.FALLBACK_LANGUAGE;
+        this.eclLanguageService.currentLanguage$.pipe(takeUntil$1(this.destroy$)).subscribe(lang => {
             this.syncLanguageDataWithUI(lang);
             this.hideLanguageListUI();
         });
     }
     handleSiteHeaderUIEvents() {
         if (this.eclSiteHeader && this.eclSiteHeader.eclLanguageComponent) {
-            this.eclSiteHeader.eclLanguageComponent.languageClick.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.eclSiteHeader.eclLanguageComponent.languageClick.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
                 this.showLanguageListUI();
             });
         }
     }
     handleLanguageListUIEvents() {
-        this.eclLanguageList.close.pipe(takeUntil(this.destroy$)).subscribe(() => {
+        this.eclLanguageList.close.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
             this.hideLanguageListUI();
             this.languageDismiss.next(new EclAppLanguageDismissEvent());
         });
-        this.eclLanguageList.languageSelected.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
-            const lang = evt.language;
-            this.i18nService.updateState({
-                activeLang: lang.code
-            });
-            this.languageDismiss.next(new EclAppLanguageDismissEvent(lang));
+        this.eclLanguageList.languageSelected.pipe(takeUntil$1(this.destroy$)).subscribe((evt) => {
+            this.eclLanguageService.updateCurrentLanguage(evt.language);
+            this.languageDismiss.next(new EclAppLanguageDismissEvent(evt.language));
             this.cd.detectChanges();
         });
     }
@@ -2724,21 +2757,18 @@ class EclAppComponent extends ECLBaseDirective {
             this.eclSiteHeader.eclLanguageComponent.languageLabel = lang.label;
         }
         this.eclLanguageList.selectedLanguageCode = lang.code;
+        this.textDirection = lang.isRtl ? 'rtl' : 'ltr';
     }
 }
-/** @nocollapse */ EclAppComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclAppComponent, deps: [{ token: GLOBAL_CONFIG_TOKEN, optional: true }, { token: EclLanguageService }, { token: i2$1.I18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclAppComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclAppComponent, selector: "ecl-app", outputs: { languageDismiss: "languageDismiss" }, queries: [{ propertyName: "eclSiteHeader", first: true, predicate: EclSiteHeaderComponent, descendants: true }], viewQueries: [{ propertyName: "eclLanguageList", first: true, predicate: EclLanguageListComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n\n<ecl-language-list \n    [isHidden]=\"true\"\n    [isOverlay]=\"true\">\n    <ecl-language-list-item \n        *ngFor=\"let lang of languages\" \n        [languageCode]=\"lang.code\" \n        [languageLabel]=\"lang.label\">\n    </ecl-language-list-item>\n</ecl-language-list>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: EclLanguageListComponent, selector: "ecl-language-list", inputs: ["isOverlay", "selectedLanguageCode", "isHidden"], outputs: ["languageSelected", "close"] }, { kind: "component", type: EclLanguageListItemComponent, selector: "ecl-language-list-item", inputs: ["isActive", "languageCode", "languageLabel"], outputs: ["itemClick"] }] });
+/** @nocollapse */ EclAppComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclAppComponent, deps: [{ token: EclLanguageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ EclAppComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclAppComponent, selector: "ecl-app", outputs: { languageDismiss: "languageDismiss" }, host: { properties: { "attr.dir": "this.textDirection" } }, queries: [{ propertyName: "eclSiteHeader", first: true, predicate: EclSiteHeaderComponent, descendants: true }], viewQueries: [{ propertyName: "eclLanguageList", first: true, predicate: EclLanguageListComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n\n<ecl-language-list \n    [isHidden]=\"true\"\n    [isOverlay]=\"true\">\n    <ecl-language-list-item \n        *ngFor=\"let lang of languages\" \n        [languageCode]=\"lang.code\" \n        [languageLabel]=\"lang.label\">\n    </ecl-language-list-item>\n</ecl-language-list>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: EclLanguageListComponent, selector: "ecl-language-list", inputs: ["isOverlay", "selectedLanguageCode", "isHidden"], outputs: ["languageSelected", "close"] }, { kind: "component", type: EclLanguageListItemComponent, selector: "ecl-language-list-item", inputs: ["isActive", "languageCode", "languageLabel"], outputs: ["itemClick"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclAppComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-app', template: "<ng-content></ng-content>\n\n<ecl-language-list \n    [isHidden]=\"true\"\n    [isOverlay]=\"true\">\n    <ecl-language-list-item \n        *ngFor=\"let lang of languages\" \n        [languageCode]=\"lang.code\" \n        [languageLabel]=\"lang.label\">\n    </ecl-language-list-item>\n</ecl-language-list>" }]
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [GLOBAL_CONFIG_TOKEN]
-                    }] }, { type: EclLanguageService }, { type: i2$1.I18nService }, { type: i0.ChangeDetectorRef }];
-    }, propDecorators: { eclSiteHeader: [{
+        }], ctorParameters: function () { return [{ type: EclLanguageService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { textDirection: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], eclSiteHeader: [{
                 type: ContentChild,
                 args: [EclSiteHeaderComponent]
             }], eclLanguageList: [{
@@ -2787,17 +2817,17 @@ class EclAppComponentBase {
     }
     handleSiteHeaderUIEvents() {
         if (this.eclSiteHeader && this.eclSiteHeader.eclLanguageComponent) {
-            this.eclSiteHeader.eclLanguageComponent.languageClick.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.eclSiteHeader.eclLanguageComponent.languageClick.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
                 this.showLanguageListUI();
             });
         }
     }
     handleLanguageListUIEvents() {
-        this.eclLanguageList.close.pipe(takeUntil(this.destroy$)).subscribe(() => {
+        this.eclLanguageList.close.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
             this.hideLanguageListUI();
             this.languageDismiss.next(new EclAppLanguageDismissEvent());
         });
-        this.eclLanguageList.languageSelected.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+        this.eclLanguageList.languageSelected.pipe(takeUntil$1(this.destroy$)).subscribe((evt) => {
             const lang = evt.language;
             this.i18nService.updateState({
                 activeLang: lang.code
@@ -3126,7 +3156,7 @@ class EclBreadcrumbComponentBase extends ECLBaseDirective {
     }
     ngOnInit() {
         this.translate.stream('ecl.breadcrumb.YOU-ARE-HERE')
-            .pipe(takeUntil$1(this.destroy$)).subscribe(text => {
+            .pipe(takeUntil(this.destroy$)).subscribe(text => {
             this.ariaLabel = text;
         });
     }
@@ -3614,7 +3644,7 @@ class EclBreadcrumbComponent extends ECLBaseDirective {
     }
     ngOnInit() {
         this.translate.stream('ecl.breadcrumb.YOU-ARE-HERE')
-            .pipe(takeUntil$1(this.destroy$)).subscribe(text => {
+            .pipe(takeUntil(this.destroy$)).subscribe(text => {
             this.ariaLabel = text;
         });
     }
@@ -4091,7 +4121,7 @@ class EclCategoryFilterComponent extends ECLBaseDirective {
     }
     connectCategoryfilterItemEvents(item) {
         item.itemSelect
-            .pipe(takeUntil$1(this.destroy$))
+            .pipe(takeUntil(this.destroy$))
             .subscribe((evt) => { this.onItemSelected(evt); });
     }
     onItemSelected(evt) {
@@ -5035,11 +5065,12 @@ const ECL_DATE_PICKER_VALUE_ACCESSOR = {
 };
 const noop = () => { };
 class EclDatePickerDirective extends ECLBaseDirective {
-    constructor(el, viewContainerRef, translateService) {
+    constructor(el, viewContainerRef, translateService, eclLanguageService) {
         super();
         this.el = el;
         this.viewContainerRef = viewContainerRef;
         this.translateService = translateService;
+        this.eclLanguageService = eclLanguageService;
         this.yearRange = 40;
         this.format = 'DD-MM-YYYY';
         this.type = 'text';
@@ -5090,6 +5121,8 @@ class EclDatePickerDirective extends ECLBaseDirective {
     initPikaday() {
         const i18nKey = 'ecl.date-picker.PIKADAY';
         let i18nTranslation = this.translateService.instant(i18nKey);
+        const isRtl = this.eclLanguageService.getCurrentLanguage().isRtl;
+        const position = isRtl ? 'bottom right' : 'bottom left';
         if (!i18nTranslation || i18nTranslation === i18nKey) {
             i18nTranslation = pikadayDefaultI18n;
         }
@@ -5100,23 +5133,27 @@ class EclDatePickerDirective extends ECLBaseDirective {
             yearRange: this.yearRange,
             reposition: false,
             i18n: i18nTranslation,
+            isRtl: isRtl,
+            position: position,
             showDaysInNextAndPreviousMonths: true,
             enableSelectionDaysInNextAndPreviousMonths: true,
             onSelect: this.onSelectDate.bind(this),
             onOpen() {
-                // Fix picker size that exceeds vw on mobile
+                // Extend picker size on mobile
                 const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
                 const elRect = this.el.getBoundingClientRect();
-                if (elRect.width >= vw) {
+                const pickerMargin = isRtl ? vw - elRect.right : elRect.left;
+                if (vw < 768) {
                     this.el.style.width = 'auto';
-                    this.el.style.right = `${elRect.left}px`;
+                    this.el.style.left = `${pickerMargin}px`;
+                    this.el.style.right = `${pickerMargin}px`;
                 }
             },
         });
     }
     handlei18nEvents() {
         this.translateService.onLangChange
-            .pipe(takeUntil$1(this.destroy$))
+            .pipe(takeUntil(this.destroy$))
             .subscribe((langChangeEvent) => {
             this.initPikaday();
         });
@@ -5155,7 +5192,7 @@ class EclDatePickerDirective extends ECLBaseDirective {
         return eclIconComponent.location.nativeElement;
     }
 }
-/** @nocollapse */ EclDatePickerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclDatePickerDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ EclDatePickerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclDatePickerDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i2.TranslateService }, { token: EclLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
 /** @nocollapse */ EclDatePickerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclDatePickerDirective, selector: "input[eclDatePicker]", inputs: { yearRange: "yearRange", format: "format" }, outputs: { datePicked: "datePicked" }, host: { listeners: { "click": "onClick()", "blur": "onBlur()" }, properties: { "attr.type": "this.type", "class": "this.cssClasses", "attr.disabled": "this.isDisabled" } }, providers: [ECL_DATE_PICKER_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclDatePickerDirective, decorators: [{
             type: Directive,
@@ -5163,7 +5200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                     selector: 'input[eclDatePicker]',
                     providers: [ECL_DATE_PICKER_VALUE_ACCESSOR]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i2.TranslateService }]; }, propDecorators: { yearRange: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i2.TranslateService }, { type: EclLanguageService }]; }, propDecorators: { yearRange: [{
                 type: Input
             }], format: [{
                 type: Input
@@ -5748,7 +5785,7 @@ class EclFileUploadDirective extends ECLBaseDirective {
         let uploadButtonLabelKey = this.geti18nUploadButtonLabelKey();
         this.translate
             .stream(uploadButtonLabelKey)
-            .pipe(takeUntil(this.destroy$)).subscribe((translation) => {
+            .pipe(takeUntil$1(this.destroy$)).subscribe((translation) => {
             if (this.buttonEl) {
                 this.buttonEl.textContent = translation;
             }
@@ -6391,7 +6428,7 @@ class EclGalleryComponent extends ECLBaseDirective {
         this.itemsCount = this.galleryItems.length;
         this.galleryItems.forEach(item => {
             item.itemClick
-                .pipe(takeUntil(this.destroy$))
+                .pipe(takeUntil$1(this.destroy$))
                 .subscribe(_ => {
                 this.isDialogVisible = true;
                 this.item = item;
@@ -6485,7 +6522,7 @@ class EclGalleryComponent extends ECLBaseDirective {
     }
     observeBreakpointChanges() {
         this.cdkBreakpointObserver.observe([Breakpoints.Handset, Breakpoints.Tablet])
-            .pipe(takeUntil(this.destroy$), delay(this.BREAKPOINT_CHANGES_TIMEOUT))
+            .pipe(takeUntil$1(this.destroy$), delay(this.BREAKPOINT_CHANGES_TIMEOUT))
             .subscribe(result => {
             this.isMobile = result.matches;
             this.hideItems();
@@ -6846,10 +6883,10 @@ class EclStickyContainerComponent extends ECLBaseDirective {
             !this.isEnabled ? 'ecl-sticky-container--disabled' : ''
         ].join(' ').trim();
     }
-    top() {
+    get top() {
         return this.marginTop || null;
     }
-    bottom() {
+    get bottom() {
         return this.marginBottom || null;
     }
 }
@@ -6926,14 +6963,14 @@ class EclInpageNavigationComponent extends ECLBaseDirective {
     handleNavigationItemsScroll() {
         const scrollableContainer = window;
         const sectionElementIds = this.eclNavigationLinkItems.map(item => item.sectionId);
-        fromEvent(scrollableContainer, 'scroll').pipe(takeUntil(this.destroy$)).subscribe((event) => {
+        fromEvent(scrollableContainer, 'scroll').pipe(takeUntil$1(this.destroy$)).subscribe((event) => {
             const sectionElements = sectionElementIds.map(id => document.querySelector(`#${id}`));
             this.handleNavigationLinksHighlight(sectionElements);
         });
     }
     handleNavigationItemsClick() {
         this.eclNavigationLinkItems.forEach(item => {
-            item.itemClick.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            item.itemClick.pipe(takeUntil$1(this.destroy$)).subscribe((evt) => {
                 this.selectNavigationItem(this.eclNavigationLinkItems, item.sectionElement);
                 if (item.sectionElement) {
                     item.sectionElement.scrollIntoView();
@@ -6981,12 +7018,16 @@ class EclInpageNavigationComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclInpageNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclInpageNavigationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclInpageNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclInpageNavigationComponent, selector: "ecl-inpage-navigation", inputs: { eclTitle: "eclTitle" }, outputs: { sectionEnter: "sectionEnter" }, queries: [{ propertyName: "eclNavigationLinkItems", predicate: EclInpageNavigationItemComponent }], usesInheritance: true, ngImport: i0, template: "<ecl-sticky-container>\n    <nav class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"currentSectionElement\">\n        <div class=\"ecl-inpage-navigation__title\">\n            {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n        </div>\n        <div class=\"ecl-inpage-navigation__body\">\n            <button\n                type=\"button\"\n                class=\"ecl-inpage-navigation__trigger\"\n                aria-controls=\"ecl-inpage-navigation-list\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                (click)=\"onExpandButtonClick($event)\">\n                <span class=\"ecl-inpage-navigation__trigger-current\">\n                    {{ currentNavigationLinkItem?.label }}\n                </span>\n                <ecl-icon \n                    icon=\"corner-arrow\" \n                    size=\"s\" \n                    transform=\"rotate-180\" \n                    class=\"ecl-inpage-navigation__trigger-icon\">\n                </ecl-icon>\n            </button>\n            <ul class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                aria-labelledby=\"ecl-inpage-navigation-trigger\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </nav>\n</ecl-sticky-container>\n", styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"], dependencies: [{ kind: "component", type: EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: ["isEnabled", "marginTop", "marginBottom"] }, { 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 */ EclInpageNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclInpageNavigationComponent, selector: "ecl-inpage-navigation", inputs: { eclTitle: "eclTitle", marginTop: "marginTop", marginBottom: "marginBottom" }, outputs: { sectionEnter: "sectionEnter" }, queries: [{ propertyName: "eclNavigationLinkItems", predicate: EclInpageNavigationItemComponent }], usesInheritance: true, ngImport: i0, template: "<ecl-sticky-container [marginTop]=\"marginTop\" [marginBottom]=\"marginBottom\">\n    <nav class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"currentSectionElement\">\n        <div class=\"ecl-inpage-navigation__title\">\n            {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n        </div>\n        <div class=\"ecl-inpage-navigation__body\">\n            <button\n                type=\"button\"\n                class=\"ecl-inpage-navigation__trigger\"\n                aria-controls=\"ecl-inpage-navigation-list\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                (click)=\"onExpandButtonClick($event)\">\n                <span class=\"ecl-inpage-navigation__trigger-current\">\n                    {{ currentNavigationLinkItem?.label }}\n                </span>\n                <ecl-icon \n                    icon=\"corner-arrow\" \n                    size=\"s\" \n                    transform=\"rotate-180\" \n                    class=\"ecl-inpage-navigation__trigger-icon\">\n                </ecl-icon>\n            </button>\n            <ul class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                aria-labelledby=\"ecl-inpage-navigation-trigger\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </nav>\n</ecl-sticky-container>\n", styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"], dependencies: [{ kind: "component", type: EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: ["isEnabled", "marginTop", "marginBottom"] }, { 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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclInpageNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-inpage-navigation', template: "<ecl-sticky-container>\n    <nav class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"currentSectionElement\">\n        <div class=\"ecl-inpage-navigation__title\">\n            {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n        </div>\n        <div class=\"ecl-inpage-navigation__body\">\n            <button\n                type=\"button\"\n                class=\"ecl-inpage-navigation__trigger\"\n                aria-controls=\"ecl-inpage-navigation-list\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                (click)=\"onExpandButtonClick($event)\">\n                <span class=\"ecl-inpage-navigation__trigger-current\">\n                    {{ currentNavigationLinkItem?.label }}\n                </span>\n                <ecl-icon \n                    icon=\"corner-arrow\" \n                    size=\"s\" \n                    transform=\"rotate-180\" \n                    class=\"ecl-inpage-navigation__trigger-icon\">\n                </ecl-icon>\n            </button>\n            <ul class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                aria-labelledby=\"ecl-inpage-navigation-trigger\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </nav>\n</ecl-sticky-container>\n", styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"] }]
+            args: [{ selector: 'ecl-inpage-navigation', template: "<ecl-sticky-container [marginTop]=\"marginTop\" [marginBottom]=\"marginBottom\">\n    <nav class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"currentSectionElement\">\n        <div class=\"ecl-inpage-navigation__title\">\n            {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n        </div>\n        <div class=\"ecl-inpage-navigation__body\">\n            <button\n                type=\"button\"\n                class=\"ecl-inpage-navigation__trigger\"\n                aria-controls=\"ecl-inpage-navigation-list\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                (click)=\"onExpandButtonClick($event)\">\n                <span class=\"ecl-inpage-navigation__trigger-current\">\n                    {{ currentNavigationLinkItem?.label }}\n                </span>\n                <ecl-icon \n                    icon=\"corner-arrow\" \n                    size=\"s\" \n                    transform=\"rotate-180\" \n                    class=\"ecl-inpage-navigation__trigger-icon\">\n                </ecl-icon>\n            </button>\n            <ul class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                aria-labelledby=\"ecl-inpage-navigation-trigger\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </nav>\n</ecl-sticky-container>\n", styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"] }]
         }], propDecorators: { eclTitle: [{
                 type: Input
+            }], marginTop: [{
+                type: Input
+            }], marginBottom: [{
+                type: Input
             }], sectionEnter: [{
                 type: Output
             }], eclNavigationLinkItems: [{
@@ -7512,7 +7553,7 @@ class EclMenuMegaComponent extends ECLBaseDirective {
         this.destroy$.unsubscribe();
     }
     createContentChildrenMenuObservable() {
-        return of(this.eclMenuMegaItems).pipe(mergeWith(this.eclMenuMegaItems.changes), takeUntil(this.destroy$));
+        return of(this.eclMenuMegaItems).pipe(mergeWith(this.eclMenuMegaItems.changes), takeUntil$1(this.destroy$));
     }
     onMenuItemChanges() {
         this.diff = this.differ.diff(this.eclMenuMegaItems);
@@ -7529,7 +7570,7 @@ class EclMenuMegaComponent extends ECLBaseDirective {
     }
     connectMenuItemEvents(item) {
         item.menuItemSelect
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe((evt) => {
             this.onMenuItemSelected(item, evt);
         });
@@ -7632,7 +7673,7 @@ class EclMenuItemComponent extends ECLBaseDirective {
     ngAfterContentInit() {
         if (this.submenu) {
             this.submenu.menuItemSelect
-                .pipe(takeUntil(this.destroy$))
+                .pipe(takeUntil$1(this.destroy$))
                 .subscribe((it) => {
                 this.menuMegaItemSelect.next(new EclMenuItemSelectEvent(it.menuItem, it.domEvent));
             });
@@ -7813,7 +7854,7 @@ class EclMenuComponent extends ECLBaseDirective {
         return this.eclRootMenuItems.some(item => item.isExpanded);
     }
     createRootMenuItemsChangesObservable() {
-        return of(this.eclRootMenuItems).pipe(mergeWith(this.eclRootMenuItems.changes), takeUntil(this.destroy$));
+        return of(this.eclRootMenuItems).pipe(mergeWith(this.eclRootMenuItems.changes), takeUntil$1(this.destroy$));
     }
     onMenuItemChanges() {
         this.diff = this.differ.diff(this.eclRootMenuItems);
@@ -7830,19 +7871,19 @@ class EclMenuComponent extends ECLBaseDirective {
     }
     connectMenuItemEvents(item) {
         item.menuItemSelect
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe((evt) => { this.onRootMenuItemSelected(evt); });
         item.menuItemHover
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe((evt) => { this.onRootMenuItemHovered(evt); });
         item.menuItemHoverOut
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe((evt) => { this.onRootMenuItemHoveredOut(evt); });
         item.menuMegaItemSelect
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe((evt) => { this.onMenuMegaItemSelected(item, evt); });
         item.menuItemFocus
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe((evt) => { this.onRootMenuItemFocused(item, evt); });
     }
     onRootMenuItemFocused(item, evt) {
@@ -7965,7 +8006,7 @@ class EclMenuComponent extends ECLBaseDirective {
     observeRootMenuItemsChanges() {
         this.diff = this.differ.diff(this.eclRootMenuItems);
         this.createRootMenuItemsChangesObservable()
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe(this.onMenuItemChanges.bind(this));
     }
     observeSwipeGestures() {
@@ -7974,7 +8015,7 @@ class EclMenuComponent extends ECLBaseDirective {
     }
     observeBreakpointChanges() {
         this.cdkBreakpointObserver.observe([Breakpoints.Handset, Breakpoints.Tablet, Breakpoints.Small])
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe(result => {
             this.isMobileBreakpoint = result.matches;
         });
@@ -8258,12 +8299,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
             }] } });
 
 class EclMultiselectComponent extends ECLBaseDirective {
-    constructor(ngControl, el, viewContainerRef, differs) {
+    constructor(ngControl, el, viewContainerRef, differs, translate) {
         super();
         this.ngControl = ngControl;
         this.el = el;
         this.viewContainerRef = viewContainerRef;
         this.differs = differs;
+        this.translate = translate;
         this.isInvalid = false;
         this._disabled = false;
         this.eclSize = 'm';
@@ -8313,6 +8355,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
             this.createHtmlElements();
             this.buildMultiselectDropdown(false);
         }
+        this.handleTranslations();
     }
     ngDoCheck() {
         this.multiselectContainer.classList.toggle('ecl-select__container--disabled', this.disabled);
@@ -8366,7 +8409,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
         }
     }
     onOptionsChange() {
-        this.eclOptionItems.forEach(i => i.changes.pipe(takeUntil$1(this.destroy$)).subscribe(e => {
+        this.eclOptionItems.forEach(i => i.changes.pipe(takeUntil(this.destroy$)).subscribe(e => {
             setTimeout(() => {
                 this.multiselectWrapper.removeChild(this.multiDropdown);
                 this.multiDropdown.remove();
@@ -8539,8 +8582,8 @@ class EclMultiselectComponent extends ECLBaseDirective {
             this.selectAll();
         };
         checkboxDiv.appendChild(this.checkboxSelectAll);
-        const checkboxLabel = this.createCheckboxLabel('Select all', 'select-multiple-all' + idStr.substring(idStr.lastIndexOf('.') + 1));
-        checkboxDiv.appendChild(checkboxLabel);
+        this.checkboxLabel = this.createCheckboxLabel('Select all', 'select-multiple-all' + idStr.substring(idStr.lastIndexOf('.') + 1));
+        checkboxDiv.appendChild(this.checkboxLabel);
         return checkboxDiv;
     }
     createOptionsWrapper() {
@@ -8582,14 +8625,14 @@ class EclMultiselectComponent extends ECLBaseDirective {
         selectIconContainer.classList.add('ecl-select__icon');
         return selectIconContainer;
     }
-    searchOptions(keyword) {
+    searchOptions(keyword = '') {
         if (keyword === '') {
             this.multiSelectOptions.forEach(item => {
                 item.style.display = 'flex';
             });
         }
         this.multiSelectOptions.forEach((item, cnt) => {
-            if (item.textContent.toLowerCase().indexOf(keyword) < 0) {
+            if (item.textContent.toLowerCase().indexOf(keyword.toLowerCase()) < 0) {
                 item.style.display = 'none';
             }
         });
@@ -8605,8 +8648,17 @@ class EclMultiselectComponent extends ECLBaseDirective {
         this.selectedValues = [];
         this.multiSelectInput.value = null;
     }
+    handleTranslations() {
+        this.translate
+            .stream('ecl.multiselect.SELECT-ALL')
+            .pipe(takeUntil(this.destroy$)).subscribe((translation) => {
+            if (this.checkboxLabel) {
+                this.checkboxLabel.textContent = translation;
+            }
+        });
+    }
 }
-/** @nocollapse */ EclMultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclMultiselectComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ EclMultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", 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-next.4", type: EclMultiselectComponent, selector: "select[eclMultiselect]", inputs: { isInvalid: "isInvalid", eclPlaceholder: "eclPlaceholder", disabled: "disabled", eclSize: "eclSize" }, outputs: { eclChange: "eclChange" }, host: { listeners: { "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>" });
 __decorate([
     coerceBoolean
@@ -8619,7 +8671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         type: Optional
                     }, {
                         type: Self
-                    }] }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.IterableDiffers }];
+                    }] }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.IterableDiffers }, { type: i2.TranslateService }];
     }, propDecorators: { eclOptionItems: [{
                 type: ContentChildren,
                 args: [EclMultiselectOptionDirective]
@@ -8796,7 +8848,6 @@ class EclNewsTickerItemComponent extends ECLBaseDirective {
         super();
         this.el = el;
         this.ariaHidden = true;
-        this.tabindex = '-1';
         this.role = 'listitem';
     }
     get cssClasses() {
@@ -8811,7 +8862,7 @@ class EclNewsTickerItemComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclNewsTickerItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclNewsTickerItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclNewsTickerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclNewsTickerItemComponent, selector: "ecl-news-ticker-item", host: { properties: { "class": "this.cssClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabindex", "attr.role": "this.role" } }, queries: [{ propertyName: "eclLink", first: true, predicate: EclLinkDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" });
+/** @nocollapse */ EclNewsTickerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclNewsTickerItemComponent, selector: "ecl-news-ticker-item", host: { properties: { "class": "this.cssClasses", "attr.aria-hidden": "this.ariaHidden", "attr.role": "this.role" } }, queries: [{ propertyName: "eclLink", first: true, predicate: EclLinkDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclNewsTickerItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-news-ticker-item', template: "<ng-content></ng-content>\n" }]
@@ -8824,9 +8875,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
             }], ariaHidden: [{
                 type: HostBinding,
                 args: ['attr.aria-hidden']
-            }], tabindex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -8926,6 +8974,7 @@ class EclNewsTickerComponent extends ECLBaseDirective {
             this._contentHeight = newHeight;
             this.transitionDuration = withTransition ? 0.4 : 0;
             this.slidesTransform = `translate3d(0px, -${newOffset}px, 0px)`;
+            this.setCurrentSlide(item);
         }
     }
     initContainer() {
@@ -8977,15 +9026,23 @@ class EclNewsTickerComponent extends ECLBaseDirective {
     getAllItemsArray() {
         return [...[this.firstHiddenItem], ...this.newsTickerItems.toArray(), ...[this.lastHiddenItem]];
     }
+    setCurrentSlide(currentItem) {
+        this.newsTickerItems.forEach(item => {
+            item.ariaHidden = true;
+            if (item === currentItem) {
+                item.ariaHidden = false;
+            }
+        });
+    }
 }
 /** @nocollapse */ EclNewsTickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclNewsTickerComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclNewsTickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclNewsTickerComponent, selector: "ecl-news-ticker", outputs: { itemSwitch: "itemSwitch" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "newsTickerItems", predicate: EclNewsTickerItemComponent }], viewQueries: [{ propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-news-ticker__container\"\n    [style.height.px]=\"containerHeight\">\n    <div class=\"ecl-news-ticker__content\"\n        [style.height.px]=\"contentHeight\">\n        <ul class=\"ecl-news-ticker__slides\"\n            [style.transition-duration.s]=\"transitionDuration\"\n            [style.transform]=\"slidesTransform\"\n            #slidesContainer >\n            <ecl-news-ticker-item #firstHiddenItem></ecl-news-ticker-item>\n            <ng-content></ng-content>\n            <ecl-news-ticker-item #lastHiddenItem></ecl-news-ticker-item>\n        </ul>\n    </div>\n</div>\n<ecl-icon icon=\"information\"\n    size=\"m\"\n    class=\"ecl-news-ticker__icon\"></ecl-icon>\n<div class=\"ecl-news-ticker__counter\">\n    <span class=\"ecl-news-ticker__counter--current\">{{ itemIndex }}</span> of {{ itemsCount }}\n</div>\n<div class=\"ecl-news-ticker__controls\">\n    <button eclButton\n        variant=\"primary\"\n        tabindex=\"-1\"\n        class=\"ecl-news-ticker__prev\"\n        (click)=\"onPrevious()\">\n        <ecl-icon icon=\"corner-arrow\"\n            size=\"m\"\n            transform=\"rotate-270\"></ecl-icon>\n    </button>\n    <button eclButton\n        variant=\"primary\"\n        tabindex=\"-1\"\n        class=\"ecl-news-ticker__toggle\"\n        (click)=\"togglePlay()\">\n        <ecl-icon [icon]=\"playing ? 'pause' : 'play'\"\n            size=\"m\"></ecl-icon>\n    </button>\n    <button eclButton\n        variant=\"primary\"\n        tabindex=\"-1\"\n        class=\"ecl-news-ticker__next\"\n        (click)=\"onNext()\">\n        <ecl-icon icon=\"corner-arrow\"\n            size=\"m\"\n            transform=\"rotate-90\">\n        </ecl-icon>\n    </button>\n</div>\n", dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclNewsTickerItemComponent, selector: "ecl-news-ticker-item" }] });
+/** @nocollapse */ EclNewsTickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclNewsTickerComponent, selector: "ecl-news-ticker", outputs: { itemSwitch: "itemSwitch" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "newsTickerItems", predicate: EclNewsTickerItemComponent }], viewQueries: [{ propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-news-ticker__container\"\n    [style.height.px]=\"containerHeight\">\n    <div class=\"ecl-news-ticker__content\"\n        [style.height.px]=\"contentHeight\">\n        <ul class=\"ecl-news-ticker__slides\"\n            [style.transition-duration.s]=\"transitionDuration\"\n            [style.transform]=\"slidesTransform\"\n            #slidesContainer >\n            <ecl-news-ticker-item #firstHiddenItem></ecl-news-ticker-item>\n            <ng-content></ng-content>\n            <ecl-news-ticker-item #lastHiddenItem></ecl-news-ticker-item>\n        </ul>\n    </div>\n</div>\n<ecl-icon icon=\"information\"\n    size=\"m\"\n    class=\"ecl-news-ticker__icon\"></ecl-icon>\n<div class=\"ecl-news-ticker__counter\">\n    <span class=\"ecl-news-ticker__counter--current\"> {{ itemIndex }}</span> \n    {{ 'ecl.common.OF' | translate }}\n    <span class=\"ecl-news-ticker__counter--max\">{{ itemsCount }}</span>\n</div>\n<div class=\"ecl-news-ticker__controls\">\n    <button eclButton\n        variant=\"primary\"\n        class=\"ecl-news-ticker__prev\"\n        (click)=\"onPrevious()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.PREV-NEWS' | translate }}\n        </span>\n        <ecl-icon icon=\"corner-arrow\"\n            size=\"m\"\n            transform=\"rotate-270\"></ecl-icon>\n    </button>\n    <button eclButton\n        variant=\"primary\"\n        class=\"ecl-news-ticker__toggle\"\n        (click)=\"togglePlay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.AUTO-PLAY' | translate }}\n        </span>\n        <ecl-icon [icon]=\"playing ? 'pause' : 'play'\" size=\"m\"></ecl-icon>\n    </button>\n    <button eclButton\n        variant=\"primary\"\n        class=\"ecl-news-ticker__next\"\n        (click)=\"onNext()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.NEXT-NEWS' | translate }}\n        </span>\n        <ecl-icon icon=\"corner-arrow\"\n            size=\"m\"\n            transform=\"rotate-90\">\n        </ecl-icon>\n    </button>\n</div>\n", dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclNewsTickerItemComponent, selector: "ecl-news-ticker-item" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 __decorate([
     coerceElement
 ], EclNewsTickerComponent.prototype, "slidesContainer", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclNewsTickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-news-ticker', template: "<div class=\"ecl-news-ticker__container\"\n    [style.height.px]=\"containerHeight\">\n    <div class=\"ecl-news-ticker__content\"\n        [style.height.px]=\"contentHeight\">\n        <ul class=\"ecl-news-ticker__slides\"\n            [style.transition-duration.s]=\"transitionDuration\"\n            [style.transform]=\"slidesTransform\"\n            #slidesContainer >\n            <ecl-news-ticker-item #firstHiddenItem></ecl-news-ticker-item>\n            <ng-content></ng-content>\n            <ecl-news-ticker-item #lastHiddenItem></ecl-news-ticker-item>\n        </ul>\n    </div>\n</div>\n<ecl-icon icon=\"information\"\n    size=\"m\"\n    class=\"ecl-news-ticker__icon\"></ecl-icon>\n<div class=\"ecl-news-ticker__counter\">\n    <span class=\"ecl-news-ticker__counter--current\">{{ itemIndex }}</span> of {{ itemsCount }}\n</div>\n<div class=\"ecl-news-ticker__controls\">\n    <button eclButton\n        variant=\"primary\"\n        tabindex=\"-1\"\n        class=\"ecl-news-ticker__prev\"\n        (click)=\"onPrevious()\">\n        <ecl-icon icon=\"corner-arrow\"\n            size=\"m\"\n            transform=\"rotate-270\"></ecl-icon>\n    </button>\n    <button eclButton\n        variant=\"primary\"\n        tabindex=\"-1\"\n        class=\"ecl-news-ticker__toggle\"\n        (click)=\"togglePlay()\">\n        <ecl-icon [icon]=\"playing ? 'pause' : 'play'\"\n            size=\"m\"></ecl-icon>\n    </button>\n    <button eclButton\n        variant=\"primary\"\n        tabindex=\"-1\"\n        class=\"ecl-news-ticker__next\"\n        (click)=\"onNext()\">\n        <ecl-icon icon=\"corner-arrow\"\n            size=\"m\"\n            transform=\"rotate-90\">\n        </ecl-icon>\n    </button>\n</div>\n" }]
+            args: [{ selector: 'ecl-news-ticker', template: "<div class=\"ecl-news-ticker__container\"\n    [style.height.px]=\"containerHeight\">\n    <div class=\"ecl-news-ticker__content\"\n        [style.height.px]=\"contentHeight\">\n        <ul class=\"ecl-news-ticker__slides\"\n            [style.transition-duration.s]=\"transitionDuration\"\n            [style.transform]=\"slidesTransform\"\n            #slidesContainer >\n            <ecl-news-ticker-item #firstHiddenItem></ecl-news-ticker-item>\n            <ng-content></ng-content>\n            <ecl-news-ticker-item #lastHiddenItem></ecl-news-ticker-item>\n        </ul>\n    </div>\n</div>\n<ecl-icon icon=\"information\"\n    size=\"m\"\n    class=\"ecl-news-ticker__icon\"></ecl-icon>\n<div class=\"ecl-news-ticker__counter\">\n    <span class=\"ecl-news-ticker__counter--current\"> {{ itemIndex }}</span> \n    {{ 'ecl.common.OF' | translate }}\n    <span class=\"ecl-news-ticker__counter--max\">{{ itemsCount }}</span>\n</div>\n<div class=\"ecl-news-ticker__controls\">\n    <button eclButton\n        variant=\"primary\"\n        class=\"ecl-news-ticker__prev\"\n        (click)=\"onPrevious()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.PREV-NEWS' | translate }}\n        </span>\n        <ecl-icon icon=\"corner-arrow\"\n            size=\"m\"\n            transform=\"rotate-270\"></ecl-icon>\n    </button>\n    <button eclButton\n        variant=\"primary\"\n        class=\"ecl-news-ticker__toggle\"\n        (click)=\"togglePlay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.AUTO-PLAY' | translate }}\n        </span>\n        <ecl-icon [icon]=\"playing ? 'pause' : 'play'\" size=\"m\"></ecl-icon>\n    </button>\n    <button eclButton\n        variant=\"primary\"\n        class=\"ecl-news-ticker__next\"\n        (click)=\"onNext()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.NEXT-NEWS' | translate }}\n        </span>\n        <ecl-icon icon=\"corner-arrow\"\n            size=\"m\"\n            transform=\"rotate-90\">\n        </ecl-icon>\n    </button>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { itemSwitch: [{
                 type: Output
             }], newsTickerItems: [{
@@ -10067,7 +10124,7 @@ class EclPaginationItemComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclPaginationItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPaginationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclPaginationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: { label: "label", ariaLabel: "ariaLabel", isCurrent: "isCurrent", isNext: "isNext", isPrevious: "isPrevious", href: "href" }, outputs: { pageClick: "pageClick" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"!isCurrent\"\n    eclLink\n    (click)=\"onPageClick($event)\"\n    variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate:{ pageNumber: label} }}\"\n    [href]=\"href\"\n    class=\"ecl-pagination__link\">\n    <ng-container *ngIf=\"isPrevious\">\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n    </ng-container>\n    <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>\n    <ng-container *ngIf=\"isNext\">\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n    </ng-container>\n</a>\n\n<ng-container *ngIf=\"isCurrent\">\n    <span class=\"ecl-pagination__text ecl-pagination__text--summary\"\n        attr.aria-label=\"{{ ariaLabel || 'ecl.pagination.PAGE' | translate:{ pageNumber: label} }}\"\n        aria-current=\"true\">\n        {{ label }}\n    </span>\n    <span class=\"ecl-pagination__text ecl-pagination__text--full\"\n        aria-current=\"true\">\n        {{ 'ecl.pagination.PAGE' | translate:{ pageNumber: label} }}\n    </span>\n</ng-container>\n", dependencies: [{ 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: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclPaginationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: { label: "label", ariaLabel: "ariaLabel", isCurrent: "isCurrent", isNext: "isNext", isPrevious: "isPrevious", href: "href" }, outputs: { pageClick: "pageClick" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"!isCurrent\"\n    eclLink\n    (click)=\"onPageClick($event)\"\n    variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate:{ pageNumber: label} }}\"\n    [href]=\"href\"\n    class=\"ecl-pagination__link\">\n    <ng-container *ngIf=\"isPrevious\">\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n    </ng-container>\n    <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>\n    <ng-container *ngIf=\"isNext\">\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n    </ng-container>\n</a>\n\n<ng-container *ngIf=\"isCurrent\">\n    <span class=\"ecl-pagination__text ecl-pagination__text--summary\"\n        aria-current=\"true\">\n        {{ label }}\n    </span>\n    <span class=\"ecl-pagination__text ecl-pagination__text--full\"\n        aria-current=\"true\">\n        {{ 'ecl.pagination.PAGE' | translate:{ pageNumber: label} }}\n    </span>\n</ng-container>\n", dependencies: [{ 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: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 __decorate([
     coerceBoolean
 ], EclPaginationItemComponent.prototype, "isCurrent", void 0);
@@ -10079,7 +10136,7 @@ __decorate([
 ], EclPaginationItemComponent.prototype, "isPrevious", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPaginationItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-pagination-item', template: "<a *ngIf=\"!isCurrent\"\n    eclLink\n    (click)=\"onPageClick($event)\"\n    variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate:{ pageNumber: label} }}\"\n    [href]=\"href\"\n    class=\"ecl-pagination__link\">\n    <ng-container *ngIf=\"isPrevious\">\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n    </ng-container>\n    <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>\n    <ng-container *ngIf=\"isNext\">\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n    </ng-container>\n</a>\n\n<ng-container *ngIf=\"isCurrent\">\n    <span class=\"ecl-pagination__text ecl-pagination__text--summary\"\n        attr.aria-label=\"{{ ariaLabel || 'ecl.pagination.PAGE' | translate:{ pageNumber: label} }}\"\n        aria-current=\"true\">\n        {{ label }}\n    </span>\n    <span class=\"ecl-pagination__text ecl-pagination__text--full\"\n        aria-current=\"true\">\n        {{ 'ecl.pagination.PAGE' | translate:{ pageNumber: label} }}\n    </span>\n</ng-container>\n" }]
+            args: [{ selector: 'ecl-pagination-item', template: "<a *ngIf=\"!isCurrent\"\n    eclLink\n    (click)=\"onPageClick($event)\"\n    variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate:{ pageNumber: label} }}\"\n    [href]=\"href\"\n    class=\"ecl-pagination__link\">\n    <ng-container *ngIf=\"isPrevious\">\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n    </ng-container>\n    <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>\n    <ng-container *ngIf=\"isNext\">\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n    </ng-container>\n</a>\n\n<ng-container *ngIf=\"isCurrent\">\n    <span class=\"ecl-pagination__text ecl-pagination__text--summary\"\n        aria-current=\"true\">\n        {{ label }}\n    </span>\n    <span class=\"ecl-pagination__text ecl-pagination__text--full\"\n        aria-current=\"true\">\n        {{ 'ecl.pagination.PAGE' | translate:{ pageNumber: label} }}\n    </span>\n</ng-container>\n" }]
         }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -12399,7 +12456,7 @@ class EclTableDirective extends ECLBaseDirective {
         const diff = this.differ.diff(this.eclTableHeaders);
         if (diff) {
             diff.forEachAddedItem(change => {
-                change.item.sort.pipe(takeUntil(this.destroy$))
+                change.item.sort.pipe(takeUntil$1(this.destroy$))
                     .subscribe((evt) => {
                     this.sort.emit(evt);
                 });
@@ -12451,7 +12508,7 @@ class EclTableHeadDirective extends ECLBaseDirective {
         const diff = this.differ.diff(this.eclTableHeaders);
         if (diff) {
             diff.forEachAddedItem(change => {
-                change.item.sort.pipe(takeUntil(this.destroy$))
+                change.item.sort.pipe(takeUntil$1(this.destroy$))
                     .subscribe((evt) => {
                     this.eclTableHeaders.forEach(th => {
                         th.removeAriaSort();
@@ -12821,11 +12878,11 @@ class EclTabsComponent extends ECLBaseDirective {
     observeTabsChanges() {
         this.diff = this.differ.diff(this.tabs);
         this.createTabsChangesObservable()
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe(this.onTabsChanges.bind(this));
     }
     createTabsChangesObservable() {
-        return of(this.tabs).pipe(mergeWith(this.tabs.changes), takeUntil(this.destroy$));
+        return of(this.tabs).pipe(mergeWith(this.tabs.changes), takeUntil$1(this.destroy$));
     }
     onTabsChanges() {
         this.diff = this.differ.diff(this.tabs);
@@ -12842,7 +12899,7 @@ class EclTabsComponent extends ECLBaseDirective {
     }
     connectTabEvents(tab) {
         tab.select
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe(() => {
             this.deactivateAllTabs(this.tabs.toArray());
             this.activateTab(tab);
@@ -13150,7 +13207,7 @@ class EclTimelineItemComponent extends ECLBaseDirective {
     ngAfterContentInit() {
         if (this.timelineItemToggler) {
             this.timelineItemToggler.toggle
-                .pipe(takeUntil(this.destroy$))
+                .pipe(takeUntil$1(this.destroy$))
                 .subscribe(() => {
                 this.handleToggler();
             });
@@ -13229,7 +13286,7 @@ class EclTimelineComponent extends ECLBaseDirective {
         this.timelineItems
             .filter(item => item.isToggler)
             .forEach(it => {
-            it.toggle.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            it.toggle.pipe(takeUntil$1(this.destroy$)).subscribe((evt) => {
                 if (this.timelineItems && !evt.defaultPrevented) {
                     this.timelineItems
                         .filter(item => item.toggleGroup === evt.toggleGroup)