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

package/docs/directives/EclFileTitleDirective.html

@@ -113,6 +113,13 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive to style a title element in an ECL file component.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -237,6 +244,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>ID attribute for the title element.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -313,6 +326,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the ECL file title class to the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -418,6 +437,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the ECL file title class to the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/directives/EclFileTranslationDownloadDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive to apply the correct styling class for a translation download link
+inside a file component.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -294,6 +302,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the ECL translation download class to the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -399,6 +413,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the ECL translation download class to the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/directives/EclIndicatorDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive for indicating special content inside the ECL Button.
+Automatically applies the <code>ecl-indicator</code> CSS class.</p>
+
+            </p>
 
 
 
@@ -204,6 +212,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the <code>ecl-indicator</code> CSS class.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -243,6 +257,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the <code>ecl-indicator</code> CSS class.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/directives/EclLabelDirective.html

@@ -113,6 +113,15 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive for applying ECL label styles.</p>
+<p>Supports multiple visual variants based on importance or context.
+Adds appropriate ECL classes dynamically.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -241,6 +250,18 @@
                         <i>Default value : </i><code>&#x27;low&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Defines the visual variant of the label.</p>
+<ul>
+<li><code>&#39;low&#39;</code> – default styling</li>
+<li><code>&#39;medium&#39;</code> – medium emphasis</li>
+<li><code>&#39;high&#39;</code> – high emphasis</li>
+<li><code>&#39;highlight&#39;</code> – special highlight</li>
+</ul>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -312,6 +333,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>CSS classes applied to the host element.
+Combines base ECL label class with the variant modifier.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -404,6 +432,18 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>CSS classes applied to the host element.
+Combines base ECL label class with the variant modifier.</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/EclListIllustrationIconDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive representing an icon within an ECL illustration list item.</p>
+<p>Applies the correct ECL class for list item icons.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -294,6 +302,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the ECL class for illustration item icons.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -399,6 +413,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the ECL class for illustration item icons.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/directives/EclListIllustrationImageDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive applied to <code>&lt;img&gt;</code> elements within ECL list illustrations.</p>
+<p>Supports square variant and size options for image styling.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -244,6 +252,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>If true, image is styled with square dimensions.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -265,6 +279,13 @@
                         <i>Default value : </i><code>&#x27;m&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Defines the size variant of the image.
+Possible values: <code>&#39;s&#39;</code>, <code>&#39;m&#39;</code>, <code>&#39;l&#39;</code>.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -336,6 +357,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Computes the appropriate ECL CSS classes for the image.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -428,6 +455,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 appropriate ECL CSS classes for the image.</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/EclListIllustrationPictureDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive applied to <code>&lt;picture&gt;</code> elements within ECL list illustrations.</p>
+<p>Adds the necessary ECL CSS classes for illustration pictures.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -288,6 +296,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the base ECL picture classes for list illustration pictures.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -380,6 +394,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 base ECL picture classes for list illustration pictures.</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/EclLoadingIndicatorLabelDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive for styling the label text of an ECL loading indicator.</p>
+<p>Adds the <code>ecl-spinner__text</code> class to the host element.</p>
+
+            </p>
 
 
 
@@ -204,6 +212,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the ECL class for spinner label text.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -243,6 +257,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the ECL class for spinner label text.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/directives/EclLoadingIndicatorOverlayDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive that adds an overlay layer to an ECL loading indicator.</p>
+<p>Automatically applies the ECL spinner overlay classes.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -288,6 +296,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the CSS classes for the spinner overlay.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -380,6 +394,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 CSS classes for the spinner overlay.</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/EclModalBodyFixedContentDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive for styling fixed content inside the modal body.</p>
+<p>Applies the appropriate CSS class to mark the element as fixed inside the modal body.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -294,6 +302,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the <code>ecl-modal__body-fixed</code> class to the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -399,6 +413,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the <code>ecl-modal__body-fixed</code> class to the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/directives/EclModalCloseDirective.html

@@ -113,6 +113,14 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive that allows an element to close the modal on click.</p>
+<p>Can emit a result and indicate the role (e.g., confirm, cancel).</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -243,6 +251,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Optional result value to emit when modal is closed.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -259,6 +273,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Optional role associated with the modal close action (e.g., confirm, cancel).</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -326,6 +346,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event emitted when the element is clicked and the modal should be closed.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -353,6 +379,13 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Handles click events and emits the <code>modalClose</code> event.</p>
+</div>
+
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>
@@ -392,6 +425,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles click events and emits the <code>modalClose</code> event.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>

package/docs/directives/EclModalTriggerDirective.html

@@ -113,6 +113,13 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive used to trigger opening of a target ECL modal on click.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -226,6 +233,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Reference to the modal component that should be opened on click.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -302,6 +315,13 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Handles click event and opens the target modal.</p>
+</div>
+
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>
@@ -341,6 +361,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles click event and opens the target modal.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>

package/docs/directives/EclNewsTickerIconDirective.html

@@ -113,6 +113,13 @@
         </p>
 
 
+            <p class="comment">
+                <h3>Description</h3>
+            </p>
+            <p class="comment">
+                <p>Directive to mark and style the icon inside a news ticker item.</p>
+
+            </p>
 
             <p class="comment">
                 <h3>Extends</h3>
@@ -294,6 +301,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Adds the <code>ecl-news-ticker__icon</code> class to the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -399,6 +412,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Adds the <code>ecl-news-ticker__icon</code> class to the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>