@eui/ecl 22.0.0-alpha.52 → 22.0.0-alpha.53

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

@@ -1,10 +1,13 @@
 import { BreakpointObserver } from '@angular/cdk/layout';
 import * as i0 from '@angular/core';
 import { inject, ElementRef, signal, input, booleanAttribute, linkedSignal, output, contentChild, forwardRef, computed, Component, numberAttribute, viewChild, contentChildren, viewChildren, ChangeDetectorRef, Renderer2, DOCUMENT, afterNextRender } from '@angular/core';
-import { EclIconComponent } from '@eui/ecl/components/ecl-icon';
+import * as i1 from '@eui/ecl/components/ecl-slider';
+import { EUI_ECL_SLIDER } from '@eui/ecl/components/ecl-slider';
 import { EclBaseEvent, ECLBaseDirective, EclRtlService, KeyCode } from '@eui/ecl/core';
-import { TranslatePipe } from '@ngx-translate/core';
-import { Subject, fromEvent, auditTime, takeUntil, switchMap, interval } from 'rxjs';
+import { TranslateService, TranslatePipe } from '@ngx-translate/core';
+import { EmblaCarouselDirective } from 'embla-carousel-angular';
+import Autoplay from 'embla-carousel-autoplay';
+import { Subject, fromEvent, auditTime, takeUntil } from 'rxjs';
 import { EclBannerComponent } from '@eui/ecl/components/ecl-banner';
 
 /**
@@ -61,6 +64,12 @@ class EclCarouselItemComponent extends ECLBaseDirective {
          */
         this.isCurrent = linkedSignal(() => this.isCurrentInput(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isCurrent" }] : /* istanbul ignore next */ []));
+        /**
+         * Text shown in the carousel teaser (navigation) button for this slide.
+         * Optional; when empty, no teaser label is rendered for the slide.
+         */
+        this.teaserText = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "teaserText" }] : /* istanbul ignore next */ []));
         /**
          * Emits an event when the slide is clicked.
          */
@@ -88,7 +97,7 @@ class EclCarouselItemComponent extends ECLBaseDirective {
         this.slideClick.emit(new EclSlideEvent(this));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclCarouselItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclCarouselItemComponent, isStandalone: true, selector: "ecl-carousel-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isCurrentInput: { classPropertyName: "isCurrentInput", publicName: "isCurrent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slideClick: "slideClick" }, host: { attributes: { "role": "tabpanel" }, listeners: { "click": "onSlideClick()" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-roledescription": "\"slide\"", "attr.inert": "!isCurrent() || undefined", "class": "cssClasses()" } }, queries: [{ propertyName: "banner", first: true, predicate: i0.forwardRef(() => EclBannerComponent), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host:before{left:0!important;display:none}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclCarouselItemComponent, isStandalone: true, selector: "ecl-carousel-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isCurrentInput: { classPropertyName: "isCurrentInput", publicName: "isCurrent", isSignal: true, isRequired: false, transformFunction: null }, teaserText: { classPropertyName: "teaserText", publicName: "teaserText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slideClick: "slideClick" }, host: { attributes: { "role": "tabpanel" }, listeners: { "click": "onSlideClick()" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-roledescription": "\"slide\"", "attr.inert": "!isCurrent() || undefined", "class": "cssClasses()" } }, queries: [{ propertyName: "banner", first: true, predicate: i0.forwardRef(() => EclBannerComponent), descendants: true, isSignal: 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: "22.1.2", ngImport: i0, type: EclCarouselItemComponent, decorators: [{
             type: Component,
@@ -100,22 +109,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         '[class]': 'cssClasses()',
                         '(click)': 'onSlideClick()',
                     }, template: "<ng-content></ng-content>\n", styles: [":host:before{left:0!important;display:none}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], isCurrentInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCurrent", required: false }] }], slideClick: [{ type: i0.Output, args: ["slideClick"] }], banner: [{ type: i0.ContentChild, args: [forwardRef(() => EclBannerComponent), { isSignal: true }] }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], isCurrentInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCurrent", required: false }] }], teaserText: [{ type: i0.Input, args: [{ isSignal: true, alias: "teaserText", required: false }] }], slideClick: [{ type: i0.Output, args: ["slideClick"] }], banner: [{ type: i0.ContentChild, args: [forwardRef(() => EclBannerComponent), { isSignal: true }] }] } });
 
+/**
+ * Number of teaser buttons visible at once on the desktop breakpoint.
+ */
+const VISIBLE_TEASERS = 4;
 /**
  * Carousel (slideshow) component following the ECL design system.
  * Renders a sequence of `EclCarouselItemComponent` slides with autoplay, keyboard navigation,
  * responsive breakpoint awareness, and RTL layout support.
  *
+ * The slide engine is powered by Embla (via `embla-carousel-angular`), matching the upstream
+ * ECL implementation: an infinite `loop`, the `Autoplay` plugin driving the teaser loading bars,
+ * and a slider pager with previous/next/play/pause controls, a counter, and a tablist of teaser
+ * buttons (one per slide).
+ *
  * - Selector: `ecl-carousel`.
  * - Project `ecl-carousel-item` elements as slides (also via `contentChildren`).
- * - `ariaLabel` — ARIA label for the carousel landmark; aliased as `aria-label`; default `'Carousel description here'`.
+ * - `ariaLabel` — ARIA label for the carousel landmark; aliased as `aria-label`.
  * - `isAutoplay` — enables automatic slide advancement; boolean attribute.
  * - `playInterval` — milliseconds between automatic transitions; default `5000`.
+ * - `counterLabel` — separator label used by the counter, defaults to `ecl.common.OF`.
  * - `slide` — emits `EclSlideEvent` when the active slide changes.
- * - `isPlaying` / `isPausedForced` — public flags reflecting playback state.
- * - `isRtl` — public flag reflecting RTL mode.
- * - Navigation controls and play/pause buttons are rendered internally.
  */
 class EclCarouselComponent extends ECLBaseDirective {
     constructor() {
@@ -132,12 +148,18 @@ class EclCarouselComponent extends ECLBaseDirective {
          * Interval in milliseconds between automatic slide transitions.
          */
         this.playInterval = input(5000, { ...(ngDevMode ? { debugName: "playInterval" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * Separator label used by the counter, e.g. the "of" in "1 of 5".
+         * Defaults to the translated `ecl.common.OF` key.
+         */
+        this.counterLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "counterLabel" }] : /* istanbul ignore next */ []));
         /**
          * Event emitted when a slide change occurs.
          */
         this.slide = output();
         /**
-         * Reference to the main carousel container element.
+         * Reference to the main carousel viewport element (the Embla root).
          */
         this.carouselContainerElement = viewChild('carouselContainer', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "carouselContainerElement" }] : /* istanbul ignore next */ []));
@@ -147,58 +169,90 @@ class EclCarouselComponent extends ECLBaseDirective {
         this.slides = contentChildren(forwardRef(() => EclCarouselItemComponent), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "slides" }] : /* istanbul ignore next */ []));
         /**
-         * References to the navigation buttons corresponding to each slide.
+         * Indicates whether autoplay is currently active.
          */
-        this.navigationButtons = viewChildren('currButton', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "navigationButtons" }] : /* istanbul ignore next */ []));
+        this.isPlaying = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPlaying" }] : /* istanbul ignore next */ []));
         /**
-         * Reference to the play button element.
+         * Indicates whether autoplay was manually paused (via the pause button or
+         * on mobile). When paused this way the loading bar is cleared.
          */
-        this.playButton = viewChild('playButton', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "playButton" }] : /* istanbul ignore next */ []));
+        this.isPausedForced = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPausedForced" }] : /* istanbul ignore next */ []));
         /**
-         * Reference to the pause button element.
+         * Indicates whether the layout is currently in RTL mode.
          */
-        this.pauseButton = viewChild('pauseButton', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pauseButton" }] : /* istanbul ignore next */ []));
+        this.isRtl = false;
         /**
-         * Reference to the first hidden slide item (used for focus management).
+         * Zero-based index of the currently active slide (mirrors Embla's selected snap).
          */
-        this.firstHiddenItem = viewChild('firstHiddenItem', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "firstHiddenItem" }] : /* istanbul ignore next */ []));
+        this.activeIndex = 0;
         /**
-         * Reference to the last hidden slide item (used for focus management).
+         * Start index of the currently visible teaser window (desktop only).
          */
-        this.lastHiddenItem = viewChild('lastHiddenItem', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "lastHiddenItem" }] : /* istanbul ignore next */ []));
+        this.teaserWindowStart = 0;
         /**
-         * Reference to the slides container element.
+         * Indicates whether autoplay is temporarily paused by hover/focus. Unlike a
+         * manual pause, the loading bar stays visible and frozen at its current
+         * progress (matching ECL), resuming when the pointer/focus leaves.
          */
-        this.slidesContainer = viewChild('slidesContainer', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "slidesContainer" }] : /* istanbul ignore next */ []));
+        this.isHoverPaused = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHoverPaused" }] : /* istanbul ignore next */ []));
         /**
-         * Indicates whether autoplay is currently active.
+         * Whether the current viewport is at the mobile breakpoint. A signal so the
+         * template can react (the pager drops play/pause on mobile, matching ECL,
+         * where play/pause is a desktop-only control).
          */
-        this.isPlaying = false;
+        this.isMobileBreakpoint = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMobileBreakpoint" }] : /* istanbul ignore next */ []));
         /**
-         * Indicates whether autoplay was manually paused.
+         * Whether the viewport is at or above the ECL desktop breakpoint (1140px).
+         * This is the boundary the ECL CSS uses to show the play/pause controls and
+         * the teaser tablist (and to hide the mobile dots). A signal so the pager
+         * variant can react: play/pause only renders at/above this width, matching
+         * the CSS so the pause button never leaks onto narrower viewports.
          */
-        this.isPausedForced = false;
+        this.isDesktopBreakpointActive = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDesktopBreakpointActive" }] : /* istanbul ignore next */ []));
         /**
-         * Indicates whether the layout is currently in RTL mode.
+         * Embla options, mirroring the upstream ECL configuration.
          */
-        this.isRtl = false;
+        this.emblaOptions = {
+            loop: true,
+            align: 'start',
+            duration: 20,
+        };
+        /**
+         * Embla plugins. Built once so the Embla directive does not needlessly re-init.
+         */
+        this.emblaPlugins = [];
         /**
-         * Duration of the slide transition animation (in seconds).
+         * Embla events the component reacts to.
          */
-        this.transitionDuration = 0.4;
-        this.isMobileBreakpoint = false;
-        this.isSmallTabletBreakpoint = false;
+        this.emblaEvents = [
+            'select',
+            'reInit',
+            'autoplay:timerset',
+        ];
+        /**
+         * Reference to the Embla directive driving the slide engine.
+         */
+        this.embla = viewChild('embla', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "embla" }] : /* istanbul ignore next */ []));
+        /**
+         * References to the teaser navigation buttons corresponding to each slide.
+         */
+        this.teaserButtons = viewChildren('teaserButton', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "teaserButtons" }] : /* istanbul ignore next */ []));
+        /**
+         * References to the teaser loading-bar completion elements (one per slide),
+         * used to restart the progress animation when the active slide changes.
+         */
+        this.loadingBars = viewChildren('loadingBar', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadingBars" }] : /* istanbul ignore next */ []));
         this.isTabletBreakpoint = false;
-        this.isDesktopBreakpoint = false;
         this.isLargeBreakpoint = false;
-        this.playSubject = new Subject();
-        this.stopSubject = new Subject();
+        this.isDesktopBreakpoint = false;
         this.destroy$ = new Subject();
         /**
          * Debounce interval (ms) used internally for timing and transitions.
@@ -208,8 +262,14 @@ class EclCarouselComponent extends ECLBaseDirective {
         this.cd = inject(ChangeDetectorRef);
         this.renderer2 = inject(Renderer2);
         this.eclRtlService = inject(EclRtlService);
+        this.translate = inject(TranslateService);
         this.document = inject(DOCUMENT);
-        this.window = this.document.defaultView; // Window | null
+        this.window = this.document.defaultView;
+        /**
+         * Host element, used to locate the slider pager's play/pause buttons by their
+         * ECL classes for focus management after a play/pause toggle.
+         */
+        this.hostEl = inject(ElementRef);
         /**
          * Returns the computed CSS class list for the component.
          */
@@ -217,25 +277,39 @@ class EclCarouselComponent extends ECLBaseDirective {
         ...(ngDevMode ? [{ debugName: "cssClasses" }] : /* istanbul ignore next */ []));
         afterNextRender(() => {
             this.observeElementSizeChanges();
-            this.cd.detectChanges();
             this.observeBreakpointChanges();
-            fromEvent(this.window, 'resize').pipe(auditTime(50), takeUntil(this.destroy$)).subscribe(() => {
-                this.transitionDuration = 0;
-                this.cd.detectChanges();
-                // Restore transition after layout settles
-                setTimeout(() => {
-                    this.transitionDuration = 0.4;
-                    this.cd.detectChanges();
-                });
-                this.observeElementSizeChanges();
-            });
+            this.syncFromEmbla();
+            if (this.window) {
+                fromEvent(this.window, 'resize')
+                    .pipe(auditTime(50), takeUntil(this.destroy$))
+                    .subscribe(() => this.observeElementSizeChanges());
+            }
         });
     }
     /**
-     * Angular lifecycle hook: initializes autoplay and RTL detection.
+     * Angular lifecycle hook: initializes RTL detection and the Embla plugins.
      */
     ngOnInit() {
-        this.initAutoplay();
+        this.emblaOptions = {
+            ...this.emblaOptions,
+            direction: this.isRtl ? 'rtl' : 'ltr',
+        };
+        const autoplayDesired = this.isAutoplayDesired();
+        // Reflect the initial play state so the current slide's loading bar is
+        // shown on load (the plugin self-starts via playOnInit).
+        this.isPlaying.set(autoplayDesired);
+        this.emblaPlugins = [
+            Autoplay({
+                delay: this.playInterval(),
+                // Autoplay is on by default (matching ECL) unless explicitly
+                // disabled via [isAutoplay]="false". Letting the plugin start
+                // itself avoids a race with Embla's own initialization.
+                playOnInit: autoplayDesired,
+                stopOnInteraction: false,
+                stopOnMouseEnter: true,
+                stopOnFocusIn: true,
+            }),
+        ];
         this.handleRtlChangeState();
     }
     /**
@@ -243,447 +317,377 @@ class EclCarouselComponent extends ECLBaseDirective {
      */
     ngAfterContentInit() {
         setTimeout(() => {
-            this.initializeSlider();
+            this.initSlides();
         });
     }
     /**
-     * Angular lifecycle hook: cleans up subscriptions and event listeners.
+     * Angular lifecycle hook: cleans up subscriptions.
      */
     ngOnDestroy() {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
-        if (this.unsubscribeListener) {
-            this.unsubscribeListener();
-        }
-    }
-    /**
-     * Starts autoplay and focuses the pause button.
-     */
-    onPlayClick() {
-        this.startPlaying();
-        this.focusOnButton(this.pauseButton());
     }
     /**
-     * Stops autoplay and focuses the play button.
-     */
-    onPauseClick() {
-        this.stopPlaying();
-        this.focusOnButton(this.playButton());
-    }
-    /**
-     * Handles key press on the first carousel element to stop autoplay if TAB is pressed.
-     */
-    onFirstCarouselElementPress(e) {
-        if (e.key === KeyCode.TAB) {
-            if (this.isPlaying) {
-                this.stopPlaying();
-            }
-        }
-    }
-    /**
-     * Handles keyboard interaction on the play button.
-     */
-    onPlayKeyboardPress(e) {
-        if (e.key === KeyCode.TAB && e.shiftKey) {
-            return;
-        }
-        if ([KeyCode.TAB].includes(e.key)) {
-            if (this.isPlaying) {
-                this.focusOnButton(this.navigationButtons().at(this.getCurrentSlideIndex()));
-                this.stopPlaying();
-            }
-            else {
-                this.focusOnButton(this.navigationButtons().at(this.getCurrentSlideIndex()));
-            }
-            e.preventDefault();
-        }
-        else if (!this.isPlaying && [KeyCode.ARROW_RIGHT].includes(e.key)) {
-            this.focusOnButton(this.navigationButtons().at(this.getCurrentSlideIndex()));
-        }
-    }
-    /**
-     * Handles keyboard navigation for the navigation buttons.
+     * Returns whether the carousel has padding applied (e.g., on desktop breakpoint).
      */
-    onNavBtnKeyboardPress(e, index) {
-        if (e.key === KeyCode.ARROW_RIGHT) {
-            this.onNavigationButtonArrowRight(e);
-        }
-        else if (e.key === KeyCode.ARROW_LEFT) {
-            this.onNavigationButtonArrowLeft(e, index);
-        }
-        return;
+    isPadded() {
+        return this.isDesktopBreakpoint;
     }
     /**
-     * Checks whether a given button is currently visible (not hidden via style).
+     * Checks whether there are enough slides to render controls.
      */
-    isButtonVisible(button) {
-        if (!button) {
-            return false;
-        }
-        return button.nativeElement.style.display === '';
+    hasControls() {
+        return this.getSlidesCount() > 1;
     }
     /**
-     * Sets focus on the specified button.
+     * Retrieves the current active slide index (zero-based).
      */
-    focusOnButton(button) {
-        if (!button) {
-            return;
-        }
-        button.nativeElement.focus();
+    getCurrentSlideIndex() {
+        return this.activeIndex;
     }
     /**
-     * Handles user interaction with a slide control button.
+     * Returns the 1-based position of the active slide (for the counter).
      */
-    onSlideControlClick(slide) {
-        this.stopPlaying();
-        this.activateSlide(slide, true);
+    getCounterCurrent() {
+        return this.activeIndex + 1;
     }
     /**
-     * Navigates to the next slide and stops autoplay.
+     * Returns the total number of slides (for the counter).
      */
-    onNextSlideClick() {
-        this.stopPlaying();
-        this.goToNextSlide(true);
+    getCounterTotal() {
+        return this.getSlidesCount();
     }
     /**
-     * Navigates to the previous slide and stops autoplay.
+     * Dot indices for the mobile slider pager (one dot per slide). The dots are
+     * hidden on desktop via the ECL CSS (`.ecl-carousel__dots { display: none }`)
+     * and shown at the mobile breakpoint.
      */
-    onPreviousSlideClick() {
-        this.stopPlaying();
-        this.goToPreviousSlide(true);
+    getDotIndices() {
+        return Array.from({ length: this.getSlidesCount() }, (_unused, dotIndex) => dotIndex);
     }
     /**
-     * Pauses autoplay on mouse hover.
+     * Pre-translated accessible label for each pager dot. Translated here since
+     * the shared `ecl-slider-pager` receives plain strings.
      */
-    onSlideHover() {
-        this.pausePlaying();
+    getDotAriaLabels() {
+        const total = this.getSlidesCount();
+        return Array.from({ length: total }, (_unused, dotIndex) => this.translate.instant('ecl.carousel.GO-TO-SLIDE', {
+            current: dotIndex + 1,
+            total,
+        }));
     }
     /**
-     * Resumes autoplay on mouse leave, if not manually paused.
+     * Returns whether a teaser button should be visible in the current window.
      */
-    onSlideHoverout() {
-        if (!this.isStopButtonPressed()) {
-            this.resumePlaying();
+    isTeaserVisible(index) {
+        const count = this.getSlidesCount();
+        if (count <= VISIBLE_TEASERS) {
+            return true;
         }
+        const position = ((index - this.teaserWindowStart) % count + count) % count;
+        return position < VISIBLE_TEASERS;
     }
     /**
-     * Returns whether the stop button (pause) has been pressed by the user.
+     * Returns the flex order of a teaser button within the visible window.
      */
-    isStopButtonPressed() {
-        return this.isPausedForced;
+    getTeaserOrder(index) {
+        const count = this.getSlidesCount();
+        return ((index - this.teaserWindowStart) % count + count) % count;
     }
     /**
-     * Returns whether the carousel has padding applied (e.g., on desktop breakpoint).
+     * Whether the pager should show the "pause" control (i.e. autoplay is
+     * actively running). While the pointer/focus hover-pauses the carousel the
+     * timer is suspended, so the pager must show "play" even though a manual
+     * pause was not triggered. Mirrors upstream ECL, where hovering flips the
+     * control to play.
      */
-    isPadded() {
-        return this.isDesktopBreakpoint;
+    isPagerPlaying() {
+        return this.isPlaying() && !this.isHoverPaused();
     }
     /**
-     * Checks whether there are enough slides to render controls.
+     * Pager variant by breakpoint. Below the ECL desktop breakpoint (1140px)
+     * the carousel shows only the dots navigation (prev / dots / next);
+     * play/pause is a desktop-only control in ECL. Rendering `'dots'` there
+     * avoids the pager's inline play/pause `display` style (which would
+     * otherwise beat the ECL CSS and leave the pause button visible on narrower
+     * viewports). At/above 1140px the dots are hidden by CSS, so
+     * `'play-pause-dots'` yields play/pause + prev/next + teasers.
+     *
+     * The 1140px boundary mirrors the media query the ECL CSS uses to toggle
+     * `.ecl-carousel__play/__pause` and `.ecl-carousel__teasers`.
      */
-    hasControls() {
-        return this.getSlidesCount() > 1;
+    pagerVariant() {
+        return this.isDesktopBreakpointActive() ? 'play-pause-dots' : 'dots';
     }
     /**
-     * Retrieves the current active slide index.
-     * Corrects index for internal structure with hidden buffer slides.
+     * Handles the throttled Embla events the component subscribed to.
      */
-    getCurrentSlideIndex() {
-        let currentIndex;
-        this.getAllSlidesArray().forEach((item, idx) => {
-            if (item && item.isCurrent()) {
-                currentIndex = idx;
-            }
-        });
-        if (currentIndex === this.getAllSlidesCount() - 1) {
-            return 0;
+    onEmblaEvent(event) {
+        switch (event) {
+            case 'select':
+            case 'reInit':
+                this.syncFromEmbla();
+                break;
+            case 'autoplay:timerset':
+                // Fired each time the autoplay timer (re)starts for the current
+                // slide; replay the loading-bar fill animation from zero.
+                this.restartActiveLoadingBar();
+                break;
+            default:
+                break;
         }
-        else if (currentIndex === 0) {
-            return this.getSlidesCount() - 1;
-        }
-        return currentIndex - 1;
     }
     /**
-     * Computes the left offset to shift the slides container.
+     * Starts autoplay.
+     *
+     * @param moveFocus when true (a user clicked play) focus moves to the pause
+     *        button. Auto-starts (e.g. on breakpoint changes) pass false so the
+     *        page is not scrolled to the carousel on load.
      */
-    getCarouselSlidesOffsetLeft() {
-        return -1 * this.carouselContainerElement()?.nativeElement.offsetWidth * this.getCurrentItemIndex();
-    }
-    /**
-     * Computes the right offset to shift the slides container (same logic as left in RTL).
-     */
-    getCarouselSlidesOffsetRight() {
-        return -1 * this.carouselContainerElement()?.nativeElement.offsetWidth * this.getCurrentItemIndex();
+    onPlayClick(moveFocus = true) {
+        this.getAutoplay()?.play();
+        this.isPlaying.set(true);
+        this.isPausedForced.set(false);
+        this.isHoverPaused.set(false);
+        this.cd.detectChanges();
+        if (moveFocus) {
+            this.focusPagerButton('.ecl-carousel__pause');
+        }
     }
     /**
-     * Subscribes to RTL layout state changes to adapt carousel behavior.
+     * Stops autoplay and focuses the play button.
      */
-    handleRtlChangeState() {
-        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {
-            this.isRtl = rtlState;
-        });
+    onPauseClick() {
+        // Pause (not full stop): halt the autoplay timer but keep the active
+        // teaser loading bar visible, frozen at its current progress (matching
+        // upstream ECL's `handleAutoPlay(false, true)`). The installed
+        // embla-carousel-autoplay exposes no `pause()`, so we call `stop()`
+        // WITHOUT `reset()` — the frozen bar is driven by our `is-paused` CSS
+        // class, not the plugin. A full stop+reset (which clears the bar) only
+        // happens on prev/next/teaser navigation via `stopAutoplay()`.
+        this.getAutoplay()?.stop();
+        this.isPlaying.set(false);
+        this.isPausedForced.set(true);
+        this.isHoverPaused.set(false);
+        this.cd.detectChanges();
+        this.focusPagerButton('.ecl-carousel__play');
     }
     /**
-     * Initializes autoplay logic using RxJS intervals and subject triggers.
+     * Navigates to the next slide and stops autoplay.
      */
-    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);
-        });
+    onNextSlideClick() {
+        this.stopAutoplay();
+        this.embla()?.scrollNext();
     }
     /**
-     * Returns the index of the currently active slide item.
+     * Navigates to the previous slide and stops autoplay.
      */
-    getCurrentItemIndex() {
-        let result = 0;
-        this.getAllSlidesArray().forEach((item, index) => {
-            if (item && item.isCurrent()) {
-                result = index;
-            }
-        });
-        return result;
+    onPreviousSlideClick() {
+        this.stopAutoplay();
+        this.embla()?.scrollPrev();
     }
     /**
-     * Initializes slides, hidden buffer items, and sets default active slide.
+     * Handles user interaction with a teaser button: activates the matching slide.
      */
-    initializeSlider() {
-        this.slides().forEach((item, idx) => {
-            this.initSlide(item, idx);
-        });
-        if (this.hasControls()) {
-            this.initHiddenItems();
-            if (this.isNoSlideSelected()) {
-                this.activateSlide(this.slides().at(0), false);
-            }
-        }
+    onTeaserClick(index) {
+        this.stopAutoplay();
+        this.embla()?.scrollTo(index);
     }
     /**
-     * Initializes hidden first and last slide clones used for infinite scroll illusion.
+     * Handles a dot activation from the mobile slider pager: scrolls to the
+     * matching slide and stops autoplay (same behavior as a teaser click).
      */
-    initHiddenItems() {
-        this.firstHiddenItem().el.nativeElement.innerHTML = this.getLastContentChild();
-        this.firstHiddenItem().isCurrent.set(false);
-        this.lastHiddenItem().el.nativeElement.innerHTML = this.getFirstContentChild();
-        this.lastHiddenItem().isCurrent.set(false);
-        this.unsubscribeListener = this.renderer2.listen(this.slidesContainer().nativeElement, 'transitionend', () => this.checkIndex());
+    onDotClick(index) {
+        this.stopAutoplay();
+        this.embla()?.scrollTo(index);
     }
     /**
-     * Verifies current index and resets to actual slide if hidden clone is reached.
+     * Handles keyboard navigation (ArrowLeft/ArrowRight) across teaser buttons.
      */
-    checkIndex() {
-        if (this.getCurrentItemIndex() === this.getAllSlidesCount() - 1) {
-            const item = this.slides().at(0);
-            this.activateSlide(item, false);
+    onTeaserKeyboardPress(event, index) {
+        if (event.key !== KeyCode.ARROW_RIGHT && event.key !== KeyCode.ARROW_LEFT) {
+            return;
         }
-        else if (this.getCurrentItemIndex() === 0) {
-            const item = this.slides().at(-1);
-            this.activateSlide(item, false);
+        event.preventDefault();
+        const direction = event.key === KeyCode.ARROW_RIGHT ? 1 : -1;
+        const count = this.getSlidesCount();
+        const nextIndex = (index + direction + count) % count;
+        this.stopAutoplay();
+        this.embla()?.scrollTo(nextIndex);
+        this.focusOnButton(this.teaserButtons()[nextIndex]);
+    }
+    /**
+     * Freezes the loading bar while the pointer/focus is over the carousel.
+     * The Embla autoplay plugin pauses the timer itself (stopOnMouseEnter /
+     * stopOnFocusIn); this only mirrors that as a visible paused state.
+     */
+    onViewportPause() {
+        if (this.isPlaying() && !this.isPausedForced()) {
+            this.isHoverPaused.set(true);
+            this.cd.detectChanges();
         }
     }
     /**
-     * Returns the inner HTML of the last real slide (used for buffer item).
+     * Resumes the loading bar once the pointer/focus leaves the carousel.
      */
-    getLastContentChild() {
-        return this.getSlidesCount() > 0 ? this.slides().at(this.getSlidesCount() - 1).el.nativeElement.innerHTML : '';
-    }
-    /**
-     * Returns the inner HTML of the first real slide (used for buffer item).
-     */
-    getFirstContentChild() {
-        return this.getSlidesCount() > 0 ? this.slides().at(0).el.nativeElement.innerHTML : '';
-    }
-    /**
-     * Sets up a slide with index and ARIA label.
-     */
-    initSlide(item, idx) {
-        item.index.set(idx);
-        item.ariaLabel.set(`slide ${idx + 1} of ${this.getSlidesCount()}`);
-        const banner = item.banner();
-        if (banner) {
-            banner.skipHeightManagement = true;
+    onViewportResume() {
+        if (this.isHoverPaused()) {
+            this.isHoverPaused.set(false);
+            this.cd.detectChanges();
         }
     }
     /**
-     * Activates the next slide, with option to loop.
-     */
-    goToNextSlide(isLoop) {
-        this.activateSlide(this.getNextSlide(isLoop), true);
-    }
-    /**
-     * Activates the previous slide, with option to loop.
-     */
-    goToPreviousSlide(isLoop) {
-        this.activateSlide(this.getPreviousSlide(isLoop), true);
-    }
-    /**
-     * Activates a specific slide and triggers slide change event if needed.
+     * Sets focus on the specified button.
      */
-    activateSlide(slideItem, withTransition) {
-        if (withTransition) {
-            this.transitionDuration = 0.4;
-        }
-        else {
-            this.transitionDuration = 0;
-        }
-        if (slideItem) {
-            this.getAllSlidesArray().forEach((item) => {
-                item.isCurrent.set(false);
-            });
-            slideItem.isCurrent.set(true);
-        }
-        this.cd.detectChanges();
-        if (withTransition) {
-            this.slide.emit(new EclSlideEvent(this.slides().at(this.getCurrentSlideIndex())));
+    focusOnButton(button) {
+        if (!button) {
+            return;
         }
+        button.nativeElement.focus();
     }
     /**
-     * Checks if the currently focused button is the last in the list.
+     * Focuses the slider pager button matching the given ECL class selector
+     * (e.g. `.ecl-carousel__play`). Used after a play/pause toggle so focus
+     * follows the now-visible control, since the pager swaps play/pause
+     * visibility via CSS. No-op if the button is not rendered (e.g. mobile).
      */
-    isLastButton(index) {
-        const buttonsList = this.navigationButtons();
-        return index + 1 >= buttonsList.length;
+    focusPagerButton(selector) {
+        const button = this.hostEl.nativeElement.querySelector(selector);
+        button?.focus();
     }
     /**
-     * Checks if the currently focused button is the first in the list.
+     * Returns the Embla autoplay plugin instance, but only when the carousel
+     * actually has more than one scroll snap.
+     *
+     * The `embla-carousel-autoplay` plugin skips its own initialization when
+     * `scrollSnapList().length <= 1` (see the plugin's `init`), which leaves its
+     * internal `delay` lookup table undefined. Calling `play()` in that state
+     * throws (`delay[selectedScrollSnap()]` -> reading `0` of undefined). This
+     * happens whenever Embla cannot lay out multiple snaps — notably in a jsdom
+     * test or during SSR. Gating on the same `> 1` condition the plugin uses
+     * keeps autoplay a safe no-op until the carousel is genuinely slideable.
      */
-    isFirstButton(index) {
-        return index <= 0;
+    getAutoplay() {
+        const api = this.embla()?.emblaApi;
+        if (!api || api.scrollSnapList().length <= 1) {
+            return undefined;
+        }
+        return api.plugins()?.autoplay;
     }
     /**
-     * Starts autoplay mode and updates state.
+     * Whether autoplay should run. On by default (matching ECL); only disabled
+     * when the consumer explicitly sets `[isAutoplay]="false"`.
      */
-    startPlaying() {
-        this.isPlaying = true;
-        this.cd.detectChanges();
-        this.isPausedForced = false;
-        this.playSubject.next();
+    isAutoplayDesired() {
+        const isAutoplay = this.isAutoplay();
+        return isAutoplay || isAutoplay === undefined;
     }
     /**
-     * Stops autoplay mode and updates state.
+     * Stops autoplay and resets it (mirrors ECL's `handleAutoPlay(true)`),
+     * clearing the loading-bar state.
      */
-    stopPlaying() {
-        this.isPlaying = false;
+    stopAutoplay() {
+        const autoplay = this.getAutoplay();
+        autoplay?.stop();
+        autoplay?.reset();
+        this.isPlaying.set(false);
+        this.isPausedForced.set(false);
+        this.isHoverPaused.set(false);
         this.cd.detectChanges();
-        this.isPausedForced = true;
-        this.stopSubject.next();
     }
     /**
-     * Temporarily pauses autoplay (e.g. on mouse hover).
+     * Synchronizes component state from Embla's current selected snap:
+     * active index, slide `isCurrent` flags, teaser window and the slide event.
      */
-    pausePlaying() {
-        this.isPlaying = false;
+    syncFromEmbla() {
+        const api = this.embla()?.emblaApi;
+        if (!api) {
+            return;
+        }
+        const selected = api.selectedScrollSnap();
+        this.setActiveIndex(selected);
+        this.updateTeaserWindow();
+        this.slide.emit(new EclSlideEvent(this.slides().at(this.activeIndex)));
         this.cd.detectChanges();
-        this.stopSubject.next();
     }
     /**
-     * Resumes autoplay after being paused.
+     * Subscribes to RTL layout state changes to adapt carousel direction.
      */
-    resumePlaying() {
-        this.isPlaying = true;
-        this.cd.detectChanges();
-        this.playSubject.next();
+    handleRtlChangeState() {
+        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {
+            const changed = this.isRtl !== rtlState;
+            this.isRtl = rtlState;
+            if (changed) {
+                this.emblaOptions = {
+                    ...this.emblaOptions,
+                    direction: this.isRtl ? 'rtl' : 'ltr',
+                };
+                this.cd.detectChanges();
+            }
+        });
     }
     /**
-     * Retrieves the next slide based on the current index and loop setting.
+     * Initializes slides (index, ARIA label, banner height management).
      */
-    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().at(-1);
+    initSlides() {
+        const slides = this.slides();
+        slides.forEach((item, idx) => {
+            item.index.set(idx);
+            item.ariaLabel.set(`slide ${idx + 1} of ${slides.length}`);
+            item.isCurrent.set(idx === 0);
+            const banner = item.banner();
+            if (banner) {
+                banner.skipHeightManagement = true;
             }
-        }
-        else {
-            return this.slides().at(currentIndex + 1);
-        }
+        });
+        this.cd.detectChanges();
     }
     /**
-     * Returns all slides, including the hidden buffer items.
+     * Updates the active index and synchronizes slide active/inert state.
      */
-    getAllSlidesArray() {
-        return [...[this.firstHiddenItem()], ...this.slides(), ...[this.lastHiddenItem()]];
+    setActiveIndex(index) {
+        this.activeIndex = index;
+        this.slides().forEach((item, idx) => {
+            item.isCurrent.set(idx === index);
+        });
     }
     /**
-     * Retrieves the previous slide based on the current index and loop setting.
+     * Restarts the CSS progress animation on the active slide's loading bar.
+     * The animation uses `forwards`, so re-applying the `is-active` class alone
+     * will not replay it; the animation must be reset explicitly.
      */
-    getPreviousSlide(isLoop) {
-        const currentIndex = this.getCurrentSlideIndex();
-        if (currentIndex <= 0) {
-            if (isLoop) {
-                return this.getAllSlidesArray()[0];
-            }
-            else {
-                return this.slides().at(0);
-            }
+    restartActiveLoadingBar() {
+        if (!this.getAutoplay()?.isPlaying()) {
+            return;
         }
-        else {
-            return this.slides().at(currentIndex - 1);
+        const bar = this.loadingBars()[this.activeIndex]?.nativeElement;
+        if (!bar) {
+            return;
         }
+        bar.style.animation = 'none';
+        // Force reflow so the browser registers the reset before re-enabling.
+        void bar.offsetWidth;
+        bar.style.animation = '';
     }
     /**
-     * Returns the number of actual visible slides (excluding hidden buffer).
+     * Advances the visible teaser window when the active slide moves out of it.
      */
-    getSlidesCount() {
-        return this.slides().length;
-    }
-    /**
-     * Returns total number of slides, including buffer (hidden) items.
-     */
-    getAllSlidesCount() {
-        if (this.hasControls()) {
-            return this.slides().length + 2;
+    updateTeaserWindow() {
+        const count = this.getSlidesCount();
+        if (count <= VISIBLE_TEASERS) {
+            this.teaserWindowStart = 0;
+            return;
         }
-        else {
-            return this.slides().length;
+        const firstHiddenIndex = (this.teaserWindowStart + VISIBLE_TEASERS) % count;
+        if (this.activeIndex === firstHiddenIndex) {
+            this.teaserWindowStart = firstHiddenIndex;
         }
     }
     /**
-     * Determines whether no slide is currently marked as active.
-     */
-    isNoSlideSelected() {
-        return !this.slides().some((item) => item.isCurrent());
-    }
-    /**
-     * Handles right arrow key navigation for buttons.
-     */
-    onNavigationButtonArrowRight(e) {
-        setTimeout(() => {
-            this.goToNextSlide(false);
-            const button = this.navigationButtons().at(this.getCurrentSlideIndex());
-            this.focusOnButton(button);
-        }, this.TIMEOUT_INTERVAL);
-        e.preventDefault();
-    }
-    /**
-     * Handles left arrow key navigation for buttons.
+     * Returns the number of actual visible slides.
      */
-    onNavigationButtonArrowLeft(e, index) {
-        if (this.isFirstButton(index)) {
-            const playButton = this.playButton();
-            if (playButton) {
-                this.focusOnButton(playButton);
-            }
-            const pauseButton = this.pauseButton();
-            if (pauseButton) {
-                this.focusOnButton(pauseButton);
-            }
-        }
-        else {
-            setTimeout(() => {
-                this.goToPreviousSlide(false);
-                const button = this.navigationButtons().at(this.getCurrentSlideIndex());
-                this.focusOnButton(button);
-            }, this.TIMEOUT_INTERVAL);
-            e.preventDefault();
-        }
+    getSlidesCount() {
+        return this.slides()?.length ?? 0;
     }
     /**
      * Observes screen breakpoint changes to adjust autoplay and layout behavior.
@@ -692,31 +696,31 @@ class EclCarouselComponent extends ECLBaseDirective {
         this.cdkBreakpointObserver
             .observe([
             '(max-width: 768px)',
-            '(max-width: 997px)',
             '(min-width: 998px)',
             '(min-width: 1140px)',
             '(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.isMobileBreakpoint.set(result.breakpoints['(max-width: 768px)']);
             this.isTabletBreakpoint = result.breakpoints['(min-width: 998px)'];
             this.isLargeBreakpoint = result.breakpoints['(min-width: 1140px)'];
+            this.isDesktopBreakpointActive.set(result.breakpoints['(min-width: 1140px)']);
             this.isDesktopBreakpoint = result.breakpoints['(min-width: 1140px) and (max-width: 1260px)'];
-            const isAutoplay = this.isAutoplay();
-            if (this.isMobileBreakpoint && !isAutoplay) {
-                this.stopPlaying();
+            // Deactivate autoplay on mobile; (re)activate it on larger
+            // screens if autoplay is desired. Focus is never moved here so
+            // the page is not scrolled to the carousel on load/resize.
+            if (this.isMobileBreakpoint()) {
+                this.stopAutoplay();
+                return;
             }
-            if (this.isTabletBreakpoint) {
-                if (isAutoplay || isAutoplay === undefined) {
-                    this.startPlaying();
-                }
+            if (this.isTabletBreakpoint && this.isAutoplayDesired() && !this.isPausedForced()) {
+                this.onPlayClick(false);
             }
         });
     }
     /**
-     * Observes changes to the carousel's container element size using ResizeObserver.
+     * Observes changes to the carousel's viewport element size using a timeout debounce.
      */
     observeElementSizeChanges() {
         setTimeout(() => {
@@ -726,13 +730,13 @@ class EclCarouselComponent extends ECLBaseDirective {
             else {
                 this.resetHeight();
             }
+            this.embla()?.reInit();
         }, this.TIMEOUT_INTERVAL);
     }
     /**
      * Normalizes the height of all banners to match the tallest banner.
      */
     checkBannerHeights() {
-        // First, let each banner calculate its own height (like ECL's bannerInstance.setHeight(ratio))
         this.slides().forEach((slide) => {
             const banner = slide.banner();
             if (banner) {
@@ -773,7 +777,6 @@ class EclCarouselComponent extends ECLBaseDirective {
                     this.renderer2.setStyle(bannerVideo.el.nativeElement, 'aspect-ratio', 'auto');
                 }
             });
-            this.resetHiddenItems();
         }
     }
     /**
@@ -795,32 +798,27 @@ class EclCarouselComponent extends ECLBaseDirective {
                 }
             }
         });
-        this.resetHiddenItems();
-    }
-    /**
-     * Re-renders the content of hidden buffer items after style reset.
-     */
-    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: "22.1.2", ngImport: i0, type: EclCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclCarouselComponent, isStandalone: true, selector: "ecl-carousel", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, isAutoplay: { classPropertyName: "isAutoplay", publicName: "isAutoplay", isSignal: true, isRequired: false, transformFunction: null }, playInterval: { classPropertyName: "playInterval", publicName: "playInterval", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slide: "slide" }, host: { properties: { "attr.aria-label": "ariaLabel()", "attr.aria-roledescription": "\"carousel\"", "class": "cssClasses()" } }, queries: [{ propertyName: "slides", predicate: i0.forwardRef(() => EclCarouselItemComponent), isSignal: true }], viewQueries: [{ propertyName: "carouselContainerElement", first: true, predicate: ["carouselContainer"], descendants: true, isSignal: true }, { propertyName: "navigationButtons", predicate: ["currButton"], descendants: true, isSignal: true }, { propertyName: "playButton", first: true, predicate: ["playButton"], descendants: true, isSignal: true }, { propertyName: "pauseButton", first: true, predicate: ["pauseButton"], descendants: true, isSignal: true }, { propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true, isSignal: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true, isSignal: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true, isSignal: 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-button--neutral 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-button--neutral 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-button--neutral 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.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></ecl-carousel-item>\n        }\n        <ng-content></ng-content>\n\n        @if(hasControls()){\n        <ecl-carousel-item #lastHiddenItem></ecl-carousel-item>\n        }\n    </div>\n</div>\n", styles: [".ecl-carousel__slides{transition-duration:.4s}\n"], dependencies: [{ kind: "component", type: 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: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclCarouselComponent, isStandalone: true, selector: "ecl-carousel", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, isAutoplay: { classPropertyName: "isAutoplay", publicName: "isAutoplay", isSignal: true, isRequired: false, transformFunction: null }, playInterval: { classPropertyName: "playInterval", publicName: "playInterval", isSignal: true, isRequired: false, transformFunction: null }, counterLabel: { classPropertyName: "counterLabel", publicName: "counterLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slide: "slide" }, host: { properties: { "attr.aria-label": "ariaLabel()", "attr.aria-roledescription": "\"carousel\"", "class": "cssClasses()", "style.--ecl-carousel-slide-duration": "playInterval() + \"ms\"" } }, queries: [{ propertyName: "slides", predicate: i0.forwardRef(() => EclCarouselItemComponent), isSignal: true }], viewQueries: [{ propertyName: "carouselContainerElement", first: true, predicate: ["carouselContainer"], descendants: true, isSignal: true }, { propertyName: "embla", first: true, predicate: ["embla"], descendants: true, isSignal: true }, { propertyName: "teaserButtons", predicate: ["teaserButton"], descendants: true, isSignal: true }, { propertyName: "loadingBars", predicate: ["loadingBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (hasControls()) {\n<div class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__navigation\">\n            <div class=\"ecl-carousel__pager-container\">\n                <ecl-slider-pager\n                    class=\"ecl-carousel__pager\"\n                    [variant]=\"pagerVariant()\"\n                    size=\"m\"\n                    [isPlaying]=\"isPagerPlaying()\"\n                    [activeIndex]=\"getCurrentSlideIndex()\"\n                    [dotIndices]=\"getDotIndices()\"\n                    [dotAriaLabels]=\"getDotAriaLabels()\"\n                    prevExtraClasses=\"ecl-carousel__prev\"\n                    nextExtraClasses=\"ecl-carousel__next\"\n                    dotsExtraClasses=\"ecl-carousel__dots\"\n                    dotExtraClasses=\"ecl-carousel__dot\"\n                    playExtraClasses=\"ecl-carousel__play\"\n                    pauseExtraClasses=\"ecl-carousel__pause\"\n                    (play)=\"onPlayClick()\"\n                    (pause)=\"onPauseClick()\"\n                    (prev)=\"onPreviousSlideClick()\"\n                    (next)=\"onNextSlideClick()\"\n                    (goTo)=\"onDotClick($event)\">\n                </ecl-slider-pager>\n                <div class=\"ecl-carousel__counter\" dir=\"ltr\">\n                    {{ getCounterCurrent() }} {{ counterLabel() || ('ecl.common.OF' | translate) }} {{ getCounterTotal() }}\n                </div>\n            </div>\n\n            <div class=\"ecl-carousel__teasers\" role=\"tablist\">\n                @for (slide of slides(); let i = $index; track slide) {\n                <button #teaserButton type=\"button\" class=\"ecl-carousel__teaser-button\" role=\"tab\"\n                    [attr.data-ecl-carousel-slide-index]=\"i\"\n                    [attr.aria-current]=\"i === getCurrentSlideIndex() ? true : null\"\n                    [attr.tabindex]=\"i === getCurrentSlideIndex() ? null : -1\"\n                    [style.display]=\"isTeaserVisible(i) ? null : 'none'\"\n                    [style.pointer-events]=\"isTeaserVisible(i) ? null : 'none'\"\n                    [style.order]=\"getTeaserOrder(i)\" (click)=\"onTeaserClick(i)\"\n                    (keydown)=\"onTeaserKeyboardPress($event, i)\">\n                    <span class=\"ecl-carousel__teaser-loading-bar\" aria-hidden=\"true\"\n                        [class.is-active]=\"(isPlaying() || isHoverPaused() || isPausedForced()) && i === getCurrentSlideIndex()\"\n                        [class.is-paused]=\"(isHoverPaused() || isPausedForced()) && i === getCurrentSlideIndex()\">\n                        <span #loadingBar class=\"ecl-carousel__teaser-loading-bar-completion\"></span>\n                    </span>\n                    <span class=\"ecl-carousel__teaser-content\">\n                        @if (slide.teaserText()) {\n                        <span class=\"ecl-carousel__teaser-title\">{{ slide.teaserText() }}</span>\n                        }\n                    </span>\n                </button>\n                }\n            </div>\n        </div>\n    </div>\n</div>\n}\n<div #carouselContainer class=\"ecl-carousel__viewport\" [class.ecl-carousel-container--padded]=\"isPadded()\"\n    emblaCarousel #embla=\"emblaCarousel\" [options]=\"emblaOptions\" [plugins]=\"emblaPlugins\"\n    [subscribeToEvents]=\"emblaEvents\" (emblaChange)=\"onEmblaEvent($event)\"\n    (mouseenter)=\"onViewportPause()\" (mouseleave)=\"onViewportResume()\"\n    (focusin)=\"onViewportPause()\" (focusout)=\"onViewportResume()\">\n    <div class=\"ecl-carousel__slides\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: EmblaCarouselDirective, selector: "[emblaCarousel]", inputs: ["options", "plugins", "subscribeToEvents", "eventsThrottleTime"], outputs: ["emblaChange"], exportAs: ["emblaCarousel"] }, { kind: "component", type: i1.EclSliderPagerComponent, selector: "ecl-slider-pager", inputs: ["size", "variant", "isPlaying", "isPrevDisabled", "isNextDisabled", "activeIndex", "dotIndices", "dotAriaLabels", "prevExtraClasses", "nextExtraClasses", "dotsExtraClasses", "dotExtraClasses", "playExtraClasses", "pauseExtraClasses"], outputs: ["prev", "next", "goTo", "play", "pause"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclCarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-carousel', imports: [
                         TranslatePipe,
-                        EclIconComponent,
                         EclCarouselItemComponent,
+                        EmblaCarouselDirective,
+                        ...EUI_ECL_SLIDER,
                     ], host: {
                         '[attr.aria-label]': 'ariaLabel()',
                         '[attr.aria-roledescription]': '"carousel"',
                         '[class]': 'cssClasses()',
-                    }, 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-button--neutral 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-button--neutral 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-button--neutral 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.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></ecl-carousel-item>\n        }\n        <ng-content></ng-content>\n\n        @if(hasControls()){\n        <ecl-carousel-item #lastHiddenItem></ecl-carousel-item>\n        }\n    </div>\n</div>\n", styles: [".ecl-carousel__slides{transition-duration:.4s}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], isAutoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAutoplay", required: false }] }], playInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "playInterval", required: false }] }], slide: [{ type: i0.Output, args: ["slide"] }], carouselContainerElement: [{ type: i0.ViewChild, args: ['carouselContainer', { isSignal: true }] }], slides: [{ type: i0.ContentChildren, args: [forwardRef(() => EclCarouselItemComponent), { isSignal: true }] }], navigationButtons: [{ type: i0.ViewChildren, args: ['currButton', { isSignal: true }] }], playButton: [{ type: i0.ViewChild, args: ['playButton', { isSignal: true }] }], pauseButton: [{ type: i0.ViewChild, args: ['pauseButton', { isSignal: true }] }], firstHiddenItem: [{ type: i0.ViewChild, args: ['firstHiddenItem', { isSignal: true }] }], lastHiddenItem: [{ type: i0.ViewChild, args: ['lastHiddenItem', { isSignal: true }] }], slidesContainer: [{ type: i0.ViewChild, args: ['slidesContainer', { isSignal: true }] }] } });
+                        // Drives the teaser loading-bar animation duration (see @eui/styles).
+                        // It has no CSS fallback, so without it the progress animation never
+                        // runs; it must match the autoplay delay.
+                        '[style.--ecl-carousel-slide-duration]': 'playInterval() + "ms"',
+                    }, template: "@if (hasControls()) {\n<div class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__navigation\">\n            <div class=\"ecl-carousel__pager-container\">\n                <ecl-slider-pager\n                    class=\"ecl-carousel__pager\"\n                    [variant]=\"pagerVariant()\"\n                    size=\"m\"\n                    [isPlaying]=\"isPagerPlaying()\"\n                    [activeIndex]=\"getCurrentSlideIndex()\"\n                    [dotIndices]=\"getDotIndices()\"\n                    [dotAriaLabels]=\"getDotAriaLabels()\"\n                    prevExtraClasses=\"ecl-carousel__prev\"\n                    nextExtraClasses=\"ecl-carousel__next\"\n                    dotsExtraClasses=\"ecl-carousel__dots\"\n                    dotExtraClasses=\"ecl-carousel__dot\"\n                    playExtraClasses=\"ecl-carousel__play\"\n                    pauseExtraClasses=\"ecl-carousel__pause\"\n                    (play)=\"onPlayClick()\"\n                    (pause)=\"onPauseClick()\"\n                    (prev)=\"onPreviousSlideClick()\"\n                    (next)=\"onNextSlideClick()\"\n                    (goTo)=\"onDotClick($event)\">\n                </ecl-slider-pager>\n                <div class=\"ecl-carousel__counter\" dir=\"ltr\">\n                    {{ getCounterCurrent() }} {{ counterLabel() || ('ecl.common.OF' | translate) }} {{ getCounterTotal() }}\n                </div>\n            </div>\n\n            <div class=\"ecl-carousel__teasers\" role=\"tablist\">\n                @for (slide of slides(); let i = $index; track slide) {\n                <button #teaserButton type=\"button\" class=\"ecl-carousel__teaser-button\" role=\"tab\"\n                    [attr.data-ecl-carousel-slide-index]=\"i\"\n                    [attr.aria-current]=\"i === getCurrentSlideIndex() ? true : null\"\n                    [attr.tabindex]=\"i === getCurrentSlideIndex() ? null : -1\"\n                    [style.display]=\"isTeaserVisible(i) ? null : 'none'\"\n                    [style.pointer-events]=\"isTeaserVisible(i) ? null : 'none'\"\n                    [style.order]=\"getTeaserOrder(i)\" (click)=\"onTeaserClick(i)\"\n                    (keydown)=\"onTeaserKeyboardPress($event, i)\">\n                    <span class=\"ecl-carousel__teaser-loading-bar\" aria-hidden=\"true\"\n                        [class.is-active]=\"(isPlaying() || isHoverPaused() || isPausedForced()) && i === getCurrentSlideIndex()\"\n                        [class.is-paused]=\"(isHoverPaused() || isPausedForced()) && i === getCurrentSlideIndex()\">\n                        <span #loadingBar class=\"ecl-carousel__teaser-loading-bar-completion\"></span>\n                    </span>\n                    <span class=\"ecl-carousel__teaser-content\">\n                        @if (slide.teaserText()) {\n                        <span class=\"ecl-carousel__teaser-title\">{{ slide.teaserText() }}</span>\n                        }\n                    </span>\n                </button>\n                }\n            </div>\n        </div>\n    </div>\n</div>\n}\n<div #carouselContainer class=\"ecl-carousel__viewport\" [class.ecl-carousel-container--padded]=\"isPadded()\"\n    emblaCarousel #embla=\"emblaCarousel\" [options]=\"emblaOptions\" [plugins]=\"emblaPlugins\"\n    [subscribeToEvents]=\"emblaEvents\" (emblaChange)=\"onEmblaEvent($event)\"\n    (mouseenter)=\"onViewportPause()\" (mouseleave)=\"onViewportResume()\"\n    (focusin)=\"onViewportPause()\" (focusout)=\"onViewportResume()\">\n    <div class=\"ecl-carousel__slides\">\n        <ng-content></ng-content>\n    </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], isAutoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAutoplay", required: false }] }], playInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "playInterval", required: false }] }], counterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "counterLabel", required: false }] }], slide: [{ type: i0.Output, args: ["slide"] }], carouselContainerElement: [{ type: i0.ViewChild, args: ['carouselContainer', { isSignal: true }] }], slides: [{ type: i0.ContentChildren, args: [forwardRef(() => EclCarouselItemComponent), { isSignal: true }] }], embla: [{ type: i0.ViewChild, args: ['embla', { isSignal: true }] }], teaserButtons: [{ type: i0.ViewChildren, args: ['teaserButton', { isSignal: true }] }], loadingBars: [{ type: i0.ViewChildren, args: ['loadingBar', { isSignal: true }] }] } });
 
 const EUI_ECL_CAROUSEL = [
     EclCarouselComponent,