@eui/ecl 15.0.0-rc.17 → 15.0.0-rc.19

package/fesm2020/eui-ecl.mjs

@@ -6,6 +6,7 @@ import * as i2 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { __decorate } from 'tslib';
 import { coerceBoolean, coerceElement, coerceNumber, coerceArray, DefaultConfig, EuiPagination } from '@eui/base';
+import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i2$1 from '@eui/core';
 import { GLOBAL_CONFIG_TOKEN } from '@eui/core';
 import { ReplaySubject, Subject, takeUntil, switchMap, interval, delay, fromEvent, of } from 'rxjs';
@@ -19,7 +20,6 @@ import { LayoutModule, Breakpoints } from '@angular/cdk/layout';
 import * as Pikaday from 'pikaday';
 import * as i1$3 from '@angular/platform-browser';
 import * as Hammer from 'hammerjs';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { BaseDirective } from '@eui/components/shared';
 
 class EclBaseEvent {
@@ -32,6 +32,10 @@ class EclBaseEvent {
 }
 
 class ECLBaseDirective {
+    get tabindex() {
+        return this._tabindex || null;
+    }
+    set tabindex(value) { this._tabindex = coerceNumberProperty(value); }
     getCssClasses(rootClass) {
         return [
             rootClass,
@@ -40,7 +44,7 @@ class ECLBaseDirective {
     }
 }
 /** @nocollapse */ ECLBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ECLBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ ECLBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: ECLBaseDirective, selector: "[eclBase]", inputs: { class: "class", e2eAttr: "e2eAttr" }, host: { properties: { "attr.data-e2e": "this.e2eAttr" } }, ngImport: i0 });
+/** @nocollapse */ ECLBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: ECLBaseDirective, selector: "[eclBase]", inputs: { class: "class", e2eAttr: "e2eAttr", tabindex: "tabindex" }, host: { properties: { "attr.data-e2e": "this.e2eAttr", "attr.tabindex": "this.tabindex" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ECLBaseDirective, decorators: [{
             type: Directive,
             args: [{
@@ -53,6 +57,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
                 args: ['attr.data-e2e']
             }, {
                 type: Input
+            }], tabindex: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.tabindex']
             }] } });
 
 class EclIconComponent extends ECLBaseDirective {
@@ -399,6 +408,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
         }] });
 
 class EclLinkDirective extends ECLBaseDirective {
+    constructor(el) {
+        super();
+        this.el = el;
+    }
     get cssClasses() {
         return [
             super.getCssClasses('ecl-link'),
@@ -450,7 +463,7 @@ class EclLinkDirective extends ECLBaseDirective {
         });
     }
 }
-/** @nocollapse */ EclLinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EclLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ EclLinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EclLinkDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
 /** @nocollapse */ EclLinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: EclLinkDirective, selector: "[eclLink]", inputs: { variant: "variant", isNegative: "isNegative", isNoVisited: "isNoVisited" }, host: { properties: { "class.ecl-link--negative": "this.isNegative", "class.ecl-link--no-visited": "this.isNoVisited", "class": "this.cssClasses", "class.ecl-link--icon-after": "this.hasRightIcon", "class.ecl-link--icon-before": "this.hasLeftIcon", "class.ecl-link--icon": "this.hasIcon" } }, queries: [{ propertyName: "eclIconComponents", predicate: i0.forwardRef(function () { return EclIconComponent; }) }], usesInheritance: true, ngImport: i0 });
 __decorate([
     coerceBoolean
@@ -463,7 +476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
             args: [{
                     selector: '[eclLink]'
                 }]
-        }], propDecorators: { variant: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { variant: [{
                 type: Input
             }], isNegative: [{
                 type: Input
@@ -475,6 +488,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
             }, {
                 type: HostBinding,
                 args: ['class.ecl-link--no-visited']
+            }], eclIconComponents: [{
+                type: ContentChildren,
+                args: [forwardRef(() => EclIconComponent)]
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -487,9 +503,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
             }], hasIcon: [{
                 type: HostBinding,
                 args: ['class.ecl-link--icon']
-            }], eclIconComponents: [{
-                type: ContentChildren,
-                args: [forwardRef(() => EclIconComponent)]
             }] } });
 
 class EclLanguageListItemClickEvent extends EclBaseEvent {
@@ -9333,37 +9346,76 @@ class EclNewsTickerItemComponent extends ECLBaseDirective {
     constructor(el) {
         super();
         this.el = el;
-        this.ariaHidden = true;
+        this.itemFocused = new EventEmitter();
         this.role = 'listitem';
+        this._isCurrent = false;
+        this.destroy$ = new Subject();
     }
     get cssClasses() {
         return [
             super.getCssClasses('ecl-news-ticker__slide'),
         ].join(' ').trim();
     }
+    get isCurrent() {
+        return this._isCurrent;
+    }
+    set isCurrent(value) {
+        this._isCurrent = value;
+        if (this.eclLink) {
+            this.setLinkTabindex();
+        }
+    }
+    get isAriahidden() {
+        return !this.isCurrent || undefined;
+    }
+    get isInert() {
+        return !this.isCurrent || undefined;
+    }
     ngAfterContentInit() {
         if (this.eclLink) {
             this.eclLink.class = 'ecl-news-ticker__slide-text';
         }
+        if (this.eclLink) {
+            fromEvent(this.eclLink.el.nativeElement, 'focus').pipe(takeUntil(this.destroy$)).subscribe(() => {
+                this.itemFocused.emit();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    setLinkTabindex() {
+        if (this._isCurrent) {
+            this.eclLink.tabindex = null;
+        }
+        else {
+            this.eclLink.tabindex = -1;
+        }
     }
 }
 /** @nocollapse */ EclNewsTickerItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", 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", 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" });
+/** @nocollapse */ EclNewsTickerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: EclNewsTickerItemComponent, selector: "ecl-news-ticker-item", outputs: { itemFocused: "itemFocused" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.aria-hidden": "this.isAriahidden", "attr.inert": "this.isInert" } }, 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", ngImport: i0, type: EclNewsTickerItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-news-ticker-item', template: "<ng-content></ng-content>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { eclLink: [{
                 type: ContentChild,
                 args: [EclLinkDirective]
+            }], itemFocused: [{
+                type: Output
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
-            }], ariaHidden: [{
-                type: HostBinding,
-                args: ['attr.aria-hidden']
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
+            }], isAriahidden: [{
+                type: HostBinding,
+                args: ['attr.aria-hidden']
+            }], isInert: [{
+                type: HostBinding,
+                args: ['attr.inert']
             }] } });
 
 class EclNewsTickerItemEvent extends EclBaseEvent {
@@ -9383,6 +9435,8 @@ class EclNewsTickerComponent extends ECLBaseDirective {
         this.slidesTransform = '';
         this.PLAY_INTERVAL = 5000;
         this.INIT_DELAY = 300;
+        this.pausePlay = false;
+        this.destroy$ = new Subject();
     }
     get cssClasses() {
         return [
@@ -9394,6 +9448,7 @@ class EclNewsTickerComponent extends ECLBaseDirective {
     get itemsCount() {
         return this.newsTickerItems.length;
     }
+    get isShowControls() { return this.newsTickerItems.length > 1; }
     onResize(event) {
         setTimeout(() => {
             this.resizeTicker();
@@ -9404,12 +9459,22 @@ class EclNewsTickerComponent extends ECLBaseDirective {
         setTimeout(() => {
             this.initContainer();
         }, this.INIT_DELAY);
+        this.newsTickerItems.forEach(item => {
+            item.itemFocused.pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                this.cancelAutoplay();
+            });
+        });
     }
     ngOnDestroy() {
         if (this.intervalId) {
             clearInterval(this.intervalId);
         }
-        this.unsubscribeListener();
+        if (this.unsubscribeListener) {
+            this.unsubscribeListener();
+        }
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
     }
     onPrevious() {
         this.cancelAutoplay();
@@ -9439,14 +9504,9 @@ class EclNewsTickerComponent extends ECLBaseDirective {
         }
         this.itemSwitch.next(new EclNewsTickerItemEvent(this.itemIndex));
     }
-    togglePlay() {
-        if (!this.playing) {
-            this.intervalId = setInterval(() => this.nextSlide(), this.PLAY_INTERVAL);
-        }
-        else {
-            clearInterval(this.intervalId);
-        }
-        this.playing = !this.playing;
+    startAutoplay() {
+        this.playing = true;
+        this.intervalId = setInterval(() => this.nextSlide(), this.PLAY_INTERVAL);
     }
     cancelAutoplay() {
         if (this.intervalId) {
@@ -9454,6 +9514,18 @@ class EclNewsTickerComponent extends ECLBaseDirective {
         }
         this.playing = false;
     }
+    onNewsTickerItemMouseOver() {
+        if (this.playing) {
+            this.pausePlay = true;
+            this.cancelAutoplay();
+        }
+    }
+    onNewsTickerItemMouseOut() {
+        if (this.pausePlay) {
+            this.pausePlay = false;
+            this.startAutoplay();
+        }
+    }
     moveSlides(item, withTransition) {
         if (item) {
             const newOffset = item.el.nativeElement.offsetTop;
@@ -9465,13 +9537,18 @@ class EclNewsTickerComponent extends ECLBaseDirective {
         }
     }
     initContainer() {
+        if (this.newsTickerItems.length === 1) {
+            this.resizeTicker();
+            this.moveSlides(this.getFirstItem(this.newsTickerItems.toArray()), false);
+            return;
+        }
         this.firstHiddenItem.el.nativeElement.innerHTML = this.getLastContentChild();
         this.lastHiddenItem.el.nativeElement.innerHTML = this.getFirstContentChild();
         this.unsubscribeListener = this.renderer2.listen(this.slidesContainer, 'transitionend', () => this.checkIndex());
         this.resizeTicker();
         this.moveSlides(this.getFirstItem(this.newsTickerItems.toArray()), false);
         if (this.isAutoplay) {
-            this.togglePlay();
+            this.startAutoplay();
         }
     }
     checkIndex() {
@@ -9518,15 +9595,15 @@ class EclNewsTickerComponent extends ECLBaseDirective {
     }
     setCurrentSlide(currentItem) {
         this.newsTickerItems.forEach(item => {
-            item.ariaHidden = true;
+            item.isCurrent = false;
             if (item === currentItem) {
-                item.ariaHidden = false;
+                item.isCurrent = true;
             }
         });
     }
 }
 /** @nocollapse */ EclNewsTickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", 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", type: EclNewsTickerComponent, selector: "ecl-news-ticker", inputs: { isAutoplay: "isAutoplay" }, 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    <ecl-icon icon=\"information\"\n        size=\"m\"\n        class=\"ecl-news-ticker__icon\"></ecl-icon>\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\n\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 isInverted\n            icon=\"corner-arrow\"\n            size=\"l\"\n            transform=\"rotate-270\"\n            class=\"ecl-news-ticker__icon-default\"></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 isInverted\n            icon=\"corner-arrow\"\n            size=\"l\"\n            transform=\"rotate-90\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <button \n        eclButton \n        variant=\"primary\"\n        class=\"ecl-news-ticker__play\"\n        [class.ecl-u-d-none]=\"playing\"\n        (click)=\"togglePlay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.AUTO-PLAY' | translate }}\n        </span>\n        <ecl-icon isInverted\n            icon=\"play\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        <ecl-icon isInverted\n            icon=\"play-filled\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-active\"></ecl-icon>\n    </button>\n    <button\n        eclButton \n        variant=\"primary\"\n        class=\"ecl-news-ticker__pause\"\n        [class.ecl-u-d-none]=\"!playing\"\n        (click)=\"togglePlay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.PAUSE' | translate }}\n        </span>\n        <ecl-icon isInverted\n            icon=\"pause\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        <ecl-icon isInverted\n            icon=\"pause-filled\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-active\"></ecl-icon>\n    </button>\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>\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" }] });
+/** @nocollapse */ EclNewsTickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: EclNewsTickerComponent, selector: "ecl-news-ticker", inputs: { isAutoplay: "isAutoplay" }, 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    <ecl-icon icon=\"information\"\n        size=\"m\"\n        class=\"ecl-news-ticker__icon\"></ecl-icon>\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            (mouseover)=\"onNewsTickerItemMouseOver()\"\n            (mouseout)=\"onNewsTickerItemMouseOut()\"\n            #slidesContainer>\n            <ecl-news-ticker-item #firstHiddenItem *ngIf=\"isShowControls\"></ecl-news-ticker-item>\n            <ng-content></ng-content>\n            <ecl-news-ticker-item #lastHiddenItem *ngIf=\"isShowControls\"></ecl-news-ticker-item>\n        </ul>\n    </div>\n</div>\n\n\n<div class=\"ecl-news-ticker__controls\" *ngIf=\"isShowControls\">\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 isInverted\n            icon=\"corner-arrow\"\n            size=\"l\"\n            transform=\"rotate-270\"\n            class=\"ecl-news-ticker__icon-default\"></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 isInverted\n            icon=\"corner-arrow\"\n            size=\"l\"\n            transform=\"rotate-90\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <button \n        eclButton \n        variant=\"primary\"\n        class=\"ecl-news-ticker__play\"\n        [class.ecl-u-d-none]=\"playing\"\n        (click)=\"startAutoplay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.AUTO-PLAY' | translate }}\n        </span>\n        <ecl-icon isInverted\n            icon=\"play\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        <ecl-icon isInverted\n            icon=\"play-filled\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-active\"></ecl-icon>\n    </button>\n    <button\n        eclButton \n        variant=\"primary\"\n        class=\"ecl-news-ticker__pause\"\n        [class.ecl-u-d-none]=\"!playing\"\n        (click)=\"cancelAutoplay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.PAUSE' | translate }}\n        </span>\n        <ecl-icon isInverted\n            icon=\"pause\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        <ecl-icon isInverted\n            icon=\"pause-filled\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-active\"></ecl-icon>\n    </button>\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>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", outputs: ["itemFocused"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 __decorate([
     coerceBoolean
 ], EclNewsTickerComponent.prototype, "isAutoplay", void 0);
@@ -9535,7 +9612,7 @@ __decorate([
 ], EclNewsTickerComponent.prototype, "slidesContainer", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", 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    <ecl-icon icon=\"information\"\n        size=\"m\"\n        class=\"ecl-news-ticker__icon\"></ecl-icon>\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\n\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 isInverted\n            icon=\"corner-arrow\"\n            size=\"l\"\n            transform=\"rotate-270\"\n            class=\"ecl-news-ticker__icon-default\"></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 isInverted\n            icon=\"corner-arrow\"\n            size=\"l\"\n            transform=\"rotate-90\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <button \n        eclButton \n        variant=\"primary\"\n        class=\"ecl-news-ticker__play\"\n        [class.ecl-u-d-none]=\"playing\"\n        (click)=\"togglePlay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.AUTO-PLAY' | translate }}\n        </span>\n        <ecl-icon isInverted\n            icon=\"play\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        <ecl-icon isInverted\n            icon=\"play-filled\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-active\"></ecl-icon>\n    </button>\n    <button\n        eclButton \n        variant=\"primary\"\n        class=\"ecl-news-ticker__pause\"\n        [class.ecl-u-d-none]=\"!playing\"\n        (click)=\"togglePlay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.PAUSE' | translate }}\n        </span>\n        <ecl-icon isInverted\n            icon=\"pause\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        <ecl-icon isInverted\n            icon=\"pause-filled\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-active\"></ecl-icon>\n    </button>\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>\n" }]
+            args: [{ selector: 'ecl-news-ticker', template: "<div class=\"ecl-news-ticker__container\"\n    [style.height.px]=\"containerHeight\">\n    <ecl-icon icon=\"information\"\n        size=\"m\"\n        class=\"ecl-news-ticker__icon\"></ecl-icon>\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            (mouseover)=\"onNewsTickerItemMouseOver()\"\n            (mouseout)=\"onNewsTickerItemMouseOut()\"\n            #slidesContainer>\n            <ecl-news-ticker-item #firstHiddenItem *ngIf=\"isShowControls\"></ecl-news-ticker-item>\n            <ng-content></ng-content>\n            <ecl-news-ticker-item #lastHiddenItem *ngIf=\"isShowControls\"></ecl-news-ticker-item>\n        </ul>\n    </div>\n</div>\n\n\n<div class=\"ecl-news-ticker__controls\" *ngIf=\"isShowControls\">\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 isInverted\n            icon=\"corner-arrow\"\n            size=\"l\"\n            transform=\"rotate-270\"\n            class=\"ecl-news-ticker__icon-default\"></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 isInverted\n            icon=\"corner-arrow\"\n            size=\"l\"\n            transform=\"rotate-90\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <button \n        eclButton \n        variant=\"primary\"\n        class=\"ecl-news-ticker__play\"\n        [class.ecl-u-d-none]=\"playing\"\n        (click)=\"startAutoplay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.AUTO-PLAY' | translate }}\n        </span>\n        <ecl-icon isInverted\n            icon=\"play\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        <ecl-icon isInverted\n            icon=\"play-filled\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-active\"></ecl-icon>\n    </button>\n    <button\n        eclButton \n        variant=\"primary\"\n        class=\"ecl-news-ticker__pause\"\n        [class.ecl-u-d-none]=\"!playing\"\n        (click)=\"cancelAutoplay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.PAUSE' | translate }}\n        </span>\n        <ecl-icon isInverted\n            icon=\"pause\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        <ecl-icon isInverted\n            icon=\"pause-filled\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-active\"></ecl-icon>\n    </button>\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>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { isAutoplay: [{
                 type: Input
             }], itemSwitch: [{