@eui/ecl 19.0.0-next.2 → 19.0.0-next.4

package/fesm2022/eui-ecl-components-ecl-news-ticker.mjs

@@ -0,0 +1,363 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ContentChild, Output, HostBinding, afterNextRender, booleanAttribute, Input, ContentChildren, ViewChild, HostListener, Directive, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i1 from '@eui/ecl/components/ecl-button';
+import { EclButtonComponentModule } from '@eui/ecl/components/ecl-button';
+import * as i2 from '@eui/ecl/components/ecl-icon';
+import { EclIconComponentModule } from '@eui/ecl/components/ecl-icon';
+import { EclLinkDirective, EclLinkDirectiveModule } from '@eui/ecl/components/ecl-link';
+import { Subject, fromEvent, takeUntil } from 'rxjs';
+import { ECLBaseDirective, EclBaseEvent } from '@eui/ecl/core';
+
+class EclNewsTickerItemComponent extends ECLBaseDirective {
+    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;
+    }
+    constructor(el) {
+        super();
+        this.el = el;
+        this.itemFocused = new EventEmitter();
+        this.role = 'listitem';
+        this._isCurrent = false;
+        this.destroy$ = new Subject();
+    }
+    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;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclNewsTickerItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclNewsTickerItemComponent, isStandalone: false, 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: "19.0.0-rc.1", ngImport: i0, type: EclNewsTickerItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-news-ticker-item', standalone: false, template: "<ng-content></ng-content>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { eclLink: [{
+                type: ContentChild,
+                args: [EclLinkDirective]
+            }], itemFocused: [{
+                type: Output
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], isAriahidden: [{
+                type: HostBinding,
+                args: ['attr.aria-hidden']
+            }], isInert: [{
+                type: HostBinding,
+                args: ['attr.inert']
+            }] } });
+
+class EclNewsTickerItemEvent extends EclBaseEvent {
+    constructor(itemIndex) {
+        super();
+        this.itemIndex = itemIndex;
+    }
+}
+
+class EclNewsTickerComponent extends ECLBaseDirective {
+    get cssClasses() {
+        return [super.getCssClasses('ecl-news-ticker')].join(' ').trim();
+    }
+    constructor(renderer2, cd) {
+        super();
+        this.renderer2 = renderer2;
+        this.cd = cd;
+        this.isAutoplay = true;
+        this.itemSwitch = new EventEmitter();
+        this.itemIndex = 1;
+        this.playing = false;
+        this.slidesTransform = '';
+        this.PLAY_INTERVAL = 5000;
+        this.INIT_DELAY = 300;
+        this.pausePlay = false;
+        this.destroy$ = new Subject();
+        afterNextRender(() => {
+            setTimeout(() => {
+                this.initContainer();
+            }, this.INIT_DELAY);
+            this.newsTickerItems.forEach((item) => {
+                item.itemFocused.pipe(takeUntil(this.destroy$)).subscribe(() => {
+                    this.cancelAutoplay();
+                });
+            });
+        });
+    }
+    get contentHeight() {
+        return this._contentHeight;
+    }
+    get itemsCount() {
+        return this.newsTickerItems.length;
+    }
+    get isShowControls() {
+        return this.newsTickerItems.length > 1;
+    }
+    onResize(event) {
+        setTimeout(() => {
+            this.resizeTicker();
+            this.moveSlides(this.getCurrentItem(), false);
+        });
+    }
+    ngOnDestroy() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+        }
+        if (this.unsubscribeListener) {
+            this.unsubscribeListener();
+        }
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    onPrevious() {
+        this.cancelAutoplay();
+        this.previousSlide();
+    }
+    previousSlide() {
+        this.itemIndex = this.getPrevIndex();
+        if (this.itemIndex === this.itemsCount) {
+            this.moveSlides(this.getFirstItem(this.getAllItemsArray()), true);
+        }
+        else {
+            this.moveSlides(this.getCurrentItem(), true);
+        }
+        this.itemSwitch.next(new EclNewsTickerItemEvent(this.itemIndex));
+    }
+    onNext() {
+        this.cancelAutoplay();
+        this.nextSlide();
+    }
+    nextSlide() {
+        this.itemIndex = this.getNextIndex();
+        if (this.itemIndex === 1) {
+            this.moveSlides(this.getLastItem(this.getAllItemsArray()), true);
+        }
+        else {
+            this.moveSlides(this.getCurrentItem(), true);
+        }
+        this.itemSwitch.next(new EclNewsTickerItemEvent(this.itemIndex));
+    }
+    startAutoplay() {
+        this.playing = true;
+        this.intervalId = setInterval(() => this.nextSlide(), this.PLAY_INTERVAL);
+    }
+    cancelAutoplay() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+        }
+        this.playing = false;
+    }
+    onNewsTickerItemMouseOver() {
+        if (this.playing) {
+            this.pausePlay = true;
+            this.cancelAutoplay();
+        }
+    }
+    onNewsTickerItemMouseOut() {
+        if (this.pausePlay) {
+            this.pausePlay = false;
+            this.startAutoplay();
+        }
+    }
+    onPlayBtnEnter(evt) {
+        evt.preventDefault();
+        this.startAutoplay();
+        this.cd.detectChanges();
+        this.pauseBtn.el.nativeElement.focus();
+    }
+    onPauseBtnEnter(evt) {
+        evt.preventDefault();
+        this.cancelAutoplay();
+        this.cd.detectChanges();
+        this.playBtn.el.nativeElement.focus();
+    }
+    moveSlides(item, withTransition) {
+        if (item) {
+            const newOffset = item.el.nativeElement.offsetTop;
+            const newHeight = item.el.nativeElement.offsetHeight;
+            this._contentHeight = newHeight;
+            this.transitionDuration = withTransition ? 0.4 : 0;
+            this.slidesTransform = `translate3d(0px, -${newOffset}px, 0px)`;
+            this.cd.detectChanges();
+            this.setCurrentSlide(item);
+        }
+    }
+    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.nativeElement, 'transitionend', () => this.checkIndex());
+        this.resizeTicker();
+        this.moveSlides(this.getFirstItem(this.newsTickerItems.toArray()), false);
+        if (this.isAutoplay) {
+            this.startAutoplay();
+        }
+    }
+    checkIndex() {
+        if (this.itemIndex === 1) {
+            const item = this.getFirstItem(this.newsTickerItems.toArray());
+            this.moveSlides(item, false);
+        }
+        else if (this.itemIndex === this.itemsCount) {
+            const item = this.getLastItem(this.newsTickerItems.toArray());
+            this.moveSlides(item, false);
+        }
+    }
+    resizeTicker() {
+        let highestSlide = 0;
+        this.newsTickerItems.forEach((slide) => {
+            const slideHeight = slide.el.nativeElement.offsetHeight;
+            highestSlide = highestSlide < slideHeight ? slideHeight : highestSlide;
+        });
+    }
+    getNextIndex() {
+        return this.itemIndex === this.itemsCount ? 1 : ++this.itemIndex;
+    }
+    getCurrentItem() {
+        return this.getAllItemsArray()[this.itemIndex];
+    }
+    getPrevIndex() {
+        return this.itemIndex === 1 ? this.itemsCount : --this.itemIndex;
+    }
+    getFirstItem(items) {
+        return items.length > 0 ? items[0] : null;
+    }
+    getLastItem(items) {
+        return items[items.length - 1];
+    }
+    getLastContentChild() {
+        return this.newsTickerItems.length > 0 ? this.newsTickerItems.get(this.itemsCount - 1).el.nativeElement.innerHTML : '';
+    }
+    getFirstContentChild() {
+        return this.newsTickerItems.length > 0 ? this.newsTickerItems.get(0).el.nativeElement.innerHTML : '';
+    }
+    getAllItemsArray() {
+        return [...[this.firstHiddenItem], ...this.newsTickerItems.toArray(), ...[this.lastHiddenItem]];
+    }
+    setCurrentSlide(currentItem) {
+        this.newsTickerItems.forEach((item) => {
+            item.isCurrent = false;
+            if (item === currentItem) {
+                item.isCurrent = true;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclNewsTickerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.1", type: EclNewsTickerComponent, isStandalone: false, selector: "ecl-news-ticker", inputs: { isAutoplay: ["isAutoplay", "isAutoplay", booleanAttribute] }, 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 }, { propertyName: "playBtn", first: true, predicate: ["playBtn"], descendants: true }, { propertyName: "pauseBtn", first: true, predicate: ["pauseBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-news-ticker__container\">\n    <div class=\"ecl-news-ticker__content\" [style.height.px]=\"contentHeight\">\n        <ul class=\"ecl-news-ticker__slides\" [style.transition-duration.s]=\"transitionDuration\"\n            [style.transform]=\"slidesTransform\" (mouseover)=\"onNewsTickerItemMouseOver()\"\n            (mouseout)=\"onNewsTickerItemMouseOut()\" #slidesContainer>\n            @if(isShowControls) {\n            <ecl-news-ticker-item #firstHiddenItem></ecl-news-ticker-item>\n            }\n            <ng-content></ng-content>\n            @if(isShowControls) {\n            <ecl-news-ticker-item #lastHiddenItem></ecl-news-ticker-item>\n            }\n        </ul>\n    </div>\n</div>\n\n@if(isShowControls) {\n<div class=\"ecl-news-ticker__controls\">\n    <div class=\"ecl-news-ticker__actions\">\n        <button eclButton class=\"ecl-news-ticker__prev\" variant=\"tertiary\" isIconOnly (click)=\"onPrevious()\">\n            <span eclButtonLabel>\n                {{ 'ecl.news-ticker.PREV-ITEM' | translate }}\n            </span>\n            <ecl-icon isInverted icon=\"corner-arrow\" size=\"l\" transform=\"rotate-270\"\n                class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        </button>\n        <button #playBtn eclButton class=\"ecl-news-ticker__play\" variant=\"tertiary\" isIconOnly [class.ecl-u-d-none]=\"playing\"\n            (click)=\"startAutoplay()\" (keydown.enter)=\"onPlayBtnEnter($event)\">\n            <span class=\"ecl-u-sr-only\">\n                {{ 'ecl.news-ticker.AUTO-PLAY' | translate }}\n            </span>\n            <ecl-icon isInverted icon=\"play-outline\" size=\"l\" class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        </button>\n        <button #pauseBtn eclButton class=\"ecl-news-ticker__pause\" variant=\"tertiary\" isIconOnly [class.ecl-u-d-none]=\"!playing\"\n            (click)=\"cancelAutoplay()\" (keydown.enter)=\"onPauseBtnEnter($event)\">\n            <span class=\"ecl-u-sr-only\">\n                {{ 'ecl.news-ticker.PAUSE' | translate }}\n            </span>\n            <ecl-icon isInverted icon=\"pause-outline\" size=\"l\" class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        </button>\n        <button eclButton class=\"ecl-news-ticker__next\" variant=\"tertiary\" isIconOnly (click)=\"onNext()\">\n            <span eclButtonLabel>\n                {{ 'ecl.news-ticker.NEXT-ITEM' | translate }}\n            </span>\n            <ecl-icon isInverted icon=\"corner-arrow\" size=\"l\" transform=\"rotate-90\"\n                class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        </button>\n    </div>\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: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclNewsTickerItemComponent, selector: "ecl-news-ticker-item", outputs: ["itemFocused"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclNewsTickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-news-ticker', standalone: false, template: "<div class=\"ecl-news-ticker__container\">\n    <div class=\"ecl-news-ticker__content\" [style.height.px]=\"contentHeight\">\n        <ul class=\"ecl-news-ticker__slides\" [style.transition-duration.s]=\"transitionDuration\"\n            [style.transform]=\"slidesTransform\" (mouseover)=\"onNewsTickerItemMouseOver()\"\n            (mouseout)=\"onNewsTickerItemMouseOut()\" #slidesContainer>\n            @if(isShowControls) {\n            <ecl-news-ticker-item #firstHiddenItem></ecl-news-ticker-item>\n            }\n            <ng-content></ng-content>\n            @if(isShowControls) {\n            <ecl-news-ticker-item #lastHiddenItem></ecl-news-ticker-item>\n            }\n        </ul>\n    </div>\n</div>\n\n@if(isShowControls) {\n<div class=\"ecl-news-ticker__controls\">\n    <div class=\"ecl-news-ticker__actions\">\n        <button eclButton class=\"ecl-news-ticker__prev\" variant=\"tertiary\" isIconOnly (click)=\"onPrevious()\">\n            <span eclButtonLabel>\n                {{ 'ecl.news-ticker.PREV-ITEM' | translate }}\n            </span>\n            <ecl-icon isInverted icon=\"corner-arrow\" size=\"l\" transform=\"rotate-270\"\n                class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        </button>\n        <button #playBtn eclButton class=\"ecl-news-ticker__play\" variant=\"tertiary\" isIconOnly [class.ecl-u-d-none]=\"playing\"\n            (click)=\"startAutoplay()\" (keydown.enter)=\"onPlayBtnEnter($event)\">\n            <span class=\"ecl-u-sr-only\">\n                {{ 'ecl.news-ticker.AUTO-PLAY' | translate }}\n            </span>\n            <ecl-icon isInverted icon=\"play-outline\" size=\"l\" class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        </button>\n        <button #pauseBtn eclButton class=\"ecl-news-ticker__pause\" variant=\"tertiary\" isIconOnly [class.ecl-u-d-none]=\"!playing\"\n            (click)=\"cancelAutoplay()\" (keydown.enter)=\"onPauseBtnEnter($event)\">\n            <span class=\"ecl-u-sr-only\">\n                {{ 'ecl.news-ticker.PAUSE' | translate }}\n            </span>\n            <ecl-icon isInverted icon=\"pause-outline\" size=\"l\" class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        </button>\n        <button eclButton class=\"ecl-news-ticker__next\" variant=\"tertiary\" isIconOnly (click)=\"onNext()\">\n            <span eclButtonLabel>\n                {{ 'ecl.news-ticker.NEXT-ITEM' | translate }}\n            </span>\n            <ecl-icon isInverted icon=\"corner-arrow\" size=\"l\" transform=\"rotate-90\"\n                class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        </button>\n    </div>\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: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { isAutoplay: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], itemSwitch: [{
+                type: Output
+            }], newsTickerItems: [{
+                type: ContentChildren,
+                args: [EclNewsTickerItemComponent]
+            }], firstHiddenItem: [{
+                type: ViewChild,
+                args: ['firstHiddenItem']
+            }], lastHiddenItem: [{
+                type: ViewChild,
+                args: ['lastHiddenItem']
+            }], slidesContainer: [{
+                type: ViewChild,
+                args: ['slidesContainer']
+            }], playBtn: [{
+                type: ViewChild,
+                args: ['playBtn']
+            }], pauseBtn: [{
+                type: ViewChild,
+                args: ['pauseBtn']
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+class EclNewsTickerIconDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.hasClass = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclNewsTickerIconDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclNewsTickerIconDirective, isStandalone: false, selector: "[eclNewsTickerIcon]", host: { properties: { "class.ecl-news-ticker__icon": "this.hasClass" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclNewsTickerIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclNewsTickerIcon]',
+                    standalone: false,
+                }]
+        }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.ecl-news-ticker__icon']
+            }] } });
+
+const COMPONENTS = [EclNewsTickerComponent, EclNewsTickerItemComponent, EclNewsTickerIconDirective];
+class EclNewsTickerComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclNewsTickerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclNewsTickerComponentModule, declarations: [EclNewsTickerComponent, EclNewsTickerItemComponent, EclNewsTickerIconDirective], imports: [CommonModule, TranslateModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule], exports: [EclNewsTickerComponent, EclNewsTickerItemComponent, EclNewsTickerIconDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclNewsTickerComponentModule, imports: [CommonModule, TranslateModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclNewsTickerComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, TranslateModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule],
+                    exports: [...COMPONENTS],
+                    declarations: [...COMPONENTS],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EclNewsTickerComponent, EclNewsTickerComponentModule, EclNewsTickerIconDirective, EclNewsTickerItemComponent, EclNewsTickerItemEvent };
+//# sourceMappingURL=eui-ecl-components-ecl-news-ticker.mjs.map

package/fesm2022/eui-ecl-components-ecl-news-ticker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-ecl-components-ecl-news-ticker.mjs","sources":["../../components/ecl-news-ticker/ecl-news-ticker-item.component.ts","../../components/ecl-news-ticker/ecl-news-ticker-item.component.html","../../components/ecl-news-ticker/events/ecl-news-ticker-item.event.ts","../../components/ecl-news-ticker/ecl-news-ticker.component.ts","../../components/ecl-news-ticker/ecl-news-ticker.component.html","../../components/ecl-news-ticker/ecl-news-ticker-icon.directive.ts","../../components/ecl-news-ticker/ecl-news-ticker.module.ts","../../components/ecl-news-ticker/eui-ecl-components-ecl-news-ticker.ts"],"sourcesContent":["import { AfterContentInit, Component, ContentChild, ElementRef, EventEmitter, HostBinding, OnDestroy, Output } from '@angular/core';\nimport { fromEvent, Subject, takeUntil } from 'rxjs';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclLinkDirective } from '@eui/ecl/components/ecl-link';\n@Component({\n    selector: 'ecl-news-ticker-item',\n    templateUrl: './ecl-news-ticker-item.component.html',\n    standalone: false,\n})\nexport class EclNewsTickerItemComponent extends ECLBaseDirective implements AfterContentInit, OnDestroy {\n    @ContentChild(EclLinkDirective) eclLink: EclLinkDirective;\n    @Output() itemFocused = new EventEmitter<null>();\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-news-ticker__slide')].join(' ').trim();\n    }\n    @HostBinding('attr.role') role = 'listitem';\n\n    get isCurrent(): boolean {\n        return this._isCurrent;\n    }\n    set isCurrent(value: boolean) {\n        this._isCurrent = value;\n        if (this.eclLink) {\n            this.setLinkTabindex();\n        }\n    }\n    private _isCurrent = false;\n\n    @HostBinding('attr.aria-hidden')\n    get isAriahidden(): boolean {\n        return !this.isCurrent || undefined;\n    }\n    @HostBinding('attr.inert')\n    get isInert(): boolean {\n        return !this.isCurrent || undefined;\n    }\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n\n    constructor(public el: ElementRef) {\n        super();\n    }\n\n    ngAfterContentInit(): void {\n        if (this.eclLink) {\n            this.eclLink.class = 'ecl-news-ticker__slide-text';\n        }\n\n        if (this.eclLink) {\n            fromEvent(this.eclLink.el.nativeElement, 'focus')\n                .pipe(takeUntil(this.destroy$))\n                .subscribe(() => {\n                    this.itemFocused.emit();\n                });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    private setLinkTabindex(): void {\n        if (this._isCurrent) {\n            this.eclLink.tabindex = null;\n        } else {\n            this.eclLink.tabindex = -1;\n        }\n    }\n}\n","<ng-content></ng-content>\n","import { EclBaseEvent } from '@eui/ecl/core';\n\nexport class EclNewsTickerItemEvent extends EclBaseEvent {\n    constructor(public itemIndex: number) {\n        super();\n    }\n}","import {\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    HostListener,\n    Input,\n    OnDestroy,\n    Output,\n    QueryList,\n    Renderer2,\n    ViewChild,\n    afterNextRender,\n    booleanAttribute,\n} from '@angular/core';\nimport { Subject, takeUntil } from 'rxjs';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclButtonComponent } from '@eui/ecl/components/ecl-button';\nimport { EclNewsTickerItemComponent } from './ecl-news-ticker-item.component';\nimport { EclNewsTickerItemEvent } from './events/ecl-news-ticker-item.event';\n\n@Component({\n    selector: 'ecl-news-ticker',\n    templateUrl: './ecl-news-ticker.component.html',\n    standalone: false,\n})\nexport class EclNewsTickerComponent extends ECLBaseDirective implements OnDestroy {\n    @Input({ transform: booleanAttribute }) isAutoplay = true;\n    @Output() itemSwitch = new EventEmitter<EclNewsTickerItemEvent>();\n    @ContentChildren(EclNewsTickerItemComponent) newsTickerItems: QueryList<EclNewsTickerItemComponent>;\n    @ViewChild('firstHiddenItem') firstHiddenItem: EclNewsTickerItemComponent;\n    @ViewChild('lastHiddenItem') lastHiddenItem: EclNewsTickerItemComponent;\n    @ViewChild('slidesContainer') slidesContainer: ElementRef;\n    @ViewChild('playBtn') playBtn: EclButtonComponent;\n    @ViewChild('pauseBtn') pauseBtn: EclButtonComponent;\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-news-ticker')].join(' ').trim();\n    }\n\n    itemIndex = 1;\n    playing = false;\n    slidesTransform = '';\n    transitionDuration: number;\n    private intervalId: number;\n    private PLAY_INTERVAL = 5000;\n    private INIT_DELAY = 300;\n    private _contentHeight: number;\n    private pausePlay = false;\n    private unsubscribeListener: () => void;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n\n    constructor(private renderer2: Renderer2, private cd: ChangeDetectorRef) {\n        super();\n        afterNextRender(() => {\n            setTimeout(() => {\n                this.initContainer();\n            }, this.INIT_DELAY);\n            this.newsTickerItems.forEach((item) => {\n                item.itemFocused.pipe(takeUntil(this.destroy$)).subscribe(() => {\n                    this.cancelAutoplay();\n                });\n            });\n        });\n    }\n\n    get contentHeight(): number {\n        return this._contentHeight;\n    }\n\n    get itemsCount(): number {\n        return this.newsTickerItems.length;\n    }\n\n    get isShowControls(): boolean {\n        return this.newsTickerItems.length > 1;\n    }\n\n    @HostListener('window:resize', ['$event'])\n    onResize(event): void {\n        setTimeout(() => {\n            this.resizeTicker();\n            this.moveSlides(this.getCurrentItem(), false);\n        });\n    }\n\n    ngOnDestroy(): void {\n        if (this.intervalId) {\n            clearInterval(this.intervalId);\n        }\n        if (this.unsubscribeListener) {\n            this.unsubscribeListener();\n        }\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    onPrevious(): void {\n        this.cancelAutoplay();\n        this.previousSlide();\n    }\n\n    previousSlide(): void {\n        this.itemIndex = this.getPrevIndex();\n        if (this.itemIndex === this.itemsCount) {\n            this.moveSlides(this.getFirstItem(this.getAllItemsArray()), true);\n        } else {\n            this.moveSlides(this.getCurrentItem(), true);\n        }\n        this.itemSwitch.next(new EclNewsTickerItemEvent(this.itemIndex));\n    }\n\n    onNext(): void {\n        this.cancelAutoplay();\n        this.nextSlide();\n    }\n\n    nextSlide(): void {\n        this.itemIndex = this.getNextIndex();\n        if (this.itemIndex === 1) {\n            this.moveSlides(this.getLastItem(this.getAllItemsArray()), true);\n        } else {\n            this.moveSlides(this.getCurrentItem(), true);\n        }\n        this.itemSwitch.next(new EclNewsTickerItemEvent(this.itemIndex));\n    }\n\n    startAutoplay(): void {\n        this.playing = true;\n        this.intervalId = setInterval(() => this.nextSlide(), this.PLAY_INTERVAL);\n    }\n\n    cancelAutoplay(): void {\n        if (this.intervalId) {\n            clearInterval(this.intervalId);\n        }\n        this.playing = false;\n    }\n\n    onNewsTickerItemMouseOver(): void {\n        if (this.playing) {\n            this.pausePlay = true;\n            this.cancelAutoplay();\n        }\n    }\n\n    onNewsTickerItemMouseOut(): void {\n        if (this.pausePlay) {\n            this.pausePlay = false;\n            this.startAutoplay();\n        }\n    }\n\n    onPlayBtnEnter(evt: Event): void {\n        evt.preventDefault();\n        this.startAutoplay();\n        this.cd.detectChanges();\n        this.pauseBtn.el.nativeElement.focus();\n    }\n\n    onPauseBtnEnter(evt: Event): void {\n        evt.preventDefault();\n        this.cancelAutoplay();\n        this.cd.detectChanges();\n        this.playBtn.el.nativeElement.focus();\n    }\n\n    private moveSlides(item: EclNewsTickerItemComponent, withTransition: boolean): void {\n        if (item) {\n            const newOffset = item.el.nativeElement.offsetTop;\n            const newHeight = item.el.nativeElement.offsetHeight;\n            this._contentHeight = newHeight;\n            this.transitionDuration = withTransition ? 0.4 : 0;\n            this.slidesTransform = `translate3d(0px, -${newOffset}px, 0px)`;\n            this.cd.detectChanges();\n            this.setCurrentSlide(item);\n        }\n    }\n\n    private initContainer(): void {\n        if (this.newsTickerItems.length === 1) {\n            this.resizeTicker();\n            this.moveSlides(this.getFirstItem(this.newsTickerItems.toArray()), false);\n            return;\n        }\n        this.firstHiddenItem.el.nativeElement.innerHTML = this.getLastContentChild();\n        this.lastHiddenItem.el.nativeElement.innerHTML = this.getFirstContentChild();\n        this.unsubscribeListener = this.renderer2.listen(this.slidesContainer.nativeElement, 'transitionend', () => this.checkIndex());\n        this.resizeTicker();\n        this.moveSlides(this.getFirstItem(this.newsTickerItems.toArray()), false);\n        if (this.isAutoplay) {\n            this.startAutoplay();\n        }\n    }\n\n    private checkIndex(): void {\n        if (this.itemIndex === 1) {\n            const item = this.getFirstItem(this.newsTickerItems.toArray());\n            this.moveSlides(item, false);\n        } else if (this.itemIndex === this.itemsCount) {\n            const item = this.getLastItem(this.newsTickerItems.toArray());\n            this.moveSlides(item, false);\n        }\n    }\n\n    private resizeTicker(): void {\n        let highestSlide = 0;\n        this.newsTickerItems.forEach((slide) => {\n            const slideHeight = slide.el.nativeElement.offsetHeight;\n            highestSlide = highestSlide < slideHeight ? slideHeight : highestSlide;\n        });\n    }\n\n    private getNextIndex(): number {\n        return this.itemIndex === this.itemsCount ? 1 : ++this.itemIndex;\n    }\n\n    private getCurrentItem(): EclNewsTickerItemComponent {\n        return this.getAllItemsArray()[this.itemIndex];\n    }\n\n    private getPrevIndex(): number {\n        return this.itemIndex === 1 ? this.itemsCount : --this.itemIndex;\n    }\n\n    private getFirstItem(items: Array<EclNewsTickerItemComponent>): EclNewsTickerItemComponent {\n        return items.length > 0 ? items[0] : null;\n    }\n\n    private getLastItem(items: Array<EclNewsTickerItemComponent>): EclNewsTickerItemComponent {\n        return items[items.length - 1];\n    }\n\n    private getLastContentChild(): string {\n        return this.newsTickerItems.length > 0 ? this.newsTickerItems.get(this.itemsCount - 1).el.nativeElement.innerHTML : '';\n    }\n\n    private getFirstContentChild(): string {\n        return this.newsTickerItems.length > 0 ? this.newsTickerItems.get(0).el.nativeElement.innerHTML : '';\n    }\n\n    private getAllItemsArray(): EclNewsTickerItemComponent[] {\n        return [...[this.firstHiddenItem], ...this.newsTickerItems.toArray(), ...[this.lastHiddenItem]];\n    }\n\n    private setCurrentSlide(currentItem: EclNewsTickerItemComponent): void {\n        this.newsTickerItems.forEach((item) => {\n            item.isCurrent = false;\n            if (item === currentItem) {\n                item.isCurrent = true;\n            }\n        });\n    }\n}\n","<div class=\"ecl-news-ticker__container\">\n    <div class=\"ecl-news-ticker__content\" [style.height.px]=\"contentHeight\">\n        <ul class=\"ecl-news-ticker__slides\" [style.transition-duration.s]=\"transitionDuration\"\n            [style.transform]=\"slidesTransform\" (mouseover)=\"onNewsTickerItemMouseOver()\"\n            (mouseout)=\"onNewsTickerItemMouseOut()\" #slidesContainer>\n            @if(isShowControls) {\n            <ecl-news-ticker-item #firstHiddenItem></ecl-news-ticker-item>\n            }\n            <ng-content></ng-content>\n            @if(isShowControls) {\n            <ecl-news-ticker-item #lastHiddenItem></ecl-news-ticker-item>\n            }\n        </ul>\n    </div>\n</div>\n\n@if(isShowControls) {\n<div class=\"ecl-news-ticker__controls\">\n    <div class=\"ecl-news-ticker__actions\">\n        <button eclButton class=\"ecl-news-ticker__prev\" variant=\"tertiary\" isIconOnly (click)=\"onPrevious()\">\n            <span eclButtonLabel>\n                {{ 'ecl.news-ticker.PREV-ITEM' | translate }}\n            </span>\n            <ecl-icon isInverted icon=\"corner-arrow\" size=\"l\" transform=\"rotate-270\"\n                class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        </button>\n        <button #playBtn eclButton class=\"ecl-news-ticker__play\" variant=\"tertiary\" isIconOnly [class.ecl-u-d-none]=\"playing\"\n            (click)=\"startAutoplay()\" (keydown.enter)=\"onPlayBtnEnter($event)\">\n            <span class=\"ecl-u-sr-only\">\n                {{ 'ecl.news-ticker.AUTO-PLAY' | translate }}\n            </span>\n            <ecl-icon isInverted icon=\"play-outline\" size=\"l\" class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        </button>\n        <button #pauseBtn eclButton class=\"ecl-news-ticker__pause\" variant=\"tertiary\" isIconOnly [class.ecl-u-d-none]=\"!playing\"\n            (click)=\"cancelAutoplay()\" (keydown.enter)=\"onPauseBtnEnter($event)\">\n            <span class=\"ecl-u-sr-only\">\n                {{ 'ecl.news-ticker.PAUSE' | translate }}\n            </span>\n            <ecl-icon isInverted icon=\"pause-outline\" size=\"l\" class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        </button>\n        <button eclButton class=\"ecl-news-ticker__next\" variant=\"tertiary\" isIconOnly (click)=\"onNext()\">\n            <span eclButtonLabel>\n                {{ 'ecl.news-ticker.NEXT-ITEM' | translate }}\n            </span>\n            <ecl-icon isInverted icon=\"corner-arrow\" size=\"l\" transform=\"rotate-90\"\n                class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        </button>\n    </div>\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}","import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n@Directive({\n    selector: '[eclNewsTickerIcon]',\n    standalone: false,\n})\nexport class EclNewsTickerIconDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-news-ticker__icon') hasClass = true;\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { EclButtonComponentModule } from '@eui/ecl/components/ecl-button';\nimport { EclIconComponentModule } from '@eui/ecl/components/ecl-icon';\nimport { EclLinkDirectiveModule } from '@eui/ecl/components/ecl-link';\nimport { EclNewsTickerComponent } from './ecl-news-ticker.component';\nimport { EclNewsTickerItemComponent } from './ecl-news-ticker-item.component';\nimport { EclNewsTickerIconDirective } from './ecl-news-ticker-icon.directive';\n\nconst COMPONENTS = [EclNewsTickerComponent, EclNewsTickerItemComponent, EclNewsTickerIconDirective];\n@NgModule({\n    imports: [CommonModule, TranslateModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule],\n    exports: [...COMPONENTS],\n    declarations: [...COMPONENTS],\n})\nexport class EclNewsTickerComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i3.EclNewsTickerItemComponent"],"mappings":"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"}

package/fesm2022/eui-ecl-components-ecl-notification.mjs

@@ -0,0 +1,123 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, booleanAttribute, Component, Input, Output, HostBinding, Directive, NgModule } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i2 from '@eui/ecl/components/ecl-button';
+import { EclButtonComponentModule } from '@eui/ecl/components/ecl-button';
+import * as i3 from '@eui/ecl/components/ecl-icon';
+import { EclIconComponentModule } from '@eui/ecl/components/ecl-icon';
+import { EclSiteFooterComponentModule } from '@eui/ecl/components/ecl-site-footer';
+import * as i1 from '@eui/ecl/core';
+import { EclBaseEvent, ECLBaseDirective } from '@eui/ecl/core';
+
+class EclNotificationCloseEvent extends EclBaseEvent {
+}
+
+class EclNotificationComponent extends ECLBaseDirective {
+    constructor(eclThemeService) {
+        super();
+        this.eclThemeService = eclThemeService;
+        this.variant = 'info';
+        this.isVisible = true;
+        this.isCloseable = true;
+        // eslint-disable-next-line @angular-eslint/no-output-native
+        this.close = new EventEmitter();
+        this.role = 'alert';
+        this.variantTitleIconMapping = new Map([
+            ['info', { title: 'information', icon: 'information' }],
+            ['success', { title: 'success', icon: 'check-filled' }],
+            ['warning', { title: 'warning', icon: 'warning' }],
+            ['error', { title: 'error', icon: 'error' }],
+        ]);
+    }
+    get isHidden() {
+        return !this.isVisible;
+    }
+    get cssClasses() {
+        return [super.getCssClasses('ecl-notification'), this.variant ? `ecl-notification--${this.variant}` : ''].join(' ').trim();
+    }
+    get title() {
+        return this.titleAndIconBaseOnVariant.title;
+    }
+    get icon() {
+        return this.titleAndIconBaseOnVariant.icon;
+    }
+    get titleAndIconBaseOnVariant() {
+        return this.variantTitleIconMapping.get(this.variant) || { title: 'information', icon: 'information' };
+    }
+    onCloseClick(evt) {
+        const event = new EclNotificationCloseEvent();
+        this.close.next(event);
+        if (!event.defaultPrevented) {
+            this.isVisible = false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclNotificationComponent, deps: [{ token: i1.EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.1", type: EclNotificationComponent, isStandalone: false, selector: "ecl-notification", inputs: { notificationTitle: "notificationTitle", variant: "variant", isVisible: ["isVisible", "isVisible", booleanAttribute], isCloseable: ["isCloseable", "isCloseable", booleanAttribute] }, outputs: { close: "close" }, host: { properties: { "attr.role": "this.role", "class.ecl-u-d-none": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "@if( eclThemeService.isEC$ | async ){\n    <ecl-icon size=\"l\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n} @else {\n    <ecl-icon size=\"m\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n}\n\n<div class=\"ecl-notification__content\">\n    @if(isCloseable){\n        <button eclButton variant=\"tertiary\" class=\"ecl-notification__close\" isIconOnly (click)=\"onCloseClick($event)\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    }\n\n    <ng-content select=\"[eclNotificationTitle]\"></ng-content>\n    <div class=\"ecl-notification__description\"><ng-content></ng-content></div>\n</div>\n", dependencies: [{ kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i2.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclNotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-notification', standalone: false, template: "@if( eclThemeService.isEC$ | async ){\n    <ecl-icon size=\"l\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n} @else {\n    <ecl-icon size=\"m\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n}\n\n<div class=\"ecl-notification__content\">\n    @if(isCloseable){\n        <button eclButton variant=\"tertiary\" class=\"ecl-notification__close\" isIconOnly (click)=\"onCloseClick($event)\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    }\n\n    <ng-content select=\"[eclNotificationTitle]\"></ng-content>\n    <div class=\"ecl-notification__description\"><ng-content></ng-content></div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.EclThemeService }], propDecorators: { notificationTitle: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], isVisible: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isCloseable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], close: [{
+                type: Output
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], isHidden: [{
+                type: HostBinding,
+                args: ['class.ecl-u-d-none']
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EclNotificationTitleDirective extends ECLBaseDirective {
+    get cssClasses() {
+        return [super.getCssClasses('ecl-notification__title')].join(' ').trim();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclNotificationTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclNotificationTitleDirective, isStandalone: false, selector: "[eclNotificationTitle]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclNotificationTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclNotificationTitle]',
+                    standalone: false,
+                }]
+        }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EclNotificationComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclNotificationComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclNotificationComponentModule, declarations: [EclNotificationComponent, EclNotificationTitleDirective], imports: [CommonModule, EclButtonComponentModule, EclIconComponentModule, TranslateModule, EclSiteFooterComponentModule], exports: [EclNotificationComponent, EclNotificationTitleDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclNotificationComponentModule, imports: [CommonModule, EclButtonComponentModule, EclIconComponentModule, TranslateModule, EclSiteFooterComponentModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclNotificationComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, EclButtonComponentModule, EclIconComponentModule, TranslateModule, EclSiteFooterComponentModule],
+                    exports: [EclNotificationComponent, EclNotificationTitleDirective],
+                    declarations: [EclNotificationComponent, EclNotificationTitleDirective],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EclNotificationCloseEvent, EclNotificationComponent, EclNotificationComponentModule, EclNotificationTitleDirective };
+//# sourceMappingURL=eui-ecl-components-ecl-notification.mjs.map

package/fesm2022/eui-ecl-components-ecl-notification.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-ecl-components-ecl-notification.mjs","sources":["../../components/ecl-notification/events/ecl-notification-close.event.ts","../../components/ecl-notification/ecl-notification.component.ts","../../components/ecl-notification/ecl-notification.component.html","../../components/ecl-notification/ecl-notification-title.directive.ts","../../components/ecl-notification/ecl-notification.module.ts","../../components/ecl-notification/eui-ecl-components-ecl-notification.ts"],"sourcesContent":["import { EclBaseEvent } from '@eui/ecl/core';\n\nexport class EclNotificationCloseEvent extends EclBaseEvent {\n}","import { Component, Input, Output, EventEmitter, HostBinding, booleanAttribute } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclThemeService } from '@eui/ecl/core';\nimport { EclNotificationCloseEvent } from './events/ecl-notification-close.event';\n\n@Component({\n    selector: 'ecl-notification',\n    templateUrl: './ecl-notification.component.html',\n    standalone: false,\n})\nexport class EclNotificationComponent extends ECLBaseDirective {\n    @Input() notificationTitle: string;\n    @Input() variant: 'info' | 'success' | 'warning' | 'error' = 'info';\n    @Input({ transform: booleanAttribute }) isVisible = true;\n    @Input({ transform: booleanAttribute }) isCloseable = true;\n\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() close = new EventEmitter<EclNotificationCloseEvent>();\n\n    @HostBinding('attr.role')\n    role = 'alert';\n\n    private variantTitleIconMapping = new Map<string, { title: string, icon: string }>([\n        ['info', { title: 'information', icon: 'information' }],\n        ['success', { title: 'success', icon: 'check-filled' }],\n        ['warning', { title: 'warning', icon: 'warning' }],\n        ['error', { title: 'error', icon: 'error' }],\n    ]);\n\n    constructor(public eclThemeService: EclThemeService) {\n        super();\n    }\n\n    @HostBinding('class.ecl-u-d-none')\n    get isHidden(): boolean {\n        return !this.isVisible;\n    }\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-notification'), this.variant ? `ecl-notification--${this.variant}` : ''].join(' ').trim();\n    }\n\n    get title(): string {\n        return this.titleAndIconBaseOnVariant.title;\n    }\n\n    get icon(): string {\n        return this.titleAndIconBaseOnVariant.icon;\n    }\n\n    get titleAndIconBaseOnVariant():{ title: string, icon: string }  {\n        return this.variantTitleIconMapping.get(this.variant) || { title: 'information', icon: 'information' };\n    }\n\n    onCloseClick(evt: Event): void {\n        const event = new EclNotificationCloseEvent();\n        this.close.next(event);\n        if (!event.defaultPrevented) {\n            this.isVisible = false;\n        }\n    }\n}\n","@if( eclThemeService.isEC$ | async ){\n    <ecl-icon size=\"l\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n} @else {\n    <ecl-icon size=\"m\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n}\n\n<div class=\"ecl-notification__content\">\n    @if(isCloseable){\n        <button eclButton variant=\"tertiary\" class=\"ecl-notification__close\" isIconOnly (click)=\"onCloseClick($event)\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    }\n\n    <ng-content select=\"[eclNotificationTitle]\"></ng-content>\n    <div class=\"ecl-notification__description\"><ng-content></ng-content></div>\n</div>\n","import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n@Directive({\n    selector: '[eclNotificationTitle]',\n    standalone: false,\n})\nexport class EclNotificationTitleDirective extends ECLBaseDirective {\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-notification__title')].join(' ').trim();\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { EclButtonComponentModule } from '@eui/ecl/components/ecl-button';\nimport { EclIconComponentModule } from '@eui/ecl/components/ecl-icon';\nimport { EclSiteFooterComponentModule } from '@eui/ecl/components/ecl-site-footer';\nimport { EclNotificationComponent } from './ecl-notification.component';\nimport { EclNotificationTitleDirective } from './ecl-notification-title.directive';\n\n@NgModule({\n    imports: [CommonModule, EclButtonComponentModule, EclIconComponentModule, TranslateModule, EclSiteFooterComponentModule],\n    exports: [EclNotificationComponent, EclNotificationTitleDirective],\n    declarations: [EclNotificationComponent, EclNotificationTitleDirective],\n})\nexport class EclNotificationComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}