@eui/ecl 15.0.0-rc.15 → 15.0.0-rc.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/components/EclNewsTickerComponent.html +25 -1
- package/docs/dependencies.html +1 -3
- package/docs/js/search/search_index.js +2 -2
- package/esm2020/lib/components/ecl-news-ticker/ecl-news-ticker.component.mjs +16 -7
- package/fesm2015/eui-ecl.mjs +13 -4
- package/fesm2015/eui-ecl.mjs.map +1 -1
- package/fesm2020/eui-ecl.mjs +13 -4
- package/fesm2020/eui-ecl.mjs.map +1 -1
- package/lib/components/ecl-news-ticker/ecl-news-ticker.component.d.ts +2 -1
- package/lib/components/ecl-news-ticker/ecl-news-ticker.component.d.ts.map +1 -1
- package/package.json +1 -1
package/fesm2020/eui-ecl.mjs
CHANGED
|
@@ -9376,6 +9376,7 @@ class EclNewsTickerComponent extends ECLBaseDirective {
|
|
|
9376
9376
|
constructor(renderer2) {
|
|
9377
9377
|
super();
|
|
9378
9378
|
this.renderer2 = renderer2;
|
|
9379
|
+
this.isAutoplay = true;
|
|
9379
9380
|
this.itemSwitch = new EventEmitter();
|
|
9380
9381
|
this.itemIndex = 1;
|
|
9381
9382
|
this.playing = false;
|
|
@@ -9469,14 +9470,17 @@ class EclNewsTickerComponent extends ECLBaseDirective {
|
|
|
9469
9470
|
this.unsubscribeListener = this.renderer2.listen(this.slidesContainer, 'transitionend', () => this.checkIndex());
|
|
9470
9471
|
this.resizeTicker();
|
|
9471
9472
|
this.moveSlides(this.getFirstItem(this.newsTickerItems.toArray()), false);
|
|
9473
|
+
if (this.isAutoplay) {
|
|
9474
|
+
this.togglePlay();
|
|
9475
|
+
}
|
|
9472
9476
|
}
|
|
9473
9477
|
checkIndex() {
|
|
9474
9478
|
if (this.itemIndex === 1) {
|
|
9475
|
-
|
|
9479
|
+
const item = this.getFirstItem(this.newsTickerItems.toArray());
|
|
9476
9480
|
this.moveSlides(item, false);
|
|
9477
9481
|
}
|
|
9478
9482
|
else if (this.itemIndex === this.itemsCount) {
|
|
9479
|
-
|
|
9483
|
+
const item = this.getLastItem(this.newsTickerItems.toArray());
|
|
9480
9484
|
this.moveSlides(item, false);
|
|
9481
9485
|
}
|
|
9482
9486
|
}
|
|
@@ -9522,14 +9526,19 @@ class EclNewsTickerComponent extends ECLBaseDirective {
|
|
|
9522
9526
|
}
|
|
9523
9527
|
}
|
|
9524
9528
|
/** @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 });
|
|
9525
|
-
/** @nocollapse */ EclNewsTickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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 <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" }] });
|
|
9529
|
+
/** @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" }] });
|
|
9530
|
+
__decorate([
|
|
9531
|
+
coerceBoolean
|
|
9532
|
+
], EclNewsTickerComponent.prototype, "isAutoplay", void 0);
|
|
9526
9533
|
__decorate([
|
|
9527
9534
|
coerceElement
|
|
9528
9535
|
], EclNewsTickerComponent.prototype, "slidesContainer", void 0);
|
|
9529
9536
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EclNewsTickerComponent, decorators: [{
|
|
9530
9537
|
type: Component,
|
|
9531
9538
|
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" }]
|
|
9532
|
-
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: {
|
|
9539
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { isAutoplay: [{
|
|
9540
|
+
type: Input
|
|
9541
|
+
}], itemSwitch: [{
|
|
9533
9542
|
type: Output
|
|
9534
9543
|
}], newsTickerItems: [{
|
|
9535
9544
|
type: ContentChildren,
|