@eui/ecl 19.3.0-snapshot-1749041696283 → 19.3.0-snapshot-1749064223062

package/docs/components/EclCarouselComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component responsible for rendering a carousel (slideshow) with autoplay, keyboard navigation,
+and support for RTL layouts. Extends the ECLBaseDirective for consistent styling and behavior.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -154,7 +162,7 @@
             <tr>
                 <td class="col-md-3">styles</td>
                 <td class="col-md-9"><code>
-    				.ecl-carousel__slides {
+            .ecl-carousel__slides {
                 transition-duration: 0.4s;
             }
         </code></td>
@@ -509,6 +517,12 @@
                         <i>Default value : </i><code>&#x27;Carousel description here&#x27;</code>
                     </td>
                 </tr>
+                <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">
@@ -525,6 +539,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Determines whether the carousel should autoplay.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -546,6 +566,12 @@
                         <i>Default value : </i><code>5000</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Interval in milliseconds between automatic slide transitions.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -613,6 +639,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event emitted when a slide change occurs.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -640,6 +672,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Aria-role description for screen readers, identifying this component as a carousel.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -661,6 +699,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Returns the computed CSS class list for the component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -694,6 +738,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Sets focus on the specified button.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -757,6 +803,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Computes the left offset to shift the slides container.</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>
@@ -790,6 +838,8 @@
 
             <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>
 
                         <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>
@@ -823,6 +873,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Calculates the total width of the slides container based on the number of slides.</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>
@@ -856,6 +908,9 @@
 
             <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>
 
                         <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>
@@ -889,6 +944,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Checks whether there are enough slides to render controls.</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>
@@ -920,6 +977,8 @@
 
             <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>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -983,6 +1042,8 @@
 
             <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>
 
                         <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>
@@ -1016,6 +1077,8 @@
 
             <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>
 
                         <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>
@@ -1047,6 +1110,8 @@
 
             <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>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -1104,6 +1169,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles keyboard navigation for the navigation buttons.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -1177,6 +1244,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Navigates to the next 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>
@@ -1208,6 +1277,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Stops autoplay and focuses the play 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>
@@ -1239,6 +1310,8 @@
 
             <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>
@@ -1270,6 +1343,8 @@
 
             <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>
@@ -1327,6 +1402,8 @@
 
             <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>
@@ -1358,6 +1435,8 @@
 
             <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>
@@ -1419,6 +1498,8 @@
 
             <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>
@@ -1450,6 +1531,8 @@
 
             <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>
@@ -1559,6 +1642,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Aria-role description for screen readers, identifying this component as a carousel.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1590,6 +1679,12 @@
                     </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>
@@ -1621,6 +1716,12 @@
                     </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>
@@ -1642,6 +1743,12 @@
                     </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>
@@ -1663,6 +1770,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Indicates whether autoplay is currently active.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1684,6 +1797,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Indicates whether the layout is currently in RTL mode.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1715,6 +1834,12 @@
                     </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>
@@ -1746,6 +1871,12 @@
                     </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>
@@ -1777,6 +1908,12 @@
                     </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>
@@ -1808,6 +1945,12 @@
                     </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>
@@ -1839,6 +1982,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Collection of slide components rendered inside the carousel.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1870,6 +2019,12 @@
                     </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>
@@ -1891,6 +2046,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Width of a single slide, used for positioning and transitions.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1917,6 +2078,12 @@
                     </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>
@@ -1940,6 +2107,17 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns the computed CSS class list for the component.</p>
+</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>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>