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

package/fesm2020/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';
@@ -543,6 +543,25 @@ 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.handleActiveLanguageChangeState();
+    }
+    getCurrentLanguage() {
+        return this.currentLanguage;
+    }
+    updateCurrentLanguage(lang) {
+        this.i18nService.updateState({
+            activeLang: lang.code
+        });
+    }
+    getConfiguredLanguages() {
+        const languages = this.config?.i18n?.i18nService?.languages || [];
+        return languages.map((code) => this.getLanguageByCode(code));
+    }
     getEULanguageCodes() {
         return [
             'bg', 'cs', 'da', 'de', 'et', 'el', 'en', 'es',
@@ -565,6 +584,9 @@ class EclDefaultLanguageService {
     isEuLanguage(code) {
         return this.getEULanguageCodes().includes(code);
     }
+    isRtlLanguage(code) {
+        return this.getLanguageByCode(code).isRtl;
+    }
     getAllLanguages() {
         return [
             { code: 'ab', label: 'аҧсуа' },
@@ -573,7 +595,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 +645,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 +674,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 +713,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 +758,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 +773,24 @@ class EclDefaultLanguageService {
             { code: 'za', label: 'Saɯ cueŋƅ, Saw cuengh' }
         ];
     }
+    handleActiveLanguageChangeState() {
+        this.i18nService.getState().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 {
 }
@@ -2651,16 +2684,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();
@@ -2673,13 +2704,11 @@ class EclAppComponent extends ECLBaseDirective {
         this.destroy$.unsubscribe();
     }
     handleAppLanguagesState() {
-        const languages = this.config?.i18n?.i18nService?.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$.subscribe(lang => {
             this.syncLanguageDataWithUI(lang);
             this.hideLanguageListUI();
         });
@@ -2697,11 +2726,8 @@ class EclAppComponent extends ECLBaseDirective {
             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.eclLanguageService.updateCurrentLanguage(evt.language);
+            this.languageDismiss.next(new EclAppLanguageDismissEvent(evt.language));
             this.cd.detectChanges();
         });
     }
@@ -2721,19 +2747,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: [{
@@ -5019,11 +5044,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';
@@ -5074,6 +5100,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;
         }
@@ -5084,16 +5112,20 @@ 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`;
                 }
             },
         });
@@ -5139,7 +5171,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,
@@ -5147,7 +5179,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
@@ -8237,12 +8269,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';
@@ -8292,6 +8325,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
             this.createHtmlElements();
             this.buildMultiselectDropdown(false);
         }
+        this.handleTranslations();
     }
     ngDoCheck() {
         this.multiselectContainer.classList.toggle('ecl-select__container--disabled', this.disabled);
@@ -8518,8 +8552,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() {
@@ -8561,14 +8595,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';
             }
         });
@@ -8584,8 +8618,17 @@ class EclMultiselectComponent extends ECLBaseDirective {
         this.selectedValues = [];
         this.multiSelectInput.value = null;
     }
+    handleTranslations() {
+        this.translate
+            .stream('ecl.multiselect.SELECT-ALL')
+            .pipe(takeUntil$1(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
@@ -8597,7 +8640,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 }]; }, propDecorators: { eclOptionItems: [{
+                }] }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.IterableDiffers }, { type: i2.TranslateService }]; }, propDecorators: { eclOptionItems: [{
                 type: ContentChildren,
                 args: [EclMultiselectOptionDirective]
             }], isInvalid: [{
@@ -8773,7 +8816,6 @@ class EclNewsTickerItemComponent extends ECLBaseDirective {
         super();
         this.el = el;
         this.ariaHidden = true;
-        this.tabindex = '-1';
         this.role = 'listitem';
     }
     get cssClasses() {
@@ -8788,7 +8830,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" }]
@@ -8801,9 +8843,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']
@@ -8903,6 +8942,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() {
@@ -8954,15 +8994,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: [{
@@ -10044,7 +10092,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);
@@ -10056,7 +10104,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']