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

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

@@ -0,0 +1,580 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, booleanAttribute, Component, HostBinding, Input, Output, ContentChild, forwardRef, HostListener, afterNextRender, numberAttribute, ViewChild, ContentChildren, ViewChildren, NgModule } from '@angular/core';
+import * as i5 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i3 from '@eui/ecl/components/ecl-icon';
+import { EclIconComponentModule } from '@eui/ecl/components/ecl-icon';
+import * as i2 from '@eui/ecl/core';
+import { EclBaseEvent, ECLBaseDirective, KeyCode } from '@eui/ecl/core';
+import { EclBannerComponent } from '@eui/ecl/components/ecl-banner';
+import { Subject, takeUntil, switchMap, interval } from 'rxjs';
+import * as i1 from '@angular/cdk/layout';
+
+class EclSlideEvent extends EclBaseEvent {
+    constructor(item) {
+        super();
+        this.item = item;
+    }
+}
+
+class EclCarouselItemComponent extends ECLBaseDirective {
+    constructor(el) {
+        super();
+        this.el = el;
+        this.role = 'tabpanel';
+        this.roleDescription = 'slide';
+        this.isCurrent = false;
+        this.slideClick = new EventEmitter();
+    }
+    get cssClasses() {
+        return [super.getCssClasses('ecl-carousel__slide')].join(' ').trim();
+    }
+    get isInert() {
+        return !this.isCurrent || undefined;
+    }
+    onSlideClick() {
+        this.slideClick.next(new EclSlideEvent(this));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclCarouselItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.1", type: EclCarouselItemComponent, isStandalone: false, selector: "ecl-carousel-item", inputs: { id: "id", isCurrent: ["isCurrent", "isCurrent", booleanAttribute] }, outputs: { slideClick: "slideClick" }, host: { listeners: { "click": "onSlideClick()" }, properties: { "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "attr.aria-roledescription": "this.roleDescription", "style.width.%": "this.width", "class": "this.cssClasses", "attr.inert": "this.isInert" } }, queries: [{ propertyName: "banner", first: true, predicate: i0.forwardRef(() => EclBannerComponent), descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host:before{left:0!important;display:none}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclCarouselItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-carousel-item', standalone: false, template: "<ng-content></ng-content>\n", styles: [":host:before{left:0!important;display:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { ariaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], roleDescription: [{
+                type: HostBinding,
+                args: ['attr.aria-roledescription']
+            }], width: [{
+                type: HostBinding,
+                args: ['style.width.%']
+            }], id: [{
+                type: Input
+            }], isCurrent: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], slideClick: [{
+                type: Output
+            }], banner: [{
+                type: ContentChild,
+                args: [forwardRef(() => EclBannerComponent)]
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], isInert: [{
+                type: HostBinding,
+                args: ['attr.inert']
+            }], onSlideClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class EclCarouselComponent extends ECLBaseDirective {
+    constructor(cdkBreakpointObserver, cd, renderer2, eclRtlService) {
+        super();
+        this.cdkBreakpointObserver = cdkBreakpointObserver;
+        this.cd = cd;
+        this.renderer2 = renderer2;
+        this.eclRtlService = eclRtlService;
+        this.ariaLabel = 'Carousel description here';
+        this.ariaRoleDescription = 'carousel';
+        this.playInterval = 5000;
+        this.slide = new EventEmitter();
+        this.isPlaying = false;
+        this.isPausedForced = false;
+        this.isRtl = false;
+        this.transitionDuration = 0.4;
+        this.isMobileBreakpoint = false;
+        this.isSmallTabletBreakpoint = false;
+        this.isTabletBreakpoint = false;
+        this.isDesktopBreakpoint = false;
+        this.playSubject = new Subject();
+        this.stopSubject = new Subject();
+        this.destroy$ = new Subject();
+        this.TIMEOUT_INTERVAL = 400;
+        afterNextRender(() => {
+            this.observeElementSizeChanges();
+            this.cd.detectChanges();
+            this.observeBreakpointChanges();
+        });
+    }
+    get cssClasses() {
+        return [super.getCssClasses('ecl-carousel')].join(' ').trim();
+    }
+    ngOnInit() {
+        this.initAutoplay();
+        this.handleRtlChangeState();
+    }
+    ngAfterContentInit() {
+        setTimeout(() => {
+            this.initializeSlider();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+        if (this.unsubscribeListener) {
+            this.unsubscribeListener();
+        }
+    }
+    onPlayClick() {
+        this.startPlaying();
+        this.focusOnButton(this.pauseButton);
+    }
+    onPauseClick() {
+        this.stopPlaying();
+        this.focusOnButton(this.playButton);
+    }
+    onFirstCarouselElementPress(e) {
+        if (e.key === KeyCode.TAB) {
+            if (this.isPlaying) {
+                this.stopPlaying();
+            }
+        }
+    }
+    onPlayKeyboardPress(e) {
+        if (e.key === KeyCode.TAB && e.shiftKey) {
+            return;
+        }
+        if ([KeyCode.TAB].includes(e.key)) {
+            if (this.isPlaying) {
+                this.focusOnButton(this.navigationButtons.get(this.getCurrentSlideIndex()));
+                this.stopPlaying();
+            }
+            else {
+                this.focusOnButton(this.navigationButtons.get(this.getCurrentSlideIndex()));
+            }
+            e.preventDefault();
+        }
+        else if (!this.isPlaying && [KeyCode.ARROW_RIGHT].includes(e.key)) {
+            this.focusOnButton(this.navigationButtons.get(this.getCurrentSlideIndex()));
+        }
+    }
+    onNavBtnKeyboardPress(e, index) {
+        if (e.key === KeyCode.ARROW_RIGHT) {
+            this.onNavigationButtonArrowRight(e);
+        }
+        else if (e.key === KeyCode.ARROW_LEFT) {
+            this.onNavigationButtonArrowLeft(e, index);
+        }
+        return;
+    }
+    isButtonVisible(button) {
+        if (!button) {
+            return false;
+        }
+        return button.nativeElement.style.display === '';
+    }
+    focusOnButton(button) {
+        if (!button) {
+            return;
+        }
+        button.nativeElement.focus();
+    }
+    onSlideControlClick(slide) {
+        this.stopPlaying();
+        this.activateSlide(slide, true);
+    }
+    onNextSlideClick() {
+        this.stopPlaying();
+        this.goToNextSlide(true);
+    }
+    onPreviousSlideClick() {
+        this.stopPlaying();
+        this.goToPreviousSlide(true);
+    }
+    onSlideHover() {
+        this.pausePlaying();
+    }
+    onSlideHoverout() {
+        if (!this.isStopButtonPressed()) {
+            this.resumePlaying();
+        }
+    }
+    isStopButtonPressed() {
+        return this.isPausedForced;
+    }
+    isPadded() {
+        return this.isDesktopBreakpoint;
+    }
+    hasControls() {
+        return this.getSlidesCount() > 1;
+    }
+    getCurrentSlideIndex() {
+        let currentIndex;
+        this.getAllSlidesArray().forEach((item, idx) => {
+            if (item && item.isCurrent) {
+                currentIndex = idx;
+            }
+        });
+        if (currentIndex === this.getAllSlidesCount() - 1) {
+            return 0;
+        }
+        else if (currentIndex === 0) {
+            return this.getSlidesCount() - 1;
+        }
+        return currentIndex - 1;
+    }
+    getCarouselSlidesWidth() {
+        return this.carouselContainerElement?.nativeElement.offsetWidth * this.getAllSlidesCount();
+    }
+    getCarouselSlidesOffsetLeft() {
+        return -1 * this.carouselContainerElement?.nativeElement.offsetWidth * this.getCurrentItemIndex();
+    }
+    getCarouselSlidesOffsetRight() {
+        return -1 * this.carouselContainerElement?.nativeElement.offsetWidth * this.getCurrentItemIndex();
+    }
+    handleRtlChangeState() {
+        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {
+            this.isRtl = rtlState;
+        });
+    }
+    initAutoplay() {
+        const start$ = this.playSubject.asObservable();
+        const stop$ = this.stopSubject.asObservable();
+        start$
+            .pipe(switchMap(() => interval(this.playInterval).pipe(takeUntil(stop$))), takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.goToNextSlide(true);
+        });
+    }
+    getCurrentItemIndex() {
+        let result = 0;
+        this.getAllSlidesArray().forEach((item, index) => {
+            if (item && item.isCurrent) {
+                result = index;
+            }
+        });
+        return result;
+    }
+    initializeSlider() {
+        this.slides.forEach((item, idx) => {
+            this.initSlide(item, idx);
+        });
+        if (this.hasControls()) {
+            this.initHiddenItems();
+            if (this.isNoSlideSelected()) {
+                this.activateSlide(this.slides.first, false);
+            }
+        }
+    }
+    initHiddenItems() {
+        this.firstHiddenItem.el.nativeElement.innerHTML = this.getLastContentChild();
+        this.firstHiddenItem.isCurrent = false;
+        this.lastHiddenItem.el.nativeElement.innerHTML = this.getFirstContentChild();
+        this.lastHiddenItem.isCurrent = false;
+        this.slideWidth = this.slides.first.width;
+        this.unsubscribeListener = this.renderer2.listen(this.slidesContainer.nativeElement, 'transitionend', () => this.checkIndex());
+    }
+    checkIndex() {
+        if (this.getCurrentItemIndex() === this.getAllSlidesCount() - 1) {
+            const item = this.slides.first;
+            this.activateSlide(item, false);
+        }
+        else if (this.getCurrentItemIndex() === 0) {
+            const item = this.slides.last;
+            this.activateSlide(item, false);
+        }
+    }
+    getLastContentChild() {
+        return this.getSlidesCount() > 0 ? this.slides.get(this.getSlidesCount() - 1).el.nativeElement.innerHTML : '';
+    }
+    getFirstContentChild() {
+        return this.getSlidesCount() > 0 ? this.slides.get(0).el.nativeElement.innerHTML : '';
+    }
+    initSlide(item, idx) {
+        item.index = idx;
+        item.ariaLabel = `slide ${idx + 1} of ${this.getSlidesCount()}`;
+        item.width = 100 / this.getAllSlidesCount();
+    }
+    goToNextSlide(isLoop) {
+        this.activateSlide(this.getNextSlide(isLoop), true);
+    }
+    goToPreviousSlide(isLoop) {
+        this.activateSlide(this.getPreviousSlide(isLoop), true);
+    }
+    activateSlide(slideItem, withTransition) {
+        if (withTransition) {
+            this.transitionDuration = 0.4;
+        }
+        else {
+            this.transitionDuration = 0;
+        }
+        if (slideItem) {
+            this.getAllSlidesArray().forEach((item) => {
+                item.isCurrent = false;
+            });
+            slideItem.isCurrent = true;
+        }
+        this.cd.detectChanges();
+        if (withTransition) {
+            this.slide.next(new EclSlideEvent(this.slides.get(this.getCurrentSlideIndex())));
+        }
+    }
+    isLastButton(index) {
+        const buttonsList = this.navigationButtons;
+        return index + 1 >= buttonsList.length;
+    }
+    isFirstButton(index) {
+        return index <= 0;
+    }
+    startPlaying() {
+        this.isPlaying = true;
+        this.cd.detectChanges();
+        this.isPausedForced = false;
+        this.playSubject.next();
+    }
+    stopPlaying() {
+        this.isPlaying = false;
+        this.cd.detectChanges();
+        this.isPausedForced = true;
+        this.stopSubject.next();
+    }
+    pausePlaying() {
+        this.isPlaying = false;
+        this.cd.detectChanges();
+        this.stopSubject.next();
+    }
+    resumePlaying() {
+        this.isPlaying = true;
+        this.cd.detectChanges();
+        this.playSubject.next();
+    }
+    getNextSlide(isLoop) {
+        const slidesCount = this.getSlidesCount();
+        const currentIndex = this.getCurrentSlideIndex();
+        if (currentIndex >= slidesCount - 1) {
+            if (isLoop) {
+                return this.getAllSlidesArray()[this.getAllSlidesCount() - 1];
+            }
+            else {
+                return this.slides.last;
+            }
+        }
+        else {
+            return this.slides.get(currentIndex + 1);
+        }
+    }
+    getAllSlidesArray() {
+        return [...[this.firstHiddenItem], ...this.slides.toArray(), ...[this.lastHiddenItem]];
+    }
+    getPreviousSlide(isLoop) {
+        const currentIndex = this.getCurrentSlideIndex();
+        if (currentIndex <= 0) {
+            if (isLoop) {
+                return this.getAllSlidesArray()[0];
+            }
+            else {
+                return this.slides.first;
+            }
+        }
+        else {
+            return this.slides.get(currentIndex - 1);
+        }
+    }
+    getSlidesCount() {
+        return this.slides.length;
+    }
+    getAllSlidesCount() {
+        if (this.hasControls()) {
+            return this.slides.length + 2;
+        }
+        else {
+            return this.slides.length;
+        }
+    }
+    isNoSlideSelected() {
+        return !this.slides.some((item) => item.isCurrent);
+    }
+    onNavigationButtonArrowRight(e) {
+        setTimeout(() => {
+            this.goToNextSlide(false);
+            const button = this.navigationButtons.get(this.getCurrentSlideIndex());
+            this.focusOnButton(button);
+        }, this.TIMEOUT_INTERVAL);
+        e.preventDefault();
+    }
+    onNavigationButtonArrowLeft(e, index) {
+        if (this.isFirstButton(index)) {
+            if (this.playButton) {
+                this.focusOnButton(this.playButton);
+            }
+            if (this.pauseButton) {
+                this.focusOnButton(this.pauseButton);
+            }
+        }
+        else {
+            setTimeout(() => {
+                this.goToPreviousSlide(false);
+                const button = this.navigationButtons.get(this.getCurrentSlideIndex());
+                this.focusOnButton(button);
+            }, this.TIMEOUT_INTERVAL);
+            e.preventDefault();
+        }
+    }
+    observeBreakpointChanges() {
+        this.cdkBreakpointObserver
+            .observe([
+            '(max-width: 768px)',
+            '(max-width: 997px)',
+            '(min-width: 998px)',
+            '(min-width: 1140px) and (max-width: 1260px)',
+        ])
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((result) => {
+            this.isMobileBreakpoint = result.breakpoints['(max-width: 768px)'];
+            this.isSmallTabletBreakpoint = result.breakpoints['(max-width: 997px)'];
+            this.isTabletBreakpoint = result.breakpoints['(min-width: 998px)'];
+            this.isDesktopBreakpoint = result.breakpoints['(min-width: 1140px) and (max-width: 1260px)'];
+            if (this.isMobileBreakpoint && !this.isAutoplay) {
+                this.stopPlaying();
+            }
+            if (this.isTabletBreakpoint) {
+                if (this.isAutoplay || this.isAutoplay === undefined) {
+                    this.startPlaying();
+                }
+            }
+        });
+    }
+    observeElementSizeChanges() {
+        new ResizeObserver(() => {
+            setTimeout(() => {
+                if (this.isSmallTabletBreakpoint) {
+                    this.resetHeight();
+                }
+                else if (!this.isSmallTabletBreakpoint) {
+                    this.checkBannerHeights();
+                }
+                this.cd.detectChanges();
+            }, this.TIMEOUT_INTERVAL);
+        }).observe(this.carouselContainerElement.nativeElement);
+    }
+    checkBannerHeights() {
+        const heightValues = this.slides.map((slide) => {
+            const height = slide.banner?.el.nativeElement.offsetHeight;
+            if (height === 'auto') {
+                return 0;
+            }
+            if (Number.isNaN(height) || height === 100) {
+                return 1;
+            }
+            return height;
+        });
+        const elementHeights = heightValues.filter((height) => height !== undefined);
+        const tallestElementHeight = Math.max(...elementHeights);
+        if (tallestElementHeight > 0) {
+            this.slides.forEach((slide) => {
+                const banner = slide.banner;
+                if (banner) {
+                    const bannerImage = banner.eclBannerImage;
+                    this.renderer2.setStyle(banner.el.nativeElement, 'height', `${tallestElementHeight}px`);
+                    if (bannerImage) {
+                        this.renderer2.setStyle(bannerImage.el.nativeElement, 'aspectRatio', 'auto');
+                    }
+                }
+            });
+            this.resetHiddenItems();
+        }
+    }
+    resetHeight() {
+        this.getAllSlidesArray().forEach((slide) => {
+            const banner = slide.banner;
+            if (banner) {
+                const bannerImage = slide.banner.eclBannerImage;
+                const bannerVideo = slide.banner.eclBannerVideo;
+                this.renderer2.setStyle(banner.el.nativeElement, 'height', '');
+                if (bannerImage) {
+                    this.renderer2.setStyle(bannerImage.el.nativeElement, 'aspectRatio', '');
+                }
+                if (bannerVideo) {
+                    this.renderer2.setStyle(bannerVideo.el.nativeElement, 'aspectRatio', '');
+                }
+            }
+        });
+        this.resetHiddenItems();
+    }
+    resetHiddenItems() {
+        if (this.hasControls()) {
+            this.firstHiddenItem.el.nativeElement.innerHTML = this.getLastContentChild();
+            this.lastHiddenItem.el.nativeElement.innerHTML = this.getFirstContentChild();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclCarouselComponent, deps: [{ token: i1.BreakpointObserver }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i2.EclRtlService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.1", type: EclCarouselComponent, isStandalone: false, selector: "ecl-carousel", inputs: { ariaLabel: ["aria-label", "ariaLabel"], isAutoplay: ["isAutoplay", "isAutoplay", booleanAttribute], playInterval: ["playInterval", "playInterval", numberAttribute] }, outputs: { slide: "slide" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.aria-roledescription": "this.ariaRoleDescription", "class": "this.cssClasses" } }, queries: [{ propertyName: "slides", predicate: i0.forwardRef(() => EclCarouselItemComponent) }], viewQueries: [{ propertyName: "carouselContainerElement", first: true, predicate: ["carouselContainer"], descendants: true }, { propertyName: "playButton", first: true, predicate: ["playButton"], descendants: true }, { propertyName: "pauseButton", first: true, predicate: ["pauseButton"], descendants: true }, { 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: "navigationButtons", predicate: ["currButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if(hasControls()){\n<div class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__autoplay\">\n            <button #playButton class=\"ecl-button ecl-button--tertiary ecl-carousel__play ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'none' : 'flex'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPlayClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PLAY' | translate }}\n                    </span>\n                    <ecl-icon icon=\"play-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\">\n                    </ecl-icon>\n                </span>\n            </button>\n\n            <button #pauseButton class=\"ecl-button ecl-button--tertiary ecl-carousel__pause ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'flex' : 'none'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPauseClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PAUSE' | translate }}\n                    </span>\n                    <ecl-icon icon=\"pause-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\"> </ecl-icon>\n                </span>\n\n            </button>\n        </div>\n\n        <div class=\"ecl-carousel__navigation\" role=\"tablist\" >\n            @for (slide of slides; let i = $index; track slide) {\n            <button #currButton [attr.aria-current]=\"i === getCurrentSlideIndex()\" [attr.tabindex]=\"i === getCurrentSlideIndex() ? null: -1\"\n                class=\"ecl-button ecl-button--tertiary ecl-carousel__navigation-item\" role=\"tab\" (click)=\"onSlideControlClick(slide)\"\n                (keydown)=\"onNavBtnKeyboardPress($event, i)\">\n                {{ i + 1 }}\n            </button>\n            }\n        </div>\n    </div>\n</div>\n}\n<div #carouselContainer class=\"ecl-carousel__container\" [class.ecl-carousel-container--padded]=\"isPadded()\">\n    <div #slidesContainer (keyup)=\"onFirstCarouselElementPress($event)\" class=\"ecl-carousel__slides\"\n        [style.width.px]=\"getCarouselSlidesWidth()\" [style.left.px]=\"!isRtl ? getCarouselSlidesOffsetLeft() : null\"\n        [style.right.px]=\"isRtl ? getCarouselSlidesOffsetRight() : null\"\n        [style.transition-duration.s]=\"transitionDuration\" (mouseover)=\"onSlideHover()\" (mouseout)=\"onSlideHoverout()\">\n\n        @if(hasControls()){\n        <ecl-carousel-item #firstHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n        <ng-content></ng-content>\n\n        @if(hasControls()){\n        <ecl-carousel-item #lastHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n    </div>\n</div>", styles: [".ecl-carousel__slides{transition-duration:.4s}\n"], dependencies: [{ kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclCarouselItemComponent, selector: "ecl-carousel-item", inputs: ["id", "isCurrent"], outputs: ["slideClick"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclCarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-carousel', standalone: false, template: "@if(hasControls()){\n<div class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__autoplay\">\n            <button #playButton class=\"ecl-button ecl-button--tertiary ecl-carousel__play ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'none' : 'flex'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPlayClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PLAY' | translate }}\n                    </span>\n                    <ecl-icon icon=\"play-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\">\n                    </ecl-icon>\n                </span>\n            </button>\n\n            <button #pauseButton class=\"ecl-button ecl-button--tertiary ecl-carousel__pause ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'flex' : 'none'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPauseClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PAUSE' | translate }}\n                    </span>\n                    <ecl-icon icon=\"pause-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\"> </ecl-icon>\n                </span>\n\n            </button>\n        </div>\n\n        <div class=\"ecl-carousel__navigation\" role=\"tablist\" >\n            @for (slide of slides; let i = $index; track slide) {\n            <button #currButton [attr.aria-current]=\"i === getCurrentSlideIndex()\" [attr.tabindex]=\"i === getCurrentSlideIndex() ? null: -1\"\n                class=\"ecl-button ecl-button--tertiary ecl-carousel__navigation-item\" role=\"tab\" (click)=\"onSlideControlClick(slide)\"\n                (keydown)=\"onNavBtnKeyboardPress($event, i)\">\n                {{ i + 1 }}\n            </button>\n            }\n        </div>\n    </div>\n</div>\n}\n<div #carouselContainer class=\"ecl-carousel__container\" [class.ecl-carousel-container--padded]=\"isPadded()\">\n    <div #slidesContainer (keyup)=\"onFirstCarouselElementPress($event)\" class=\"ecl-carousel__slides\"\n        [style.width.px]=\"getCarouselSlidesWidth()\" [style.left.px]=\"!isRtl ? getCarouselSlidesOffsetLeft() : null\"\n        [style.right.px]=\"isRtl ? getCarouselSlidesOffsetRight() : null\"\n        [style.transition-duration.s]=\"transitionDuration\" (mouseover)=\"onSlideHover()\" (mouseout)=\"onSlideHoverout()\">\n\n        @if(hasControls()){\n        <ecl-carousel-item #firstHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n        <ng-content></ng-content>\n\n        @if(hasControls()){\n        <ecl-carousel-item #lastHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n    </div>\n</div>", styles: [".ecl-carousel__slides{transition-duration:.4s}\n"] }]
+        }], ctorParameters: () => [{ type: i1.BreakpointObserver }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i2.EclRtlService }], propDecorators: { ariaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }, {
+                type: Input,
+                args: ['aria-label']
+            }], ariaRoleDescription: [{
+                type: HostBinding,
+                args: ['attr.aria-roledescription']
+            }], isAutoplay: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], playInterval: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], slide: [{
+                type: Output
+            }], carouselContainerElement: [{
+                type: ViewChild,
+                args: ['carouselContainer']
+            }], slides: [{
+                type: ContentChildren,
+                args: [forwardRef(() => EclCarouselItemComponent)]
+            }], navigationButtons: [{
+                type: ViewChildren,
+                args: ['currButton']
+            }], playButton: [{
+                type: ViewChild,
+                args: ['playButton']
+            }], pauseButton: [{
+                type: ViewChild,
+                args: ['pauseButton']
+            }], firstHiddenItem: [{
+                type: ViewChild,
+                args: ['firstHiddenItem']
+            }], lastHiddenItem: [{
+                type: ViewChild,
+                args: ['lastHiddenItem']
+            }], slidesContainer: [{
+                type: ViewChild,
+                args: ['slidesContainer']
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+const COMPONENTS = [EclCarouselComponent, EclCarouselItemComponent];
+class EclCarouselComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclCarouselComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclCarouselComponentModule, declarations: [EclCarouselComponent, EclCarouselItemComponent], imports: [CommonModule, EclIconComponentModule, TranslateModule], exports: [EclCarouselComponent, EclCarouselItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclCarouselComponentModule, imports: [CommonModule, EclIconComponentModule, TranslateModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclCarouselComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, EclIconComponentModule, TranslateModule],
+                    exports: [...COMPONENTS],
+                    declarations: [...COMPONENTS],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EclCarouselComponent, EclCarouselComponentModule, EclCarouselItemComponent, EclSlideEvent };
+//# sourceMappingURL=eui-ecl-components-ecl-carousel.mjs.map