@eui/ecl 23.0.0-alpha.6 → 23.0.0-alpha.8

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

@@ -1,6 +1,6 @@
 import { BreakpointObserver } from '@angular/cdk/layout';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, output, booleanAttribute, HostListener, ContentChild, forwardRef, Input, Component, input, numberAttribute, ChangeDetectorRef, Renderer2, DOCUMENT, afterNextRender, ViewChild, ViewChildren, ContentChildren } from '@angular/core';
+import { inject, ElementRef, output, contentChild, forwardRef, booleanAttribute, HostListener, Input, Component, input, numberAttribute, viewChild, contentChildren, viewChildren, ChangeDetectorRef, Renderer2, DOCUMENT, afterNextRender } from '@angular/core';
 import { EclIconComponent } from '@eui/ecl/components/ecl-icon';
 import { EclBaseEvent, ECLBaseDirective, EclRtlService, KeyCode } from '@eui/ecl/core';
 import { TranslatePipe } from '@ngx-translate/core';
@@ -31,6 +31,11 @@ class EclCarouselItemComponent extends ECLBaseDirective {
          * Emits an event when the slide is clicked.
          */
         this.slideClick = output();
+        /**
+         * Optionally captures a banner component projected into the slide.
+         */
+        this.banner = contentChild(forwardRef(() => EclBannerComponent), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "banner" }] : /* istanbul ignore next */ []));
     }
     /**
      * Computes the slide's CSS class.
@@ -45,7 +50,7 @@ class EclCarouselItemComponent extends ECLBaseDirective {
         this.slideClick.emit(new EclSlideEvent(this));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclCarouselItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.5", type: EclCarouselItemComponent, isStandalone: true, selector: "ecl-carousel-item", inputs: { id: "id", isCurrent: ["isCurrent", "isCurrent", booleanAttribute] }, 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 }], 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.0.5", type: EclCarouselItemComponent, isStandalone: true, selector: "ecl-carousel-item", inputs: { id: "id", isCurrent: ["isCurrent", "isCurrent", booleanAttribute] }, 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.0.5", ngImport: i0, type: EclCarouselItemComponent, decorators: [{
             type: Component,
@@ -61,10 +66,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             }], isCurrent: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], slideClick: [{ type: i0.Output, args: ["slideClick"] }], banner: [{
-                type: ContentChild,
-                args: [forwardRef(() => EclBannerComponent)]
-            }], onSlideClick: [{
+            }], slideClick: [{ type: i0.Output, args: ["slideClick"] }], banner: [{ type: i0.ContentChild, args: [forwardRef(() => EclBannerComponent), { isSignal: true }] }], onSlideClick: [{
                 type: HostListener,
                 args: ['click']
             }] } });
@@ -92,6 +94,46 @@ class EclCarouselComponent extends ECLBaseDirective {
          * Event emitted when a slide change occurs.
          */
         this.slide = output();
+        /**
+         * Reference to the main carousel container element.
+         */
+        this.carouselContainerElement = viewChild('carouselContainer', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "carouselContainerElement" }] : /* istanbul ignore next */ []));
+        /**
+         * Collection of slide components rendered inside the carousel.
+         */
+        this.slides = contentChildren(forwardRef(() => EclCarouselItemComponent), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "slides" }] : /* istanbul ignore next */ []));
+        /**
+         * References to the navigation buttons corresponding to each slide.
+         */
+        this.navigationButtons = viewChildren('currButton', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigationButtons" }] : /* istanbul ignore next */ []));
+        /**
+         * Reference to the play button element.
+         */
+        this.playButton = viewChild('playButton', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "playButton" }] : /* istanbul ignore next */ []));
+        /**
+         * Reference to the pause button element.
+         */
+        this.pauseButton = viewChild('pauseButton', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pauseButton" }] : /* istanbul ignore next */ []));
+        /**
+         * Reference to the first hidden slide item (used for focus management).
+         */
+        this.firstHiddenItem = viewChild('firstHiddenItem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "firstHiddenItem" }] : /* istanbul ignore next */ []));
+        /**
+         * Reference to the last hidden slide item (used for focus management).
+         */
+        this.lastHiddenItem = viewChild('lastHiddenItem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lastHiddenItem" }] : /* istanbul ignore next */ []));
+        /**
+         * Reference to the slides container element.
+         */
+        this.slidesContainer = viewChild('slidesContainer', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "slidesContainer" }] : /* istanbul ignore next */ []));
         /**
          * Indicates whether autoplay is currently active.
          */
@@ -178,14 +220,14 @@ class EclCarouselComponent extends ECLBaseDirective {
      */
     onPlayClick() {
         this.startPlaying();
-        this.focusOnButton(this.pauseButton);
+        this.focusOnButton(this.pauseButton());
     }
     /**
      * Stops autoplay and focuses the play button.
      */
     onPauseClick() {
         this.stopPlaying();
-        this.focusOnButton(this.playButton);
+        this.focusOnButton(this.playButton());
     }
     /**
      * Handles key press on the first carousel element to stop autoplay if TAB is pressed.
@@ -206,16 +248,16 @@ class EclCarouselComponent extends ECLBaseDirective {
         }
         if ([KeyCode.TAB].includes(e.key)) {
             if (this.isPlaying) {
-                this.focusOnButton(this.navigationButtons.get(this.getCurrentSlideIndex()));
+                this.focusOnButton(this.navigationButtons().at(this.getCurrentSlideIndex()));
                 this.stopPlaying();
             }
             else {
-                this.focusOnButton(this.navigationButtons.get(this.getCurrentSlideIndex()));
+                this.focusOnButton(this.navigationButtons().at(this.getCurrentSlideIndex()));
             }
             e.preventDefault();
         }
         else if (!this.isPlaying && [KeyCode.ARROW_RIGHT].includes(e.key)) {
-            this.focusOnButton(this.navigationButtons.get(this.getCurrentSlideIndex()));
+            this.focusOnButton(this.navigationButtons().at(this.getCurrentSlideIndex()));
         }
     }
     /**
@@ -324,13 +366,13 @@ class EclCarouselComponent extends ECLBaseDirective {
      * Computes the left offset to shift the slides container.
      */
     getCarouselSlidesOffsetLeft() {
-        return -1 * this.carouselContainerElement?.nativeElement.offsetWidth * this.getCurrentItemIndex();
+        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();
+        return -1 * this.carouselContainerElement()?.nativeElement.offsetWidth * this.getCurrentItemIndex();
     }
     /**
      * Subscribes to RTL layout state changes to adapt carousel behavior.
@@ -368,13 +410,13 @@ class EclCarouselComponent extends ECLBaseDirective {
      * Initializes slides, hidden buffer items, and sets default active slide.
      */
     initializeSlider() {
-        this.slides.forEach((item, idx) => {
+        this.slides().forEach((item, idx) => {
             this.initSlide(item, idx);
         });
         if (this.hasControls()) {
             this.initHiddenItems();
             if (this.isNoSlideSelected()) {
-                this.activateSlide(this.slides.first, false);
+                this.activateSlide(this.slides().at(0), false);
             }
         }
     }
@@ -382,22 +424,22 @@ class EclCarouselComponent extends ECLBaseDirective {
      * Initializes hidden first and last slide clones used for infinite scroll illusion.
      */
     initHiddenItems() {
-        this.firstHiddenItem.el.nativeElement.innerHTML = this.getLastContentChild();
-        this.firstHiddenItem.isCurrent = false;
-        this.lastHiddenItem.el.nativeElement.innerHTML = this.getFirstContentChild();
-        this.lastHiddenItem.isCurrent = false;
-        this.unsubscribeListener = this.renderer2.listen(this.slidesContainer.nativeElement, 'transitionend', () => this.checkIndex());
+        this.firstHiddenItem().el.nativeElement.innerHTML = this.getLastContentChild();
+        this.firstHiddenItem().isCurrent = false;
+        this.lastHiddenItem().el.nativeElement.innerHTML = this.getFirstContentChild();
+        this.lastHiddenItem().isCurrent = false;
+        this.unsubscribeListener = this.renderer2.listen(this.slidesContainer().nativeElement, 'transitionend', () => this.checkIndex());
     }
     /**
      * Verifies current index and resets to actual slide if hidden clone is reached.
      */
     checkIndex() {
         if (this.getCurrentItemIndex() === this.getAllSlidesCount() - 1) {
-            const item = this.slides.first;
+            const item = this.slides().at(0);
             this.activateSlide(item, false);
         }
         else if (this.getCurrentItemIndex() === 0) {
-            const item = this.slides.last;
+            const item = this.slides().at(-1);
             this.activateSlide(item, false);
         }
     }
@@ -405,13 +447,13 @@ class EclCarouselComponent extends ECLBaseDirective {
      * Returns the inner HTML of the last real slide (used for buffer item).
      */
     getLastContentChild() {
-        return this.getSlidesCount() > 0 ? this.slides.get(this.getSlidesCount() - 1).el.nativeElement.innerHTML : '';
+        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.get(0).el.nativeElement.innerHTML : '';
+        return this.getSlidesCount() > 0 ? this.slides().at(0).el.nativeElement.innerHTML : '';
     }
     /**
      * Sets up a slide with index and ARIA label.
@@ -419,8 +461,9 @@ class EclCarouselComponent extends ECLBaseDirective {
     initSlide(item, idx) {
         item.index = idx;
         item.ariaLabel = `slide ${idx + 1} of ${this.getSlidesCount()}`;
-        if (item.banner) {
-            item.banner.skipHeightManagement = true;
+        const banner = item.banner();
+        if (banner) {
+            banner.skipHeightManagement = true;
         }
     }
     /**
@@ -453,14 +496,14 @@ class EclCarouselComponent extends ECLBaseDirective {
         }
         this.cd.detectChanges();
         if (withTransition) {
-            this.slide.emit(new EclSlideEvent(this.slides.get(this.getCurrentSlideIndex())));
+            this.slide.emit(new EclSlideEvent(this.slides().at(this.getCurrentSlideIndex())));
         }
     }
     /**
      * Checks if the currently focused button is the last in the list.
      */
     isLastButton(index) {
-        const buttonsList = this.navigationButtons;
+        const buttonsList = this.navigationButtons();
         return index + 1 >= buttonsList.length;
     }
     /**
@@ -514,18 +557,18 @@ class EclCarouselComponent extends ECLBaseDirective {
                 return this.getAllSlidesArray()[this.getAllSlidesCount() - 1];
             }
             else {
-                return this.slides.last;
+                return this.slides().at(-1);
             }
         }
         else {
-            return this.slides.get(currentIndex + 1);
+            return this.slides().at(currentIndex + 1);
         }
     }
     /**
      * Returns all slides, including the hidden buffer items.
      */
     getAllSlidesArray() {
-        return [...[this.firstHiddenItem], ...this.slides.toArray(), ...[this.lastHiddenItem]];
+        return [...[this.firstHiddenItem()], ...this.slides(), ...[this.lastHiddenItem()]];
     }
     /**
      * Retrieves the previous slide based on the current index and loop setting.
@@ -537,35 +580,35 @@ class EclCarouselComponent extends ECLBaseDirective {
                 return this.getAllSlidesArray()[0];
             }
             else {
-                return this.slides.first;
+                return this.slides().at(0);
             }
         }
         else {
-            return this.slides.get(currentIndex - 1);
+            return this.slides().at(currentIndex - 1);
         }
     }
     /**
      * Returns the number of actual visible slides (excluding hidden buffer).
      */
     getSlidesCount() {
-        return this.slides.length;
+        return this.slides().length;
     }
     /**
      * Returns total number of slides, including buffer (hidden) items.
      */
     getAllSlidesCount() {
         if (this.hasControls()) {
-            return this.slides.length + 2;
+            return this.slides().length + 2;
         }
         else {
-            return this.slides.length;
+            return this.slides().length;
         }
     }
     /**
      * Determines whether no slide is currently marked as active.
      */
     isNoSlideSelected() {
-        return !this.slides.some((item) => item.isCurrent);
+        return !this.slides().some((item) => item.isCurrent);
     }
     /**
      * Handles right arrow key navigation for buttons.
@@ -573,7 +616,7 @@ class EclCarouselComponent extends ECLBaseDirective {
     onNavigationButtonArrowRight(e) {
         setTimeout(() => {
             this.goToNextSlide(false);
-            const button = this.navigationButtons.get(this.getCurrentSlideIndex());
+            const button = this.navigationButtons().at(this.getCurrentSlideIndex());
             this.focusOnButton(button);
         }, this.TIMEOUT_INTERVAL);
         e.preventDefault();
@@ -583,17 +626,19 @@ class EclCarouselComponent extends ECLBaseDirective {
      */
     onNavigationButtonArrowLeft(e, index) {
         if (this.isFirstButton(index)) {
-            if (this.playButton) {
-                this.focusOnButton(this.playButton);
+            const playButton = this.playButton();
+            if (playButton) {
+                this.focusOnButton(playButton);
             }
-            if (this.pauseButton) {
-                this.focusOnButton(this.pauseButton);
+            const pauseButton = this.pauseButton();
+            if (pauseButton) {
+                this.focusOnButton(pauseButton);
             }
         }
         else {
             setTimeout(() => {
                 this.goToPreviousSlide(false);
-                const button = this.navigationButtons.get(this.getCurrentSlideIndex());
+                const button = this.navigationButtons().at(this.getCurrentSlideIndex());
                 this.focusOnButton(button);
             }, this.TIMEOUT_INTERVAL);
             e.preventDefault();
@@ -647,13 +692,14 @@ class EclCarouselComponent extends ECLBaseDirective {
      */
     checkBannerHeights() {
         // First, let each banner calculate its own height (like ECL's bannerInstance.setHeight(ratio))
-        this.slides.forEach((slide) => {
-            if (slide.banner) {
-                slide.banner.calculateHeight();
+        this.slides().forEach((slide) => {
+            const banner = slide.banner();
+            if (banner) {
+                banner.calculateHeight();
             }
         });
-        const heightValues = this.slides.map((slide) => {
-            const el = slide.banner?.el.nativeElement;
+        const heightValues = this.slides().map((slide) => {
+            const el = slide.banner()?.el.nativeElement;
             if (!el)
                 return undefined;
             const styleHeight = el.style.height;
@@ -668,9 +714,10 @@ class EclCarouselComponent extends ECLBaseDirective {
         });
         const elementHeights = heightValues.filter((h) => h !== undefined);
         const tallestElementHeight = Math.max(...elementHeights);
-        if (tallestElementHeight > 1 && elementHeights.length === this.slides.length) {
-            this.slides.forEach((slide) => {
-                const banner = slide.banner;
+        const slides = this.slides();
+        if (tallestElementHeight > 1 && elementHeights.length === slides.length) {
+            slides.forEach((slide) => {
+                const banner = slide.banner();
                 if (!banner)
                     return;
                 const el = banner.el.nativeElement;
@@ -692,8 +739,8 @@ class EclCarouselComponent extends ECLBaseDirective {
      * Clears all explicit banner height and aspect ratio styling for smaller breakpoints.
      */
     resetHeight() {
-        this.slides.forEach((slide) => {
-            const banner = slide.banner;
+        this.slides().forEach((slide) => {
+            const banner = slide.banner();
             if (banner) {
                 const bannerImage = banner.eclBannerImage;
                 const bannerVideo = banner.eclBannerVideo;
@@ -714,12 +761,12 @@ class EclCarouselComponent extends ECLBaseDirective {
      */
     resetHiddenItems() {
         if (this.hasControls()) {
-            this.firstHiddenItem.el.nativeElement.innerHTML = this.getLastContentChild();
-            this.lastHiddenItem.el.nativeElement.innerHTML = this.getFirstContentChild();
+            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.0.5", ngImport: i0, type: EclCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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) }], 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-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.0.5", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclCarouselComponent, decorators: [{
             type: Component,
@@ -731,32 +778,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '[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: 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']
-            }] } });
+                    }, 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 }] }] } });
 
 const EUI_ECL_CAROUSEL = [
     EclCarouselComponent,