@eui/ecl 19.3.0-snapshot-1749485430584 → 19.3.0-snapshot-1749640907205

package/docs/directives/EclTableCellDirective.html

@@ -239,6 +239,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Provides a reference to the related table header.
+Sets the <code>data-ecl-table-header</code> attribute for accessibility or responsive behavior.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -260,6 +267,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>If <code>true</code>, applies additional group styling to the cell.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -331,6 +344,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Computes and applies appropriate CSS classes for the table cell.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -423,6 +442,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 and applies appropriate CSS classes for the table cell.</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>

package/docs/directives/EclTableCellGroupDirective.html

@@ -285,6 +285,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Sets the <code>data-ecl-table-header-group</code> attribute to link to a header group.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -356,6 +362,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the group-specific cell class.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -448,6 +460,17 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Applies the group-specific cell class.</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>

package/docs/directives/EclTableDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive for styling and managing behavior of ECL tables.</p>
+<p>Applies ECL-specific table classes and emits sort events when columns are sorted.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -323,6 +331,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The HTML ID attribute of the table. If not provided, a UUID is generated.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -344,6 +358,13 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Applies the &quot;simple&quot; table variant if true.
+Automatically enabled if no header is detected.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -365,6 +386,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Applies zebra striping to the table rows by adding the <code>ecl-table--zebra</code> class if true.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -432,6 +459,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emits an event when a column sort is triggered.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -454,6 +487,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Computed list of CSS classes for the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -560,6 +599,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>List of header directives detected in the content.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -583,6 +628,17 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Computed list of CSS classes for the host element.</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>

package/docs/directives/EclTableHeadDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive applied to <code>&lt;thead&gt;</code> elements inside a table.
+Detects header changes and manages ARIA attributes.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -353,6 +361,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the ECL head class to the element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -459,6 +473,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>List of header directives under this head element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -482,6 +502,17 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Applies the ECL head class to the element.</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>

package/docs/directives/EclTableHeaderDirective.html

@@ -377,6 +377,13 @@
                         <i>Default value : </i><code>null</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Enables sorting on the header. Also sets the <code>data-ecl-table-sort-toggle</code> attribute.
+Acts as the unique identifier for the column when sorting.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -393,6 +400,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>HTML <code>id</code> attribute of the table header cell. If not provided, a UUID will be generated.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -414,6 +427,12 @@
                         <i>Default value : </i><code>&#x27;col&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Scope of the table header. Default is <code>col</code>. Sets the <code>scope</code> attribute.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -430,6 +449,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Aria-label for the sort button that will be injected into the header cell.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -497,6 +522,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emits an <code>EclSortTableEvent</code> when the header is clicked and sorting is triggered.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -524,6 +555,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Current sort order of the column (<code>ascending</code>, <code>descending</code>, or <code>null</code>).
+This sets the <code>aria-sort</code> attribute used for accessibility.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -545,6 +583,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Computes the CSS classes applied to the header element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -573,6 +617,16 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Handles click events on the header.
+Cycles through sort orders: <code>null</code> -&gt; <code>ascending</code> -&gt; <code>descending</code> -&gt; <code>null</code>.
+Emits a <code>EclSortTableEvent</code> with the updated sort state and column identifier.</p>
+<p>Click triggers 1 -&gt; asc sorting, 2 -&gt; desc sorting then 3 -&gt; initial sorting</p>
+</div>
+
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>
@@ -612,6 +666,11 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles click events on the header.
+Cycles through sort orders: <code>null</code> -&gt; <code>ascending</code> -&gt; <code>descending</code> -&gt; <code>null</code>.
+Emits a <code>EclSortTableEvent</code> with the updated sort state and column identifier.</p>
+<p>Click triggers 1 -&gt; asc sorting, 2 -&gt; desc sorting then 3 -&gt; initial sorting</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -673,6 +732,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Clears the <code>aria-sort</code> attribute, used to visually and semantically reset previous sort state.</p>
+<p>Remove the dark arrow for current sorting from prev sorted column</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>
@@ -782,6 +844,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Current sort order of the column (<code>ascending</code>, <code>descending</code>, or <code>null</code>).
+This sets the <code>aria-sort</code> attribute used for accessibility.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -805,6 +874,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 header element.</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>

package/docs/directives/EclTableResponsiveDirective.html

@@ -288,6 +288,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the <code>ecl-table-responsive</code> class.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -380,6 +386,17 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Applies the <code>ecl-table-responsive</code> class.</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>

package/docs/directives/EclTableRowDirective.html

@@ -288,6 +288,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies <code>ecl-table__row</code> class to the table row.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -380,6 +386,17 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Applies <code>ecl-table__row</code> class to the table row.</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>