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

package/docs/components/EclNewsTickerComponent.html

@@ -441,6 +441,13 @@
                         <i>Default value : </i><code>true</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Enables or disables automatic cycling through ticker items.
+Defaults to <code>true</code>.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -508,6 +515,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emits when the visible news ticker item changes.
+The payload is an instance of <code>EclNewsTickerItemEvent</code>.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -561,6 +575,13 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Handles window resize and recalculates the layout.</p>
+</div>
+
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>
@@ -591,6 +612,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Cancels the automatic cycling of the ticker items.</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>
@@ -622,6 +645,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Moves to the next slide and emits <code>itemSwitch</code> event.</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>
@@ -653,6 +678,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles mouse out event from a ticker item.
+Resumes autoplay if it was paused due to 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>
@@ -684,6 +712,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles mouse over event on a ticker item.
+Temporarily pauses 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>
@@ -715,6 +746,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles &quot;next&quot; button click.
+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>
@@ -746,6 +780,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles focus event on the &quot;Pause&quot; button.
+Stops autoplay and shifts focus to the &quot;Play&quot; button.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -807,6 +844,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles focus event on the &quot;Play&quot; button.
+Starts autoplay and shifts focus to the &quot;Pause&quot; button.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -868,6 +908,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles &quot;previous&quot; button click.
+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>
@@ -908,6 +951,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles window resize and recalculates the layout.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -965,6 +1010,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Moves to the previous slide and emits <code>itemSwitch</code> event.</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>
@@ -996,6 +1043,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Starts automatic cycling of the ticker items.</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>
@@ -1100,6 +1149,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Reference to the hidden first item used for looping.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1157,6 +1212,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Reference to the hidden last item used for looping.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1188,6 +1249,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Query list of all <code>EclNewsTickerItemComponent</code> children projected into this component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1219,6 +1286,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Reference to the pause button used to stop autoplay.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1250,6 +1323,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Reference to the play button used to start autoplay.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1301,6 +1380,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Reference to the container element that holds the slides.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1388,6 +1473,17 @@
                         <span class="accessor"><b>get</b><code>contentHeight()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns the height of the currently visible ticker item.</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>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>
@@ -1405,6 +1501,17 @@
                         <span class="accessor"><b>get</b><code>itemsCount()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns the number of ticker items.</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>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>
@@ -1422,6 +1529,17 @@
                         <span class="accessor"><b>get</b><code>isShowControls()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Indicates whether navigation controls should be shown.</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>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>

package/docs/components/EclNewsTickerItemComponent.html

@@ -410,6 +410,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emitted when the internal link receives focus (used to cancel autoplay).</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -432,6 +438,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets <code>aria-hidden</code> based on current slide visibility.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -453,6 +465,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets <code>inert</code> attribute when the item is not current (prevents interaction).</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -479,6 +497,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Declares ARIA role as list item for accessibility.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -500,6 +524,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>HostBinding to set the component’s CSS classes.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -606,6 +636,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Optional projected <code>ecl-link</code> element within the news ticker item.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -664,6 +700,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Declares ARIA role as list item for accessibility.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -687,6 +729,17 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>HostBinding to set the component’s CSS classes.</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>
@@ -704,6 +757,17 @@
                         <span class="accessor"><b>get</b><code>isCurrent()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Whether this slide is currently visible.</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>
+
+                                </div>
+                        </td>
+                    </tr>
 
                 <tr>
                     <td class="col-md-4">
@@ -763,6 +827,17 @@
                         <span class="accessor"><b>get</b><code>isAriahidden()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Sets <code>aria-hidden</code> based on current slide visibility.</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>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>
@@ -780,6 +855,17 @@
                         <span class="accessor"><b>get</b><code>isInert()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Sets <code>inert</code> attribute when the item is not current (prevents interaction).</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>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>

package/docs/components/EclNotificationComponent.html

@@ -368,6 +368,12 @@
                         <i>Default value : </i><code>true</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Indicates whether the close button is displayed.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -389,6 +395,13 @@
                         <i>Default value : </i><code>true</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Controls the visibility of the notification.
+When false, the component is hidden using CSS utility class.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -405,6 +418,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The title of the notification. This is displayed inside the component.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -426,6 +445,14 @@
                         <i>Default value : </i><code>&#x27;info&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Defines the visual style of the notification.
+Can be one of: &#39;info&#39; | &#39;success&#39; | &#39;warning&#39; | &#39;error&#39;.
+Default is &#39;info&#39;.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -493,6 +520,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emits an event when the close button is clicked.
+Consumers can call <code>preventDefault()</code> on the emitted event to prevent the notification from closing.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -520,6 +554,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>The ARIA role for the component. Set to &quot;alert&quot; by default.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -541,6 +581,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Computes the CSS classes applied to the host element, including the modifier for the current variant.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -562,6 +608,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the <code>ecl-u-d-none</code> utility class when the notification is not visible.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -595,6 +647,10 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles the click event on the close button.
+Emits a <code>close</code> event with an instance of <code>EclNotificationCloseEvent</code>.
+If the event is not prevented, the notification is hidden.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -756,6 +812,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>The ARIA role for the component. Set to &quot;alert&quot; by default.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -779,6 +841,17 @@
                         <span class="accessor"><b>get</b><code>isHidden()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Applies the <code>ecl-u-d-none</code> utility class when the notification is not visible.</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>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>
@@ -796,6 +869,17 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Computes the CSS classes applied to the host element, including the modifier for the current variant.</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>
@@ -813,6 +897,17 @@
                         <span class="accessor"><b>get</b><code>title()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns the default title text based on the current variant.</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>
@@ -830,6 +925,17 @@
                         <span class="accessor"><b>get</b><code>icon()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns the icon name based on the current variant.</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>
@@ -847,6 +953,17 @@
                         <span class="accessor"><b>get</b><code>titleAndIconBaseOnVariant()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns a mapping of title and icon based on the current variant.</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>    <code>literal type</code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>