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

package/docs/components/EclExpandableComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Expandable component used to toggle visibility of additional content.
+It displays a toggle button with configurable labels and emits an event on toggle.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -152,10 +160,10 @@
             <tr>
                 <td class="col-md-3">styles</td>
                 <td class="col-md-9"><code>
-            :host {
-                display: block;
-            }
-        </code></td>
+      :host {
+        display: block;
+      }
+    </code></td>
             </tr>
 
 
@@ -294,6 +302,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The label to display when the content is collapsed.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -310,6 +324,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The label to display when the content is expanded.
+If not set, <code>collapsedLabel</code> will be used as fallback.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -331,6 +352,13 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether the expandable content is currently expanded.
+Default is <code>false</code>.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -398,6 +426,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event emitted when the expandable is toggled.
+Consumers can prevent default behavior by calling <code>event.preventDefault()</code>.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -420,6 +455,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the expandable base CSS class to the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -453,6 +494,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles click on the toggle button.
+Emits a toggle event and updates the expanded state unless prevented.</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>
@@ -543,6 +587,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 expandable base CSS class to 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/components/EclFactFiguresComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Main component for displaying a collection of fact and figure items
+in a responsive, styled grid layout.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -146,10 +154,10 @@
             <tr>
                 <td class="col-md-3">styles</td>
                 <td class="col-md-9"><code>
-            :host {
-                display: block;
-            }
-        </code></td>
+      :host {
+        display: block;
+      }
+    </code></td>
             </tr>
 
 
@@ -276,6 +284,13 @@
                         <i>Default value : </i><code>&#x27;3&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Number of columns in the layout (as string).
+Default is <code>&#39;3&#39;</code>.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -297,6 +312,16 @@
                         <i>Default value : </i><code>&#x27;l&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Font size variant. Can be:</p>
+<ul>
+<li><code>&#39;m&#39;</code> – medium (smaller text)</li>
+<li><code>&#39;l&#39;</code> – large (default)</li>
+</ul>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -318,6 +343,13 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether the content should be centered.
+Adds <code>ecl-fact-figures--centered</code> class when true.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -389,6 +421,17 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the CSS classes for the component, including layout and font size modifiers.
+Automatically adds:</p>
+<ul>
+<li><code>ecl-fact-figures--font-m</code> when <code>fontSize</code> is <code>&#39;m&#39;</code></li>
+<li><code>ecl-fact-figures--col-{n}</code> depending on the <code>columns</code> value</li>
+</ul>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -481,6 +524,22 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Sets the CSS classes for the component, including layout and font size modifiers.
+Automatically adds:</p>
+<ul>
+<li><code>ecl-fact-figures--font-m</code> when <code>fontSize</code> is <code>&#39;m&#39;</code></li>
+<li><code>ecl-fact-figures--col-{n}</code> depending on the <code>columns</code> value</li>
+</ul>
+</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/components/EclFactFiguresDescriptionComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component representing the description text of a fact or figures section.
+Typically used to provide contextual or supporting information.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -146,10 +154,10 @@
             <tr>
                 <td class="col-md-3">styles</td>
                 <td class="col-md-9"><code>
-            :host {
-                display: block;
-            }
-        </code></td>
+      :host {
+        display: block;
+      }
+    </code></td>
             </tr>
 
 
@@ -317,6 +325,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the base class <code>ecl-fact-figures__description</code> to the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -409,6 +423,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 class <code>ecl-fact-figures__description</code> to 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/components/EclFactFiguresItemComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component representing a single item within the Fact &amp; Figures block.
+Optionally handles embedded icons and applies appropriate styling.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -330,6 +338,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the base class <code>ecl-fact-figures__item</code> to the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -436,6 +450,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Query for any EclIconComponent children projected into the component.
+These icons will receive an additional CSS class.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -459,6 +480,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 class <code>ecl-fact-figures__item</code> to 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/components/EclFactFiguresTitleComponent.html

@@ -109,6 +109,13 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component representing the title section of a Fact &amp; Figures item.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -146,10 +153,10 @@
             <tr>
                 <td class="col-md-3">styles</td>
                 <td class="col-md-9"><code>
-            :host {
-                display: block;
-            }
-        </code></td>
+      :host {
+        display: block;
+      }
+    </code></td>
             </tr>
 
 
@@ -317,6 +324,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the base class <code>ecl-fact-figures__title</code> to the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -409,6 +422,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 class <code>ecl-fact-figures__title</code> to 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/components/EclFactFiguresValueComponent.html

@@ -109,6 +109,13 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component representing the value section of a Fact &amp; Figures item.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -146,10 +153,10 @@
             <tr>
                 <td class="col-md-3">styles</td>
                 <td class="col-md-9"><code>
-            :host {
-                display: block;
-            }
-        </code></td>
+      :host {
+        display: block;
+      }
+    </code></td>
             </tr>
 
 
@@ -317,6 +324,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the base class <code>ecl-fact-figures__value</code> to the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -409,6 +422,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 class <code>ecl-fact-figures__value</code> to 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/components/EclFactFiguresViewAllComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component representing the &quot;View all&quot; section in a Fact &amp; Figures block.
+Used to display a link that allows users to view additional content.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -152,10 +160,10 @@
             <tr>
                 <td class="col-md-3">styles</td>
                 <td class="col-md-9"><code>
-            :host {
-                display: block;
-            }
-        </code></td>
+      :host {
+        display: block;
+      }
+    </code></td>
             </tr>
 
 
@@ -338,6 +346,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the base class <code>ecl-fact-figures__view-all</code> to the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -444,6 +458,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Reference to the projected link directive inside the component.
+Automatically decorated with a specific class upon initialization.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -467,6 +488,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 class <code>ecl-fact-figures__view-all</code> to 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>