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

package/docs/components/EclCarouselComponent.html

@@ -143,16 +143,18 @@
         <p>Carousel (slideshow) component following the ECL design system.
 Renders a sequence of <code>EclCarouselItemComponent</code> slides with autoplay, keyboard navigation,
 responsive breakpoint awareness, and RTL layout support.</p>
+<p>The slide engine is powered by Embla (via <code>embla-carousel-angular</code>), matching the upstream
+ECL implementation: an infinite <code>loop</code>, the <code>Autoplay</code> 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).</p>
 <ul>
 <li>Selector: <code>ecl-carousel</code>.</li>
 <li>Project <code>ecl-carousel-item</code> elements as slides (also via <code>contentChildren</code>).</li>
-<li><code>ariaLabel</code> — ARIA label for the carousel landmark; aliased as <code>aria-label</code>; default <code>&#39;Carousel description here&#39;</code>.</li>
+<li><code>ariaLabel</code> — ARIA label for the carousel landmark; aliased as <code>aria-label</code>.</li>
 <li><code>isAutoplay</code> — enables automatic slide advancement; boolean attribute.</li>
 <li><code>playInterval</code> — milliseconds between automatic transitions; default <code>5000</code>.</li>
+<li><code>counterLabel</code> — separator label used by the counter, defaults to <code>ecl.common.OF</code>.</li>
 <li><code>slide</code> — emits <code>EclSlideEvent</code> when the active slide changes.</li>
-<li><code>isPlaying</code> / <code>isPausedForced</code> — public flags reflecting playback state.</li>
-<li><code>isRtl</code> — public flag reflecting RTL mode.</li>
-<li>Navigation controls and play/pause buttons are rendered internally.</li>
 </ul>
 
     </p>
@@ -209,23 +211,17 @@ responsive breakpoint awareness, and RTL layout support.</p>
                 <td class="col-md-3">imports</td>
                 <td class="col-md-9">
                         <div>    <code>TranslatePipe</code>
-</div>
-                        <div>        <code><a href="../components/EclIconComponent.html" target="_self" >EclIconComponent</a></code>
 </div>
                         <div>        <code><a href="../components/EclCarouselItemComponent.html" target="_self" >EclCarouselItemComponent</a></code>
+</div>
+                        <div>    <code>EmblaCarouselDirective</code>
+</div>
+                        <div>        <code><a href="../miscellaneous/variables.html#EUI_ECL_SLIDER" target="_self" >EUI_ECL_SLIDER</a></code>
 </div>
                 </td>
             </tr>
 
 
-            <tr>
-                <td class="col-md-3">styles</td>
-                <td class="col-md-9"><code>
-            .ecl-carousel__slides {
-                transition-duration: 0.4s;
-            }
-        </code></td>
-            </tr>
 
 
 
@@ -261,10 +257,13 @@ responsive breakpoint awareness, and RTL layout support.</p>
                                         <code>TranslatePipe</code>
                                 </li>
                                 <li>
-                                            <code><a href="../components/EclIconComponent.html" target="_self" >EclIconComponent</a></code>
+                                            <code><a href="../components/EclCarouselItemComponent.html" target="_self" >EclCarouselItemComponent</a></code>
                                 </li>
                                 <li>
-                                            <code><a href="../components/EclCarouselItemComponent.html" target="_self" >EclCarouselItemComponent</a></code>
+                                        <code>EmblaCarouselDirective</code>
+                                </li>
+                                <li>
+                                            <code><a href="../miscellaneous/variables.html#EUI_ECL_SLIDER" target="_self" >EUI_ECL_SLIDER</a></code>
                                 </li>
                                 <li>
                                             <code><a href="../directives/ECLBaseDirective.html" target="_self" >ECLBaseDirective</a></code>
@@ -302,57 +301,22 @@ responsive breakpoint awareness, and RTL layout support.</p>
                             <li>
                                 <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
                                     <span class="modifier">Readonly</span>
-                                <a href="#firstHiddenItem" >firstHiddenItem</a>
-                            </li>
-                            <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
-                                    <span class="modifier">Public</span>
                                 <a href="#isPausedForced" >isPausedForced</a>
                             </li>
                             <li>
                                 <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
-                                    <span class="modifier">Public</span>
+                                    <span class="modifier">Readonly</span>
                                 <a href="#isPlaying" >isPlaying</a>
                             </li>
                             <li>
                                 <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
-                                    <span class="modifier">Public</span>
                                 <a href="#isRtl" >isRtl</a>
                             </li>
-                            <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
-                                    <span class="modifier">Readonly</span>
-                                <a href="#lastHiddenItem" >lastHiddenItem</a>
-                            </li>
-                            <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
-                                    <span class="modifier">Readonly</span>
-                                <a href="#navigationButtons" >navigationButtons</a>
-                            </li>
-                            <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
-                                    <span class="modifier">Readonly</span>
-                                <a href="#pauseButton" >pauseButton</a>
-                            </li>
-                            <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
-                                    <span class="modifier">Readonly</span>
-                                <a href="#playButton" >playButton</a>
-                            </li>
                             <li>
                                 <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
                                     <span class="modifier">Readonly</span>
                                 <a href="#slides" >slides</a>
                             </li>
-                            <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
-                                    <span class="modifier">Readonly</span>
-                                <a href="#slidesContainer" >slidesContainer</a>
-                            </li>
-                            <li>
-                                <span class="reference-badge reference-badge--property" aria-hidden="true">P</span>
-                                <a href="#transitionDuration" >transitionDuration</a>
-                            </li>
                         </ul>
                     </td>
                 </tr>
@@ -369,81 +333,39 @@ responsive breakpoint awareness, and RTL layout support.</p>
                         <ul class="index-list">
                             <li>
                                 <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                <a href="#focusOnButton" >focusOnButton</a>
+                                <a href="#getCounterCurrent" >getCounterCurrent</a>
                             </li>
                             <li>
                                 <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                    <span class="modifier">Public</span>
-                                <a href="#getCarouselSlidesOffsetLeft" >getCarouselSlidesOffsetLeft</a>
+                                <a href="#getCounterTotal" >getCounterTotal</a>
                             </li>
                             <li>
                                 <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                    <span class="modifier">Public</span>
-                                <a href="#getCarouselSlidesOffsetRight" >getCarouselSlidesOffsetRight</a>
-                            </li>
-                            <li>
-                                <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                    <span class="modifier">Public</span>
                                 <a href="#getCurrentSlideIndex" >getCurrentSlideIndex</a>
                             </li>
                             <li>
                                 <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                    <span class="modifier">Public</span>
-                                <a href="#hasControls" >hasControls</a>
-                            </li>
-                            <li>
-                                <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                <a href="#isButtonVisible" >isButtonVisible</a>
-                            </li>
-                            <li>
-                                <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                    <span class="modifier">Public</span>
-                                <a href="#isPadded" >isPadded</a>
-                            </li>
-                            <li>
-                                <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                    <span class="modifier">Public</span>
-                                <a href="#isStopButtonPressed" >isStopButtonPressed</a>
-                            </li>
-                            <li>
-                                <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                <a href="#onFirstCarouselElementPress" >onFirstCarouselElementPress</a>
-                            </li>
-                            <li>
-                                <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                <a href="#onNavBtnKeyboardPress" >onNavBtnKeyboardPress</a>
-                            </li>
-                            <li>
-                                <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                <a href="#onNextSlideClick" >onNextSlideClick</a>
-                            </li>
-                            <li>
-                                <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                <a href="#onPauseClick" >onPauseClick</a>
-                            </li>
-                            <li>
-                                <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                <a href="#onPlayClick" >onPlayClick</a>
+                                <a href="#getDotAriaLabels" >getDotAriaLabels</a>
                             </li>
                             <li>
                                 <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                <a href="#onPlayKeyboardPress" >onPlayKeyboardPress</a>
+                                <a href="#getDotIndices" >getDotIndices</a>
                             </li>
                             <li>
                                 <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                <a href="#onPreviousSlideClick" >onPreviousSlideClick</a>
+                                <a href="#getTeaserOrder" >getTeaserOrder</a>
                             </li>
                             <li>
                                 <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                <a href="#onSlideControlClick" >onSlideControlClick</a>
+                                <a href="#hasControls" >hasControls</a>
                             </li>
                             <li>
                                 <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                <a href="#onSlideHover" >onSlideHover</a>
+                                <a href="#isPadded" >isPadded</a>
                             </li>
                             <li>
                                 <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
-                                <a href="#onSlideHoverout" >onSlideHoverout</a>
+                                <a href="#isTeaserVisible" >isTeaserVisible</a>
                             </li>
                             <li>
                                 <span class="reference-badge reference-badge--method" aria-hidden="true">M</span>
@@ -466,6 +388,9 @@ responsive breakpoint awareness, and RTL layout support.</p>
                             <li>
                                 <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#aria-label" >aria-label</a>
                             </li>
+                            <li>
+                                <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#counterLabel" >counterLabel</a>
+                            </li>
                             <li>
                                 <span class="reference-badge reference-badge--property" aria-hidden="true">I</span><a href="#isAutoplay" >isAutoplay</a>
                             </li>
@@ -549,6 +474,34 @@ responsive breakpoint awareness, and RTL layout support.</p>
                 <tr>
                     <td class="col-md-4">
                         <div class="io-description"><p>Aria-label for screen readers to describe the carousel.</p>
+</div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+        <table class="table table-sm table-bordered">
+            <tbody>
+                <tr>
+                    <td class="col-md-4">
+                        <a name="counterLabel"></a>
+                        <b>counterLabel</b>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>&#x27;&#x27;</code>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Separator label used by the counter, e.g. the &quot;of&quot; in &quot;1 of 5&quot;.
+Defaults to the translated <code>ecl.common.OF</code> key.</p>
 </div>
                     </td>
                 </tr>
@@ -715,16 +668,16 @@ responsive breakpoint awareness, and RTL layout support.</p>
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="focusOnButton"></a>
+                    <a name="getCounterCurrent"></a>
                     <span class="name">
-                        <span ><b>focusOnButton</b></span>
-                        <a href="#focusOnButton"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>getCounterCurrent</b></span>
+                        <a href="#getCounterCurrent"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
             <tr>
                 <td class="col-md-4">
-<code>focusOnButton(button: <a href="https://angular.dev/api/core/ElementRef" target="_blank">ElementRef</a>)</code>
+<code>getCounterCurrent()</code>
                 </td>
             </tr>
 
@@ -733,43 +686,13 @@ responsive breakpoint awareness, and RTL layout support.</p>
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Sets focus on the specified button.</p>
+                        <div class="io-description"><p>Returns the 1-based position of the active slide (for the counter).</p>
 </div>
 
-                            <div class="io-description">
-                                <b>Parameters :</b>
-                                
-                                <table class="params">
-                                    <thead>
-                                        <tr>
-                                            <td>Name</td>
-                                                <td>Type</td>
-                                            <td>Optional</td>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        <tr>
-                                                <td>button</td>
-                                            <td>
-                                                            <code><a href="https://angular.dev/api/core/ElementRef" target="_blank" >ElementRef</a></code>
-                                            </td>
-
-                                            <td>
-                                                    No
-                                            </td>
-
-
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
                         <div class="io-description">
-                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
+                            <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
 
                         </div>
-                            <div class="io-description">
-                                
-                            </div>
                 </td>
             </tr>
         </tbody>
@@ -778,18 +701,16 @@ responsive breakpoint awareness, and RTL layout support.</p>
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="getCarouselSlidesOffsetLeft"></a>
+                    <a name="getCounterTotal"></a>
                     <span class="name">
-                            <span class="modifier">Public</span>
-                        <span ><b>getCarouselSlidesOffsetLeft</b></span>
-                        <a href="#getCarouselSlidesOffsetLeft"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>getCounterTotal</b></span>
+                        <a href="#getCounterTotal"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
             <tr>
                 <td class="col-md-4">
-                        <span class="modifier-icon icon ion-ios-reset"></span>
-                    <code>getCarouselSlidesOffsetLeft()</code>
+<code>getCounterTotal()</code>
                 </td>
             </tr>
 
@@ -798,7 +719,7 @@ responsive breakpoint awareness, and RTL layout support.</p>
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Computes the left offset to shift the slides container.</p>
+                        <div class="io-description"><p>Returns the total number of slides (for the counter).</p>
 </div>
 
                         <div class="io-description">
@@ -813,18 +734,16 @@ responsive breakpoint awareness, and RTL layout support.</p>
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="getCarouselSlidesOffsetRight"></a>
+                    <a name="getCurrentSlideIndex"></a>
                     <span class="name">
-                            <span class="modifier">Public</span>
-                        <span ><b>getCarouselSlidesOffsetRight</b></span>
-                        <a href="#getCarouselSlidesOffsetRight"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>getCurrentSlideIndex</b></span>
+                        <a href="#getCurrentSlideIndex"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
             <tr>
                 <td class="col-md-4">
-                        <span class="modifier-icon icon ion-ios-reset"></span>
-                    <code>getCarouselSlidesOffsetRight()</code>
+<code>getCurrentSlideIndex()</code>
                 </td>
             </tr>
 
@@ -833,7 +752,7 @@ responsive breakpoint awareness, and RTL layout support.</p>
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Computes the right offset to shift the slides container (same logic as left in RTL).</p>
+                        <div class="io-description"><p>Retrieves the current active slide index (zero-based).</p>
 </div>
 
                         <div class="io-description">
@@ -848,18 +767,16 @@ responsive breakpoint awareness, and RTL layout support.</p>
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="getCurrentSlideIndex"></a>
+                    <a name="getDotAriaLabels"></a>
                     <span class="name">
-                            <span class="modifier">Public</span>
-                        <span ><b>getCurrentSlideIndex</b></span>
-                        <a href="#getCurrentSlideIndex"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>getDotAriaLabels</b></span>
+                        <a href="#getDotAriaLabels"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
             <tr>
                 <td class="col-md-4">
-                        <span class="modifier-icon icon ion-ios-reset"></span>
-                    <code>getCurrentSlideIndex()</code>
+<code>getDotAriaLabels()</code>
                 </td>
             </tr>
 
@@ -868,12 +785,12 @@ responsive breakpoint awareness, and RTL layout support.</p>
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Retrieves the current active slide index.
-Corrects index for internal structure with hidden buffer slides.</p>
+                        <div class="io-description"><p>Pre-translated accessible label for each pager dot. Translated here since
+the shared <code>ecl-slider-pager</code> receives plain strings.</p>
 </div>
 
                         <div class="io-description">
-                            <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
+                            <b>Returns : </b>    <code>string[]</code>
 
                         </div>
                 </td>
@@ -884,18 +801,16 @@ Corrects index for internal structure with hidden buffer slides.</p>
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="hasControls"></a>
+                    <a name="getDotIndices"></a>
                     <span class="name">
-                            <span class="modifier">Public</span>
-                        <span ><b>hasControls</b></span>
-                        <a href="#hasControls"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>getDotIndices</b></span>
+                        <a href="#getDotIndices"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
             <tr>
                 <td class="col-md-4">
-                        <span class="modifier-icon icon ion-ios-reset"></span>
-                    <code>hasControls()</code>
+<code>getDotIndices()</code>
                 </td>
             </tr>
 
@@ -904,11 +819,13 @@ Corrects index for internal structure with hidden buffer slides.</p>
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Checks whether there are enough slides to render controls.</p>
+                        <div class="io-description"><p>Dot indices for the mobile slider pager (one dot per slide). The dots are
+hidden on desktop via the ECL CSS (<code>.ecl-carousel__dots { display: none }</code>)
+and shown at the mobile breakpoint.</p>
 </div>
 
                         <div class="io-description">
-                            <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
+                            <b>Returns : </b>    <code>number[]</code>
 
                         </div>
                 </td>
@@ -919,16 +836,16 @@ Corrects index for internal structure with hidden buffer slides.</p>
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="isButtonVisible"></a>
+                    <a name="getTeaserOrder"></a>
                     <span class="name">
-                        <span ><b>isButtonVisible</b></span>
-                        <a href="#isButtonVisible"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>getTeaserOrder</b></span>
+                        <a href="#getTeaserOrder"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
             <tr>
                 <td class="col-md-4">
-<code>isButtonVisible(button: <a href="https://angular.dev/api/core/ElementRef" target="_blank">ElementRef</a>)</code>
+<code>getTeaserOrder(index: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank">number</a>)</code>
                 </td>
             </tr>
 
@@ -937,7 +854,7 @@ Corrects index for internal structure with hidden buffer slides.</p>
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Checks whether a given button is currently visible (not hidden via style).</p>
+                        <div class="io-description"><p>Returns the flex order of a teaser button within the visible window.</p>
 </div>
 
                             <div class="io-description">
@@ -953,9 +870,9 @@ Corrects index for internal structure with hidden buffer slides.</p>
                                     </thead>
                                     <tbody>
                                         <tr>
-                                                <td>button</td>
+                                                <td>index</td>
                                             <td>
-                                                            <code><a href="https://angular.dev/api/core/ElementRef" target="_blank" >ElementRef</a></code>
+                                                            <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
                                             </td>
 
                                             <td>
@@ -968,7 +885,7 @@ Corrects index for internal structure with hidden buffer slides.</p>
                                 </table>
                             </div>
                         <div class="io-description">
-                            <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
+                            <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
 
                         </div>
                             <div class="io-description">
@@ -982,18 +899,16 @@ Corrects index for internal structure with hidden buffer slides.</p>
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="isPadded"></a>
+                    <a name="hasControls"></a>
                     <span class="name">
-                            <span class="modifier">Public</span>
-                        <span ><b>isPadded</b></span>
-                        <a href="#isPadded"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>hasControls</b></span>
+                        <a href="#hasControls"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
             <tr>
                 <td class="col-md-4">
-                        <span class="modifier-icon icon ion-ios-reset"></span>
-                    <code>isPadded()</code>
+<code>hasControls()</code>
                 </td>
             </tr>
 
@@ -1002,7 +917,7 @@ Corrects index for internal structure with hidden buffer slides.</p>
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Returns whether the carousel has padding applied (e.g., on desktop breakpoint).</p>
+                        <div class="io-description"><p>Checks whether there are enough slides to render controls.</p>
 </div>
 
                         <div class="io-description">
@@ -1017,18 +932,16 @@ Corrects index for internal structure with hidden buffer slides.</p>
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="isStopButtonPressed"></a>
+                    <a name="isPadded"></a>
                     <span class="name">
-                            <span class="modifier">Public</span>
-                        <span ><b>isStopButtonPressed</b></span>
-                        <a href="#isStopButtonPressed"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>isPadded</b></span>
+                        <a href="#isPadded"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
             <tr>
                 <td class="col-md-4">
-                        <span class="modifier-icon icon ion-ios-reset"></span>
-                    <code>isStopButtonPressed()</code>
+<code>isPadded()</code>
                 </td>
             </tr>
 
@@ -1037,7 +950,7 @@ Corrects index for internal structure with hidden buffer slides.</p>
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Returns whether the stop button (pause) has been pressed by the user.</p>
+                        <div class="io-description"><p>Returns whether the carousel has padding applied (e.g., on desktop breakpoint).</p>
 </div>
 
                         <div class="io-description">
@@ -1052,16 +965,16 @@ Corrects index for internal structure with hidden buffer slides.</p>
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="onFirstCarouselElementPress"></a>
+                    <a name="isTeaserVisible"></a>
                     <span class="name">
-                        <span ><b>onFirstCarouselElementPress</b></span>
-                        <a href="#onFirstCarouselElementPress"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>isTeaserVisible</b></span>
+                        <a href="#isTeaserVisible"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
             <tr>
                 <td class="col-md-4">
-<code>onFirstCarouselElementPress(e: unknown)</code>
+<code>isTeaserVisible(index: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank">number</a>)</code>
                 </td>
             </tr>
 
@@ -1070,7 +983,7 @@ Corrects index for internal structure with hidden buffer slides.</p>
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Handles key press on the first carousel element to stop autoplay if TAB is pressed.</p>
+                        <div class="io-description"><p>Returns whether a teaser button should be visible in the current window.</p>
 </div>
 
                             <div class="io-description">
@@ -1086,9 +999,9 @@ Corrects index for internal structure with hidden buffer slides.</p>
                                     </thead>
                                     <tbody>
                                         <tr>
-                                                <td>e</td>
+                                                <td>index</td>
                                             <td>
-                                                        <code>unknown</code>
+                                                            <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
                                             </td>
 
                                             <td>
@@ -1101,7 +1014,7 @@ Corrects index for internal structure with hidden buffer slides.</p>
                                 </table>
                             </div>
                         <div class="io-description">
-                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
+                            <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
 
                         </div>
                             <div class="io-description">
@@ -1115,16 +1028,16 @@ Corrects index for internal structure with hidden buffer slides.</p>
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="onNavBtnKeyboardPress"></a>
+                    <a name="getCssClasses"></a>
                     <span class="name">
-                        <span ><b>onNavBtnKeyboardPress</b></span>
-                        <a href="#onNavBtnKeyboardPress"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>getCssClasses</b></span>
+                        <a href="#getCssClasses"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
             <tr>
                 <td class="col-md-4">
-<code>onNavBtnKeyboardPress(e: KeyboardEvent, index: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank">number</a>)</code>
+<code>getCssClasses(rootClass: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>)</code>
                 </td>
             </tr>
 
@@ -1133,7 +1046,8 @@ Corrects index for internal structure with hidden buffer slides.</p>
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Handles keyboard navigation for the navigation buttons.</p>
+                        <div class="io-description"><p>Merges the mandatory ECL root class with the consumer-supplied <code>class</code> model value.
+Call this inside a sub-class&#39;s <code>[class]</code> host binding computed signal.</p>
 </div>
 
                             <div class="io-description">
@@ -1145,13 +1059,14 @@ Corrects index for internal structure with hidden buffer slides.</p>
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
                                         <tr>
-                                                <td>e</td>
+                                                <td>rootClass</td>
                                             <td>
-                                                        <code>KeyboardEvent</code>
+                                                            <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
                                             </td>
 
                                             <td>
@@ -1159,560 +1074,127 @@ Corrects index for internal structure with hidden buffer slides.</p>
                                             </td>
 
 
-                                        </tr>
-                                        <tr>
-                                                <td>index</td>
                                             <td>
-                                                            <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
-                                            </td>
+                                                    <p>The primary ECL class string (e.g. <code>&#39;ecl-button&#39;</code>).</p>
 
-                                            <td>
-                                                    No
                                             </td>
-
-
                                         </tr>
                                     </tbody>
                                 </table>
                             </div>
                         <div class="io-description">
-                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
+                            <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
 
                         </div>
                             <div class="io-description">
-                                
+                                <p>A single space-separated class string ready for host binding.</p>
+
                             </div>
                 </td>
             </tr>
         </tbody>
     </table>
+</section>
+
+    <section data-compodoc="block-properties">
+    
+    <h3 id="inputs">
+        Properties
+    </h3>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="onNextSlideClick"></a>
+                    <a name="carouselContainerElement"></a>
                     <span class="name">
-                        <span ><b>onNextSlideClick</b></span>
-                        <a href="#onNextSlideClick"><span class="icon ion-ios-link"></span></a>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>carouselContainerElement</b></span>
+                        <a href="#carouselContainerElement"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
-            <tr>
-                <td class="col-md-4">
-<code>onNextSlideClick()</code>
-                </td>
-            </tr>
-
-
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>unknown</code>
 
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>viewChild&lt;ElementRef&gt;(&#x27;carouselContainer&#x27;)</code>
+                    </td>
+                </tr>
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Navigates to the next slide and stops autoplay.</p>
+                    <div class="io-description"><p>Reference to the main carousel viewport element (the Embla root).</p>
 </div>
-
-                        <div class="io-description">
-                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
-
-                        </div>
                 </td>
             </tr>
+
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="onPauseClick"></a>
+                    <a name="isPausedForced"></a>
                     <span class="name">
-                        <span ><b>onPauseClick</b></span>
-                        <a href="#onPauseClick"><span class="icon ion-ios-link"></span></a>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>isPausedForced</b></span>
+                        <a href="#isPausedForced"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
-            <tr>
-                <td class="col-md-4">
-<code>onPauseClick()</code>
-                </td>
-            </tr>
-
-
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>unknown</code>
 
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>signal(false)</code>
+                    </td>
+                </tr>
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Stops autoplay and focuses the play button.</p>
+                    <div class="io-description"><p>Indicates whether autoplay was manually paused (via the pause button or
+on mobile). When paused this way the loading bar is cleared.</p>
 </div>
-
-                        <div class="io-description">
-                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
-
-                        </div>
                 </td>
             </tr>
+
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="onPlayClick"></a>
+                    <a name="isPlaying"></a>
                     <span class="name">
-                        <span ><b>onPlayClick</b></span>
-                        <a href="#onPlayClick"><span class="icon ion-ios-link"></span></a>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>isPlaying</b></span>
+                        <a href="#isPlaying"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
-            <tr>
-                <td class="col-md-4">
-<code>onPlayClick()</code>
-                </td>
-            </tr>
-
-
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>unknown</code>
 
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>signal(false)</code>
+                    </td>
+                </tr>
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Starts autoplay and focuses the pause button.</p>
-</div>
-
-                        <div class="io-description">
-                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
-
-                        </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="onPlayKeyboardPress"></a>
-                    <span class="name">
-                        <span ><b>onPlayKeyboardPress</b></span>
-                        <a href="#onPlayKeyboardPress"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-            <tr>
-                <td class="col-md-4">
-<code>onPlayKeyboardPress(e: unknown)</code>
-                </td>
-            </tr>
-
-
-
-
-            <tr>
-                <td class="col-md-4">
-                        <div class="io-description"><p>Handles keyboard interaction on the play button.</p>
-</div>
-
-                            <div class="io-description">
-                                <b>Parameters :</b>
-                                
-                                <table class="params">
-                                    <thead>
-                                        <tr>
-                                            <td>Name</td>
-                                                <td>Type</td>
-                                            <td>Optional</td>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        <tr>
-                                                <td>e</td>
-                                            <td>
-                                                        <code>unknown</code>
-                                            </td>
-
-                                            <td>
-                                                    No
-                                            </td>
-
-
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                        <div class="io-description">
-                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
-
-                        </div>
-                            <div class="io-description">
-                                
-                            </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="onPreviousSlideClick"></a>
-                    <span class="name">
-                        <span ><b>onPreviousSlideClick</b></span>
-                        <a href="#onPreviousSlideClick"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-            <tr>
-                <td class="col-md-4">
-<code>onPreviousSlideClick()</code>
-                </td>
-            </tr>
-
-
-
-
-            <tr>
-                <td class="col-md-4">
-                        <div class="io-description"><p>Navigates to the previous slide and stops autoplay.</p>
-</div>
-
-                        <div class="io-description">
-                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
-
-                        </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="onSlideControlClick"></a>
-                    <span class="name">
-                        <span ><b>onSlideControlClick</b></span>
-                        <a href="#onSlideControlClick"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-            <tr>
-                <td class="col-md-4">
-<code>onSlideControlClick(slide: <a href="../components/EclCarouselItemComponent.html" target="_self">EclCarouselItemComponent</a>)</code>
-                </td>
-            </tr>
-
-
-
-
-            <tr>
-                <td class="col-md-4">
-                        <div class="io-description"><p>Handles user interaction with a slide control button.</p>
-</div>
-
-                            <div class="io-description">
-                                <b>Parameters :</b>
-                                
-                                <table class="params">
-                                    <thead>
-                                        <tr>
-                                            <td>Name</td>
-                                                <td>Type</td>
-                                            <td>Optional</td>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        <tr>
-                                                <td>slide</td>
-                                            <td>
-                                                            <code><a href="../components/EclCarouselItemComponent.html" target="_self" >EclCarouselItemComponent</a></code>
-                                            </td>
-
-                                            <td>
-                                                    No
-                                            </td>
-
-
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                        <div class="io-description">
-                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
-
-                        </div>
-                            <div class="io-description">
-                                
-                            </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="onSlideHover"></a>
-                    <span class="name">
-                        <span ><b>onSlideHover</b></span>
-                        <a href="#onSlideHover"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-            <tr>
-                <td class="col-md-4">
-<code>onSlideHover()</code>
-                </td>
-            </tr>
-
-
-
-
-            <tr>
-                <td class="col-md-4">
-                        <div class="io-description"><p>Pauses autoplay on mouse hover.</p>
-</div>
-
-                        <div class="io-description">
-                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
-
-                        </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="onSlideHoverout"></a>
-                    <span class="name">
-                        <span ><b>onSlideHoverout</b></span>
-                        <a href="#onSlideHoverout"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-            <tr>
-                <td class="col-md-4">
-<code>onSlideHoverout()</code>
-                </td>
-            </tr>
-
-
-
-
-            <tr>
-                <td class="col-md-4">
-                        <div class="io-description"><p>Resumes autoplay on mouse leave, if not manually paused.</p>
-</div>
-
-                        <div class="io-description">
-                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
-
-                        </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="getCssClasses"></a>
-                    <span class="name">
-                        <span ><b>getCssClasses</b></span>
-                        <a href="#getCssClasses"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-            <tr>
-                <td class="col-md-4">
-<code>getCssClasses(rootClass: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>)</code>
-                </td>
-            </tr>
-
-
-
-
-            <tr>
-                <td class="col-md-4">
-                        <div class="io-description"><p>Merges the mandatory ECL root class with the consumer-supplied <code>class</code> model value.
-Call this inside a sub-class&#39;s <code>[class]</code> host binding computed signal.</p>
-</div>
-
-                            <div class="io-description">
-                                <b>Parameters :</b>
-                                
-                                <table class="params">
-                                    <thead>
-                                        <tr>
-                                            <td>Name</td>
-                                                <td>Type</td>
-                                            <td>Optional</td>
-                                                <td>Description</td>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        <tr>
-                                                <td>rootClass</td>
-                                            <td>
-                                                            <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
-                                            </td>
-
-                                            <td>
-                                                    No
-                                            </td>
-
-
-                                            <td>
-                                                    <p>The primary ECL class string (e.g. <code>&#39;ecl-button&#39;</code>).</p>
-
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                        <div class="io-description">
-                            <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
-
-                        </div>
-                            <div class="io-description">
-                                <p>A single space-separated class string ready for host binding.</p>
-
-                            </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</section>
-
-    <section data-compodoc="block-properties">
-    
-    <h3 id="inputs">
-        Properties
-    </h3>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="carouselContainerElement"></a>
-                    <span class="name">
-                            <span class="modifier">Readonly</span>
-                        <span ><b>carouselContainerElement</b></span>
-                        <a href="#carouselContainerElement"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>unknown</code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>viewChild&lt;ElementRef&gt;(&#x27;carouselContainer&#x27;)</code>
-                    </td>
-                </tr>
-
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-description"><p>Reference to the main carousel container element.</p>
-</div>
-                </td>
-            </tr>
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="firstHiddenItem"></a>
-                    <span class="name">
-                            <span class="modifier">Readonly</span>
-                        <span ><b>firstHiddenItem</b></span>
-                        <a href="#firstHiddenItem"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>unknown</code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>viewChild&lt;EclCarouselItemComponent&gt;(&#x27;firstHiddenItem&#x27;)</code>
-                    </td>
-                </tr>
-
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-description"><p>Reference to the first hidden slide item (used for focus management).</p>
-</div>
-                </td>
-            </tr>
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="isPausedForced"></a>
-                    <span class="name">
-                            <span class="modifier">Public</span>
-                        <span ><b>isPausedForced</b></span>
-                        <a href="#isPausedForced"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>unknown</code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>false</code>
-                    </td>
-                </tr>
-
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-description"><p>Indicates whether autoplay was manually paused.</p>
-</div>
-                </td>
-            </tr>
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="isPlaying"></a>
-                    <span class="name">
-                            <span class="modifier">Public</span>
-                        <span ><b>isPlaying</b></span>
-                        <a href="#isPlaying"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>unknown</code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>false</code>
-                    </td>
-                </tr>
-
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-description"><p>Indicates whether autoplay is currently active.</p>
+                    <div class="io-description"><p>Indicates whether autoplay is currently active.</p>
 </div>
                 </td>
             </tr>
@@ -1725,7 +1207,6 @@ Call this inside a sub-class&#39;s <code>[class]</code> host binding computed si
                 <td class="col-md-4">
                     <a name="isRtl"></a>
                     <span class="name">
-                            <span class="modifier">Public</span>
                         <span ><b>isRtl</b></span>
                         <a href="#isRtl"><span class="icon ion-ios-link"></span></a>
                     </span>
@@ -1752,138 +1233,6 @@ Call this inside a sub-class&#39;s <code>[class]</code> host binding computed si
 
         </tbody>
     </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="lastHiddenItem"></a>
-                    <span class="name">
-                            <span class="modifier">Readonly</span>
-                        <span ><b>lastHiddenItem</b></span>
-                        <a href="#lastHiddenItem"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>unknown</code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>viewChild&lt;EclCarouselItemComponent&gt;(&#x27;lastHiddenItem&#x27;)</code>
-                    </td>
-                </tr>
-
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-description"><p>Reference to the last hidden slide item (used for focus management).</p>
-</div>
-                </td>
-            </tr>
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="navigationButtons"></a>
-                    <span class="name">
-                            <span class="modifier">Readonly</span>
-                        <span ><b>navigationButtons</b></span>
-                        <a href="#navigationButtons"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>unknown</code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>viewChildren&lt;ElementRef&gt;(&#x27;currButton&#x27;)</code>
-                    </td>
-                </tr>
-
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-description"><p>References to the navigation buttons corresponding to each slide.</p>
-</div>
-                </td>
-            </tr>
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="pauseButton"></a>
-                    <span class="name">
-                            <span class="modifier">Readonly</span>
-                        <span ><b>pauseButton</b></span>
-                        <a href="#pauseButton"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>unknown</code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>viewChild&lt;ElementRef&gt;(&#x27;pauseButton&#x27;)</code>
-                    </td>
-                </tr>
-
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-description"><p>Reference to the pause button element.</p>
-</div>
-                </td>
-            </tr>
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="playButton"></a>
-                    <span class="name">
-                            <span class="modifier">Readonly</span>
-                        <span ><b>playButton</b></span>
-                        <a href="#playButton"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>unknown</code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>viewChild&lt;ElementRef&gt;(&#x27;playButton&#x27;)</code>
-                    </td>
-                </tr>
-
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-description"><p>Reference to the play button element.</p>
-</div>
-                </td>
-            </tr>
-
-        </tbody>
-    </table>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
@@ -1917,71 +1266,6 @@ Call this inside a sub-class&#39;s <code>[class]</code> host binding computed si
 
         </tbody>
     </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="slidesContainer"></a>
-                    <span class="name">
-                            <span class="modifier">Readonly</span>
-                        <span ><b>slidesContainer</b></span>
-                        <a href="#slidesContainer"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>    <code>unknown</code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>viewChild&lt;ElementRef&gt;(&#x27;slidesContainer&#x27;)</code>
-                    </td>
-                </tr>
-
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-description"><p>Reference to the slides container element.</p>
-</div>
-                </td>
-            </tr>
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="transitionDuration"></a>
-                    <span class="name">
-                        <span ><b>transitionDuration</b></span>
-                        <a href="#transitionDuration"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Default value : </i><code>0.4</code>
-                    </td>
-                </tr>
-
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-description"><p>Duration of the slide transition animation (in seconds).</p>
-</div>
-                </td>
-            </tr>
-
-        </tbody>
-    </table>
 </section>
 
 </div>
@@ -1998,8 +1282,8 @@ Call this inside a sub-class&#39;s <code>[class]</code> host binding computed si
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div>@if(hasControls()){<div class="ecl-carousel__controls">    <div class="ecl-container">        <div class="ecl-carousel__autoplay">            <button #playButton class="ecl-button ecl-button--tertiary ecl-button--neutral ecl-carousel__play ecl-button--icon-only"                type="button" [style.display]="isPlaying ? \'none\' : \'flex\'" (keydown)="onPlayKeyboardPress($event)"                (click)="onPlayClick()">                <span class="ecl-button__container">                    <span class="ecl-button__label">                        {{ \'ecl.carousel.PLAY\' | translate }}                    </span>                    <ecl-icon icon="play-outline" size="m" class="ecl-button__icon ecl-carousel__icon-default">                    </ecl-icon>                </span>            </button>            <button #pauseButton class="ecl-button ecl-button--tertiary ecl-button--neutral ecl-carousel__pause ecl-button--icon-only"                type="button" [style.display]="isPlaying ? \'flex\' : \'none\'" (keydown)="onPlayKeyboardPress($event)"                (click)="onPauseClick()">                <span class="ecl-button__container">                    <span class="ecl-button__label">                        {{ \'ecl.carousel.PAUSE\' | translate }}                    </span>                    <ecl-icon icon="pause-outline" size="m" class="ecl-button__icon ecl-carousel__icon-default"> </ecl-icon>                </span>            </button>        </div>        <div class="ecl-carousel__navigation" role="tablist" >            @for (slide of slides(); let i = $index; track slide) {            <button #currButton [attr.aria-current]="i === getCurrentSlideIndex()" [attr.tabindex]="i === getCurrentSlideIndex() ? null: -1"                class="ecl-button ecl-button--tertiary ecl-button--neutral ecl-carousel__navigation-item" role="tab" (click)="onSlideControlClick(slide)"                (keydown)="onNavBtnKeyboardPress($event, i)">                {{ i + 1 }}            </button>            }        </div>    </div></div>}<div #carouselContainer class="ecl-carousel__container" [class.ecl-carousel-container--padded]="isPadded()">    <div #slidesContainer (keyup)="onFirstCarouselElementPress($event)" class="ecl-carousel__slides"        [style.left.px]="!isRtl ? getCarouselSlidesOffsetLeft() : null"        [style.right.px]="isRtl ? getCarouselSlidesOffsetRight() : null"        [style.transition-duration.s]="transitionDuration" (mouseover)="onSlideHover()" (mouseout)="onSlideHoverout()">        @if(hasControls()){        <ecl-carousel-item #firstHiddenItem></ecl-carousel-item>        }        <ng-content></ng-content>        @if(hasControls()){        <ecl-carousel-item #lastHiddenItem></ecl-carousel-item>        }    </div></div></div>'
-    var COMPONENTS = [{'name': 'EclAccordionSummaryComponent', 'selector': 'summary[eclAccordionToggle]'},{'name': 'EclAddToCalendarComponent', 'selector': 'div[eclAddToCalendar]'},{'name': 'EclAnimatedNumbersComponent', 'selector': 'div[eclAnimatedNumbers]'},{'name': 'EclAnimatedNumbersItemComponent', 'selector': 'li[eclAnimatedNumbersItem]'},{'name': 'EclAppComponent', 'selector': 'ecl-app'},{'name': 'EclBannerComponent', 'selector': 'ecl-banner'},{'name': 'EclBlockquoteComponent', 'selector': '[eclBlockquote]'},{'name': 'EclBreadcrumbComponent', 'selector': 'nav[eclBreadcrumb]'},{'name': 'EclBreadcrumbSegmentComponent', 'selector': 'li[eclBreadcrumbSegment]'},{'name': 'EclButtonComponent', 'selector': 'button[eclButton], button[ecl-button], a[eclButton]'},{'name': 'EclCardBodyComponent', 'selector': 'ecl-card-body'},{'name': 'EclCardComponent', 'selector': 'ecl-card, article[eclCard]'},{'name': 'EclCarouselComponent', 'selector': 'ecl-carousel'},{'name': 'EclCarouselItemComponent', 'selector': 'ecl-carousel-item'},{'name': 'EclCategoryFilterComponent', 'selector': 'ecl-category-filter'},{'name': 'EclCategoryFilterItemComponent', 'selector': 'ecl-category-filter-item'},{'name': 'EclCategoryFilterListComponent', 'selector': 'ecl-category-filter-list'},{'name': 'EclCheckboxHelpComponent', 'selector': '[eclCheckboxHelp]'},{'name': 'EclCheckboxLabelComponent', 'selector': 'label[eclCheckboxLabel]'},{'name': 'EclContentBlockComponent', 'selector': 'ecl-content-block'},{'name': 'EclContentItemComponent', 'selector': 'ecl-content-item'},{'name': 'EclDateBlockComponent', 'selector': 'time[eclDateBlock]'},{'name': 'EclDescriptionListDefinitionComponent', 'selector': '[eclDescriptionListDefinition]'},{'name': 'EclExpandableComponent', 'selector': 'ecl-expandable'},{'name': 'EclFactFiguresComponent', 'selector': 'div[eclFactFigures], ecl-fact-figures'},{'name': 'EclFactFiguresItemComponent', 'selector': 'div[eclFactFiguresItem],ecl-fact-figures-item'},{'name': 'EclFactFiguresViewAllComponent', 'selector': 'ecl-fact-figures-view-all'},{'name': 'EclFeaturedComponent', 'selector': 'ecl-featured, article[eclFeatured]'},{'name': 'EclFeaturedItemComponent', 'selector': 'ecl-featured-item, div[eclFeaturedItem]'},{'name': 'EclFeaturedItemDescriptionComponent', 'selector': 'ecl-featured-item-description'},{'name': 'EclFileComponent', 'selector': 'ecl-file'},{'name': 'EclFileItemComponent', 'selector': 'ecl-file-item'},{'name': 'EclFileItemsComponent', 'selector': 'ecl-file-items'},{'name': 'EclFileListsComponent', 'selector': 'ecl-file-lists, ecl-file-taxonomy'},{'name': 'EclFormGroupComponent', 'selector': '[eclFormGroup], ecl-form-group'},{'name': 'EclFormLabelComponent', 'selector': '[eclFormLabel]'},{'name': 'EclGalleryComponent', 'selector': 'ecl-gallery'},{'name': 'EclGalleryFooterComponent', 'selector': 'ecl-gallery-footer'},{'name': 'EclGalleryItemComponent', 'selector': 'ecl-gallery-item'},{'name': 'EclHighlightBoxComponent', 'selector': 'article[eclHighlightBox]'},{'name': 'EclHighlightedSearchComponent', 'selector': 'ecl-highlighted-search'},{'name': 'EclIconComponent', 'selector': 'ecl-icon'},{'name': 'EclIndicatorComponent', 'selector': '[eclIndicator]'},{'name': 'EclInpageNavigationComponent', 'selector': 'ecl-inpage-navigation'},{'name': 'EclInpageNavigationItemComponent', 'selector': 'li[eclInpageNavigationItem]'},{'name': 'EclLayoutWrapperComponent', 'selector': 'div[eclLayoutWrapper]'},{'name': 'EclListIllustrationComponent', 'selector': 'ecl-list-illustration, ul[eclListIllustration], ol[eclListIllustration]'},{'name': 'EclListIllustrationItemComponent', 'selector': 'ecl-list-illustration-item, li[eclListIllustrationItem]'},{'name': 'EclLoadingIndicatorComponent', 'selector': 'ecl-loading-indicator'},{'name': 'EclMediaContainerComponent', 'selector': 'ecl-media-container'},{'name': 'EclMegaMenuComponent', 'selector': 'nav[eclMegaMenu]'},{'name': 'EclMegaMenuFeaturedComponent', 'selector': 'div[eclMegaMenuFeatured]'},{'name': 'EclMegaMenuInfoComponent', 'selector': 'div[eclMegaMenuInfo]'},{'name': 'EclMegaMenuItemComponent', 'selector': 'li[eclMegaMenuItem]'},{'name': 'EclMegaMenuSubitemComponent', 'selector': 'li[eclMegaMenuSubitem]'},{'name': 'EclMenuComponent', 'selector': 'ecl-menu'},{'name': 'EclMenuItemComponent', 'selector': 'ecl-menu-item'},{'name': 'EclMenuMegaComponent', 'selector': 'ecl-menu-mega'},{'name': 'EclMenuMegaItemComponent', 'selector': 'ecl-menu-mega-item'},{'name': 'EclModalBodyComponent', 'selector': '[eclModalBody]'},{'name': 'EclModalComponent', 'selector': 'dialog[eclModal]'},{'name': 'EclModalFooterComponent', 'selector': '[eclModalFooter]'},{'name': 'EclModalHeaderComponent', 'selector': '[eclModalHeader]'},{'name': 'EclMultiselectComponent', 'selector': 'select[eclMultiselect]'},{'name': 'EclMultiselectDropdownComponent', 'selector': 'div[eclMultiselectDropdown]'},{'name': 'EclMultiselectInputComponent', 'selector': 'div[eclMultiselectInput]'},{'name': 'EclMultiselectOptgroupComponent', 'selector': 'fieldset[eclMultiselectOptgroup]'},{'name': 'EclMultiselectOptionComponent', 'selector': 'div[eclMultiselectOption]'},{'name': 'EclNavigationListComponent', 'selector': 'ecl-navigation-list'},{'name': 'EclNavigationListItemComponent', 'selector': 'ecl-navigation-list-item'},{'name': 'EclNewsTickerComponent', 'selector': 'ecl-news-ticker'},{'name': 'EclNewsTickerItemComponent', 'selector': 'ecl-news-ticker-item'},{'name': 'EclNotificationComponent', 'selector': 'ecl-notification'},{'name': 'EclPageHeaderComponent', 'selector': 'div[eclPageHeader]'},{'name': 'EclPageHeaderDescriptionContainerComponent', 'selector': 'div[eclPageHeaderDescriptionContainer]'},{'name': 'EclPageHeaderExpandableComponent', 'selector': 'div[eclPageHeaderExpandable]'},{'name': 'EclPageHeaderSectionComponent', 'selector': 'div[eclPageHeaderSection]'},{'name': 'EclPageHeaderSectionInfoComponent', 'selector': 'div[eclPageHeaderSectionInfo]'},{'name': 'EclPageSummaryComponent', 'selector': 'section[eclPageSummary]'},{'name': 'EclPaginationComponent', 'selector': 'ecl-pagination'},{'name': 'EclPaginationItemComponent', 'selector': 'li[eclPaginationItem]'},{'name': 'EclPopoverComponent', 'selector': 'ecl-popover'},{'name': 'EclQuizCardComponent', 'selector': 'li[eclQuizCard]'},{'name': 'EclQuizComponent', 'selector': 'section[eclQuiz]'},{'name': 'EclRadioLabelComponent', 'selector': '[eclRadioLabel]'},{'name': 'EclRangeBubbleComponent', 'selector': 'ecl-range-bubble'},{'name': 'EclRangeValueComponent', 'selector': 'ecl-range-value'},{'name': 'EclRatingFieldComponent', 'selector': 'ecl-rating-field'},{'name': 'EclSearchFormComponent', 'selector': 'ecl-search-form'},{'name': 'EclSelectContainerComponent', 'selector': 'ecl-select-container'},{'name': 'EclSiteFooterComponent', 'selector': 'footer[eclSiteFooter]'},{'name': 'EclSiteFooterCoownerComponent', 'selector': 'div[eclSiteFooterCoowner]'},{'name': 'EclSiteFooterCoreComponent', 'selector': 'div[eclSiteFooterCore]'},{'name': 'EclSiteFooterFeedbackComponent', 'selector': 'div[eclSiteFooterFeedback]'},{'name': 'EclSiteFooterFixedContentEUComponent', 'selector': 'ecl-site-footer-fixed-content-eu'},{'name': 'EclSiteFooterRowCommonComponent', 'selector': 'div[eclSiteFooterRowCommon]'},{'name': 'EclSiteHeaderActionComponent', 'selector': 'ecl-site-header-action'},{'name': 'EclSiteHeaderBannerTopComponent', 'selector': 'ecl-site-header-banner-top'},{'name': 'EclSiteHeaderComponent', 'selector': 'ecl-site-header'},{'name': 'EclSiteHeaderCustomActionComponent', 'selector': 'div[eclSiteHeaderCustomAction]'},{'name': 'EclSiteHeaderEnvironmentComponent', 'selector': '[eclSiteHeaderEnvironment]'},{'name': 'EclSiteHeaderLanguageComponent', 'selector': 'ecl-site-header-language'},{'name': 'EclSiteHeaderLanguagePopoverComponent', 'selector': 'ecl-site-header-language-popover'},{'name': 'EclSiteHeaderLoginComponent', 'selector': 'ecl-site-header-login'},{'name': 'EclSiteHeaderNotificationComponent', 'selector': 'ecl-site-header-notification'},{'name': 'EclSiteHeaderSearchComponent', 'selector': 'ecl-site-header-search'},{'name': 'EclSloganTickerComponent', 'selector': 'ecl-slogan-ticker'},{'name': 'EclSocialMediaFollowComponent', 'selector': 'ecl-social-media-follow'},{'name': 'EclSocialMediaFollowItemComponent', 'selector': 'ecl-social-media-follow-item'},{'name': 'EclSplashPageComponent', 'selector': 'div[eclSplashPage]'},{'name': 'EclSplashPageLanguageCategoryComponent', 'selector': 'div[eclSplashPageLanguageCategory]'},{'name': 'EclSplashPageLanguageContainerComponent', 'selector': '[eclSplashPageLanguageContainer]'},{'name': 'EclSplashPageLanguageLinkComponent', 'selector': 'a[eclSplashPageLanguageLink]'},{'name': 'EclSpotlightComponent', 'selector': 'section[eclSpotlight]'},{'name': 'EclSpotlightLinkComponent', 'selector': 'a[eclSpotlightLink]'},{'name': 'EclStickyContainerComponent', 'selector': 'ecl-sticky-container'},{'name': 'EclStoryCardComponent', 'selector': 'section[eclStoryCard]'},{'name': 'EclStoryCardGridDetailsComponent', 'selector': '[eclStoryCardGridDetails]'},{'name': 'EclStoryCardItemComponent', 'selector': 'li[eclStoryCardItem]'},{'name': 'EclTabComponent', 'selector': 'div[eclTab]'},{'name': 'EclTabLabelComponent', 'selector': 'ecl-tab-label'},{'name': 'EclTableSortButtonComponent', 'selector': 'button[eclTableSortButton]'},{'name': 'EclTabsComponent', 'selector': 'div[eclTabs]'},{'name': 'EclTagComponent', 'selector': 'ecl-tag, [eclTag]'},{'name': 'EclTextMediaComponent', 'selector': 'article[eclTextMedia]'},{'name': 'EclTimelineComponent', 'selector': 'ol[eclTimeline]'},{'name': 'EclTimelineItemComponent', 'selector': 'li[eclTimelineItem]'},{'name': 'EclTimelineItemTogglerComponent', 'selector': 'li[eclTimelineItemToggler]'}];
+        var COMPONENT_TEMPLATE = '<div>@if (hasControls()) {<div class="ecl-carousel__controls">    <div class="ecl-container">        <div class="ecl-carousel__navigation">            <div class="ecl-carousel__pager-container">                <ecl-slider-pager                    class="ecl-carousel__pager"                    [variant]="pagerVariant()"                    size="m"                    [isPlaying]="isPagerPlaying()"                    [activeIndex]="getCurrentSlideIndex()"                    [dotIndices]="getDotIndices()"                    [dotAriaLabels]="getDotAriaLabels()"                    prevExtraClasses="ecl-carousel__prev"                    nextExtraClasses="ecl-carousel__next"                    dotsExtraClasses="ecl-carousel__dots"                    dotExtraClasses="ecl-carousel__dot"                    playExtraClasses="ecl-carousel__play"                    pauseExtraClasses="ecl-carousel__pause"                    (play)="onPlayClick()"                    (pause)="onPauseClick()"                    (prev)="onPreviousSlideClick()"                    (next)="onNextSlideClick()"                    (goTo)="onDotClick($event)">                </ecl-slider-pager>                <div class="ecl-carousel__counter" dir="ltr">                    {{ getCounterCurrent() }} {{ counterLabel() || (\'ecl.common.OF\' | translate) }} {{ getCounterTotal() }}                </div>            </div>            <div class="ecl-carousel__teasers" role="tablist">                @for (slide of slides(); let i = $index; track slide) {                <button #teaserButton type="button" class="ecl-carousel__teaser-button" role="tab"                    [attr.data-ecl-carousel-slide-index]="i"                    [attr.aria-current]="i === getCurrentSlideIndex() ? true : null"                    [attr.tabindex]="i === getCurrentSlideIndex() ? null : -1"                    [style.display]="isTeaserVisible(i) ? null : \'none\'"                    [style.pointer-events]="isTeaserVisible(i) ? null : \'none\'"                    [style.order]="getTeaserOrder(i)" (click)="onTeaserClick(i)"                    (keydown)="onTeaserKeyboardPress($event, i)">                    <span class="ecl-carousel__teaser-loading-bar" aria-hidden="true"                        [class.is-active]="(isPlaying() || isHoverPaused() || isPausedForced()) && i === getCurrentSlideIndex()"                        [class.is-paused]="(isHoverPaused() || isPausedForced()) && i === getCurrentSlideIndex()">                        <span #loadingBar class="ecl-carousel__teaser-loading-bar-completion"></span>                    </span>                    <span class="ecl-carousel__teaser-content">                        @if (slide.teaserText()) {                        <span class="ecl-carousel__teaser-title">{{ slide.teaserText() }}</span>                        }                    </span>                </button>                }            </div>        </div>    </div></div>}<div #carouselContainer class="ecl-carousel__viewport" [class.ecl-carousel-container--padded]="isPadded()"    emblaCarousel #embla="emblaCarousel" [options]="emblaOptions" [plugins]="emblaPlugins"    [subscribeToEvents]="emblaEvents" (emblaChange)="onEmblaEvent($event)"    (mouseenter)="onViewportPause()" (mouseleave)="onViewportResume()"    (focusin)="onViewportPause()" (focusout)="onViewportResume()">    <div class="ecl-carousel__slides">        <ng-content></ng-content>    </div></div></div>'
+    var COMPONENTS = [{'name': 'EclAccordionSummaryComponent', 'selector': 'summary[eclAccordionToggle]'},{'name': 'EclAddToCalendarComponent', 'selector': 'div[eclAddToCalendar]'},{'name': 'EclAnimatedNumbersComponent', 'selector': 'div[eclAnimatedNumbers]'},{'name': 'EclAnimatedNumbersItemComponent', 'selector': 'li[eclAnimatedNumbersItem]'},{'name': 'EclAppComponent', 'selector': 'ecl-app'},{'name': 'EclBannerComponent', 'selector': 'ecl-banner'},{'name': 'EclBlockquoteComponent', 'selector': '[eclBlockquote]'},{'name': 'EclBreadcrumbComponent', 'selector': 'nav[eclBreadcrumb]'},{'name': 'EclBreadcrumbSegmentComponent', 'selector': 'li[eclBreadcrumbSegment]'},{'name': 'EclButtonComponent', 'selector': 'button[eclButton], button[ecl-button], a[eclButton]'},{'name': 'EclCardBodyComponent', 'selector': 'ecl-card-body'},{'name': 'EclCardComponent', 'selector': 'ecl-card, article[eclCard]'},{'name': 'EclCarouselComponent', 'selector': 'ecl-carousel'},{'name': 'EclCarouselItemComponent', 'selector': 'ecl-carousel-item'},{'name': 'EclCategoryFilterComponent', 'selector': 'ecl-category-filter'},{'name': 'EclCategoryFilterItemComponent', 'selector': 'ecl-category-filter-item'},{'name': 'EclCategoryFilterListComponent', 'selector': 'ecl-category-filter-list'},{'name': 'EclCheckboxHelpComponent', 'selector': '[eclCheckboxHelp]'},{'name': 'EclCheckboxLabelComponent', 'selector': 'label[eclCheckboxLabel]'},{'name': 'EclContentBlockComponent', 'selector': 'ecl-content-block'},{'name': 'EclContentItemComponent', 'selector': 'ecl-content-item'},{'name': 'EclDateBlockComponent', 'selector': 'time[eclDateBlock]'},{'name': 'EclDescriptionListDefinitionComponent', 'selector': '[eclDescriptionListDefinition]'},{'name': 'EclExpandableComponent', 'selector': 'ecl-expandable'},{'name': 'EclFactFiguresComponent', 'selector': 'div[eclFactFigures], ecl-fact-figures'},{'name': 'EclFactFiguresItemComponent', 'selector': 'div[eclFactFiguresItem],ecl-fact-figures-item'},{'name': 'EclFactFiguresViewAllComponent', 'selector': 'ecl-fact-figures-view-all'},{'name': 'EclFeaturedComponent', 'selector': 'ecl-featured, article[eclFeatured]'},{'name': 'EclFeaturedItemComponent', 'selector': 'ecl-featured-item, div[eclFeaturedItem]'},{'name': 'EclFeaturedItemDescriptionComponent', 'selector': 'ecl-featured-item-description'},{'name': 'EclFileComponent', 'selector': 'ecl-file'},{'name': 'EclFileItemComponent', 'selector': 'ecl-file-item'},{'name': 'EclFileItemsComponent', 'selector': 'ecl-file-items'},{'name': 'EclFileListsComponent', 'selector': 'ecl-file-lists, ecl-file-taxonomy'},{'name': 'EclFormGroupComponent', 'selector': '[eclFormGroup], ecl-form-group'},{'name': 'EclFormLabelComponent', 'selector': '[eclFormLabel]'},{'name': 'EclGalleryComponent', 'selector': 'ecl-gallery'},{'name': 'EclGalleryFooterComponent', 'selector': 'ecl-gallery-footer'},{'name': 'EclGalleryItemComponent', 'selector': 'ecl-gallery-item'},{'name': 'EclHighlightBoxComponent', 'selector': 'article[eclHighlightBox]'},{'name': 'EclHighlightedSearchComponent', 'selector': 'ecl-highlighted-search'},{'name': 'EclIconComponent', 'selector': 'ecl-icon'},{'name': 'EclIndicatorComponent', 'selector': '[eclIndicator]'},{'name': 'EclInpageNavigationComponent', 'selector': 'ecl-inpage-navigation'},{'name': 'EclInpageNavigationItemComponent', 'selector': 'li[eclInpageNavigationItem]'},{'name': 'EclLayoutWrapperComponent', 'selector': 'div[eclLayoutWrapper]'},{'name': 'EclListIllustrationComponent', 'selector': 'ecl-list-illustration, ul[eclListIllustration], ol[eclListIllustration]'},{'name': 'EclListIllustrationItemComponent', 'selector': 'ecl-list-illustration-item, li[eclListIllustrationItem]'},{'name': 'EclLoadingIndicatorComponent', 'selector': 'ecl-loading-indicator'},{'name': 'EclMediaContainerComponent', 'selector': 'ecl-media-container'},{'name': 'EclMegaMenuComponent', 'selector': 'nav[eclMegaMenu]'},{'name': 'EclMegaMenuFeaturedComponent', 'selector': 'div[eclMegaMenuFeatured]'},{'name': 'EclMegaMenuInfoComponent', 'selector': 'div[eclMegaMenuInfo]'},{'name': 'EclMegaMenuItemComponent', 'selector': 'li[eclMegaMenuItem]'},{'name': 'EclMegaMenuSubitemComponent', 'selector': 'li[eclMegaMenuSubitem]'},{'name': 'EclMenuComponent', 'selector': 'ecl-menu'},{'name': 'EclMenuItemComponent', 'selector': 'ecl-menu-item'},{'name': 'EclMenuMegaComponent', 'selector': 'ecl-menu-mega'},{'name': 'EclMenuMegaItemComponent', 'selector': 'ecl-menu-mega-item'},{'name': 'EclModalBodyComponent', 'selector': '[eclModalBody]'},{'name': 'EclModalComponent', 'selector': 'dialog[eclModal]'},{'name': 'EclModalFooterComponent', 'selector': '[eclModalFooter]'},{'name': 'EclModalHeaderComponent', 'selector': '[eclModalHeader]'},{'name': 'EclMultiselectComponent', 'selector': 'select[eclMultiselect]'},{'name': 'EclMultiselectDropdownComponent', 'selector': 'div[eclMultiselectDropdown]'},{'name': 'EclMultiselectInputComponent', 'selector': 'div[eclMultiselectInput]'},{'name': 'EclMultiselectOptgroupComponent', 'selector': 'fieldset[eclMultiselectOptgroup]'},{'name': 'EclMultiselectOptionComponent', 'selector': 'div[eclMultiselectOption]'},{'name': 'EclNavigationListComponent', 'selector': 'ecl-navigation-list'},{'name': 'EclNavigationListItemComponent', 'selector': 'ecl-navigation-list-item'},{'name': 'EclNewsTickerComponent', 'selector': 'ecl-news-ticker'},{'name': 'EclNewsTickerItemComponent', 'selector': 'ecl-news-ticker-item'},{'name': 'EclNotificationComponent', 'selector': 'ecl-notification'},{'name': 'EclPageHeaderComponent', 'selector': 'div[eclPageHeader]'},{'name': 'EclPageHeaderDescriptionContainerComponent', 'selector': 'div[eclPageHeaderDescriptionContainer]'},{'name': 'EclPageHeaderExpandableComponent', 'selector': 'div[eclPageHeaderExpandable]'},{'name': 'EclPageHeaderSectionComponent', 'selector': 'div[eclPageHeaderSection]'},{'name': 'EclPageHeaderSectionInfoComponent', 'selector': 'div[eclPageHeaderSectionInfo]'},{'name': 'EclPageSummaryComponent', 'selector': 'section[eclPageSummary]'},{'name': 'EclPaginationComponent', 'selector': 'ecl-pagination'},{'name': 'EclPaginationItemComponent', 'selector': 'li[eclPaginationItem]'},{'name': 'EclPopoverComponent', 'selector': 'ecl-popover'},{'name': 'EclQuizCardComponent', 'selector': 'li[eclQuizCard]'},{'name': 'EclQuizComponent', 'selector': 'section[eclQuiz]'},{'name': 'EclRadioLabelComponent', 'selector': '[eclRadioLabel]'},{'name': 'EclRangeBubbleComponent', 'selector': 'ecl-range-bubble'},{'name': 'EclRangeValueComponent', 'selector': 'ecl-range-value'},{'name': 'EclRatingFieldComponent', 'selector': 'ecl-rating-field'},{'name': 'EclSearchFormComponent', 'selector': 'ecl-search-form'},{'name': 'EclSelectContainerComponent', 'selector': 'ecl-select-container'},{'name': 'EclSiteFooterComponent', 'selector': 'footer[eclSiteFooter]'},{'name': 'EclSiteFooterCoownerComponent', 'selector': 'div[eclSiteFooterCoowner]'},{'name': 'EclSiteFooterCoreComponent', 'selector': 'div[eclSiteFooterCore]'},{'name': 'EclSiteFooterFeedbackComponent', 'selector': 'div[eclSiteFooterFeedback]'},{'name': 'EclSiteFooterFixedContentEUComponent', 'selector': 'ecl-site-footer-fixed-content-eu'},{'name': 'EclSiteFooterRowCommonComponent', 'selector': 'div[eclSiteFooterRowCommon]'},{'name': 'EclSiteHeaderActionComponent', 'selector': 'ecl-site-header-action'},{'name': 'EclSiteHeaderBannerTopComponent', 'selector': 'ecl-site-header-banner-top'},{'name': 'EclSiteHeaderComponent', 'selector': 'ecl-site-header'},{'name': 'EclSiteHeaderCustomActionComponent', 'selector': 'div[eclSiteHeaderCustomAction]'},{'name': 'EclSiteHeaderEnvironmentComponent', 'selector': '[eclSiteHeaderEnvironment]'},{'name': 'EclSiteHeaderLanguageComponent', 'selector': 'ecl-site-header-language'},{'name': 'EclSiteHeaderLanguagePopoverComponent', 'selector': 'ecl-site-header-language-popover'},{'name': 'EclSiteHeaderLoginComponent', 'selector': 'ecl-site-header-login'},{'name': 'EclSiteHeaderNotificationComponent', 'selector': 'ecl-site-header-notification'},{'name': 'EclSiteHeaderSearchComponent', 'selector': 'ecl-site-header-search'},{'name': 'EclSliderPagerComponent', 'selector': 'ecl-slider-pager'},{'name': 'EclSloganTickerComponent', 'selector': 'ecl-slogan-ticker'},{'name': 'EclSocialMediaFollowComponent', 'selector': 'ecl-social-media-follow'},{'name': 'EclSocialMediaFollowItemComponent', 'selector': 'ecl-social-media-follow-item'},{'name': 'EclSplashPageComponent', 'selector': 'div[eclSplashPage]'},{'name': 'EclSplashPageLanguageCategoryComponent', 'selector': 'div[eclSplashPageLanguageCategory]'},{'name': 'EclSplashPageLanguageContainerComponent', 'selector': '[eclSplashPageLanguageContainer]'},{'name': 'EclSplashPageLanguageLinkComponent', 'selector': 'a[eclSplashPageLanguageLink]'},{'name': 'EclSpotlightComponent', 'selector': 'section[eclSpotlight]'},{'name': 'EclSpotlightLinkComponent', 'selector': 'a[eclSpotlightLink]'},{'name': 'EclStickyContainerComponent', 'selector': 'ecl-sticky-container'},{'name': 'EclStoryCardComponent', 'selector': 'section[eclStoryCard]'},{'name': 'EclStoryCardGridDetailsComponent', 'selector': '[eclStoryCardGridDetails]'},{'name': 'EclStoryCardItemComponent', 'selector': 'li[eclStoryCardItem]'},{'name': 'EclTabComponent', 'selector': 'div[eclTab]'},{'name': 'EclTabLabelComponent', 'selector': 'ecl-tab-label'},{'name': 'EclTableSortButtonComponent', 'selector': 'button[eclTableSortButton]'},{'name': 'EclTabsComponent', 'selector': 'div[eclTabs]'},{'name': 'EclTagComponent', 'selector': 'ecl-tag, [eclTag]'},{'name': 'EclTextMediaComponent', 'selector': 'article[eclTextMedia]'},{'name': 'EclTimelineComponent', 'selector': 'ol[eclTimeline]'},{'name': 'EclTimelineItemComponent', 'selector': 'li[eclTimelineItem]'},{'name': 'EclTimelineItemTogglerComponent', 'selector': 'li[eclTimelineItemToggler]'}];
     var DIRECTIVES = [{'name': 'EclAccordionContentDirective', 'selector': 'div[eclAccordionContent]'},{'name': 'EclAccordionDirective', 'selector': 'div[eclAccordion]'},{'name': 'EclAccordionItemDirective', 'selector': 'details[eclAccordionItem]'},{'name': 'EclAccordionToggleIconDirective', 'selector': '[eclAccordionToggleIcon]'},{'name': 'EclAddToCalendarActionDirective', 'selector': 'div[eclAddToCalendarAction]'},{'name': 'EclAnimatedNumbersIconDirective', 'selector': '[eclAnimatedNumbersIcon]'},{'name': 'EclAnimatedNumbersItemsDirective', 'selector': 'ul[eclAnimatedNumbersItems]'},{'name': 'EclAnimatedNumbersSourceDirective', 'selector': 'a[eclAnimatedNumbersSource]'},{'name': 'EclAnimatedNumbersSourcesItemDirective', 'selector': 'li[eclAnimatedNumbersSourcesItem]'},{'name': 'EclAnimatedNumbersSourcesListDirective', 'selector': 'ul[eclAnimatedNumbersSourcesList]'},{'name': 'EclBannerDescriptionDirective', 'selector': '[eclBannerDescription]'},{'name': 'EclBannerDescriptionLinkDirective', 'selector': '[eclBannerDescriptionLink]'},{'name': 'EclBannerDescriptionTextDirective', 'selector': '[eclBannerDescriptionText]'},{'name': 'EclBannerImageDirective', 'selector': 'img[eclBannerImage]'},{'name': 'EclBannerPictureDirective', 'selector': 'picture[eclBannerPicture]'},{'name': 'EclBannerTitleDirective', 'selector': '[eclBannerTitle]'},{'name': 'EclBannerTitleLinkDirective', 'selector': '[eclBannerTitleLink]'},{'name': 'EclBannerTitleTextDirective', 'selector': '[eclBannerTitleText]'},{'name': 'EclBannerVideoDirective', 'selector': 'video[eclBannerVideo]'},{'name': 'ECLBaseDirective', 'selector': '[eclBase]'},{'name': 'EclBlockquoteImageDirective', 'selector': 'img[eclBlockquoteImage]'},{'name': 'EclBlockquotePictureDirective', 'selector': 'picture[eclBlockquotePicture]'},{'name': 'EclBreadcrumbContainerDirective', 'selector': '[eclBreadcrumbContainer]'},{'name': 'EclButtonIconContainerDirective', 'selector': '[eclButtonIconContainer]'},{'name': 'EclButtonLabelDirective', 'selector': '[eclButtonLabel]'},{'name': 'EclCardImageDirective', 'selector': 'img[eclCardImage]'},{'name': 'EclCardPictureDirective', 'selector': 'picture[eclCardPicture]'},{'name': 'EclCheckboxDirective', 'selector': '[eclCheckbox]'},{'name': 'EclCheckboxInputDirective', 'selector': 'input[eclCheckboxInput]'},{'name': 'ECLClickOutsideDirective', 'selector': '[eclClickOutside]'},{'name': 'EclContainerDirective', 'selector': '[eclContainer]'},{'name': 'EclContentBlockDescriptionDirective', 'selector': '[eclContentBlockDescription]'},{'name': 'EclContentBlockLabelDirective', 'selector': '[eclContentBlockLabel]'},{'name': 'EclContentBlockLabelsDirective', 'selector': '[eclContentBlockLabels]'},{'name': 'EclContentBlockLinkDirective', 'selector': '[eclContentBlockLink]'},{'name': 'EclContentBlockLinksContainerDirective', 'selector': '[eclContentBlockLinksContainer]'},{'name': 'EclContentBlockLinksDirective', 'selector': '[eclContentBlockLinks]'},{'name': 'EclContentBlockListContainerDirective', 'selector': '[eclContentBlockListContainer]'},{'name': 'EclContentBlockListDirective', 'selector': '[eclContentBlockList]'},{'name': 'EclContentBlockPrimaryMetaDirective', 'selector': '[eclContentBlockPrimaryMeta]'},{'name': 'EclContentBlockPrimaryMetasDirective', 'selector': '[eclContentBlockPrimaryMetas]'},{'name': 'EclContentBlockSecondaryMetaDirective', 'selector': '[eclContentBlockSecondaryMeta]'},{'name': 'EclContentBlockSecondaryMetaIconDirective', 'selector': '[eclContentBlockSecondaryMetaIcon]'},{'name': 'EclContentBlockSecondaryMetaLabelDirective', 'selector': '[eclContentBlockSecondaryMetaLabel]'},{'name': 'EclContentBlockSecondaryMetasDirective', 'selector': '[eclContentBlockSecondaryMetas]'},{'name': 'EclContentBlockTagDirective', 'selector': '[eclContentBlockTag]'},{'name': 'EclContentBlockTagsDirective', 'selector': '[eclContentBlockTags]'},{'name': 'EclContentBlockTitleDirective', 'selector': '[eclContentBlockTitle]'},{'name': 'EclContentItemImageDirective', 'selector': '[eclContentItemImage]'},{'name': 'EclContentItemPictureDirective', 'selector': '[eclContentItemPicture]'},{'name': 'EclDatePickerDirective', 'selector': 'input[eclDatePicker]'},{'name': 'EclDatePickerDuetDirective', 'selector': 'duet-date-picker[eclDatePicker]'},{'name': 'EclDescriptionListDefinitionItemDirective', 'selector': '[eclDescriptionListDefinitionItem]'},{'name': 'EclDescriptionListDefinitionListDirective', 'selector': '[eclDescriptionListDefinitionList]'},{'name': 'EclDescriptionListDirective', 'selector': '[eclDescriptionList]'},{'name': 'EclDescriptionListTermDirective', 'selector': '[eclDescriptionListTerm]'},{'name': 'EclDividerDirective', 'selector': 'hr[eclDivider]'},{'name': 'EclFactFiguresDescriptionDirective', 'selector': 'div[eclFactFiguresDescription]'},{'name': 'EclFactFiguresSourceDirective', 'selector': 'a[eclFactFiguresSource]'},{'name': 'EclFactFiguresSourcesItemDirective', 'selector': 'li[eclFactFiguresSourcesItem]'},{'name': 'EclFactFiguresSourcesListDirective', 'selector': 'ul[eclFactFiguresSourcesList]'},{'name': 'EclFeaturedItemLinkDirective', 'selector': '[eclFeaturedItemLink]'},{'name': 'EclFeaturedMediaAnchorDirective', 'selector': '[eclFeaturedMediaAnchor]'},{'name': 'EclFeedbackHiddenDirective', 'selector': '[eclFeedbackHidden]'},{'name': 'EclFeedbackMessageDirective', 'selector': '[eclFeedbackMessage]'},{'name': 'EclFileDownloadDirective', 'selector': '[eclFileDownload]'},{'name': 'EclFileImageDirective', 'selector': 'img[eclFileImage]'},{'name': 'EclFileMetaDirective', 'selector': '[eclFileMeta]'},{'name': 'EclFilePictureDirective', 'selector': 'picture[eclFilePicture]'},{'name': 'EclFilePreviewDirective', 'selector': '[eclFilePreview]'},{'name': 'EclFileTitleDirective', 'selector': '[eclFileTitle]'},{'name': 'EclFileTranslationDownloadDirective', 'selector': '[eclFileTranslationDownload]'},{'name': 'EclFileUploadDirective', 'selector': '[eclFileUpload]'},{'name': 'ECLFormLabelOptionalDirective', 'selector': '[eclFormLabelOptional]'},{'name': 'EclGalleryMediaDirective', 'selector': '[eclGalleryMedia], [eclGalleryImage]'},{'name': 'EclGalleryPictureDirective', 'selector': 'picture[eclGalleryPicture]'},{'name': 'EclGalleryThumbnailDirective', 'selector': 'picture[eclGalleryThumbnail]'},{'name': 'EclHelpBlockDirective', 'selector': '[eclHelpBlock]'},{'name': 'EclHelpHiddenDirective', 'selector': '[eclHelpHidden]'},{'name': 'EclHiddenDirective', 'selector': '[eclHidden]'},{'name': 'EclHighlightBoxDescriptionDirective', 'selector': '[eclHighlightBoxDescription]'},{'name': 'EclHighlightBoxIconDirective', 'selector': 'ecl-icon[eclHighlightBoxIcon]'},{'name': 'EclHighlightBoxLinkDirective', 'selector': 'a[eclHighlightBoxLink]'},{'name': 'EclHighlightBoxTitleDirective', 'selector': '[eclHighlightBoxTitle]'},{'name': 'EclHighlightedSearchSuggestionsDirective', 'selector': '[eclHighlightedSearchSuggestions]'},{'name': 'EclIndicatorLabelDirective', 'selector': '[eclIndicatorLabel]'},{'name': 'EclInpageNavigationListDirective', 'selector': 'ul[eclInpageNavigationList]'},{'name': 'EclLabelDirective', 'selector': '[eclLabel]'},{'name': 'EclLayoutItemDirective', 'selector': '[eclLayoutItem]'},{'name': 'EclLayoutWrapperDescriptionDirective', 'selector': '[eclLayoutWrapperDescription]'},{'name': 'EclLayoutWrapperTitleDirective', 'selector': '[eclLayoutWrapperTitle]'},{'name': 'EclLayoutWrapperViewAllDirective', 'selector': '[eclLayoutWrapperViewAll]'},{'name': 'EclLinkDirective', 'selector': '[eclLink]'},{'name': 'EclLinkIconContainerDirective', 'selector': '[eclLinkIconContainer]'},{'name': 'EclLinkLabelDirective', 'selector': '[eclLinkLabel]'},{'name': 'EclListIllustrationIconDirective', 'selector': '[eclListIllustrationIcon]'},{'name': 'EclListIllustrationImageDirective', 'selector': 'img[eclListIllustrationImage]'},{'name': 'EclListIllustrationPictureDirective', 'selector': 'picture[eclListIllustrationPicture]'},{'name': 'EclLoadingIndicatorLabelDirective', 'selector': '[eclLoadingIndicatorLabel]'},{'name': 'EclLoadingIndicatorOverlayDirective', 'selector': '[eclLoadingIndicatorOverlay]'},{'name': 'EclMediaContainerCaptionDirective', 'selector': 'figcaption[eclMediaContainerCaption]'},{'name': 'EclMediaContainerCreditDirective', 'selector': 'footer[eclMediaContainerCredit]'},{'name': 'EclMediaContainerIframeDirective', 'selector': 'iframe[eclMediaContainerIframe]'},{'name': 'EclMediaContainerItemAudioDescriptionDirective', 'selector': '[eclMediaContainerItemAudioDescription]'},{'name': 'EclMediaContainerItemDirective', 'selector': '[eclMediaContainerItem], img[eclMediaContainerImage]'},{'name': 'EclMediaContainerPictureDirective', 'selector': 'picture[eclMediaContainerPicture]'},{'name': 'EclMegaMenuContainerDirective', 'selector': 'div[eclMegaMenuContainer]'},{'name': 'EclMegaMenuFeaturedImageDirective', 'selector': '[eclMegaMenuFeaturedImage]'},{'name': 'EclMegaMenuFeaturedListDirective', 'selector': '[eclMegaMenuFeaturedList]'},{'name': 'EclMegaMenuFeaturedListItemDescriptionDirective', 'selector': '[eclMegaMenuFeaturedListItemDescription]'},{'name': 'EclMegaMenuFeaturedListItemDirective', 'selector': '[eclMegaMenuFeaturedListItem]'},{'name': 'EclMegaMenuFeaturedPictureDirective', 'selector': '[eclMegaMenuFeaturedPicture]'},{'name': 'EclMegaMenuListDirective', 'selector': 'ul[eclMegaMenuList]'},{'name': 'EclMegaMenuSpacerDirective', 'selector': 'li[eclMegaMenuSpacer]'},{'name': 'EclMegaMenuSublistDirective', 'selector': 'ul[eclMegaMenuSublist]'},{'name': 'EclModalBodyFixedContentDirective', 'selector': '[eclModalBodyFixedContent]'},{'name': 'EclModalCloseDirective', 'selector': '[eclModalClose]'},{'name': 'EclModalTriggerDirective', 'selector': '[eclModalTriggerFor]'},{'name': 'EclMultiselectOptionDirective', 'selector': 'optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]'},{'name': 'EclNavigationListImageDirective', 'selector': 'img[eclNavigationListImage]'},{'name': 'EclNavigationListPictureDirective', 'selector': 'picture[eclNavigationListPicture]'},{'name': 'EclNewsTickerIconDirective', 'selector': '[eclNewsTickerIcon]'},{'name': 'EclNotificationIconDirective', 'selector': '[eclNotificationIcon]'},{'name': 'EclNotificationLinkDirective', 'selector': '[eclNotificationLink]'},{'name': 'EclNotificationTitleDirective', 'selector': '[eclNotificationTitle]'},{'name': 'EclOrderedListDirective', 'selector': '[eclOrderedList]'},{'name': 'EclOrderedListItemDirective', 'selector': '[eclOrderedListItem]'},{'name': 'EclPageHeaderBackgroundImageDirective', 'selector': '[eclPageHeaderBackgroundImage]'},{'name': 'EclPageHeaderBackgroundPictureDirective', 'selector': '[eclPageHeaderBackgroundPicture]'},{'name': 'EclPageHeaderContainerDirective', 'selector': '[eclPageHeaderContainer]'},{'name': 'EclPageHeaderDescriptionDirective', 'selector': 'p[eclPageHeaderDescription]'},{'name': 'EclPageHeaderDescriptionPictureDirective', 'selector': '[eclPageHeaderDescriptionPicture]'},{'name': 'EclPageHeaderDescriptionThumbnailDirective', 'selector': '[eclPageHeaderDescriptionThumbnail], img[eclPageHeaderDescriptionImage]'},{'name': 'EclPageHeaderExpandableHeaderDirective', 'selector': '[eclPageHeaderExpandableHeader]'},{'name': 'EclPageHeaderInfoDirective', 'selector': '[eclPageHeaderInfo]'},{'name': 'EclPageHeaderMetaDirective', 'selector': '[eclPageHeaderMeta]'},{'name': 'EclPageHeaderMetaItemDirective', 'selector': '[eclPageHeaderMetaItem]'},{'name': 'EclPageHeaderTitleDirective', 'selector': '[eclPageHeaderTitle]'},{'name': 'EclPageInformationDirective', 'selector': '[eclPageInformation]'},{'name': 'EclPaginationListDirective', 'selector': '[eclPaginationList]'},{'name': 'EclPopoverContentDirective', 'selector': '[eclPopoverContent]'},{'name': 'EclPopoverToggleDirective', 'selector': '[eclPopoverToggle]'},{'name': 'EclQuizListDirective', 'selector': 'ol[eclQuizList]'},{'name': 'EclRadioDirective', 'selector': '[eclRadio]'},{'name': 'EclRadioInputDirective', 'selector': 'input[eclRadioInput]'},{'name': 'EclRangeDirective', 'selector': 'input[eclRange]'},{'name': 'EclSelectDirective', 'selector': 'select[eclSelect]'},{'name': 'EclSiteFooterActionButtonDirective', 'selector': 'a[eclSiteFooterActionButton]'},{'name': 'EclSiteFooterColumnDirective', 'selector': '[eclSiteFooterColumn]'},{'name': 'EclSiteFooterCoownerItemDirective', 'selector': '[eclSiteFooterCoownerItem]'},{'name': 'EclSiteFooterCoownerListDirective', 'selector': '[eclSiteFooterCoownerList]'},{'name': 'EclSiteFooterDescriptionDirective', 'selector': '[eclSiteFooterDescription]'},{'name': 'EclSiteFooterDescriptionNameDirective', 'selector': '[eclSiteFooterDescriptionName]'},{'name': 'EclSiteFooterLinkDirective', 'selector': '[eclSiteFooterLink]'},{'name': 'EclSiteFooterListDirective', 'selector': '[eclSiteFooterList]'},{'name': 'EclSiteFooterListItemDirective', 'selector': '[eclSiteFooterListItem]'},{'name': 'EclSiteFooterLogoImageDirective', 'selector': 'img[eclSiteFooterLogoImage]'},{'name': 'EclSiteFooterLogoLinkDirective', 'selector': '[eclSiteFooterLogoLink]'},{'name': 'EclSiteFooterPictureDirective', 'selector': 'picture[eclSiteFooterPicture]'},{'name': 'EclSiteFooterRowDirective', 'selector': '[eclSiteFooterRow]'},{'name': 'EclSiteFooterSectionDirective', 'selector': '[eclSiteFooterSection]'},{'name': 'EclSiteFooterSocialMediaDirective', 'selector': '[eclSiteFooterSocialMedia]'},{'name': 'EclSiteFooterTitleDirective', 'selector': '[eclSiteFooterTitle]'},{'name': 'EclSiteFooterTitleLinkDirective', 'selector': '[eclSiteFooterTitleLink]'},{'name': 'EclSiteHeaderCtaDirective', 'selector': '[eclSiteHeaderCta]'},{'name': 'EclSiteHeaderCustomActionContentDirective', 'selector': 'div[eclSiteHeaderCustomActionContent]'},{'name': 'EclSiteHeaderCustomActionLinkDirective', 'selector': 'a[eclSiteHeaderCustomActionLink]'},{'name': 'EclSiteHeaderCustomActionTitleDirective', 'selector': 'div[eclSiteHeaderCustomActionTitle]'},{'name': 'EclSiteHeaderImageDirective', 'selector': '[eclSiteHeaderImage]'},{'name': 'EclSiteHeaderLinkDirective', 'selector': '[eclSiteHeaderLink]'},{'name': 'EclSiteHeaderLoginDescriptionDirective', 'selector': '[eclSiteHeaderLoginDescription]'},{'name': 'EclSiteHeaderLoginSeparatorDirective', 'selector': '[eclSiteHeaderLoginSeparator]'},{'name': 'EclSiteHeaderPictureDirective', 'selector': '[eclSiteHeaderPicture]'},{'name': 'EclSloganTickerListDirective', 'selector': 'ul[eclSloganTickerList]'},{'name': 'EclSloganTickerSlideDirective', 'selector': 'li[eclSloganTickerSlide]'},{'name': 'EclSocialMediaFollowLinkDirective', 'selector': '[eclSocialMediaFollowLink]'},{'name': 'EclSplashPageLanguageItemDirective', 'selector': '[eclSplashPageLanguageItem]'},{'name': 'EclSplashPageLanguageListDirective', 'selector': '[eclSplashPageLanguageList]'},{'name': 'EclSplashPageLogoImageDirective', 'selector': 'img[eclSplashPageLogoImage]'},{'name': 'EclSplashPageLogoLinkDirective', 'selector': 'img[eclSplashPageLogoLink]'},{'name': 'EclSplashPagePictureDirective', 'selector': 'picture[eclSplashPagePicture]'},{'name': 'EclSpotlightImageDirective', 'selector': 'img[eclSpotlightImage]'},{'name': 'EclSpotlightPictureDirective', 'selector': 'picture[eclSpotlightPicture]'},{'name': 'EclStoryCardLinkDirective', 'selector': '[eclStoryCardLink]'},{'name': 'EclStoryCardListDirective', 'selector': 'ul[eclStoryCardList]'},{'name': 'EclStoryCardPictureDirective', 'selector': 'picture[eclStoryCardPicture]'},{'name': 'EclTableBodyDirective', 'selector': '[eclTableBody]'},{'name': 'EclTableCaptionDirective', 'selector': 'caption[eclTableCaption]'},{'name': 'EclTableCellDirective', 'selector': '[eclTableCell]'},{'name': 'EclTableCellGroupDirective', 'selector': '[eclTableCellGroup]'},{'name': 'EclTableDirective', 'selector': '[eclTable]'},{'name': 'EclTableHeadDirective', 'selector': '[eclTableHead]'},{'name': 'EclTableHeaderDirective', 'selector': '[eclTableHeader]'},{'name': 'EclTableResponsiveDirective', 'selector': '[eclTableResponsive]'},{'name': 'EclTableRowDirective', 'selector': '[eclTableRow]'},{'name': 'EclTagIconExternalDirective', 'selector': '[eclTagIconExternal]'},{'name': 'EclTagSetDirective', 'selector': '[eclTagSet]'},{'name': 'EclTagSetItemDirective', 'selector': '[eclTagSetItem]'},{'name': 'EclTextAreaDirective', 'selector': 'textarea[eclTextArea]'},{'name': 'EclTextInputDirective', 'selector': 'input[eclTextInput]'},{'name': 'EclTextMediaContainerDirective', 'selector': 'ecl-media-container[eclTextMediaContainer]'},{'name': 'EclTextMediaDescriptionDirective', 'selector': 'div[eclTextMediaDescription]'},{'name': 'EclTextMediaLinkDirective', 'selector': 'a[eclTextMediaLink]'},{'name': 'EclTextMediaMediaAnchorDirective', 'selector': 'img[eclTextMediaImgAnchor]'},{'name': 'EclTextMediaMicroTitleDirective', 'selector': 'div[eclTextMediaMicroTitle]'},{'name': 'EclTextMediaTitleDirective', 'selector': 'div[eclTextMediaTitle]'},{'name': 'EclTimelineItemLabelDirective', 'selector': '[eclTimelineItemLabel]'},{'name': 'EclTimelineItemTitleDirective', 'selector': '[eclTimelineItemTitle]'},{'name': 'EclTimelineSetDirective', 'selector': '[eclTimelineSet]'},{'name': 'EclTooltipDirective', 'selector': '[eclTooltip]'},{'name': 'EclUnorderedListDirective', 'selector': '[eclUnorderedList]'},{'name': 'EclUnorderedListItemDirective', 'selector': '[eclUnorderedListItem]'}];
     var ACTUAL_COMPONENT = {'name': 'EclCarouselComponent'};
 </script>